/*! tailwindcss v3.4.3 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid #e3e8ef;box-sizing:border-box}:after,:before{--tw-content:""}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:Inter,ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}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-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height: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{color:#9aa4b2;opacity:1}input::placeholder,textarea::placeholder{color:#9aa4b2;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]{display:none}:root,[data-theme]{background-color:var(--fallback-b1,oklch(var(--b1)/1));color:var(--fallback-bc,oklch(var(--bc)/1))}@supports not (color:oklch(0% 0 0)){:root{--fallback-p:#491eff;--fallback-pc:#d4dbff;--fallback-s:#ff41c7;--fallback-sc:#fff9fc;--fallback-a:#00cfbd;--fallback-ac:#00100d;--fallback-n:#2b3440;--fallback-nc:#d7dde4;--fallback-b1:#fff;--fallback-b2:#e5e6e6;--fallback-b3:#e5e6e6;--fallback-bc:#1f2937;--fallback-in:#00b3f0;--fallback-inc:#000;--fallback-su:#00ca92;--fallback-suc:#000;--fallback-wa:#ffc22d;--fallback-wac:#000;--fallback-er:#ff6f70;--fallback-erc:#000;color-scheme:light}@media (prefers-color-scheme:dark){:root{--fallback-p:#7582ff;--fallback-pc:#050617;--fallback-s:#ff71cf;--fallback-sc:#190211;--fallback-a:#00c7b5;--fallback-ac:#000e0c;--fallback-n:#2a323c;--fallback-nc:#a6adbb;--fallback-b1:#1d232a;--fallback-b2:#191e24;--fallback-b3:#15191e;--fallback-bc:#a6adbb;--fallback-in:#00b3f0;--fallback-inc:#000;--fallback-su:#00ca92;--fallback-suc:#000;--fallback-wa:#ffc22d;--fallback-wac:#000;--fallback-er:#ff6f70;--fallback-erc:#000;color-scheme:dark}}}html{-webkit-tap-highlight-color:transparent}:root{--in:72.06% 0.191 231.6;--su:64.8% 0.150 160;--wa:84.71% 0.199 83.87;--er:71.76% 0.221 22.18;--pc:89.824% 0.06192 275.75;--ac:15.352% 0.0368 183.61;--inc:0% 0 0;--suc:0% 0 0;--wac:0% 0 0;--erc:0% 0 0;--rounded-box:1rem;--rounded-btn:0.5rem;--rounded-badge:1.9rem;--animation-btn:0.25s;--animation-input:.2s;--btn-focus-scale:0.95;--border-btn:1px;--tab-border:1px;--tab-radius:0.5rem;--p:49.12% 0.3096 275.75;--s:69.71% 0.329 342.55;--sc:98.71% 0.0106 342.55;--a:76.76% 0.184 183.61;--n:32.1785% 0.02476 255.701624;--nc:89.4994% 0.011585 252.096176;--b1:100% 0 0;--b2:96.1151% 0 0;--b3:92.4169% 0.00108 197.137559;--bc:27.8078% 0.029596 256.847952;color-scheme:light}@media (prefers-color-scheme:dark){:root{--in:72.06% 0.191 231.6;--su:64.8% 0.150 160;--wa:84.71% 0.199 83.87;--er:71.76% 0.221 22.18;--pc:13.138% 0.0392 275.75;--sc:14.96% 0.052 342.55;--ac:14.902% 0.0334 183.61;--inc:0% 0 0;--suc:0% 0 0;--wac:0% 0 0;--erc:0% 0 0;--rounded-box:1rem;--rounded-btn:0.5rem;--rounded-badge:1.9rem;--animation-btn:0.25s;--animation-input:.2s;--btn-focus-scale:0.95;--border-btn:1px;--tab-border:1px;--tab-radius:0.5rem;--p:65.69% 0.196 275.75;--s:74.8% 0.26 342.55;--a:74.51% 0.167 183.61;--n:31.3815% 0.021108 254.139175;--nc:74.6477% 0.0216 264.435964;--b1:25.3267% 0.015896 252.417568;--b2:23.2607% 0.013807 253.100675;--b3:21.1484% 0.01165 254.087939;--bc:74.6477% 0.0216 264.435964;color-scheme:dark}}[data-theme=light]{--in:72.06% 0.191 231.6;--su:64.8% 0.150 160;--wa:84.71% 0.199 83.87;--er:71.76% 0.221 22.18;--pc:89.824% 0.06192 275.75;--ac:15.352% 0.0368 183.61;--inc:0% 0 0;--suc:0% 0 0;--wac:0% 0 0;--erc:0% 0 0;--rounded-box:1rem;--rounded-btn:0.5rem;--rounded-badge:1.9rem;--animation-btn:0.25s;--animation-input:.2s;--btn-focus-scale:0.95;--border-btn:1px;--tab-border:1px;--tab-radius:0.5rem;--p:49.12% 0.3096 275.75;--s:69.71% 0.329 342.55;--sc:98.71% 0.0106 342.55;--a:76.76% 0.184 183.61;--n:32.1785% 0.02476 255.701624;--nc:89.4994% 0.011585 252.096176;--b1:100% 0 0;--b2:96.1151% 0 0;--b3:92.4169% 0.00108 197.137559;--bc:27.8078% 0.029596 256.847952;color-scheme:light}[data-theme=dark]{--in:72.06% 0.191 231.6;--su:64.8% 0.150 160;--wa:84.71% 0.199 83.87;--er:71.76% 0.221 22.18;--pc:13.138% 0.0392 275.75;--sc:14.96% 0.052 342.55;--ac:14.902% 0.0334 183.61;--inc:0% 0 0;--suc:0% 0 0;--wac:0% 0 0;--erc:0% 0 0;--rounded-box:1rem;--rounded-btn:0.5rem;--rounded-badge:1.9rem;--animation-btn:0.25s;--animation-input:.2s;--btn-focus-scale:0.95;--border-btn:1px;--tab-border:1px;--tab-radius:0.5rem;--p:65.69% 0.196 275.75;--s:74.8% 0.26 342.55;--a:74.51% 0.167 183.61;--n:31.3815% 0.021108 254.139175;--nc:74.6477% 0.0216 264.435964;--b1:25.3267% 0.015896 252.417568;--b2:23.2607% 0.013807 253.100675;--b3:21.1484% 0.01165 254.087939;--bc:74.6477% 0.0216 264.435964;color-scheme:dark}*,: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: }.tw-dw-badge{--tw-border-opacity:1;--tw-bg-opacity:1;--tw-text-opacity:1;align-items:center;background-color:var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)));border-color:var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity)));border-radius:var(--rounded-badge,1.9rem);border-width:1px;color:var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));display:inline-flex;font-size:.875rem;height:1.25rem;justify-content:center;line-height:1.25rem;padding-left:.563rem;padding-right:.563rem;transition-duration:.2s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-timing-function:cubic-bezier(0,0,.2,1);width:-moz-fit-content;width:fit-content}@media (hover:hover){.tw-dw-label a:hover{--tw-text-opacity:1;color:var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)))}.tw-dw-menu li>:not(ul,.tw-dw-menu-title,details,.tw-dw-btn).tw-dw-active,.tw-dw-menu li>:not(ul,.tw-dw-menu-title,details,.tw-dw-btn):active,.tw-dw-menu li>details>summary:active{--tw-bg-opacity:1;--tw-text-opacity:1;background-color:var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity)));color:var(--fallback-nc,oklch(var(--nc)/var(--tw-text-opacity)))}}.tw-dw-btn{--tw-text-opacity:1;--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color);--tw-bg-opacity:1;--tw-border-opacity:1;align-items:center;animation:button-pop var(--animation-btn,.25s) ease-out;background-color:oklch(var(--btn-color,var(--b2))/var(--tw-bg-opacity));border-color:transparent;border-color:oklch(var(--btn-color,var(--b2))/var(--tw-border-opacity));border-radius:var(--rounded-btn,.5rem);border-width:var(--border-btn,1px);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);color:var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));cursor:pointer;display:inline-flex;flex-shrink:0;flex-wrap:wrap;font-size:.875rem;font-weight:600;gap:.5rem;height:3rem;justify-content:center;line-height:1em;min-height:3rem;outline-color:var(--fallback-bc,oklch(var(--bc)/1));padding-left:1rem;padding-right:1rem;text-align:center;text-decoration-line:none;transition-duration:.2s;transition-property:color,background-color,border-color,opacity,box-shadow,transform;transition-timing-function:cubic-bezier(0,0,.2,1);-webkit-user-select:none;-moz-user-select:none;user-select:none}.tw-dw-btn-disabled,.tw-dw-btn:disabled,.tw-dw-btn[disabled]{pointer-events:none}:where(.tw-dw-btn:is(input[type=checkbox])),:where(.tw-dw-btn:is(input[type=radio])){-webkit-appearance:none;-moz-appearance:none;appearance:none;width:auto}.tw-dw-btn:is(input[type=checkbox]):after,.tw-dw-btn:is(input[type=radio]):after{--tw-content:attr(aria-label);content:var(--tw-content)}.tw-dw-card{border-radius:var(--rounded-box,1rem);display:flex;flex-direction:column;position:relative}.tw-dw-card:focus{outline:2px solid transparent;outline-offset:2px}.tw-dw-card-body{display:flex;flex:1 1 auto;flex-direction:column;gap:.5rem;padding:var(--padding-card,2rem)}.tw-dw-card-body :where(p){flex-grow:1}.tw-dw-card-actions{align-items:flex-start;display:flex;flex-wrap:wrap;gap:.5rem}.tw-dw-card figure{align-items:center;display:flex;justify-content:center}.tw-dw-card.tw-dw-image-full{display:grid}.tw-dw-card.tw-dw-image-full:before{--tw-bg-opacity:1;background-color:var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity)));border-radius:var(--rounded-box,1rem);content:"";opacity:.75;position:relative;z-index:10}.tw-dw-card.tw-dw-image-full:before,.tw-dw-card.tw-dw-image-full>*{grid-column-start:1;grid-row-start:1}.tw-dw-card.tw-dw-image-full>figure img{height:100%;-o-object-fit:cover;object-fit:cover}.tw-dw-card.tw-dw-image-full>.tw-dw-card-body{--tw-text-opacity:1;color:var(--fallback-nc,oklch(var(--nc)/var(--tw-text-opacity)));position:relative;z-index:20}.tw-dw-checkbox{--chkbg:var(--fallback-bc,oklch(var(--bc)/1));--chkfg:var(--fallback-b1,oklch(var(--b1)/1));--tw-border-opacity:0.2;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-color:var(--fallback-bc,oklch(var(--bc)/var(--tw-border-opacity)));border-radius:var(--rounded-btn,.5rem);border-width:1px;cursor:pointer;flex-shrink:0;height:1.5rem;width:1.5rem}.tw-dw-drawer{display:grid;grid-auto-columns:max-content auto;position:relative;width:100%}.tw-dw-drawer-content{grid-column-start:2;grid-row-start:1;min-width:0}.tw-dw-drawer-side{align-items:flex-start;display:grid;grid-column-start:1;grid-row-start:1;grid-template-columns:repeat(1,minmax(0,1fr));grid-template-rows:repeat(1,minmax(0,1fr));height:100vh;height:100dvh;inset-inline-start:0;justify-items:start;overflow-x:hidden;overflow-y:hidden;overscroll-behavior:contain;pointer-events:none;position:fixed;top:0;width:100%}.tw-dw-drawer-side>.tw-dw-drawer-overlay{background-color:transparent;cursor:pointer;place-self:stretch;position:sticky;top:0;transition-duration:.2s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-timing-function:cubic-bezier(0,0,.2,1)}.tw-dw-drawer-side>*{grid-column-start:1;grid-row-start:1}.tw-dw-drawer-side>:not(.tw-dw-drawer-overlay){transform:translateX(-100%);transition-duration:.3s;transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-timing-function:cubic-bezier(0,0,.2,1);will-change:transform}[dir=rtl] .tw-dw-drawer-side>:not(.tw-dw-drawer-overlay){transform:translateX(100%)}.tw-dw-drawer-toggle{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:0;opacity:0;position:fixed;width:0}.tw-dw-drawer-toggle:checked~.tw-dw-drawer-side{overflow-y:auto;pointer-events:auto;visibility:visible}.tw-dw-drawer-toggle:checked~.tw-dw-drawer-side>:not(.tw-dw-drawer-overlay){transform:translateX(0)}.tw-dw-drawer-end{grid-auto-columns:auto max-content}.tw-dw-drawer-end .tw-dw-drawer-toggle~.tw-dw-drawer-content{grid-column-start:1}.tw-dw-drawer-end .tw-dw-drawer-toggle~.tw-dw-drawer-side{grid-column-start:2;justify-items:end}.tw-dw-drawer-end .tw-dw-drawer-toggle~.tw-dw-drawer-side>:not(.tw-dw-drawer-overlay){transform:translateX(100%)}[dir=rtl] .tw-dw-drawer-end .tw-dw-drawer-toggle~.tw-dw-drawer-side>:not(.tw-dw-drawer-overlay){transform:translateX(-100%)}.tw-dw-drawer-end .tw-dw-drawer-toggle:checked~.tw-dw-drawer-side>:not(.tw-dw-drawer-overlay){transform:translateX(0)}.tw-dw-dropdown{display:inline-block;position:relative}.tw-dw-dropdown>:not(summary):focus{outline:2px solid transparent;outline-offset:2px}.tw-dw-dropdown .tw-dw-dropdown-content{position:absolute}.tw-dw-dropdown:is(:not(details)) .tw-dw-dropdown-content{--tw-scale-x:.95;--tw-scale-y:.95;opacity:0;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));transform-origin:top;transition-duration:.2s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-timing-function:cubic-bezier(0,0,.2,1);visibility:hidden}.tw-dw-dropdown-end .tw-dw-dropdown-content{inset-inline-end:0}.tw-dw-dropdown-left .tw-dw-dropdown-content{bottom:auto;inset-inline-end:100%;top:0;transform-origin:right}.tw-dw-dropdown-right .tw-dw-dropdown-content{bottom:auto;inset-inline-start:100%;top:0;transform-origin:left}.tw-dw-dropdown-bottom .tw-dw-dropdown-content{bottom:auto;top:100%;transform-origin:top}.tw-dw-dropdown-top .tw-dw-dropdown-content{bottom:100%;top:auto;transform-origin:bottom}.tw-dw-dropdown-end.tw-dw-dropdown-left .tw-dw-dropdown-content,.tw-dw-dropdown-end.tw-dw-dropdown-right .tw-dw-dropdown-content{bottom:0;top:auto}.tw-dw-dropdown.tw-dw-dropdown-open .tw-dw-dropdown-content,.tw-dw-dropdown:focus-within .tw-dw-dropdown-content,.tw-dw-dropdown:not(.tw-dw-dropdown-hover):focus .tw-dw-dropdown-content{opacity:1;visibility:visible}@media (hover:hover){.tw-dw-dropdown.tw-dw-dropdown-hover:hover .tw-dw-dropdown-content{opacity:1;visibility:visible}.tw-dw-btn:hover{--tw-border-opacity:1;--tw-bg-opacity:1;background-color:var(--fallback-b3,oklch(var(--b3)/var(--tw-bg-opacity)));border-color:var(--fallback-b3,oklch(var(--b3)/var(--tw-border-opacity)))}@supports (color:color-mix(in oklab,black,black)){.tw-dw-btn:hover{background-color:color-mix(in oklab,oklch(var(--btn-color,var(--b2))/var(--tw-bg-opacity,1)) 90%,#000);border-color:color-mix(in oklab,oklch(var(--btn-color,var(--b2))/var(--tw-border-opacity,1)) 90%,#000)}}@supports not (color:oklch(0% 0 0)){.tw-dw-btn:hover{background-color:var(--btn-color,var(--fallback-b2));border-color:var(--btn-color,var(--fallback-b2))}}.tw-dw-btn.tw-dw-glass:hover{--glass-opacity:25%;--glass-border-opacity:15%}.tw-dw-btn-outline:hover{--tw-border-opacity:1;--tw-bg-opacity:1;--tw-text-opacity:1;background-color:var(--fallback-bc,oklch(var(--bc)/var(--tw-bg-opacity)));border-color:var(--fallback-bc,oklch(var(--bc)/var(--tw-border-opacity)));color:var(--fallback-b1,oklch(var(--b1)/var(--tw-text-opacity)))}.tw-dw-btn-outline.tw-dw-btn-primary:hover{--tw-text-opacity:1;color:var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity)))}@supports (color:color-mix(in oklab,black,black)){.tw-dw-btn-outline.tw-dw-btn-primary:hover{background-color:color-mix(in oklab,var(--fallback-p,oklch(var(--p)/1)) 90%,#000);border-color:color-mix(in oklab,var(--fallback-p,oklch(var(--p)/1)) 90%,#000)}}.tw-dw-btn-outline.tw-dw-btn-secondary:hover{--tw-text-opacity:1;color:var(--fallback-sc,oklch(var(--sc)/var(--tw-text-opacity)))}@supports (color:color-mix(in oklab,black,black)){.tw-dw-btn-outline.tw-dw-btn-secondary:hover{background-color:color-mix(in oklab,var(--fallback-s,oklch(var(--s)/1)) 90%,#000);border-color:color-mix(in oklab,var(--fallback-s,oklch(var(--s)/1)) 90%,#000)}}.tw-dw-btn-outline.tw-dw-btn-accent:hover{--tw-text-opacity:1;color:var(--fallback-ac,oklch(var(--ac)/var(--tw-text-opacity)))}@supports (color:color-mix(in oklab,black,black)){.tw-dw-btn-outline.tw-dw-btn-accent:hover{background-color:color-mix(in oklab,var(--fallback-a,oklch(var(--a)/1)) 90%,#000);border-color:color-mix(in oklab,var(--fallback-a,oklch(var(--a)/1)) 90%,#000)}}.tw-dw-btn-outline.tw-dw-btn-success:hover{--tw-text-opacity:1;color:var(--fallback-suc,oklch(var(--suc)/var(--tw-text-opacity)))}@supports (color:color-mix(in oklab,black,black)){.tw-dw-btn-outline.tw-dw-btn-success:hover{background-color:color-mix(in oklab,var(--fallback-su,oklch(var(--su)/1)) 90%,#000);border-color:color-mix(in oklab,var(--fallback-su,oklch(var(--su)/1)) 90%,#000)}}.tw-dw-btn-outline.tw-dw-btn-info:hover{--tw-text-opacity:1;color:var(--fallback-inc,oklch(var(--inc)/var(--tw-text-opacity)))}@supports (color:color-mix(in oklab,black,black)){.tw-dw-btn-outline.tw-dw-btn-info:hover{background-color:color-mix(in oklab,var(--fallback-in,oklch(var(--in)/1)) 90%,#000);border-color:color-mix(in oklab,var(--fallback-in,oklch(var(--in)/1)) 90%,#000)}}.tw-dw-btn-outline.tw-dw-btn-warning:hover{--tw-text-opacity:1;color:var(--fallback-wac,oklch(var(--wac)/var(--tw-text-opacity)))}@supports (color:color-mix(in oklab,black,black)){.tw-dw-btn-outline.tw-dw-btn-warning:hover{background-color:color-mix(in oklab,var(--fallback-wa,oklch(var(--wa)/1)) 90%,#000);border-color:color-mix(in oklab,var(--fallback-wa,oklch(var(--wa)/1)) 90%,#000)}}.tw-dw-btn-outline.tw-dw-btn-error:hover{--tw-text-opacity:1;color:var(--fallback-erc,oklch(var(--erc)/var(--tw-text-opacity)))}@supports (color:color-mix(in oklab,black,black)){.tw-dw-btn-outline.tw-dw-btn-error:hover{background-color:color-mix(in oklab,var(--fallback-er,oklch(var(--er)/1)) 90%,#000);border-color:color-mix(in oklab,var(--fallback-er,oklch(var(--er)/1)) 90%,#000)}}.tw-dw-btn-disabled:hover,.tw-dw-btn:disabled:hover,.tw-dw-btn[disabled]:hover{--tw-border-opacity:0;--tw-bg-opacity:0.2;--tw-text-opacity:0.2;background-color:var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity)));color:var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)))}@supports (color:color-mix(in oklab,black,black)){.tw-dw-btn:is(input[type=checkbox]:checked):hover,.tw-dw-btn:is(input[type=radio]:checked):hover{background-color:color-mix(in oklab,var(--fallback-p,oklch(var(--p)/1)) 90%,#000);border-color:color-mix(in oklab,var(--fallback-p,oklch(var(--p)/1)) 90%,#000)}}.tw-dw-dropdown.tw-dw-dropdown-hover:hover .tw-dw-dropdown-content{--tw-scale-x:1;--tw-scale-y:1;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))}:where(.tw-dw-menu li:not(.tw-dw-menu-title,.tw-dw-disabled)>:not(ul,details,.tw-dw-menu-title)):not(.tw-dw-active,.tw-dw-btn):hover,:where(.tw-dw-menu li:not(.tw-dw-menu-title,.tw-dw-disabled)>details>summary:not(.tw-dw-menu-title)):not(.tw-dw-active,.tw-dw-btn):hover{cursor:pointer;outline:2px solid transparent;outline-offset:2px}@supports (color:oklch(0% 0 0)){:where(.tw-dw-menu li:not(.tw-dw-menu-title,.tw-dw-disabled)>:not(ul,details,.tw-dw-menu-title)):not(.tw-dw-active,.tw-dw-btn):hover,:where(.tw-dw-menu li:not(.tw-dw-menu-title,.tw-dw-disabled)>details>summary:not(.tw-dw-menu-title)):not(.tw-dw-active,.tw-dw-btn):hover{background-color:var(--fallback-bc,oklch(var(--bc)/.1))}}}.tw-dw-dropdown:is(details) summary::-webkit-details-marker{display:none}.tw-dw-form-control{display:flex;flex-direction:column}.tw-dw-label{align-items:center;display:flex;justify-content:space-between;padding:.5rem .25rem;-webkit-user-select:none;-moz-user-select:none;user-select:none}.tw-dw-join .tw-dw-dropdown .tw-dw-join-item:first-child:not(:last-child),.tw-dw-join :first-child:not(:last-child) .tw-dw-dropdown .tw-dw-join-item{border-end-end-radius:inherit;border-start-end-radius:inherit}.tw-dw-menu{display:flex;flex-direction:column;flex-wrap:wrap;font-size:.875rem;line-height:1.25rem;padding:.5rem}.tw-dw-menu :where(li ul){margin-inline-start:1rem;padding-inline-start:.5rem;position:relative;white-space:nowrap}.tw-dw-menu :where(li:not(.tw-dw-menu-title)>:not(ul,details,.tw-dw-menu-title,.tw-dw-btn)),.tw-dw-menu :where(li:not(.tw-dw-menu-title)>details>summary:not(.tw-dw-menu-title)){align-content:flex-start;align-items:center;display:grid;gap:.5rem;grid-auto-columns:minmax(auto,max-content) auto max-content;grid-auto-flow:column;-webkit-user-select:none;-moz-user-select:none;user-select:none}.tw-dw-menu li.tw-dw-disabled{color:var(--fallback-bc,oklch(var(--bc)/.3));cursor:not-allowed;-webkit-user-select:none;-moz-user-select:none;user-select:none}.tw-dw-menu :where(li>.tw-dw-menu-dropdown:not(.tw-dw-menu-dropdown-show)){display:none}:where(.tw-dw-menu li){align-items:stretch;display:flex;flex-direction:column;flex-shrink:0;flex-wrap:wrap;position:relative}:where(.tw-dw-menu li) .tw-dw-badge{justify-self:end}.tw-dw-toggle{--tglbg:var(--fallback-b1,oklch(var(--b1)/1));--handleoffset:1.5rem;--handleoffsetcalculator:calc(var(--handleoffset)*-1);--togglehandleborder:0 0;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:currentColor;border-color:currentColor;border-radius:var(--rounded-badge,1.9rem);border-width:1px;box-shadow:var(--handleoffsetcalculator) 0 0 2px var(--tglbg) inset,0 0 0 2px var(--tglbg) inset,var(--togglehandleborder);color:var(--fallback-bc,oklch(var(--bc)/.5));cursor:pointer;flex-shrink:0;height:1.5rem;transition:background,box-shadow var(--animation-input,.2s) ease-out;width:3rem}.tw-dw-badge-primary{--tw-border-opacity:1;--tw-bg-opacity:1;--tw-text-opacity:1;background-color:var(--fallback-p,oklch(var(--p)/var(--tw-bg-opacity)));border-color:var(--fallback-p,oklch(var(--p)/var(--tw-border-opacity)));color:var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity)))}.tw-dw-badge-outline.tw-dw-badge-primary{--tw-text-opacity:1;color:var(--fallback-p,oklch(var(--p)/var(--tw-text-opacity)))}.tw-dw-btm-nav>* .tw-dw-label{font-size:1rem;line-height:1.5rem}.tw-dw-btn:active:focus,.tw-dw-btn:active:hover{animation:button-pop 0s ease-out;transform:scale(var(--btn-focus-scale,.97))}@supports not (color:oklch(0% 0 0)){.tw-dw-btn{background-color:var(--btn-color,var(--fallback-b2));border-color:var(--btn-color,var(--fallback-b2))}.tw-dw-btn-primary{--btn-color:var(--fallback-p)}.tw-dw-btn-secondary{--btn-color:var(--fallback-s)}.tw-dw-btn-accent{--btn-color:var(--fallback-a)}.tw-dw-btn-neutral{--btn-color:var(--fallback-n)}.tw-dw-btn-info{--btn-color:var(--fallback-in)}.tw-dw-btn-success{--btn-color:var(--fallback-su)}.tw-dw-btn-warning{--btn-color:var(--fallback-wa)}.tw-dw-btn-error{--btn-color:var(--fallback-er)}}@supports (color:color-mix(in oklab,black,black)){.tw-dw-btn-outline.tw-dw-btn-primary.tw-dw-btn-active{background-color:color-mix(in oklab,var(--fallback-p,oklch(var(--p)/1)) 90%,#000);border-color:color-mix(in oklab,var(--fallback-p,oklch(var(--p)/1)) 90%,#000)}.tw-dw-btn-outline.tw-dw-btn-secondary.tw-dw-btn-active{background-color:color-mix(in oklab,var(--fallback-s,oklch(var(--s)/1)) 90%,#000);border-color:color-mix(in oklab,var(--fallback-s,oklch(var(--s)/1)) 90%,#000)}.tw-dw-btn-outline.tw-dw-btn-accent.tw-dw-btn-active{background-color:color-mix(in oklab,var(--fallback-a,oklch(var(--a)/1)) 90%,#000);border-color:color-mix(in oklab,var(--fallback-a,oklch(var(--a)/1)) 90%,#000)}.tw-dw-btn-outline.tw-dw-btn-success.tw-dw-btn-active{background-color:color-mix(in oklab,var(--fallback-su,oklch(var(--su)/1)) 90%,#000);border-color:color-mix(in oklab,var(--fallback-su,oklch(var(--su)/1)) 90%,#000)}.tw-dw-btn-outline.tw-dw-btn-info.tw-dw-btn-active{background-color:color-mix(in oklab,var(--fallback-in,oklch(var(--in)/1)) 90%,#000);border-color:color-mix(in oklab,var(--fallback-in,oklch(var(--in)/1)) 90%,#000)}.tw-dw-btn-outline.tw-dw-btn-warning.tw-dw-btn-active{background-color:color-mix(in oklab,var(--fallback-wa,oklch(var(--wa)/1)) 90%,#000);border-color:color-mix(in oklab,var(--fallback-wa,oklch(var(--wa)/1)) 90%,#000)}.tw-dw-btn-outline.tw-dw-btn-error.tw-dw-btn-active{background-color:color-mix(in oklab,var(--fallback-er,oklch(var(--er)/1)) 90%,#000);border-color:color-mix(in oklab,var(--fallback-er,oklch(var(--er)/1)) 90%,#000)}}.tw-dw-btn:focus-visible{outline-offset:2px;outline-style:solid;outline-width:2px}.tw-dw-btn-primary{--tw-text-opacity:1;color:var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity)));outline-color:var(--fallback-p,oklch(var(--p)/1))}@supports (color:oklch(0% 0 0)){.tw-dw-btn-primary{--btn-color:var(--p)}.tw-dw-btn-secondary{--btn-color:var(--s)}.tw-dw-btn-accent{--btn-color:var(--a)}.tw-dw-btn-neutral{--btn-color:var(--n)}.tw-dw-btn-info{--btn-color:var(--in)}.tw-dw-btn-success{--btn-color:var(--su)}.tw-dw-btn-warning{--btn-color:var(--wa)}.tw-dw-btn-error{--btn-color:var(--er)}}.tw-dw-btn-secondary{--tw-text-opacity:1;color:var(--fallback-sc,oklch(var(--sc)/var(--tw-text-opacity)));outline-color:var(--fallback-s,oklch(var(--s)/1))}.tw-dw-btn-accent{--tw-text-opacity:1;color:var(--fallback-ac,oklch(var(--ac)/var(--tw-text-opacity)));outline-color:var(--fallback-a,oklch(var(--a)/1))}.tw-dw-btn-neutral{--tw-text-opacity:1;color:var(--fallback-nc,oklch(var(--nc)/var(--tw-text-opacity)));outline-color:var(--fallback-n,oklch(var(--n)/1))}.tw-dw-btn-info{--tw-text-opacity:1;color:var(--fallback-inc,oklch(var(--inc)/var(--tw-text-opacity)));outline-color:var(--fallback-in,oklch(var(--in)/1))}.tw-dw-btn-success{--tw-text-opacity:1;color:var(--fallback-suc,oklch(var(--suc)/var(--tw-text-opacity)));outline-color:var(--fallback-su,oklch(var(--su)/1))}.tw-dw-btn-warning{--tw-text-opacity:1;color:var(--fallback-wac,oklch(var(--wac)/var(--tw-text-opacity)));outline-color:var(--fallback-wa,oklch(var(--wa)/1))}.tw-dw-btn-error{--tw-text-opacity:1;color:var(--fallback-erc,oklch(var(--erc)/var(--tw-text-opacity)));outline-color:var(--fallback-er,oklch(var(--er)/1))}.tw-dw-btn.tw-dw-glass{--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);outline-color:currentColor}.tw-dw-btn.tw-dw-glass.tw-dw-btn-active{--glass-opacity:25%;--glass-border-opacity:15%}.tw-dw-btn-outline{--tw-text-opacity:1;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;background-color:transparent;border-color:currentColor;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);color:var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)))}.tw-dw-btn-outline.tw-dw-btn-active{--tw-border-opacity:1;--tw-bg-opacity:1;--tw-text-opacity:1;background-color:var(--fallback-bc,oklch(var(--bc)/var(--tw-bg-opacity)));border-color:var(--fallback-bc,oklch(var(--bc)/var(--tw-border-opacity)));color:var(--fallback-b1,oklch(var(--b1)/var(--tw-text-opacity)))}.tw-dw-btn-outline.tw-dw-btn-primary{--tw-text-opacity:1;color:var(--fallback-p,oklch(var(--p)/var(--tw-text-opacity)))}.tw-dw-btn-outline.tw-dw-btn-primary.tw-dw-btn-active{--tw-text-opacity:1;color:var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity)))}.tw-dw-btn-outline.tw-dw-btn-secondary{--tw-text-opacity:1;color:var(--fallback-s,oklch(var(--s)/var(--tw-text-opacity)))}.tw-dw-btn-outline.tw-dw-btn-secondary.tw-dw-btn-active{--tw-text-opacity:1;color:var(--fallback-sc,oklch(var(--sc)/var(--tw-text-opacity)))}.tw-dw-btn-outline.tw-dw-btn-accent{--tw-text-opacity:1;color:var(--fallback-a,oklch(var(--a)/var(--tw-text-opacity)))}.tw-dw-btn-outline.tw-dw-btn-accent.tw-dw-btn-active{--tw-text-opacity:1;color:var(--fallback-ac,oklch(var(--ac)/var(--tw-text-opacity)))}.tw-dw-btn-outline.tw-dw-btn-success{--tw-text-opacity:1;color:var(--fallback-su,oklch(var(--su)/var(--tw-text-opacity)))}.tw-dw-btn-outline.tw-dw-btn-success.tw-dw-btn-active{--tw-text-opacity:1;color:var(--fallback-suc,oklch(var(--suc)/var(--tw-text-opacity)))}.tw-dw-btn-outline.tw-dw-btn-info{--tw-text-opacity:1;color:var(--fallback-in,oklch(var(--in)/var(--tw-text-opacity)))}.tw-dw-btn-outline.tw-dw-btn-info.tw-dw-btn-active{--tw-text-opacity:1;color:var(--fallback-inc,oklch(var(--inc)/var(--tw-text-opacity)))}.tw-dw-btn-outline.tw-dw-btn-warning{--tw-text-opacity:1;color:var(--fallback-wa,oklch(var(--wa)/var(--tw-text-opacity)))}.tw-dw-btn-outline.tw-dw-btn-warning.tw-dw-btn-active{--tw-text-opacity:1;color:var(--fallback-wac,oklch(var(--wac)/var(--tw-text-opacity)))}.tw-dw-btn-outline.tw-dw-btn-error{--tw-text-opacity:1;color:var(--fallback-er,oklch(var(--er)/var(--tw-text-opacity)))}.tw-dw-btn-outline.tw-dw-btn-error.tw-dw-btn-active{--tw-text-opacity:1;color:var(--fallback-erc,oklch(var(--erc)/var(--tw-text-opacity)))}.tw-dw-btn.tw-dw-btn-disabled,.tw-dw-btn:disabled,.tw-dw-btn[disabled]{--tw-border-opacity:0;--tw-bg-opacity:0.2;--tw-text-opacity:0.2;background-color:var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity)));color:var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)))}.tw-dw-btn:is(input[type=checkbox]:checked),.tw-dw-btn:is(input[type=radio]:checked){--tw-border-opacity:1;--tw-bg-opacity:1;--tw-text-opacity:1;background-color:var(--fallback-p,oklch(var(--p)/var(--tw-bg-opacity)));border-color:var(--fallback-p,oklch(var(--p)/var(--tw-border-opacity)));color:var(--fallback-pc,oklch(var(--pc)/var(--tw-text-opacity)))}.tw-dw-btn:is(input[type=checkbox]:checked):focus-visible,.tw-dw-btn:is(input[type=radio]:checked):focus-visible{outline-color:var(--fallback-p,oklch(var(--p)/1))}@keyframes button-pop{0%{transform:scale(var(--btn-focus-scale,.98))}40%{transform:scale(1.02)}to{transform:scale(1)}}.tw-dw-card :where(figure:first-child){border-end-end-radius:unset;border-end-start-radius:unset;border-start-end-radius:inherit;border-start-start-radius:inherit;overflow:hidden}.tw-dw-card :where(figure:last-child){border-end-end-radius:inherit;border-end-start-radius:inherit;border-start-end-radius:unset;border-start-start-radius:unset;overflow:hidden}.tw-dw-card:focus-visible{outline:2px solid currentColor;outline-offset:2px}.tw-dw-card.tw-dw-bordered{--tw-border-opacity:1;border-color:var(--fallback-b2,oklch(var(--b2)/var(--tw-border-opacity)));border-width:1px}.tw-dw-card.tw-dw-compact .tw-dw-card-body{font-size:.875rem;line-height:1.25rem;padding:1rem}.tw-dw-card-title{align-items:center;display:flex;font-size:1.25rem;font-weight:600;gap:.5rem;line-height:1.75rem}.tw-dw-card.tw-dw-image-full :where(figure){border-radius:inherit;overflow:hidden}.tw-dw-checkbox:focus{box-shadow:none}.tw-dw-checkbox:focus-visible{outline-color:var(--fallback-bc,oklch(var(--bc)/1));outline-offset:2px;outline-style:solid;outline-width:2px}.tw-dw-checkbox:disabled{--tw-bg-opacity:1;background-color:var(--fallback-bc,oklch(var(--bc)/var(--tw-bg-opacity)));border-color:transparent;border-width:0;cursor:not-allowed;opacity:.2}.tw-dw-checkbox:checked,.tw-dw-checkbox[aria-checked=true]{animation:checkmark var(--animation-input,.2s) ease-out;background-color:var(--chkbg);background-image:linear-gradient(-45deg,transparent 65%,var(--chkbg) 65.99%),linear-gradient(45deg,transparent 75%,var(--chkbg) 75.99%),linear-gradient(-45deg,var(--chkbg) 40%,transparent 40.99%),linear-gradient(45deg,var(--chkbg) 30%,var(--chkfg) 30.99%,var(--chkfg) 40%,transparent 40.99%),linear-gradient(-45deg,var(--chkfg) 50%,var(--chkbg) 50.99%);background-repeat:no-repeat}.tw-dw-checkbox:indeterminate{--tw-bg-opacity:1;animation:checkmark var(--animation-input,.2s) ease-out;background-color:var(--fallback-bc,oklch(var(--bc)/var(--tw-bg-opacity)));background-image:linear-gradient(90deg,transparent 80%,var(--chkbg) 80%),linear-gradient(-90deg,transparent 80%,var(--chkbg) 80%),linear-gradient(0deg,var(--chkbg) 43%,var(--chkfg) 43%,var(--chkfg) 57%,var(--chkbg) 57%);background-repeat:no-repeat}@keyframes checkmark{0%{background-position-y:5px}50%{background-position-y:-2px}to{background-position-y:0}}.tw-dw-drawer-toggle:checked~.tw-dw-drawer-side>.tw-dw-drawer-overlay{background-color:#0006}.tw-dw-drawer-toggle:focus-visible~.tw-dw-drawer-content label.tw-dw-drawer-button{outline-offset:2px;outline-style:solid;outline-width:2px}.tw-dw-dropdown.tw-dw-dropdown-open .tw-dw-dropdown-content,.tw-dw-dropdown:focus .tw-dw-dropdown-content,.tw-dw-dropdown:focus-within .tw-dw-dropdown-content{--tw-scale-x:1;--tw-scale-y:1;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))}:where(.tw-dw-menu li:empty){--tw-bg-opacity:1;background-color:var(--fallback-bc,oklch(var(--bc)/var(--tw-bg-opacity)));height:1px;margin:.5rem 1rem;opacity:.1}.tw-dw-menu :where(li ul):before{--tw-bg-opacity:1;background-color:var(--fallback-bc,oklch(var(--bc)/var(--tw-bg-opacity)));bottom:.75rem;content:"";inset-inline-start:0;opacity:.1;position:absolute;top:.75rem;width:1px}.tw-dw-menu :where(li:not(.tw-dw-menu-title)>:not(ul,details,.tw-dw-menu-title,.tw-dw-btn)),.tw-dw-menu :where(li:not(.tw-dw-menu-title)>details>summary:not(.tw-dw-menu-title)){text-wrap:balance;border-radius:var(--rounded-btn,.5rem);padding:.5rem 1rem;text-align:start;transition-duration:.2s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-timing-function:cubic-bezier(0,0,.2,1)}:where(.tw-dw-menu li:not(.tw-dw-menu-title,.tw-dw-disabled)>:not(ul,details,.tw-dw-menu-title)):is(summary):not(.tw-dw-active,.tw-dw-btn):focus-visible,:where(.tw-dw-menu li:not(.tw-dw-menu-title,.tw-dw-disabled)>:not(ul,details,.tw-dw-menu-title)):not(summary,.tw-dw-active,.tw-dw-btn).tw-dw-focus,:where(.tw-dw-menu li:not(.tw-dw-menu-title,.tw-dw-disabled)>:not(ul,details,.tw-dw-menu-title)):not(summary,.tw-dw-active,.tw-dw-btn):focus,:where(.tw-dw-menu li:not(.tw-dw-menu-title,.tw-dw-disabled)>details>summary:not(.tw-dw-menu-title)):is(summary):not(.tw-dw-active,.tw-dw-btn):focus-visible,:where(.tw-dw-menu li:not(.tw-dw-menu-title,.tw-dw-disabled)>details>summary:not(.tw-dw-menu-title)):not(summary,.tw-dw-active,.tw-dw-btn).tw-dw-focus,:where(.tw-dw-menu li:not(.tw-dw-menu-title,.tw-dw-disabled)>details>summary:not(.tw-dw-menu-title)):not(summary,.tw-dw-active,.tw-dw-btn):focus{--tw-text-opacity:1;background-color:var(--fallback-bc,oklch(var(--bc)/.1));color:var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)));cursor:pointer;outline:2px solid transparent;outline-offset:2px}.tw-dw-menu li>:not(ul,.tw-dw-menu-title,details,.tw-dw-btn).tw-dw-active,.tw-dw-menu li>:not(ul,.tw-dw-menu-title,details,.tw-dw-btn):active,.tw-dw-menu li>details>summary:active{--tw-bg-opacity:1;--tw-text-opacity:1;background-color:var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity)));color:var(--fallback-nc,oklch(var(--nc)/var(--tw-text-opacity)))}.tw-dw-menu :where(li>details>summary)::-webkit-details-marker{display:none}.tw-dw-menu :where(li>.tw-dw-menu-dropdown-toggle):after,.tw-dw-menu :where(li>details>summary):after{box-shadow:2px 2px;content:"";display:block;height:.5rem;justify-self:end;margin-top:-.5rem;pointer-events:none;transform:rotate(45deg);transform-origin:75% 75%;transition-duration:.3s;transition-property:transform,margin-top;transition-timing-function:cubic-bezier(.4,0,.2,1);width:.5rem}.tw-dw-menu :where(li>.tw-dw-menu-dropdown-toggle.tw-dw-menu-dropdown-show):after,.tw-dw-menu :where(li>details[open]>summary):after{margin-top:0;transform:rotate(225deg)}@keyframes modal-pop{0%{opacity:0}}@keyframes progress-loading{50%{background-position-x:-115%}}@keyframes radiomark{0%{box-shadow:0 0 0 12px var(--fallback-b1,oklch(var(--b1)/1)) inset,0 0 0 12px var(--fallback-b1,oklch(var(--b1)/1)) inset}50%{box-shadow:0 0 0 3px var(--fallback-b1,oklch(var(--b1)/1)) inset,0 0 0 3px var(--fallback-b1,oklch(var(--b1)/1)) inset}to{box-shadow:0 0 0 4px var(--fallback-b1,oklch(var(--b1)/1)) inset,0 0 0 4px var(--fallback-b1,oklch(var(--b1)/1)) inset}}@keyframes rating-pop{0%{transform:translateY(-.125em)}40%{transform:translateY(-.125em)}to{transform:translateY(0)}}@keyframes skeleton{0%{background-position:150%}to{background-position:-50%}}@keyframes toast-pop{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}[dir=rtl] .tw-dw-toggle{--handleoffsetcalculator:calc(var(--handleoffset)*1)}.tw-dw-toggle:focus-visible{outline-color:var(--fallback-bc,oklch(var(--bc)/.2));outline-offset:2px;outline-style:solid;outline-width:2px}.tw-dw-toggle:hover{background-color:currentColor}.tw-dw-toggle:checked,.tw-dw-toggle[aria-checked=true]{--handleoffsetcalculator:var(--handleoffset);--tw-text-opacity:1;background-image:none;color:var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)))}[dir=rtl] .tw-dw-toggle:checked,[dir=rtl] .tw-dw-toggle[aria-checked=true]{--handleoffsetcalculator:calc(var(--handleoffset)*-1)}.tw-dw-toggle:indeterminate{--tw-text-opacity:1;box-shadow:calc(var(--handleoffset)/2) 0 0 2px var(--tglbg) inset,calc(var(--handleoffset)/-2) 0 0 2px var(--tglbg) inset,0 0 0 2px var(--tglbg) inset;color:var(--fallback-bc,oklch(var(--bc)/var(--tw-text-opacity)))}[dir=rtl] .tw-dw-toggle:indeterminate{box-shadow:calc(var(--handleoffset)/2) 0 0 2px var(--tglbg) inset,calc(var(--handleoffset)/-2) 0 0 2px var(--tglbg) inset,0 0 0 2px var(--tglbg) inset}.tw-dw-toggle-secondary:focus-visible{outline-color:var(--fallback-s,oklch(var(--s)/1))}.tw-dw-toggle-secondary:checked,.tw-dw-toggle-secondary[aria-checked=true]{--tw-border-opacity:0.1;--tw-bg-opacity:1;--tw-text-opacity:1;background-color:var(--fallback-s,oklch(var(--s)/var(--tw-bg-opacity)));border-color:var(--fallback-s,oklch(var(--s)/var(--tw-border-opacity)));color:var(--fallback-sc,oklch(var(--sc)/var(--tw-text-opacity)))}.tw-dw-toggle:disabled{--tw-border-opacity:1;--togglehandleborder:0 0 0 3px var(--fallback-bc,oklch(var(--bc)/1)) inset,var(--handleoffsetcalculator) 0 0 3px var(--fallback-bc,oklch(var(--bc)/1)) inset;background-color:transparent;border-color:var(--fallback-bc,oklch(var(--bc)/var(--tw-border-opacity)));cursor:not-allowed;opacity:.3}.tw-dw-btn-xs{font-size:.75rem;height:1.5rem;min-height:1.5rem;padding-left:.5rem;padding-right:.5rem}.tw-dw-btn-sm{font-size:.875rem;height:2rem;min-height:2rem;padding-left:.75rem;padding-right:.75rem}.tw-dw-btn-lg{font-size:1.125rem;height:4rem;min-height:4rem;padding-left:1.5rem;padding-right:1.5rem}.tw-dw-btn-wide{width:16rem}.tw-dw-btn-square:where(.tw-dw-btn-xs){height:1.5rem;padding:0;width:1.5rem}.tw-dw-btn-square:where(.tw-dw-btn-sm){height:2rem;padding:0;width:2rem}.tw-dw-btn-square:where(.tw-dw-btn-lg){height:4rem;padding:0;width:4rem}.tw-dw-btn-circle:where(.tw-dw-btn-xs){border-radius:9999px;height:1.5rem;padding:0;width:1.5rem}.tw-dw-btn-circle:where(.tw-dw-btn-sm){border-radius:9999px;height:2rem;padding:0;width:2rem}.tw-dw-btn-circle:where(.tw-dw-btn-lg){border-radius:9999px;height:4rem;padding:0;width:4rem}.tw-dw-drawer-open>.tw-dw-drawer-toggle{display:none}.tw-dw-drawer-open>.tw-dw-drawer-toggle~.tw-dw-drawer-side{display:block;overscroll-behavior:auto;pointer-events:auto;position:sticky;visibility:visible;width:auto}.tw-dw-drawer-open>.tw-dw-drawer-toggle~.tw-dw-drawer-side>:not(.tw-dw-drawer-overlay),[dir=rtl] .tw-dw-drawer-open>.tw-dw-drawer-toggle~.tw-dw-drawer-side>:not(.tw-dw-drawer-overlay){transform:translateX(0)}.tw-dw-drawer-open>.tw-dw-drawer-toggle:checked~.tw-dw-drawer-side{pointer-events:auto;visibility:visible}.tw-dw-drawer-open>.tw-dw-drawer-side{overflow-y:auto}html:has(.tw-dw-drawer-toggle:checked){overflow-y:hidden;scrollbar-gutter:stable}.tw-dw-card-compact .tw-dw-card-body{font-size:.875rem;line-height:1.25rem;padding:1rem}.tw-dw-card-compact .tw-dw-card-title{margin-bottom:.25rem}.tw-dw-card-normal .tw-dw-card-body{font-size:1rem;line-height:1.5rem;padding:var(--padding-card,2rem)}.tw-dw-card-normal .tw-dw-card-title{margin-bottom:.75rem}.tw-dw-drawer-open>.tw-dw-drawer-toggle~.tw-dw-drawer-side>.tw-dw-drawer-overlay{background-color:transparent;cursor:default}.tw-sr-only{clip:rect(0,0,0,0);border-width:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.tw-absolute{position:absolute}.tw-relative{position:relative}.tw-inset-0{inset:0}.tw-inset-y-0{bottom:0;top:0}.\!tw-right-0{right:0!important}.tw-left-0{left:0}.tw-left-4{left:1rem}.tw-left-5{left:1.25rem}.tw-right-0{right:0}.tw-right-4{right:1rem}.tw-right-5{right:1.25rem}.tw-top-2{top:.5rem}.tw-top-3{top:.75rem}.tw-top-5{top:1.25rem}.tw-isolate{isolation:isolate}.\!tw-z-10{z-index:10!important}.tw-z-10{z-index:10}.tw-z-\[1\]{z-index:1}.\!tw-m-3{margin:.75rem!important}.tw-m-0{margin:0}.tw-m-0\.5{margin:.125rem}.tw-m-1{margin:.25rem}.tw-m-2{margin:.5rem}.tw-m-\[16px\]{margin:16px}.tw--mx-4{margin-left:-1rem;margin-right:-1rem}.tw--my-2{margin-bottom:-.5rem;margin-top:-.5rem}.tw-mx-0{margin-left:0;margin-right:0}.tw-mx-1{margin-left:.25rem;margin-right:.25rem}.tw-mx-4{margin-left:1rem;margin-right:1rem}.tw-mx-5{margin-left:1.25rem;margin-right:1.25rem}.tw-mx-auto{margin-left:auto;margin-right:auto}.tw-my-2{margin-bottom:.5rem;margin-top:.5rem}.\!tw-ml-8{margin-left:2rem!important}.\!tw-mt-2{margin-top:.5rem!important}.-tw-mt-1{margin-top:-.25rem}.tw-mb-0{margin-bottom:0}.tw-mb-1{margin-bottom:.25rem}.tw-mb-10{margin-bottom:2.5rem}.tw-mb-14{margin-bottom:3.5rem}.tw-mb-16{margin-bottom:4rem}.tw-mb-2{margin-bottom:.5rem}.tw-mb-4{margin-bottom:1rem}.tw-mb-5{margin-bottom:1.25rem}.tw-mb-7{margin-bottom:1.75rem}.tw-ml-4{margin-left:1rem}.tw-ml-auto{margin-left:auto}.tw-mr-3{margin-right:.75rem}.tw-mr-5{margin-right:1.25rem}.tw-ms-8{margin-inline-start:2rem}.tw-mt-0{margin-top:0}.tw-mt-0\.5{margin-top:.125rem}.tw-mt-1{margin-top:.25rem}.tw-mt-2{margin-top:.5rem}.tw-mt-20{margin-top:5rem}.tw-mt-3{margin-top:.75rem}.tw-mt-4{margin-top:1rem}.tw-mt-5{margin-top:1.25rem}.tw-mt-6{margin-top:1.5rem}.tw-mt-\[0\.2rem\]{margin-top:.2rem}.tw-mt-auto{margin-top:auto}.tw-block{display:block}.tw-inline-block{display:inline-block}.tw-inline{display:inline}.\!tw-flex{display:flex!important}.tw-flex{display:flex}.tw-inline-flex{display:inline-flex}.tw-flow-root{display:flow-root}.tw-grid{display:grid}.tw-hidden{display:none}.tw-size-4{height:1rem;width:1rem}.tw-size-5{height:1.25rem;width:1.25rem}.\!tw-h-\[80vh\]{height:80vh!important}.\!tw-h-full{height:100%!important}.tw-h-10{height:2.5rem}.tw-h-11{height:2.75rem}.tw-h-12{height:3rem}.tw-h-15{height:60px}.tw-h-28{height:7rem}.tw-h-3{height:.75rem}.tw-h-4{height:1rem}.tw-h-5{height:1.25rem}.tw-h-6{height:1.5rem}.tw-h-8{height:2rem}.tw-h-auto{height:auto}.tw-h-full{height:100%}.tw-h-screen{height:100vh}.tw-min-h-full{min-height:100%}.\!tw-w-80{width:20rem!important}.\!tw-w-full{width:100%!important}.tw-w-10{width:2.5rem}.tw-w-12{width:3rem}.tw-w-2\/4{width:50%}.tw-w-24{width:6rem}.tw-w-3{width:.75rem}.tw-w-4{width:1rem}.tw-w-48{width:12rem}.tw-w-5{width:1.25rem}.tw-w-6{width:1.5rem}.tw-w-64{width:16rem}.tw-w-8{width:2rem}.tw-w-\[5\.5rem\]{width:5.5rem}.tw-w-\[8\.5rem\]{width:8.5rem}.tw-w-auto{width:auto}.tw-w-full{width:100%}.tw-w-max{width:-moz-max-content;width:max-content}.tw-w-px{width:1px}.tw-min-w-0{min-width:0}.tw-min-w-full{min-width:100%}.tw-max-w-full{max-width:100%}.tw-flex-1{flex:1 1 0%}.tw-shrink-0{flex-shrink:0}.tw-flex-grow{flex-grow:1}.\!tw-origin-top-right{transform-origin:top right!important}.tw-origin-top-right{transform-origin:top right}.tw-cursor-pointer{cursor:pointer}.tw-list-none{list-style-type:none}.tw-grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.\!tw-flex-row{flex-direction:row!important}.tw-flex-row{flex-direction:row}.tw-flex-col{flex-direction:column}.tw-flex-wrap{flex-wrap:wrap}.tw-items-start{align-items:flex-start}.tw-items-end{align-items:flex-end}.\!tw-items-center{align-items:center!important}.tw-items-center{align-items:center}.tw-justify-start{justify-content:flex-start}.tw-justify-end{justify-content:flex-end}.tw-justify-center{justify-content:center}.tw-justify-between{justify-content:space-between}.\!tw-gap-3{gap:.75rem!important}.tw-gap-1{gap:.25rem}.tw-gap-2{gap:.5rem}.tw-gap-2\.5{gap:.625rem}.tw-gap-3{gap:.75rem}.tw-gap-4{gap:1rem}.tw-gap-5{gap:1.25rem}.tw-gap-6{gap:1.5rem}.tw-space-x-0>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(0px*(1 - var(--tw-space-x-reverse)));margin-right:calc(0px*var(--tw-space-x-reverse))}.tw-space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(.25rem*var(--tw-space-y-reverse));margin-top:calc(.25rem*(1 - var(--tw-space-y-reverse)))}.tw-space-y-3>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(.75rem*var(--tw-space-y-reverse));margin-top:calc(.75rem*(1 - var(--tw-space-y-reverse)))}.tw-space-y-3\.5>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(.875rem*var(--tw-space-y-reverse));margin-top:calc(.875rem*(1 - var(--tw-space-y-reverse)))}.tw-self-start{align-self:flex-start}.tw-self-center{align-self:center}.tw-overflow-hidden{overflow:hidden}.tw-overflow-scroll{overflow:scroll}.tw-overflow-x-auto{overflow-x:auto}.tw-overflow-y-auto{overflow-y:auto}.tw-scroll-smooth{scroll-behavior:smooth}.tw-truncate{overflow:hidden;text-overflow:ellipsis}.tw-truncate,.tw-whitespace-nowrap{white-space:nowrap}.\!tw-rounded-lg{border-radius:.5rem!important}.tw-rounded-2xl{border-radius:1rem}.tw-rounded-full{border-radius:9999px}.tw-rounded-lg{border-radius:.5rem}.tw-rounded-md{border-radius:.375rem}.tw-rounded-xl{border-radius:.75rem}.tw-rounded-tl-xl{border-top-left-radius:.75rem}.tw-rounded-tr-xl{border-top-right-radius:.75rem}.tw-border{border-width:1px}.tw-border-2{border-width:2px}.tw-border-b{border-bottom-width:1px}.tw-border-r{border-right-width:1px}.tw-border-dashed{border-style:dashed}.tw-border-none{border-style:none}.\!tw-border-black{--tw-border-opacity:1!important;border-color:rgb(0 0 0/var(--tw-border-opacity))!important}.tw-border-\[\#D1D5DA\]{--tw-border-opacity:1;border-color:rgb(209 213 218/var(--tw-border-opacity))}.tw-border-gray-200{--tw-border-opacity:1;border-color:rgb(227 232 239/var(--tw-border-opacity))}.tw-border-gray-400\/30{border-color:rgba(154,164,178,.3)}.tw-border-primary-500\/30{border-color:rgba(41,112,255,.3)}.tw-border-white{--tw-border-opacity:1;border-color:rgb(255 255 255/var(--tw-border-opacity))}.\!tw-bg-white{--tw-bg-opacity:1!important;background-color:rgb(255 255 255/var(--tw-bg-opacity))!important}.tw-bg-\[\#001F3E\]{--tw-bg-opacity:1;background-color:rgb(0 31 62/var(--tw-bg-opacity))}.tw-bg-\[\#646EE4\]{--tw-bg-opacity:1;background-color:rgb(100 110 228/var(--tw-bg-opacity))}.tw-bg-\[rgb\(40\,183\,123\)\]{--tw-bg-opacity:1;background-color:rgb(40 183 123/var(--tw-bg-opacity))}.tw-bg-base-100{--tw-bg-opacity:1;background-color:var(--fallback-b1,oklch(var(--b1)/var(--tw-bg-opacity)))}.tw-bg-blue-400{--tw-bg-opacity:1;background-color:rgb(96 165 250/var(--tw-bg-opacity))}.tw-bg-blue-600{--tw-bg-opacity:1;background-color:rgb(37 99 235/var(--tw-bg-opacity))}.tw-bg-blue-700{--tw-bg-opacity:1;background-color:rgb(29 78 216/var(--tw-bg-opacity))}.tw-bg-cyan-300{--tw-bg-opacity:1;background-color:rgb(103 232 249/var(--tw-bg-opacity))}.tw-bg-cyan-400{--tw-bg-opacity:1;background-color:rgb(34 211 238/var(--tw-bg-opacity))}.tw-bg-gray-100{--tw-bg-opacity:1;background-color:rgb(238 242 246/var(--tw-bg-opacity))}.tw-bg-gray-200{--tw-bg-opacity:1;background-color:rgb(227 232 239/var(--tw-bg-opacity))}.tw-bg-gray-50{--tw-bg-opacity:1;background-color:rgb(248 250 252/var(--tw-bg-opacity))}.tw-bg-gray-500{--tw-bg-opacity:1;background-color:rgb(105 117 134/var(--tw-bg-opacity))}.tw-bg-green-100{--tw-bg-opacity:1;background-color:rgb(220 250 230/var(--tw-bg-opacity))}.tw-bg-green-200{--tw-bg-opacity:1;background-color:rgb(171 239 198/var(--tw-bg-opacity))}.tw-bg-green-400{--tw-bg-opacity:1;background-color:rgb(71 205 137/var(--tw-bg-opacity))}.tw-bg-green-800{--tw-bg-opacity:1;background-color:rgb(8 93 58/var(--tw-bg-opacity))}.tw-bg-orange-400{--tw-bg-opacity:1;background-color:rgb(243 135 68/var(--tw-bg-opacity))}.tw-bg-orange-800{--tw-bg-opacity:1;background-color:rgb(147 47 25/var(--tw-bg-opacity))}.tw-bg-primary-800{--tw-bg-opacity:1;background-color:rgb(0 64 193/var(--tw-bg-opacity))}.tw-bg-purple-800{--tw-bg-opacity:1;background-color:rgb(74 31 184/var(--tw-bg-opacity))}.tw-bg-red-100{--tw-bg-opacity:1;background-color:rgb(254 228 226/var(--tw-bg-opacity))}.tw-bg-red-200{--tw-bg-opacity:1;background-color:rgb(254 205 202/var(--tw-bg-opacity))}.tw-bg-red-400{--tw-bg-opacity:1;background-color:rgb(249 112 102/var(--tw-bg-opacity))}.tw-bg-red-600{--tw-bg-opacity:1;background-color:rgb(217 45 32/var(--tw-bg-opacity))}.tw-bg-red-800{--tw-bg-opacity:1;background-color:rgb(145 32 24/var(--tw-bg-opacity))}.tw-bg-sky-100{--tw-bg-opacity:1;background-color:rgb(224 242 254/var(--tw-bg-opacity))}.tw-bg-sky-800{--tw-bg-opacity:1;background-color:rgb(6 89 134/var(--tw-bg-opacity))}.tw-bg-transparent{background-color:transparent}.tw-bg-white{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.tw-bg-yellow-100{--tw-bg-opacity:1;background-color:rgb(254 240 199/var(--tw-bg-opacity))}.tw-bg-yellow-400{--tw-bg-opacity:1;background-color:rgb(253 176 34/var(--tw-bg-opacity))}.tw-bg-yellow-800{--tw-bg-opacity:1;background-color:rgb(147 55 13/var(--tw-bg-opacity))}.tw-bg-gradient-to-r{background-image:linear-gradient(to right,var(--tw-gradient-stops))}.tw-from-green-800{--tw-gradient-from:#085d3a var(--tw-gradient-from-position);--tw-gradient-to:rgba(8,93,58,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.tw-from-indigo-500{--tw-gradient-from:#6366f1 var(--tw-gradient-from-position);--tw-gradient-to:rgba(99,102,241,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.tw-from-indigo-600{--tw-gradient-from:#4f46e5 var(--tw-gradient-from-position);--tw-gradient-to:rgba(79,70,229,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.tw-from-orange-800{--tw-gradient-from:#932f19 var(--tw-gradient-from-position);--tw-gradient-to:rgba(147,47,25,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.tw-from-primary-800{--tw-gradient-from:#0040c1 var(--tw-gradient-from-position);--tw-gradient-to:rgba(0,64,193,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.tw-from-purple-800{--tw-gradient-from:#4a1fb8 var(--tw-gradient-from-position);--tw-gradient-to:rgba(74,31,184,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.tw-from-red-800{--tw-gradient-from:#912018 var(--tw-gradient-from-position);--tw-gradient-to:rgba(145,32,24,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.tw-from-sky-800{--tw-gradient-from:#065986 var(--tw-gradient-from-position);--tw-gradient-to:rgba(6,89,134,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.tw-from-yellow-800{--tw-gradient-from:#93370d var(--tw-gradient-from-position);--tw-gradient-to:rgba(147,55,13,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.tw-to-blue-500{--tw-gradient-to:#3b82f6 var(--tw-gradient-to-position)}.tw-to-green-900{--tw-gradient-to:#074d31 var(--tw-gradient-to-position)}.tw-to-orange-900{--tw-gradient-to:#772917 var(--tw-gradient-to-position)}.tw-to-primary-900{--tw-gradient-to:#00359e var(--tw-gradient-to-position)}.tw-to-purple-900{--tw-gradient-to:#3e1c96 var(--tw-gradient-to-position)}.tw-to-red-900{--tw-gradient-to:#7a271a var(--tw-gradient-to-position)}.tw-to-sky-900{--tw-gradient-to:#0b4a6f var(--tw-gradient-to-position)}.tw-to-yellow-900{--tw-gradient-to:#7a2e0e var(--tw-gradient-to-position)}.tw-bg-clip-text{-webkit-background-clip:text;background-clip:text}.tw-object-contain{-o-object-fit:contain;object-fit:contain}.tw-object-fill{-o-object-fit:fill;object-fit:fill}.\!tw-p-0{padding:0!important}.\!tw-p-2{padding:.5rem!important}.tw-p-0{padding:0}.tw-p-0\.5{padding:.125rem}.tw-p-1{padding:.25rem}.tw-p-1\.5{padding:.375rem}.tw-p-2{padding:.5rem}.tw-p-3{padding:.75rem}.tw-p-4{padding:1rem}.tw-p-5{padding:1.25rem}.tw-p-6{padding:1.5rem}.\!tw-px-2{padding-left:.5rem!important;padding-right:.5rem!important}.tw-px-10{padding-left:2.5rem;padding-right:2.5rem}.tw-px-2{padding-left:.5rem;padding-right:.5rem}.tw-px-3{padding-left:.75rem;padding-right:.75rem}.tw-px-4{padding-left:1rem;padding-right:1rem}.tw-px-5{padding-left:1.25rem;padding-right:1.25rem}.tw-py-0{padding-bottom:0;padding-top:0}.tw-py-1{padding-bottom:.25rem;padding-top:.25rem}.tw-py-1\.5{padding-bottom:.375rem;padding-top:.375rem}.tw-py-2{padding-bottom:.5rem;padding-top:.5rem}.tw-py-3{padding-bottom:.75rem;padding-top:.75rem}.tw-py-6{padding-bottom:1.5rem;padding-top:1.5rem}.tw-pb-1{padding-bottom:.25rem}.tw-pb-10{padding-bottom:2.5rem}.tw-pb-2{padding-bottom:.5rem}.tw-pb-4{padding-bottom:1rem}.tw-pb-6{padding-bottom:1.5rem}.tw-pl-11{padding-left:2.75rem}.tw-pl-2{padding-left:.5rem}.tw-pt-0{padding-top:0}.tw-pt-10{padding-top:2.5rem}.tw-pt-2{padding-top:.5rem}.tw-pt-20{padding-top:5rem}.tw-pt-3{padding-top:.75rem}.tw-pt-4{padding-top:1rem}.tw-text-left{text-align:left}.\!tw-text-center{text-align:center!important}.tw-text-center{text-align:center}.tw-text-right{text-align:right}.tw-align-middle{vertical-align:middle}.tw-font-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.tw-font-sans{font-family:Inter,ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}.\!tw-text-sm{font-size:.875rem!important;line-height:1.25rem!important}.\!tw-text-xs{font-size:.75rem!important;line-height:1rem!important}.tw-text-2xl{font-size:1.5rem;line-height:2rem}.tw-text-3xl{font-size:1.875rem;line-height:2.25rem}.tw-text-6xl{font-size:3.75rem;line-height:1}.tw-text-base{font-size:1rem;line-height:1.5rem}.tw-text-lg{font-size:1.125rem;line-height:1.75rem}.tw-text-sm{font-size:.875rem;line-height:1.25rem}.tw-text-xl{font-size:1.25rem;line-height:1.75rem}.tw-text-xs{font-size:.75rem;line-height:1rem}.tw-font-bold{font-weight:700}.tw-font-extrabold{font-weight:800}.tw-font-medium{font-weight:500}.tw-font-normal{font-weight:400}.tw-font-semibold{font-weight:600}.tw-uppercase{text-transform:uppercase}.tw-italic{font-style:italic}.tw-tracking-tight{letter-spacing:-.025em}.tw-tracking-wider{letter-spacing:.05em}.tw-text-\[\#00935F\]{--tw-text-opacity:1;color:rgb(0 147 95/var(--tw-text-opacity))}.tw-text-\[\#009EE4\]{--tw-text-opacity:1;color:rgb(0 158 228/var(--tw-text-opacity))}.tw-text-\[\#009ce4\]{--tw-text-opacity:1;color:rgb(0 156 228/var(--tw-text-opacity))}.tw-text-\[\#1e1e1e\]{--tw-text-opacity:1;color:rgb(30 30 30/var(--tw-text-opacity))}.tw-text-\[\#1f1f1f\]{--tw-text-opacity:1;color:rgb(31 31 31/var(--tw-text-opacity))}.tw-text-\[\#5E5CA8\]{--tw-text-opacity:1;color:rgb(94 92 168/var(--tw-text-opacity))}.tw-text-\[\#646EE4\]{--tw-text-opacity:1;color:rgb(100 110 228/var(--tw-text-opacity))}.tw-text-\[\#A5ADBB\]{--tw-text-opacity:1;color:rgb(165 173 187/var(--tw-text-opacity))}.tw-text-\[\#D61B60\]{--tw-text-opacity:1;color:rgb(214 27 96/var(--tw-text-opacity))}.tw-text-\[\#E7A500\]{--tw-text-opacity:1;color:rgb(231 165 0/var(--tw-text-opacity))}.tw-text-\[\#EF4B51\]{--tw-text-opacity:1;color:rgb(239 75 81/var(--tw-text-opacity))}.tw-text-\[\#EF4B53\]{--tw-text-opacity:1;color:rgb(239 75 83/var(--tw-text-opacity))}.tw-text-accent{--tw-text-opacity:1;color:var(--fallback-a,oklch(var(--a)/var(--tw-text-opacity)))}.tw-text-black{--tw-text-opacity:1;color:rgb(0 0 0/var(--tw-text-opacity))}.tw-text-cyan-500{--tw-text-opacity:1;color:rgb(6 182 212/var(--tw-text-opacity))}.tw-text-gray-400{--tw-text-opacity:1;color:rgb(154 164 178/var(--tw-text-opacity))}.tw-text-gray-500{--tw-text-opacity:1;color:rgb(105 117 134/var(--tw-text-opacity))}.tw-text-gray-600{--tw-text-opacity:1;color:rgb(75 85 101/var(--tw-text-opacity))}.tw-text-gray-700{--tw-text-opacity:1;color:rgb(54 65 82/var(--tw-text-opacity))}.tw-text-gray-900{--tw-text-opacity:1;color:rgb(18 25 38/var(--tw-text-opacity))}.tw-text-green-500{--tw-text-opacity:1;color:rgb(23 178 106/var(--tw-text-opacity))}.tw-text-green-900{--tw-text-opacity:1;color:rgb(7 77 49/var(--tw-text-opacity))}.tw-text-primary-700{--tw-text-opacity:1;color:rgb(0 78 235/var(--tw-text-opacity))}.tw-text-primary-800{--tw-text-opacity:1;color:rgb(0 64 193/var(--tw-text-opacity))}.tw-text-red-500{--tw-text-opacity:1;color:rgb(240 68 56/var(--tw-text-opacity))}.tw-text-sky-500{--tw-text-opacity:1;color:rgb(11 165 236/var(--tw-text-opacity))}.tw-text-transparent{color:transparent}.tw-text-white{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.tw-text-yellow-500{--tw-text-opacity:1;color:rgb(247 144 9/var(--tw-text-opacity))}.tw-antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.tw-opacity-100{opacity:1}.tw-opacity-90{opacity:.9}.\!tw-shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1)!important;--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)!important;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)!important}.tw-shadow{--tw-shadow:0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color)}.tw-shadow,.tw-shadow-\[rgba\(17\,_17\,_26\,_0\.1\)_0px_0px_16px\]{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.tw-shadow-\[rgba\(17\,_17\,_26\,_0\.1\)_0px_0px_16px\]{--tw-shadow:rgba(17,17,26,.1) 0px 0px 16px;--tw-shadow-colored:0px 0px 16px var(--tw-shadow-color)}.tw-shadow-lg{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.tw-shadow-lg,.tw-shadow-md{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.tw-shadow-md{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color)}.tw-shadow-sm{--tw-shadow:0 1px 2px 0 rgba(0,0,0,.05);--tw-shadow-colored:0 1px 2px 0 var(--tw-shadow-color)}.tw-shadow-sm,.tw-shadow-xl{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.tw-shadow-xl{--tw-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);--tw-shadow-colored:0 20px 25px -5px var(--tw-shadow-color),0 8px 10px -6px var(--tw-shadow-color)}.tw-outline-none{outline:2px solid transparent;outline-offset:2px}.\!tw-ring-1{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)!important;--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color)!important;box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)!important}.tw-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)}.\!tw-ring-gray-200{--tw-ring-opacity:1!important;--tw-ring-color:rgb(227 232 239/var(--tw-ring-opacity))!important}.tw-ring-gray-200{--tw-ring-opacity:1;--tw-ring-color:rgb(227 232 239/var(--tw-ring-opacity))}.tw-ring-white\/10{--tw-ring-color:hsla(0,0%,100%,.1)}.tw-transition-all{transition-duration:.15s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}.tw-duration-200{transition-duration:.2s}.tw-duration-300{transition-duration:.3s}.tw-duration-500{transition-duration:.5s}.tw-duration-700{transition-duration:.7s}.tw-ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}.placeholder\:tw-font-medium::-moz-placeholder{font-weight:500}.placeholder\:tw-font-medium::placeholder{font-weight:500}.placeholder\:tw-text-gray-500::-moz-placeholder{--tw-text-opacity:1;color:rgb(105 117 134/var(--tw-text-opacity))}.placeholder\:tw-text-gray-500::placeholder{--tw-text-opacity:1;color:rgb(105 117 134/var(--tw-text-opacity))}.hover\:tw--translate-y-0:hover{--tw-translate-y:-0px}.hover\:tw--translate-y-0:hover,.hover\:tw--translate-y-0\.5:hover{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))}.hover\:tw--translate-y-0\.5:hover{--tw-translate-y:-0.125rem}.hover\:tw-scale-105:hover{--tw-scale-x:1.05;--tw-scale-y:1.05}.hover\:tw-scale-105:hover,.hover\:tw-scale-110:hover{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))}.hover\:tw-scale-110:hover{--tw-scale-x:1.1;--tw-scale-y:1.1}@keyframes tw-pulse{50%{opacity:.5}}.hover\:tw-animate-pulse:hover{animation:tw-pulse 2s cubic-bezier(.4,0,.6,1) infinite}.hover\:tw-bg-\[\#414aac\]:hover{--tw-bg-opacity:1;background-color:rgb(65 74 172/var(--tw-bg-opacity))}.hover\:tw-bg-gray-100:hover{--tw-bg-opacity:1;background-color:rgb(238 242 246/var(--tw-bg-opacity))}.hover\:tw-bg-green-700:hover{--tw-bg-opacity:1;background-color:rgb(6 118 71/var(--tw-bg-opacity))}.hover\:tw-bg-orange-700:hover{--tw-bg-opacity:1;background-color:rgb(185 56 21/var(--tw-bg-opacity))}.hover\:tw-bg-primary-50:hover{--tw-bg-opacity:1;background-color:rgb(239 244 255/var(--tw-bg-opacity))}.hover\:tw-bg-primary-700:hover{--tw-bg-opacity:1;background-color:rgb(0 78 235/var(--tw-bg-opacity))}.hover\:tw-bg-purple-700:hover{--tw-bg-opacity:1;background-color:rgb(89 37 220/var(--tw-bg-opacity))}.hover\:tw-bg-red-700:hover{--tw-bg-opacity:1;background-color:rgb(180 35 24/var(--tw-bg-opacity))}.hover\:tw-bg-sky-700:hover{--tw-bg-opacity:1;background-color:rgb(2 106 162/var(--tw-bg-opacity))}.hover\:tw-bg-white:hover{--tw-bg-opacity:1;background-color:rgb(255 255 255/var(--tw-bg-opacity))}.hover\:tw-bg-white\/60:hover{background-color:hsla(0,0%,100%,.6)}.hover\:tw-bg-yellow-700:hover{--tw-bg-opacity:1;background-color:rgb(181 71 8/var(--tw-bg-opacity))}.hover\:tw-from-indigo-600:hover{--tw-gradient-from:#4f46e5 var(--tw-gradient-from-position);--tw-gradient-to:rgba(79,70,229,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.hover\:tw-to-blue-600:hover{--tw-gradient-to:#2563eb var(--tw-gradient-to-position)}.hover\:tw-text-\[\#467BF5\]:hover{--tw-text-opacity:1;color:rgb(70 123 245/var(--tw-text-opacity))}.hover\:tw-text-gray-500:hover{--tw-text-opacity:1;color:rgb(105 117 134/var(--tw-text-opacity))}.hover\:tw-text-gray-900:hover{--tw-text-opacity:1;color:rgb(18 25 38/var(--tw-text-opacity))}.hover\:tw-text-white:hover{--tw-text-opacity:1;color:rgb(255 255 255/var(--tw-text-opacity))}.hover\:tw-underline:hover{text-decoration-line:underline}.hover\:tw-opacity-100:hover{opacity:1}.hover\:tw-shadow-2xl:hover{--tw-shadow:0 25px 50px -12px rgba(0,0,0,.25);--tw-shadow-colored:0 25px 50px -12px var(--tw-shadow-color)}.hover\:tw-shadow-2xl:hover,.hover\:tw-shadow-lg:hover{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.hover\:tw-shadow-lg:hover{--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color)}.hover\:tw-shadow-md:hover{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(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)}.focus\:tw-bg-gray-100:focus{--tw-bg-opacity:1;background-color:rgb(238 242 246/var(--tw-bg-opacity))}.focus\:tw-text-gray-900:focus{--tw-text-opacity:1;color:rgb(18 25 38/var(--tw-text-opacity))}.focus\:tw-outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus\:tw-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\:tw-ring-blue-500:focus{--tw-ring-opacity:1;--tw-ring-color:rgb(59 130 246/var(--tw-ring-opacity))}.focus\:tw-ring-offset-2:focus{--tw-ring-offset-width:2px}.active\:tw-from-indigo-700:active{--tw-gradient-from:#4338ca var(--tw-gradient-from-position);--tw-gradient-to:rgba(67,56,202,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}.active\:tw-to-blue-700:active{--tw-gradient-to:#1d4ed8 var(--tw-gradient-to-position)}@media (min-width:640px){.sm\:tw--mx-5{margin-left:-1.25rem;margin-right:-1.25rem}.sm\:tw-mt-6{margin-top:1.5rem}.sm\:tw-flex{display:flex}.sm\:tw-inline-flex{display:inline-flex}.sm\:tw-h-12{height:3rem}.sm\:tw-w-1\/2{width:50%}.sm\:tw-w-1\/3{width:33.333333%}.sm\:tw-w-12{width:3rem}.sm\:tw-w-auto{width:auto}.sm\:tw-grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:tw-flex-row{flex-direction:row}.sm\:tw-flex-col{flex-direction:column}.sm\:tw-items-center{align-items:center}.sm\:tw-justify-between{justify-content:space-between}.sm\:tw-gap-12{gap:3rem}.sm\:tw-gap-5{gap:1.25rem}.sm\:tw-p-3{padding:.75rem}.sm\:tw-p-5{padding:1.25rem}.sm\:tw-px-5{padding-left:1.25rem;padding-right:1.25rem}.sm\:tw-text-lg{font-size:1.125rem;line-height:1.75rem}}@media (min-width:768px){.md\:tw-left-8{left:2rem}.md\:tw-right-10{right:2.5rem}.md\:tw-top-5{top:1.25rem}.md\:tw-top-8{top:2rem}.md\:tw-mb-0{margin-bottom:0}.md\:tw-mb-4{margin-bottom:1rem}.md\:tw-mb-8{margin-bottom:2rem}.md\:tw-mt-5{margin-top:1.25rem}.md\:tw-mt-7{margin-top:1.75rem}.md\:tw-block{display:block}.md\:tw-flex{display:flex}.md\:tw-inline-flex{display:inline-flex}.md\:\!tw-hidden{display:none!important}.md\:tw-hidden{display:none}.md\:tw-h-12{height:3rem}.md\:tw-h-16{height:4rem}.md\:tw-w-1\/2{width:50%}.md\:tw-w-1\/3{width:33.333333%}.md\:tw-w-1\/4{width:25%}.md\:tw-w-2\/3{width:66.666667%}.md\:tw-w-56{width:14rem}.md\:tw-w-8{width:2rem}.md\:tw-w-fit{width:-moz-fit-content;width:fit-content}.md\:tw-flex-row{flex-direction:row}.md\:tw-flex-col{flex-direction:column}.md\:tw-items-center{align-items:center}.md\:tw-justify-center{justify-content:center}.md\:tw-gap-0{gap:0}.md\:tw-gap-1{gap:.25rem}.md\:tw-gap-10{gap:2.5rem}.md\:tw-gap-3{gap:.75rem}.md\:tw-gap-4{gap:1rem}.md\:tw-space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(.5rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(.5rem*var(--tw-space-x-reverse))}.md\:tw-space-y-0>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(0px*var(--tw-space-y-reverse));margin-top:calc(0px*(1 - var(--tw-space-y-reverse)))}.md\:tw-p-6{padding:1.5rem}.md\:\!tw-text-base{font-size:1rem!important;line-height:1.5rem!important}.md\:\!tw-text-sm{font-size:.875rem!important;line-height:1.25rem!important}.md\:tw-text-2xl{font-size:1.5rem;line-height:2rem}.md\:tw-text-3xl{font-size:1.875rem;line-height:2.25rem}.md\:tw-text-4xl{font-size:2.25rem;line-height:2.5rem}.md\:tw-text-base{font-size:1rem;line-height:1.5rem}.md\:tw-text-lg{font-size:1.125rem;line-height:1.75rem}.md\:tw-text-sm{font-size:.875rem;line-height:1.25rem}.md\:tw-text-xl{font-size:1.25rem;line-height:1.75rem}}@media (min-width:1024px){.lg\:tw-col-span-1{grid-column:span 1/span 1}.lg\:tw-col-span-2{grid-column:span 2/span 2}.lg\:tw-flex{display:flex}.lg\:tw-inline-flex{display:inline-flex}.lg\:tw-hidden{display:none}.lg\:tw-h-15{height:60px}.lg\:tw-w-16{width:4rem}.lg\:tw-w-\[100\%\]{width:100%}.lg\:tw-w-\[40\%\]{width:40%}.lg\:tw-w-\[60\%\]{width:60%}.lg\:tw-w-\[98\%\]{width:98%}.lg\:tw-grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:tw-flex-row{flex-direction:row}.lg\:tw-flex-col{flex-direction:column}.lg\:tw-items-center{align-items:center}.lg\:tw-justify-center{justify-content:center}.lg\:tw-gap-1{gap:.25rem}.lg\:tw-px-0{padding-left:0}.lg\:tw-pr-0,.lg\:tw-px-0{padding-right:0}.lg\:tw-text-xl{font-size:1.25rem;line-height:1.75rem}}@media (min-width:1280px){.xl\:tw-col-span-1{grid-column:span 1/span 1}.xl\:tw-col-span-2{grid-column:span 2/span 2}.xl\:tw-w-20{width:5rem}.xl\:tw-w-64{width:16rem}.xl\:tw-grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.xl\:tw-flex-row{flex-direction:row}.xl\:tw-bg-gray-100{--tw-bg-opacity:1;background-color:rgb(238 242 246/var(--tw-bg-opacity))}.xl\:tw-bg-none{background-image:none}.xl\:tw-pb-0{padding-bottom:0}}


/*
 * CMS Module - Supplementary Tailwind Utility Classes
 * These classes are not present in the JIT-purged app.css
 * and are required by the modernized CMS blade templates.
 * Generated to match the project's tw- prefix convention.
 */

/* ===== Background Colors ===== */
.tw-bg-emerald-100{--tw-bg-opacity:1;background-color:rgb(209 250 229/var(--tw-bg-opacity))}
.tw-bg-emerald-500{--tw-bg-opacity:1;background-color:rgb(16 185 129/var(--tw-bg-opacity))}
.tw-bg-indigo-50{--tw-bg-opacity:1;background-color:rgb(238 242 255/var(--tw-bg-opacity))}
.tw-bg-indigo-100{--tw-bg-opacity:1;background-color:rgb(224 231 255/var(--tw-bg-opacity))}
.tw-bg-red-50{--tw-bg-opacity:1;background-color:rgb(254 242 242/var(--tw-bg-opacity))}
.tw-bg-gray-50\/50{background-color:rgba(248,250,252,.5)}

/* ===== Text Colors ===== */
.tw-text-indigo-400{--tw-text-opacity:1;color:rgb(129 140 248/var(--tw-text-opacity))}
.tw-text-indigo-500{--tw-text-opacity:1;color:rgb(99 102 241/var(--tw-text-opacity))}
.tw-text-indigo-600{--tw-text-opacity:1;color:rgb(79 70 229/var(--tw-text-opacity))}
.tw-text-indigo-700{--tw-text-opacity:1;color:rgb(67 56 202/var(--tw-text-opacity))}
.tw-text-emerald-700{--tw-text-opacity:1;color:rgb(4 120 87/var(--tw-text-opacity))}
.tw-text-amber-500{--tw-text-opacity:1;color:rgb(245 158 11/var(--tw-text-opacity))}
.tw-text-red-400{--tw-text-opacity:1;color:rgb(248 113 113/var(--tw-text-opacity))}
.tw-text-gray-800{--tw-text-opacity:1;color:rgb(30 41 59/var(--tw-text-opacity))}
.tw-text-5xl{font-size:3rem;line-height:1}

/* ===== Border Utilities ===== */
.tw-border-0{border-width:0}
.tw-border-t{border-top-width:1px}
.tw-border-gray-50{--tw-border-opacity:1;border-color:rgb(248 250 252/var(--tw-border-opacity))}
.tw-border-gray-100{--tw-border-opacity:1;border-color:rgb(238 242 246/var(--tw-border-opacity))}
.tw-border-indigo-500{--tw-border-opacity:1;border-color:rgb(99 102 241/var(--tw-border-opacity))}

/* ===== Ring Utilities ===== */
.tw-ring-gray-100{--tw-ring-opacity:1;--tw-ring-color:rgb(238 242 246/var(--tw-ring-opacity))}
.tw-ring-indigo-200{--tw-ring-opacity:1;--tw-ring-color:rgb(199 210 254/var(--tw-ring-opacity))}
.tw-ring-indigo-500{--tw-ring-opacity:1;--tw-ring-color:rgb(99 102 241/var(--tw-ring-opacity))}

/* ===== Shadow Colors ===== */
.tw-shadow-indigo-200{--tw-shadow-color:#c7d2fe;--tw-shadow:var(--tw-shadow-colored)}
.tw-shadow-indigo-300{--tw-shadow-color:#a5b4fc;--tw-shadow:var(--tw-shadow-colored)}

/* ===== Gradient ===== */
.tw-bg-gradient-to-b{background-image:linear-gradient(to bottom,var(--tw-gradient-stops))}
.tw-to-white{--tw-gradient-to:#fff var(--tw-gradient-to-position)}

/* ===== Spacing ===== */
.tw-gap-1\.5{gap:.375rem}
.tw-gap-2\.5{gap:.625rem}
.tw-w-1\.5{width:.375rem}
.tw-h-1\.5{height:.375rem}
.tw-mr-1{margin-right:.25rem}
.tw-mt-0\.5{margin-top:.125rem}
.tw-mb-1\.5{margin-bottom:.375rem}
.tw-p-12{padding:3rem}
.tw-pb-3{padding-bottom:.75rem}
.tw-pt-5{padding-top:1.25rem}
.tw-px-2\.5{padding-left:.625rem;padding-right:.625rem}
.tw-px-8{padding-left:2rem;padding-right:2rem}
.tw-py-1{padding-top:.25rem;padding-bottom:.25rem}
.tw-py-2\.5{padding-top:.625rem;padding-bottom:.625rem}
.tw-py-4{padding-top:1rem;padding-bottom:1rem}
.tw-py-10{padding-top:2.5rem;padding-bottom:2.5rem}
.tw-py-12{padding-top:3rem;padding-bottom:3rem}

/* ===== Typography ===== */
.tw-no-underline{text-decoration-line:none}
.tw-leading-relaxed{line-height:1.625}
.tw-leading-tight{line-height:1.25}
.tw-object-cover{-o-object-fit:cover;object-fit:cover}
.tw-max-w-none{max-width:none}
.tw-transition-colors{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:150ms}

/* ===== Prose (simplified) ===== */
.tw-prose{color:rgb(54 65 82);line-height:1.75;max-width:65ch}
.tw-prose p{margin-top:1.25em;margin-bottom:1.25em}
.tw-prose h1,.tw-prose h2,.tw-prose h3,.tw-prose h4{color:rgb(18 25 38);font-weight:600;line-height:1.3}
.tw-prose h1{font-size:2.25em;margin-top:0;margin-bottom:.89em}
.tw-prose h2{font-size:1.5em;margin-top:2em;margin-bottom:1em}
.tw-prose h3{font-size:1.25em;margin-top:1.6em;margin-bottom:.6em}
.tw-prose a{color:rgb(79 70 229);text-decoration:underline;font-weight:500}
.tw-prose strong{color:rgb(18 25 38);font-weight:600}
.tw-prose ul,.tw-prose ol{padding-left:1.625em;margin-top:1.25em;margin-bottom:1.25em}
.tw-prose li{margin-top:.5em;margin-bottom:.5em}
.tw-prose img{margin-top:2em;margin-bottom:2em;border-radius:.5rem}
.tw-prose blockquote{font-weight:500;font-style:italic;color:rgb(54 65 82);border-left:.25rem solid rgb(227 232 239);padding-left:1em;margin:1.6em 0}
.tw-prose-lg{font-size:1.125rem;line-height:1.78}

/* ===== Hover States ===== */
.hover\:tw-bg-gray-50:hover{--tw-bg-opacity:1;background-color:rgb(248 250 252/var(--tw-bg-opacity))}
.hover\:tw-bg-indigo-100:hover{--tw-bg-opacity:1;background-color:rgb(224 231 255/var(--tw-bg-opacity))}
.hover\:tw-bg-red-100:hover{--tw-bg-opacity:1;background-color:rgb(254 228 226/var(--tw-bg-opacity))}
.hover\:tw-text-indigo-600:hover{--tw-text-opacity:1;color:rgb(79 70 229/var(--tw-text-opacity))}
.hover\:tw-text-indigo-700:hover{--tw-text-opacity:1;color:rgb(67 56 202/var(--tw-text-opacity))}
.hover\:tw-ring-indigo-200:hover{--tw-ring-opacity:1;--tw-ring-color:rgb(199 210 254/var(--tw-ring-opacity))}
.hover\:tw-shadow-indigo-300:hover{--tw-shadow-color:#a5b4fc;--tw-shadow:var(--tw-shadow-colored)}

/* ===== Responsive (md: 768px+) ===== */
@media (min-width:768px){
.md\:tw-hidden{display:none}
.md\:tw-text-3xl{font-size:1.875rem;line-height:2.25rem}
.md\:tw-text-5xl{font-size:3rem;line-height:1}
}

/*
 * Essentials/HRM Module - Supplementary Tailwind Utility Classes
 * These classes are not present in the JIT-purged app.css
 * and are required by the modernized Essentials & HRM blade templates.
 * Generated to match the project's tw- prefix convention.
 */

/* ===== Background Colors ===== */
.tw-bg-blue-50{--tw-bg-opacity:1;background-color:rgb(239 246 255/var(--tw-bg-opacity))}
.tw-bg-blue-100{--tw-bg-opacity:1;background-color:rgb(219 234 254/var(--tw-bg-opacity))}
.tw-bg-green-50{--tw-bg-opacity:1;background-color:rgb(240 253 244/var(--tw-bg-opacity))}
.tw-bg-amber-50{--tw-bg-opacity:1;background-color:rgb(255 251 235/var(--tw-bg-opacity))}
.tw-bg-amber-100{--tw-bg-opacity:1;background-color:rgb(254 243 199/var(--tw-bg-opacity))}
.tw-bg-purple-100{--tw-bg-opacity:1;background-color:rgb(243 232 255/var(--tw-bg-opacity))}
.tw-bg-pink-100{--tw-bg-opacity:1;background-color:rgb(252 231 243/var(--tw-bg-opacity))}
.tw-bg-teal-100{--tw-bg-opacity:1;background-color:rgb(204 251 241/var(--tw-bg-opacity))}
.tw-bg-indigo-500{--tw-bg-opacity:1;background-color:rgb(99 102 241/var(--tw-bg-opacity))}
.tw-bg-white\/20{background-color:rgba(255,255,255,.2)}

/* ===== Text Colors ===== */
.tw-text-gray-300{--tw-text-opacity:1;color:rgb(209 213 219/var(--tw-text-opacity))}
.tw-text-blue-100{--tw-text-opacity:1;color:rgb(219 234 254/var(--tw-text-opacity))}
.tw-text-blue-600{--tw-text-opacity:1;color:rgb(37 99 235/var(--tw-text-opacity))}
.tw-text-blue-700{--tw-text-opacity:1;color:rgb(29 78 216/var(--tw-text-opacity))}
.tw-text-blue-800{--tw-text-opacity:1;color:rgb(30 64 175/var(--tw-text-opacity))}
.tw-text-green-600{--tw-text-opacity:1;color:rgb(22 163 74/var(--tw-text-opacity))}
.tw-text-green-700{--tw-text-opacity:1;color:rgb(21 128 61/var(--tw-text-opacity))}
.tw-text-green-800{--tw-text-opacity:1;color:rgb(22 101 52/var(--tw-text-opacity))}
.tw-text-amber-600{--tw-text-opacity:1;color:rgb(217 119 6/var(--tw-text-opacity))}
.tw-text-amber-700{--tw-text-opacity:1;color:rgb(180 83 9/var(--tw-text-opacity))}
.tw-text-purple-700{--tw-text-opacity:1;color:rgb(126 34 206/var(--tw-text-opacity))}
.tw-text-pink-500{--tw-text-opacity:1;color:rgb(236 72 153/var(--tw-text-opacity))}
.tw-text-pink-600{--tw-text-opacity:1;color:rgb(219 39 119/var(--tw-text-opacity))}
.tw-text-teal-500{--tw-text-opacity:1;color:rgb(20 184 166/var(--tw-text-opacity))}
.tw-text-teal-600{--tw-text-opacity:1;color:rgb(13 148 136/var(--tw-text-opacity))}
.tw-text-rose-500{--tw-text-opacity:1;color:rgb(244 63 94/var(--tw-text-opacity))}
.tw-text-indigo-100{--tw-text-opacity:1;color:rgb(224 231 255/var(--tw-text-opacity))}

/* ===== Font Size ===== */
.tw-text-4xl{font-size:2.25rem;line-height:2.5rem}
.tw-text-\[8px\]{font-size:8px}

/* ===== Gradient Utilities ===== */
.tw-bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}
.tw-from-blue-500{--tw-gradient-from:#3b82f6 var(--tw-gradient-from-position);--tw-gradient-to:rgb(59 130 246/0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.tw-to-cyan-600{--tw-gradient-to:#0891b2 var(--tw-gradient-to-position)}
.tw-to-purple-600{--tw-gradient-to:#9333ea var(--tw-gradient-to-position)}

/* ===== Sizing ===== */
.tw-w-2\.5{width:.625rem}
.tw-h-2\.5{height:.625rem}
.tw-w-14{width:3.5rem}
.tw-h-14{height:3.5rem}
.tw-w-16{width:4rem}
.tw-h-16{height:4rem}

/* ===== Spacing ===== */
.tw-mb-3{margin-bottom:.75rem}
.tw-mb-6{margin-bottom:1.5rem}
.tw-my-6{margin-top:1.5rem;margin-bottom:1.5rem}
.tw-m-\[16px\]{margin:16px}
.tw-py-1\.5{padding-top:.375rem;padding-bottom:.375rem}

/* ===== Border ===== */
.tw-border-t-2{border-top-width:2px}
.tw-border-gray-300{--tw-border-opacity:1;border-color:rgb(209 213 219/var(--tw-border-opacity))}

/* ===== Ring Colors ===== */
.tw-ring-blue-200{--tw-ring-opacity:1;--tw-ring-color:rgb(191 219 254/var(--tw-ring-opacity))}
.tw-ring-blue-300{--tw-ring-opacity:1;--tw-ring-color:rgb(147 197 253/var(--tw-ring-opacity))}
.tw-ring-green-200{--tw-ring-opacity:1;--tw-ring-color:rgb(187 247 208/var(--tw-ring-opacity))}
.tw-ring-green-300{--tw-ring-opacity:1;--tw-ring-color:rgb(134 239 172/var(--tw-ring-opacity))}
.tw-ring-amber-300{--tw-ring-opacity:1;--tw-ring-color:rgb(252 211 77/var(--tw-ring-opacity))}
.tw-ring-indigo-300{--tw-ring-opacity:1;--tw-ring-color:rgb(165 180 252/var(--tw-ring-opacity))}

/* ===== Asset Management – Background Colors ===== */
.tw-bg-blue-500{--tw-bg-opacity:1;background-color:rgb(59 130 246/var(--tw-bg-opacity))}
.tw-bg-amber-500{--tw-bg-opacity:1;background-color:rgb(245 158 11/var(--tw-bg-opacity))}
.tw-bg-red-500{--tw-bg-opacity:1;background-color:rgb(239 68 68/var(--tw-bg-opacity))}
.tw-bg-sky-500{--tw-bg-opacity:1;background-color:rgb(14 165 233/var(--tw-bg-opacity))}
.tw-bg-green-500{--tw-bg-opacity:1;background-color:rgb(34 197 94/var(--tw-bg-opacity))}
.tw-bg-purple-500{--tw-bg-opacity:1;background-color:rgb(168 85 247/var(--tw-bg-opacity))}
.tw-bg-gray-400{--tw-bg-opacity:1;background-color:rgb(156 163 175/var(--tw-bg-opacity))}

/* ===== Asset Management – Gradient Utilities ===== */
.tw-from-amber-500{--tw-gradient-from:#f59e0b var(--tw-gradient-from-position);--tw-gradient-to:rgba(245,158,11,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.tw-to-orange-500{--tw-gradient-to:#f97316 var(--tw-gradient-to-position)}
.tw-from-red-500{--tw-gradient-from:#ef4444 var(--tw-gradient-from-position);--tw-gradient-to:rgba(239,68,68,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.tw-to-rose-500{--tw-gradient-to:#f43f5e var(--tw-gradient-to-position)}
.tw-from-sky-500{--tw-gradient-from:#0ea5e9 var(--tw-gradient-from-position);--tw-gradient-to:rgba(14,165,233,0) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to)}
.tw-to-cyan-500{--tw-gradient-to:#06b6d4 var(--tw-gradient-to-position)}

/* ===== Asset Management – Text Colors ===== */
.tw-text-indigo-800{--tw-text-opacity:1;color:rgb(55 48 163/var(--tw-text-opacity))}
.tw-text-green-400{--tw-text-opacity:1;color:rgb(74 222 128/var(--tw-text-opacity))}

/* ===== Pseudo-class Variants ===== */
.last\:tw-border-0:last-child{border-width:0}

/* =====================================================================
   Attendance / Leave / Leave Type / Holiday feature views
   Mirrors the structural pattern used by the Repair module
   (public/css/tailwind/repair.css): custom classes (ess-form-grid,
   ess-field, ess-input, ess-select, ess-check-field) replace Bootstrap
   row, col-N, form-group, form-control classes in markup. Custom
   semantic table classes (attendance-table, leave-table, holiday-table,
   leave-summary-table) replace table/table-bordered/table-striped for
   DataTables-adjacent and plain HTML tables in these views.
   ===================================================================== */

.ess-form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

.ess-field {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.375rem;
}

.ess-field label {
    margin: 0;
    color: #364152;
    font-size: 0.875rem;
    font-weight: 600;
}

.ess-field-wide {
    grid-column: 1 / -1;
}

.ess-check-field {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ess-input,
.ess-select {
    width: 100%;
    min-height: 2.625rem;
    border: 1px solid #cdd5df;
    border-radius: 0.5rem;
    background: #fff;
    color: #121926;
    font-size: 0.875rem;
    line-height: 1.25rem;
    padding: 0.625rem 0.75rem;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ess-input:focus,
.ess-select:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.16);
}

textarea.ess-input {
    min-height: 5.5rem;
    resize: vertical;
}

.ess-input[readonly] {
    background: #f8fafc;
    cursor: pointer;
}

.ess-input-group {
    display: flex;
    width: 100%;
    min-height: 2.625rem;
    overflow: hidden;
    border: 1px solid #cdd5df;
    border-radius: 0.5rem;
    background: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.ess-input-group:focus-within {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.16);
}

.ess-input-group .ess-input {
    min-width: 0;
    flex: 1 1 auto;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.ess-input-group .ess-input:focus {
    box-shadow: none;
}

.ess-input-addon {
    display: inline-flex;
    flex: 0 0 2.625rem;
    align-items: center;
    justify-content: center;
    border-left: 1px solid #e3e8ef;
    background: #f8fafc;
    color: #667085;
}

.ess-help {
    margin: 0;
    color: #697586;
    font-size: 0.75rem;
    line-height: 1.125rem;
}

@media (min-width: 768px) {
    .ess-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* -----------------------------------------------------------------------
   Global internal content section headers.
   Page titles, menus, filters, breadcrumbs, and modal headers stay outside
   this selector set; this only normalizes real content card/section headers. */
.content .au-card > .au-card__header,
.content .module-shared-widget .module-shared-widget-header,
.content .box-header.module-shared-widget-header,
.content .box.box-primary:not(.module-shared-filters):not(.report-filters-block):not(.modal) > .box-header,
.content .box-primary:not(.module-shared-filters):not(.report-filters-block):not(.modal) > .box-header,
.content .expense-card > .expense-card-header,
.content .clinic-card-header,
.content .gym-card-header,
.content .tailorpro-card-header,
.content .warehouse-card-header,
.content .orders-section-header,
.content .au-section-header {
    align-items: center !important;
    background: linear-gradient(135deg, var(--ui-brand-start, #0ea5e9) 0%, var(--ui-brand-end, #0369a1) 100%) !important;
    border: 0 !important;
    border-bottom: 0 !important;
    color: #ffffff !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.75rem !important;
    justify-content: space-between !important;
    min-height: 56px !important;
    padding: 0.85rem 1.5rem !important;
}

.content .au-card > .au-card__header,
.content .module-shared-widget .module-shared-widget-header,
.content .box-header.module-shared-widget-header,
.content .box.box-primary:not(.module-shared-filters):not(.report-filters-block):not(.modal) > .box-header,
.content .box-primary:not(.module-shared-filters):not(.report-filters-block):not(.modal) > .box-header,
.content .expense-card > .expense-card-header,
.content .clinic-card-header,
.content .gym-card-header,
.content .tailorpro-card-header,
.content .warehouse-card-header,
.content .orders-section-header,
.content .au-section-header {
    border-top-left-radius: var(--ui-radius-xl, 4px) !important;
    border-top-right-radius: var(--ui-radius-xl, 4px) !important;
}

.content .au-card > .au-card__header .au-card__title,
.content .au-card > .au-card__header .au-section-title,
.content .module-shared-widget .module-shared-widget-header .box-title,
.content .module-shared-widget .module-shared-widget-header .module-shared-widget-title-copy,
.content .box-header.module-shared-widget-header .box-title,
.content .box.box-primary:not(.module-shared-filters):not(.report-filters-block):not(.modal) > .box-header .box-title,
.content .box-primary:not(.module-shared-filters):not(.report-filters-block):not(.modal) > .box-header .box-title,
.content .expense-card > .expense-card-header h1,
.content .expense-card > .expense-card-header h2,
.content .expense-card > .expense-card-header h3,
.content .expense-card > .expense-card-header h4,
.content .clinic-card-header h1,
.content .clinic-card-header h2,
.content .clinic-card-header h3,
.content .clinic-card-header h4,
.content .gym-card-header h1,
.content .gym-card-header h2,
.content .gym-card-header h3,
.content .gym-card-header h4,
.content .tailorpro-card-header h1,
.content .tailorpro-card-header h2,
.content .tailorpro-card-header h3,
.content .tailorpro-card-header h4,
.content .warehouse-card-header,
.content .warehouse-card-header h1,
.content .warehouse-card-header h2,
.content .warehouse-card-header h3,
.content .warehouse-card-header h4,
.content .orders-section-header h1,
.content .orders-section-header h2,
.content .orders-section-header h3,
.content .orders-section-header h4,
.content .au-section-header h1,
.content .au-section-header h2,
.content .au-section-header h3,
.content .au-section-header h4 {
    align-items: center !important;
    color: #ffffff !important;
    display: inline-flex !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    gap: 0.5rem !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    min-width: 0 !important;
}

.content .au-card > .au-card__header i,
.content .au-card > .au-card__header svg,
.content .module-shared-widget .module-shared-widget-header i,
.content .module-shared-widget .module-shared-widget-header svg,
.content .box-header.module-shared-widget-header i,
.content .box-header.module-shared-widget-header svg,
.content .box.box-primary:not(.module-shared-filters):not(.report-filters-block):not(.modal) > .box-header i,
.content .box.box-primary:not(.module-shared-filters):not(.report-filters-block):not(.modal) > .box-header svg,
.content .box-primary:not(.module-shared-filters):not(.report-filters-block):not(.modal) > .box-header i,
.content .box-primary:not(.module-shared-filters):not(.report-filters-block):not(.modal) > .box-header svg,
.content .expense-card > .expense-card-header i,
.content .clinic-card-header i,
.content .gym-card-header i,
.content .tailorpro-card-header i,
.content .warehouse-card-header i,
.content .orders-section-header i,
.content .au-section-header i,
.content .au-section-header svg {
    color: #ffffff !important;
}

.content .au-card > .au-card__header small,
.content .module-shared-widget .module-shared-widget-header small,
.content .box-header.module-shared-widget-header small,
.content .box.box-primary:not(.module-shared-filters):not(.report-filters-block):not(.modal) > .box-header small,
.content .box-primary:not(.module-shared-filters):not(.report-filters-block):not(.modal) > .box-header small,
.content .au-section-header small {
    color: rgba(255, 255, 255, 0.86) !important;
}

.content .au-card > .au-card__header .au-card__actions,
.content .au-card > .au-card__header .au-section-actions,
.content .au-card > .au-card__header > a,
.content .au-card > .au-card__header > button,
.content .module-shared-widget .module-shared-widget-header .box-tools,
.content .box-header.module-shared-widget-header .box-tools,
.content .box.box-primary:not(.module-shared-filters):not(.report-filters-block):not(.modal) > .box-header .box-tools,
.content .box-primary:not(.module-shared-filters):not(.report-filters-block):not(.modal) > .box-header .box-tools,
.content .expense-card > .expense-card-header > :last-child,
.content .clinic-card-header > :last-child,
.content .gym-card-header > :last-child,
.content .tailorpro-card-header > :last-child,
.content .orders-section-header > :last-child,
.content .au-section-header .section-actions,
.content .au-section-header .au-section-actions {
    align-items: center !important;
    display: inline-flex !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    justify-content: flex-end !important;
    margin-left: auto !important;
}

.content .au-card > .au-card__header .au-button,
.content .au-card > .au-card__header .btn,
.content .au-card > .au-card__header .btn-modal,
.content .au-card > .au-card__header .tw-dw-btn,
.content .module-shared-widget .module-shared-widget-header .btn,
.content .module-shared-widget .module-shared-widget-header .btn-modal,
.content .module-shared-widget .module-shared-widget-header .tw-dw-btn,
.content .box-header.module-shared-widget-header .btn,
.content .box-header.module-shared-widget-header .btn-modal,
.content .box-header.module-shared-widget-header .tw-dw-btn,
.content .box.box-primary:not(.module-shared-filters):not(.report-filters-block):not(.modal) > .box-header .btn,
.content .box.box-primary:not(.module-shared-filters):not(.report-filters-block):not(.modal) > .box-header .btn-modal,
.content .box.box-primary:not(.module-shared-filters):not(.report-filters-block):not(.modal) > .box-header .tw-dw-btn,
.content .box-primary:not(.module-shared-filters):not(.report-filters-block):not(.modal) > .box-header .btn,
.content .box-primary:not(.module-shared-filters):not(.report-filters-block):not(.modal) > .box-header .btn-modal,
.content .box-primary:not(.module-shared-filters):not(.report-filters-block):not(.modal) > .box-header .tw-dw-btn,
.content .expense-card > .expense-card-header .btn,
.content .expense-card > .expense-card-header .tw-dw-btn,
.content .clinic-card-header .btn,
.content .gym-card-header .btn,
.content .tailorpro-card-header .btn,
.content .warehouse-card-header .btn,
.content .orders-section-header .btn,
.content .au-section-header .btn,
.content .au-section-header .btn-modal,
.content .au-section-header .tw-dw-btn {
    align-items: center !important;
    background: rgba(255, 255, 255, 0.16) !important;
    background-image: none !important;
    border: 1px solid rgba(255, 255, 255, 0.32) !important;
    border-radius: var(--ui-radius-xl, 4px) !important;
    box-shadow: none !important;
    color: #ffffff !important;
    display: inline-flex !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    gap: 0.4rem !important;
    height: 32px !important;
    justify-content: center !important;
    line-height: 1 !important;
    min-height: 32px !important;
    padding: 6px 14px !important;
}

.content .au-card > .au-card__header .au-button:hover,
.content .au-card > .au-card__header .btn:hover,
.content .au-card > .au-card__header .btn-modal:hover,
.content .au-card > .au-card__header .tw-dw-btn:hover,
.content .module-shared-widget .module-shared-widget-header .btn:hover,
.content .module-shared-widget .module-shared-widget-header .btn-modal:hover,
.content .module-shared-widget .module-shared-widget-header .tw-dw-btn:hover,
.content .box-header.module-shared-widget-header .btn:hover,
.content .box-header.module-shared-widget-header .btn-modal:hover,
.content .box-header.module-shared-widget-header .tw-dw-btn:hover,
.content .box.box-primary:not(.module-shared-filters):not(.report-filters-block):not(.modal) > .box-header .btn:hover,
.content .box.box-primary:not(.module-shared-filters):not(.report-filters-block):not(.modal) > .box-header .btn-modal:hover,
.content .box.box-primary:not(.module-shared-filters):not(.report-filters-block):not(.modal) > .box-header .tw-dw-btn:hover,
.content .box-primary:not(.module-shared-filters):not(.report-filters-block):not(.modal) > .box-header .btn:hover,
.content .box-primary:not(.module-shared-filters):not(.report-filters-block):not(.modal) > .box-header .btn-modal:hover,
.content .box-primary:not(.module-shared-filters):not(.report-filters-block):not(.modal) > .box-header .tw-dw-btn:hover,
.content .expense-card > .expense-card-header .btn:hover,
.content .expense-card > .expense-card-header .tw-dw-btn:hover,
.content .clinic-card-header .btn:hover,
.content .gym-card-header .btn:hover,
.content .tailorpro-card-header .btn:hover,
.content .warehouse-card-header .btn:hover,
.content .orders-section-header .btn:hover,
.content .au-section-header .btn:hover,
.content .au-section-header .btn-modal:hover,
.content .au-section-header .tw-dw-btn:hover {
    background: rgba(255, 255, 255, 0.24) !important;
    border-color: rgba(255, 255, 255, 0.42) !important;
    color: #ffffff !important;
}

@media (max-width: 767px) {
    .content .au-card > .au-card__header,
    .content .module-shared-widget .module-shared-widget-header,
    .content .box-header.module-shared-widget-header,
    .content .box.box-primary:not(.module-shared-filters):not(.report-filters-block):not(.modal) > .box-header,
    .content .box-primary:not(.module-shared-filters):not(.report-filters-block):not(.modal) > .box-header,
    .content .expense-card > .expense-card-header,
    .content .clinic-card-header,
    .content .gym-card-header,
    .content .tailorpro-card-header,
    .content .warehouse-card-header,
    .content .orders-section-header,
    .content .au-section-header {
        align-items: stretch !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .content .au-card > .au-card__header .au-card__actions,
    .content .au-card > .au-card__header .au-section-actions,
    .content .module-shared-widget .module-shared-widget-header .box-tools,
    .content .box-header.module-shared-widget-header .box-tools,
    .content .box.box-primary:not(.module-shared-filters):not(.report-filters-block):not(.modal) > .box-header .box-tools,
    .content .box-primary:not(.module-shared-filters):not(.report-filters-block):not(.modal) > .box-header .box-tools,
    .content .au-section-header .section-actions,
    .content .au-section-header .au-section-actions {
        justify-content: flex-start !important;
        margin-left: 0 !important;
    }
}

/* DataTables-rendered tables (attendance, leave, leave_type, holiday) and
   the small AJAX-rendered plain tables (attendance-by-date/shift, leave
   user summary). Mirrors catalogue-admin.css's order-summary-table
   approach. */
.attendance-table,
.leave-table,
.leave-type-table,
.holiday-table,
.attendance-summary-table,
.leave-summary-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

.attendance-table th,
.attendance-table td,
.leave-table th,
.leave-table td,
.leave-type-table th,
.leave-type-table td,
.holiday-table th,
.holiday-table td,
.attendance-summary-table th,
.attendance-summary-table td,
.leave-summary-table th,
.leave-summary-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #f0f0f0;
    text-align: left;
    font-size: 13px;
}

.attendance-table th,
.leave-table th,
.leave-type-table th,
.holiday-table th,
.attendance-summary-table th,
.leave-summary-table th {
    background-color: #f8f9fa;
    font-weight: 700;
    color: #555;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.5px;
}


@media (max-width: 767px) {
    .main-header .navbar-custom-menu {
        float: none !important;
        display: block !important;
    }
    .main-header .navbar-custom-menu .dropdown-menu {
        left: auto !important;
    }
    .skin-blue-light .main-header .navbar .dropdown-menu li a {
        color: #777;
    }
    .main-header .navbar {
      height: auto;
    }
}
.bg-danger {
    background-color: #f2dede !important;
}
.btn-big {
    padding: 10px 30px;
    font-size: 18px;
    line-height: 1.3333333;
}

.of-visible {
    overflow: visible !important;
}

#online_indicator {
  font-size: 8px;
  vertical-align: middle;
}

.pt-0 {
  padding-top: 0px;
}
.f-right {
  float: right;
}
.mb-10 {
  margin-bottom: 10px;
}
.discount-badge {
  position: absolute;
  top: 6px;
  right: 10px;
  font-size: 18px;
  padding: 7px;
}

.discount-badge-small {
  position: absolute;
  top: -2px;
  left: 10px;
  font-size: 12px;
  padding: 6px;
}
.product-info-table td, .product-info-table th {
  font-size: 12px;
}
.catalogue {
  max-height: 127px;
  margin: auto;
  margin-bottom: 18px;
}
.catalogue-title {
  display: inline-block;
  font-size: 18px;
  margin: 0;
  line-height: 1;
  margin-bottom: 10px;
}
.bg-light-gray {
  background-color: #f8f8f8 !important;
}
.p-5-5 {
  padding: 5px 5px !important;
}
.m-4 {
  margin: 4px;
}
.skin-black .main-header, .skin-black-light .main-header {
  color: #525f7f !important;
}
.skin-black .main-header .navbar .nav .open>a {
  color: #999 !important;
}
.skin-black .main-header .navbar .nav>li>a:hover{
  color: #999 !important;
}
.skin-black .main-header .navbar > .sidebar-toggle:hover {
  color: #999 !important;
}
.mt-0{
  margin-top: 0 !important;
}
.table-pdf thead tr{
  background-color: #357ca5 !important;
  color: #fff;
}
.table-pdf thead tr th {
  color: #fff !important;
}
.blue-heading {
  background-color: #357ca5;
  color: #fff;
}

.table-pdf .odd {
    background-color: #DCE6F1;
}
.p-4{
  padding: 4px;
}
.p-10{
  padding: 10px !important;
}
.jquery-top-scrollbar{
    height: 6px !important;
}
.jquery-top-scrollbar div {
    height: 6px !important;
}
.scroll-top-bottom {
  width: 100%; 
  overflow: scroll;
}
.scroll-top-bottom::-webkit-scrollbar {
    height: 6px;
}

.scrolltop {
  display:none;
  width:100%;
  margin:0 auto;
  position:fixed;
  bottom:20px;
  right:10px; 
}
.scroll {
  position:absolute;
  right:20px;
  bottom:20px;
  background:#b2b2b2;
  background:rgba(178,178,178,0.7);
  padding:7px;
  text-align: center;
  margin: 0 0 0 0;
  cursor:pointer;
  transition: 0.5s;
  -moz-transition: 0.5s;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s; 
  border-radius: 6px;   
}
.scroll:hover {
  background:rgba(178,178,178,1.0);
  transition: 0.5s;
  -moz-transition: 0.5s;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;    
}
.scroll:hover .fas {
  padding-top:-10px;
}
.scroll .fas {
  font-size:25px;
  margin-top:-5px;
  margin-left:1px;
  transition: 0.5s;
  -moz-transition: 0.5s;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;  
}

.f-left {
  float: left;
}
.align-left {
 text-align: left;
}
.align-right {
 text-align: right;
}

.table-pdf {
  border-collapse: collapse;
  width: 100%;
  border-spacing: 8px 10px;
}
.td-border td, .td-border th{
  border-bottom: 1px solid lightgrey;
  padding: 8px 5px;
}

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

.btn-app>.fas, .btn-app>.fab{
    font-size: 20px;
    display: block;
}
.dropdown-menu>li>a>.fas{
    margin-right: 6px;
}
.mt-5 {
  margin-top: 5px !important;
}
.pos-form-actions{
  height: auto;
  padding-top: 6px;
  padding-bottom: 6px;
  position: fixed;
  bottom: 0px;
  /* background-color: #D1D5DC; */
  width: 100%;
  z-index: 1000;
}
.mb-12 {
  margin-bottom: 12px !important;
}
.pb-0{
  padding-bottom: 0px !important;
}
.pr-12{
  padding-right: 12px !important;
}
.main-header .sidebar-toggle:before {
    content: "" !important;
}
/* jQuery UI's own theme CSS is not loaded in this app (Bootstrap-free
   migration dropped it), so the widget's JS-computed position/z-index have
   nothing to render against — the dropdown existed in the DOM but was
   visually absent. These are the base rules jquery-ui.css would otherwise
   supply, kept minimal and scoped to autocomplete only. */
.ui-autocomplete {
    position: absolute;
    z-index: 3000;
    max-height: 300px;
    overflow-y: auto;
    /* prevent horizontal scrollbar */
    overflow-x: hidden;
    list-style: none;
    margin: 2px 0 0;
    padding: 4px 0;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
.ui-autocomplete .ui-menu-item {
    display: block;
}
.ui-autocomplete .ui-menu-item-wrapper {
    display: block;
    padding: 6px 12px;
    font-size: 13px;
    color: #111827;
    cursor: pointer;
}
.ui-autocomplete .ui-menu-item-wrapper.ui-state-active,
.ui-autocomplete .ui-menu-item-wrapper:hover {
    background: #eef2f7;
    color: #111827;
    border: 0;
    margin: 0;
}
.margin-bottom-20 {
  margin-bottom: 20px !important;
}
.text-white {
  color: #fff;
}
.wizard > .steps > ul > li {
  width: 33.33% !important;
}
.wizard > .content {
  /* background: #445867 !important; */
}
legend {
  color: #fff;
  margin-bottom: 6px;
  border-bottom: none;
}
.left-col {
  background: linear-gradient(0deg,rgba(0, 0, 0, 0.76),rgba(51, 51, 51, 0.32)),url(../img/home-bg.jpg); 
  text-align: center;
  background-size: cover;
  background-position: center;
}
.left-col-content {
  color: #1A7BF9;
  width: 100%;
}
.login-header {
  font-size: 27px;
  font-weight: 600;
}
.login-header a {
  color: #fff;
}
.form-header {
  font-size: 18px;
  margin: 16px 0;
}
.btn-login {
  padding: 6px 52px !important;
}


/* .right-col label {
  color: #fff;
}

.right-col a, .text-white a {
  color: #fff;
  font-weight: 600;
  font-size: 15px
}
.right-col a:hover, .text-white a:hover {
  color: #ccc;
}
.right-col-content {
  padding: 10% 16%;
  padding-bottom: 3%;
}
.right-col-content-register {
  padding: 2% 8%;
} */

.input_inline {
  width: 100%;
  display: inline-flex;
}
.input_inline input, .input_inline span {
  width: 50%;
}
.bg-manufacturing {
  background-color: #ff851b;
}
.img-thumbnail {
  position: relative;
  width: 70px;
  height: 70px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 2px;
  transition: border .2s ease-in-out;
  padding: 4px;
  margin: 3px;
  text-align: center;
}
.img-thumbnail>.badge{
  position: absolute;
  top: -5px;
  right: -7px;
  font-size: 9px;
  font-weight: 400;
  cursor: pointer;
}
.navbar-nav>.notifications-menu>.dropdown-menu>li .menu {
  max-height: 350px;
}
.bg-aqua-lite {
  background-color: #7FFFD4;
}
.navbar-nav>.notifications-menu>.dropdown-menu>li .menu>li>a {
  white-space: normal;
}
.spacer {
  margin-top: 20px;
}
#product_list_body {
    max-height: 485px;
    overflow-y: scroll;
    overflow-x: hidden;
}
.div-overlay {
    cursor: not-allowed;
    background: #e9e9e9; 
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.5;
}

.d-inline-table {
  display: inline-table;
}

.label-round{
  font-size: 8px;
  border-radius: 44%;
}
.table>tbody+tbody{
  border-top: 0;
}
.table-pl-12 td, .table-pl-12 th{
  padding-left: 12px !important;
}
table tbody td.pl-20-td{
  padding-left: 20px !important;
}
table.table-border-center > tbody > tr > td:first-child, 
table.table-border-center > thead > tr > th:first-child,
table.table-border-center > tfoot > tr > td:first-child
{
  border-right: 1px solid darkgray;
}
table.table-border-center-col > tbody > tr > td:nth-child(2), 
table.table-border-center-col > thead > tr > th:nth-child(2),
table.table-border-center-col > tfoot > tr > td:nth-child(2)
{
  border-right: 1px solid darkgray;
  border-left: 1px solid darkgray;
}
.bg-transparent{
  background-color: transparent !important;
}
.mb-0{
  margin-bottom: 0;
}

.nav-tabs>li>a{
  font-size: 18px;
  font-weight: 600;
}
.table-transparent, .table-transparent th {
    background-color: transparent !important;
    color: #000 !important;
}
.td-full-width {
  white-space:nowrap;
}
.font-17{
    font-size: 17px !important;
}
table.dataTable tbody>tr.selected{
    background-color: #B0BED9;
}
tr.footer-total > td {
    vertical-align: middle !important;
}
.error{
	color: red !important;
}
/*  pos tab */
div.pos-tab-container{
  z-index: 10;
  background-color: #ffffff;
  padding: 0 !important;
  border-radius: 4px;
  -moz-border-radius: 4px;
  border:1px solid #ddd;
    margin-bottom: 28px;
  -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
  box-shadow: 0 6px 12px rgba(0,0,0,.175);
  -moz-box-shadow: 0 6px 12px rgba(0,0,0,.175);
  background-clip: padding-box;
}
div.pos-tab-menu{
  padding-right: 0;
  padding-left: 0;
  padding-bottom: 0;
}
div.pos-tab-menu div.list-group{
  margin-bottom: 0;
}
div.pos-tab-menu div.list-group>a{
  margin-bottom: 0;
}
div.pos-tab-menu div.list-group>a .fa {
  color: #5A55A3;
}
div.pos-tab-menu div.list-group>a:first-child{
  border-top-right-radius: 0;
  -moz-border-top-right-radius: 0;
}
div.pos-tab-menu div.list-group>a:last-child{
  border-bottom-right-radius: 0;
  -moz-border-bottom-right-radius: 0;
}


/* div.pos-tab-menu div.list-group>a.active,
div.pos-tab-menu div.list-group>a.active .fa{
  background-color: #3c8dbc;
  color: #ffffff;
    border-color: #3c8dbc;
} */

div.pos-tab-menu div.list-group > a.active,
div.pos-tab-menu div.list-group > a.active .fa {
  background: linear-gradient(to right, var(--brand-500), var(--brand-700));
  color: #ffffff;
  border-color: transparent;
}


div.pos-tab-menu div.list-group>a.active:after{
  /* content: ''; */
  position: absolute;
  left: 100%;
  top: 50%;
  margin-top: -13px;
  border-left: 0;
  border-bottom: 13px solid transparent;
  border-top: 13px solid transparent;
  border-left: 10px solid #3c8dbc;
}

div.pos-tab-content{
  background-color: #ffffff;
  /* border: 1px solid #eeeeee; */
  padding-left: 20px;
  padding-top: 20px;
}

div.pos-tab div.pos-tab-content:not(.active){
  display: none;
}

.add-product-price-table th{
	background-color: #5cb85c;
    color: white;
}
.blue-header th {
	background-color: #3c8dbc;
    color: white;
}
.table-th-green th{
	background-color: #5cb85c;
    color: white;
}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0; 
}
.active-cell {
    border: 2px dotted #3c8dbc !important;
}
.cursor-pointer{
    cursor: pointer !important;
}
.pos_product_div{
    /* min-height: 47vh;
    max-height: 57vh; */
    overflow-y: auto;
    /* margin-bottom: 20px; */
    /* height removed: cart card now uses flex layout (see pos-ui-enhanced.css) */
}
.bg-lightgray{
    background-color: #F0EDED !important;
}
.balance_due_box >li{
    padding: 11px 5px 0px 5px;
}
.option-div {
    padding: 15px;
    background-color: #d2d6de;
    color: #333;
    border:1px solid #d2d6de;
    cursor: pointer;
}
.option-div input[type="radio"]{
    display: none;
}
.option-div-group .icon {
    color: #d33724;
    display: none;
}
.option-div-group .option-div:hover{
    border:1px solid gray;
}
.option-div-group .active .icon{
    display: block;
}
.margin-left-10 {
    margin-left: 10px;
}
.margin-bottom-12{
    margin-bottom: 12px;
}
.bg-info{
    background-color: #00c0ef !important;
}
.bg-info > a{
    color: #FFFFFF !important;
}
.bg-info>a:hover{
    background-color: #337ab7 !important;
}
/* Column Visibility dropdown ("Columns" button) — clean white panel with checkboxes */
ul.dt-button-collection.dropdown-menu {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    padding: 6px;
    max-height: 320px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    min-width: 220px;
}
ul.dt-button-collection.dropdown-menu::-webkit-scrollbar {
    width: 6px;
}
ul.dt-button-collection.dropdown-menu::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius: 6px;
}
ul.dt-button-collection.dropdown-menu > li.dt-button {
    background: transparent !important;
    border-radius: 6px;
    margin: 2px 0;
    list-style: none;
    transition: background-color 0.12s ease;
}
ul.dt-button-collection.dropdown-menu > li.dt-button:hover {
    background-color: #f1f5f9 !important;
}
ul.dt-button-collection.dropdown-menu > li.buttons-columnVisibility > a {
    display: flex !important;
    align-items: center;
    gap: 10px;
    color: #1e293b !important;
    font-size: 13px;
    font-weight: 500;
    padding: 8px 10px !important;
    white-space: normal !important;
    cursor: pointer;
    background: transparent !important;
}
ul.dt-button-collection.dropdown-menu > li.buttons-columnVisibility > a::before {
    content: "";
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    border: 1.5px solid #94a3b8;
    border-radius: 4px;
    background-color: #ffffff;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 11px;
    transition: background-color 0.12s ease, border-color 0.12s ease;
}
ul.dt-button-collection.dropdown-menu > li.buttons-columnVisibility.active > a::before {
    background-color: #2563eb;
    border-color: #2563eb;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8'/%3E%3C/svg%3E");
}
td.details-control {
    background: url('/img/details_open.png') no-repeat center center;
    cursor: pointer;
}
tr.details td.details-control {
    background: url('/img/details_close.png') no-repeat center center;
}
.icheckbox_square-blue, .iradio_square-blue{
    margin-right: 10px;
}
.header-right-div{
    right: 10px;
    float: right;
    position: absolute;
    top: 15px;
}
.header-left-div{
    margin-top: 15px;
    display: inline-flex;
}
.m-8 {
    margin: 8px;
}
.mt-10{
    margin-top: 10px;
}
.mt-15{
    margin-top: 15px;
}
.m-5 {
    margin: 5px;
}
.icon-link{
  text-align:center;
  display:block;
  margin-bottom: 18px;
}
.icon-link > a {
    display:grid;
}
.icon-link > .badge{
    position: absolute;
    top: 20px;
    right: 67px;
}
.link-des {
    display: inline-block;
    text-align: left;
}

.navbar-nav>.user-menu>.dropdown-menu>li.user-header>img {
    border: none;
    height: auto;
    width: 100%;
    max-height: 120px;
}
.bg-light-green{
    background-color: #98D973 !important;
    color: #fff !important
}
.hover-q {
    font-size: 16px;
    margin-left: 3px;
    cursor: help;
}
.input-group-addon .hover-q{
    margin-left: 0px;
}
.text-bold{
    font-weight: bold;
}
.tour .popover-content{
    padding: 18px 14px;
}
.table-slim>tbody>tr>td, .table-slim>tbody>tr>th, .table-slim>tfoot>tr>td, .table-slim>tfoot>tr>th, .table-slim>thead>tr>td, .table-slim>thead>tr>th{
    padding: 1px;
}

/* Custom scroll bar start*/

/* width */
/* ::-webkit-scrollbar {
    width: 7px;
} */

/* Track */
/* ::-webkit-scrollbar-track {
    background: #f1f1f1; 
} */
 
/* Handle */
/* ::-webkit-scrollbar-thumb {
    background: #888; 
} */

/* Handle on hover */
/* ::-webkit-scrollbar-thumb:hover {
    background: #555; 
} */

/* Custom scroll bar end*/

.product_cell{
    height: 100px;
    padding: 1%;
}
.product_cell_div{
    height: 100% !important;
    width: 100% !important;
    text-align: center;
    vertical-align: middle;
    padding-top: 5px;
    cursor: pointer;
    overflow: hidden;
}

/*CSS to print receipts*/
.print_section{
    display: none;
}
@media print{
    .print_section{
        display: inline !important;
    }
    .modal-xl{
        width: 100% !important;
    }
    ::-webkit-scrollbar{
        display: none !important;
    }
    #toast-container {
      display: none;
    }
}

.input-number .btn-default{
    background-color: white;
    padding: 6px 9px;
}

.width-50{
    width: 50% !important;
}
.width-40{
    width: 40% !important;
}
.width-60{
    width: 60% !important;
}
.width-100{
    width: 100% !important;
}

.font-30{
    font-size: 30px !important;
}

.font-23{
    font-size: 23px !important;
}
.padding-5{
    padding: 5px !important;
}
.padding-10{
    padding: 10px !important;
}
.padding-side-15{
    /*padding-left: 15px !important;
    padding-right: 15px !important;*/
}
.text-muted-imp{
    color: #A3A3A3 !important;
}

.table-no-top-cell-border td{
    border-top: 0px !important;
    border-bottom: 0px !important;
}
.table-no-top-cell-border th{
    border-top: 0px !important;
    border-bottom: 0px !important;
}

.table-no-side-cell-border td{
    border-left: 0px !important;
    border-right: 0px !important;
}
.table-no-side-cell-border th{
    border-left: 0px !important;
    border-right: 0px !important;
}

.color-555 {
    color: #555555 !important;
}
.color-555 *{
    color: #555555 !important;
}
.color-white {
    color: white !important;
}
.col-no-padding{
    padding-left: 0px;
    padding-right: 0px;
}
.col-2px-padding{
    padding: 2px;
}

.pos-express-btn{
    font-size: 23px !important;
    overflow: hidden !important;
    height: 73px !important;
    white-space: normal;
}
.word-wrap{
    word-wrap: break-word !important;
}

.modal-xl{
    width: 90%; /* respsonsive width */
    margin-left: auto !important;
    margin-right: auto !important;
}
table.ajax_view tbody tr{
    cursor: pointer;
}
.bg-white{
    background-color: #fff;
}

.product-thumbnail-small{
    height: 50px;
    width: 50px;
}

table.table-text-center td, table.table-text-center th{
    vertical-align: middle !important;
}
.product_list{
    padding-left: 3px;
    padding-right: 3px;
}
.product_box{
  width: 100%;
  /*padding-top: 5px;
  padding-bottom: 2px;*/
  margin-bottom: 10px;
  text-align: center;
  cursor: pointer;
  /*border: 1px solid darkgray;*/
  font-weight: 600;
  background-color: #fff;
  border-radius: 12px;
  padding: 8px;
}
.product_box .image-container{
  height: 50px;
  margin: auto;
  width: 100%;
  margin-bottom: 4px;
}
@media (max-width: 767px) {
  .product_box .image-container {
    height: auto;
    aspect-ratio: 1 / 1;
  }
}
.product_box .image-container img{
  height: 100%;
  width: 100%;
  border-radius: 12px;
}
.eq-height-row{
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display:flex;
    flex-wrap: wrap;
}
.eq-height-col{
    display: flex;
}

.product_box .text_div{
    margin-top: 3px;
}
.product_box .text{
    width: 100%;
    overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 1; /* number of lines to show */
   line-height: 14px;        /* fallback */
   max-height: 14px;       /* fallback */
}
.small-box.bg-gray:hover{
    color: #000;
    text-decoration: none;
}

#calendar table tbody td {
    cursor: pointer;
}

.min-height-90hv{
    min-height: 90vh !important;
}

/* Grow Shadow */
.hvr-grow-shadow {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: box-shadow, transform;
  transition-property: box-shadow, transform;
}
.hvr-grow-shadow:hover, .hvr-grow-shadow:focus, .hvr-grow-shadow:active {
  box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.5);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.text-link{
    cursor: pointer;
}

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

.v-center{
    vertical-align: middle !important;
}

.bg-woocommerce{
  background-color: #9E458B !important;
}

/*.box, .info-box, .nav-tabs-custom, .external-event{
  box-shadow: 0 4px 6px 0 hsla(0, 0%, 0%, 0.2) !important;
}*/

.user_avatar {
  border-radius: 50%;
  width: 25px;
  height: 25px;
  margin: 1px;
}

.fs-10 {
  font-size: 10px;
}

.timeline-lode-more-btn {
  margin-left: 50px;
  margin-top: 25px;
  padding-right: 12px;
  padding-left: 12px;
}

.pa-0 {
  padding: 0px !important;
}

.mt-56{
  margin-top: 56px !important;
}

.m-2{
  margin: 2px !important;
}

.treeview-menu i{
  display: none !important;
}
.treeview-menu a{
  padding-left: 25px !important;
  font-size: 95% !important;
}
.treeview-menu a::before{
  content: "\2192 ";
}

.mr-8 {
  margin-right: 8px !important;
}

@media (max-width: 1024px) {
   .pos_form_totals{
        margin-bottom: 40px;
    }
}

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

.pos-total {
    /* display: inline-block; */
    padding: 8px 10px;
    vertical-align: middle;
    margin-left: 5px;
    margin-right: 5px;
}
.pos-total span.number{
    font-size: 26px;
    vertical-align: middle;
    font-weight: bolder;
}

.pos-total span.text{
    font-weight: bolder;
    display: inline-block;
    width: 60px;
    vertical-align: middle;
}
.mb-40 {
    margin-bottom: 40px !important;
}

@media print {
    a:after { content:''; }
    a[href]:after { content: none !important; }
}

.fa-times{
    font-size: 30px
}
.mb-5{
  margin-bottom: 5px !important;
}
.accounting-tailwind-module .accounting-tree-root {
    color: #334155;
    font-size: 13px;
    line-height: 1.4;
    min-width: 720px;
}
.accounting-tailwind-module .accounting-tree-toolbar {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    width: 100%;
}
.accounting-tailwind-module .accounting-tree-toolbar-actions {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: 8px;
}
.accounting-tailwind-module .accounting-tree-toolbar-search {
    flex: 0 0 320px;
    margin-left: auto;
    max-width: 320px;
    width: 320px;
}
.accounting-tailwind-module .accounting-tree-search-box {
    position: relative;
    width: 100%;
}
.accounting-tailwind-module .accounting-tree-search-icon {
    align-items: center;
    color: #94a3b8;
    display: flex;
    font-size: 13px;
    height: 100%;
    justify-content: center;
    left: 12px;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 16px;
}
.accounting-tailwind-module .accounting-tree-search-input {
    background: #fff;
    border: 1px solid #cfd8e3;
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    color: #1f2937;
    display: block;
    font-size: 13px;
    height: 36px;
    line-height: 20px;
    padding: 7px 12px 7px 36px;
    width: 100%;
}
.accounting-tailwind-module .accounting-tree-search-input::placeholder {
    color: #94a3b8;
}
.accounting-tailwind-module .accounting-tree-search-input:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, .12);
    outline: none;
}
.accounting-tailwind-module #coa_tree_container {
    overflow-x: auto;
}
.accounting-tailwind-module .accounting-tree-list {
    list-style: none;
    margin: 0;
    padding: 0 0 0 24px;
    position: relative;
}
.accounting-tailwind-module .accounting-tree-list--root {
    padding-left: 0;
}
.accounting-tailwind-module .accounting-tree-list:not(.accounting-tree-list--root)::before {
    background: #e5e7eb;
    bottom: 12px;
    content: "";
    left: 11px;
    position: absolute;
    top: 0;
    width: 1px;
}
.accounting-tailwind-module .accounting-tree-item {
    margin: 4px 0;
    position: relative;
}
.accounting-tailwind-module .accounting-tree-list:not(.accounting-tree-list--root) > .accounting-tree-item::before {
    background: #e5e7eb;
    content: "";
    height: 1px;
    left: -13px;
    position: absolute;
    top: 21px;
    width: 13px;
}
.accounting-tailwind-module .accounting-tree-node {
    align-items: center;
    background: #fff;
    border: 1px solid transparent;
    border-radius: 8px;
    display: flex;
    gap: 8px;
    min-height: 42px;
    padding: 6px 8px;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.accounting-tailwind-module .accounting-tree-node:hover {
    background: #f8fafc;
    border-color: #e5e7eb;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.accounting-tailwind-module .accounting-tree-node--type {
    background: #f8fafc;
    border-color: #e5e7eb;
    font-weight: 700;
}
.accounting-tailwind-module .accounting-tree-node--subtype {
    background: #fbfdff;
    font-weight: 600;
}
.accounting-tailwind-module .accounting-tree-toggle,
.accounting-tailwind-module .accounting-tree-toggle-spacer {
    align-items: center;
    border-radius: 6px;
    display: inline-flex;
    flex: 0 0 26px;
    height: 26px;
    justify-content: center;
    width: 26px;
}
.accounting-tailwind-module .accounting-tree-toggle {
    background: #fff;
    border: 1px solid #dbe3ef;
    color: #64748b;
}
.accounting-tailwind-module .accounting-tree-toggle:hover {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #2563eb;
}
.accounting-tailwind-module .accounting-tree-toggle i {
    font-size: 11px;
    transition: transform .15s ease;
}
.accounting-tailwind-module .accounting-tree-item[data-open="0"] > .accounting-tree-node .accounting-tree-toggle i {
    transform: rotate(-90deg);
}
.accounting-tailwind-module .accounting-tree-icon {
    align-items: center;
    border-radius: 8px;
    display: inline-flex;
    flex: 0 0 30px;
    height: 30px;
    justify-content: center;
    width: 30px;
}
.accounting-tailwind-module .accounting-tree-icon--type {
    background: #eef2ff;
    color: #4f46e5;
}
.accounting-tailwind-module .accounting-tree-icon--subtype {
    background: #ecfeff;
    color: #0891b2;
}
.accounting-tailwind-module .accounting-tree-icon--account {
    background: #f0fdf4;
    color: #16a34a;
}
.accounting-tailwind-module .accounting-tree-icon--child {
    background: #fff7ed;
    color: #ea580c;
}
.accounting-tailwind-module .accounting-tree-main {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    gap: 6px 12px;
    min-width: 0;
}
.accounting-tailwind-module .accounting-tree-title {
    color: #1f2937;
    min-width: 180px;
}
.accounting-tailwind-module .accounting-tree-code {
    color: #64748b;
    font-size: 12px;
    font-weight: 500;
    margin-left: 4px;
}
.accounting-tailwind-module .accounting-tree-meta {
    align-items: center;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: auto;
}
.accounting-tailwind-module .accounting-tree-balance {
    color: #0f172a;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    white-space: nowrap;
}
.accounting-tailwind-module .accounting-tree-status {
    align-items: center;
    border-radius: 999px;
    display: inline-flex;
    font-size: 11px;
    font-weight: 700;
    gap: 4px;
    padding: 2px 8px;
    white-space: nowrap;
}
.accounting-tailwind-module .accounting-tree-status--active {
    background: #dcfce7;
    color: #15803d;
}
.accounting-tailwind-module .accounting-tree-status--inactive {
    background: #fee2e2;
    color: #b91c1c;
}
.accounting-tailwind-module .accounting-tree-actions {
    align-items: center;
    display: inline-flex;
    flex: 0 0 auto;
    gap: 6px;
    margin-left: 10px;
    opacity: 0;
    transition: opacity .15s ease;
}
.accounting-tailwind-module .accounting-tree-node:hover .accounting-tree-actions,
.accounting-tailwind-module .accounting-tree-node:focus-within .accounting-tree-actions {
    opacity: 1;
}
/* =============================================
   MOBILE RESPONSIVENESS FIXES
   ============================================= */

/* Issue 1: DataTables — prevent horizontal page overflow on mobile.
   `.dataTables_wrapper` itself no longer carries `overflow-x: auto` here: setting
   only one axis makes the browser auto-promote the other (unset) axis to `auto`
   too (CSS Overflow spec), which added a phantom vertical scrollbar around every
   DataTable even when nothing needed one. The horizontal-scroll boundary belongs
   on the ancestor that was designed to own it — `.table-responsive` (restored in
   resources/sass/design-system/_bootstrap-grid.scss) for plain tables, or
   DataTables' own `.dataTables_scrollBody` for scrollX/scrollY tables — both of
   which already scroll correctly on their own. `min-width` stays: it gives the
   table a floor width so those ancestors actually engage their scroll on mobile. */
.dataTables_wrapper table.dataTable {
    min-width: 500px;
}

/* Issue 4: POS action bar button wrap on very small phones */
@media (max-width: 767px) {
    .pos-form-actions .tw-overflow-x-auto {
        flex-wrap: wrap;
    }
}
@media (max-width: 480px) {
    .pos-form-actions {
        height: auto;
        padding-top: 6px;
        padding-bottom: 6px;
    }
}

/* Issue 6: POS product area — fluid heights on mobile/tablet
   pos_product_div height removed (flex layout handles it). */
@media (max-width: 991px) {
    #product_list_body {
        max-height: min(485px, 45vh);
        overflow-y: scroll;
        overflow-x: hidden;
    }
}

/* Desktop POS — let cart card stretch to fill the empty space above the fixed action bar */
@media (min-width: 992px) {
    /* Cart items container height is now managed by flex layout in
       pos-ui-enhanced.css (#pos-left-pane .pos_product_div).
       The old fixed `calc(100vh - 460px)` left empty space below the
       last product row, so it has been removed in favor of flex:1 fill. */
    .pos_product_div {
        overflow-y: auto;
    }
    /* Make the brand/product list panel fill the available space */
    #product_list_body {
        max-height: calc(100vh - 260px) !important;
    }
    /* Trim the bottom spacer so the cart card sits right above the fixed action bar */
    .content .tw-mb-14 {
        margin-bottom: 6.5rem !important;
    }
    /* Hide the in-flow footer on POS desktop — copyright sits awkwardly between content and the fixed action bar */
    body.lockscreen .main-footer {
        display: none !important;
    }
    /* Tighten the action bar */
    body.lockscreen .pos-form-actions {
        padding-top: 6px;
        padding-bottom: 8px;
    }
}

/* Issue 7: Sidebar overlay z-index — fixed directly in app.blade.php inline styles */

/* Issue 8: Accessibility — restore reasonable zoom on non-POS pages handled via viewport meta */

/* Issue 9: Modals — prevent inner content from overflowing on phones */
@media (max-width: 767px) {
    .modal-dialog,
    .modal-xl {
        width: 100% !important;
        margin: 0.5rem auto !important;
    }
    .modal-content {
        border-radius: 0.75rem;
    }
    .modal-body {
        overflow-x: auto;
    }
    .modal-body table {
        min-width: 480px;
    }
    /* Prevent inner forms overflowing modal */
    .modal-body .form-horizontal .control-label {
        text-align: left;
        padding-bottom: 2px;
    }
}


/* ===== Global Action Button & Dropdown Style =====
   THE single source of truth for every row-level "Action" dropdown app-wide:
   a plain sky-blue outline button (no fill) with the arrow caret, and a
   dropdown menu where every item shares the same icon+label style with no
   active/preselected highlighting - only a hover state.

   It covers BOTH markup dialects with one rule set:
   - Server-rendered tables: .btn-group > .dropdown-toggle + .dropdown-menu
     (controller HTML driven by core-behaviors.js [data-vdropdown]).
   - Vue tables: the shared vue-shared/components/DropdownMenu.vue, which
     renders .au-dropdown > .au-dropdown__toggle + .au-dropdown__menu. The
     toggle skin keys on the .tw-dw-btn class (the component's default) so
     intentionally-custom toggles (ProjectCardMenu kebab, Clinic queue-move
     icon button) keep their own look while their MENUS stay standardized.

   Scoped to .btn-group / .au-dropdown so it only targets action dropdowns,
   not navbar/profile menus or other unrelated dropdowns.
   Structural positioning (absolute overlay, z-index, caret triangle) lives in
   resources/sass/design-system/_bootstrap-parity.scss - this block is skin. */

.btn-group > .dropdown-toggle,
.au-dropdown > .au-dropdown__toggle.tw-dw-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    float: none !important;
    /* The static daisyUI build ships `.tw-dw-btn { transform: scale(.95) }`,
       which renders tw-dw-btn action buttons 5% smaller (30.4px vs 32px) than
       the legacy .btn variants and slightly blurry. Kill it so every Actions
       button - old or new markup - has the exact same footprint. */
    transform: none !important;
    background: #fff !important;
    background-image: none !important;
    border: 1.5px solid #bae6fd !important;
    border-radius: 6px !important;
    height: auto !important;
    min-height: auto !important;
    padding: 5px 12px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    letter-spacing: .03em !important;
    color: #0369a1 !important;
    box-shadow: 0 1px 3px rgba(14,165,233,.10), 0 0 0 0 rgba(14,165,233,0) !important;
    cursor: pointer !important;
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .12s ease !important;
}

.btn-group > .dropdown-toggle:hover,
.btn-group > .dropdown-toggle:focus,
.btn-group.open > .dropdown-toggle,
.au-dropdown > .au-dropdown__toggle.tw-dw-btn:hover,
.au-dropdown > .au-dropdown__toggle.tw-dw-btn:focus,
.au-dropdown--open > .au-dropdown__toggle.tw-dw-btn {
    background: #e0f2fe !important;
    background-image: none !important;
    border-color: #38bdf8 !important;
    color: #075985 !important;
    box-shadow: 0 3px 10px rgba(14,165,233,.18) !important;
    transform: translateY(-1px) !important;
}

.btn-group > .dropdown-toggle:active,
.au-dropdown > .au-dropdown__toggle.tw-dw-btn:active {
    background: #bae6fd !important;
    border-color: #0ea5e9 !important;
    box-shadow: 0 1px 3px rgba(14,165,233,.12) !important;
    transform: translateY(0) !important;
}

/* Disabled toggle: same footprint, muted, and no hover fill. */
.btn-group > .dropdown-toggle:disabled,
.btn-group > .dropdown-toggle.disabled,
.au-dropdown > .au-dropdown__toggle.tw-dw-btn:disabled {
    opacity: .55 !important;
    cursor: not-allowed !important;
    background: #fff !important;
    border-color: #bae6fd !important;
    color: #0369a1 !important;
    box-shadow: none !important;
    transform: none !important;
}

.btn-group > .dropdown-toggle .caret,
.au-dropdown > .au-dropdown__toggle.tw-dw-btn .au-caret {
    border-top-color: #0369a1 !important;
    margin-left: 1px;
    opacity: .7;
}

.btn-group .dropdown-menu,
.au-dropdown .au-dropdown__menu,
.au-dropdown__menu,
.dropdown-menu {
    background: #fff !important;
    border-radius: 10px !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .13) !important;
    min-width: 195px !important;
    padding: 6px !important;
    margin-top: 2px !important;
}

/* One shared open animation (subtle fade/rise) for every action menu. */
@keyframes au-actions-menu-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.btn-group.open > .dropdown-menu,
.au-dropdown--open > .au-dropdown__menu,
.au-dropdown__menu--teleported {
    animation: au-actions-menu-in .12s ease-out;
}

@media (prefers-reduced-motion: reduce) {
    .btn-group.open > .dropdown-menu,
    .au-dropdown--open > .au-dropdown__menu {
        animation: none;
    }
}

/* Flip-up: DropdownMenu.vue measures free space on open and adds
   .au-dropdown--drop-up when the menu would be clipped below the viewport
   (e.g. an action menu on the last row of a short table, where there is no
   content below to scroll to). Opening above the toggle instead mirrors the
   tooltip/popover flip in core-behaviors.js (positionFloating) so every
   overlay behaves the same way — this replaces per-page overflow/z-index
   patches. Higher specificity than the base `top: 100%` so it wins the
   cascade without needing !important on the positioning itself. */
.au-dropdown--drop-up > .au-dropdown__menu {
    top: auto !important;
    bottom: 100% !important;
    margin-top: 0 !important;
    margin-bottom: 4px !important;
}

.au-dropdown--drop-up.au-dropdown--open > .au-dropdown__menu {
    animation: au-actions-menu-up-in .12s ease-out;
}

@keyframes au-actions-menu-up-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .au-dropdown--drop-up.au-dropdown--open > .au-dropdown__menu {
        animation: none;
    }
}

/* Legacy dialect (.btn-group/.dropdown action menus rendered server-side and
   toggled by core-behaviors.js [data-vdropdown]). Same flip: the handler adds
   `au-drop-up` when the menu can't fit below its clip container, so pages that
   never touched the Vue component (Products, Contacts, Purchases, Sales,
   Quotations/estimates, Expenses, etc.) get identical upward opening from the
   shared layer — no per-page CSS. .btn-group already has position:relative
   (bootstrap-parity), so bottom:100% anchors to the same box as top:100%. */
.btn-group.au-drop-up.open > .dropdown-menu,
.dropdown.au-drop-up.open > .dropdown-menu,
li.dropdown.au-drop-up.open > .dropdown-menu {
    top: auto !important;
    bottom: 100% !important;
    margin-top: 0 !important;
    margin-bottom: 4px !important;
    animation: au-actions-menu-up-in .12s ease-out;
}

@media (prefers-reduced-motion: reduce) {
    .btn-group.au-drop-up.open > .dropdown-menu,
    .dropdown.au-drop-up.open > .dropdown-menu,
    li.dropdown.au-drop-up.open > .dropdown-menu {
        animation: none;
    }
}

.btn-group .dropdown-menu > li > a,
.btn-group .dropdown-menu > li > button,
.btn-group .dropdown-menu > li:first-child > a,
.btn-group .dropdown-menu > li:first-child > button,
.au-dropdown .au-dropdown__menu > li > a,
.au-dropdown .au-dropdown__menu > li > button,
.au-dropdown__menu > li > a,
.au-dropdown__menu > li > button,
.dropdown-menu > li > a,
.dropdown-menu > li > button {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    padding: 7px 12px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    border-radius: 6px !important;
    color: #374151 !important;
    text-decoration: none !important;
    background: transparent !important;
    border: none !important;
    width: 100% !important;
    cursor: pointer !important;
    text-align: left !important;
    transition: background .1s !important;
}

.btn-group .dropdown-menu > li > a:hover,
.btn-group .dropdown-menu > li > button:hover,
.au-dropdown .au-dropdown__menu > li > a:hover,
.au-dropdown .au-dropdown__menu > li > button:hover,
.au-dropdown__menu > li > a:hover,
.au-dropdown__menu > li > button:hover,
.dropdown-menu > li > a:hover,
.dropdown-menu > li > button:hover {
    background: #f3f4f6 !important;
    color: #111827 !important;
}

/* No item should look pre-selected/active on open - every item shares the
   same plain style (icon + label) until the user actually hovers it. */
.btn-group .dropdown-menu > li > a:focus,
.btn-group .dropdown-menu > li > button:focus,
.btn-group .dropdown-menu > li.active > a,
.btn-group .dropdown-menu > li.active > button,
.btn-group .dropdown-menu > li.active > a:hover,
.btn-group .dropdown-menu > li.active > a:focus,
.au-dropdown .au-dropdown__menu > li > a:focus,
.au-dropdown .au-dropdown__menu > li > button:focus {
    background: transparent !important;
    color: #374151 !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Disabled menu items (e.g. approval-gated entries rendered as li.disabled):
   muted, unclickable-looking, and never showing the hover fill. */
.btn-group .dropdown-menu > li.disabled > a,
.btn-group .dropdown-menu > li.disabled > a:hover,
.btn-group .dropdown-menu > li.disabled > a:focus,
.au-dropdown .au-dropdown__menu > li.disabled > a,
.au-dropdown .au-dropdown__menu > li.disabled > a:hover {
    opacity: .5 !important;
    cursor: not-allowed !important;
    background: transparent !important;
    color: #374151 !important;
}

/* Several dropdown items (View, Edit Shipping, New Sale Notification, etc.)
   use the shared .btn-modal class to trigger their AJAX modal. Elsewhere in
   the app .btn-modal gets a solid brand-gradient "primary action" look
   (see ui-consistency-fixes.css), which made those specific items look
   highlighted/pre-selected next to their plain siblings. Override it here
   with a selector specific enough to win regardless of stylesheet order,
   so every dropdown item - .btn-modal or not - looks identical. */
.btn-group .dropdown-menu > li > a.btn-modal,
.btn-group .dropdown-menu > li > button.btn-modal,
.au-dropdown .au-dropdown__menu > li > a.btn-modal,
.au-dropdown .au-dropdown__menu > li > button.btn-modal {
    background: transparent !important;
    background-image: none !important;
    color: #374151 !important;
    border: none !important;
    box-shadow: none !important;
    font-weight: 500 !important;
}

.btn-group .dropdown-menu > li > a.btn-modal:hover,
.btn-group .dropdown-menu > li > button.btn-modal:hover,
.au-dropdown .au-dropdown__menu > li > a.btn-modal:hover,
.au-dropdown .au-dropdown__menu > li > button.btn-modal:hover {
    background: #f3f4f6 !important;
    background-image: none !important;
    color: #111827 !important;
}

.btn-group .dropdown-menu > li > a.btn-modal:focus,
.btn-group .dropdown-menu > li > button.btn-modal:focus,
.au-dropdown .au-dropdown__menu > li > a.btn-modal:focus,
.au-dropdown .au-dropdown__menu > li > button.btn-modal:focus {
    background: transparent !important;
    background-image: none !important;
    color: #374151 !important;
    box-shadow: none !important;
}

/* Lock the icon column to a fixed width so every item's label starts at
   the same x position - without this, icons with different intrinsic
   glyph widths (fa-eye vs fa-edit vs the older "fa fa-envelope" prefix)
   shift their following label left/right by a few pixels, which read as
   the menu items being misaligned with each other. */
.btn-group .dropdown-menu > li > a i,
.btn-group .dropdown-menu > li > button i,
.au-dropdown .au-dropdown__menu > li > a i,
.au-dropdown .au-dropdown__menu > li > button i {
    flex: 0 0 16px !important;
    width: 16px !important;
    max-width: 16px !important;
    text-align: center !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    /* Uniform icon color + spacing: neutralize the legacy global
       `.dropdown-menu>li>a>.fas { margin-right: 6px }` offset (which
       misaligned .fas items vs glyphicon/.far items) and per-module
       text-info/text-danger tints so every menu reads the same. */
    margin: 0 !important;
    color: inherit !important;
}

.btn-group .dropdown-menu > li > a,
.au-dropdown .au-dropdown__menu > li > a {
    white-space: nowrap !important;
}

.btn-group .dropdown-menu > li.divider,
.au-dropdown .au-dropdown__menu > li.divider {
    margin: 4px 0 !important;
}

/* FA4 leftover: `fa fa-money` (Payroll actions, a few Project/Superadmin
   blades) no longer exists in the Font Awesome 5 build the app ships.
   Alias it to FA5's fa-money-bill glyph - same codepoint FA4 used - so the
   icon renders everywhere without touching server-rendered markup. */
.fa-money:before {
    content: "\f0d6";
}


/* ===== Global UI consistency fixes (post Bootstrap -> Tailwind migration) =====
   Loaded site-wide. Keep selectors scoped/explicit so these rules only touch
   the known problem patterns and don't leak into unrelated components. */

:root {
    --ui-brand-start: var(--brand-500, #3b82f6);
    --ui-brand-end: var(--brand-700, #1d4ed8);
    --ui-brand-start-hover: var(--brand-600, #2563eb);
    --ui-brand-end-hover: var(--brand-800, #1e40af);
    --ui-brand-shadow: rgba(var(--brand-600-rgb, 37, 99, 235), 0.28);
    --ui-brand-shadow-strong: rgba(var(--brand-600-rgb, 37, 99, 235), 0.38);
    --ui-surface-border: #e3e8ef;
    --ui-surface-muted: #f8fafc;
    --ui-text-strong: #121926;
    --ui-text-soft: #dbe4ff;
    --ui-radius-xl: 4px;
    --ui-radius-pill: 9999px;
}

/* -----------------------------------------------------------------------
   1) Label + info-tooltip icon must stay on the same row.
   Several "*-field" wrapper classes (introduced during the tailwind
   conversion) use `display:flex; flex-direction:column` with the label
   and the @show_tooltip() <i> icon as separate flex children, so each one
   takes its own full row in a column flex container - the icon visibly
   drops above/below the label instead of sitting next to it.
   Fix: ONLY for fields that actually contain that icon (`:has()` keeps the
   blast radius tiny - every field without a tooltip icon, which is most of
   them, keeps its original flex-column stacking untouched), switch to a
   2-column grid: label + icon share row 1, everything else (input/select/
   textarea/help text, however many siblings there are) auto-flows onto its
   own full-width row below. */
.expense-field:has(> i.fa-info-circle),
.booking-field:has(> i.fa-info-circle),
.repair-field:has(> i.fa-info-circle),
.stockadj-field:has(> i.fa-info-circle),
.manageuser-field:has(> i.fa-info-circle),
.stocktransfer-field:has(> i.fa-info-circle) {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0.375rem;
}

.expense-field:has(> i.fa-info-circle) > label,
.booking-field:has(> i.fa-info-circle) > label,
.repair-field:has(> i.fa-info-circle) > label,
.stockadj-field:has(> i.fa-info-circle) > label,
.manageuser-field:has(> i.fa-info-circle) > label,
.stocktransfer-field:has(> i.fa-info-circle) > label {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
}

.expense-field:has(> i.fa-info-circle) > i.fa-info-circle,
.booking-field:has(> i.fa-info-circle) > i.fa-info-circle,
.repair-field:has(> i.fa-info-circle) > i.fa-info-circle,
.stockadj-field:has(> i.fa-info-circle) > i.fa-info-circle,
.manageuser-field:has(> i.fa-info-circle) > i.fa-info-circle,
.stocktransfer-field:has(> i.fa-info-circle) > i.fa-info-circle {
    grid-column: 2;
    grid-row: 1;
    justify-self: start;
}

.expense-field:has(> i.fa-info-circle) > *:not(label):not(i.fa-info-circle),
.booking-field:has(> i.fa-info-circle) > *:not(label):not(i.fa-info-circle),
.repair-field:has(> i.fa-info-circle) > *:not(label):not(i.fa-info-circle),
.stockadj-field:has(> i.fa-info-circle) > *:not(label):not(i.fa-info-circle),
.manageuser-field:has(> i.fa-info-circle) > *:not(label):not(i.fa-info-circle),
.stocktransfer-field:has(> i.fa-info-circle) > *:not(label):not(i.fa-info-circle) {
    grid-column: 1 / -1;
}

/* -----------------------------------------------------------------------
   2) Topbar (app-topbar) icons must never overlap the business name or
   each other on very narrow viewports. resources/views/layouts/partials/header.blade.php
   keeps .topbar-actions on a single row (flex-wrap: nowrap !important) and
   hides most action buttons below their breakpoint via `tw-hidden <bp>:tw-inline-flex`,
   but this is a safety net only - if a future icon/button is ever added
   without the matching `tw-hidden`, or enough buttons stay visible at once,
   it falls back to wrapping onto a second line below ~480px instead of
   overlapping the business name/siblings. Does not affect >480px, where
   the existing `flex-wrap: nowrap !important` above still applies. */
@media (max-width: 480px) {
    .app-topbar .topbar-actions {
        flex-wrap: wrap !important;
        row-gap: 0.375rem;
        justify-content: flex-end;
    }
}

/* Above 480px (where topbar-actions stays a single nowrap row), every
   direct child must keep its declared size rather than being squeezed by
   flexbox's default flex-shrink:1 once the row runs out of room - a
   shrunk icon button still draws its full-size <svg> inside a now-smaller
   box, so it visually spills into the next icon / the business name
   instead of being clipped. Forcing flex-shrink:0 here means the
   truncating business name (the only element designed to give up width)
   absorbs all the squeeze, and every icon keeps its own clean slot. */
.app-topbar .topbar-actions > * {
    flex-shrink: 0;
}

/* -----------------------------------------------------------------------
   3) Shared page title section: keep it transparent so screens that use the
   standard AdminLTE/Tailwind heading layout inherit the plain page
   background instead of a colored banner. */
.content-header {
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 0 1rem !important;
    padding: 1rem 1.35rem !important;
    border: 0 !important;
    overflow: visible;
}

.content-header h1,
.content-header .row h1 {
    color: #121926 !important;
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    margin: 0 !important;
}

.content-header h1 small,
.content-header .row h1 small,
.content-header .breadcrumb,
.content-header .breadcrumb a,
.content-header .breadcrumb > .active,
.content-header .text-muted,
.content-header p,
.content-header .help-block {
    color: #4b5565 !important;
}

.content-header p {
    margin: 0.5rem 0 0 !important;
}

.content-header .breadcrumb {
    background: transparent !important;
    padding: 0 !important;
    position: static !important;
    float: none !important;
    margin-top: 0.5rem !important;
}

@media (max-width: 767px) {
    .content-header {
        padding: 0.9rem 1rem !important;
    }

    .content-header h1,
    .content-header .row h1 {
        font-size: 1.35rem !important;
    }
}

/* Unified application page bar.
   Active only on normal app pages through layouts/app.blade.php; Home and
   Superadmin keep their existing page headers. */
main.unified-page-headers > #scrollable-container {
    padding-top: 0.85rem;
}

main.unified-page-headers .content-header {
    background: linear-gradient(135deg, var(--ui-brand-start) 0%, var(--ui-brand-end) 100%) !important;
    border-radius: 4px !important;
    box-shadow: 0 10px 24px -22px rgba(15, 23, 42, 0.35) !important;
    margin: 0 0 1rem !important;
    padding: 1rem 1.35rem !important;
    border: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 1rem !important;
    flex-wrap: wrap !important;
}

main.unified-page-headers .content-header h1,
main.unified-page-headers .content-header .row h1,
main.unified-page-headers .content-header h2,
main.unified-page-headers .content-header h3 {
    color: #fff !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    flex: 1 1 auto !important;
    text-align: left !important;
}

main.unified-page-headers .content-header > br {
    display: none !important;
}

main.unified-page-headers .content-header h1 small,
main.unified-page-headers .content-header .row h1 small,
main.unified-page-headers .content-header .breadcrumb,
main.unified-page-headers .content-header .breadcrumb a,
main.unified-page-headers .content-header .breadcrumb > .active,
main.unified-page-headers .content-header .text-muted,
main.unified-page-headers .content-header p,
main.unified-page-headers .content-header .help-block,
main.unified-page-headers .content-header i,
main.unified-page-headers .content-header svg {
    color: rgba(255, 255, 255, 0.86) !important;
}

main.unified-page-headers .content-header .btn,
main.unified-page-headers .content-header .btn-modal,
main.unified-page-headers .content-header .tw-dw-btn,
main.unified-page-headers .content-header button,
main.unified-page-headers .content-header a[role="button"] {
    display: inline-flex !important;
    min-height: 32px !important;
    height: 32px !important;
    margin: 0 !important;
    padding: 6px 16px !important;
    font-size: 13px !important;
    line-height: 1 !important;
    gap: 6px !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 255, 255, 0.18) !important;
    background-image: none !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    color: #fff !important;
}

main.unified-page-headers .content > .tw-bg-white > [style*="linear-gradient"],
main.unified-page-headers .content > form > .tw-bg-white > [style*="linear-gradient"] {
    background: linear-gradient(135deg, var(--ui-brand-start) 0%, var(--ui-brand-end) 100%) !important;
    border-radius: 4px 4px 0 0 !important;
}

main.unified-page-headers .content > .tw-bg-white > [style*="linear-gradient"] h1,
main.unified-page-headers .content > .tw-bg-white > [style*="linear-gradient"] h2,
main.unified-page-headers .content > .tw-bg-white > [style*="linear-gradient"] h3,
main.unified-page-headers .content > .tw-bg-white > [style*="linear-gradient"] h4,
main.unified-page-headers .content > form > .tw-bg-white > [style*="linear-gradient"] h1,
main.unified-page-headers .content > form > .tw-bg-white > [style*="linear-gradient"] h2,
main.unified-page-headers .content > form > .tw-bg-white > [style*="linear-gradient"] h3,
main.unified-page-headers .content > form > .tw-bg-white > [style*="linear-gradient"] h4 {
    color: #fff !important;
}

main.unified-page-headers:has(> #scrollable-container > .content > .tw-bg-white > [style*="linear-gradient"]:first-child) > #scrollable-container > .content-header:not(.use-global-title-bar),
main.unified-page-headers:has(> #scrollable-container > .content > form > .tw-bg-white > [style*="linear-gradient"]:first-child) > #scrollable-container > .content-header:not(.use-global-title-bar),
main.unified-page-headers:has(> #scrollable-container > .content > .module-shared-widget:first-child .module-shared-widget-header) > #scrollable-container > .content-header:not(.use-global-title-bar),
main.unified-page-headers:has(> #scrollable-container > .content > form > .module-shared-widget:first-child .module-shared-widget-header) > #scrollable-container > .content-header:not(.use-global-title-bar),
main.unified-page-headers:has(> #scrollable-container > .content > form > .module-shared-widget .module-shared-widget-header) > #scrollable-container > .content-header:not(.use-global-title-bar),
main.unified-page-headers:has(> #scrollable-container > .content > .module-shared-filters):has(> #scrollable-container > .content > .tw-bg-white > [style*="linear-gradient"]:first-child) > #scrollable-container > .content-header:not(.use-global-title-bar),
main.unified-page-headers:has(> #scrollable-container > .content > form > .module-shared-filters):has(> #scrollable-container > .content > form > .tw-bg-white > [style*="linear-gradient"]:first-child) > #scrollable-container > .content-header:not(.use-global-title-bar),
main.unified-page-headers:has(> #scrollable-container > .content > .module-shared-filters):has(> #scrollable-container > .content > .module-shared-widget .module-shared-widget-header) > #scrollable-container > .content-header:not(.use-global-title-bar),
main.unified-page-headers:has(> #scrollable-container > .content > form > .module-shared-filters):has(> #scrollable-container > .content > form > .module-shared-widget .module-shared-widget-header) > #scrollable-container > .content-header:not(.use-global-title-bar),
main.unified-page-headers:has(> #scrollable-container > .content > .module-shared-filters):has(> #scrollable-container > .content > .box.box-primary > .box-header) > #scrollable-container > .content-header:not(.use-global-title-bar),
main.unified-page-headers:has(> #scrollable-container > .content > form > .module-shared-filters):has(> #scrollable-container > .content > form > .box.box-primary > .box-header) > #scrollable-container > .content-header:not(.use-global-title-bar),
main.unified-page-headers:has(> #scrollable-container > .content > .row:first-child .module-shared-filters):has(> #scrollable-container > .content > .row .module-shared-widget-header) > #scrollable-container > .content-header:not(.use-global-title-bar),
main.unified-page-headers:has(> #scrollable-container > .content > form > .row:first-child .module-shared-filters):has(> #scrollable-container > .content > form > .row .module-shared-widget-header) > #scrollable-container > .content-header:not(.use-global-title-bar),
main.unified-page-headers:has(> #scrollable-container > .content.expense-tailwind-page .expense-card > .expense-card-header) > #scrollable-container > .content-header:not(.use-global-title-bar),
main.unified-page-headers:has(> #scrollable-container > .content.expense-tailwind-page .expense-card > div:first-child > h2) > #scrollable-container > .content-header:not(.use-global-title-bar),
main.unified-page-headers:has(> #scrollable-container > .content.expense-tailwind-page .expense-card > div:first-child > h4) > #scrollable-container > .content-header:not(.use-global-title-bar) {
    display: none !important;
}

main.unified-page-headers:has(> #scrollable-container > .content-header.use-global-title-bar)
    > #scrollable-container > .content-header.use-global-title-bar {
    display: flex !important;
}

main.unified-page-headers:has(> #scrollable-container > section.no-print nav #mfg-navbar-collapse)
    > #scrollable-container > .content.no-print > .tw-mb-4:has(> h1.tw-text-xl) {
    display: none !important;
}

body.hide-page-print-buttons .buttons-print,
body.hide-page-print-buttons .buttons-pdf {
    display: none !important;
}

/* -----------------------------------------------------------------------
   4) Standardize shared widget/card headers used by listing pages like
   stock transfers, stock adjustments, purchase orders, etc. */
.module-shared-widget,
.box.box-primary,
.box-primary {
    border: 1px solid var(--ui-surface-border) !important;
    border-radius: var(--au-section-card-radius, 10px) !important;
    overflow: hidden !important;
    box-shadow: var(--au-section-card-shadow, 0 2px 8px rgba(15, 23, 42, 0.10)) !important;
    background: #fff !important;
}

.module-shared-widget .module-shared-widget-header,
.module-shared-widget .box-header,
.box.box-primary > .box-header,
.box-primary > .box-header,
.box-header.module-shared-widget-header {
    background: linear-gradient(135deg, var(--ui-brand-start) 0%, var(--ui-brand-end) 100%) !important;
    border-bottom: none !important;
    border-radius: var(--au-section-card-radius, 10px) var(--au-section-card-radius, 10px) 0 0 !important;
    min-height: 56px;
    padding: 0.85rem 1.5rem !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.module-shared-widget .module-shared-widget-title-wrap,
.box-header.module-shared-widget-header .module-shared-widget-title-wrap {
    display: inline-flex;
    flex: 1 1 auto;
    min-width: 0;
    align-items: center;
    gap: 0.65rem;
}

.module-shared-widget .module-shared-widget-icon,
.box-header.module-shared-widget-header .module-shared-widget-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    color: #fff !important;
}

.module-shared-widget .module-shared-widget-icon i,
.box-header.module-shared-widget-header .module-shared-widget-icon i {
    color: #fff !important;
    font-size: 1rem;
    line-height: 1;
}

.module-shared-widget .module-shared-widget-title-copy,
.box-header.module-shared-widget-header .module-shared-widget-title-copy {
    display: inline-flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.15rem;
}

.module-shared-widget .module-shared-widget-header .box-title,
.module-shared-widget .box-header .box-title,
.box.box-primary > .box-header .box-title,
.box-primary > .box-header .box-title,
.box-header.module-shared-widget-header .box-title {
    color: #fff !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    margin: 0 !important;
}

.module-shared-widget .module-shared-widget-header small,
.module-shared-widget .box-header small,
.box.box-primary > .box-header small,
.box-primary > .box-header small,
.box-header.module-shared-widget-header small {
    color: rgba(255, 255, 255, 0.86) !important;
    line-height: 1.2 !important;
    margin: 0 !important;
}

.module-shared-widget .module-shared-widget-body,
.box.box-primary > .box-body,
.box-primary > .box-body {
    background: #fff !important;
}

.module-shared-widget .box-tools,
.box.box-primary > .box-header .box-tools,
.box-primary > .box-header .box-tools {
    margin-left: auto;
    float: none !important;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

@media (max-width: 767px) {
    .module-shared-widget .module-shared-widget-header,
    .module-shared-widget .box-header,
    .box.box-primary > .box-header,
    .box-primary > .box-header,
    .box-header.module-shared-widget-header {
        min-height: 60px;
        padding: 0.9rem 1rem !important;
        border-radius: var(--au-section-card-radius, 10px) var(--au-section-card-radius, 10px) 0 0 !important;
    }

    .module-shared-widget,
    .box.box-primary,
    .box-primary {
        border-radius: var(--au-section-card-radius, 10px) !important;
    }
}

/* -----------------------------------------------------------------------
   5) Standardize primary/action buttons.
   Scope to the common primary/add/submit patterns while explicitly avoiding
   small quick-add icon launchers that still rely on their compact legacy
   shape inside product forms. */
.btn.btn-primary,
.btn-primary,
.tw-dw-btn.tw-dw-btn-primary,
button.btn-modal.btn-primary,
.box-tools .btn.btn-primary,
.box-tools .btn-modal,
.content-header .btn,
.content-header .btn-modal,
.content-header .tw-dw-btn,
.content-header .tw-dw-btn-primary,
.module-shared-widget .box-tools .btn,
.module-shared-widget .box-tools .btn-modal,
.module-shared-widget .box-tools .tw-dw-btn,
.module-shared-widget .box-tools .tw-dw-btn-primary,
.box-primary > .box-header .btn,
.box-primary > .box-header .btn-modal,
.box-primary > .box-header .tw-dw-btn,
.box-primary > .box-header .tw-dw-btn-primary {
    background: linear-gradient(135deg, var(--ui-brand-start) 0%, var(--ui-brand-end) 100%) !important;
    border: none !important;
    color: #fff !important;
    border-radius: var(--ui-radius-pill) !important;
    box-shadow: 0 12px 28px -18px var(--ui-brand-shadow-strong) !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em;
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease !important;
}

.btn.btn-primary:hover,
.btn-primary:hover,
.btn.btn-primary:focus,
.btn-primary:focus,
.tw-dw-btn.tw-dw-btn-primary:hover,
.tw-dw-btn.tw-dw-btn-primary:focus,
button.btn-modal.btn-primary:hover,
button.btn-modal.btn-primary:focus,
.box-tools .btn.btn-primary:hover,
.box-tools .btn.btn-primary:focus,
.box-tools .btn-modal:hover,
.box-tools .btn-modal:focus,
.content-header .btn:hover,
.content-header .btn:focus,
.content-header .btn-modal:hover,
.content-header .btn-modal:focus,
.content-header .tw-dw-btn:hover,
.content-header .tw-dw-btn:focus,
.content-header .tw-dw-btn-primary:hover,
.content-header .tw-dw-btn-primary:focus,
.module-shared-widget .box-tools .btn:hover,
.module-shared-widget .box-tools .btn:focus,
.module-shared-widget .box-tools .btn-modal:hover,
.module-shared-widget .box-tools .btn-modal:focus,
.module-shared-widget .box-tools .tw-dw-btn:hover,
.module-shared-widget .box-tools .tw-dw-btn:focus,
.module-shared-widget .box-tools .tw-dw-btn-primary:hover,
.module-shared-widget .box-tools .tw-dw-btn-primary:focus,
.box-primary > .box-header .btn:hover,
.box-primary > .box-header .btn:focus,
.box-primary > .box-header .btn-modal:hover,
.box-primary > .box-header .btn-modal:focus,
.box-primary > .box-header .tw-dw-btn:hover,
.box-primary > .box-header .tw-dw-btn:focus,
.box-primary > .box-header .tw-dw-btn-primary:hover,
.box-primary > .box-header .tw-dw-btn-primary:focus {
    background: linear-gradient(135deg, var(--ui-brand-start-hover) 0%, var(--ui-brand-end-hover) 100%) !important;
    color: #fff !important;
    box-shadow: 0 18px 30px -20px var(--ui-brand-shadow-strong) !important;
    transform: translateY(-1px);
}

/* 5b) Same pill/gradient/shadow treatment as .btn-primary above, for the danger
   variant — it was falling through to a plainer flat-gradient/small-shadow
   style (section "3) MODERN BUTTONS"), so a destructive action sitting next
   to a primary one in the same toolbar (e.g. Accounting Settings' Reset
   Data / Update) visibly didn't match the rest of the app's button look. */
.btn.btn-danger,
.btn-danger,
.tw-dw-btn.tw-dw-btn-danger,
button.btn-modal.btn-danger,
.box-tools .btn.btn-danger,
.module-shared-widget .box-tools .btn-danger,
.box-primary > .box-header .btn-danger {
    background: linear-gradient(135deg, var(--pos-danger, #dc2626) 0%, var(--pos-danger-dark, #b91c1c) 100%) !important;
    border: none !important;
    color: #fff !important;
    border-radius: var(--ui-radius-pill) !important;
    box-shadow: 0 12px 28px -18px rgba(220, 38, 38, 0.38) !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em;
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease !important;
}

.btn.btn-danger:hover,
.btn-danger:hover,
.btn.btn-danger:focus,
.btn-danger:focus,
.tw-dw-btn.tw-dw-btn-danger:hover,
.tw-dw-btn.tw-dw-btn-danger:focus,
button.btn-modal.btn-danger:hover,
button.btn-modal.btn-danger:focus,
.box-tools .btn.btn-danger:hover,
.box-tools .btn.btn-danger:focus,
.module-shared-widget .box-tools .btn-danger:hover,
.module-shared-widget .box-tools .btn-danger:focus,
.box-primary > .box-header .btn-danger:hover,
.box-primary > .box-header .btn-danger:focus {
    background: linear-gradient(135deg, #ef4444 0%, var(--pos-danger, #dc2626) 100%) !important;
    color: #fff !important;
    box-shadow: 0 18px 30px -20px rgba(220, 38, 38, 0.45) !important;
    transform: translateY(-1px);
}

.content-header .btn,
.content-header .btn-modal,
.content-header .tw-dw-btn,
.content-header .tw-dw-btn-primary,
.module-shared-widget .box-tools .btn,
.module-shared-widget .box-tools .btn-modal,
.module-shared-widget .box-tools .tw-dw-btn,
.module-shared-widget .box-tools .tw-dw-btn-primary,
.box-primary > .box-header .btn,
.box-primary > .box-header .btn-modal,
.box-primary > .box-header .tw-dw-btn,
.box-primary > .box-header .tw-dw-btn-primary {
    background: rgba(255, 255, 255, 0.18) !important;
    background-image: none !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.contact-tailwind-page > .tw-bg-white > .no-print a.btn-modal,
.contact-tailwind-page > .tw-bg-white > .no-print .btn-modal,
.content .tw-bg-white > [style*="linear-gradient"] > a.btn-modal,
.content .tw-bg-white > [style*="linear-gradient"] > .btn-modal {
    background: rgba(255, 255, 255, 0.18) !important;
    background-image: none !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    color: #fff !important;
}

.content .tw-bg-white .tw-justify-end > a.btn-modal,
.content .tw-bg-white .tw-justify-end > .btn-modal {
    background: linear-gradient(135deg, var(--ui-brand-start) 0%, var(--ui-brand-end) 100%) !important;
    background-image: linear-gradient(135deg, var(--ui-brand-start) 0%, var(--ui-brand-end) 100%) !important;
    border: 1px solid var(--ui-brand-end) !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    color: #fff !important;
}

.module-shared-widget .box-tools .btn,
.module-shared-widget .box-tools .btn-modal,
.module-shared-widget .box-tools .tw-dw-btn,
.module-shared-widget .box-tools .tw-dw-btn-primary,
.contact-tailwind-page > .tw-bg-white > .no-print a.btn-modal,
.contact-tailwind-page > .tw-bg-white > .no-print .btn-modal,
.content .tw-bg-white > [style*="linear-gradient"] > a.btn-modal,
.content .tw-bg-white > [style*="linear-gradient"] > .btn-modal,
.content .tw-bg-white .tw-justify-end > a.btn-modal,
.content .tw-bg-white .tw-justify-end > .btn-modal,
.box-header.module-shared-widget-header .box-tools .btn,
.box-header.module-shared-widget-header .box-tools .btn-modal,
.box-header.module-shared-widget-header .box-tools .tw-dw-btn,
.box-header.module-shared-widget-header .box-tools .tw-dw-btn-primary,
.box-primary > .box-header .box-tools .btn,
.box-primary > .box-header .box-tools .btn-modal,
.box-primary > .box-header .box-tools .tw-dw-btn,
.box-primary > .box-header .box-tools .tw-dw-btn-primary {
    display: inline-flex !important;
    min-height: 32px !important;
    height: 32px !important;
    padding: 6px 16px !important;
    font-size: 13px !important;
    line-height: 1 !important;
    gap: 6px !important;
    align-items: center !important;
    justify-content: center !important;
}

.contact-tailwind-page .report-print-block > .no-print .btn,
.contact-tailwind-page .report-print-block > .no-print .tw-dw-btn {
    min-height: 28px !important;
    height: 28px !important;
    padding: 5px 10px !important;
    border-radius: 4px !important;
    font-size: 12px !important;
    line-height: 1 !important;
}

.dataTables_wrapper .dt-buttons .btn,
.dataTables_wrapper .dt-buttons .dt-button,
.dt-buttons .btn,
.dt-buttons .dt-button {
    border-radius: 4px !important;
}

.discount-list-card,
.discount-list-card .tw-flow-root,
.discount-list-card .dataTables_wrapper {
    max-width: 100% !important;
}

.discount-list-card .dataTables_wrapper > .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.discount-list-card .discount-table-scroll {
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
}

.content .tw-bg-white > [style*="linear-gradient"] > a.btn-modal svg,
.content .tw-bg-white > [style*="linear-gradient"] > .btn-modal svg,
.content .tw-bg-white .tw-justify-end > a.btn-modal svg,
.content .tw-bg-white .tw-justify-end > .btn-modal svg {
    width: 14px !important;
    height: 14px !important;
    flex: 0 0 14px !important;
}

.module-shared-widget .box-tools .btn svg,
.module-shared-widget .box-tools .btn-modal svg,
.module-shared-widget .box-tools .tw-dw-btn svg,
.module-shared-widget .box-tools .tw-dw-btn-primary svg,
.box-header.module-shared-widget-header .box-tools .btn svg,
.box-header.module-shared-widget-header .box-tools .btn-modal svg,
.box-header.module-shared-widget-header .box-tools .tw-dw-btn svg,
.box-header.module-shared-widget-header .box-tools .tw-dw-btn-primary svg,
.box-primary > .box-header .box-tools .btn svg,
.box-primary > .box-header .box-tools .btn-modal svg,
.box-primary > .box-header .box-tools .tw-dw-btn svg,
.box-primary > .box-header .box-tools .tw-dw-btn-primary svg {
    width: 14px !important;
    height: 14px !important;
    flex: 0 0 14px !important;
}

.content-header .btn:hover,
.content-header .btn:focus,
.content-header .btn-modal:hover,
.content-header .btn-modal:focus,
.content-header .tw-dw-btn:hover,
.content-header .tw-dw-btn:focus,
.content-header .tw-dw-btn-primary:hover,
.content-header .tw-dw-btn-primary:focus,
.module-shared-widget .box-tools .btn:hover,
.module-shared-widget .box-tools .btn:focus,
.module-shared-widget .box-tools .btn-modal:hover,
.module-shared-widget .box-tools .btn-modal:focus,
.module-shared-widget .box-tools .tw-dw-btn:hover,
.module-shared-widget .box-tools .tw-dw-btn:focus,
.module-shared-widget .box-tools .tw-dw-btn-primary:hover,
.module-shared-widget .box-tools .tw-dw-btn-primary:focus,
.box-primary > .box-header .btn:hover,
.box-primary > .box-header .btn:focus,
.box-primary > .box-header .btn-modal:hover,
.box-primary > .box-header .btn-modal:focus,
.box-primary > .box-header .tw-dw-btn:hover,
.box-primary > .box-header .tw-dw-btn:focus,
.box-primary > .box-header .tw-dw-btn-primary:hover,
.box-primary > .box-header .tw-dw-btn-primary:focus {
    background: rgba(255, 255, 255, 0.26) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

.btn.btn-primary.btn-xs,
.btn-primary.btn-xs,
.tw-dw-btn.tw-dw-btn-primary.tw-dw-btn-xs {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
}

.module-shared-widget .crm-lead-header-tools {
    gap: 0.5rem !important;
}

.module-shared-widget .crm-lead-view-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: nowrap;
}

.module-shared-widget .crm-lead-view-choice {
    margin: 0 !important;
    white-space: nowrap;
}

.module-shared-widget .crm-lead-view-choice.active {
    background: rgba(255, 255, 255, 0.32) !important;
    border-color: rgba(255, 255, 255, 0.52) !important;
}

/* Keep module top menus on one row on desktop. If permissions expose many
   menu items, the row scrolls horizontally instead of wrapping taller. */
@media (min-width: 768px) {
    .accounting-nav,
    .crm-nav,
    .repair-module-nav {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scrollbar-width: thin;
    }

    .accounting-nav details > div {
        display: flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        white-space: nowrap !important;
    }

    .accounting-nav details > div > a {
        flex: 0 0 auto !important;
    }

    .accounting-nav ul {
        flex: 0 0 auto !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        white-space: nowrap !important;
    }

    .accounting-nav ul > li {
        flex: 0 0 auto !important;
    }

    .crm-nav > .container-fluid {
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        white-space: nowrap !important;
    }

    .crm-nav .navbar-header {
        flex: 0 0 auto !important;
        float: none !important;
    }

    .crm-nav .navbar-collapse {
        display: block !important;
        width: auto !important;
        min-width: 0 !important;
        flex: 1 1 auto !important;
        border-top: 0 !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
    }

    .crm-nav .navbar-nav {
        display: flex !important;
        flex-wrap: nowrap !important;
        float: none !important;
        margin: 0 !important;
        white-space: nowrap !important;
    }

    .crm-nav .navbar-nav > li {
        flex: 0 0 auto !important;
        float: none !important;
    }

    .repair-module-nav > .container-fluid {
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        white-space: nowrap !important;
    }

    .repair-module-nav .navbar-header {
        flex: 0 0 auto !important;
        float: none !important;
    }

    .repair-module-nav .navbar-collapse {
        display: block !important;
        width: auto !important;
        min-width: 0 !important;
        flex: 1 1 auto !important;
        border-top: 0 !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
    }

    .repair-module-nav .navbar-nav {
        display: flex !important;
        flex-wrap: nowrap !important;
        float: none !important;
        margin: 0 !important;
        white-space: nowrap !important;
    }

    .repair-module-nav .navbar-nav > li {
        flex: 0 0 auto !important;
        float: none !important;
    }
}

/* -----------------------------------------------------------------------
   6) Standardize add/edit modal shell, header, spacing, and footer actions.
   Several modal blade templates still hardcode different inline
   `border-radius` values (or none at all), which makes "Add" dialogs look
   inconsistent from page to page. Apply one shared modal shell radius site-
   wide so every normal Bootstrap modal uses the same rounded corners.
   `!important` is required here because many legacy modal templates set
   radius/overflow inline on `.modal-content`. */
/* Dialect coverage note: this whole section is the ONE modal design (reference:
   Repair "Add Device Model"). Each rule targets every modal dialect in the app:
   - classic Bootstrap:  .modal-content / .modal-header / .modal-body / .modal-footer
   - au design system:   .modal-dialog > .au-modal panels (Blade partials) and
                         .au-modal__content/__header/__body/__footer (BaseModal/AjaxModal)
   - page-scoped panels: repair-/gym-/product-/report-/contact-/clinic-/booking-/
                         stockadj-/stocktransfer-/warehouse-/table-/rf-/catalogue-modal-*
                         captured generically via [class*="-modal-*"] (the leading dash
                         keeps plain .modal-header from matching). */
.modal .modal-content,
.modal-dialog .modal-content,
body .modal .modal-dialog .modal-content,
.modal-dialog .au-modal,
.au-modal__content,
[class*="-modal-panel"] {
    border-radius: var(--ui-radius-xl) !important;
    overflow: hidden !important;
    border: none !important;
    box-shadow: 0 28px 60px -28px rgba(15, 23, 42, 0.45) !important;
    background: #fff !important;
}

.au-modal.au-modal--standalone {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.modal .modal-dialog.modal-dialog-centered,
.modal-dialog.modal-dialog-centered {
    min-height: calc(100vh - 60px);
    display: flex;
    align-items: center;
}

.modal .modal-dialog.modal-dialog-centered .modal-content,
.modal-dialog.modal-dialog-centered .modal-content {
    width: 100%;
}

@media print {
    .modal .modal-content,
    .modal-dialog .modal-content,
    body .modal .modal-dialog .modal-content {
        box-shadow: none !important;
    }
}

.modal .modal-header,
.modal-dialog .modal-header,
body .modal .modal-dialog .modal-header,
.au-modal__header,
[class*="-modal-header"] {
    background: linear-gradient(135deg, var(--ui-brand-start) 0%, var(--ui-brand-end) 100%) !important;
    border-top-left-radius: var(--ui-radius-xl) !important;
    border-top-right-radius: var(--ui-radius-xl) !important;
    border-bottom: none !important;
    padding: 0.75rem 1.25rem !important;
    min-height: 48px;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0.875rem;
    position: relative !important;
}

.modal .modal-header::before,
.modal .modal-header::after,
.modal-dialog .modal-header::before,
.modal-dialog .modal-header::after,
body .modal .modal-dialog .modal-header::before,
body .modal .modal-dialog .modal-header::after {
    content: none !important;
    display: none !important;
}

.modal .modal-header.modal-header-primary,
.modal-dialog .modal-header.modal-header-primary,
body .modal .modal-dialog .modal-header.modal-header-primary {
    background: var(--ui-brand-end) !important;
    background-image: none !important;
}

.modal .modal-header .modal-title,
.modal-dialog .modal-header .modal-title,
.modal .modal-header h3,
.modal-dialog .modal-header h3,
.modal .modal-header h4,
.modal-dialog .modal-header h4,
.modal .modal-header h5,
.modal-dialog .modal-header h5,
.au-modal__title,
[class*="-modal-header"] .modal-title,
[class*="-modal-header"] h3,
[class*="-modal-header"] h4,
[class*="-modal-header"] h5 {
    color: #fff !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    order: 1 !important;
    flex: 1 1 auto !important;
    margin: 0 !important;
    padding-left: 0 !important;
    text-indent: 0 !important;
    text-align: left !important;
}

.modal .modal-header .modal-title .label,
.modal-dialog .modal-header .modal-title .label {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    margin-left: 0.5rem;
    padding: 0.25rem 0.65rem;
    vertical-align: middle;
    font-size: 0.78rem;
    line-height: 1;
}

.modal .modal-header > svg,
.modal-dialog .modal-header > svg,
.modal .modal-header > i,
.modal-dialog .modal-header > i,
.modal .modal-header .modal-title svg,
.modal-dialog .modal-header .modal-title svg,
.modal .modal-header .modal-title i,
.modal-dialog .modal-header .modal-title i,
.modal .modal-header h3 svg,
.modal-dialog .modal-header h3 svg,
.modal .modal-header h3 i,
.modal-dialog .modal-header h3 i,
.modal .modal-header h4 svg,
.modal-dialog .modal-header h4 svg,
.modal .modal-header h4 i,
.modal-dialog .modal-header h4 i,
.modal .modal-header h5 svg,
.modal-dialog .modal-header h5 svg,
.modal .modal-header h5 i,
.modal-dialog .modal-header h5 i,
.au-modal__title i,
.au-modal__title svg,
[class*="-modal-header"] > i,
[class*="-modal-header"] > svg,
[class*="-modal-header"] .modal-title i,
[class*="-modal-header"] .modal-title svg,
[class*="-modal-header"] h3 i,
[class*="-modal-header"] h3 svg,
[class*="-modal-header"] h4 i,
[class*="-modal-header"] h4 svg,
[class*="-modal-header"] h5 i,
[class*="-modal-header"] h5 svg {
    display: none !important;
}

/* Header close "X" buttons are removed by design (the current shared modal
   infrastructure — see the "Global Standardized Modal Design" section near the
   end of this file). Dismissal is the footer's dark Close button (plus Escape/
   backdrop where the modal driver supports it). The generic [class*=...] catch
   is scoped to headers so a footer button whose class ends in -modal-close is
   NOT hidden — the footer mapping below styles it dark instead. */
.modal .modal-header .close,
.modal-dialog .modal-header .close,
.modal .modal-header button.close,
.modal-dialog .modal-header button.close,
.modal .modal-header .btn-close,
.modal-dialog .modal-header .btn-close,
.au-modal__close,
[class*="-modal-header"] [class*="-modal-close"] {
    display: none !important;
}

.modal .modal-body,
.modal-dialog .modal-body,
.au-modal__body,
[class*="-modal-body"] {
    padding: 1.25rem !important;
    background: #fff !important;
}

.contact-tailwind-page #login .contact-view-add-toolbar,
.contact-tailwind-page .tab-pane#login .contact-view-add-toolbar {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    width: 100% !important;
    clear: both;
}

.contact-tailwind-page #login .contact-view-add-toolbar .contact-login-add,
.contact-tailwind-page .tab-pane#login .contact-view-add-toolbar .contact-login-add {
    float: none !important;
    margin-left: auto !important;
}

.modal .modal-footer,
.modal-dialog .modal-footer,
body .modal .modal-dialog .modal-footer,
.au-modal__footer,
[class*="-modal-footer"] {
    border-bottom-left-radius: var(--ui-radius-xl) !important;
    border-bottom-right-radius: var(--ui-radius-xl) !important;
    padding: 0.85rem 1.25rem !important;
    background: #fff !important;
    border-top: 1px solid #e5e7eb !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0.75rem;
    flex-wrap: wrap;
    text-align: right;
}

/* Footer buttons — one shape/weight (radius comes from the site-wide
   --ui-radius-pill override in layouts/partials/css.blade.php). */
.modal-footer .btn,
.modal-footer .tw-dw-btn,
.modal-footer .au-button,
.modal-footer button,
.au-modal__footer .btn,
.au-modal__footer .tw-dw-btn,
.au-modal__footer .au-button,
.au-modal__footer button,
[class*="-modal-footer"] .btn,
[class*="-modal-footer"] .tw-dw-btn,
[class*="-modal-footer"] .au-button,
[class*="-modal-footer"] button {
    border-radius: var(--ui-radius-pill) !important;
    font-weight: 600 !important;
    min-height: 36px;
    order: 1;
    float: none !important;
    margin: 0 !important;
}

/* Dismiss/back buttons: dark slate, placed after the primary action. Listed
   BEFORE the primary mapping so an element matching both resolves green. */
.modal-footer .btn-default,
.modal-footer .btn-secondary,
.modal-footer .tw-dw-btn-neutral,
.modal-footer .au-button--secondary,
.modal-footer .global-close-button,
.modal-footer [data-vdismiss],
.modal-footer [data-dismiss="modal"],
.au-modal__footer .btn-default,
.au-modal__footer .btn-secondary,
.au-modal__footer .tw-dw-btn-neutral,
.au-modal__footer .au-button--secondary,
.au-modal__footer .global-close-button,
.au-modal__footer [data-vdismiss],
.au-modal__footer [data-dismiss="modal"],
[class*="-modal-footer"] .btn-default,
[class*="-modal-footer"] .btn-secondary,
[class*="-modal-footer"] .tw-dw-btn-neutral,
[class*="-modal-footer"] .au-button--secondary,
[class*="-modal-footer"] .global-close-button,
[class*="-modal-footer"] [data-vdismiss],
[class*="-modal-footer"] [data-dismiss="modal"],
[class*="-modal-footer"] [class*="-modal-close"],
[class*="-modal-footer"] [data-repair-modal-close] {
    background: #2f3a4a !important;
    background-image: none !important;
    border: none !important;
    color: #fff !important;
    order: 2 !important;
    position: static !important;
    width: auto !important;
    height: 38px !important;
    min-height: 38px !important;
    min-width: 96px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    transform: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 1.25rem !important;
    font-size: 0.875rem !important;
    border-radius: var(--ui-radius-xl) !important;
    margin: 0 !important;
}

/* Primary/submit actions: the reference's green Save, placed first. */
.modal-footer button[type="submit"],
.modal-footer .btn-primary,
.modal-footer .btn-success,
.modal-footer .tw-dw-btn-primary,
.modal-footer .tw-dw-btn-success,
.modal-footer .au-button--primary,
.modal-footer .global-save-button,
.au-modal__footer button[type="submit"],
.au-modal__footer .btn-primary,
.au-modal__footer .btn-success,
.au-modal__footer .tw-dw-btn-primary,
.au-modal__footer .tw-dw-btn-success,
.au-modal__footer .au-button--primary,
.au-modal__footer .global-save-button,
[class*="-modal-footer"] button[type="submit"],
[class*="-modal-footer"] .btn-primary,
[class*="-modal-footer"] .btn-success,
[class*="-modal-footer"] .tw-dw-btn-primary,
[class*="-modal-footer"] .tw-dw-btn-success,
[class*="-modal-footer"] .au-button--primary,
[class*="-modal-footer"] .global-save-button {
    background: var(--global-save-button-green, #16a34a) !important;
    background-image: none !important;
    border: none !important;
    color: #fff !important;
    order: 0 !important;
    margin: 0 !important;
}

.modal-footer button[type="submit"]:hover,
.modal-footer .btn-primary:hover,
.modal-footer .btn-success:hover,
.modal-footer .tw-dw-btn-primary:hover,
.modal-footer .tw-dw-btn-success:hover,
.modal-footer .au-button--primary:hover,
.modal-footer .global-save-button:hover,
.au-modal__footer button[type="submit"]:hover,
.au-modal__footer .au-button--primary:hover,
.au-modal__footer .global-save-button:hover,
[class*="-modal-footer"] button[type="submit"]:hover,
[class*="-modal-footer"] .tw-dw-btn-primary:hover,
[class*="-modal-footer"] .global-save-button:hover {
    background: var(--global-save-button-green-hover, #15803d) !important;
    color: #fff !important;
}

/* No decorative icons inside the mapped footer actions (they all carry text). */
.modal-footer button[type="submit"] i,
.modal-footer button[type="submit"] svg,
.modal-footer .global-save-button i,
.modal-footer .global-save-button svg,
.modal-footer .global-close-button i,
.modal-footer .global-close-button svg,
.modal-footer [data-vdismiss] i,
.modal-footer [data-vdismiss] svg,
.au-modal__footer button[type="submit"] i,
.au-modal__footer button[type="submit"] svg,
.au-modal__footer [data-vdismiss] i,
.au-modal__footer [data-vdismiss] svg,
[class*="-modal-footer"] button[type="submit"] i,
[class*="-modal-footer"] button[type="submit"] svg,
[class*="-modal-footer"] [data-vdismiss] i,
[class*="-modal-footer"] [data-vdismiss] svg {
    display: none !important;
}

/* Destructive footer actions keep their red identity (re-asserted after the
   green primary mapping so a `.btn-danger[type=submit]` resolves red). */
.modal-footer .btn-danger,
.modal-footer .tw-dw-btn-error,
.au-modal__footer .btn-danger,
.au-modal__footer .tw-dw-btn-error,
[class*="-modal-footer"] .btn-danger,
[class*="-modal-footer"] .tw-dw-btn-error {
    background: #dc2626 !important;
    background-image: none !important;
    border: none !important;
    color: #fff !important;
}

@media (max-width: 767px) {
    .modal .modal-header,
    .modal-dialog .modal-header,
    .au-modal__header,
    [class*="-modal-header"] {
        padding: 0.7rem 1rem !important;
        min-height: 48px;
    }

    .modal .modal-dialog.modal-dialog-centered,
    .modal-dialog.modal-dialog-centered {
        min-height: calc(100vh - 1rem);
    }

    .modal .modal-body,
    .modal-dialog .modal-body,
    .au-modal__body,
    [class*="-modal-body"],
    .modal .modal-footer,
    .modal-dialog .modal-footer,
    .au-modal__footer,
    [class*="-modal-footer"] {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}

/* -----------------------------------------------------------------------
   7) Shared filter panels: Tailwind-based global filter surface used by
   components.filters across listing/report pages. */
.report-filters-block,
.module-shared-filters {
    border: 1px solid var(--ui-surface-border) !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    box-shadow: 0 10px 24px -22px rgba(15, 23, 42, 0.22) !important;
    background: #fff !important;
}

.module-shared-filters-header {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    background: #fff !important;
    border-bottom: 1px solid #e5e7eb !important;
    min-height: 64px;
    padding: 1rem 1.35rem !important;
    color: #111827 !important;
    user-select: none;
}

.module-shared-filters-title,
.module-shared-filters-title i,
.module-shared-filters-title svg {
    color: #111827 !important;
}

.module-shared-filters-title {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    text-decoration: none !important;
}

.module-shared-filters-chevron {
    color: #64748b;
}

.module-shared-filters[data-filter-expanded='true'] .module-shared-filters-chevron {
    transform: rotate(180deg);
}

.module-shared-filters-body {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 1.125rem 1.25rem !important;
    padding: 1.2rem 1.35rem 1.55rem !important;
    background: #fff !important;
    align-items: end !important;
}

.module-shared-filters-body[hidden] {
    display: none !important;
}

.module-shared-filters:not([data-filter-component]) > .panel-collapse {
    display: none !important;
}

.module-shared-filters:not([data-filter-component]).legacy-filter-expanded > .panel-collapse {
    display: block !important;
}

.module-shared-filters:not([data-filter-component]) .module-shared-filters-body {
    padding: 1.2rem 1.35rem 1.55rem !important;
}

.module-shared-filters-body > form {
    display: contents;
}

.module-shared-filters-body > .row,
.module-shared-filters-body > form > .row {
    display: contents;
}

.module-shared-filters-body > [class*='col-'],
.module-shared-filters-body > [class*='tw-w-'],
.module-shared-filters-body > form > [class*='col-'],
.module-shared-filters-body > form > [class*='tw-w-'],
.module-shared-filters-body > .row > [class*='col-'],
.module-shared-filters-body > .row > [class*='tw-w-'],
.module-shared-filters-body > form > .row > [class*='col-'],
.module-shared-filters-body > form > .row > [class*='tw-w-'] {
    float: none !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    padding: 0 !important;
    grid-column: auto / span 1 !important;
}

.module-shared-filters-body .form-group,
.module-shared-filters-body .ess-field {
    margin-bottom: 0 !important;
    min-width: 0;
}

.module-shared-filters-body .form-group > br,
.module-shared-filters-body .checkbox br {
    display: none !important;
}

.module-shared-filters-body label {
    display: block;
    margin: 0 0 0.4rem !important;
    color: #334155;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25rem;
}

.module-shared-filters-body .form-group > label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.module-shared-filters-body .form-control,
.module-shared-filters-body .ess-input,
.module-shared-filters-body .ess-select,
.module-shared-filters-body input:not([type='checkbox']):not([type='radio']):not([type='hidden']):not([type='submit']):not([type='button']),
.module-shared-filters-body select,
.module-shared-filters-body textarea,
.module-shared-filters-body .select2-container {
    width: 100% !important;
}

.module-shared-filters-body .form-control,
.module-shared-filters-body .ess-input,
.module-shared-filters-body .ess-select,
.module-shared-filters-body input:not([type='checkbox']):not([type='radio']):not([type='hidden']):not([type='submit']):not([type='button']),
.module-shared-filters-body select,
.module-shared-filters-body textarea,
.module-shared-filters-body .select2-container--default .select2-selection--single,
.module-shared-filters-body .select2-container--default .select2-selection--multiple {
    min-height: 42px !important;
    border: 1px solid #cdd5df !important;
    border-radius: 10px !important;
    background-color: #fff !important;
    color: #121926 !important;
    font-size: 0.875rem !important;
    box-shadow: none !important;
}

.module-shared-filters-body textarea {
    min-height: 5.5rem !important;
}

.module-shared-filters-body .form-control:focus,
.module-shared-filters-body .ess-input:focus,
.module-shared-filters-body .ess-select:focus,
.module-shared-filters-body input:not([type='checkbox']):not([type='radio']):not([type='hidden']):not([type='submit']):not([type='button']):focus,
.module-shared-filters-body select:focus,
.module-shared-filters-body textarea:focus,
.module-shared-filters-body .select2-container--default.select2-container--focus .select2-selection--single,
.module-shared-filters-body .select2-container--default.select2-container--focus .select2-selection--multiple,
.module-shared-filters-body .select2-container--default.select2-container--open .select2-selection--single,
.module-shared-filters-body .select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: var(--ui-brand-start) !important;
    box-shadow: 0 0 0 3px var(--ui-brand-shadow) !important;
    outline: none !important;
}

.module-shared-filters-body .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 40px !important;
}

.module-shared-filters-body .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 40px !important;
}

.module-shared-filters-body .input-group,
.module-shared-filters-body .tw-input-group-standard,
.module-shared-filters-body .ess-input-group {
    width: 100% !important;
}

.module-shared-filters-body .checkbox,
.module-shared-filters-body .form-group .checkbox,
.module-shared-filters-body .form-group > label:has(input[type='checkbox']),
.module-shared-filters-body .form-group > label:has(input[type='radio']) {
    min-height: 42px;
    display: flex;
    align-items: center;
    margin: 0 !important;
}

.module-shared-filters-body .checkbox label,
.module-shared-filters-body .form-group .checkbox label,
.module-shared-filters-body .form-group > label:has(input[type='checkbox']),
.module-shared-filters-body .form-group > label:has(input[type='radio']) {
    white-space: normal;
    overflow: visible;
    text-overflow: initial;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    line-height: 1.35;
    cursor: pointer;
}

.module-shared-filters-body input[type='checkbox'],
.module-shared-filters-body input[type='radio'] {
    flex: 0 0 auto;
    margin: 0;
}

.module-shared-filters-body .icheckbox_square-blue,
.module-shared-filters-body .icheckbox_minimal-blue,
.module-shared-filters-body .iradio_square-blue,
.module-shared-filters-body .iradio_minimal-blue {
    flex: 0 0 auto;
    margin-right: 0.5rem;
}

.module-shared-filters-body > [class*='tw-justify-end'],
.module-shared-filters-body > form > [class*='tw-justify-end'],
.module-shared-filters-body > .row > [class*='tw-justify-end'],
.module-shared-filters-body > form > .row > [class*='tw-justify-end'] {
    grid-column: 1 / -1 !important;
}

@media (max-width: 767px) {
    .report-filters-block,
    .module-shared-filters {
        border-radius: 16px !important;
    }

    .module-shared-filters-header {
        min-height: 58px;
        padding: 0.9rem 1rem !important;
    }
}

@media (min-width: 768px) {
    .module-shared-filters-body {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (min-width: 1280px) {
    .module-shared-filters-body {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

.essentials-tailwind-module .report-filters-block,
.essentials-tailwind-module .module-shared-filters {
    border-color: #dfe6ef !important;
    border-radius: 18px !important;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.05) !important;
}

.essentials-tailwind-module .module-shared-filters-header {
    background: #fff !important;
    border-bottom: 1px solid #e7edf4 !important;
}

.essentials-tailwind-module .module-shared-filters-title {
    color: #1f2937 !important;
    font-size: 15px !important;
}

/* -----------------------------------------------------------------------
   8) Baseline brand skin for plain DataTables listing tables/pagination
   that aren't wrapped in one of the existing per-module page classes
   (.product-tailwind-page, .contact-tailwind-page, .manageuser-tailwind-page,
   .role-tailwind-page, .repair-tailwind-page, .essentials-tailwind-module,
   .gym-module, .booking-tailwind-page, .clinic-tailwind-page,
   .expense-tailwind-page, .recruitment-tailwind-page, .stockadj-tailwind-page,
   .stocktransfer-tailwind-page, .tailorpro-tailwind-page,
   .warehouse-tailwind-page - all 14 already ship their own near-identical
   skin and must keep winning on their own pages).

   No !important anywhere here, and every selector is deliberately ONE class
   shallower than those modules' (e.g. `.dataTables_filter input` vs their
   `.xxx-page .dataTables_wrapper .dataTables_filter input`), so this loses
   on specificity wherever a module skin already exists, and only fills in
   the gap elsewhere (Superadmin, Crm, Hms, Cms, Project, AssetManagement,
   the e-commerce connectors, and most of resources/views/* listing pages).
   Bare `.pagination` also matches Laravel's native (non-DataTables)
   paginator markup - intentional, it gets the same brand treatment too. */
.dataTables_filter,
.dataTables_length,
.dataTables_info,
.dataTables_paginate {
    margin: 0.5rem 0;
    color: #4b5565;
}

.dataTables_length select,
.dataTables_filter input {
    min-height: 2.25rem;
    border: 1px solid #cdd5df;
    border-radius: 0.5rem;
    background: #fff;
    padding: 0.375rem 0.625rem;
    outline: none;
}

table.dataTable thead th {
    background: #f8fafc;
    color: #364152;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.025em;
    text-transform: uppercase;
    white-space: nowrap;
}

table.dataTable tbody tr:hover {
    background: #f8fafc;
}

table.dataTable tfoot td {
    border-top: 1px solid #cdd5df;
    background: #f8fafc;
    color: #121926;
    font-weight: 600;
}

.pagination {
    display: flex;
    gap: 0.25rem;
    margin: 0;
    flex-wrap: wrap;
}

.pagination > li > a,
.pagination > li > span {
    min-width: 2.25rem;
    border: 1px solid #cdd5df;
    border-radius: 0.5rem;
    color: #364152;
    padding: 0.45rem 0.7rem;
    text-align: center;
}

.pagination > .active > a,
.pagination > .active > span {
    border-color: var(--brand-600);
    background: var(--brand-600);
    color: #fff;
}

/* -----------------------------------------------------------------------
   9) Baseline brand skin for plain Bootstrap form controls (.form-group/
   .form-control/label/.help-block/.input-group-addon) and Select2 dropdowns
   that aren't wrapped in one of the existing per-module form classes.
   Audited before writing this: product.css, contact.css, manage_user.css
   and essentials.css already hand-copy this *exact* same design token set
   (#cdd5df border / 0.5rem radius / 2.625rem height / #364152+600+0.875rem
   labels / indigo focus ring) onto `.product-tailwind-form`/
   `.contact-tailwind-form`/etc. - confirming it's the established system,
   not a new invention. Repair, Expense, Booking, and Stock Adjustment/
   Transfer were converted to their own custom semantic classes instead
   (`.repair-input`, `.expense-input`, etc.) and don't use these Bootstrap
   class names at all anymore, so this has zero effect on them either way.
   Confirmed-real gaps via live browser testing: Add Purchase
   (resources/views/purchase/create.blade.php) and Superadmin > Add Business
   (business/partials/register_form.blade.php, also shared with the public
   self-registration page) - both still render plain default-Bootstrap
   tokens (~34px input height, #ccc border, 4px radius) despite looking
   "fine" at a glance, just visibly inconsistent with the rest of the app.

   No !important, and every selector is bare (one class/type, no module
   qualifier), so it loses by specificity wherever a module skin already
   exists. Source order (this file loads after vendor.css) breaks the tie
   against vendor.css's own bare `.form-control`/`.input-group-addon`/
   `.help-block`/`label`/`.radio label`/`.checkbox label` defaults. */
.form-group {
    margin-bottom: 1.1rem;
}

label {
    color: #364152;
    font-size: 0.875rem;
    font-weight: 600;
}

.checkbox label,
.radio label {
    font-weight: 500;
}

.form-control,
.input-group-addon {
    min-height: 2.625rem;
    border: 1px solid #cdd5df;
    border-radius: 0.5rem;
    background: #fff;
    color: #121926;
    font-size: 0.875rem;
    box-shadow: none;
}

.form-control {
    padding: 0.55rem 0.75rem;
}

.form-control:focus {
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px var(--ui-focus-ring);
}

textarea.form-control {
    min-height: 5rem;
}

.input-group-addon {
    padding: 0 0.75rem;
    background: #f8fafc;
    color: #697586;
}

.input-group > .form-control:not(:first-child),
.input-group > .input-group-addon:not(:first-child) {
    border-left: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.input-group > .form-control:not(:last-child),
.input-group > .input-group-addon:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.help-block {
    color: #697586;
    font-size: 0.8rem;
}

.select2-container {
    width: 100% !important;
}

.select2-container .select2-selection--single,
.select2-container .select2-selection--multiple {
    min-height: 2.625rem;
    border: 1px solid #cdd5df;
    border-radius: 0.5rem;
    background: #fff;
}

.select2-selection--single .select2-selection__rendered {
    height: 2.5rem;
    color: #121926;
    line-height: 2.5rem;
    padding-left: 0.75rem;
}

.select2-selection--single .select2-selection__arrow {
    height: 2.5rem;
    right: 0.5rem;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px var(--ui-focus-ring);
}

/* -----------------------------------------------------------------------
   10) A second, unrelated "brand button" pattern exists across ~20 views
   (resources/views/{expense,discount,backup,barcode,purchase_order,...}/
   index.blade.php, sale_pos/partials/pos_sidebar.blade.php, etc.): a literal
   `tw-from-indigo-600 tw-to-blue-500` gradient utility-class pair, instead of
   the `.tw-dw-btn-primary` class section (8) already retargets. Tailwind
   utility classes are static (this build has no live JIT/rebuild step), so
   instead of hand-editing every view, override the two CSS variables those
   utilities set (--tw-gradient-from/--tw-gradient-to) wherever both classes
   land on the same element. The compound selector (0,2,0 specificity) beats
   the plain single-class utility rules (0,1,0 each) without needing
   `!important`. Scoped to the exact pair so it can't affect any other
   element that happens to use tw-to-blue-500/tw-from-indigo-600 alone for
   an unrelated reason. */
.tw-from-indigo-600.tw-to-blue-500 {
    --tw-gradient-from: var(--brand-600) var(--tw-gradient-from-position);
    --tw-gradient-to: var(--brand-500) var(--tw-gradient-to-position);
}

/* -----------------------------------------------------------------------
   11) Legacy purple compatibility layer.
   Older admin/module blades still hardcode the retired purple theme via
   inline styles (#6366f1 / #4338ca / #7c3aed / #a855f7) or Tailwind
   purple/violet utility classes. Repaint those legacy surfaces with the
   active business brand color so the selected theme applies consistently
   across list headers, modal headers, page action buttons, and old cards
   without needing to hand-edit every historical template. */
[style*="linear-gradient(135deg, #6366f1 0%, #4338ca 100%)"],
[style*="linear-gradient(135deg,#6366f1 0%,#4338ca 100%)"],
[style*="linear-gradient(135deg, #6366f1, #4338ca)"],
[style*="linear-gradient(135deg,#6366f1,#4338ca)"],
[style*="linear-gradient(135deg, #7c3aed, #a855f7)"],
[style*="linear-gradient(135deg,#7c3aed,#a855f7)"],
[style*="linear-gradient(135deg,#7c3aed,#a855f7)"],
[style*="linear-gradient(135deg, #4338ca 0%, #2563eb 50%, #1d4ed8 100%)"] {
    background: linear-gradient(135deg, var(--ui-brand-start) 0%, var(--ui-brand-end) 100%) !important;
}

[style*="color: #6366f1"],
[style*="color:#6366f1"],
[style*="color: #4338ca"],
[style*="color:#4338ca"],
[style*="color: #4f46e5"],
[style*="color:#4f46e5"],
[style*="color: #7c3aed"],
[style*="color:#7c3aed"],
[stroke="#6366f1"],
[stroke="#4f46e5"],
[stroke="#8b5cf6"] {
    color: var(--brand-600) !important;
    stroke: var(--brand-600) !important;
}

[style*="border-left: 3px solid #6366f1"],
[style*="border-left: 3px solid #4f46e5"],
[style*="border-left:3px solid #6366f1"],
[style*="border-left:3px solid #4f46e5"] {
    border-left-color: var(--brand-600) !important;
}

[style*="border-color: #6366f1"],
[style*="border-color:#6366f1"],
[style*="border-color: #4f46e5"],
[style*="border-color:#4f46e5"] {
    border-color: var(--brand-500) !important;
}

[style*="background: #6366f1"],
[style*="background:#6366f1"],
[style*="background: #4f46e5"],
[style*="background:#4f46e5"] {
    background: var(--brand-500) !important;
}

/* -----------------------------------------------------------------------
   12) Global subtle button corners.
   Keep existing button sizes, colors, shadows, and labels intact, but replace
   capsule button corners with one gently rounded app-wide radius. */
:root {
    --ui-radius-xl: 4px;
    --rounded-btn: 4px;
    --ui-radius-pill: 4px;
    --global-save-button-green: #16a34a;
    --global-save-button-green-hover: #15803d;
    --global-edit-button-blue: #075985;
    --global-edit-button-blue-hover: #0c4a6e;
}

button,
[role="button"],
input[type="button"],
input[type="submit"],
input[type="reset"],
.btn,
.btn-modal,
.tw-dw-btn,
.ladda-button,
.btn-group > .btn,
.btn-group > .dropdown-toggle,
.input-group-btn > .btn,
.modal .modal-footer .btn,
.modal .modal-footer .tw-dw-btn,
.modifier_modal .btn-group > .btn,
.modifier_modal .btn-group > label.btn,
#modal_payment #add-payment-row,
#recent_transactions_modal .table td.col-md-6 > .tw-dw-btn,
button[class*="tw-rounded"],
.dataTables_wrapper .dt-buttons .btn,
.dataTables_wrapper .dt-buttons .dt-button,
.dt-buttons .btn,
.dt-buttons .dt-button,
a[style*="border-radius: 20px"],
a[style*="border-radius:20px"],
a[style*="border-radius: 999px"],
a[style*="border-radius:999px"],
a[style*="border-radius: 9999px"],
a[style*="border-radius:9999px"],
button[style*="border-radius: 20px"],
button[style*="border-radius:20px"],
button[style*="border-radius: 999px"],
button[style*="border-radius:999px"],
button[style*="border-radius: 9999px"],
button[style*="border-radius:9999px"],
a[class*="tw-rounded"].btn,
a[class*="tw-rounded"].tw-dw-btn,
[role="button"][style*="border-radius: 20px"],
[role="button"][style*="border-radius:20px"],
[role="button"][style*="border-radius: 999px"],
[role="button"][style*="border-radius:999px"],
[role="button"][style*="border-radius: 9999px"],
[role="button"][style*="border-radius:9999px"],
[role="button"][class*="tw-rounded"],
input[type="button"][class*="tw-rounded"],
input[type="submit"][class*="tw-rounded"],
input[type="reset"][class*="tw-rounded"] {
    border-radius: 4px !important;
}

.global-save-button,
button.global-save-button,
input.global-save-button,
.btn.global-save-button,
.btn.btn-primary.global-save-button,
.tw-dw-btn.global-save-button,
.tw-dw-btn.tw-dw-btn-primary.global-save-button,
.modal .modal-footer .global-save-button,
.modal .modal-footer .tw-dw-btn.global-save-button,
.modal .modal-footer .tw-dw-btn.tw-dw-btn-primary.global-save-button,
.global-save-button:hover,
.global-save-button:focus,
.btn-group > .global-save-button,
.btn-group > .tw-dw-btn.global-save-button,
.btn-group > .tw-dw-btn.tw-dw-btn-primary.global-save-button,
.btn-group > .global-save-button:hover,
.btn-group > .global-save-button:focus {
    background: var(--global-save-button-green) !important;
    background-image: none !important;
    border-color: var(--global-save-button-green) !important;
    color: #fff !important;
}

.global-save-button:hover,
.global-save-button:focus,
.btn.global-save-button:hover,
.btn.global-save-button:focus,
.btn.btn-primary.global-save-button:hover,
.btn.btn-primary.global-save-button:focus,
.tw-dw-btn.global-save-button:hover,
.tw-dw-btn.global-save-button:focus,
.tw-dw-btn.tw-dw-btn-primary.global-save-button:hover,
.tw-dw-btn.tw-dw-btn-primary.global-save-button:focus,
.modal .modal-footer .global-save-button:hover,
.modal .modal-footer .global-save-button:focus,
.modal .modal-footer .tw-dw-btn.global-save-button:hover,
.modal .modal-footer .tw-dw-btn.global-save-button:focus,
.modal .modal-footer .tw-dw-btn.tw-dw-btn-primary.global-save-button:hover,
.modal .modal-footer .tw-dw-btn.tw-dw-btn-primary.global-save-button:focus,
.btn-group > .global-save-button:hover,
.btn-group > .global-save-button:focus,
.btn-group > .tw-dw-btn.global-save-button:hover,
.btn-group > .tw-dw-btn.global-save-button:focus,
.btn-group > .tw-dw-btn.tw-dw-btn-primary.global-save-button:hover,
.btn-group > .tw-dw-btn.tw-dw-btn-primary.global-save-button:focus {
    background: var(--global-save-button-green-hover) !important;
    border-color: var(--global-save-button-green-hover) !important;
}

.global-action-button,
button.global-action-button,
input.global-action-button,
.btn.global-action-button,
.tw-dw-btn.global-action-button,
.btn-group > .global-action-button,
.btn-group > .tw-dw-btn.global-action-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    min-height: 28px !important;
    height: 28px !important;
    padding: 5px 12px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
}

.global-action-button i,
.global-action-button svg {
    flex: 0 0 auto !important;
    line-height: 1 !important;
}

/* A dropdown menu item is a menu ROW, not an action-row button. The global
   button classifier tags any control labelled exactly Edit/View/Delete/
   Activate/Deactivate, which includes the Delete item inside an Actions menu;
   the compact centred sizing above then indented that one item. Restore the
   au-dropdown menu-item metrics. Kept in sync with the duplicate exceptions in
   layouts/partials/css.blade.php and layouts/partials/javascripts.blade.php. */
.au-dropdown__menu > li > .global-action-button,
.dropdown-menu > li > .global-action-button,
.btn-group .dropdown-menu > li > .global-action-button {
    display: flex !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 7px 12px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.42857143 !important; /* matches Bootstrap .dropdown-menu>li>a so button items are the same height as anchor items */
    width: 100% !important;
    text-align: left !important;
}

.au-dropdown__menu > li > .global-action-button i,
.dropdown-menu > li > .global-action-button i,
.btn-group .dropdown-menu > li > .global-action-button i {
    flex: 0 0 16px !important;
    width: 16px !important;
    max-width: 16px !important;
    text-align: center !important;
}

.global-edit-button,
button.global-edit-button,
input.global-edit-button,
.btn.global-edit-button,
.btn.btn-primary.global-edit-button,
.btn.btn-info.global-edit-button,
.tw-dw-btn.global-edit-button,
.tw-dw-btn.tw-dw-btn-primary.global-edit-button,
.tw-dw-btn.tw-dw-btn-info.global-edit-button,
.tw-dw-btn.tw-dw-btn-outline.global-edit-button,
.tw-dw-btn.tw-dw-btn-outline.tw-dw-btn-primary.global-edit-button,
.btn-group > .global-edit-button,
.btn-group > .tw-dw-btn.global-edit-button,
.btn-group > .tw-dw-btn.tw-dw-btn-outline.global-edit-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    min-height: 28px !important;
    height: 28px !important;
    padding: 5px 12px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    background: #fff !important;
    background-image: none !important;
    border: 1px solid var(--global-edit-button-blue) !important;
    color: var(--global-edit-button-blue) !important;
    box-shadow: none !important;
}

.global-edit-button:hover,
.global-edit-button:focus,
.btn.global-edit-button:hover,
.btn.global-edit-button:focus,
.btn.btn-primary.global-edit-button:hover,
.btn.btn-primary.global-edit-button:focus,
.btn.btn-info.global-edit-button:hover,
.btn.btn-info.global-edit-button:focus,
.tw-dw-btn.global-edit-button:hover,
.tw-dw-btn.global-edit-button:focus,
.tw-dw-btn.tw-dw-btn-primary.global-edit-button:hover,
.tw-dw-btn.tw-dw-btn-primary.global-edit-button:focus,
.tw-dw-btn.tw-dw-btn-info.global-edit-button:hover,
.tw-dw-btn.tw-dw-btn-info.global-edit-button:focus,
.tw-dw-btn.tw-dw-btn-outline.global-edit-button:hover,
.tw-dw-btn.tw-dw-btn-outline.global-edit-button:focus,
.tw-dw-btn.tw-dw-btn-outline.tw-dw-btn-primary.global-edit-button:hover,
.tw-dw-btn.tw-dw-btn-outline.tw-dw-btn-primary.global-edit-button:focus,
.btn-group > .global-edit-button:hover,
.btn-group > .global-edit-button:focus,
.btn-group > .tw-dw-btn.global-edit-button:hover,
.btn-group > .tw-dw-btn.global-edit-button:focus,
.btn-group > .tw-dw-btn.tw-dw-btn-outline.global-edit-button:hover,
.btn-group > .tw-dw-btn.tw-dw-btn-outline.global-edit-button:focus {
    background: var(--global-edit-button-blue-hover) !important;
    border-color: var(--global-edit-button-blue-hover) !important;
    color: #fff !important;
}

.tox .tox-mbtn.global-action-button,
.tox .tox-mbtn.global-save-button,
.tox .tox-mbtn.global-edit-button,
.tox .tox-mbtn.global-close-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    height: 34px !important;
    min-height: 0 !important;
    margin: 2px 0 !important;
    padding: 0 8px !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: normal !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 3px !important;
    color: #222f3e !important;
    box-shadow: none !important;
    outline: none !important;
    transform: none !important;
}

.tox .tox-tbtn.global-action-button,
.tox .tox-tbtn.global-save-button,
.tox .tox-tbtn.global-edit-button,
.tox .tox-tbtn.global-close-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0 !important;
    width: 34px !important;
    height: 34px !important;
    min-height: 0 !important;
    padding: 0 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: normal !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 3px !important;
    color: #222f3e !important;
    box-shadow: none !important;
    outline: none !important;
    transform: none !important;
}

.tox .tox-mbtn.global-action-button:hover,
.tox .tox-mbtn.global-save-button:hover,
.tox .tox-mbtn.global-edit-button:hover,
.tox .tox-mbtn.global-close-button:hover,
.tox .tox-tbtn.global-action-button:hover,
.tox .tox-tbtn.global-save-button:hover,
.tox .tox-tbtn.global-edit-button:hover,
.tox .tox-tbtn.global-close-button:hover {
    background: #f2f2f2 !important;
    border-color: transparent !important;
    color: #222f3e !important;
    box-shadow: none !important;
}

.tox .tox-mbtn.global-action-button.tox-mbtn--active,
.tox .tox-mbtn.global-save-button.tox-mbtn--active,
.tox .tox-mbtn.global-edit-button.tox-mbtn--active,
.tox .tox-mbtn.global-close-button.tox-mbtn--active,
.tox .tox-tbtn.global-action-button.tox-tbtn--enabled,
.tox .tox-tbtn.global-save-button.tox-tbtn--enabled,
.tox .tox-tbtn.global-edit-button.tox-tbtn--enabled,
.tox .tox-tbtn.global-close-button.tox-tbtn--enabled {
    background: #cce2fa !important;
    border-color: transparent !important;
    color: #222f3e !important;
    box-shadow: none !important;
}

.crm-lead-detail-select {
    min-width: 260px;
}

.crm-lead-detail-select .select2-container,
.crm-lead-detail-select .form-control {
    min-width: 260px;
}

/* .au-card__header forces color:#fff on every descendant for its blue gradient
   bar; this select sits inside that header but keeps its own white select2
   background, so without this the selected lead's name renders white-on-white.
   Specificity has to beat ".content .au-card > .au-card__header *". */
.content .au-card > .au-card__header .crm-lead-detail-select .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #222f3e !important;
}

.crm-nav .navbar-brand {
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    color: #0d8fc5 !important;
}

.crm-nav .navbar-nav > li > a:hover {
    background: #edf6fb !important;
    color: #0b79ad !important;
}

.crm-nav .navbar-nav > li.active > a,
.crm-nav .navbar-nav > li.active > a:hover,
.crm-nav .navbar-nav > li.active > a:focus {
    background: #eaf4ff !important;
    background-image: none !important;
    color: #0050ff !important;
    box-shadow: none !important;
}

@media (max-width: 767px) {
    .crm-lead-detail-select,
    .crm-lead-detail-select .select2-container,
    .crm-lead-detail-select .form-control {
        min-width: 100%;
        width: 100% !important;
    }
}

/* -----------------------------------------------------------------------
   13) Unified form fields with inline icons/actions.
   Bootstrap input-groups, Select2 fields, file browse controls, and the
   newer module-specific groups now use one visual container: the group owns
   the border/radius/focus ring, while icons and buttons become internal
   field segments instead of separate attachments. */
:root {
    --ui-field-height: 2.625rem;
    --ui-field-border: #cdd5df;
    --ui-field-bg: #fff;
    --ui-field-muted-bg: #f8fafc;
    --ui-field-text: #121926;
    --ui-field-icon: #4b5565;
    --ui-field-radius: 0.5rem;
}

.input-group {
    width: 100%;
    min-height: var(--ui-field-height);
    border: 1px solid var(--ui-field-border);
    border-collapse: separate;
    border-radius: var(--ui-field-radius);
    background: var(--ui-field-bg);
    box-shadow: none;
    overflow: hidden;
}

.input-group:focus-within,
.input-group:has(.select2-container--open),
.input-group:has(.select2-container--focus) {
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px var(--ui-focus-ring);
}

/* Same fix as .tw-input-group-standard above: the Vue picker components
   mount inside their [data-vpicker] host div rather than replacing it, so
   wherever a date/time/range picker sits inside a classic Bootstrap
   .input-group, its real input is a grandchild, not the direct child this
   file used to assume. This is the single most common input-group pattern
   in the app, so this one fix reaches every module's date picker that
   hasn't been converted to .tw-input-group-standard, with no per-page
   changes needed.
   Unlike .tw-input-group-standard (a flex container), a plain .input-group
   is CSS table layout (vendor.css: display:table, with .form-control /
   .input-group-addon as table-cell) - forcing display:flex on the picker's
   host div here would pull it out of the table row entirely, dropping it
   onto its own anonymous row below the icon instead of beside it. Give it
   table-cell too so it takes the same row as its table-cell siblings; the
   picker's own root can still be flex internally. */
.input-group > [data-vpicker] {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
}

.input-group .au-native-picker,
.input-group .au-date-range {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
}

.input-group .au-native-picker > .form-control,
.input-group .au-date-range > .form-control {
    flex: 1 1 auto;
    min-width: 0;
    min-height: calc(var(--ui-field-height) - 2px);
    height: auto;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent;
    color: var(--ui-field-text);
    padding: 0.55rem 0.75rem;
}

.input-group .au-native-picker > input[type="hidden"] {
    display: none !important;
}

.input-group > .form-control,
.input-group > select.form-control,
.input-group > textarea.form-control,
.input-group > .select2-container,
.input-group > .input-group-addon,
.input-group > .input-group-btn,
.input-group > .input-group-btn > .btn,
.input-group > .input-group-btn > .btn-modal,
.input-group > .input-group-btn > button,
.input-group > .input-group-btn > a,
.input-group .file-caption,
.input-group .btn-file {
    min-height: calc(var(--ui-field-height) - 2px);
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.input-group > .form-control,
.input-group > select.form-control,
.input-group > textarea.form-control,
.input-group .file-caption {
    height: auto;
    background: transparent;
    color: var(--ui-field-text);
    padding: 0.55rem 0.75rem;
}

.input-group > textarea.form-control {
    min-height: 5rem;
}

.input-group > .form-control:focus,
.input-group > select.form-control:focus,
.input-group > textarea.form-control:focus,
.input-group .file-caption:focus {
    border-color: transparent !important;
    box-shadow: none !important;
    outline: none;
}

.input-group > .form-control:not(:first-child),
.input-group > .input-group-addon:not(:first-child),
.input-group > .select2-container:not(:first-child) .select2-selection--single,
.input-group > .select2-container:not(:first-child) .select2-selection--multiple {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.input-group > .form-control:not(:last-child),
.input-group > .input-group-addon:not(:last-child),
.input-group > .select2-container:not(:last-child) .select2-selection--single,
.input-group > .select2-container:not(:last-child) .select2-selection--multiple {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.input-group > .input-group-addon {
    width: 2.625rem;
    padding: 0 0.75rem;
    background: var(--ui-field-muted-bg);
    color: var(--ui-field-icon);
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}

.input-group > .input-group-addon:not(:last-child) {
    border-right: 1px solid #e3e8ef !important;
}

.input-group > .input-group-addon:not(:first-child) {
    border-left: 1px solid #e3e8ef !important;
}

.input-group > .input-group-addon i,
.input-group > .input-group-addon svg {
    color: inherit;
    line-height: 1;
    vertical-align: middle;
}

.input-group > .input-group-btn {
    background: var(--ui-field-muted-bg);
    vertical-align: stretch;
    white-space: nowrap;
}

.input-group > .input-group-btn:not(:first-child) {
    border-left: 1px solid #e3e8ef !important;
}

.input-group > .input-group-btn:not(:last-child) {
    border-right: 1px solid #e3e8ef !important;
}

.input-group > .input-group-btn > .btn,
.input-group > .input-group-btn > .btn-modal,
.input-group > .input-group-btn > button,
.input-group > .input-group-btn > a,
.input-group .btn-file {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.4rem !important;
    height: 100% !important;
    min-width: 2.625rem;
    padding: 0.55rem 0.8rem !important;
    background: var(--ui-field-muted-bg) !important;
    background-image: none !important;
    color: var(--ui-field-icon) !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;
}

.input-group > .input-group-btn > .btn:hover,
.input-group > .input-group-btn > .btn:focus,
.input-group > .input-group-btn > .btn-modal:hover,
.input-group > .input-group-btn > .btn-modal:focus,
.input-group > .input-group-btn > button:hover,
.input-group > .input-group-btn > button:focus,
.input-group > .input-group-btn > a:hover,
.input-group > .input-group-btn > a:focus,
.input-group .btn-file:hover,
.input-group .btn-file:focus {
    background: #eef2f6 !important;
    color: var(--brand-700) !important;
    outline: none !important;
}

.input-group > .select2-container .select2-selection--single,
.input-group > .select2-container .select2-selection--multiple {
    min-height: calc(var(--ui-field-height) - 2px);
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.input-group > .select2-container .select2-selection--single .select2-selection__rendered {
    height: calc(var(--ui-field-height) - 2px);
    line-height: calc(var(--ui-field-height) - 2px);
}

.input-group > .select2-container .select2-selection--single .select2-selection__arrow {
    height: calc(var(--ui-field-height) - 2px);
}

.input-group > .select2-container--focus .select2-selection--single,
.input-group > .select2-container--focus .select2-selection--multiple,
.input-group > .select2-container--open .select2-selection--single,
.input-group > .select2-container--open .select2-selection--multiple {
    box-shadow: none !important;
}

.product-tailwind-form .input-group,
.contact-tailwind-form .input-group,
.contact-tailwind-modal .input-group,
.manageuser-tailwind-form .input-group,
.repair-tailwind-page .input-group,
.repair-tailwind-modal .input-group {
    border-radius: var(--ui-field-radius) !important;
}

.product-tailwind-form .input-group .form-control,
.contact-tailwind-form .input-group .form-control,
.contact-tailwind-modal .input-group .form-control,
.manageuser-tailwind-form .input-group .form-control {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.product-tailwind-form .input-group-btn .btn,
.product-tailwind-form .input-group-btn .btn-modal,
.contact-tailwind-modal .input-group-addon,
.manageuser-tailwind-form .input-group-addon {
    border-radius: 0 !important;
}

.repair-input-group,
.booking-customer-control {
    gap: 0 !important;
    border: 1px solid var(--ui-field-border);
    border-radius: var(--ui-field-radius);
    background: var(--ui-field-bg);
    box-shadow: none;
    overflow: hidden;
}

.repair-input-group:focus-within,
.booking-customer-control:focus-within {
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px var(--ui-focus-ring);
}

.repair-input-group > .repair-input-icon,
.repair-input-group > .repair-input,
.repair-input-group > .repair-select,
.booking-customer-control > .booking-input {
    min-height: calc(var(--ui-field-height) - 2px);
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.repair-input-group > .repair-input-icon > .repair-input,
.repair-input-group > .repair-input-icon > .repair-select {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.repair-input-group > button,
.repair-input-group > a.tw-dw-btn,
.booking-customer-control > .booking-add-customer {
    min-height: calc(var(--ui-field-height) - 2px) !important;
    border: 0 !important;
    border-left: 1px solid #e3e8ef !important;
    border-radius: 0 !important;
    background: var(--ui-field-muted-bg) !important;
    background-image: none !important;
    color: var(--brand-700) !important;
    box-shadow: none !important;
}

.repair-input-group > button:hover,
.repair-input-group > button:focus,
.repair-input-group > a.tw-dw-btn:hover,
.repair-input-group > a.tw-dw-btn:focus,
.booking-customer-control > .booking-add-customer:hover,
.booking-customer-control > .booking-add-customer:focus {
    background: #eef2f6 !important;
    color: var(--brand-800) !important;
    outline: none !important;
}

/* -----------------------------------------------------------------------
   14) Bootstrap-to-Tailwind form bridge.
   A small site-wide script adds these semantic `tw-*` classes to legacy
   Bootstrap form markup so the styling system targets Tailwind-named form
   primitives. The original Bootstrap classes are left in the DOM only as
   compatibility hooks for Select2, fileinput, validation, and legacy JS. */
.tw-form-grid {
    display: flex;
    flex-wrap: wrap;
    margin-right: -0.5rem;
    margin-left: -0.5rem;
}

.tw-form-grid > .tw-form-col {
    min-width: 0;
    width: 100%;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
}

.tw-form-field {
    margin-bottom: 1.1rem;
}

.tw-form-field > label,
.tw-form-field label:not(.radio-inline):not(.checkbox-inline) {
    color: #364152;
    font-size: 0.875rem;
    font-weight: 600;
}

.tw-form-control-standard {
    width: 100%;
    min-height: var(--ui-field-height);
    border: 1px solid var(--ui-field-border);
    border-radius: var(--ui-field-radius);
    background: var(--ui-field-bg);
    color: var(--ui-field-text);
    font-size: 0.875rem;
    padding: 0.55rem 0.75rem;
    box-shadow: none;
}

.tw-form-control-standard:focus {
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px var(--ui-focus-ring);
    outline: none;
}

textarea.tw-form-control-standard {
    min-height: 5rem;
}

.tw-input-group-standard {
    display: flex;
    align-items: stretch;
    width: 100%;
    min-height: var(--ui-field-height);
    border: 1px solid var(--ui-field-border);
    border-collapse: separate;
    border-radius: var(--ui-field-radius);
    background: var(--ui-field-bg);
    box-shadow: none;
    overflow: hidden;
}

.tw-input-group-standard:focus-within,
.tw-input-group-standard:has(.select2-container--open),
.tw-input-group-standard:has(.select2-container--focus) {
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px var(--ui-focus-ring);
}

.tw-input-group-standard > .tw-form-control-standard,
.tw-input-group-standard > .select2-container,
.tw-input-group-standard > .tw-input-addon,
.tw-input-group-standard > .tw-input-action,
.tw-input-group-standard > .tw-input-action > .tw-input-button {
    min-height: calc(var(--ui-field-height) - 2px);
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.tw-input-group-standard > .tw-form-control-standard {
    background: transparent;
}

/* Baseline for the Vue picker mount point, unscoped to any particular
   wrapper. The host div is always a plain block container and its rendered
   root (.au-native-picker / .au-date-range) is always a flex row that fills
   it — true regardless of which module's wrapper class surrounds it, so a
   new module gets correct picker geometry for free without adding its own
   CSS. Context-specific rules below layer sizing on top of this baseline
   when the picker sits inside the shared .tw-input-group-standard shell. */
[data-vpicker] {
    display: block;
    width: 100%;
    min-width: 0;
}

[data-vpicker] .au-native-picker,
[data-vpicker] .au-date-range {
    display: flex;
    align-items: stretch;
    width: 100%;
}

/* The Vue picker components (DatePickerInput / DateTimePickerInput /
   DateRangePickerInput) mount *inside* the [data-vpicker] host element
   rather than replacing it, so their root (.au-native-picker / .au-date-range)
   is a grandchild of .tw-input-group-standard, not a direct child. Match on
   descendant, not child, combinators so the sizing actually reaches it. */
.tw-input-group-standard > [data-vpicker] {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
}

.tw-input-group-standard .au-native-picker,
.tw-input-group-standard .au-date-range {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
}

.tw-input-group-standard .au-native-picker > .tw-form-control-standard,
.tw-input-group-standard .au-date-range > .tw-form-control-standard {
    flex: 1 1 auto;
    min-width: 0;
    min-height: calc(var(--ui-field-height) - 2px);
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent;
}

.tw-input-group-standard .au-native-picker > input[type="hidden"] {
    display: none !important;
}

.tw-input-addon {
    width: 2.625rem;
    padding: 0 0.75rem;
    background: var(--ui-field-muted-bg);
    color: var(--ui-field-icon);
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}

.tw-input-addon:not(:last-child) {
    border-right: 1px solid #e3e8ef !important;
}

.tw-input-addon:not(:first-child) {
    border-left: 1px solid #e3e8ef !important;
}

.tw-input-action {
    background: var(--ui-field-muted-bg);
    vertical-align: stretch;
    white-space: nowrap;
}

.tw-input-action:not(:first-child) {
    border-left: 1px solid #e3e8ef !important;
}

.tw-input-action:not(:last-child) {
    border-right: 1px solid #e3e8ef !important;
}

.tw-input-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.4rem !important;
    height: 100% !important;
    min-width: 2.625rem;
    padding: 0.55rem 0.8rem !important;
    background: var(--ui-field-muted-bg) !important;
    background-image: none !important;
    color: var(--ui-field-icon) !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.tw-input-button:hover,
.tw-input-button:focus {
    background: #eef2f6 !important;
    color: var(--brand-700) !important;
    outline: none !important;
}

@media (min-width: 768px) {
    .tw-form-grid > .tw-form-col-md-3,
    .tw-form-grid > .tw-form-col-sm-3 {
        width: 25%;
    }

    .tw-form-grid > .tw-form-col-md-4,
    .tw-form-grid > .tw-form-col-sm-4 {
        width: 33.333333%;
    }

    .tw-form-grid > .tw-form-col-md-6,
    .tw-form-grid > .tw-form-col-sm-6 {
        width: 50%;
    }

    .tw-form-grid > .tw-form-col-md-8,
    .tw-form-grid > .tw-form-col-sm-8 {
        width: 66.666667%;
    }

    .tw-form-grid > .tw-form-col-md-12,
    .tw-form-grid > .tw-form-col-sm-12 {
        width: 100%;
    }
}

.modal .select2-container--open,
.modal .select2-dropdown {
    z-index: 1070 !important;
}

.schedule .crm-follow-up-modal,
.edit_schedule .crm-follow-up-modal {
    border: 0;
    border-radius: 12px;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.18);
    overflow: visible;
}

.schedule .crm-follow-up-header,
.edit_schedule .crm-follow-up-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-bottom: 0;
    background: linear-gradient(135deg, var(--ui-brand-start) 0%, var(--ui-brand-end) 100%);
}

.schedule .crm-follow-up-header h4,
.edit_schedule .crm-follow-up-header h4 {
    margin: 0;
    color: #fff;
    font-size: 1.125rem;
    font-weight: 700;
}

.schedule .crm-follow-up-header button,
.edit_schedule .crm-follow-up-header button {
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: rgba(255, 255, 255, 0.86);
    font-size: 1.5rem;
    line-height: 1;
}

.schedule .crm-follow-up-header button:hover,
.edit_schedule .crm-follow-up-header button:hover {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}

.schedule .crm-follow-up-body,
.edit_schedule .crm-follow-up-body {
    padding: 1rem 1.5rem 1.25rem;
}

.schedule .crm-follow-up-grid,
.edit_schedule .crm-follow-up-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0.8rem 1rem;
}

.schedule .crm-follow-up-col-12,
.edit_schedule .crm-follow-up-col-12 {
    grid-column: span 12 / span 12;
}

.schedule .crm-follow-up-col-8,
.edit_schedule .crm-follow-up-col-8 {
    grid-column: span 8 / span 8;
}

.schedule .crm-follow-up-col-6,
.edit_schedule .crm-follow-up-col-6 {
    grid-column: span 6 / span 6;
}

.schedule .crm-follow-up-col-4,
.edit_schedule .crm-follow-up-col-4 {
    grid-column: span 4 / span 4;
}

.schedule .crm-follow-up-body .tw-mb-4,
.edit_schedule .crm-follow-up-body .tw-mb-4 {
    margin-bottom: 0.65rem;
}

.schedule .crm-follow-up-body .allow_notification_elements,
.edit_schedule .crm-follow-up-body .allow_notification_elements {
    grid-column: span 12 / span 12;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0.8rem 1rem;
}

.schedule .crm-follow-up-body .allow_notification_elements.hide,
.schedule .crm-follow-up-body .allow_notification_elements.tw-hidden,
.edit_schedule .crm-follow-up-body .allow_notification_elements.hide,
.edit_schedule .crm-follow-up-body .allow_notification_elements.tw-hidden {
    display: none !important;
}

.schedule .crm-follow-up-body label,
.edit_schedule .crm-follow-up-body label {
    display: block;
    margin-bottom: 0.35rem;
    color: #334155;
    font-size: 0.875rem;
    font-weight: 600;
}

.schedule .crm-follow-up-notification-row,
.edit_schedule .crm-follow-up-notification-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 32px;
}

.schedule .crm-follow-up-notification-row label,
.edit_schedule .crm-follow-up-notification-row label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

.schedule .crm-follow-up-notification-row .fa,
.schedule .crm-follow-up-notification-row .fas,
.edit_schedule .crm-follow-up-notification-row .fa,
.edit_schedule .crm-follow-up-notification-row .fas {
    display: inline-flex;
    align-items: center;
    margin: 0;
}

.schedule .crm-follow-up-body .tw-form-control-standard,
.edit_schedule .crm-follow-up-body .tw-form-control-standard {
    min-height: 42px;
}

.schedule .crm-follow-up-body .select2-container,
.edit_schedule .crm-follow-up-body .select2-container {
    width: 100% !important;
}

.schedule .crm-follow-up-body .select2-container--default .select2-selection--single,
.edit_schedule .crm-follow-up-body .select2-container--default .select2-selection--single {
    height: 42px;
    border: 1px solid var(--ui-field-border);
    border-radius: var(--ui-field-radius);
}

.schedule .crm-follow-up-body .select2-container--default .select2-selection--single .select2-selection__rendered,
.edit_schedule .crm-follow-up-body .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 40px;
    padding-left: 0.75rem;
}

.schedule .crm-follow-up-body .select2-container--default .select2-selection--single .select2-selection__arrow,
.edit_schedule .crm-follow-up-body .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 40px;
}

.schedule .crm-follow-up-body .tox.tox-tinymce,
.edit_schedule .crm-follow-up-body .tox.tox-tinymce {
    height: 220px !important;
    border-radius: 8px;
}

.schedule .crm-follow-up-footer,
.edit_schedule .crm-follow-up-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid #e5e7eb;
    background: #f8fafc;
}

@media (max-width: 767px) {
    .schedule .crm-follow-up-col-8,
    .schedule .crm-follow-up-col-6,
    .schedule .crm-follow-up-col-4,
    .edit_schedule .crm-follow-up-col-8,
    .edit_schedule .crm-follow-up-col-6,
    .edit_schedule .crm-follow-up-col-4 {
        grid-column: span 12 / span 12;
    }
}

.contact_login_modal .crm-contact-login-modal {
    border: 0;
    border-radius: 12px;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.18);
    overflow: visible;
}

.contact_login_modal .crm-contact-login-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-bottom: 0;
    background: linear-gradient(135deg, var(--ui-brand-start) 0%, var(--ui-brand-end) 100%);
}

.contact_login_modal .crm-contact-login-header h4 {
    margin: 0;
    color: #fff;
    font-size: 1.125rem;
    font-weight: 700;
}

.contact_login_modal .crm-contact-login-header button {
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: rgba(255, 255, 255, 0.86);
    font-size: 1.5rem;
    line-height: 1;
}

.contact_login_modal .crm-contact-login-header button:hover {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}

.contact_login_modal .crm-contact-login-body {
    padding: 1rem 1.5rem 1.25rem;
}

.contact_login_modal .crm-contact-login-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0.8rem 1rem;
}

.contact_login_modal #crm_login_div.hide,
.contact_login_modal #crm_login_div.tw-hidden {
    display: none !important;
}

.contact_login_modal .crm-contact-login-col-2 {
    grid-column: span 2 / span 2;
}

.contact_login_modal .crm-contact-login-col-4 {
    grid-column: span 4 / span 4;
}

.contact_login_modal .crm-contact-login-col-5 {
    grid-column: span 5 / span 5;
}

.contact_login_modal .crm-contact-login-col-6 {
    grid-column: span 6 / span 6;
}

.contact_login_modal .crm-contact-login-body .tw-mb-4 {
    margin-bottom: 0.75rem;
}

.contact_login_modal .crm-contact-login-body label {
    display: block;
    margin-bottom: 0.35rem;
    color: #334155;
    font-size: 0.875rem;
    font-weight: 600;
}

.contact_login_modal .crm-contact-login-body .tw-form-control-standard {
    min-height: 42px;
}

.contact_login_modal .crm-contact-login-body .select2-container {
    width: 100% !important;
}

.contact_login_modal .crm-contact-login-body .select2-container--default .select2-selection--single {
    height: 42px;
    border: 1px solid var(--ui-field-border);
    border-radius: var(--ui-field-radius);
}

.contact_login_modal .crm-contact-login-body .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 40px;
    padding-left: 0.75rem;
}

.contact_login_modal .crm-contact-login-body .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 40px;
}

.contact_login_modal .crm-contact-login-check-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 42px;
}

.contact_login_modal .crm-contact-login-check-row label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

.contact_login_modal .crm-contact-login-check-row .fa,
.contact_login_modal .crm-contact-login-check-row .fas {
    display: inline-flex;
    align-items: center;
    margin: 0;
}

.contact_login_modal .crm-contact-login-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid #e5e7eb;
    background: #f8fafc;
}

@media (max-width: 767px) {
    .contact_login_modal .crm-contact-login-col-2,
    .contact_login_modal .crm-contact-login-col-4,
    .contact_login_modal .crm-contact-login-col-5,
    .contact_login_modal .crm-contact-login-col-6 {
        grid-column: span 12 / span 12;
    }
}

.crm-contact-person-wrapper {
    margin-top: 1rem;
}

.crm-contact-person-content {
    margin-top: 0.85rem;
}

.crm-contact-person-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0.8rem 1rem;
}

.crm-contact-person-panel.hide {
    display: none !important;
}

.crm-contact-person-col-12 {
    grid-column: span 12 / span 12;
}

.crm-contact-person-col-2 {
    grid-column: span 2 / span 2;
}

.crm-contact-person-col-4 {
    grid-column: span 4 / span 4;
}

.crm-contact-person-col-5 {
    grid-column: span 5 / span 5;
}

.crm-contact-person-col-6 {
    grid-column: span 6 / span 6;
}

.crm-contact-person-divider {
    margin: 0.25rem 0 1rem;
    border: 0;
    border-top: 1px solid #e5e7eb;
}

.crm-contact-person-wrapper .tw-mb-4 {
    margin-bottom: 0.75rem;
}

.crm-contact-person-wrapper label {
    display: block;
    margin-bottom: 0.35rem;
    color: #334155;
    font-size: 0.875rem;
    font-weight: 600;
}

.crm-contact-person-wrapper .tw-form-control-standard {
    min-height: 42px;
}

.crm-contact-person-check-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 42px;
}

.crm-contact-person-check-row label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

.crm-contact-person-check-row .fa,
.crm-contact-person-check-row .fas {
    display: inline-flex;
    align-items: center;
    margin: 0;
}

@media (max-width: 767px) {
    .crm-contact-person-col-2,
    .crm-contact-person-col-4,
    .crm-contact-person-col-5,
    .crm-contact-person-col-6 {
        grid-column: span 12 / span 12;
    }
}

/* -----------------------------------------------------------------------
   Form action buttons — "below-card" pattern (global)
   -----------------------------------------------------------------------
   A companion script in app.blade.php (processWidget) adds a
   `widget-action-bar` class, IN PLACE, to the trailing row of a
   .module-shared-widget slot that holds the submit button (it never moves
   the row in the DOM — see the script comment for why). This just gives
   that row a small top gap so it reads as sitting below the white card,
   on the plain page background — no background color, border, or boxed
   "footer strip" of its own; the card keeps its normal rounded corners
   all the way around since nothing sits flush against it anymore.

   Pages where the button is already outside the widget DOM
   (e.g. business/settings.blade.php .bs-update-bar) are unaffected.
   Modals are excluded by the script (skip if inside .modal). */

.widget-action-bar {
    margin-top: 1rem;
    text-align: center;
}

/* -----------------------------------------------------------------------
   Cart quantity-unit label (sell.product_row / sale_pos.product_row)
   -----------------------------------------------------------------------
   Single-unit products print the unit name as bare text under the quantity
   stepper (no wrapper, no styling) while multi-unit products get a proper
   .tw-form-control-standard <select>. The label now carries that same
   tw-form-control-standard class directly (the established pattern for
   hardcoding the bridge class - see sell/create.blade.php's transaction_date
   field) so it renders as the identical bordered field, just centered under
   the stepper at the same fixed width as the sibling .sub_unit select. */
#pos_table td .sub_unit,
#pos_table td .pos-unit-label {
    width: 132px;
    max-width: 100%;
    margin: 6px auto 0;
}

#pos_table td .pos-unit-label {
    display: flex;
    align-items: center;
}

/* -----------------------------------------------------------------------
   Global: Clickable reference links (invoice numbers, payment numbers, etc.)
   Remove any background/button appearance; show as plain light-blue text.
   Context-specific overrides (box-tools, content-header, etc.) remain higher
   specificity and continue to render those links as styled buttons.
   ----------------------------------------------------------------------- */
a.btn-modal,
a.view_payment_modal,
a.view_purchase_payment_modal,
a.view_purchase_return_payment_modal,
a.view_sell_return_payment_modal,
td a.btn-modal,
td a[data-container=".view_modal"],
td a[data-container=".view_modal_lg"],
td a[data-container=".view_modal_xl"] {
    background: none !important;
    background-image: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    font-weight: inherit !important;
    color: #0ea5e9 !important;
    text-decoration: none !important;
    display: inline !important;
    letter-spacing: normal !important;
    transition: color 0.15s ease !important;
}

a.btn-modal:hover,
a.btn-modal:focus,
a.view_payment_modal:hover,
a.view_payment_modal:focus,
a.view_purchase_payment_modal:hover,
a.view_purchase_payment_modal:focus,
a.view_purchase_return_payment_modal:hover,
a.view_purchase_return_payment_modal:focus,
a.view_sell_return_payment_modal:hover,
a.view_sell_return_payment_modal:focus,
td a.btn-modal:hover,
td a.btn-modal:focus,
td a[data-container=".view_modal"]:hover,
td a[data-container=".view_modal"]:focus,
td a[data-container=".view_modal_lg"]:hover,
td a[data-container=".view_modal_lg"]:focus,
td a[data-container=".view_modal_xl"]:hover,
td a[data-container=".view_modal_xl"]:focus {
    background: none !important;
    color: #0284c7 !important;
    text-decoration: underline !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Preserve button appearance for links rendered specifically in button-context areas */
.box-tools a.btn-modal,
.content-header a.btn-modal,
.module-shared-widget .box-tools a.btn-modal,
.box-primary > .box-header a.btn-modal,
.box-header.module-shared-widget-header .box-tools a.btn-modal,
.modal-footer a.btn-modal,
.action-btn a.btn-modal {
    background: linear-gradient(135deg, var(--ui-brand-start) 0%, var(--ui-brand-end) 100%) !important;
    border: none !important;
    color: #fff !important;
    border-radius: var(--ui-radius-pill) !important;
    box-shadow: 0 12px 28px -18px var(--ui-brand-shadow-strong) !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 0.35rem 1.1rem !important;
    text-decoration: none !important;
    transform: none !important;
}


/* ============================================================================
   Global "action button below the white card" layout
   ----------------------------------------------------------------------------
   Requirement: on every settings / form page the primary action button
   (Save / Update / Preview ...) must sit OUTSIDE the white container - on the
   page background, just below where the white card ends.

   Almost every form page renders its action button as the trailing, centred
   element inside a shared widget card:

       .module-shared-widget            <- the white card (bg/ring/shadow/round)
         .module-shared-widget-shell
           .box-header (blue title bar)
           .module-shared-widget-body   <- white body (no bg of its own)
             ... form rows ...
             [.col-*-12].text-center     <- trailing action row (the button)

   Rather than editing ~55 blade files, we do it with pure CSS:

   1. For any card that actually ENDS with such an action row (detected with
      :has()), we stop painting the card's white background / ring / shadow on
      the element itself and repaint it via a ::before pseudo that is inset from
      the bottom by a fixed "button zone". Everything above the zone stays a
      normal white card; the trailing action row falls into the un-painted
      bottom zone and therefore renders on the page background.

   2. The action row stays in normal document flow (it is never pulled out with
      negative margins), so the page footer / following content can never
      overlap it - its height is always reserved.

   Scoped to `.content` so it can never affect modals (rendered outside
   `.content`) or the top bar. Only cards whose LAST element is a submit /
   primary button are ever touched - list/DataTable/info widgets are ignored.

   NOTE: :has() may NOT be nested inside :has(). The trailing-action test is
   therefore expressed as a single-level :has() whose argument carries the
   button, e.g. :has(... [class*="text-center"]:last-child > .tw-dw-btn-primary).
   ========================================================================== */

:root {
    /* Height reserved on the page background for the button itself. */
    --fa-btn-zone: 4.5rem;      /* 72px - comfortably fits a *-btn-lg button   */
    /* Empty gap between the white card's bottom edge and the button.         */
    --fa-gap: 1rem;             /* 16px                                        */
    /* Bottom padding of the widget body slot wrapper (.tw-py-2) below the row */
    --fa-body-pad: 0.5rem;      /* 8px                                         */
    /* How far above the card bottom the white background stops.              */
    --fa-band: calc(var(--fa-btn-zone) + var(--fa-gap) + var(--fa-body-pad));

    /* Repainted card chrome (matches tw-ring-1 tw-ring-gray-200 + tw-shadow-sm) */
    --fa-card-radius: 0.75rem;  /* tw-rounded-xl */
    --fa-card-chrome: 0 0 0 1px #e5e7eb, 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

/* ---- 1) Card that ends with an action row: move its white paint to ::before */
.content .module-shared-widget:has(.module-shared-widget-body [class*="text-center"]:last-child > button[type="submit"]),
.content .module-shared-widget:has(.module-shared-widget-body [class*="text-center"]:last-child > input[type="submit"]),
.content .module-shared-widget:has(.module-shared-widget-body [class*="text-center"]:last-child > .tw-dw-btn-primary),
.content .module-shared-widget:has(.module-shared-widget-body [class*="text-center"]:last-child > .btn-primary) {
    position: relative !important;
    background-color: transparent !important;   /* remove tw-bg-white from card */
    background-image: none !important;
    box-shadow: none !important;                /* remove tw-shadow-sm + ring    */
    border-radius: 0 !important;                /* the ::before carries the round */
}

.content .module-shared-widget:has(.module-shared-widget-body [class*="text-center"]:last-child > button[type="submit"])::before,
.content .module-shared-widget:has(.module-shared-widget-body [class*="text-center"]:last-child > input[type="submit"])::before,
.content .module-shared-widget:has(.module-shared-widget-body [class*="text-center"]:last-child > .tw-dw-btn-primary)::before,
.content .module-shared-widget:has(.module-shared-widget-body [class*="text-center"]:last-child > .btn-primary)::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: var(--fa-band);                     /* white stops above the button */
    background: #fff;
    border-radius: var(--fa-card-radius);
    box-shadow: var(--fa-card-chrome);
    z-index: 0;
    pointer-events: none;
}

/* The widget body (and legacy .box-body) paints white with !important in
   ui-consistency-fixes.css - that white sits ON TOP of our ::before backdrop
   and would cover the whole card incl. the button. Neutralise it on matched
   cards so the ::before (which stops above the button) is what actually shows.
   This file loads after ui-consistency-fixes.css and is more specific, so it
   wins the !important cascade. */
.content .module-shared-widget:has(.module-shared-widget-body [class*="text-center"]:last-child > button[type="submit"]) .module-shared-widget-body,
.content .module-shared-widget:has(.module-shared-widget-body [class*="text-center"]:last-child > input[type="submit"]) .module-shared-widget-body,
.content .module-shared-widget:has(.module-shared-widget-body [class*="text-center"]:last-child > .tw-dw-btn-primary) .module-shared-widget-body,
.content .module-shared-widget:has(.module-shared-widget-body [class*="text-center"]:last-child > .btn-primary) .module-shared-widget-body,
.content .module-shared-widget:has(.module-shared-widget-body [class*="text-center"]:last-child > button[type="submit"]) .box-body,
.content .module-shared-widget:has(.module-shared-widget-body [class*="text-center"]:last-child > input[type="submit"]) .box-body,
.content .module-shared-widget:has(.module-shared-widget-body [class*="text-center"]:last-child > .tw-dw-btn-primary) .box-body,
.content .module-shared-widget:has(.module-shared-widget-body [class*="text-center"]:last-child > .btn-primary) .box-body {
    background: transparent !important;
}

/* Keep the real card content painting above the ::before backdrop. */
.content .module-shared-widget:has(.module-shared-widget-body [class*="text-center"]:last-child > button[type="submit"]) > .module-shared-widget-shell,
.content .module-shared-widget:has(.module-shared-widget-body [class*="text-center"]:last-child > input[type="submit"]) > .module-shared-widget-shell,
.content .module-shared-widget:has(.module-shared-widget-body [class*="text-center"]:last-child > .tw-dw-btn-primary) > .module-shared-widget-shell,
.content .module-shared-widget:has(.module-shared-widget-body [class*="text-center"]:last-child > .btn-primary) > .module-shared-widget-shell {
    position: relative;
    z-index: 1;
}

/* ---- 2) The trailing action row: reserve the bottom zone + the top gap ---- */
.content .module-shared-widget-body [class*="text-center"]:last-child:has(> button[type="submit"]),
.content .module-shared-widget-body [class*="text-center"]:last-child:has(> input[type="submit"]),
.content .module-shared-widget-body [class*="text-center"]:last-child:has(> .tw-dw-btn-primary),
.content .module-shared-widget-body [class*="text-center"]:last-child:has(> .btn-primary) {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;                               /* space when 2+ buttons        */
    flex-wrap: wrap;
    min-height: var(--fa-btn-zone);
    margin-top: var(--fa-gap);                  /* the empty gap below the card */
    margin-bottom: 0;
    padding: 0 !important;
    float: none !important;                     /* neutralise Bootstrap col float */
    width: 100% !important;
    position: relative;
    z-index: 1;
}


/* View/report-style transaction modals (sell return, purchase, single
   payment view, ledger discount, etc.) — these are AJAX-loaded into a
   .view_modal/.payment_modal container that can live on many different
   parent pages (sell_return/index, contact/ledger*, contact/show,
   purchase/index, ...), so unlike product.css/contact.css this is loaded
   globally rather than per-page. Mirrors the same reskin pattern already
   used by .product-tailwind-modal / .contact-tailwind-modal: keep every
   functionally-required Bootstrap class (modal, modal-dialog, modal-content,
   modal-header/body/footer, data-dismiss) intact for the existing Bootstrap
   JS modal engine, and only ADD these scoped classes for the visual reskin. */

.report-tailwind-modal .report-modal-dialog {
    width: auto;
    max-width: 64rem;
    margin: 2rem auto;
    padding: 0 1rem;
}

.report-tailwind-modal .report-modal-panel {
    overflow: hidden;
    border: 1px solid #e3e8ef;
    border-radius: 0.875rem;
    background: #fff;
    box-shadow: 0 24px 48px rgba(16, 24, 40, 0.2);
}

.report-tailwind-modal .report-modal-header,
.report-tailwind-modal .report-modal-footer {
    display: flex;
    align-items: center;
    padding: 1rem 1.25rem;
}

.report-tailwind-modal .report-modal-header {
    justify-content: space-between;
    border-bottom: 1px solid #e3e8ef;
}

.report-tailwind-modal .report-modal-header .modal-title {
    text-align: left;
    flex: 1 1 auto;
    margin: 0;
    color: #121926;
    font-size: 1.125rem;
    font-weight: 600;
}

.report-tailwind-modal .report-modal-body {
    padding: 1.25rem;
}

.report-tailwind-modal .report-modal-footer {
    justify-content: flex-end;
    gap: 0.625rem;
    border-top: 1px solid #e3e8ef;
    background: #f8fafc;
}

.report-tailwind-modal .report-modal-close {
    display: inline-flex;
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 0.5rem;
    background: transparent;
    color: #697586;
    font-size: 0.85rem;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.report-tailwind-modal .report-modal-close:hover,
.report-tailwind-modal .report-modal-close:focus {
    background: #eef2f6;
    color: #121926;
    outline: none;
}

/* Info cards (supplier/business/meta address blocks) */
.report-tailwind-modal .report-modal-section-label {
    display: block;
    margin-bottom: 0.35rem;
    color: #697586;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.025em;
    text-transform: uppercase;
}

.report-tailwind-modal address {
    color: #364152;
    font-size: 0.875rem;
    line-height: 1.6;
}

.report-tailwind-modal .row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -0.5rem;
}

.report-tailwind-modal .row > [class^="col-"] {
    padding: 0 0.5rem;
}

/* Line-items / payments tables */
.report-tailwind-modal table.table,
.report-tailwind-modal table.bg-gray {
    width: 100%;
    background: transparent;
}

/* Base cell padding — applies whether or not the table uses
   thead/tbody wrappers (the totals table in purchase show_details.blade.php
   uses bare <tr> rows with no thead/tbody at all). */
.report-tailwind-modal table.table th,
.report-tailwind-modal table.table td,
.report-tailwind-modal table.bg-gray th,
.report-tailwind-modal table.bg-gray td {
    border-top: 1px solid #eef2f6;
    padding: 0.6rem 0.75rem;
    vertical-align: middle;
}

.report-tailwind-modal table.table thead th,
.report-tailwind-modal table.bg-gray thead th,
.report-tailwind-modal table.bg-gray tr.bg-green th {
    border: 0;
    border-bottom: 1px solid #cdd5df;
    background: #f8fafc;
    color: #364152;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.025em;
    text-transform: uppercase;
}

.report-tailwind-modal .well {
    border: 1px solid #e3e8ef;
    border-radius: 0.625rem;
    background: #f8fafc;
    box-shadow: none;
}

/* Forms (add/edit payment, etc.): restyle the existing Bootstrap
   form-group/input-group markup in place, mirroring the same treatment
   used by .contact-tailwind-modal, since these forms share select2/
   datetimepicker/cash-denomination JS hooks that key off the Bootstrap
   classes. */
.report-tailwind-modal .form-group {
    margin-bottom: 1.1rem;
}

.report-tailwind-modal label {
    color: #364152;
    font-size: 0.875rem;
    font-weight: 600;
}

.report-tailwind-modal .form-control {
    min-height: 2.625rem;
    border: 1px solid #cdd5df;
    border-radius: 0.5rem;
    background: #fff;
    color: #121926;
    font-size: 0.875rem;
    padding: 0.55rem 0.75rem;
    box-shadow: none;
}

.report-tailwind-modal .form-control:focus {
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px var(--ui-focus-ring);
}

.report-tailwind-modal .input-group-addon {
    border: 1px solid #cdd5df;
    border-right: 0;
    border-radius: 0.5rem 0 0 0.5rem;
    background: #f8fafc;
    color: #4b5565;
}


.accounting-tailwind-module .accounting-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.accounting-tailwind-module .accounting-page-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.accounting-tailwind-module .accounting-toolbar-row {
    margin-bottom: 18px;
}

.accounting-tailwind-module .accounting-toolbar-actions,
.accounting-tailwind-module .accounting-page-header .text-right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.accounting-toolbar-actions > a.coa-toolbar-action-button,
.accounting-toolbar-actions > a.coa-toolbar-action-button.btn-modal,
.accounting-tailwind-module .accounting-toolbar-actions > a.coa-toolbar-action-button,
.accounting-tailwind-module .accounting-toolbar-actions > a.coa-toolbar-action-button.btn-modal {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    min-height: 32px !important;
    height: 32px !important;
    padding: 6px 16px !important;
    border: 1px solid var(--ui-brand-end) !important;
    border-radius: 4px !important;
    background: linear-gradient(135deg, var(--ui-brand-start) 0%, var(--ui-brand-end) 100%) !important;
    background-image: linear-gradient(135deg, var(--ui-brand-start) 0%, var(--ui-brand-end) 100%) !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

.accounting-toolbar-actions > a.coa-toolbar-action-button:hover,
.accounting-toolbar-actions > a.coa-toolbar-action-button:focus,
.accounting-tailwind-module .accounting-toolbar-actions > a.coa-toolbar-action-button:hover,
.accounting-tailwind-module .accounting-toolbar-actions > a.coa-toolbar-action-button:focus {
    background: linear-gradient(135deg, var(--ui-brand-start) 0%, var(--ui-brand-end) 100%) !important;
    background-image: linear-gradient(135deg, var(--ui-brand-start) 0%, var(--ui-brand-end) 100%) !important;
    color: #fff !important;
    text-decoration: none !important;
}

.accounting-toolbar-actions > a.coa-toolbar-action-button i,
.accounting-tailwind-module .accounting-toolbar-actions > a.coa-toolbar-action-button i {
    width: 14px;
    min-width: 14px;
    text-align: center;
}

.accounting-tailwind-module .accounting-toggle-group {
    display: inline-flex;
    gap: 8px;
    flex-wrap: wrap;
}

.accounting-tailwind-module .accounting-toggle-group > .btn {
    min-width: 120px;
}

/* (Accounting-specific action-dropdown skin removed - the Global Action
   Button & Dropdown Style block is the single source of truth now.) */

.accounting-tailwind-module .btn-group-toggle > .btn,
.accounting-tailwind-module .btn-group-toggle > label.btn {
    border-radius: 9999px !important;
    padding: 10px 16px;
    font-weight: 600;
}

.accounting-tailwind-module .btn-group-toggle > .btn input,
.accounting-tailwind-module .btn-group-toggle > label.btn input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* ── Reports page card grid ── */
.accounting-tailwind-module .accounting-reports-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}

@media (max-width: 991px) {
    .accounting-tailwind-module .accounting-reports-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .accounting-tailwind-module .accounting-reports-grid {
        grid-template-columns: 1fr;
    }
}

/* Report card */
.accounting-tailwind-module .accounting-report-card {
    background: #fff;
    border: 1px solid #dfe6ef;
    border-radius: 18px;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.05);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.2s ease, transform 0.18s ease;
}

.accounting-tailwind-module .accounting-report-card:hover {
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.11);
    transform: translateY(-2px);
}

/* Card header */
.accounting-tailwind-module .accounting-report-card__header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 20px;
    color: #fff;
}

.accounting-tailwind-module .accounting-report-card__header h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
}

.accounting-tailwind-module .accounting-report-card__header i {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.9);
    flex-shrink: 0;
}

/* Header colour variants */
.accounting-tailwind-module .accounting-report-card--warning .accounting-report-card__header  { background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%); }
.accounting-tailwind-module .accounting-report-card--primary .accounting-report-card__header  { background: linear-gradient(135deg, #4f46e5 0%, #2563eb 100%); }
.accounting-tailwind-module .accounting-report-card--success .accounting-report-card__header  { background: linear-gradient(135deg, #10b981 0%, #059669 100%); }
.accounting-tailwind-module .accounting-report-card--info    .accounting-report-card__header  { background: linear-gradient(135deg, #38bdf8 0%, #0ea5e9 100%); }
.accounting-tailwind-module .accounting-report-card--danger  .accounting-report-card__header  { background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); }

/* Card body */
.accounting-tailwind-module .accounting-report-card__body {
    flex: 1;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 14px;
}

.accounting-tailwind-module .accounting-report-card__body > p {
    margin: 0;
    font-size: 13px;
    color: #475467;
    line-height: 1.55;
}

.accounting-tailwind-module .accounting-report-card__actions {
    display: flex;
    justify-content: flex-end;
}

/* ── Report "View Report" action button ── */
.accounting-tailwind-module .accounting-report-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 18px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
    border: none;
    line-height: 1.4;
    cursor: pointer;
    transition: filter 0.15s ease, transform 0.1s ease;
    white-space: nowrap;
}

.accounting-tailwind-module .accounting-report-btn:hover,
.accounting-tailwind-module .accounting-report-btn:focus {
    color: #fff;
    text-decoration: none;
    filter: brightness(1.12);
    transform: translateY(-1px);
}

.accounting-tailwind-module .accounting-report-btn--warning  { background: linear-gradient(135deg, #f59e0b, #f97316); }
.accounting-tailwind-module .accounting-report-btn--primary  { background: linear-gradient(135deg, #4f46e5, #2563eb); }
.accounting-tailwind-module .accounting-report-btn--success  { background: linear-gradient(135deg, #10b981, #059669); }
.accounting-tailwind-module .accounting-report-btn--info     { background: linear-gradient(135deg, #38bdf8, #0ea5e9); }
.accounting-tailwind-module .accounting-report-btn--danger   { background: linear-gradient(135deg, #ef4444, #dc2626); }

.accounting-tailwind-module .txn-page .pos-tab-container {
    background: #fff;
    border: 1px solid #dfe6ef;
    border-radius: 18px;
    box-shadow: none;
    padding: 16px;
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

@media (max-width: 1023px) {
    .accounting-tailwind-module .txn-page .pos-tab-container {
        grid-template-columns: 1fr;
    }
}

.accounting-tailwind-module .txn-page .pos-tab-menu {
    border-right: 1px solid #e5e7eb;
    padding: 0 18px 0 0;
    position: sticky;
    top: 16px;
    align-self: start;
}

.accounting-tailwind-module .txn-page .pos-tab-menu .list-group {
    margin-bottom: 0;
}

.accounting-tailwind-module .txn-page .pos-tab-menu .list-group-item {
    border: none;
    border-radius: 10px !important;
    margin-bottom: 2px;
    padding: 9px 14px;
    transition: all 0.2s ease;
    text-align: left !important;
    color: #374151;
    background: transparent;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.accounting-tailwind-module .txn-page .pos-tab-menu .list-group-item:hover {
    background: #f3f4f6;
    color: #2563eb;
    text-decoration: none;
}

.accounting-tailwind-module .txn-page .pos-tab-menu .list-group-item.active,
.accounting-tailwind-module .txn-page .pos-tab-menu .list-group-item.active:hover,
.accounting-tailwind-module .txn-page .pos-tab-menu .list-group-item.active:focus {
    background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important;
    color: #1d4ed8 !important;
    border-left: 3px solid #3b82f6 !important;
    font-weight: 600;
}

.accounting-tailwind-module .txn-page .pos-tab-menu .list-group-item .menu-icon {
    width: 20px;
    text-align: center;
    font-size: 14px;
    flex-shrink: 0;
    opacity: 0.7;
}

.accounting-tailwind-module .txn-page .pos-tab-menu .list-group-item.active .menu-icon,
.accounting-tailwind-module .txn-page .pos-tab-menu .list-group-item:hover .menu-icon {
    opacity: 1;
}

.accounting-tailwind-module .txn-page .pos-tab .pos-tab-content {
    display: none;
    padding: 0;
}

.accounting-tailwind-module .txn-page .pos-tab .pos-tab-content.active {
    display: block;
    animation: accountingTxnFadeIn 0.25s ease;
}

@keyframes accountingTxnFadeIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.accounting-tailwind-module .txn-page .menu-divider {
    border-top: 1px solid #e5e7eb;
    margin: 14px 10px;
}

.accounting-tailwind-module .txn-page .module-shared-filters[data-filter-expanded='false'] .module-shared-filters-header {
    border-bottom: 0 !important;
}

.accounting-tailwind-module .budget-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 380px));
    gap: 20px;
    padding: 16px 0 8px;
}

.accounting-tailwind-module .budget-fy-card {
    border-radius: 18px;
    border: 1px solid #dfe6ef;
    background: #fff;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.05);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    overflow: hidden;
    margin-bottom: 0;
}

.accounting-tailwind-module .budget-fy-card:hover {
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.1);
    transform: translateY(-2px);
}

.accounting-tailwind-module .budget-fy-card .fy-header {
    background: linear-gradient(135deg, #4f46e5 0%, #2563eb 100%);
    color: #fff;
    padding: 16px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.accounting-tailwind-module .budget-fy-card .fy-header h3,
.accounting-tailwind-module .budget-fy-card .fy-header h3 i {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #fff !important;
}

.accounting-tailwind-module .budget-fy-card .fy-body {
    padding: 18px;
}

.accounting-tailwind-module .budget-fy-card .fy-stat {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px dashed #e5e7eb;
    font-size: 13px;
}

.accounting-tailwind-module .budget-fy-card .fy-stat:last-of-type {
    border-bottom: none;
}

.accounting-tailwind-module .budget-fy-card .fy-stat .label {
    color: #667085;
}

.accounting-tailwind-module .budget-fy-card .fy-stat .value {
    font-weight: 700;
    color: #111827;
}

.accounting-tailwind-module .budget-fy-card .fy-actions {
    padding: 12px 18px;
    background: #f8fafc;
    border-top: 1px solid #e5e7eb;
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

.accounting-tailwind-module #accounts_tree,
.accounting-tailwind-module #accounts_tree_container {
    padding: 8px 2px;
}

.accounting-tailwind-module .jstree-default .jstree-anchor {
    border-radius: 10px;
    padding: 4px 8px;
    color: #334155;
}

.accounting-tailwind-module .jstree-default .jstree-hovered,
.accounting-tailwind-module .jstree-default .jstree-clicked {
    background: #eff6ff;
    box-shadow: none;
    color: #1d4ed8;
}

@media (max-width: 991px) {
    .accounting-tailwind-module .txn-page .pos-tab-menu {
        border-right: 0;
        border-bottom: 1px solid #e5e7eb;
        padding-right: 0;
        padding-bottom: 12px;
        margin-bottom: 12px;
    }

    .accounting-tailwind-module .txn-page .pos-tab-container > [class*='col-'] {
        width: 100%;
    }
}

@media (max-width: 767px) {
    .accounting-tailwind-module .accounting-page-header,
    .accounting-tailwind-module .accounting-page-actions,
    .accounting-tailwind-module .accounting-toolbar-actions,
    .accounting-tailwind-module .accounting-page-header .text-right {
        align-items: stretch;
    }

    .accounting-tailwind-module .accounting-page-actions > .btn,
    .accounting-tailwind-module .accounting-page-actions > .btn-group,
    .accounting-tailwind-module .accounting-toolbar-actions > .btn,
    .accounting-tailwind-module .accounting-toolbar-actions > .coa-toolbar-action-button,
    .accounting-tailwind-module .accounting-toolbar-actions > .btn-group {
        width: 100%;
    }

    .accounting-tailwind-module .txn-page .pos-tab-menu .list-group-item {
        white-space: normal;
    }
}

/* ── Budget period tab navigation ──
   Replaces Bootstrap nav-tabs-custom / nav-justified to avoid cascade
   conflicts with essentials.css flex overrides in the widget container. */
.accounting-tailwind-module .budget-period-nav {
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 0;
    padding: 14px 0 0;
}

.accounting-tailwind-module .budget-period-nav-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.accounting-tailwind-module .budget-period-nav-list > li {
    float: none;
    margin: 0;
}

.accounting-tailwind-module .budget-period-nav-list > li > a {
    display: inline-flex;
    align-items: center;
    padding: 8px 18px;
    border: 1px solid transparent;
    border-radius: 9999px 9999px 0 0;
    color: #475467;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    cursor: pointer;
    position: relative;
    bottom: -1px;
}

.accounting-tailwind-module .budget-period-nav-list > li > a:hover {
    background: #f1f5f9;
    color: #4338ca;
    text-decoration: none;
}

.accounting-tailwind-module .budget-period-nav-list > li.active > a,
.accounting-tailwind-module .budget-period-nav-list > li.active > a:hover,
.accounting-tailwind-module .budget-period-nav-list > li.active > a:focus {
    background: #fff;
    border-color: #e5e7eb #e5e7eb #fff;
    color: #4338ca;
    font-weight: 700;
}

.accounting-tailwind-module .budget-tab-content {
    padding: 16px 0 0;
}

.accounting-tailwind-module .budget-tab-content > .tab-pane {
    display: none;
}

.accounting-tailwind-module .budget-tab-content > .tab-pane.active {
    display: block;
}

/* Budget table scrollable container — replaces Bootstrap .table-responsive
   which only sets overflow-x; adding overflow-y enables inner vertical scroll */
.accounting-tailwind-module .budget-table-scroll {
    overflow-x: auto;
    overflow-y: auto;
    max-height: 480px;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
}

/* Budget form action row — replaces Bootstrap .row/.col-md-12/.text-right */
.accounting-tailwind-module .budget-form-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
}

.accounting-tailwind-module .accounting-no-motion,
.accounting-tailwind-module .accounting-no-motion *,
.accounting-tailwind-module .accounting-no-motion *::before,
.accounting-tailwind-module .accounting-no-motion *::after {
    animation: none !important;
    scroll-behavior: auto !important;
    transition: none !important;
}

/* ── COA filter row: always 3 equal columns ── */
.accounting-tailwind-module .coa-filters-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

@media (max-width: 767px) {
    .accounting-tailwind-module .accounting-tree-toolbar {
        align-items: stretch;
        flex-direction: column;
    }
    .accounting-tailwind-module .accounting-tree-toolbar-search {
        flex-basis: auto;
        margin-left: 0;
        max-width: none;
        width: 100%;
    }
    .accounting-tailwind-module .coa-filters-grid {
        grid-template-columns: 1fr;
    }
}

/* ─────────────────────────────────────────────────────────────────────
   COA Tabular Table — globally reusable within the accounting module
   ───────────────────────────────────────────────────────────────────── */

/* (COA action-toggle override removed - identical to the Global Action
   Button & Dropdown Style block, which already applies here.) */

/* Table structure */
.accounting-tailwind-module .coa-accounts-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.accounting-tailwind-module .coa-th {
    padding: 10px 12px;
    background: #f8fafc;
    color: #364152;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-bottom: 1px solid #e3e8ef;
    white-space: nowrap;
}

.accounting-tailwind-module .coa-td {
    padding: 10px 12px;
    border-bottom: 1px solid #eef2f6;
    color: #364152;
    vertical-align: middle;
}

/* Parent rows: subtle tinted background + bold text */
.accounting-tailwind-module .coa-parent-row > .coa-td {
    background: #f0f4f7;
    font-weight: 600;
}

.accounting-tailwind-module .coa-parent-row:hover > .coa-td,
.accounting-tailwind-module .coa-child-row:hover > .coa-td {
    background: #f1f5f9;
}

/* Status badges */
.accounting-tailwind-module .coa-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.accounting-tailwind-module .coa-badge-active {
    background: #dcfce7;
    color: #15803d;
    border: 1px solid #bbf7d0;
}

.accounting-tailwind-module .coa-badge-inactive {
    background: #fee2e2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}

/* ── Show-entries toolbar ── */
.accounting-tailwind-module .coa-table-top-bar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 10px 4px 10px;
}

.accounting-tailwind-module .coa-show-entries {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #4b5565;
    font-weight: 500;
    cursor: default;
}

.accounting-tailwind-module .coa-per-page-select {
    height: 2.1rem;
    padding: 0 8px;
    border: 1px solid #cdd5df;
    border-radius: 6px;
    background: #fff;
    color: #364152;
    font-size: 13px;
    font-weight: 500;
    outline: none;
    cursor: pointer;
    transition: border-color 0.15s;
}

.accounting-tailwind-module .coa-per-page-select:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

/* ── Pagination bottom bar ── */
.accounting-tailwind-module .coa-table-bottom-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 4px 4px;
    border-top: 1px solid #eef2f6;
    margin-top: 4px;
}

.accounting-tailwind-module .coa-page-info {
    font-size: 13px;
    color: #4b5565;
}

.accounting-tailwind-module .coa-pagination {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.accounting-tailwind-module .coa-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 10px;
    border: 1px solid #cdd5df;
    border-radius: 6px;
    background: #fff;
    color: #364152;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    line-height: 1;
}

.accounting-tailwind-module .coa-page-btn:hover:not([disabled]):not(.active) {
    border-color: #3b82f6;
    color: #1d4ed8;
    background: #eff6ff;
}

.accounting-tailwind-module .coa-page-btn.active {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
    font-weight: 700;
    cursor: default;
}

.accounting-tailwind-module .coa-page-btn[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
}

.accounting-tailwind-module .coa-page-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 34px;
    color: #9aa5b4;
    font-size: 13px;
}

@media (max-width: 767px) {
    .accounting-tailwind-module .coa-table-bottom-bar {
        justify-content: center;
    }

    .accounting-tailwind-module .coa-pagination {
        justify-content: center;
    }
}


.booking-tailwind-page .booking-card {
    background: #fff;
    border: 1px solid #e3e8ef;
    border-radius: 0.75rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}

.booking-page-header {
    width: 100%;
}

.booking-page-header-inner {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.booking-add-button {
    margin-left: auto;
    white-space: nowrap;
}

.booking-calendar-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

.booking-field {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.375rem;
}

.booking-field label,
.booking-tailwind-modal .booking-field label {
    margin: 0;
    color: #364152;
    font-size: 0.875rem;
    font-weight: 600;
}

.booking-location-filter {
    max-width: 36rem;
}

.booking-input {
    width: 100%;
    min-height: 2.625rem;
    border: 1px solid #cdd5df;
    border-radius: 0.5rem;
    background: #fff;
    color: #121926;
    font-size: 0.875rem;
    line-height: 1.25rem;
    padding: 0.625rem 0.75rem;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.booking-input:focus {
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px var(--ui-focus-ring);
}

.booking-input[readonly] {
    background: #f8fafc;
    cursor: pointer;
}

textarea.booking-input {
    min-height: 5.5rem;
    resize: vertical;
}

.booking-input-icon {
    position: relative;
    min-width: 0;
}

.booking-input-icon > i {
    position: absolute;
    top: 50%;
    left: 0.75rem;
    z-index: 2;
    color: #697586;
    transform: translateY(-50%);
    pointer-events: none;
}

.booking-input-icon > .booking-input {
    padding-left: 2.35rem !important;
}

/* Same fix as .repair-input-icon: the Vue picker's real input is a
   grandchild ([data-vpicker] > .au-native-picker > input), not the direct
   child this rule used to assume, so the icon overlapped the field text. */
.booking-input-icon > [data-vpicker] {
    display: block;
    width: 100%;
}

.booking-input-icon .au-native-picker {
    display: block;
    width: 100%;
}

.booking-input-icon .au-native-picker > .booking-input {
    padding-left: 2.35rem !important;
}

.booking-form-grid,
.booking-details-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

.booking-status-list {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.booking-status {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    color: #364152;
    font-size: 0.875rem;
    font-weight: 600;
}

.booking-status > span {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 999px;
}

.booking-status-waiting > span { background: #eab308; }
.booking-status-booked > span { background: #0ea5e9; }
.booking-status-completed > span { background: #16a34a; }
.booking-status-cancelled > span { background: #dc2626; }

.booking-tailwind-page .select2-container,
.booking-tailwind-modal .select2-container {
    width: 100% !important;
}

.booking-tailwind-page .select2-container .select2-selection--single,
.booking-tailwind-modal .select2-container .select2-selection--single {
    height: 2.625rem;
    border: 1px solid #cdd5df;
    border-radius: 0.5rem;
    background: #fff;
}

.booking-tailwind-page .select2-selection--single .select2-selection__rendered,
.booking-tailwind-modal .select2-selection--single .select2-selection__rendered {
    height: 2.5rem;
    color: #121926;
    line-height: 2.5rem;
    padding-left: 0.75rem;
}

.booking-tailwind-page .select2-selection--single .select2-selection__arrow,
.booking-tailwind-modal .select2-selection--single .select2-selection__arrow {
    height: 2.5rem;
    right: 0.5rem;
}

.booking-input-icon .select2-container .select2-selection--single .select2-selection__rendered,
.booking-input-icon .select2-selection--single .select2-selection__rendered {
    padding-left: 2.35rem !important;
}

.booking-input-icon .select2-container .select2-selection--single .select2-selection__arrow,
.booking-input-icon .select2-selection--single .select2-selection__arrow {
    right: 0.5rem;
}

.booking-customer-control .booking-input-icon .select2-container .select2-selection--single {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.booking-tailwind-page .dataTables_wrapper .dataTables_info,
.booking-tailwind-page .dataTables_wrapper .dataTables_paginate {
    margin: 0.75rem 0 0;
    color: #4b5565;
}

.booking-tailwind-page table.dataTable {
    width: 100% !important;
    border: 0;
}

.booking-tailwind-page table.dataTable thead th {
    border: 0;
    border-bottom: 1px solid #cdd5df;
    background: #f8fafc;
    color: #364152;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.025em;
    padding: 0.75rem;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.booking-tailwind-page table.dataTable tbody td {
    border: 0;
    border-bottom: 1px solid #eef2f6;
    color: #364152;
    padding: 0.75rem;
    vertical-align: middle;
}

.booking-tailwind-page table.dataTable tbody tr:hover {
    background: #f8fafc;
}

.booking-tailwind-page .pagination {
    display: flex;
    gap: 0.25rem;
    margin: 0;
}

.booking-tailwind-page .pagination > li > a,
.booking-tailwind-page .pagination > li > span {
    min-width: 2.25rem;
    border: 1px solid #cdd5df;
    border-radius: 0.5rem;
    color: #364152;
    padding: 0.45rem 0.7rem;
    text-align: center;
}

.booking-tailwind-page .pagination > .active > a,
.booking-tailwind-page .pagination > .active > span {
    border-color: var(--brand-600);
    background: var(--brand-600);
    color: #fff;
}

.booking-tailwind-page .fc-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.booking-tailwind-page .fc-toolbar h2 {
    color: #121926;
    font-size: 1.125rem;
    font-weight: 700;
}

.booking-tailwind-page .fc-button {
    min-height: 2.25rem;
    border: 1px solid #cdd5df;
    border-radius: 0.5rem;
    background: #fff;
    background-image: none;
    color: #364152;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    text-shadow: none;
}

.booking-tailwind-page .fc-button:hover,
.booking-tailwind-page .fc-button:focus {
    border-color: #a4acb9;
    background: #f8fafc;
    color: #121926;
}

.booking-tailwind-page .fc-state-active,
.booking-tailwind-page .fc-state-down {
    border-color: var(--brand-600);
    background: var(--brand-600);
    color: #fff;
}

.booking-tailwind-page .fc-view-container {
    overflow-x: auto;
}

.booking-tailwind-page .fc-view {
    min-width: 42rem;
}

.booking-tailwind-page .fc-unthemed th,
.booking-tailwind-page .fc-unthemed td,
.booking-tailwind-page .fc-unthemed thead,
.booking-tailwind-page .fc-unthemed tbody,
.booking-tailwind-page .fc-unthemed .fc-divider,
.booking-tailwind-page .fc-unthemed .fc-row,
.booking-tailwind-page .fc-unthemed .fc-content,
.booking-tailwind-page .fc-unthemed .fc-popover,
.booking-tailwind-page .fc-unthemed .fc-list-view,
.booking-tailwind-page .fc-unthemed .fc-list-heading td {
    border-color: #e3e8ef;
}

.booking-tailwind-page .fc-day-header {
    background: #f8fafc;
    color: #364152;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.625rem;
    text-transform: uppercase;
}

.booking-tailwind-page .fc-event {
    border: 0;
    border-radius: 0.375rem;
    padding: 0.2rem 0.35rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.12);
}

.booking-modal-dialog {
    width: auto;
    max-width: 52rem;
    margin: 2rem auto;
    padding: 0 1rem;
}

.booking-modal-panel {
    overflow: hidden;
    border: 0;
    background: #fff;
}

.booking-modal-header {
    border: 0 !important;
    outline: 0;
    box-shadow: none;
}

.booking-modal-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem;
}

.booking-modal-close {
    display: inline-flex;
    width: 2.25rem;
    height: 2.25rem;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 0.5rem;
    background: transparent;
    color: rgba(255, 255, 255, 0.9);
}

.booking-modal-close:hover,
.booking-modal-close:focus {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    outline: none;
}

.booking-customer-control {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 2.625rem;
}

.booking-customer-control .booking-input {
    border-radius: 0.5rem 0 0 0.5rem;
}

.booking-add-customer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #cdd5df;
    border-left: 0;
    border-radius: 0 0.5rem 0.5rem 0;
    background: #f8fafc;
    color: var(--brand-600);
    font-size: 1.125rem;
}

.booking-add-customer:hover {
    background: #eef2f6;
}

.booking-checkbox {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    color: #364152;
    font-size: 0.875rem;
    font-weight: 600;
}

.booking-restaurant-fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

.booking-detail-list {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    margin: 0;
}

.booking-detail-list > div {
    display: grid;
    grid-template-columns: minmax(8rem, 0.65fr) minmax(0, 1fr);
    gap: 0.75rem;
}

.booking-detail-list dt {
    color: #697586;
    font-size: 0.8125rem;
    font-weight: 600;
}

.booking-detail-list dd {
    margin: 0;
    color: #121926;
    font-size: 0.875rem;
    font-weight: 500;
}

.booking-status-actions,
.booking-status-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.booking-status-actions {
    padding-top: 0.25rem;
}

.booking-status-form {
    flex: 1;
}

@media (min-width: 768px) {
    .booking-form-grid,
    .booking-details-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .booking-restaurant-fields > [class*="col-"] {
        flex: 1 1 calc(50% - 0.5rem);
        width: auto;
    }

    .booking-restaurant-fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .booking-status-actions,
    .booking-status-form {
        flex-direction: row;
        align-items: center;
    }
}

@media (min-width: 1024px) {
    .booking-calendar-layout {
        grid-template-columns: minmax(0, 1fr) 16rem;
    }
}


/* ProductCatalogue module - admin "Generate QR" page Tailwind conversion.
   Mirrors the structural pattern used elsewhere (public\css\tailwind\expense.css,
   stock_adjustment.css, repair.css): custom classes (catqr-card, catqr-form-grid,
   catqr-field, catqr-input, catqr-select, catqr-check-field) replace Bootstrap
   row, col-N, form-group, form-control, checkbox classes in markup, scoped under
   .catqr-tailwind-page. Prefixed "catqr-" (not "catalogue-") to avoid colliding
   with the customer-facing storefront's own "catalogue-*" class names. */

.catqr-tailwind-page .catqr-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

@media (min-width: 768px) {
    .catqr-tailwind-page .catqr-layout {
        grid-template-columns: 7fr 5fr;
    }
}

.catqr-form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

.catqr-field {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.375rem;
}

.catqr-field label {
    margin: 0;
    color: #364152;
    font-size: 0.875rem;
    font-weight: 600;
}

.catqr-check-field {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.catqr-input,
.catqr-select {
    width: 100%;
    min-height: 2.625rem;
    border: 1px solid #cdd5df;
    border-radius: 0.5rem;
    background: #fff;
    color: #121926;
    font-size: 0.875rem;
    line-height: 1.25rem;
    padding: 0.625rem 0.75rem;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.catqr-input:focus,
.catqr-select:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.16);
}

.catqr-help {
    margin: 0;
    color: #697586;
    font-size: 0.75rem;
    line-height: 1.125rem;
}

.catqr-instruction-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.875rem;
}

.catqr-instruction-table tr:nth-child(odd) td {
    background: #f8fafc;
}

.catqr-instruction-table td {
    border-bottom: 1px solid #eef2f6;
    color: #364152;
    padding: 0.6rem 0.75rem;
    vertical-align: top;
}

.catqr-instruction-table td:first-child {
    width: 1.75rem;
    font-weight: 700;
    color: #4f46e5;
    text-align: center;
}

.catqr-setting-options {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 0.5rem 0 1rem;
}


/* Clinic module Tailwind conversion.
   Mirrors the structural pattern used for Repair/Booking/Gym modules:
   custom classes (clinic-card, clinic-field, clinic-input, clinic-select,
   clinic-table, clinic-badge, clinic-modal-*) replace Bootstrap row, col-N,
   form-group, form-control, table-bordered, badge, alert classes in markup,
   scoped under .clinic-tailwind-page (full pages) and .clinic-tailwind-modal
   (ajax-loaded modal content). Bootstrap structural/JS-hook classes
   (nav-tabs, tab-content, tab-pane, modal, data-toggle) are kept as-is and
   only restyled additively. */

.clinic-card {
    background: #fff;
    border: 1px solid #e3e8ef;
    border-radius: 0.75rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}

.clinic-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    border-bottom: 1px solid #e3e8ef;
    padding: 0.9rem 1.25rem;
}

.clinic-card-header h1,
.clinic-card-header h2,
.clinic-card-header h3,
.clinic-card-header h4,
.clinic-card-header h5 {
    margin: 0;
    color: #121926;
    font-size: 1rem;
    font-weight: 700;
}

.clinic-card-body {
    padding: 1.25rem;
}

/* Grids that replace Bootstrap .row > .col-md-N inside Clinic forms/filters */
.clinic-filter-grid,
.clinic-form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

.clinic-field {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.375rem;
}

.clinic-field-wide {
    grid-column: span 2;
}

.clinic-field label,
.clinic-label {
    margin: 0;
    color: #364152;
    font-size: 0.875rem;
    font-weight: 600;
}

.clinic-input,
.clinic-select,
.clinic-textarea,
.clinic-file-input {
    width: 100%;
    min-height: 2.625rem;
    border: 1px solid #cdd5df;
    border-radius: 0.5rem;
    background: #fff;
    color: #121926;
    font-size: 0.875rem;
    line-height: 1.25rem;
    padding: 0.625rem 0.75rem;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.clinic-input:focus,
.clinic-select:focus,
.clinic-textarea:focus,
.clinic-file-input:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.16);
}

.clinic-input[readonly] {
    background: #f8fafc;
    cursor: pointer;
}

.clinic-textarea {
    min-height: 5.5rem;
    resize: vertical;
}

.clinic-file-input {
    padding: 0.45rem 0.625rem;
}

.clinic-file-input::file-selector-button {
    margin: -0.45rem 0.75rem -0.45rem -0.625rem;
    border: 0;
    border-right: 1px solid #cdd5df;
    background: #f8fafc;
    color: #364152;
    padding: 0.65rem 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

.clinic-help {
    margin: 0;
    color: #697586;
    font-size: 0.75rem;
    line-height: 1.125rem;
}

.clinic-input-icon {
    position: relative;
    min-width: 0;
}

.clinic-input-icon > i {
    position: absolute;
    top: 50%;
    left: 0.75rem;
    z-index: 2;
    color: #697586;
    transform: translateY(-50%);
    pointer-events: none;
}

.clinic-input-icon > .clinic-input,
.clinic-input-icon > .clinic-select {
    padding-left: 2.35rem;
}

.clinic-input-group {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
}

.clinic-input-group > .clinic-input-icon,
.clinic-input-group > .clinic-input,
.clinic-input-group > .clinic-select {
    flex: 1 1 auto;
    min-width: 0;
}

.clinic-input-group > button,
.clinic-input-group > a.tw-dw-btn {
    flex: 0 0 auto;
    align-self: stretch;
    height: auto;
    min-height: 2.625rem;
}

/* Buttons (additive variants used alongside / instead of plain Bootstrap btn) */
.clinic-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    border: 1px solid transparent;
    border-radius: 9999px;
    padding: 0.55rem 1.1rem;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25rem;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.clinic-btn-sm {
    padding: 0.35rem 0.8rem;
    font-size: 0.8125rem;
}

.clinic-btn-primary {
    border-color: #4f46e5;
    background: #4f46e5;
    color: #fff;
}

.clinic-btn-primary:hover,
.clinic-btn-primary:focus {
    background: #4338ca;
    border-color: #4338ca;
    color: #fff;
}

.clinic-btn-secondary {
    border-color: #cdd5df;
    background: #fff;
    color: #364152;
}

.clinic-btn-secondary:hover,
.clinic-btn-secondary:focus {
    background: #f8fafc;
    border-color: #a4acb9;
    color: #121926;
}

.clinic-btn-danger {
    border-color: #dc2626;
    background: #dc2626;
    color: #fff;
}

.clinic-btn-danger:hover,
.clinic-btn-danger:focus {
    background: #b91c1c;
    border-color: #b91c1c;
    color: #fff;
}

/* Badges (appointment / lab / queue statuses) */
.clinic-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    padding: 0.2rem 0.65rem;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.1rem;
    white-space: nowrap;
}

.clinic-badge-success {
    background: #dcfce7;
    color: #15803d;
}

.clinic-badge-warning {
    background: #fef3c7;
    color: #b45309;
}

.clinic-badge-danger {
    background: #fee2e2;
    color: #b91c1c;
}

.clinic-badge-info {
    background: #e0f2fe;
    color: #0369a1;
}

.clinic-badge-primary {
    background: #e0e7ff;
    color: #4338ca;
}

.clinic-badge-secondary {
    background: #f1f5f9;
    color: #475569;
}

/* Alerts */
.clinic-alert {
    border-radius: 0.625rem;
    border: 1px solid transparent;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
}

.clinic-alert-success {
    border-color: #bbf7d0;
    background: #f0fdf4;
    color: #15803d;
}

.clinic-alert-warning {
    border-color: #fde68a;
    background: #fffbeb;
    color: #b45309;
}

.clinic-alert-danger {
    border-color: #fecaca;
    background: #fef2f2;
    color: #b91c1c;
}

.clinic-alert-info {
    border-color: #bae6fd;
    background: #f0f9ff;
    color: #0369a1;
}

/* Tables */
.clinic-tailwind-page table.dataTable,
.clinic-table {
    width: 100% !important;
    border: 0;
    border-collapse: collapse;
    text-align: left;
}

.clinic-tailwind-page table.dataTable thead th,
.clinic-table thead th {
    border: 0;
    border-bottom: 1px solid #cdd5df;
    background: #f8fafc;
    color: #364152;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.025em;
    padding: 0.75rem;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.clinic-tailwind-page table.dataTable tbody td,
.clinic-table tbody td {
    border: 0;
    border-bottom: 1px solid #eef2f6;
    color: #364152;
    padding: 0.75rem;
    vertical-align: middle;
}

.clinic-tailwind-page table.dataTable tbody tr:hover,
.clinic-table tbody tr:hover {
    background: #f8fafc;
}

.clinic-tailwind-page .dataTables_wrapper .dataTables_length,
.clinic-tailwind-page .dataTables_wrapper .dataTables_filter,
.clinic-tailwind-page .dataTables_wrapper .dataTables_info,
.clinic-tailwind-page .dataTables_wrapper .dataTables_paginate {
    margin: 0.5rem 0;
    color: #4b5565;
}

.clinic-tailwind-page .dataTables_wrapper .dataTables_length select,
.clinic-tailwind-page .dataTables_wrapper .dataTables_filter input {
    min-height: 2.25rem;
    border: 1px solid #cdd5df;
    border-radius: 0.5rem;
    background: #fff;
    padding: 0.375rem 0.625rem;
    outline: none;
}

.clinic-tailwind-page .pagination {
    display: flex;
    gap: 0.25rem;
    margin: 0;
}

.clinic-tailwind-page .pagination > li > a,
.clinic-tailwind-page .pagination > li > span {
    min-width: 2.25rem;
    border: 1px solid #cdd5df;
    border-radius: 0.5rem;
    color: #364152;
    padding: 0.45rem 0.7rem;
    text-align: center;
}

.clinic-tailwind-page .pagination > .active > a,
.clinic-tailwind-page .pagination > .active > span {
    border-color: #4f46e5;
    background: #4f46e5;
    color: #fff;
}

/* select2 chrome to match clinic-input height */
.clinic-tailwind-page .select2-container,
.clinic-tailwind-modal .select2-container {
    width: 100% !important;
}

.clinic-tailwind-page .select2-container .select2-selection--single,
.clinic-tailwind-modal .select2-container .select2-selection--single {
    height: 2.625rem;
    border: 1px solid #cdd5df;
    border-radius: 0.5rem;
    background: #fff;
}

.clinic-tailwind-page .select2-container .select2-selection--single .select2-selection__rendered,
.clinic-tailwind-modal .select2-container .select2-selection--single .select2-selection__rendered {
    height: 2.5rem;
    color: #121926;
    line-height: 2.5rem;
    padding-left: 0.75rem;
}

.clinic-tailwind-page .select2-container .select2-selection--single .select2-selection__arrow,
.clinic-tailwind-modal .select2-container .select2-selection--single .select2-selection__arrow {
    height: 2.5rem;
    right: 0.5rem;
}

.clinic-tailwind-page .select2-container--focus .select2-selection--single,
.clinic-tailwind-page .select2-container--open .select2-selection--single,
.clinic-tailwind-modal .select2-container--focus .select2-selection--single,
.clinic-tailwind-modal .select2-container--open .select2-selection--single {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.16);
}

/* nav-tabs chrome (Bootstrap nav nav-tabs / tab-content / tab-pane kept as
   structural+JS hooks; this only restyles the visual chrome additively). */
.clinic-nav-tabs.nav-tabs {
    display: flex;
    gap: 0.25rem;
    border-bottom: 1px solid #e3e8ef;
    flex-wrap: wrap;
}

.clinic-nav-tabs.nav-tabs > li {
    display: block;
    float: none;
    width: auto;
}

.clinic-nav-tabs.nav-tabs > li > a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1rem;
    border-radius: 0.5rem 0.5rem 0 0;
    color: #4b5565;
    font-weight: 600;
    font-size: 0.875rem;
}

.clinic-nav-tabs.nav-tabs > li.active > a {
    background: #eef2ff;
    color: #4338ca;
}

/* Modal (Bootstrap .modal.fade outer kept; only inner classes restyled). */
.clinic-modal-dialog {
    width: auto;
    max-width: 52rem;
    margin: 2rem auto;
    padding: 0 1rem;
}

.clinic-modal-panel {
    overflow: hidden;
    border: 1px solid #e3e8ef;
    border-radius: 0.875rem;
    background: #fff;
    box-shadow: 0 24px 48px rgba(16, 24, 40, 0.2);
}

.clinic-modal-header,
.clinic-modal-footer {
    display: flex;
    align-items: center;
    padding: 1rem 1.25rem;
}

.clinic-modal-header {
    justify-content: space-between;
    border-bottom: 1px solid #e3e8ef;
}

.clinic-modal-header .modal-title {
    text-align: left;
    flex: 1 1 auto;
}

.clinic-modal-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem;
}

.clinic-modal-footer {
    justify-content: flex-end;
    gap: 0.625rem;
    border-top: 1px solid #e3e8ef;
    background: #f8fafc;
}

.clinic-modal-close {
    display: inline-flex;
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 0.5rem;
    background: transparent;
    color: #697586;
    font-size: 0.85rem;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.clinic-modal-close:hover,
.clinic-modal-close:focus {
    background: #eef2f6;
    color: #121926;
    outline: none;
}

.clinic-modal-panel .modal-title {
    margin: 0;
    color: #121926;
    font-size: 1.125rem;
    font-weight: 600;
}

/* Appointments calendar (FullCalendar v5 chrome, mirrors booking.css). */
.clinic-tailwind-page .fc-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.clinic-tailwind-page .fc-toolbar h2 {
    color: #121926;
    font-size: 1.125rem;
    font-weight: 700;
}

.clinic-tailwind-page .fc-button {
    min-height: 2.25rem;
    border: 1px solid #cdd5df;
    border-radius: 0.5rem;
    background: #fff;
    background-image: none;
    color: #364152;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    text-shadow: none;
}

.clinic-tailwind-page .fc-button:hover,
.clinic-tailwind-page .fc-button:focus {
    border-color: #a4acb9;
    background: #f8fafc;
    color: #121926;
}

.clinic-tailwind-page .fc-state-active,
.clinic-tailwind-page .fc-state-down {
    border-color: #4f46e5;
    background: #4f46e5;
    color: #fff;
}

.clinic-tailwind-page .fc-view-container {
    overflow-x: auto;
}

.clinic-tailwind-page .fc-view {
    min-width: 42rem;
}

.clinic-tailwind-page .fc-day-header {
    background: #f8fafc;
    color: #364152;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.625rem;
    text-transform: uppercase;
}

.clinic-tailwind-page .fc-event {
    border: 0;
    border-radius: 0.375rem;
    padding: 0.2rem 0.35rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.12);
}

/* Queue board (queue/index.blade.php admin-side queue list; the public
   queue/display.blade.php TV board has its own standalone inline <style>
   and is intentionally left untouched). */
.clinic-queue-board {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.875rem;
}

.clinic-queue-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    border: 1px solid #e3e8ef;
    border-radius: 0.75rem;
    background: #fff;
    padding: 0.875rem 1.1rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}

.clinic-queue-card-number {
    color: #121926;
    font-size: 1.5rem;
    font-weight: 800;
}

.clinic-queue-card-name {
    color: #364152;
    font-size: 0.875rem;
    font-weight: 600;
}

.clinic-queue-card-meta {
    color: #697586;
    font-size: 0.75rem;
}

.clinic-queue-card-urgent {
    border-color: #fecaca;
    background: #fef2f2;
}

.clinic-queue-card-emergency {
    border-color: #fca5a5;
    background: #fee2e2;
}

@media (min-width: 768px) {
    .clinic-filter-grid,
    .clinic-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .clinic-queue-board {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .clinic-queue-board {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1280px) {
    .clinic-filter-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

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


.contact-tailwind-page .dataTables_wrapper .dataTables_length,
.contact-tailwind-page .dataTables_wrapper .dataTables_filter,
.contact-tailwind-page .dataTables_wrapper .dataTables_info,
.contact-tailwind-page .dataTables_wrapper .dataTables_paginate {
    margin: 0.5rem 0;
    color: #4b5565;
}

.contact-tailwind-page .dataTables_wrapper .dataTables_length select,
.contact-tailwind-page .dataTables_wrapper .dataTables_filter input {
    min-height: 2.25rem;
    border: 1px solid #cdd5df;
    border-radius: 0.5rem;
    background: #fff;
    padding: 0.375rem 0.625rem;
    outline: none;
}

.contact-tailwind-page table.dataTable {
    width: 100% !important;
    border: 0;
}

.contact-tailwind-page table.dataTable thead th {
    border: 0;
    border-bottom: 1px solid #cdd5df;
    background: #f8fafc;
    color: #364152;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.025em;
    padding: 0.65rem 0.75rem;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.contact-tailwind-page table.dataTable tbody td {
    border: 0;
    border-bottom: 1px solid #eef2f6;
    color: #364152;
    padding: 0.6rem 0.75rem;
    vertical-align: top;
}

.contact-tailwind-page table.dataTable tbody tr:hover {
    background: #f8fafc;
}

.contact-tailwind-page table.dataTable tfoot td {
    border-top: 1px solid #cdd5df;
    background: #f8fafc;
    color: #121926;
    font-weight: 600;
    padding: 0.6rem 0.75rem;
}

/* (Page-scoped action-dropdown skin removed - see the Global Action Button
   & Dropdown Style block.) */

.contact-tailwind-page .pagination {
    display: flex;
    gap: 0.25rem;
    margin: 0;
}

.contact-tailwind-page .pagination > li > a,
.contact-tailwind-page .pagination > li > span {
    min-width: 2.25rem;
    border: 1px solid #cdd5df;
    border-radius: 0.5rem;
    color: #364152;
    padding: 0.45rem 0.7rem;
    text-align: center;
}

.contact-tailwind-page .pagination > .active > a,
.contact-tailwind-page .pagination > .active > span {
    border-color: var(--brand-600);
    background: var(--brand-600);
    color: #fff;
}

/* Forms (create/edit): restyle the existing Bootstrap grid/checkbox markup
   in place rather than rewriting every col-md-N/form-group block, since
   several are JS show/hide targets and select2/iCheck hooks. */
.contact-tailwind-form .box-body {
    padding: 1.25rem 1.5rem;
}

.contact-tailwind-form .form-group {
    margin-bottom: 1.1rem;
}

.contact-tailwind-form label {
    color: #364152;
    font-size: 0.875rem;
    font-weight: 600;
}

.contact-tailwind-form .form-control {
    min-height: 2.625rem;
    border: 1px solid #cdd5df;
    border-radius: 0.5rem;
    background: #fff;
    color: #121926;
    font-size: 0.875rem;
    padding: 0.55rem 0.75rem;
    box-shadow: none;
}

.contact-tailwind-form .form-control:focus {
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px var(--ui-focus-ring);
}

.contact-tailwind-form .checkbox {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: nowrap;
}

.contact-tailwind-form .checkbox br {
    display: none;
}

.contact-tailwind-form .checkbox label {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    font-weight: 500;
}

.contact-tailwind-form .checkbox > i {
    flex-shrink: 0;
}

.contact-tailwind-form h4,
.contact-tailwind-page h4 {
    color: #121926;
    font-size: 0.95rem;
    font-weight: 700;
}

.contact-tailwind-page .select2-container {
    width: 100% !important;
}

.contact-tailwind-page .select2-container .select2-selection--single {
    height: 2.625rem;
    border: 1px solid #cdd5df;
    border-radius: 0.5rem;
    background: #fff;
}

.contact-tailwind-page .select2-selection--single .select2-selection__rendered {
    height: 2.5rem;
    color: #121926;
    line-height: 2.5rem;
    padding-left: 0.75rem;
}

.contact-tailwind-page .select2-selection--single .select2-selection__arrow {
    height: 2.5rem;
    right: 0.5rem;
}

/* Show page: profile / info cards + tabs */

/* Bootstrap's .nav-justified sets `display:table-cell; width:1%` on each
   <li>. The table-cell display gets blockified once the parent above
   becomes a flex container, but the width:1% survives — squeezing every
   tab down to ~1% width and making their (nowrap) labels overflow and
   stack on top of each other. Override both so the tabs lay out normally. */

.contact-tailwind-page .info-box,
.contact-tailwind-page .box.box-solid {
    border: 1px solid #e3e8ef;
    border-radius: 0.75rem;
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}

.contact-tailwind-page .box.box-solid > .box-header {
    border-bottom: 1px solid #eef2f6;
}

.contact-tailwind-page {
    overflow-x: hidden;
}

.contact-tailwind-page .au-page-header {
    margin-bottom: 1.75rem;
}

.contact-tailwind-page > .au-card + .au-card {
    margin-top: var(--au-space-6);
}

.contact-tailwind-page .au-page-header__selector {
    flex-basis: 26rem;
    max-width: 26rem;
    width: 26rem;
}

.contact-tailwind-page .au-page-header__selector select#contact_id.select2:not(.select2-hidden-accessible) {
    opacity: 0;
}

.contact-tailwind-page .au-page-header__selector .select2-container {
    animation: none !important;
    transition: none !important;
    width: 100% !important;
}

.contact-tailwind-page .au-page-header__selector .select2-selection--single {
    animation: none !important;
    transition: none !important;
}

.contact-tailwind-page .contact-ledger-tab,
.contact-tailwind-page #contact_ledger_div,
.contact-tailwind-page .contact-ledger-result {
    width: 100%;
}

.contact-tailwind-page .au-tabs__nav--modern {
    overflow: visible;
}

.contact-tailwind-page .au-tabs__content,
.contact-tailwind-page .au-tabs__pane,
.contact-tailwind-page #payments_tab,
.contact-tailwind-page #activities_tab,
.contact-tailwind-page #contact_payments_div {
    max-width: 100%;
    min-width: 0;
    width: 100%;
}

.contact-tailwind-page #contact_payments_div {
    overflow-x: auto;
}

.contact-tailwind-page #contact_payments_table,
.contact-tailwind-page #activities_tab .activity-log-table {
    table-layout: auto;
    width: 100% !important;
}

.contact-tailwind-page #contact_payments_table th,
.contact-tailwind-page #contact_payments_table td,
.contact-tailwind-page #activities_tab .activity-log-table th,
.contact-tailwind-page #activities_tab .activity-log-table td {
    vertical-align: top;
}

.contact-tailwind-page .contact-supplier-purchase-layout,
.contact-tailwind-page .contact-supplier-stock-layout {
    width: 100%;
}

.contact-tailwind-page .contact-supplier-filter {
    min-width: 0;
}

.contact-tailwind-page .contact-supplier-table-area {
    grid-column: 1 / -1;
    min-width: 0;
    width: 100%;
}

.contact-tailwind-page .contact-supplier-table-area .table-responsive,
.contact-tailwind-page .contact-supplier-table-area .dataTables_wrapper,
.contact-tailwind-page .contact-supplier-table-area table,
.contact-tailwind-page #purchase_table_wrapper,
.contact-tailwind-page #purchase_table,
.contact-tailwind-page #supplier_stock_report_table {
    max-width: none;
    width: 100% !important;
}

.contact-tailwind-page .contact-supplier-table-area .dataTables_wrapper > .row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
}

.contact-tailwind-page .contact-supplier-table-area .dataTables_wrapper > .row::before,
.contact-tailwind-page .contact-supplier-table-area .dataTables_wrapper > .row::after {
    content: none;
    display: none;
}

.contact-tailwind-page .contact-supplier-table-area .dataTables_wrapper > .row > [class*="col-"] {
    flex: 0 1 auto;
    float: none;
    min-width: 0;
    padding-left: 0;
    padding-right: 0;
    width: auto;
}

.contact-tailwind-page .contact-supplier-table-area .dataTables_wrapper > .row > .col-sm-12 {
    flex: 1 0 100%;
    width: 100%;
}

.contact-tailwind-page .contact-supplier-table-area .dataTables_filter {
    margin-left: auto;
    text-align: right;
}

.contact-tailwind-page .contact-ledger-toolbar {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) minmax(360px, 1.1fr) minmax(280px, 0.95fr) auto;
    align-items: end;
    gap: 1rem 1.75rem;
    margin-bottom: 1rem;
    width: 100%;
}

.contact-tailwind-page .contact-ledger-field {
    margin-bottom: 0;
}

.contact-tailwind-page .contact-ledger-format-field {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.contact-tailwind-page .contact-ledger-format-field > label {
    margin-bottom: 0;
}

.contact-tailwind-page .contact-ledger-format {
    display: inline-flex;
    flex-wrap: nowrap;
}

.contact-tailwind-page .contact-ledger-format .au-button {
    position: relative;
    margin-left: -1px;
    border-radius: 0;
    background: #f8fafc;
    color: #364152;
}

.contact-tailwind-page .contact-ledger-format .au-button:first-child {
    margin-left: 0;
    border-radius: 6px 0 0 6px;
}

.contact-tailwind-page .contact-ledger-format .au-button:last-child {
    border-radius: 0 6px 6px 0;
}

.contact-tailwind-page .contact-ledger-format .au-button.active {
    z-index: 1;
    border-color: #7dd3fc;
    background: #eff6ff;
    color: #075985;
}

.contact-tailwind-page .contact-ledger-format input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.contact-tailwind-page .contact-ledger-toolbar__actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* Ledger toolbar actions (Export to PDF / Send Ledger).
   Soft-tinted icon buttons: the same idiom the shared table toolbar already uses for
   its export actions (a saturated icon on a light ground), scaled up to a comfortable
   38px hit target so they sit level with the Date Range and Location controls beside
   them. Colour carries the meaning — red for the PDF, blue for the email. */
.contact-tailwind-page .contact-ledger-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    min-width: 40px;
    height: 40px;
    padding: 0;
    /* !important is load-bearing: a global bare-element rule on `button` sets
       border-radius 6px !important inline in layouts/partials/css.blade.php (and 4px
       lower down in this file). An !important on an element selector beats a plain
       declaration at any specificity, so this one has to match its importance and win
       on specificity instead. */
    border-radius: 10px !important;
    border: 1px solid transparent;
    font-size: 15px;
    line-height: 1;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.contact-tailwind-page .contact-ledger-icon-button > i {
    font-size: 15px;
    line-height: 1;
}

.contact-tailwind-page .contact-ledger-icon-button:hover,
.contact-tailwind-page .contact-ledger-icon-button:focus {
    transform: translateY(-1px);
    text-decoration: none;
}

.contact-tailwind-page .contact-ledger-icon-button:active {
    transform: translateY(0);
}

.contact-tailwind-page .contact-ledger-icon-button:focus-visible {
    outline: 2px solid #94a3b8;
    outline-offset: 2px;
}

/* Export to PDF */
.contact-tailwind-page .contact-ledger-icon-button--pdf {
    background-color: #fef2f2;
    border-color: #fecaca;
    color: #dc2626;
}

.contact-tailwind-page .contact-ledger-icon-button--pdf:hover,
.contact-tailwind-page .contact-ledger-icon-button--pdf:focus {
    background-color: #fee2e2;
    border-color: #fca5a5;
    color: #b91c1c;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.18);
}

/* Send Ledger */
.contact-tailwind-page .contact-ledger-icon-button--email {
    background-color: #eff6ff;
    border-color: #bfdbfe;
    color: #2563eb;
}

.contact-tailwind-page .contact-ledger-icon-button--email:hover,
.contact-tailwind-page .contact-ledger-icon-button--email:focus {
    background-color: #dbeafe;
    border-color: #93c5fd;
    color: #1d4ed8;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.18);
}

.contact-tailwind-page .contact-ledger-layout {
    display: grid;
    grid-template-columns: minmax(280px, 0.95fr) minmax(360px, 1.9fr);
    gap: 1.5rem 2rem;
    width: 100%;
}

.contact-tailwind-page .contact-ledger-full {
    grid-column: 1 / -1;
    min-width: 0;
    width: 100%;
}

.contact-tailwind-page .contact-ledger-half {
    min-width: 0;
    width: 100%;
}

.contact-tailwind-page .contact-ledger-business {
    grid-column: 2;
    justify-self: end;
    max-width: 32rem;
    text-align: right;
}

.contact-tailwind-page .contact-ledger-business p {
    margin: 0;
}

.contact-tailwind-page .contact-ledger-party {
    grid-column: 1;
}

.contact-tailwind-page .contact-ledger-summary {
    grid-column: 2;
    align-self: start;
}

.contact-tailwind-page .contact-ledger-transactions {
    grid-column: 1 / -1;
}

.contact-tailwind-page .contact-ledger-block-heading,
.contact-tailwind-page .contact-ledger-summary-title,
.contact-tailwind-page .contact-ledger-table thead th,
.contact-tailwind-page .contact-ledger-totals-table .blue-heading td,
.contact-tailwind-page .contact-ledger-table tfoot .blue-heading,
.contact-tailwind-page .contact-ledger-table tfoot .blue-heading td {
    background: #357ca5 !important;
    color: #fff !important;
}

/* Totals row now lives in the client table's <tfoot> (sticky to the bottom of the scroll
   region). Keep it opaque with the teal heading colour so it stays readable over the
   scrolling body and never renders white-on-white. */
.contact-tailwind-page .contact-ledger-table tfoot th,
.contact-tailwind-page .contact-ledger-table tfoot td {
    --au-tfoot-bg: #357ca5;
    border-color: #357ca5 !important;
}

.contact-tailwind-page .contact-ledger-block-heading {
    margin: 0;
    padding: 0.45rem 0.75rem;
    font-weight: 700;
}

.contact-tailwind-page .contact-ledger-address {
    margin: 0.35rem 0 0;
    line-height: 1.5;
}

.contact-tailwind-page .contact-ledger-summary-title {
    margin: 0;
    padding: 0.45rem 0.75rem;
    text-align: right;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.25;
}

.contact-tailwind-page .contact-ledger-summary-box {
    border: 1px solid #0f172a;
    border-top: 0;
    padding: 0.75rem 1rem;
    min-height: 13rem;
}

.contact-tailwind-page .contact-ledger-summary-box > i,
.contact-tailwind-page .contact-ledger-summary-box > b {
    display: inline-block;
    margin-bottom: 0.55rem;
}

.contact-tailwind-page .contact-ledger-summary-table td {
    border: 0;
    padding: 0.32rem 0;
}

.contact-tailwind-page .contact-ledger-summary-table td:last-child {
    text-align: right;
}

.contact-tailwind-page .contact-ledger-table-heading {
    margin: 0.25rem 0 0.5rem;
    text-align: center;
}

.contact-tailwind-page .contact-ledger-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.contact-tailwind-page .contact-ledger-table,
.contact-tailwind-page .contact-ledger-totals-table,
.contact-tailwind-page #contact_ledger_div table,
.contact-tailwind-page #contact_ledger_div .dataTables_wrapper {
    width: 100% !important;
    max-width: none;
}

.contact-tailwind-page .contact-ledger-table,
.contact-tailwind-page .contact-ledger-totals-table {
    min-width: 1060px;
}

.contact-tailwind-page .contact-ledger-table thead th {
    border-color: #357ca5 !important;
    text-align: center;
    vertical-align: middle;
    text-transform: none;
    letter-spacing: 0;
}

.contact-tailwind-page .contact-ledger-table tbody td {
    vertical-align: top;
}

.contact-tailwind-page .contact-ledger-table .dataTables_empty {
    height: 3rem;
    text-align: center;
}

.contact-tailwind-page .contact-ledger-totals-table td {
    border-color: #357ca5 !important;
    color: #fff !important;
}

.contact-tailwind-page #contact_ledger_div > [class*="col-md-12"] {
    float: none;
    width: 100%;
    max-width: 100%;
}

.contact-tailwind-page #contact_ledger_div > [class*="col-md-6"] {
    width: 50%;
    max-width: 50%;
}

@media (max-width: 1199px) {
    .contact-tailwind-page .contact-ledger-toolbar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .contact-tailwind-page .contact-ledger-toolbar__actions {
        justify-content: flex-start;
    }
}

@media (max-width: 767px) {
    .contact-tailwind-page .contact-ledger-toolbar,
    .contact-tailwind-page .contact-ledger-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .contact-tailwind-page .au-page-header__selector {
        flex-basis: 100%;
        max-width: 100%;
        width: 100%;
    }

    .contact-tailwind-page .contact-ledger-business,
    .contact-tailwind-page .contact-ledger-party,
    .contact-tailwind-page .contact-ledger-summary {
        grid-column: 1 / -1;
    }

    .contact-tailwind-page .contact-ledger-business {
        justify-self: stretch;
        max-width: none;
    }

    .contact-tailwind-page .contact-ledger-format {
        overflow-x: auto;
        max-width: 100%;
    }

    .contact-tailwind-page #contact_ledger_div > [class*="col-md-6"] {
        float: none;
        width: 100%;
        max-width: 100%;
    }

    .contact-tailwind-page .contact-supplier-table-area .dataTables_filter {
        margin-left: 0;
        text-align: left;
        width: 100%;
    }
}

.contact-tailwind-page .row {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
}

.contact-tailwind-page .row > [class^="col-"] {
    padding: 0 0.5rem;
    /* Flex-item shrink fix: the sibling `.row { display: flex }` rule above
       turns these columns into flex items, whose default `min-width: auto`
       refuses to shrink below their CONTENT min-width. A wide table inside
       (e.g. the products list, 1189px of columns) therefore blew the column
       out to its own intrinsic width, and `section.content { overflow-x:
       hidden }` then CLIPPED everything past the viewport - so only the
       leading column was reachable and the inner `.au-dt-scroll`
       overflow-x:auto never engaged. min-width: 0 restores the float-grid
       behaviour these skins replaced: the column keeps its percentage
       width and the table scrolls horizontally inside its own container. */
    min-width: 0;
}

.contact-tailwind-page .row > .clearfix {
    display: none;
}

.contact-tailwind-page .tw-overflow-x-auto {
    overflow-x: auto;
}

.contact-tailwind-page .contact-view-add-toolbar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    margin: 0.625rem 0 1rem;
}

.contact-tailwind-page .contact-view-add-toolbar .contact-login-add {
    float: none !important;
}

.contact-tailwind-page #login .contact-view-add-toolbar,
.contact-tailwind-page .tab-pane#login .contact-view-add-toolbar, .contact-tailwind-page .au-tabs__pane#login .contact-view-add-toolbar {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    width: 100% !important;
    clear: both;
}

.contact-tailwind-page #login .contact-view-add-toolbar .contact-login-add,
.contact-tailwind-page .tab-pane#login .contact-view-add-toolbar .contact-login-add, .contact-tailwind-page .au-tabs__pane#login .contact-view-add-toolbar .contact-login-add {
    float: none !important;
    margin-left: auto !important;
}

.contact-tailwind-page > .tw-bg-white > .no-print a.btn-modal,
.contact-tailwind-page > .tw-bg-white > .no-print .btn-modal {
    display: inline-flex !important;
    min-height: 32px !important;
    height: 32px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 6px 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 4px !important;
    background: rgba(255, 255, 255, 0.18) !important;
    background-image: none !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

.contact-tailwind-page > .tw-bg-white > .no-print a.btn-modal:hover,
.contact-tailwind-page > .tw-bg-white > .no-print a.btn-modal:focus,
.contact-tailwind-page > .tw-bg-white > .no-print .btn-modal:hover,
.contact-tailwind-page > .tw-bg-white > .no-print .btn-modal:focus {
    background: rgba(255, 255, 255, 0.26) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    color: #fff !important;
}

.contact-tailwind-page > .tw-bg-white > .no-print a.btn-modal i,
.contact-tailwind-page > .tw-bg-white > .no-print .btn-modal i {
    margin-right: 4px !important;
    font-size: 13px !important;
}

.contact-tailwind-page .report-print-block > .no-print .btn,
.contact-tailwind-page .report-print-block > .no-print .tw-dw-btn {
    min-height: 28px !important;
    height: 28px !important;
    padding: 5px 10px !important;
    border-radius: 4px !important;
    font-size: 12px !important;
    line-height: 1 !important;
}

.contact-tailwind-modal .contact-modal-dialog {
    width: auto;
    max-width: 64rem;
    margin: 2rem auto;
    padding: 0 1rem;
}

.contact-tailwind-modal .contact-modal-panel {
    overflow: hidden;
    border: 1px solid #e3e8ef;
    border-radius: 0.875rem;
    background: #fff;
    box-shadow: 0 24px 48px rgba(16, 24, 40, 0.2);
}

.contact-tailwind-modal .contact-modal-header,
.contact-tailwind-modal .contact-modal-footer {
    display: flex;
    align-items: center;
    padding: 1rem 1.25rem;
}

.contact-tailwind-modal .contact-modal-header {
    justify-content: flex-start;
    border-bottom: 1px solid #e3e8ef;
    position: relative;
    padding-right: 4rem;
}

.contact-tailwind-modal .contact-modal-header::before,
.contact-tailwind-modal .contact-modal-header::after {
    content: none !important;
    display: none !important;
}

.contact-tailwind-modal .contact-modal-header .modal-title {
    order: 1;
    flex: 1 1 auto;
    margin: 0;
    padding-left: 0;
    text-align: left;
    text-indent: 0;
}

.contact-tailwind-modal .contact-modal-body {
    padding: 1.25rem;
}

.contact-tailwind-modal .contact-modal-footer {
    justify-content: flex-end;
    gap: 0.625rem;
    border-top: 1px solid #e3e8ef;
    background: #f8fafc;
}

.contact-tailwind-modal .contact-modal-close {
    display: inline-flex;
    order: 2;
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #697586;
    font-size: 0.85rem;
    position: absolute;
    top: 50%;
    right: 1.25rem;
    margin: 0;
    transform: translateY(-50%);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.contact-tailwind-modal .contact-modal-close:hover,
.contact-tailwind-modal .contact-modal-close:focus {
    background: #eef2f6;
    color: #121926;
    outline: none;
}

.contact-tailwind-modal .modal-title {
    margin: 0;
    color: #121926;
    font-size: 1.125rem;
    font-weight: 600;
}

.contact-tailwind-modal .row {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
}

.contact-tailwind-modal .row > [class^="col-"] {
    padding: 0 0.5rem;
}

.contact-tailwind-modal .form-group {
    margin-bottom: 1.1rem;
}

.contact-tailwind-modal label {
    color: #364152;
    font-size: 0.875rem;
    font-weight: 600;
}

.contact-tailwind-modal .form-control {
    min-height: 2.625rem;
    border: 1px solid #cdd5df;
    border-radius: 0.5rem;
    background: #fff;
    color: #121926;
    font-size: 0.875rem;
    padding: 0.55rem 0.75rem;
    box-shadow: none;
}

.contact-tailwind-modal .form-control:focus {
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px var(--ui-focus-ring);
}

.contact-tailwind-modal .input-group-addon {
    border: 1px solid #cdd5df;
    border-right: 0;
    border-radius: 0.5rem 0 0 0.5rem;
    background: #f8fafc;
    color: #4b5565;
}

.contact-tailwind-modal .checkbox {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: nowrap;
}

.contact-tailwind-modal .checkbox br {
    display: none;
}

.contact-tailwind-modal .checkbox label {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    font-weight: 500;
}

.contact-tailwind-modal .nav-tabs-custom .nav-tabs, .contact-tailwind-modal .nav-tabs-custom .au-tabs__nav {
    display: flex;
    gap: 0.25rem;
    border-bottom: 1px solid #e3e8ef;
    flex-wrap: wrap;
}

.contact-tailwind-modal .nav-tabs-custom .nav-tabs > li > a, .contact-tailwind-modal .nav-tabs-custom .au-tabs__nav > li > a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1rem;
    border-radius: 0.5rem 0.5rem 0 0;
    color: #4b5565;
    font-weight: 600;
    font-size: 0.875rem;
}

.contact-tailwind-modal .nav-tabs-custom .nav-tabs > li.active > a, .contact-tailwind-modal .nav-tabs-custom .au-tabs__nav > li.active > a {
    background: var(--brand-100);
    color: var(--brand-700);
}


.essentials-tailwind-module {
    background: #edf2f8;
}

.essentials-tailwind-module .content-header {
    padding: 0 15px 12px;
}

.essentials-tailwind-module .content {
    padding-bottom: 24px;
}

.essentials-tailwind-module .content-header h1 {
    margin: 10px 0 18px;
    color: #1f2937;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.essentials-tailwind-module .content-header h1 small {
    display: block;
    margin-top: 6px;
    color: #667085;
    font-size: 0.95rem;
    font-weight: 600;
}

.essentials-tailwind-module .content > .row:first-child,
.essentials-tailwind-module .content > .tw-grid:first-child,
.essentials-tailwind-module .content > .tw-bg-white:first-child,
.essentials-tailwind-module .content > .box:first-child,
.essentials-tailwind-module .content > .nav-tabs-custom:first-child {
    margin-top: 4px;
}

.essentials-tailwind-module .content > h4:first-child {
    margin: 10px 0 18px;
    color: #1f2937;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.essentials-tailwind-module .content > h4:first-child small {
    display: block;
    margin-top: 6px;
    color: #667085;
    font-size: 0.95rem;
    font-weight: 600;
}

.essentials-tailwind-module .row {
    margin-left: -8px;
    margin-right: -8px;
}

.essentials-tailwind-module .row > [class*='col-'] {
    padding-left: 8px;
    padding-right: 8px;
}

.essentials-tailwind-module .box,
.essentials-tailwind-module .nav-tabs-custom,
.essentials-tailwind-module .modal-content,
.essentials-tailwind-module .panel.box,
.essentials-tailwind-module .pr-card,
.essentials-tailwind-module .pr-filter-panel,
.essentials-tailwind-module .report-filters-block,
.essentials-tailwind-module .module-shared-widget,
.essentials-tailwind-module .module-shared-filters {
    background: #fff;
    border: 1px solid #dfe6ef;
    border-radius: 18px;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.05);
}

.essentials-tailwind-module .box,
.essentials-tailwind-module .nav-tabs-custom,
.essentials-tailwind-module .pr-filter-panel,
.essentials-tailwind-module .report-filters-block,
.essentials-tailwind-module .module-shared-widget,
.essentials-tailwind-module .module-shared-filters {
    overflow: hidden;
}

.essentials-tailwind-module .box-header,
.essentials-tailwind-module .nav-tabs-custom > .tab-content, .essentials-tailwind-module .nav-tabs-custom > .au-tabs__content,
.essentials-tailwind-module .box-body,
.essentials-tailwind-module .box-footer,
.essentials-tailwind-module .panel > .box-body,
.essentials-tailwind-module .panel > .box-header,
.essentials-tailwind-module .modal-body,
.essentials-tailwind-module .modal-header,
.essentials-tailwind-module .modal-footer {
    border-color: #e5e7eb;
}

.essentials-tailwind-module .box-header,
.essentials-tailwind-module .modal-header,
.essentials-tailwind-module .panel > .box-header {
    padding: 16px 20px;
}

.essentials-tailwind-module .box > .box-header,
.essentials-tailwind-module .panel.box > .box-header,
.essentials-tailwind-module .report-filters-block > .box-header,
.essentials-tailwind-module .module-shared-filters > .box-header {
    background: #fff;
    border-bottom: 1px solid #e7edf4;
}

.essentials-tailwind-module .module-shared-widget > div > .module-shared-widget-header {
    background: linear-gradient(135deg, #5b5ce6 0%, #3f46d8 100%);
    border-radius: 18px 18px 0 0;
    border-bottom: 0;
    margin: 0;
    padding: 16px 20px;
}

.essentials-tailwind-module .module-shared-widget-shell {
    padding: 0;
}

.essentials-tailwind-module .box-body,
.essentials-tailwind-module .modal-body,
.essentials-tailwind-module .panel > .box-body,
.essentials-tailwind-module .nav-tabs-custom > .tab-content, .essentials-tailwind-module .nav-tabs-custom > .au-tabs__content {
    padding: 20px;
}

.essentials-tailwind-module .box-footer,
.essentials-tailwind-module .modal-footer {
    padding: 16px 20px;
    background: #f8fafc;
}

.essentials-tailwind-module .box-title,
.essentials-tailwind-module .panel-title,
.essentials-tailwind-module .modal-title {
    color: #111827;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
}

.essentials-tailwind-module .box > .box-header .box-title,
.essentials-tailwind-module .panel.box > .box-header .box-title,
.essentials-tailwind-module .report-filters-block > .box-header .box-title,
.essentials-tailwind-module .module-shared-widget > div > .module-shared-widget-header .box-title,
.essentials-tailwind-module .box > .box-header .box-title a,
.essentials-tailwind-module .panel.box > .box-header .box-title a,
.essentials-tailwind-module .report-filters-block > .box-header .box-title a,
.essentials-tailwind-module .module-shared-widget > div > .module-shared-widget-header .box-title a {
    color: #1f2937;
}

.essentials-tailwind-module .module-shared-widget > div > .module-shared-widget-header .box-title,
.essentials-tailwind-module .module-shared-widget > div > .module-shared-widget-header .box-title a,
.essentials-tailwind-module .module-shared-widget > div > .module-shared-widget-header i,
.essentials-tailwind-module .module-shared-widget > div > .module-shared-widget-header small {
    color: #fff !important;
}

.essentials-tailwind-module .box-tools {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.essentials-tailwind-module .box > .box-header .box-tools,
.essentials-tailwind-module .panel.box > .box-header .box-tools,
.essentials-tailwind-module .report-filters-block > .box-header .box-tools,
.essentials-tailwind-module .module-shared-widget > div > .module-shared-widget-header .box-tools {
    color: #475467;
}

.essentials-tailwind-module .module-shared-widget > div > .module-shared-widget-header .box-tools {
    color: #fff;
}

.essentials-tailwind-module .report-filters-block .box-body {
    padding: 18px 20px !important;
}

.essentials-tailwind-module .module-shared-widget-body > div > .sm\:tw-px-5 {
    padding-left: 18px !important;
    padding-right: 18px !important;
    padding-top: 18px !important;
    padding-bottom: 18px !important;
}

.essentials-tailwind-module .module-shared-widget-body {
    border-top: 0;
}

.essentials-tailwind-module .module-shared-widget .box-header br + small {
    display: inline-block;
    margin-top: 8px;
}

.essentials-tailwind-module .report-filters-block .box-title {
    font-size: 15px;
    font-weight: 700;
}

.essentials-tailwind-module .report-filters-block .box-title a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

.essentials-tailwind-module .nav-tabs-custom > .nav-tabs, .essentials-tailwind-module .nav-tabs-custom > .au-tabs__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 16px 16px 0;
    border-bottom: 1px solid #e5e7eb;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

.essentials-tailwind-module .nav-tabs-custom > .nav-tabs > li, .essentials-tailwind-module .nav-tabs-custom > .au-tabs__nav > li {
    float: none;
    margin: 0;
}

.essentials-tailwind-module .nav-tabs-custom > .nav-tabs > li > a, .essentials-tailwind-module .nav-tabs-custom > .au-tabs__nav > li > a {
    margin: 0;
    border: 1px solid transparent;
    border-radius: 9999px;
    padding: 10px 14px;
    color: #475467;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
}

.essentials-tailwind-module .nav-tabs-custom > .nav-tabs > li.active > a, .essentials-tailwind-module .nav-tabs-custom > .au-tabs__nav > li.active > a,
.essentials-tailwind-module .nav-tabs-custom > .nav-tabs > li.active:hover > a, .essentials-tailwind-module .nav-tabs-custom > .au-tabs__nav > li.active:hover > a,
.essentials-tailwind-module .nav-tabs-custom > .nav-tabs > li > a:hover, .essentials-tailwind-module .nav-tabs-custom > .au-tabs__nav > li > a:hover {
    background: #eef2ff;
    border-color: #c7d2fe;
    color: #4338ca;
}

.essentials-tailwind-module .nav-tabs-custom > .tab-content > .tab-pane, .essentials-tailwind-module .nav-tabs-custom > .au-tabs__content > .au-tabs__pane {
    padding-top: 0;
}

.essentials-tailwind-module .list-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.essentials-tailwind-module .list-group-item {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    margin-bottom: 0;
    color: #475467;
    font-weight: 600;
}

.essentials-tailwind-module .list-group-item.active,
.essentials-tailwind-module .list-group-item.active:hover,
.essentials-tailwind-module .list-group-item.active:focus {
    background: linear-gradient(135deg, #4f46e5, #2563eb);
    border-color: transparent;
    color: #fff;
}

.essentials-tailwind-module .form-group {
    margin-bottom: 18px;
}

.essentials-tailwind-module label {
    margin-bottom: 6px;
    color: #344054;
    font-size: 13px;
    font-weight: 600;
}

.essentials-tailwind-module .form-control,
.essentials-tailwind-module .input-group-addon,
.essentials-tailwind-module .select2-container--default .select2-selection--single,
.essentials-tailwind-module .select2-container--default .select2-selection--multiple {
    min-height: 42px;
    border: 1px solid #d0d5dd;
    border-radius: 10px;
    background: #fff;
    box-shadow: none;
}

.essentials-tailwind-module textarea.form-control {
    min-height: 110px;
}

.essentials-tailwind-module .form-control,
.essentials-tailwind-module .select2-container--default .select2-selection--single .select2-selection__rendered,
.essentials-tailwind-module .select2-container--default .select2-selection--multiple .select2-selection__rendered {
    color: #101828;
    font-size: 14px;
    line-height: 1.5;
}

.essentials-tailwind-module .form-control:focus,
.essentials-tailwind-module .select2-container--default.select2-container--focus .select2-selection--multiple,
.essentials-tailwind-module .select2-container--default.select2-container--open .select2-selection--single {
    border-color: #818cf8;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.essentials-tailwind-module .input-group {
    display: flex;
    align-items: stretch;
    width: 100%;
}

.essentials-tailwind-module .input-group .form-control {
    flex: 1 1 auto;
    width: 1%;
}

.essentials-tailwind-module .input-group-addon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px;
    color: #667085;
}

.essentials-tailwind-module .help-block,
.essentials-tailwind-module .text-muted {
    color: #667085;
}

.essentials-tailwind-module .alert {
    border: 1px solid transparent;
    border-radius: 14px;
    padding: 14px 16px;
}

.essentials-tailwind-module .alert-danger {
    background: #fef2f2;
    border-color: #fecaca;
    color: #b42318;
}

.essentials-tailwind-module .tw-dw-btn,
.essentials-tailwind-module .btn,
.essentials-tailwind-module button.btn,
.essentials-tailwind-module a.btn {
    border-radius: 9999px;
    transition: all 0.18s ease;
}

.essentials-tailwind-module .box > .box-header .tw-dw-btn,
.essentials-tailwind-module .box > .box-header .btn,
.essentials-tailwind-module .panel.box > .box-header .tw-dw-btn,
.essentials-tailwind-module .panel.box > .box-header .btn,
.essentials-tailwind-module .report-filters-block > .box-header .tw-dw-btn,
.essentials-tailwind-module .report-filters-block > .box-header .btn,
.essentials-tailwind-module .module-shared-widget > div > .module-shared-widget-header .tw-dw-btn,
.essentials-tailwind-module .module-shared-widget > div > .module-shared-widget-header .btn {
    background: linear-gradient(135deg, #615fff 0%, #3d7cf3 100%) !important;
    border: 1px solid transparent !important;
    color: #fff !important;
    box-shadow: none;
    padding: 10px 18px;
}

.essentials-tailwind-module .box > .box-header .tw-dw-btn:hover,
.essentials-tailwind-module .box > .box-header .btn:hover,
.essentials-tailwind-module .panel.box > .box-header .tw-dw-btn:hover,
.essentials-tailwind-module .panel.box > .box-header .btn:hover,
.essentials-tailwind-module .report-filters-block > .box-header .tw-dw-btn:hover,
.essentials-tailwind-module .report-filters-block > .box-header .btn:hover,
.essentials-tailwind-module .module-shared-widget > div > .module-shared-widget-header .tw-dw-btn:hover,
.essentials-tailwind-module .module-shared-widget > div > .module-shared-widget-header .btn:hover {
    background: linear-gradient(135deg, #5654ea 0%, #346dde 100%) !important;
    color: #fff !important;
    transform: translateY(-1px);
}

.essentials-tailwind-module .module-shared-widget > div > .module-shared-widget-header .tw-dw-btn,
.essentials-tailwind-module .module-shared-widget > div > .module-shared-widget-header .btn {
    background: rgba(255, 255, 255, 0.14) !important;
    border-color: rgba(255, 255, 255, 0.24) !important;
}

.essentials-tailwind-module .module-shared-widget > div > .module-shared-widget-header .tw-dw-btn:hover,
.essentials-tailwind-module .module-shared-widget > div > .module-shared-widget-header .btn:hover {
    background: rgba(255, 255, 255, 0.22) !important;
    border-color: rgba(255, 255, 255, 0.32) !important;
}

.essentials-tailwind-module .btn-app {
    min-width: 150px;
    height: auto;
    margin: 0 8px 8px 0;
    border: 0;
    border-radius: 18px;
    padding: 16px 18px;
    box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08);
}

.essentials-tailwind-module .table-responsive {
    border: 1px solid #eaecf0;
    border-radius: 14px;
    overflow: hidden;
}

.essentials-tailwind-module table.table,
.essentials-tailwind-module table.dataTable {
    margin: 0 !important;
    width: 100% !important;
    border-collapse: separate;
    border-spacing: 0;
    border: 0;
}

.essentials-tailwind-module table.table thead th,
.essentials-tailwind-module table.dataTable thead th {
    border: 0;
    border-bottom: 1px solid #cfd8e3 !important;
    background: #fff;
    color: #243b63;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 14px 12px;
    text-transform: uppercase;
    white-space: nowrap;
}

.essentials-tailwind-module table.table tbody td,
.essentials-tailwind-module table.dataTable tbody td {
    border-top: 0 !important;
    border-bottom: 1px solid #e8eef5;
    color: #475467;
    padding: 12px 14px;
    vertical-align: middle;
}

.essentials-tailwind-module table.table tbody tr:hover,
.essentials-tailwind-module table.dataTable tbody tr:hover {
    background: #f8fbff;
}

.essentials-tailwind-module .dataTables_wrapper .dataTables_length,
.essentials-tailwind-module .dataTables_wrapper .dataTables_filter,
.essentials-tailwind-module .dataTables_wrapper .dataTables_info,
.essentials-tailwind-module .dataTables_wrapper .dataTables_paginate {
    margin-top: 14px;
    color: #667085;
}

.essentials-tailwind-module .dataTables_wrapper .dt-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-top: 14px;
}

.essentials-tailwind-module .dataTables_wrapper .dataTables_filter input,
.essentials-tailwind-module .dataTables_wrapper .dataTables_length select,
.essentials-tailwind-module .dataTables_wrapper .dt-buttons .btn {
    border: 1px solid #d0d5dd;
    border-radius: 10px;
    min-height: 38px;
    padding: 6px 10px;
}

.essentials-tailwind-module .dataTables_wrapper .dt-buttons .btn {
    background: #fff;
    color: #344054;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
}

.essentials-tailwind-module .dataTables_wrapper .dt-buttons .btn:hover {
    border-color: #98a2b3;
    background: #f8fafc;
}

.essentials-tailwind-module .dataTables_wrapper .dataTables_filter {
    text-align: right;
}

.essentials-tailwind-module .dataTables_wrapper .dataTables_filter input {
    min-width: 170px;
}

.essentials-tailwind-module .dataTables_wrapper .dataTables_length label,
.essentials-tailwind-module .dataTables_wrapper .dataTables_filter label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}

.essentials-tailwind-module .dataTables_wrapper .row:first-child,
.essentials-tailwind-module .dataTables_wrapper .row:last-child {
    margin-left: 0;
    margin-right: 0;
}

.essentials-tailwind-module .dataTables_wrapper .row:first-child > div,
.essentials-tailwind-module .dataTables_wrapper .row:last-child > div {
    padding-left: 0;
    padding-right: 0;
}

.essentials-tailwind-module .pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
}

.essentials-tailwind-module .pagination > li > a,
.essentials-tailwind-module .pagination > li > span {
    border: 1px solid #d0d5dd;
    border-radius: 10px;
    color: #344054;
    padding: 8px 12px;
}

.essentials-tailwind-module .pagination > .active > a,
.essentials-tailwind-module .pagination > .active > span {
    background: #4f46e5;
    border-color: #4f46e5;
    color: #fff;
}

.essentials-tailwind-module .btn-primary,
.essentials-tailwind-module .btn-info,
.essentials-tailwind-module .btn-success,
.essentials-tailwind-module .btn-warning,
.essentials-tailwind-module .btn-danger,
.essentials-tailwind-module .btn-default {
    background: #fff;
    box-shadow: none;
    font-weight: 600;
}

.essentials-tailwind-module .btn-primary {
    border-color: #5b4fff;
    color: #4f46e5;
}

.essentials-tailwind-module .btn-info {
    border-color: #38bdf8;
    color: #0ea5e9;
}

.essentials-tailwind-module .btn-success {
    border-color: #34d399;
    color: #059669;
}

.essentials-tailwind-module .btn-warning {
    border-color: #fbbf24;
    color: #d97706;
}

.essentials-tailwind-module .btn-danger {
    border-color: #f87171;
    color: #ef4444;
}

.essentials-tailwind-module .btn-default {
    border-color: #cbd5e1;
    color: #475467;
}

.essentials-tailwind-module .btn-primary:hover,
.essentials-tailwind-module .btn-info:hover,
.essentials-tailwind-module .btn-success:hover,
.essentials-tailwind-module .btn-warning:hover,
.essentials-tailwind-module .btn-danger:hover,
.essentials-tailwind-module .btn-default:hover {
    background: #f8fafc;
}

.essentials-tailwind-module .btn-xs,
.essentials-tailwind-module .btn-sm {
    border-radius: 9999px;
    padding: 5px 12px;
}

.essentials-tailwind-module .modal-dialog {
    margin-top: 40px;
}

.essentials-tailwind-module .modal-content {
    border: 0;
}

.essentials-tailwind-module .modal-header {
    background: linear-gradient(135deg, #615fff 0%, #3d7cf3 100%);
    border-bottom: 0;
}

.essentials-tailwind-module .modal-header .modal-title,
.essentials-tailwind-module .modal-header .close {
    color: #fff;
}

.essentials-tailwind-module .modal-body .row {
    margin-left: -10px;
    margin-right: -10px;
}

.essentials-tailwind-module .modal-body .row > [class*='col-'] {
    padding-left: 10px;
    padding-right: 10px;
}

.essentials-tailwind-module .modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.essentials-tailwind-module .modal-footer .tw-dw-btn,
.essentials-tailwind-module .modal-footer .btn {
    min-width: 110px;
}

.essentials-tailwind-module .dropzone {
    border: 1px dashed #c7d2fe;
    border-radius: 14px;
    background: #f8faff;
    min-height: 140px;
}

.essentials-tailwind-module .select2-container {
    width: 100% !important;
}

.essentials-tailwind-module .select2-container .select2-selection--single {
    min-height: 42px;
}

.essentials-tailwind-module .select2-container .select2-selection--single .select2-selection__rendered {
    line-height: 40px;
    padding-left: 12px;
}

.essentials-tailwind-module .select2-container .select2-selection--single .select2-selection__arrow {
    height: 40px;
}

.essentials-tailwind-module .select2-container .select2-selection--multiple {
    padding: 4px 6px;
}

.essentials-tailwind-module .select2-container--default .select2-selection--multiple .select2-selection__choice {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid #c7d2fe;
    border-radius: 9999px;
    background: #e0e7ff;
    color: #312e81;
    font-weight: 600;
    padding: 4px 10px 4px 6px;
}

.essentials-tailwind-module .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    display: inline-flex;
    width: 1rem;
    height: 1rem;
    align-items: center;
    justify-content: center;
    margin: 0;
    border-radius: 9999px;
    background: #fff;
    color: #dc2626 !important;
    font-size: 0.875rem;
    font-weight: 800;
    line-height: 1;
}

.essentials-tailwind-module .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover,
.essentials-tailwind-module .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:focus {
    background: #fee2e2;
    color: #991b1b !important;
}

.essentials-tailwind-module .box-group .panel.box-primary {
    border: 1px solid #dfe6ef;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.04);
}

.essentials-tailwind-module .box-group .panel.box-primary > .box-header {
    background: linear-gradient(135deg, #5b5ce6 0%, #3f46d8 100%);
    border-bottom: 0;
}

.essentials-tailwind-module .box-group .panel.box-primary > .box-header .box-title,
.essentials-tailwind-module .box-group .panel.box-primary > .box-header .box-title a,
.essentials-tailwind-module .box-group .panel.box-primary > .box-header .box-tools a {
    color: #fff !important;
}

.essentials-tailwind-module .box-group .list-group-item.bg-info,
.essentials-tailwind-module .box-group .list-group-item.bg-info a {
    background: #eef2ff;
    color: #4338ca !important;
}

.essentials-tailwind-module .pos-tab-container .pos-tab-menu .list-group {
    gap: 10px;
}

.essentials-tailwind-module .pos-tab-container .pos-tab-menu .list-group-item {
    border-radius: 12px;
    font-weight: 700;
}

.essentials-tailwind-module .pos-tab-container .pos-tab {
    padding-top: 6px;
}

.essentials-tailwind-module .close {
    opacity: 0.7;
}

.essentials-tailwind-module .todo-list,
.essentials-tailwind-module ul.todo-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.essentials-tailwind-module .todo-list > li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid #eaecf0;
    border-radius: 12px;
    margin-bottom: 8px;
    background: #fff;
}

.essentials-tailwind-module .tools,
.essentials-tailwind-module .p-5-5 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.essentials-tailwind-module .post {
    border-bottom: 1px solid #eaecf0;
    padding: 16px 0;
}

.essentials-tailwind-module .panel-collapse > .box-body,
.essentials-tailwind-module .panel-collapse > .panel-body {
    border-top: 1px solid #eaecf0 !important;
}

.essentials-tailwind-module .box-group .panel {
    margin-bottom: 12px;
}

.essentials-tailwind-module .text-primary {
    color: #2563eb !important;
}

.essentials-tailwind-module .text-info {
    color: #0891b2 !important;
}

.essentials-tailwind-module .text-danger {
    color: #dc2626 !important;
}

.essentials-tailwind-module .text-success {
    color: #059669 !important;
}

.essentials-tailwind-module .content-header h1,
.essentials-tailwind-module .content h1,
.essentials-tailwind-module .content h2,
.essentials-tailwind-module .content h3,
.essentials-tailwind-module .content h4 {
    color: #1f2937;
}

.essentials-tailwind-module .fc-toolbar {
    margin-bottom: 18px;
}

.essentials-tailwind-module .fc button {
    border-radius: 9999px;
    box-shadow: none;
    border: 1px solid #d0d5dd;
    background: #fff;
    color: #344054;
    text-shadow: none;
}

.essentials-tailwind-module .fc button:hover,
.essentials-tailwind-module .fc button.fc-state-active {
    background: #eef2ff;
    border-color: #c7d2fe;
    color: #4338ca;
}

.essentials-tailwind-module #calendar,
.essentials-tailwind-module .fc-view-container {
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
}

.essentials-tailwind-module .fc-unthemed td,
.essentials-tailwind-module .fc-unthemed th,
.essentials-tailwind-module .fc-unthemed thead,
.essentials-tailwind-module .fc-unthemed tbody,
.essentials-tailwind-module .fc-unthemed .fc-divider,
.essentials-tailwind-module .fc-unthemed .fc-row,
.essentials-tailwind-module .fc-unthemed .fc-content,
.essentials-tailwind-module .fc-unthemed .fc-popover,
.essentials-tailwind-module .fc-unthemed .fc-list-view,
.essentials-tailwind-module .fc-unthemed .fc-list-heading td {
    border-color: #e5e7eb;
}

.essentials-tailwind-module .clock_in_btn.hide,
.essentials-tailwind-module .clock_out_btn.hide,
.essentials-tailwind-module .hide {
    display: none !important;
}

@media (min-width: 1024px) {
    .essentials-tailwind-module nav details > div {
        display: flex;
        align-items: center;
        gap: 16px;
        flex-wrap: nowrap;
    }

    .essentials-tailwind-module nav details > div > a {
        flex: 0 0 auto;
        margin-right: 0 !important;
        white-space: nowrap;
    }

    .essentials-tailwind-module nav details > div > ul {
        display: flex !important;
        flex: 1 1 auto;
        flex-wrap: nowrap !important;
        align-items: center;
        gap: 4px;
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        scrollbar-width: thin;
    }

    .essentials-tailwind-module nav details > div > ul > li {
        flex: 0 0 auto;
    }

    .essentials-tailwind-module nav details > div > ul > li > a {
        white-space: nowrap;
    }
}

@media (min-width: 768px) {
    .essentials-tailwind-module .dataTables_wrapper .row {
        display: flex;
        align-items: center;
    }
}

@media (max-width: 767px) {
    .essentials-tailwind-module .content-header h1 {
        font-size: 1.7rem;
    }

    .essentials-tailwind-module .box-header,
    .essentials-tailwind-module .box-body,
    .essentials-tailwind-module .box-footer,
    .essentials-tailwind-module .modal-header,
    .essentials-tailwind-module .modal-body,
    .essentials-tailwind-module .modal-footer {
        padding-left: 14px;
        padding-right: 14px;
    }

    .essentials-tailwind-module .nav-tabs-custom > .nav-tabs, .essentials-tailwind-module .nav-tabs-custom > .au-tabs__nav {
        padding-left: 12px;
        padding-right: 12px;
    }

    .essentials-tailwind-module .btn-app {
        width: 100%;
        min-width: 0;
    }

    .essentials-tailwind-module .box-tools {
        justify-content: flex-start;
    }

    .essentials-tailwind-module .dataTables_wrapper .dataTables_filter {
        text-align: left;
    }

    .essentials-tailwind-module .dataTables_wrapper .dt-buttons {
        justify-content: flex-start;
    }

    .essentials-tailwind-module .modal-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .essentials-tailwind-module .modal-footer .tw-dw-btn,
    .essentials-tailwind-module .modal-footer .btn {
        width: 100%;
    }
}


.expense-tailwind-page .expense-card {
    background: #fff;
    border: 1px solid #e3e8ef;
    border-radius: 0.75rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}

.expense-tailwind-page .expense-card > .tw-flex.tw-items-center.tw-justify-between,
.expense-tailwind-page .expense-card > div:first-child {
    background: linear-gradient(135deg, var(--ui-brand-start) 0%, var(--ui-brand-end) 100%) !important;
    border-bottom: none !important;
    border-radius: 0.75rem 0.75rem 0 0 !important;
    min-height: 66px;
    padding: 1rem 1.35rem !important;
}

.expense-tailwind-page .expense-card > .tw-flex.tw-items-center.tw-justify-between h2,
.expense-tailwind-page .expense-card > div:first-child h2 {
    color: #fff !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    margin: 0 !important;
}

.expense-tailwind-page .expense-card-header {
    gap: 1rem;
    flex-wrap: wrap;
}

.expense-tailwind-page .expense-card-actions {
    margin-left: auto;
}

.expense-tailwind-page .expense-card-actions .tw-dw-btn {
    display: inline-flex !important;
    min-height: 32px !important;
    height: 32px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.375rem !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 4px !important;
    background: rgba(255, 255, 255, 0.18) !important;
    background-image: none !important;
    color: #fff !important;
    padding: 6px 16px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    box-shadow: none !important;
}

.expense-tailwind-page .expense-card-actions .tw-dw-btn:hover,
.expense-tailwind-page .expense-card-actions .tw-dw-btn:focus {
    border-color: rgba(255, 255, 255, 0.46) !important;
    background: rgba(255, 255, 255, 0.26) !important;
    color: #fff !important;
}

.expense-tailwind-page .expense-card-actions .tw-dw-btn i {
    font-size: 13px;
}

@media (max-width: 575px) {
    .expense-tailwind-page .expense-card-actions {
        width: 100%;
        margin-left: 0;
    }
}

.expense-tailwind-page details > summary {
    list-style: none;
}

.expense-tailwind-page details > summary::-webkit-details-marker {
    display: none;
}

.expense-tailwind-page details > summary::after {
    content: "\f078";
    margin-left: auto;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: #697586;
    transition: transform 0.2s ease;
}

.expense-tailwind-page details[open] > summary::after {
    transform: rotate(180deg);
}

.expense-filter-grid,
.expense-form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

.expense-field,
.expense-check-field {
    min-width: 0;
}

.expense-account-field {
    position: relative;
    z-index: 1;
}

.expense-field {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.expense-check-field {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 4.75rem;
}

.expense-field label {
    margin: 0;
    color: #364152;
    font-size: 0.875rem;
    font-weight: 600;
}

.expense-input,
.expense-file-input {
    width: 100%;
    min-height: 2.625rem;
    border: 1px solid #cdd5df;
    border-radius: 0.5rem;
    background: #fff;
    color: #121926;
    font-size: 0.875rem;
    line-height: 1.25rem;
    padding: 0.625rem 0.75rem;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.expense-input:focus,
.expense-file-input:focus {
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px var(--ui-focus-ring);
}

.expense-input[readonly] {
    background: #f8fafc;
    cursor: pointer;
}

textarea.expense-input {
    min-height: 5.5rem;
    resize: vertical;
}

.expense-file-input {
    padding: 0.45rem 0.625rem;
}

.expense-file-input::file-selector-button {
    margin: -0.45rem 0.75rem -0.45rem -0.625rem;
    border: 0;
    border-right: 1px solid #cdd5df;
    background: #f8fafc;
    color: #364152;
    padding: 0.65rem 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

.expense-help {
    margin: 0;
    color: #697586;
    font-size: 0.75rem;
    line-height: 1.125rem;
}

.expense-input-icon {
    position: relative;
}

.expense-input-icon > i {
    position: absolute;
    top: 50%;
    left: 0.75rem;
    z-index: 2;
    color: #697586;
    transform: translateY(-50%);
    pointer-events: none;
}

.expense-input-icon > .expense-input {
    padding-left: 2.35rem;
}

/* Same fix as .repair-input-icon: the Vue picker's real input is a
   grandchild ([data-vpicker] > .au-native-picker > input), not the direct
   child this rule used to assume, so the icon overlapped the field text. */
.expense-input-icon > [data-vpicker] {
    display: block;
    width: 100%;
}

.expense-input-icon .au-native-picker {
    display: block;
    width: 100%;
}

.expense-input-icon .au-native-picker > .expense-input {
    padding-left: 2.35rem;
}

.expense-input-split-left {
    border-radius: 0.5rem 0 0 0.5rem;
}

.expense-input-split-right {
    border-left: 0;
    border-radius: 0 0.5rem 0.5rem 0;
}

.expense-tailwind-page .select2-container {
    width: 100% !important;
}

.expense-tailwind-page .select2-container .select2-selection--single {
    height: 2.625rem;
    border: 1px solid #cdd5df;
    border-radius: 0.5rem;
    background: #fff;
}

.expense-tailwind-page .select2-container .select2-selection--single .select2-selection__rendered {
    height: 2.5rem;
    color: #121926;
    line-height: 2.5rem;
    padding-left: 0.75rem;
}

.expense-tailwind-page .select2-container .select2-selection--single .select2-selection__arrow {
    height: 2.5rem;
    right: 0.5rem;
}

.expense-tailwind-page .select2-container--focus .select2-selection--single,
.expense-tailwind-page .select2-container--open .select2-selection--single {
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px var(--ui-focus-ring);
}

.expense-contact-select {
    position: relative;
}

.expense-contact-select .select2-dropdown {
    top: 100% !important;
    bottom: auto !important;
    border-color: #cdd5df !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 12px 24px rgba(18, 25, 38, 0.14) !important;
    overflow: hidden;
}

.expense-contact-select .select2-dropdown--above {
    border-top: 1px solid #cdd5df !important;
    border-bottom: 1px solid #cdd5df !important;
}

.expense-contact-select .select2-search--dropdown {
    padding: 0.5rem;
    border-bottom: 1px solid #eef2f6;
}

.expense-contact-select .select2-search--dropdown .select2-search__field {
    min-height: 2.25rem;
    border: 1px solid #cdd5df !important;
    border-radius: 0.375rem;
    color: #121926;
    font-size: 0.875rem;
    outline: none;
    padding: 0.45rem 0.65rem;
}

.expense-contact-select .select2-results__options {
    max-height: 20rem !important;
    overflow-y: auto !important;
}

.expense-contact-select .select2-results__option {
    min-height: 2rem;
    padding: 0.45rem 0.75rem;
}

.expense-payment-account-select {
    position: relative;
    width: 100%;
    min-width: 0;
}

.expense-payment-account-select .select2-container,
.expense-payment-account-select .select2-selection--single {
    width: 100% !important;
}

.expense-payment-account-select .select2-selection__rendered {
    padding-left: 0.75rem !important;
    padding-right: 2rem !important;
}

.expense-tailwind-page .dataTables_wrapper .dataTables_length,
.expense-tailwind-page .dataTables_wrapper .dataTables_filter,
.expense-tailwind-page .dataTables_wrapper .dataTables_info,
.expense-tailwind-page .dataTables_wrapper .dataTables_paginate {
    margin: 0.5rem 0;
    color: #4b5565;
}

.expense-tailwind-page .dataTables_wrapper .dataTables_length select,
.expense-tailwind-page .dataTables_wrapper .dataTables_filter input {
    min-height: 2.25rem;
    border: 1px solid #cdd5df;
    border-radius: 0.5rem;
    background: #fff;
    padding: 0.375rem 0.625rem;
    outline: none;
}

.expense-tailwind-page .dataTables_wrapper .dt-buttons .btn,
.expense-tailwind-page table.dataTable .btn {
    display: inline-flex;
    min-height: 2.25rem;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    border: 1px solid #cdd5df;
    border-radius: 0.5rem;
    background: #fff;
    color: #364152;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1rem;
    padding: 0.55rem 0.75rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}

.expense-tailwind-page .dataTables_wrapper .dt-buttons .btn:hover,
.expense-tailwind-page table.dataTable .btn:hover,
.expense-tailwind-page table.dataTable .btn:focus {
    border-color: #a4acb9;
    background: #f8fafc;
    color: #121926;
}

/* (Page-scoped action-dropdown skin removed - see the Global Action Button
   & Dropdown Style block.) */

.expense-tailwind-page table.dataTable {
    width: 100% !important;
    border: 0;
}

.expense-tailwind-page table.dataTable thead th {
    border: 0;
    border-bottom: 1px solid #cdd5df;
    background: #f8fafc;
    color: #364152;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.025em;
    padding: 0.75rem;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.expense-tailwind-page table.dataTable tbody td {
    border: 0;
    border-bottom: 1px solid #eef2f6;
    color: #364152;
    padding: 0.75rem;
    vertical-align: middle;
}

.expense-tailwind-page table.dataTable tbody tr:hover {
    background: #f8fafc;
}

.expense-tailwind-page table.dataTable tfoot td {
    border: 0;
    border-top: 1px solid #cdd5df;
    background: #f8fafc;
    color: #121926;
    font-weight: 600;
    padding: 0.75rem;
}

.expense-tailwind-page .pagination {
    display: flex;
    gap: 0.25rem;
    margin: 0;
}

.expense-tailwind-page .pagination > li > a,
.expense-tailwind-page .pagination > li > span {
    min-width: 2.25rem;
    border: 1px solid #cdd5df;
    border-radius: 0.5rem;
    color: #364152;
    padding: 0.45rem 0.7rem;
    text-align: center;
}

.expense-tailwind-page .pagination > .active > a,
.expense-tailwind-page .pagination > .active > span {
    border-color: var(--brand-600);
    background: var(--brand-600);
    color: #fff;
}

.expense-category-page table.dataTable thead th:last-child,
.expense-category-page table.dataTable tbody td:last-child {
    width: 1%;
    text-align: right;
    white-space: nowrap;
}

.expense-tailwind-modal .expense-modal-dialog {
    width: auto;
    max-width: 34rem;
    margin: 2rem auto;
    padding: 0 1rem;
}

.expense-tailwind-modal .expense-modal-panel {
    overflow: hidden;
    border: 1px solid #e3e8ef;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 18px 44px rgba(16, 24, 40, 0.24);
}

.expense-tailwind-modal .expense-modal-header,
.expense-tailwind-modal .expense-modal-footer {
    display: flex;
    align-items: center;
    padding: 1rem 1.4rem;
}

.expense-tailwind-modal .expense-modal-header {
    justify-content: space-between;
    min-height: 60px;
    border-bottom: 0;
    background: linear-gradient(135deg, var(--ui-brand-start) 0%, var(--ui-brand-end) 100%);
    color: #fff;
}

.expense-tailwind-modal .expense-modal-title {
    color: #fff;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.25;
}

.expense-tailwind-modal .expense-modal-body {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
    padding: 1.5rem 1.4rem;
}

.expense-tailwind-modal .expense-modal-footer {
    justify-content: flex-end;
    gap: 0.75rem;
    border-top: 1px solid #e3e8ef;
    background: #f8fafc;
}

.expense-tailwind-modal .expense-modal-close {
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: #fff;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
    opacity: 0.9;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.expense-tailwind-modal .expense-modal-close:hover,
.expense-tailwind-modal .expense-modal-close:focus {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    opacity: 1;
    outline: none;
}

.expense-tailwind-modal .expense-modal-footer .global-close-button,
.expense-tailwind-modal .expense-modal-footer [data-vdismiss]:not(.global-save-button),
.expense-tailwind-modal .expense-modal-footer .expense-modal-secondary-action {
    order: 1 !important;
}

.expense-tailwind-modal .expense-modal-footer .global-save-button,
.expense-tailwind-modal .expense-modal-footer .tw-dw-btn-primary,
.expense-tailwind-modal .expense-modal-footer .expense-modal-primary-action {
    order: 2 !important;
}

.expense-tailwind-modal .expense-modal-footer .tw-dw-btn {
    border-radius: 4px !important;
    min-height: 40px !important;
    height: 40px !important;
    padding: 0.625rem 1.25rem !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}

.expense-tailwind-modal .expense-modal-footer .expense-modal-primary-action {
    background: var(--global-save-button-green, #16a34a) !important;
    background-image: none !important;
    border: 1px solid var(--global-save-button-green, #16a34a) !important;
    color: #fff !important;
    box-shadow: none !important;
}

.expense-tailwind-modal .expense-modal-footer .expense-modal-primary-action:hover,
.expense-tailwind-modal .expense-modal-footer .expense-modal-primary-action:focus {
    background: var(--global-save-button-green-hover, #15803d) !important;
    border-color: var(--global-save-button-green-hover, #15803d) !important;
    color: #fff !important;
}

.expense-tailwind-modal .expense-modal-footer .expense-modal-secondary-action {
    background: #2f3a4a !important;
    background-image: none !important;
    border: 1px solid #2f3a4a !important;
    color: #fff !important;
    box-shadow: none !important;
}

.expense-tailwind-modal .expense-modal-footer .expense-modal-secondary-action:hover,
.expense-tailwind-modal .expense-modal-footer .expense-modal-secondary-action:focus {
    background: #1f2937 !important;
    border-color: #1f2937 !important;
    color: #fff !important;
}

.expense-tailwind-modal .expense-field label {
    margin: 0;
    color: #364152;
    font-size: 0.875rem;
    font-weight: 600;
}

.expense-tailwind-modal .expense-category-check {
    min-height: auto;
    padding: 0.25rem 0;
}

@media (min-width: 768px) {
    .expense-filter-grid,
    .expense-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .expense-field-wide {
        grid-column: span 2;
    }
}

@media (min-width: 1280px) {
    .expense-filter-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

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


/* GYM module Tailwind component supplement. */
.gym-nav-link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    white-space: nowrap;
    border-radius: .5rem;
    padding: .5rem .75rem;
    color: rgb(75 85 99);
    font-size: .875rem;
    font-weight: 500;
    text-decoration: none;
}

.gym-nav-link:hover,
.gym-nav-link:focus {
    background: rgb(249 250 251);
    color: rgb(17 24 39);
    text-decoration: none;
    outline: none;
}

.gym-nav-link-active,
.gym-nav-link-active:hover,
.gym-nav-link-active:focus {
    background: rgb(238 242 255);
    color: rgb(67 56 202);
}

@media (min-width: 768px) {
    .gym-module-nav > div {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: thin;
    }

    .gym-module-nav > div > div:first-child {
        width: auto !important;
        flex: 0 0 auto;
    }

    .gym-module-nav #gym-navbar-collapse {
        display: block !important;
        width: auto !important;
        min-width: 0;
        flex: 1 1 auto;
        overflow-x: auto;
        overflow-y: hidden;
    }

    .gym-module-nav #gym-navbar-collapse > ul {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center;
    }

    .gym-module-nav #gym-navbar-collapse > ul > li {
        flex: 0 0 auto;
    }
}

.gym-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

/* Neutralize the legacy Bootstrap grid inside GYM while views are rendered by
   the shared application layout. These selectors provide the Tailwind layout
   behavior without changing any JavaScript hooks. */
.gym-module .row {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1rem;
    margin: 0;
}

.gym-module .row::before,
.gym-module .row::after,
.gym-module .clearfix::before,
.gym-module .clearfix::after {
    display: none;
    content: none;
}

.gym-module [class*="col-"] {
    float: none;
    width: auto;
    min-width: 0;
    padding: 0;
    grid-column: 1 / -1;
}

/* Bootstrap rows often contain structural wrappers before their columns.
   Keep those wrappers full width so nested fields cannot collapse into one
   grid track. */
.gym-module .row > :not([class*="col-"]) {
    min-width: 0;
    grid-column: 1 / -1;
}

.gym-settings-grid,
.gym-subscription-fields,
.gym-module .payment_details_div {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1rem;
    width: 100%;
}

.gym-settings-grid > :not([class*="col-"]),
.gym-subscription-fields > :not([class*="col-"]),
.gym-module .payment_details_div > :not([class*="col-"]) {
    grid-column: 1 / -1;
}

.gym-module .payment_row,
.gym-module .payment_row > .row,
.gym-module .payment_details_div {
    min-width: 0;
}

.gym-module .payment_row > .row {
    width: 100%;
}

.gym-module .payment_row .input-group,
.gym-module .payment_row .form-group,
.gym-module .payment_row textarea,
.gym-module .payment_row input,
.gym-module .payment_row select,
.gym-module .payment_row .select2-container {
    min-width: 0;
    max-width: 100%;
}

.gym-module .form-group {
    margin-bottom: 1rem;
}

.gym-module .form-group > label {
    display: block;
    margin-bottom: .375rem;
    color: rgb(55 65 81);
    font-size: .875rem;
    font-weight: 600;
}

.gym-module .input-group {
    display: flex;
    width: 100%;
    min-width: 0;
    align-items: stretch;
}

.gym-module .input-group-addon {
    flex: 0 0 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgb(209 213 219);
    background: rgb(249 250 251);
    width: 42px;
    min-height: 42px;
    padding: 0;
    color: rgb(107 114 128);
}

.gym-module .input-group-addon:first-child {
    border-radius: .5rem 0 0 .5rem;
    border-right: 0;
}

.gym-module .input-group .form-control {
    width: 1%;
    height: 42px;
    min-height: 42px;
    min-width: 0;
    flex: 1 1 auto;
    padding-top: .5rem;
    padding-bottom: .5rem;
    line-height: 1.25;
    border-radius: 0 .5rem .5rem 0;
}

.gym-module .input-group-btn {
    flex: 0 0 auto;
    display: flex;
    min-width: 42px;
}

.gym-module .input-group-btn > button {
    display: inline-flex;
    width: 42px;
    min-width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    margin-left: -1px;
    padding: 0;
    border-radius: 0 .5rem .5rem 0;
}

.gym-module .input-group > .select2-container {
    width: 1% !important;
    min-width: 0;
    flex: 1 1 auto;
}

.gym-module .input-group > .select2-container .select2-selection--single,
.gym-module .input-group > .select2-container .select2-selection--multiple {
    height: 42px;
    min-height: 42px;
    border-radius: 0 .5rem .5rem 0;
}

.gym-module .input-group > .select2-container .select2-selection--single .select2-selection__rendered {
    line-height: 40px;
}

.gym-module .input-group > .select2-container .select2-selection--single .select2-selection__arrow {
    height: 40px;
}

.gym-module .input-group:has(.input-group-btn) > .form-control,
.gym-module .input-group:has(.input-group-btn) > .select2-container .select2-selection--single,
.gym-module .input-group:has(.input-group-btn) > .select2-container .select2-selection--multiple {
    border-radius: 0;
}

.gym-module .input-group:has(.input-group-btn) {
    overflow: hidden;
    border-radius: .5rem;
}

.gym-module .box,
.gym-module .panel,
.gym-module .nav-tabs-custom {
    overflow: hidden;
    margin: 0 0 1rem;
    border: 1px solid rgb(229 231 235);
    border-radius: 1rem;
    background: white;
    box-shadow: 0 1px 3px rgb(0 0 0 / .08);
}

.gym-module .box-header,
.gym-module .panel-heading {
    border-bottom: 1px solid rgb(229 231 235);
    background: white;
    padding: .9rem 1.25rem;
}

.gym-module .box-title,
.gym-module .panel-title {
    margin: 0;
    color: rgb(31 41 55);
    font-size: 1rem;
    font-weight: 700;
}

.gym-module .box-body,
.gym-module .panel-body,
.gym-module .tab-content, .gym-module .au-tabs__content {
    padding: 1.25rem;
}

.gym-module .table-responsive {
    width: 100%;
    overflow-x: auto;
}

.gym-module table.table {
    width: 100%;
    border-collapse: collapse;
    border: 0;
    text-align: left;
    font-size: .875rem;
}

.gym-module table.table th {
    white-space: nowrap;
    border: 0;
    border-bottom: 1px solid rgb(209 213 219);
    background: rgb(249 250 251);
    padding: .75rem;
    color: rgb(55 65 81);
    font-weight: 700;
}

.gym-module table.table td {
    border: 0;
    border-bottom: 1px solid rgb(243 244 246);
    padding: .75rem;
    vertical-align: middle;
    color: rgb(31 41 55);
}

.gym-module table.table tbody tr:nth-child(odd),
.gym-module table.table tbody tr:hover {
    background: rgb(249 250 251);
}

.gym-module .nav-tabs, .gym-module .au-tabs__nav {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    margin: 0;
    padding: 0;
    border: 0;
    border-bottom: 1px solid rgb(229 231 235);
    list-style: none;
}

.gym-module .nav-tabs > li, .gym-module .au-tabs__nav > li {
    float: none;
    margin: 0;
}

.gym-module .nav-tabs > li > a, .gym-module .au-tabs__nav > li > a {
    display: inline-flex;
    margin: 0;
    padding: .65rem .9rem;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: rgb(75 85 99);
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
}

.gym-module .nav-tabs > li.active > a, .gym-module .au-tabs__nav > li.active > a,
.gym-module .nav-tabs > li > a:hover, .gym-module .au-tabs__nav > li > a:hover {
    border: 0;
    border-bottom: 2px solid rgb(79 70 229);
    background: transparent;
    color: rgb(67 56 202);
}

.gym-module .pull-right {
    float: none !important;
    margin-left: auto;
}

.gym-module .pull-left {
    float: none !important;
    margin-right: auto;
}

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

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

.gym-module .text-muted {
    color: rgb(107 114 128);
}

.gym-module .hide {
    display: none !important;
}

.gym-module .label {
    display: inline-flex;
    border-radius: 9999px;
    padding: .2rem .55rem;
    font-size: .75rem;
    font-weight: 700;
}

.gym-grid-2,
.gym-grid-3,
.gym-grid-4,
.gym-grid-12 {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

.gym-card {
    overflow: hidden;
    border: 1px solid rgb(229 231 235);
    border-radius: 1rem;
    background: white;
    box-shadow: 0 1px 3px rgb(0 0 0 / .08);
}

.gym-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    border-bottom: 1px solid rgb(229 231 235);
    padding: .9rem 1.25rem;
}

.gym-card-body {
    padding: 1.25rem;
}

.gym-form-group {
    margin-bottom: 1rem;
}

.gym-form-group > label,
.gym-label {
    display: block;
    margin-bottom: .375rem;
    color: rgb(55 65 81);
    font-size: .875rem;
    font-weight: 600;
}

.gym-input,
.gym-module input[type="text"],
.gym-module input[type="email"],
.gym-module input[type="number"],
.gym-module input[type="password"],
.gym-module input[type="date"],
.gym-module input[type="time"],
.gym-module input[type="file"],
.gym-module select,
.gym-module textarea {
    width: 100%;
    border: 1px solid rgb(209 213 219);
    border-radius: .5rem;
    background: white;
    padding: .55rem .75rem;
    color: rgb(17 24 39);
    line-height: 1.35;
}

.gym-module input:focus,
.gym-module select:focus,
.gym-module textarea:focus,
.gym-input:focus {
    border-color: rgb(99 102 241);
    outline: none;
    box-shadow: 0 0 0 3px rgb(224 231 255);
}

.gym-module select {
    min-height: 42px;
    height: auto;
    padding-top: .5rem;
    padding-bottom: .5rem;
    line-height: 1.25;
}

.gym-module #select_location_id {
    height: 42px;
    padding: .5rem .75rem;
    color: rgb(17 24 39);
    line-height: 1.25;
}

.gym-module .input-group:has(#select_location_id) .input-group-addon {
    min-height: 42px;
}

.gym-input-group {
    display: flex;
    width: 100%;
    align-items: stretch;
}

.gym-input-addon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgb(209 213 219);
    background: rgb(249 250 251);
    padding: 0 .75rem;
    color: rgb(107 114 128);
}

.gym-input-group > .gym-input-addon:first-child {
    border-radius: .5rem 0 0 .5rem;
    border-right: 0;
}

.gym-input-group > input,
.gym-input-group > select,
.gym-input-group > .select2-container {
    min-width: 0;
    flex: 1 1 auto;
}

.gym-table-shell {
    width: 100%;
    overflow-x: auto;
}

.gym-table {
    width: 100% !important;
    border-collapse: collapse;
    text-align: left;
    font-size: .875rem;
}

.gym-table th {
    white-space: nowrap;
    border-bottom: 1px solid rgb(209 213 219);
    background: rgb(249 250 251);
    padding: .75rem;
    color: rgb(55 65 81);
    font-weight: 700;
}

.gym-table td {
    border-bottom: 1px solid rgb(243 244 246);
    padding: .75rem;
    vertical-align: middle;
    color: rgb(31 41 55);
}

.gym-table tbody tr:hover {
    background: rgb(249 250 251);
}

.gym-modal-dialog {
    position: relative;
    width: calc(100% - 2rem);
    max-width: 40rem;
    margin: 2rem auto;
}

.gym-tailwind-modal {
    inset: 0;
    z-index: 1050;
    overflow-y: auto;
    background: rgb(0 0 0 / .5);
    padding: 1px 0;
}

.gym-tailwind-modal .modal-backdrop {
    display: none;
}

.gym-modal-dialog-wide {
    max-width: 72rem;
}

.gym-modal-content {
    overflow: hidden;
    border: 1px solid rgb(229 231 235);
    border-radius: 1rem;
    background: white;
    box-shadow: 0 25px 50px -12px rgb(0 0 0 / .25);
}

.gym-modal-header,
.gym-modal-footer {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: 1rem 1.25rem;
}

.gym-modal-header {
    justify-content: space-between;
    border-bottom: 1px solid rgb(229 231 235);
}

.gym-modal-title-icon {
    margin-right: .65rem;
}

.gym-modal-footer {
    justify-content: flex-end;
    border-top: 1px solid rgb(229 231 235);
}

.gym-modal-body {
    padding: 1.25rem;
}

.gym-modal-close {
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: .5rem;
    background: transparent;
    color: rgb(107 114 128);
    font-size: 1.5rem;
}

.gym-modal-close:hover {
    background: rgb(243 244 246);
    color: rgb(17 24 39);
}

.gym-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    margin: 0 0 1rem;
    padding: 0;
    border-bottom: 1px solid rgb(229 231 235);
    list-style: none;
}

.gym-tabs a {
    display: inline-flex;
    padding: .65rem .9rem;
    border-bottom: 2px solid transparent;
    color: rgb(75 85 99);
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
}

.gym-tabs .active a,
.gym-tabs a:hover {
    border-bottom-color: rgb(79 70 229);
    color: rgb(67 56 202);
}

.gym-module .select2-container {
    width: 100% !important;
}

.gym-module .select2-container .select2-selection--single,
.gym-module .select2-container .select2-selection--multiple {
    min-height: 40px;
    border-color: rgb(209 213 219);
    border-radius: .5rem;
}

.gym-module .dataTables_wrapper > .row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    margin: 0 0 1rem !important;
}

.gym-module .dataTables_wrapper > .row::before,
.gym-module .dataTables_wrapper > .row::after {
    display: none;
}

.gym-module .dataTables_wrapper > .row > [class*="col-"] {
    float: none !important;
    width: auto !important;
    min-width: 0;
    padding: 0 !important;
}

.gym-module .dataTables_filter {
    margin-left: auto;
}

.gym-module .dataTables_filter input,
.gym-module .dataTables_length select {
    border: 1px solid rgb(209 213 219);
    border-radius: .5rem;
    background: white;
    padding: .4rem .6rem;
}

.gym-module .dt-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
}

.gym-module .dt-buttons .btn {
    float: none !important;
    margin: 0 !important;
    border: 1px solid rgb(209 213 219);
    border-radius: .5rem;
    background: white;
    padding: .4rem .65rem;
    color: rgb(55 65 81);
    font-size: .75rem;
    font-weight: 600;
}

@media (min-width: 640px) {
    .gym-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
    .gym-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .gym-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .gym-grid-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .gym-span-2 { grid-column: span 2 / span 2; }
    .gym-span-3 { grid-column: span 3 / span 3; }
    .gym-span-4 { grid-column: span 4 / span 4; }
    .gym-span-5 { grid-column: span 5 / span 5; }
    .gym-span-6 { grid-column: span 6 / span 6; }
    .gym-span-7 { grid-column: span 7 / span 7; }
    .gym-span-8 { grid-column: span 8 / span 8; }
    .gym-span-9 { grid-column: span 9 / span 9; }
    .gym-span-10 { grid-column: span 10 / span 10; }
    .gym-span-12 { grid-column: span 12 / span 12; }
    .gym-module .col-xs-6,
    .gym-module .col-sm-6,
    .gym-module .col-md-6 { grid-column: span 6 / span 6; }
    .gym-module .col-sm-4,
    .gym-module .col-md-4 { grid-column: span 4 / span 4; }
    .gym-module .col-sm-3,
    .gym-module .col-md-3 { grid-column: span 3 / span 3; }
    .gym-module .col-md-2,
    .gym-module .col-sm-2 { grid-column: span 2 / span 2; }
    .gym-module .col-md-8 { grid-column: span 8 / span 8; }
    .gym-module .col-md-9 { grid-column: span 9 / span 9; }
    .gym-module .col-md-10 { grid-column: span 10 / span 10; }
    .gym-module .col-xs-12,
    .gym-module .col-sm-12,
    .gym-module .col-md-12 { grid-column: span 12 / span 12; }
}

@media (min-width: 1024px) {
    .gym-module .col-lg-3 { grid-column: span 3 / span 3; }
}

@media (max-width: 767px) {
    .gym-module .dataTables_filter {
        width: 100%;
        margin-left: 0;
    }

    .gym-module .dataTables_filter label,
    .gym-module .dataTables_filter input {
        width: 100%;
    }
}


.kitchen-tailwind-page {
    position: relative;
    padding: 1.25rem;
    background: #f1f5f9;
}

.kitchen-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.kitchen-card {
    position: relative;
    min-height: 18rem;
    border: 1px solid #e3e8ef;
    border-radius: 0.875rem;
    background: #fff;
    padding: 1.25rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}

.kitchen-orders-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

.kitchen-order-card {
    display: flex;
    min-width: 0;
    overflow: hidden;
    flex-direction: column;
    border: 1px solid #e3e8ef;
    border-radius: 0.75rem;
    background: #fff;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.08);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.kitchen-order-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(16, 24, 40, 0.1);
}

.kitchen-order-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    border-bottom: 1px solid #eef2f6;
    padding: 1rem;
}

.kitchen-order-label {
    display: block;
    margin-bottom: 0.15rem;
    color: #697586;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.kitchen-order-header h2 {
    margin: 0;
    color: #121926;
    font-size: 1.125rem;
    font-weight: 700;
}

.kitchen-status-badge {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    border-radius: 999px;
    padding: 0.35rem 0.625rem;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1;
}

.kitchen-status-received {
    background: #e0f2fe;
    color: #0369a1;
}

.kitchen-status-partial {
    background: #ffedd5;
    color: #c2410c;
}

.kitchen-status-cooked {
    background: #fee2e2;
    color: #b91c1c;
}

.kitchen-status-served {
    background: #dcfce7;
    color: #15803d;
}

.kitchen-order-details {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0.5rem 1rem;
}

.kitchen-order-details > div {
    display: grid;
    grid-template-columns: minmax(7rem, 0.8fr) minmax(0, 1fr);
    gap: 0.75rem;
    border-bottom: 1px solid #f1f5f9;
    padding: 0.625rem 0;
}

.kitchen-order-details > div:last-child {
    border-bottom: 0;
}

.kitchen-order-details dt {
    color: #697586;
    font-size: 0.75rem;
    font-weight: 600;
}

.kitchen-order-details dd {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
    color: #121926;
    font-size: 0.8125rem;
    font-weight: 500;
    text-align: right;
}

.kitchen-order-product dd {
    white-space: normal;
}

.kitchen-order-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid #e3e8ef;
}

.kitchen-action {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    border: 0;
    padding: 0.625rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.kitchen-action:hover,
.kitchen-action:focus {
    text-decoration: none;
}

.kitchen-action + .kitchen-action {
    border-left: 1px solid #e3e8ef;
}

.kitchen-action-cooked {
    background: #fef3c7;
    color: #92400e;
}

.kitchen-action-cooked:hover,
.kitchen-action-cooked:focus {
    background: #fde68a;
    color: #78350f;
}

.kitchen-action-details {
    background: #eff6ff;
    color: #1d4ed8;
}

.kitchen-action-details:hover,
.kitchen-action-details:focus {
    background: #dbeafe;
    color: #1e40af;
}

.kitchen-action-print {
    background: #ecfdf5;
    color: #047857;
}

.kitchen-action-print:hover {
    background: #d1fae5;
    color: #065f46;
}

.kitchen-empty-state {
    display: flex;
    min-height: 15rem;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0.75rem;
    color: #697586;
    text-align: center;
}

.kitchen-empty-state i {
    color: #cdd5df;
    font-size: 2.5rem;
}

.kitchen-empty-state h2 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.kitchen-loading-overlay {
    position: absolute;
    z-index: 20;
    inset: 0;
    align-items: center;
    justify-content: center;
    border-radius: 0.875rem;
    background: rgba(255, 255, 255, 0.82);
}

.kitchen-loading-overlay:not(.hide) {
    display: flex;
}

.kitchen-loading-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    border: 1px solid #e3e8ef;
    border-radius: 0.625rem;
    background: #fff;
    color: #364152;
    padding: 0.75rem 1rem;
    box-shadow: 0 8px 20px rgba(16, 24, 40, 0.12);
    font-size: 0.875rem;
    font-weight: 600;
}

@media (min-width: 640px) {
    .kitchen-orders-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .kitchen-orders-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1440px) {
    .kitchen-orders-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}


.manageuser-tailwind-page .manageuser-card {
    background: #fff;
    border: 1px solid #e3e8ef;
    border-radius: 0.75rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}

.manageuser-form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

.manageuser-field {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.375rem;
}

.manageuser-field-wide {
    grid-column: 1 / -1;
}

.manageuser-field label {
    margin: 0;
    color: #364152;
    font-size: 0.875rem;
    font-weight: 600;
}

.manageuser-input,
.manageuser-textarea {
    width: 100%;
    min-height: 2.625rem;
    border: 1px solid #cdd5df;
    border-radius: 0.5rem;
    background: #fff;
    color: #121926;
    font-size: 0.875rem;
    line-height: 1.25rem;
    padding: 0.625rem 0.75rem;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.manageuser-input:focus,
.manageuser-textarea:focus {
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px var(--ui-focus-ring);
}

.manageuser-input[readonly],
.manageuser-input:disabled {
    background: #f8fafc;
}

.manageuser-textarea {
    min-height: 4.5rem;
    resize: vertical;
}

.manageuser-checkbox-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.625rem;
}

.manageuser-tailwind-page .select2-container,
.manageuser-tailwind-page .manageuser-tailwind-form .select2-container {
    width: 100% !important;
}

.manageuser-tailwind-page .select2-container .select2-selection--single {
    height: 2.625rem;
    border: 1px solid #cdd5df;
    border-radius: 0.5rem;
    background: #fff;
}

.manageuser-tailwind-page .select2-selection--single .select2-selection__rendered {
    height: 2.5rem;
    color: #121926;
    line-height: 2.5rem;
    padding-left: 0.75rem;
}

.manageuser-tailwind-page .select2-selection--single .select2-selection__arrow {
    height: 2.5rem;
    right: 0.5rem;
}

.manageuser-tailwind-page .dataTables_wrapper .dataTables_length,
.manageuser-tailwind-page .dataTables_wrapper .dataTables_filter,
.manageuser-tailwind-page .dataTables_wrapper .dataTables_info,
.manageuser-tailwind-page .dataTables_wrapper .dataTables_paginate {
    margin: 0.5rem 0;
    color: #4b5565;
}

.manageuser-tailwind-page .dataTables_wrapper .dataTables_length select,
.manageuser-tailwind-page .dataTables_wrapper .dataTables_filter input {
    min-height: 2.25rem;
    border: 1px solid #cdd5df;
    border-radius: 0.5rem;
    background: #fff;
    padding: 0.375rem 0.625rem;
    outline: none;
}

.manageuser-tailwind-page table.dataTable {
    width: 100% !important;
    border: 0;
}

.manageuser-tailwind-page table.dataTable thead th {
    border: 0;
    border-bottom: 1px solid #cdd5df;
    background: #f8fafc;
    color: #364152;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.025em;
    padding: 0.75rem;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.manageuser-tailwind-page table.dataTable tbody td {
    border: 0;
    border-bottom: 1px solid #eef2f6;
    color: #364152;
    padding: 0.75rem;
    vertical-align: middle;
}

.manageuser-tailwind-page table.dataTable tbody tr:hover {
    background: #f8fafc;
}

.manageuser-tailwind-page .dataTables_wrapper .dt-buttons .btn,
.manageuser-tailwind-page table.dataTable .btn {
    display: inline-flex;
    min-height: 2.25rem;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    border: 1px solid #cdd5df;
    border-radius: 0.5rem;
    background: #fff;
    color: #364152;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1rem;
    padding: 0.55rem 0.75rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}

.manageuser-tailwind-page .dataTables_wrapper .dt-buttons .btn:hover,
.manageuser-tailwind-page table.dataTable .btn:hover,
.manageuser-tailwind-page table.dataTable .btn:focus {
    border-color: #a4acb9;
    background: #f8fafc;
    color: #121926;
}

.manageuser-tailwind-page .pagination {
    display: flex;
    gap: 0.25rem;
    margin: 0;
}

.manageuser-tailwind-page .pagination > li > a,
.manageuser-tailwind-page .pagination > li > span {
    min-width: 2.25rem;
    border: 1px solid #cdd5df;
    border-radius: 0.5rem;
    color: #364152;
    padding: 0.45rem 0.7rem;
    text-align: center;
}

.manageuser-tailwind-page .pagination > .active > a,
.manageuser-tailwind-page .pagination > .active > span {
    border-color: var(--brand-600);
    background: var(--brand-600);
    color: #fff;
}

section.content.manageuser-tailwind-page {
    background: #ecf0f5;
    padding: 24px 10px 20px;
}

.manageuser-tailwind-page .manageuser-page-header {
    margin-top: 0.25rem;
    margin-bottom: 20px !important;
}

.manageuser-tailwind-page .manageuser-page-title {
    color: #11195f;
    font-size: 1.45rem;
    font-weight: 500;
    line-height: 1.2;
}

.manageuser-tailwind-page .manageuser-user-selector {
    max-width: 32.5rem;
}

.manageuser-tailwind-page .manageuser-page-header .select2-container .select2-selection--single {
    height: 34px;
    min-height: 34px;
    border: 1px solid #cfd6df;
    border-radius: 0;
}

.manageuser-tailwind-page .manageuser-page-header .select2-selection--single .select2-selection__rendered {
    height: 32px;
    line-height: 32px;
    padding-left: 12px;
    color: #1f2937;
}

.manageuser-tailwind-page .manageuser-page-header .select2-selection--single .select2-selection__arrow {
    height: 32px;
}

.manageuser-tailwind-page .manageuser-profile-card {
    background: #fff;
    border: 1px solid #e3e8ef;
    border-top: 3px solid #3c8dbc;
    border-radius: 0.25rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    padding: 1.5rem;
    text-align: center;
}

.manageuser-tailwind-page .manageuser-show-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.75rem;
    align-items: start;
}

.manageuser-tailwind-page .manageuser-profile-card--show {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    min-height: 377px;
}

.manageuser-tailwind-page .manageuser-profile-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding-bottom: 0.25rem;
}

.manageuser-tailwind-page .manageuser-profile-heading .profile-user-img {
    width: 100px;
    height: 100px;
    object-fit: cover;
}

.manageuser-tailwind-page .manageuser-profile-heading .profile-username {
    color: #11195f !important;
    font-size: 1.25rem !important;
    font-weight: 500 !important;
}

.manageuser-tailwind-page .manageuser-profile-list {
    margin: 0.25rem 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid #d7d7d7;
    text-align: left;
}

.manageuser-tailwind-page .manageuser-profile-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.65rem 0;
    border-bottom: 1px solid #d7d7d7;
    color: #00112f;
    font-size: 0.82rem;
}

.manageuser-tailwind-page .manageuser-profile-list li b {
    font-weight: 700;
}

.manageuser-tailwind-page .manageuser-profile-list li span:not(.manageuser-status-badge) {
    min-width: 0;
    overflow-wrap: anywhere;
    color: #3175b7;
    text-align: right;
}

.manageuser-tailwind-page .manageuser-profile-card .tw-dw-btn-primary {
    align-self: flex-start;
    border-color: #5a00ff !important;
    border-radius: 0.45rem;
    background: #5a00ff !important;
    font-size: 0.82rem;
    font-weight: 700;
    padding: 0.5rem 0.85rem;
}

.manageuser-tailwind-page .manageuser-detail-card {
    min-width: 0;
    height: 100%;
    overflow: hidden;
    border: 0;
    border-top: 3px solid #3c8dbc;
    border-radius: 0.25rem;
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}

.manageuser-tailwind-page .manageuser-detail-card .nav-tabs-custom {
    margin-bottom: 0;
    background: transparent;
    box-shadow: none;
}

.manageuser-tailwind-page .manageuser-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid #d7d7d7;
    margin: 0;
    padding: 0;
    flex-wrap: nowrap;
}

.manageuser-tailwind-page .manageuser-tabs > li {
    display: block !important;
    float: none;
    width: auto !important;
    min-width: 0;
    flex: 1 1 0;
    margin: 0;
}

.manageuser-tailwind-page .manageuser-tabs > li > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    width: 100%;
    min-height: 3rem;
    padding: 0.65rem 0.75rem;
    border: 0;
    border-radius: 0;
    color: #2d3748;
    font-weight: 600;
    font-size: 18px;
    line-height: 1.2;
    text-align: center;
    white-space: normal;
}

.manageuser-tailwind-page .manageuser-tabs > li > a > i {
    flex: 0 0 auto;
}

.manageuser-tailwind-page .manageuser-tabs > li > a > span {
    min-width: 0;
}

.manageuser-tailwind-page .manageuser-tabs > li.active > a {
    background: #fff;
    color: #2d3748;
}

.manageuser-tailwind-page .manageuser-tab-content {
    padding: 0.75rem 0.65rem 1rem;
}

.manageuser-details-stack {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.manageuser-details-stack > .clearfix {
    display: none;
}

.manageuser-details-stack > hr {
    width: auto;
    margin: 0 0.9rem;
    border: 0;
    border-top: 1px solid #555;
}

.manageuser-details-stack > .col-md-12 {
    float: none;
    width: 100%;
    min-height: 0;
    padding: 0.75rem 0.9rem 0;
}

.manageuser-details-stack > .col-md-12 + .col-md-12 {
    padding-top: 0;
    padding-bottom: 0.75rem;
}

.manageuser-details-stack > .col-md-12 h4 {
    margin: 0 0 0.35rem;
    color: #11195f;
    font-size: 1.12rem;
    font-weight: 500;
}

.manageuser-section {
    min-width: 0;
    padding: 0.75rem 0.9rem 1rem;
}

.manageuser-section--ruled {
    border-top: 1px solid #555;
}

.manageuser-section h4 {
    margin: 0 0 0.75rem;
    color: #11195f;
    font-size: 1.12rem;
    font-weight: 500;
}

.manageuser-summary-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;
    padding: 0.6rem 0.9rem 0.15rem;
}

.manageuser-summary-row p,
.manageuser-section p,
.manageuser-details-stack > .col-md-12 p,
.manageuser-detail-card .row p {
    margin: 0 0 0.3rem;
    color: #00112f;
    font-size: 0.82rem;
    line-height: 1.35;
}

.manageuser-summary-row strong,
.manageuser-section strong,
.manageuser-details-stack > .col-md-12 strong,
.manageuser-detail-card .row strong {
    color: #00112f;
    font-weight: 700;
}

.manageuser-text-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem 2rem;
}

.manageuser-text-grid > div {
    min-width: 0;
}

.manageuser-tailwind-page .activity-log-table {
    width: 100%;
    margin-bottom: 0.75rem;
    border-collapse: collapse;
}

.manageuser-tailwind-page .activity-log-table > tr:first-child > th {
    border: 0;
    border-bottom: 1px solid #cdd5df;
    background: #f8fafc;
    color: #364152;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.025em;
    padding: 0.75rem;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.manageuser-tailwind-page .activity-log-table > tr:not(:first-child) > td {
    border: 0;
    border-bottom: 1px solid #eef2f6;
    color: #364152;
    padding: 0.75rem;
    vertical-align: middle;
}

.manageuser-tailwind-page .activity-log-table > tr:not(:first-child):hover {
    background: #f8fafc;
}

.manageuser-tailwind-page .activity-log-pagination {
    display: flex;
    justify-content: flex-end;
    padding: 0.5rem 0.75rem 0;
}

.manageuser-tailwind-page .activity-log-pagination .pagination {
    margin: 0;
}

.manageuser-user-info-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.85rem;
    text-align: left;
}

.manageuser-info-item {
    display: flex;
    min-width: 0;
    min-height: 4.25rem;
    flex-direction: column;
    justify-content: center;
    gap: 0.35rem;
    border: 1px solid #eef2f6;
    border-radius: 0.65rem;
    background: #f8fafc;
    padding: 0.85rem 0.95rem;
}

.manageuser-info-label {
    color: #697586;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.025em;
    line-height: 1.2;
    text-transform: uppercase;
}

.manageuser-info-value {
    min-width: 0;
    overflow-wrap: anywhere;
    color: #121926;
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.35;
}

.manageuser-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.2rem;
    padding: 0.18rem 0.45rem;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
}

.manageuser-status-badge.is-active {
    background: #dcfce7;
    color: #166534;
}

.manageuser-status-badge.is-inactive {
    background: #fee2e2;
    color: #991b1b;
}

@media (min-width: 768px) {
    .manageuser-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .manageuser-tailwind-page .manageuser-show-layout {
        grid-template-columns: minmax(260px, 0.95fr) minmax(0, 3fr);
    }

    .manageuser-summary-row,
    .manageuser-text-grid--two {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .manageuser-user-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .manageuser-user-info-grid--addresses {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    .manageuser-tailwind-page .manageuser-show-layout {
        grid-template-columns: 382px minmax(0, 1fr);
        gap: 29px;
    }
}

@media (min-width: 1024px) {
    .manageuser-form-grid-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

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

    .manageuser-user-info-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .manageuser-user-info-grid--compact,
    .manageuser-user-info-grid--addresses {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .manageuser-text-grid--three {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .manageuser-tailwind-page .manageuser-tabs > li {
        flex: 1 1 100%;
    }

    .manageuser-tailwind-page .manageuser-tabs {
        flex-wrap: wrap;
    }

    .manageuser-tailwind-page .manageuser-tabs > li > a {
        justify-content: flex-start;
        text-align: left;
    }

    .manageuser-tailwind-page .manageuser-tab-content {
        padding: 1rem;
    }
}

/* Form pages (create/edit): restyle the existing Bootstrap grid/checkbox
   markup in place rather than rewriting every col-md-N/form-group/checkbox
   block, since many of them are JS show/hide targets (user_auth_fields,
   service_staff_pin_div, selected_contacts_div) tied to the .hide class. */
.manageuser-tailwind-form .box-body {
    padding: 1.25rem 1.5rem;
}

.manageuser-tailwind-form .form-group {
    margin-bottom: 1.1rem;
}

.manageuser-tailwind-form label {
    color: #364152;
    font-size: 0.875rem;
    font-weight: 600;
}

.manageuser-tailwind-form .form-control {
    min-height: 2.625rem;
    border: 1px solid #cdd5df;
    border-radius: 0.5rem;
    background: #fff;
    color: #121926;
    font-size: 0.875rem;
    padding: 0.55rem 0.75rem;
    box-shadow: none;
}

.manageuser-tailwind-form .form-control:focus {
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px var(--ui-focus-ring);
}

.manageuser-tailwind-form .input-group-addon {
    border: 1px solid #cdd5df;
    border-left: 0;
    border-radius: 0 0.5rem 0.5rem 0;
    background: #f8fafc;
    color: #4b5565;
}

.manageuser-tailwind-form .checkbox {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: nowrap;
}

.manageuser-tailwind-form .checkbox br {
    display: none;
}

.manageuser-tailwind-form .checkbox label {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    font-weight: 500;
}

.manageuser-tailwind-form .checkbox .tooltip_link,
.manageuser-tailwind-form .checkbox > i {
    flex-shrink: 0;
}

.manageuser-tailwind-form h4 {
    color: #121926;
    font-size: 0.95rem;
    font-weight: 700;
}

.manageuser-tailwind-form .help-block {
    color: #697586;
    font-size: 0.78rem;
}

.manageuser-mobile-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
}

.manageuser-mobile-badge.is-active {
    background: #16a34a;
}

.manageuser-mobile-badge.is-revoked,
.manageuser-mobile-badge.is-expired {
    background: #ef4444;
}

/* Read-only "More Info" / bank-details display block (user.show_details). */
.manageuser-tailwind-page .row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -0.5rem;
}

.manageuser-tailwind-page .row > [class^="col-"] {
    padding: 0 0.5rem;
    /* Flex-item shrink fix: the sibling `.row { display: flex }` rule above
       turns these columns into flex items, whose default `min-width: auto`
       refuses to shrink below their CONTENT min-width. A wide table inside
       (e.g. the products list, 1189px of columns) therefore blew the column
       out to its own intrinsic width, and `section.content { overflow-x:
       hidden }` then CLIPPED everything past the viewport - so only the
       leading column was reachable and the inner `.au-dt-scroll`
       overflow-x:auto never engaged. min-width: 0 restores the float-grid
       behaviour these skins replaced: the column keeps its percentage
       width and the table scrolls horizontally inside its own container. */
    min-width: 0;
}

.manageuser-tailwind-page .row p {
    margin-bottom: 0.5rem;
    color: #364152;
    font-size: 0.875rem;
}

.manageuser-tailwind-page .row h4 {
    color: #121926;
    font-size: 0.95rem;
    font-weight: 700;
}

.manageuser-tailwind-page .row hr {
    width: 100%;
    border-color: #eef2f6;
    margin: 0.75rem 0.5rem;
}

.manageuser-tailwind-page .row > .clearfix {
    display: none;
}


/* Tailwind utility supplement scoped to classes used by the Manufacturing module. */
.tw-fixed { position: fixed; }
.tw-z-50 { z-index: 50; }
.tw-border-l-0 { border-left-width: 0; }
.tw-border-r-0 { border-right-width: 0; }
.tw-rounded-l-lg { border-bottom-left-radius: .5rem; border-top-left-radius: .5rem; }
.tw-rounded-r-lg { border-bottom-right-radius: .5rem; border-top-right-radius: .5rem; }
.tw-max-w-lg { max-width: 32rem; }
.tw-max-w-4xl { max-width: 56rem; }
.tw-w-\[calc\(100\%-2rem\)\] { width: calc(100% - 2rem); }
.tw-bg-black\/50 { background-color: rgb(0 0 0 / .5); }
.tw-bg-white\/20 { background-color: rgb(255 255 255 / .2); }
.tw-bg-white\/30 { background-color: rgb(255 255 255 / .3); }
.tw-border-white\/30 { border-color: rgb(255 255 255 / .3); }
.hover\:tw-bg-white\/30:hover { background-color: rgb(255 255 255 / .3); }
.tw-bg-indigo-50 { background-color: rgb(238 242 255); }
.tw-bg-indigo-100 { background-color: rgb(224 231 255); }
.tw-bg-indigo-500 { background-color: rgb(99 102 241); }
.tw-bg-indigo-600 { background-color: rgb(79 70 229); }
.tw-text-indigo-500 { color: rgb(99 102 241); }
.tw-text-indigo-600 { color: rgb(79 70 229); }
.tw-text-indigo-700 { color: rgb(67 56 202); }
.tw-text-indigo-800 { color: rgb(55 48 163); }
.hover\:tw-bg-indigo-100:hover { background-color: rgb(224 231 255); }
.tw-bg-emerald-100 { background-color: rgb(209 250 229); }
.tw-text-emerald-600 { color: rgb(5 150 105); }
.tw-text-emerald-800 { color: rgb(6 95 70); }
.tw-bg-amber-100 { background-color: rgb(254 243 199); }
.tw-text-amber-600 { color: rgb(217 119 6); }
.tw-text-amber-700 { color: rgb(180 83 9); }
.tw-text-amber-800 { color: rgb(146 64 14); }
.tw-bg-blue-50 { background-color: rgb(239 246 255); }
.tw-bg-green-50 { background-color: rgb(240 253 244); }
.tw-bg-green-100 { background-color: rgb(220 252 231); }
.tw-text-green-600 { color: rgb(22 163 74); }
.tw-text-green-700 { color: rgb(21 128 61); }
.tw-text-green-800 { color: rgb(22 101 52); }
.tw-bg-gray-50 { background-color: rgb(249 250 251); }
.tw-bg-gray-100 { background-color: rgb(243 244 246); }
.tw-border-gray-100 { border-color: rgb(243 244 246); }
.tw-border-gray-200 { border-color: rgb(229 231 235); }
.tw-border-gray-300 { border-color: rgb(209 213 219); }
.tw-text-gray-800 { color: rgb(31 41 55); }
.tw-shadow-2xl { box-shadow: 0 25px 50px -12px rgb(0 0 0 / .25); }
.focus\:tw-border-indigo-500:focus { border-color: rgb(99 102 241); }
.focus\:tw-ring-indigo-100:focus { --tw-ring-color: rgb(224 231 255); }

/* Slate/rose utilities used by the Vue 3 migration (contact info panels,
   FieldForce + Clinic labels). The tw- layer is a hand-maintained static
   build with no purge/rebuild step, so new tokens must be declared here. */
.tw-text-slate-400 { color: rgb(148 163 184); }
.tw-text-slate-600 { color: rgb(71 85 105); }
.tw-text-slate-800 { color: rgb(30 41 59); }
.tw-text-rose-600 { color: rgb(225 29 72); }
.tw-border-slate-200 { border-color: rgb(226 232 240); }
.tw-border-slate-200\/60 { border-color: rgb(226 232 240 / .6); }
.tw-py-8 { padding-top: 2rem; padding-bottom: 2rem; }

/* Inline button spinner emitted by the native Ladda replacement
   (resources/js/bootstrap.js). Self-contained: the shim's markup also carries
   unprefixed Tailwind class names, which do not exist in this tw- build, so
   the whole appearance has to live here or the spinner renders invisible. */
.au-spinner-inline {
    display: inline-block;
    width: .875rem;
    height: .875rem;
    margin-right: .375rem;
    vertical-align: middle;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 9999px;
    animation: au-spinner-inline-spin .6s linear infinite;
}

@keyframes au-spinner-inline-spin {
    to { transform: rotate(360deg); }
}

/* ===========================================================================
   AdminLTE base parity.

   The Vue 3 migration dropped `AdminLTE.min.css` (and `_all-skins.min.css`)
   from the vendor.css combine in webpack.mix.js. That was correct for the
   AdminLTE *chrome* -- the sidebar/navbar markup is gone -- but it also took
   with it a handful of generic base rules that non-AdminLTE markup all over
   the app still depends on. Verified by diffing computed styles for all 1554
   elements of a rendered page against the pre-migration bundle.

   `.content` is the visible one: every page's <section class="content"> lost
   its 15px gutter and 250px floor, so content sat flush against the chrome and
   read as zoomed-in. The POS mobile layer in section 8.8b of this file even
   measures against "section.content 15px" explicitly.
   =========================================================================== */
.content {
    min-height: 250px;
    padding: 15px;
    margin-right: auto;
    margin-left: auto;
}

.content-header {
    position: relative;
    padding: 15px 15px 0 15px;
}

/* Invoice / print previews: white sheet, inset from the page. */
.invoice {
    position: relative;
    background: #fff;
    border: 1px solid #f4f4f4;
    padding: 20px;
    margin: 10px 25px;
}

/* Total / subtotal rows (ledger, reports) read as banded rows without this. */
.bg-gray {
    color: #000;
    background-color: #d2d6de !important;
}

/* Modal dim overlay. This app has no separate backdrop element -- the shared
   skin explicitly hides one (`.au-modal-backdrop{display:none!important}`) and
   relies on the tint sitting on the full-screen `.modal` container itself, the
   way AdminLTE shipped it. Without this every modal opened over undimmed page
   content. The inner panel keeps its own opaque `background:#fff`. */
.modal {
    background: rgba(0, 0, 0, .3);
}

/* Legacy `.table` markup: the `.au-table` equivalent survived the migration,
   this one did not, so legacy tables lost every horizontal rule. */
.table > tbody > tr > td,
.table > tbody > tr > th,
.table > tfoot > tr > td,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > thead > tr > th {
    border-top: 1px solid #f4f4f4;
}

/* `.box-header` on legacy widget markup (User Profile, Import Products). */
.box-header {
    color: #444;
    display: block;
    padding: 10px;
    position: relative;
}

/* Page-header subtitle: the AdminLTE rule outranked the element's own
   tw-text-sm/md:tw-text-base classes in production, so it is what shipped. */
.content-header > h1 > small {
    font-size: 15px;
    display: inline-block;
    padding-left: 4px;
    font-weight: 300;
}

/* Legacy tab card (product list tabs). Only the radius was lost -- the
   background/shadow are supplied (and deliberately overridden) elsewhere, so
   restoring the whole AdminLTE rule here would undo that. */
.nav-tabs-custom {
    border-radius: 3px;
}

/* Manufacturing DataTables */
.mfg-table-shell {
    width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    padding-bottom: .5rem;
}

.mfg-data-table {
    width: 100% !important;
    max-width: 100% !important;
    border-spacing: 0;
    box-sizing: border-box !important;
}

#recipe_table {
    width: 100% !important;
}

.mfg-data-table thead th {
    padding: .8rem .75rem !important;
    white-space: nowrap;
    color: rgb(31 41 55);
    border-bottom: 1px solid rgb(229 231 235) !important;
}

.mfg-data-table tbody td {
    padding: .75rem !important;
    vertical-align: middle;
    color: rgb(31 41 55);
    border-bottom: 1px solid rgb(243 244 246) !important;
}

.mfg-data-table tbody tr:hover {
    background-color: rgb(249 250 251);
}

.mfg-data-table .mfg-action-column,
.mfg-data-table tbody td:last-child {
    width: 7.5rem !important;
    min-width: 7.5rem;
    text-align: center;
    white-space: nowrap;
}

.mfg-data-table tfoot td {
    padding: .9rem .75rem .25rem !important;
    text-align: left;
    border-top: 1px solid rgb(229 231 235);
}

.mfg-action-menu {
    position: fixed;
    z-index: 9999;
    min-width: 10rem;
    overflow: hidden;
    border: 1px solid rgb(229 231 235);
    border-radius: .75rem;
    background-color: white;
    padding: .25rem 0;
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);
}

.mfg-action-toggle {
    border-color: rgb(199 210 254);
    background-color: rgb(238 242 255);
    color: rgb(67 56 202);
}

.mfg-action-toggle:hover,
.mfg-action-toggle:focus {
    background-color: rgb(224 231 255);
    color: rgb(55 48 163);
    outline: none;
}

.mfg-new-record-button {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    border: 1px solid rgb(255 255 255 / .55);
    border-radius: 9999px;
    background-color: rgb(255 255 255 / .18);
    padding: .45rem 1rem;
    color: white !important;
    font-size: .8125rem;
    font-weight: 700;
    line-height: 1.1rem;
    text-decoration: none !important;
    box-shadow: 0 1px 2px rgb(0 0 0 / .08);
}

.mfg-new-record-button:hover,
.mfg-new-record-button:focus {
    border-color: white;
    background-color: rgb(255 255 255 / .3);
    color: white !important;
    outline: none;
}

.mfg-print-button {
    display: inline-flex;
    min-width: 6.5rem;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    border: 1px solid rgb(67 56 202);
    border-radius: .65rem;
    background: rgb(79 70 229);
    padding: .65rem 1.15rem;
    color: white !important;
    font-size: .875rem;
    font-weight: 700;
    line-height: 1.1rem;
    box-shadow: 0 3px 8px rgb(79 70 229 / .28);
}

.mfg-print-button:hover,
.mfg-print-button:focus {
    border-color: rgb(55 48 163);
    background: rgb(67 56 202);
    color: white !important;
    outline: none;
    box-shadow: 0 4px 10px rgb(67 56 202 / .35);
}

.mfg-print-button:active {
    background: rgb(55 48 163);
    transform: translateY(1px);
}

#mass_update_product_price {
    border: 1px solid rgb(220 38 38);
    background: rgb(220 38 38);
    color: white !important;
    box-shadow: 0 2px 5px rgb(220 38 38 / .25);
}

#mass_update_product_price:hover,
#mass_update_product_price:focus {
    border-color: rgb(185 28 28);
    background: rgb(185 28 28);
    color: white !important;
    outline: none;
}

.mfg-action-item {
    display: flex;
    width: 100%;
    align-items: center;
    gap: .65rem;
    padding: .65rem .85rem;
    border: 0;
    background: white;
    color: rgb(55 65 81);
    font-size: .8125rem;
    font-weight: 500;
    line-height: 1.25rem;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
}

.mfg-action-item:hover,
.mfg-action-item:focus {
    background-color: rgb(249 250 251);
    color: rgb(17 24 39);
    text-decoration: none;
    outline: none;
}

.mfg-action-item-danger {
    color: rgb(220 38 38);
}

.mfg-action-item-danger:hover,
.mfg-action-item-danger:focus {
    background-color: rgb(254 242 242);
    color: rgb(185 28 28);
}

.dataTables_wrapper > .row.margin-bottom-20 {
    display: grid !important;
    grid-template-columns: minmax(9rem, auto) minmax(28rem, 1fr) minmax(12rem, auto);
    align-items: center;
    gap: .75rem 1rem;
    width: 100%;
    margin: 0 0 1rem !important;
    text-align: initial !important;
}

.dataTables_wrapper > .row.margin-bottom-20::before,
.dataTables_wrapper > .row.margin-bottom-20::after {
    display: none !important;
    content: none !important;
}

.dataTables_wrapper > .row.margin-bottom-20 > [class*="col-"] {
    float: none !important;
    width: auto !important;
    min-width: 0;
    padding: 0 !important;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dt-buttons {
    float: none !important;
    margin: 0 !important;
}

.dataTables_wrapper .dataTables_length label {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin: 0;
    white-space: nowrap;
}

.dataTables_wrapper .dataTables_filter {
    justify-self: end;
    text-align: right !important;
}

.dataTables_wrapper .dataTables_filter label {
    display: inline-flex;
    align-items: center;
    margin: 0;
}

.dataTables_wrapper .dt-buttons {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .4rem;
}

.dataTables_wrapper .dt-buttons .btn {
    float: none !important;
    margin: 0 !important;
    border: 1px solid rgb(75 85 99);
    border-radius: .5rem;
    background: white;
    padding: .38rem .65rem;
    color: rgb(31 41 55);
    font-size: .75rem;
    font-weight: 600;
    line-height: 1rem;
    white-space: nowrap;
}

.dataTables_wrapper .dt-buttons .btn:hover,
.dataTables_wrapper .dt-buttons .btn:focus {
    border-color: rgb(79 70 229);
    background: rgb(238 242 255);
    color: rgb(67 56 202);
    outline: none;
}

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border: 1px solid rgb(209 213 219);
    border-radius: .5rem;
    background-color: white;
    padding: .45rem .65rem;
}

.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
    border-color: rgb(99 102 241);
    outline: 2px solid transparent;
    box-shadow: 0 0 0 3px rgb(224 231 255);
}

/* ── Global table footer row (legacy jQuery DataTables) ──────────────────────
   Mirrors the shared Vue table's `.au-dt-footbar`: record summary on the leading
   edge, pager on the trailing edge, one row. The wrapper element comes from the
   `dom` string in public/js/common.js (`t<"au-dt-footrow"ip>`) — before it, `i`
   and `p` were bare block siblings and stacked onto two lines. Flex (not the
   Bootstrap grid), so it flips under [dir="rtl"] with no mirrored rule. */
.au-dt-footrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1rem;
    width: 100%;
}

.au-dt-footrow .dataTables_info {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    font-size: .8125rem;
    font-weight: 600;
    color: #4b5565;
    line-height: 1.4;
}

.au-dt-footrow .dataTables_paginate {
    flex: 0 0 auto;
    float: none;
    margin: 0;
    padding: 0;
    text-align: end;
}

.au-dt-footrow .dataTables_paginate .pagination {
    margin: 0;
    justify-content: flex-end;
}

@media (max-width: 575px) {
    .au-dt-footrow {
        justify-content: center;
    }

    .au-dt-footrow .dataTables_info {
        flex-basis: 100%;
        text-align: center;
    }

    .au-dt-footrow .dataTables_paginate {
        flex-basis: 100%;
        text-align: center;
    }

    .au-dt-footrow .dataTables_paginate .pagination {
        justify-content: center;
    }
}

@media (max-width: 1100px) {
    .mfg-data-table {
        min-width: 900px;
    }

    #recipe_table {
        min-width: 1050px;
    }

    .dataTables_wrapper > .row.margin-bottom-20 {
        grid-template-columns: auto 1fr;
    }

    .dataTables_wrapper > .row.margin-bottom-20 > [class*="col-"]:last-of-type {
        grid-column: 1 / -1;
    }

    .dataTables_wrapper .dataTables_filter {
        justify-self: stretch;
        text-align: left !important;
    }

    .dataTables_wrapper .dataTables_filter label,
    .dataTables_wrapper .dataTables_filter input {
        width: 100%;
    }
}

@media (max-width: 767px) {
    .dataTables_wrapper > .row.margin-bottom-20 {
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
    }

    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter {
        float: none;
        margin-bottom: .75rem;
        text-align: left;
    }

    .dataTables_wrapper .dt-buttons {
        justify-content: flex-start;
        margin-bottom: .75rem;
    }
}

@media (min-width: 768px) {
    .md\:tw-w-auto { width: auto; }
    .md\:tw-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .md\:tw-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .md\:tw-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .md\:tw-grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .md\:tw-col-span-3 { grid-column: span 3 / span 3; }
    .md\:tw-col-span-4 { grid-column: span 4 / span 4; }
    .md\:tw-col-span-5 { grid-column: span 5 / span 5; }
    .md\:tw-col-span-12 { grid-column: span 12 / span 12; }
}

@media (min-width: 1024px) {
    .lg\:tw-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lg\:tw-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}


.orders-tailwind-page {
    position: relative;
    min-height: calc(100vh - 4rem);
    padding: 1.25rem;
    background: #f1f5f9;
}

.orders-page-header {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.orders-page-header h1 {
    margin: 0;
    color: #121926;
    line-height: 1.2;
}

.orders-refresh-button {
    margin-left: auto;
    white-space: nowrap;
}

.orders-refresh-button i {
    margin-right: 0.35rem;
}

.orders-filter-card,
.orders-section-card {
    border: 1px solid #e3e8ef;
    border-radius: 0.75rem;
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}

.orders-filter-card {
    margin-bottom: 1rem;
    padding: 1rem;
}

.orders-service-staff-field {
    max-width: 24rem;
    margin-bottom: 0;
}

.orders-service-staff-field .tw-input-group-standard {
    display: grid;
    grid-template-columns: 2.625rem minmax(0, 1fr);
    align-items: stretch;
}

.orders-service-staff-field .select2-container {
    width: 100% !important;
}

.orders-service-staff-field .tw-input-addon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-height: calc(var(--ui-field-height) - 2px);
    padding: 0;
}

.orders-service-staff-field .select2-container .select2-selection--single {
    height: calc(var(--ui-field-height) - 2px) !important;
    min-height: calc(var(--ui-field-height) - 2px) !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.orders-service-staff-field .select2-container .select2-selection--single .select2-selection__rendered {
    height: calc(var(--ui-field-height) - 2px) !important;
    line-height: calc(var(--ui-field-height) - 2px) !important;
    padding-left: 0.75rem !important;
    padding-right: 2rem !important;
}

.orders-service-staff-field .select2-container .select2-selection--single .select2-selection__arrow {
    height: calc(var(--ui-field-height) - 2px) !important;
    right: 0.5rem;
}

.orders-section-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

.orders-section-card {
    position: relative;
    min-height: 18rem;
    overflow: hidden;
}

.orders-section-header {
    display: flex;
    min-height: 4rem;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(135deg, var(--ui-brand-start, #16a4d8) 0%, var(--ui-brand-end, #0878a8) 100%);
    padding: 1rem 1.25rem;
}

.orders-section-header h2 {
    margin: 0;
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
}

.orders-card-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    padding: 1rem;
}

.orders-order-card {
    display: flex;
    min-width: 0;
    overflow: hidden;
    flex-direction: column;
    border: 1px solid #e3e8ef;
    border-radius: 0.625rem;
    background: #fff;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.08);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.orders-order-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(16, 24, 40, 0.1);
}

.orders-order-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    border-bottom: 1px solid #eef2f6;
    padding: 1rem;
}

.orders-order-label {
    display: block;
    margin-bottom: 0.15rem;
    color: #697586;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.orders-order-header h3 {
    margin: 0;
    color: #121926;
    font-size: 1.125rem;
    font-weight: 700;
}

.orders-status-badge {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    border-radius: 999px;
    padding: 0.35rem 0.625rem;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1;
}

.orders-status-received {
    background: #e0f2fe;
    color: #0369a1;
}

.orders-status-partial {
    background: #ffedd5;
    color: #c2410c;
}

.orders-status-cooked {
    background: #fee2e2;
    color: #b91c1c;
}

.orders-status-served {
    background: #dcfce7;
    color: #15803d;
}

.orders-order-details {
    display: flex;
    flex: 1;
    flex-direction: column;
    margin: 0;
    padding: 0.5rem 1rem;
}

.orders-order-details > div {
    display: grid;
    grid-template-columns: minmax(7rem, 0.8fr) minmax(0, 1fr);
    gap: 0.75rem;
    border-bottom: 1px solid #f1f5f9;
    padding: 0.625rem 0;
}

.orders-order-details > div:last-child {
    border-bottom: 0;
}

.orders-order-details dt {
    color: #697586;
    font-size: 0.75rem;
    font-weight: 600;
}

.orders-order-details dd {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
    color: #121926;
    font-size: 0.8125rem;
    font-weight: 500;
    text-align: right;
}

.orders-order-product dd {
    white-space: normal;
}

.orders-order-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid #e3e8ef;
}

.orders-action {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    border: 0;
    padding: 0.625rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.orders-action:hover,
.orders-action:focus {
    text-decoration: none;
}

.orders-action + .orders-action {
    border-left: 1px solid #e3e8ef;
}

.orders-action-served {
    background: #fef3c7;
    color: #92400e;
}

.orders-action-served:hover,
.orders-action-served:focus {
    background: #fde68a;
    color: #78350f;
}

.orders-action-details {
    background: #eff6ff;
    color: #1d4ed8;
}

.orders-action-details:hover,
.orders-action-details:focus {
    background: #dbeafe;
    color: #1e40af;
}

.orders-action-print {
    background: #ecfdf5;
    color: #047857;
}

.orders-action-print:hover,
.orders-action-print:focus {
    background: #d1fae5;
    color: #065f46;
}

.orders-action-muted {
    background: #f8fafc;
    color: #9aa4b2;
}

.orders-empty-state {
    display: flex;
    min-height: 12rem;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0.75rem;
    color: #697586;
    text-align: center;
}

.orders-empty-state i {
    color: #cdd5df;
    font-size: 2.25rem;
}

.orders-empty-state h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.orders-loading-overlay {
    position: absolute;
    z-index: 20;
    inset: 0;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.82);
}

.orders-loading-overlay:not(.hide) {
    display: flex;
}

.orders-loading-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    border: 1px solid #e3e8ef;
    border-radius: 0.625rem;
    background: #fff;
    color: #364152;
    padding: 0.75rem 1rem;
    box-shadow: 0 8px 20px rgba(16, 24, 40, 0.12);
    font-size: 0.875rem;
    font-weight: 600;
}

@media (min-width: 768px) {
    .orders-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1280px) {
    .orders-section-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1536px) {
    .orders-card-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .orders-tailwind-page {
        padding: 1rem;
    }

    .orders-refresh-button {
        width: 100%;
    }

    .orders-order-details > div {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.25rem;
    }

    .orders-order-details dd {
        text-align: left;
    }
}


/* Products: list/report pages (index, show, bulk-edit, add-selling-prices,
   stock_history, stock_history_details, view-product-group-prices). */

/* stock_history.blade.php: product-name widget header must stay neutral,
   not the blue gradient used by other widget headers (only the page title is blue).
   ui-consistency-fixes.css forces a blue gradient on .box-header.module-shared-widget-header
   with !important; beat it here with higher selector specificity via :has(). */
.product-tailwind-page .box-header.module-shared-widget-header:has(.stock-history-product-header) {
    background: #f8fafc !important;
    justify-content: flex-start !important;
}

.product-tailwind-page .stock-history-product-header {
    width: 100%;
    text-align: left;
}

.product-tailwind-page .stock-history-product-header h4 {
    color: #364152 !important;
    font-weight: 700;
    margin: 0;
    font-size: 16px;
    text-align: left;
}

.product-tailwind-page .stock-history-product-header h4 i {
    margin-right: 8px;
    color: #364152 !important;
}
.product-tailwind-page .dataTables_wrapper .dataTables_length,
.product-tailwind-page .dataTables_wrapper .dataTables_filter,
.product-tailwind-page .dataTables_wrapper .dataTables_info,
.product-tailwind-page .dataTables_wrapper .dataTables_paginate {
    margin: 0.5rem 0;
    color: #4b5565;
}

.product-tailwind-page .dataTables_wrapper .dataTables_length select,
.product-tailwind-page .dataTables_wrapper .dataTables_filter input {
    min-height: 2.25rem;
    border: 1px solid #cdd5df;
    border-radius: 0.5rem;
    background: #fff;
    padding: 0.375rem 0.625rem;
    outline: none;
}

.product-tailwind-page table.dataTable {
    width: 100%;
    border: 0;
}

.product-tailwind-page table.dataTable thead th {
    border: 0;
    border-bottom: 1px solid #cdd5df;
    background: #f8fafc;
    color: #364152;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.025em;
    padding: 0.65rem 0.75rem;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.product-tailwind-page table.dataTable tbody td {
    border: 0;
    border-bottom: 1px solid #eef2f6;
    color: #364152;
    padding: 0.6rem 0.75rem;
    vertical-align: top;
}

.product-tailwind-page table.dataTable tbody tr:hover {
    background: #f8fafc;
}

.product-tailwind-page table.dataTable tfoot td {
    border-top: 1px solid #cdd5df;
    background: #f8fafc;
    color: #121926;
    font-weight: 600;
    padding: 0.6rem 0.75rem;
}

/* (Page-scoped action-dropdown skin removed - see the Global Action Button
   & Dropdown Style block.) */

.product-tailwind-page .pagination {
    display: flex;
    gap: 0.25rem;
    margin: 0;
}

.product-tailwind-page .pagination > li > a,
.product-tailwind-page .pagination > li > span {
    min-width: 2.25rem;
    border: 1px solid #cdd5df;
    border-radius: 0.5rem;
    color: #364152;
    padding: 0.45rem 0.7rem;
    text-align: center;
}

.product-tailwind-page .pagination > .active > a,
.product-tailwind-page .pagination > .active > span {
    border-color: var(--brand-600);
    background: var(--brand-600);
    color: #fff;
}

.product-tailwind-page .select2-container {
    width: 100% !important;
}

.product-tailwind-page .select2-container .select2-selection--single {
    height: 2.625rem;
    border: 1px solid #cdd5df;
    border-radius: 0.5rem;
    background: #fff;
}

.product-tailwind-page .select2-selection--single .select2-selection__rendered {
    height: 2.5rem;
    color: #121926;
    line-height: 2.5rem;
    padding-left: 0.75rem;
}

.product-tailwind-page .select2-selection--single .select2-selection__arrow {
    height: 2.5rem;
    right: 0.5rem;
}

.product-tailwind-page .nav-tabs-custom .nav-tabs, .product-tailwind-page .nav-tabs-custom .au-tabs__nav {
    display: flex;
    gap: 0.25rem;
    border-bottom: 1px solid #e3e8ef;
    flex-wrap: wrap;
}

.product-tailwind-page .nav-tabs-custom .nav-tabs > li > a, .product-tailwind-page .nav-tabs-custom .au-tabs__nav > li > a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1rem;
    border-radius: 0.5rem 0.5rem 0 0;
    color: #4b5565;
    font-weight: 600;
    font-size: 0.875rem;
}

.product-tailwind-page .nav-tabs-custom .nav-tabs > li.active > a, .product-tailwind-page .nav-tabs-custom .au-tabs__nav > li.active > a {
    background: var(--brand-100);
    color: var(--brand-700);
}

.product-tailwind-page .box,
.product-tailwind-page .box.box-solid {
    border: 1px solid #e3e8ef;
    border-radius: 0.75rem;
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}

.product-tailwind-page h4 {
    color: #121926;
    font-size: 0.95rem;
    font-weight: 700;
}

.product-tailwind-page {
    overflow-x: hidden;
}

.product-tailwind-page .tw-overflow-x-auto {
    overflow-x: auto;
}

.product-tailwind-page .row {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
}

.product-tailwind-page .row > [class^="col-"] {
    padding: 0 0.5rem;
    /* Flex-item shrink fix: the sibling `.row { display: flex }` rule above
       turns these columns into flex items, whose default `min-width: auto`
       refuses to shrink below their CONTENT min-width. A wide table inside
       (e.g. the products list, 1189px of columns) therefore blew the column
       out to its own intrinsic width, and `section.content { overflow-x:
       hidden }` then CLIPPED everything past the viewport - so only the
       leading column was reachable and the inner `.au-dt-scroll`
       overflow-x:auto never engaged. min-width: 0 restores the float-grid
       behaviour these skins replaced: the column keeps its percentage
       width and the table scrolls horizontally inside its own container. */
    min-width: 0;
}

.product-tailwind-page .row > .clearfix {
    display: none;
}

/* Forms (create/edit/bulk-edit): restyle the existing Bootstrap grid markup
   in place rather than rewriting every col-sm-N/form-group block, since
   several are JS show/hide targets, select2/iCheck hooks, and quick-add
   btn-modal triggers (unit/brand/category quick-add). */
.product-tailwind-form .box-body,
.product-tailwind-form .form-group {
    margin-bottom: 1.1rem;
}

.product-tailwind-form label {
    color: #364152;
    font-size: 0.875rem;
    font-weight: 600;
}

.product-tailwind-form .form-control {
    min-height: 2.625rem;
    border: 1px solid #cdd5df;
    border-radius: 0.5rem;
    background: #fff;
    color: #121926;
    font-size: 0.875rem;
    padding: 0.55rem 0.75rem;
    box-shadow: none;
}

.product-tailwind-form .form-control:focus {
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px var(--ui-focus-ring);
}

.product-tailwind-form textarea.form-control {
    min-height: 5rem;
}

.product-tailwind-form .input-group .form-control {
    border-radius: 0.5rem 0 0 0.5rem;
}

.product-tailwind-form .input-group-btn .btn,
.product-tailwind-form .input-group-btn .btn-modal {
    min-height: 2.625rem;
    border: 1px solid #cdd5df;
    border-left: 0;
    border-radius: 0 0.5rem 0.5rem 0;
    background: #f8fafc;
}

.product-tailwind-form .checkbox {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: nowrap;
}

.product-tailwind-form .checkbox br {
    display: none;
}

.product-tailwind-form .checkbox label {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    font-weight: 500;
}

.product-tailwind-form .checkbox > i {
    flex-shrink: 0;
}

.product-tailwind-form h4 {
    color: #121926;
    font-size: 0.95rem;
    font-weight: 700;
}

.product-tailwind-form hr {
    border-color: #e3e8ef;
}

.product-tailwind-form .help-block {
    color: #697586;
    font-size: 0.8rem;
}

.product-tailwind-form {
    overflow-x: hidden;
}

.product-tailwind-form .tw-overflow-x-auto {
    overflow-x: auto;
}

.product-tailwind-form .row {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
}

.product-tailwind-form .row > [class^="col-"] {
    padding: 0 0.5rem;
}

/* .row is flexbox (see above), so Bootstrap's float-based clearfix divs
   scattered through create/edit.blade.php (meant to force a new row after
   a group of col-sm-* fields) no longer do anything once they're flex
   children - display:none used to just hide them, but a hidden item still
   doesn't force the following items onto a new flex line, so following
   fields backfill into whatever space is left on the current line instead
   of starting where the markup intends (e.g. Business Locations sharing a
   line with Manage Stock/Alert quantity, or Product Description sharing a
   line with the previous module field instead of pairing with Product
   Image on its own row). flex-basis:100% is the standard flex equivalent
   of a hard row break; height:0 keeps it invisible. */
.product-tailwind-form .row > .clearfix {
    flex-basis: 100%;
    width: 100%;
    height: 0;
    margin: 0;
    padding: 0;
}

.product-tailwind-form .select2-container {
    width: 100% !important;
}

.product-tailwind-form .select2-container .select2-selection--single,
.product-tailwind-form .select2-container .select2-selection--multiple {
    min-height: 2.625rem;
    border: 1px solid #cdd5df;
    border-radius: 0.5rem;
    background: #fff;
}

.product-tailwind-form .select2-selection--single .select2-selection__rendered {
    height: 2.5rem;
    color: #121926;
    line-height: 2.5rem;
    padding-left: 0.75rem;
}

.product-tailwind-form .select2-selection--single .select2-selection__arrow {
    height: 2.5rem;
    right: 0.5rem;
}

.product-tailwind-form table.table {
    width: 100%;
}

.product-tailwind-form table.table > thead > tr > th {
    border-bottom: 1px solid #cdd5df;
    background: #f8fafc;
    color: #364152;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.6rem 0.75rem;
    text-transform: uppercase;
}

.product-tailwind-form table.table > tbody > tr > td {
    border-top: 1px solid #eef2f6;
    padding: 0.6rem 0.75rem;
    vertical-align: middle;
}

/* Modal fragments (quick add unit/brand/category, view product, opening
   stock, edit location, woocommerce sync) reused across other pages too —
   keep functionally-required classes and only ADD scoped classes so the
   visual change only activates where product.css is actually loaded. */
.product-tailwind-modal .contact-modal-dialog,
.product-tailwind-modal .product-modal-dialog {
    width: auto;
    max-width: 64rem;
    margin: 2rem auto;
    padding: 0 1rem;
}

.product-tailwind-modal .product-modal-panel {
    overflow: hidden;
    border: 1px solid #e3e8ef;
    border-radius: 0.875rem;
    background: #fff;
    box-shadow: 0 24px 48px rgba(16, 24, 40, 0.2);
}

.product-tailwind-modal .product-modal-header,
.product-tailwind-modal .product-modal-footer {
    display: flex;
    align-items: center;
    padding: 1rem 1.25rem;
}

.product-tailwind-modal .product-modal-header {
    justify-content: space-between;
    border-bottom: 1px solid #e3e8ef;
}

.product-tailwind-modal .product-modal-header .modal-title {
    text-align: left;
    flex: 1 1 auto;
    margin: 0;
    color: #121926;
    font-size: 1.125rem;
    font-weight: 600;
}

.product-tailwind-modal .product-modal-body {
    padding: 1.25rem;
}

.product-tailwind-modal .product-modal-footer {
    justify-content: flex-end;
    gap: 0.625rem;
    border-top: 1px solid #e3e8ef;
    background: #f8fafc;
}

.product-tailwind-modal .product-modal-close {
    display: inline-flex;
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 0.5rem;
    background: transparent;
    color: #697586;
    font-size: 0.85rem;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.product-tailwind-modal .product-modal-close:hover,
.product-tailwind-modal .product-modal-close:focus {
    background: #eef2f6;
    color: #121926;
    outline: none;
}

.product-tailwind-modal .row {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
}

.product-tailwind-modal .row > [class^="col-"] {
    padding: 0 0.5rem;
}

.product-tailwind-modal .form-group {
    margin-bottom: 1.1rem;
}

.product-tailwind-modal label {
    color: #364152;
    font-size: 0.875rem;
    font-weight: 600;
}

.product-tailwind-modal .form-control {
    min-height: 2.625rem;
    border: 1px solid #cdd5df;
    border-radius: 0.5rem;
    background: #fff;
    color: #121926;
    font-size: 0.875rem;
    padding: 0.55rem 0.75rem;
    box-shadow: none;
}

.product-tailwind-modal .form-control:focus {
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px var(--ui-focus-ring);
}

.product-tailwind-modal .checkbox {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: nowrap;
}

.product-tailwind-modal .checkbox br {
    display: none;
}

.product-tailwind-modal .checkbox label {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    font-weight: 500;
}

.product-tailwind-modal table.table {
    width: 100%;
}

.product-tailwind-modal table.table > thead > tr > th {
    border-bottom: 1px solid #cdd5df;
    background: #f8fafc;
    color: #364152;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.6rem 0.75rem;
    text-transform: uppercase;
}

.product-tailwind-modal table.table > tbody > tr > td {
    border-top: 1px solid #eef2f6;
    padding: 0.6rem 0.75rem;
    vertical-align: middle;
}

/* Select2 layout overrides for quick add modal */
.product-tailwind-modal .select2-container {
    width: 100% !important;
}

.product-tailwind-modal .select2-container--default .select2-selection--single,
.product-tailwind-modal .select2-container--default .select2-selection--multiple {
    min-height: 2.625rem;
    border: 1px solid #cdd5df;
    border-radius: 0.5rem;
    background: #fff;
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    box-shadow: none;
    width: 100%;
    box-sizing: border-box;
}

.product-tailwind-modal .select2-container--default.select2-container--focus .select2-selection--single,
.product-tailwind-modal .select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px var(--ui-focus-ring);
    outline: none;
}

.product-tailwind-modal .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #121926;
    font-size: 0.875rem;
    padding: 0;
    line-height: normal;
}

.product-tailwind-modal .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
    top: 0;
    right: 0.75rem;
    display: flex;
    align-items: center;
}

.product-tailwind-modal .select2-container--default .select2-selection--multiple .select2-selection__rendered {
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.product-tailwind-modal .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 0.25rem;
    padding: 0.1rem 0.4rem;
    margin: 0;
    font-size: 0.8rem;
    color: #334155;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.product-tailwind-modal .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #64748b;
    margin-right: 0;
    border: none;
    background: transparent;
}

.product-tailwind-modal .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: #ef4444;
}

/* Align checkbox with text fields visually */
.product-tailwind-modal .checkbox.align-with-inputs {
    margin-top: 1.75rem;
}

@media (max-width: 767px) {
    .product-tailwind-modal .checkbox.align-with-inputs {
        margin-top: 0.5rem;
    }
}

/* Fix spacing in price table cells */
.product-tailwind-modal .add-product-price-table td {
    vertical-align: middle;
}

.product-tailwind-modal .add-product-price-table td .col-sm-6 {
    padding: 0 0.25rem;
}



/* Shared "profile field" styling for resources/views/user/form.blade.php and
   resources/views/user/edit_profile_form_part.blade.php (label + input/select
   /textarea grid: profile-grid, profile-field, profile-label, pf-control,
   etc). That partial is @include()'d from both:
     - resources/views/user/profile.blade.php (self-service "My Profile", ancestor .profile-page)
     - resources/views/manage_user/create.blade.php and edit.blade.php
       (admin "Add/Edit User", ancestor .manageuser-tailwind-page)
   so every selector below is scoped to either ancestor. Previously this
   lived only as an inline <style> block inside profile.blade.php, scoped to
   .profile-page only - so the exact same markup rendered fully unstyled
   (plain stacked labels/inputs, no grid) on the manage_user pages. */

.profile-page .profile-grid,
.manageuser-tailwind-page .profile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 1.1rem 1.25rem;
}

.profile-page .profile-field,
.manageuser-tailwind-page .profile-field {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    min-width: 0;
}

.profile-page .profile-field--full,
.manageuser-tailwind-page .profile-field--full {
    grid-column: 1 / -1;
}

.profile-page .profile-label,
.manageuser-tailwind-page .profile-label {
    font-size: .8rem;
    font-weight: 600;
    color: #374151;
}

.profile-page .profile-label-row,
.manageuser-tailwind-page .profile-label-row {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.profile-page .profile-input-wrap,
.manageuser-tailwind-page .profile-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.profile-page .profile-icon,
.manageuser-tailwind-page .profile-icon {
    position: absolute;
    left: .75rem;
    color: #9ca3af;
    font-size: .85rem;
    pointer-events: none;
}

.profile-page .pf-control,
.manageuser-tailwind-page .pf-control {
    width: 100%;
    padding: .55rem .75rem;
    border: 1px solid #e5e7eb;
    border-radius: .5rem;
    font-size: .875rem;
    line-height: 1.25rem;
    color: #111827;
    background-color: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.profile-page .pf-control::placeholder,
.manageuser-tailwind-page .pf-control::placeholder {
    color: #9ca3af;
}

.profile-page .pf-control:focus,
.manageuser-tailwind-page .pf-control:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, .15);
}

.profile-page .pf-control[readonly],
.profile-page .pf-control:disabled,
.manageuser-tailwind-page .pf-control[readonly],
.manageuser-tailwind-page .pf-control:disabled {
    background-color: #f9fafb;
    color: #6b7280;
}

.profile-page .pf-control.pf-with-icon,
.manageuser-tailwind-page .pf-control.pf-with-icon {
    padding-left: 2.25rem;
}

.profile-page select.pf-control,
.manageuser-tailwind-page select.pf-control {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6 -6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .65rem center;
    background-size: 1rem;
    padding-right: 2.25rem;
}

.profile-page textarea.pf-control,
.manageuser-tailwind-page textarea.pf-control {
    resize: vertical;
    min-height: 5rem;
}

.profile-page .select2-container .select2-selection--single,
.manageuser-tailwind-page .select2-container .select2-selection--single {
    height: 2.6rem;
    border: 1px solid #e5e7eb !important;
    border-radius: .5rem !important;
    display: flex;
    align-items: center;
    padding: 0 .75rem;
}

.profile-page .select2-container--default .select2-selection--single .select2-selection__rendered,
.manageuser-tailwind-page .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-left: 0;
    line-height: 2.5rem;
    color: #111827;
}

.profile-page .select2-container--default .select2-selection--single .select2-selection__arrow,
.manageuser-tailwind-page .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 2.5rem;
}

.profile-page .profile-input-wrap .select2-container .select2-selection--single,
.manageuser-tailwind-page .profile-input-wrap .select2-container .select2-selection--single {
    padding-left: 2.25rem;
}

.profile-page .profile-columns,
.manageuser-tailwind-page .profile-columns {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 992px) {
    .profile-page .profile-columns,
    .manageuser-tailwind-page .profile-columns {
        grid-template-columns: 2fr 1fr;
    }
}

.profile-page .profile-actions,
.manageuser-tailwind-page .profile-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 1.25rem;
}

.profile-page .profile-actions--center,
.manageuser-tailwind-page .profile-actions--center {
    justify-content: center;
    margin-top: 1.5rem;
}

.profile-page .profile-photo-row,
.manageuser-tailwind-page .profile-photo-row {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.profile-page .profile-photo-circle,
.manageuser-tailwind-page .profile-photo-circle {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    overflow: hidden;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #e5e7eb;
    flex-shrink: 0;
}

.profile-page .profile-photo-circle img,
.manageuser-tailwind-page .profile-photo-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.profile-page .profile-photo-placeholder,
.manageuser-tailwind-page .profile-photo-placeholder {
    color: #9ca3af;
    font-size: 2rem;
}

.profile-page .profile-photo-help,
.manageuser-tailwind-page .profile-photo-help {
    font-size: .75rem;
    color: #9ca3af;
    margin-top: .35rem;
}

.profile-page .pf-btn-soft,
.manageuser-tailwind-page .pf-btn-soft {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .75rem;
    border-radius: .5rem;
    font-size: .8rem;
    font-weight: 500;
    color: #374151;
    background-color: #f3f4f6;
    border: 1px solid #e5e7eb;
    cursor: pointer;
    transition: background-color .15s ease;
}

.profile-page .pf-btn-soft:hover,
.manageuser-tailwind-page .pf-btn-soft:hover {
    background-color: #e5e7eb;
}

.profile-page .pf-btn-danger-soft,
.manageuser-tailwind-page .pf-btn-danger-soft {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .65rem;
    margin-top: .5rem;
    border-radius: .5rem;
    font-size: .75rem;
    font-weight: 500;
    color: #b91c1c;
    background-color: #fee2e2;
    border: 1px solid #fecaca;
    cursor: pointer;
    transition: background-color .15s ease;
}

.profile-page .pf-btn-danger-soft:hover,
.manageuser-tailwind-page .pf-btn-danger-soft:hover {
    background-color: #fecaca;
}

.profile-page .profile-section-divider,
.manageuser-tailwind-page .profile-section-divider {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: .5rem;
    padding-top: 1rem;
    border-top: 1px solid #e5e7eb;
    font-size: .9rem;
    font-weight: 600;
    color: #374151;
}


/* Recruitment module Tailwind conversion.
   Mirrors the structural pattern used for repair (public/css/tailwind/repair.css):
   custom classes (recruitment-card, recruitment-form-grid, recruitment-field,
   recruitment-input, recruitment-select, recruitment-table, recruitment-nav,
   recruitment-btn*, recruitment-badge/label-*) replace Bootstrap row, col-N,
   form-group, form-control, card/panel, btn, table, label/badge classes in
   markup, scoped under .recruitment-tailwind-page.

   NOTE: status_badge / *_badge HTML (e.g. RecruitmentApplication::getStatusBadgeAttribute)
   is generated server-side in PHP models as `<span class="label label-{color}">`
   and is NOT touched by this conversion (PHP files are out of scope). Those
   Bootstrap `.label` / `.label-*` classes are restyled here as pill badges,
   scoped to .recruitment-tailwind-page, instead of being replaced in markup. */

.recruitment-card {
    background: #fff;
    border: 1px solid #e3e8ef;
    border-radius: 0.75rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}

.recruitment-filter-grid,
.recruitment-form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

.recruitment-field {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    min-width: 0;
}

.recruitment-field label,
.recruitment-tailwind-page label {
    margin: 0;
    color: #364152;
    font-size: 0.875rem;
    font-weight: 600;
}

.recruitment-field-wide {
    grid-column: span 2;
}

.recruitment-input,
.recruitment-select,
.recruitment-file-input {
    width: 100%;
    min-height: 2.625rem;
    border: 1px solid #cdd5df;
    border-radius: 0.5rem;
    background: #fff;
    color: #121926;
    font-size: 0.875rem;
    line-height: 1.25rem;
    padding: 0.625rem 0.75rem;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.recruitment-input:focus,
.recruitment-select:focus,
.recruitment-file-input:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.16);
}

textarea.recruitment-input {
    min-height: 5.5rem;
    resize: vertical;
}

.recruitment-input.recruitment-input-sm {
    min-height: 2.125rem;
    padding: 0.4rem 0.625rem;
}

.recruitment-file-input {
    padding: 0.45rem 0.625rem;
}

.recruitment-file-input::file-selector-button {
    margin: -0.45rem 0.75rem -0.45rem -0.625rem;
    border: 0;
    border-right: 1px solid #cdd5df;
    background: #f8fafc;
    color: #364152;
    padding: 0.65rem 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

.recruitment-help {
    margin: 0;
    color: #697586;
    font-size: 0.75rem;
    line-height: 1.125rem;
}

.recruitment-tailwind-page .select2-container {
    width: 100% !important;
}

.recruitment-tailwind-page .select2-container .select2-selection--single {
    height: 2.625rem;
    border: 1px solid #cdd5df;
    border-radius: 0.5rem;
    background: #fff;
}

.recruitment-tailwind-page .select2-container .select2-selection--single .select2-selection__rendered {
    height: 2.5rem;
    color: #121926;
    line-height: 2.5rem;
    padding-left: 0.75rem;
}

.recruitment-tailwind-page .select2-container .select2-selection--single .select2-selection__arrow {
    height: 2.5rem;
    right: 0.5rem;
}

.recruitment-tailwind-page .select2-container--focus .select2-selection--single,
.recruitment-tailwind-page .select2-container--open .select2-selection--single {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.16);
}

/* Buttons (Bootstrap .btn/.btn-* visual chrome kept as-is in markup for most
   pages per task scope; these rules restyle them inside the scoped page so
   the look matches the rest of the Tailwind conversion without touching
   classes that may be referenced by JS selectors like .send-offer-btn etc,
   which are independent additional classes, not the .btn-* ones themselves). */
.recruitment-tailwind-page .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    border: 1px solid transparent;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.8125rem;
    line-height: 1.25rem;
    padding: 0.55rem 1rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.recruitment-tailwind-page .btn-xs {
    padding: 0.3rem 0.65rem;
    font-size: 0.75rem;
    border-radius: 0.4rem;
}

.recruitment-tailwind-page .btn-sm {
    padding: 0.4rem 0.8rem;
    font-size: 0.8125rem;
    border-radius: 0.45rem;
}

.recruitment-tailwind-page .btn-primary {
    border-color: #4f46e5;
    background: #4f46e5;
    color: #fff;
}

.recruitment-tailwind-page .btn-primary:hover,
.recruitment-tailwind-page .btn-primary:focus {
    background: #4338ca;
    border-color: #4338ca;
    color: #fff;
}

.recruitment-tailwind-page .btn-success {
    border-color: #16a34a;
    background: #16a34a;
    color: #fff;
}

.recruitment-tailwind-page .btn-success:hover,
.recruitment-tailwind-page .btn-success:focus {
    background: #15803d;
    border-color: #15803d;
    color: #fff;
}

.recruitment-tailwind-page .btn-danger {
    border-color: #dc2626;
    background: #dc2626;
    color: #fff;
}

.recruitment-tailwind-page .btn-danger:hover,
.recruitment-tailwind-page .btn-danger:focus {
    background: #b91c1c;
    border-color: #b91c1c;
    color: #fff;
}

.recruitment-tailwind-page .btn-info {
    border-color: #0284c7;
    background: #0ea5e9;
    color: #fff;
}

.recruitment-tailwind-page .btn-info:hover,
.recruitment-tailwind-page .btn-info:focus {
    background: #0284c7;
    border-color: #0284c7;
    color: #fff;
}

.recruitment-tailwind-page .btn-default {
    border-color: #cdd5df;
    background: #fff;
    color: #364152;
}

.recruitment-tailwind-page .btn-default:hover,
.recruitment-tailwind-page .btn-default:focus {
    background: #f8fafc;
    color: #121926;
}

.recruitment-tailwind-page .btn-outline-secondary {
    border-color: #cdd5df;
    background: transparent;
    color: #364152;
}

.recruitment-tailwind-page .btn-outline-secondary:hover,
.recruitment-tailwind-page .btn-outline-secondary:focus {
    background: #f8fafc;
    color: #121926;
}

.recruitment-tailwind-page .btn-outline-success {
    border-color: #16a34a;
    background: transparent;
    color: #15803d;
}

.recruitment-tailwind-page .btn-outline-success:hover,
.recruitment-tailwind-page .btn-outline-success:focus {
    background: #ecfdf5;
    color: #15803d;
}

.recruitment-tailwind-page .btn-block {
    display: flex;
    width: 100%;
}

/* Status badges / labels (server-rendered via *_badge model accessors as
   Bootstrap .label / .label-*; not present in blade markup so cannot be
   swapped to a recruitment-badge class without touching PHP). */
.recruitment-tailwind-page .label {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1rem;
    padding: 0.25rem 0.65rem;
    text-transform: uppercase;
    color: #fff;
}

.recruitment-tailwind-page .label-default,
.recruitment-tailwind-page .label-secondary {
    background: #94a3b8;
}

.recruitment-tailwind-page .label-primary {
    background: #4f46e5;
}

.recruitment-tailwind-page .label-info {
    background: #0ea5e9;
}

.recruitment-tailwind-page .label-success {
    background: #16a34a;
}

.recruitment-tailwind-page .label-warning {
    background: #f59e0b;
}

.recruitment-tailwind-page .label-danger {
    background: #dc2626;
}

.recruitment-tailwind-page .label-purple {
    background: #a855f7;
}

/* Generic Bootstrap badge (e.g. badge-secondary count chip in candidates/show.blade.php) */
.recruitment-tailwind-page .badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1rem;
    padding: 0.2rem 0.55rem;
    color: #fff;
}

.recruitment-tailwind-page .badge-secondary {
    background: #94a3b8;
}

/* Bootstrap progress bar (onboarding progress) */
.recruitment-tailwind-page .progress {
    height: 0.6rem;
    overflow: hidden;
    border-radius: 999px;
    background: #eef2f6;
    margin: 0;
}

.recruitment-tailwind-page .progress-bar {
    height: 100%;
    background: #4f46e5;
    transition: width 0.3s ease;
}

.recruitment-tailwind-page .progress-bar-success {
    background: #16a34a;
}

/* Tables / DataTables */
.recruitment-tailwind-page .table-responsive {
    width: 100%;
    overflow-x: auto;
}

.recruitment-tailwind-page table.table,
.recruitment-tailwind-page table.dataTable {
    width: 100% !important;
    border: 0;
    border-collapse: collapse;
}

.recruitment-tailwind-page table.table thead th,
.recruitment-tailwind-page table.dataTable thead th {
    border: 0;
    border-bottom: 1px solid #cdd5df;
    background: #f8fafc;
    color: #364152;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.025em;
    padding: 0.75rem;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.recruitment-tailwind-page table.table tbody td,
.recruitment-tailwind-page table.dataTable tbody td {
    border: 0;
    border-bottom: 1px solid #eef2f6;
    color: #364152;
    padding: 0.75rem;
    vertical-align: middle;
}

.recruitment-tailwind-page table.table tbody tr:hover,
.recruitment-tailwind-page table.dataTable tbody tr:hover {
    background: #f8fafc;
}

.recruitment-tailwind-page table.table-sm td,
.recruitment-tailwind-page table.table-sm th {
    padding: 0.5rem 0.6rem;
    font-size: 0.825rem;
}

.recruitment-tailwind-page .dataTables_wrapper .dataTables_length,
.recruitment-tailwind-page .dataTables_wrapper .dataTables_filter,
.recruitment-tailwind-page .dataTables_wrapper .dataTables_info,
.recruitment-tailwind-page .dataTables_wrapper .dataTables_paginate {
    margin: 0.5rem 0;
    color: #4b5565;
}

.recruitment-tailwind-page .dataTables_wrapper .dataTables_length select,
.recruitment-tailwind-page .dataTables_wrapper .dataTables_filter input {
    min-height: 2.25rem;
    border: 1px solid #cdd5df;
    border-radius: 0.5rem;
    background: #fff;
    padding: 0.375rem 0.625rem;
    outline: none;
}

.recruitment-tailwind-page .pagination {
    display: flex;
    gap: 0.25rem;
    margin: 0;
}

.recruitment-tailwind-page .pagination > li > a,
.recruitment-tailwind-page .pagination > li > span {
    min-width: 2.25rem;
    border: 1px solid #cdd5df;
    border-radius: 0.5rem;
    color: #364152;
    padding: 0.45rem 0.7rem;
    text-align: center;
}

.recruitment-tailwind-page .pagination > .active > a,
.recruitment-tailwind-page .pagination > .active > span {
    border-color: #4f46e5;
    background: #4f46e5;
    color: #fff;
}

/* Navbar (recruitment::layouts.nav). Bootstrap navbar-default / nav-tabs JS
   structural classes & data-toggle attrs kept as-is; only visual chrome
   restyled here, same approach as Repair's nav-tabs-custom handling. */
.recruitment-nav {
    background: #fff;
}

.recruitment-nav .navbar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
}

.recruitment-nav .navbar-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
}

.recruitment-nav .navbar-toggle {
    display: none;
    border: 1px solid #cdd5df;
    border-radius: 0.5rem;
    background: transparent;
    padding: 0.4rem 0.6rem;
}

.recruitment-nav .navbar-toggle .icon-bar {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 1px;
    background: #364152;
    margin: 3px 0;
}

.recruitment-nav .navbar-collapse {
    display: block;
}

.recruitment-nav .navbar-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    list-style: none;
    margin: 0;
    padding: 0 0.5rem 0.5rem;
}

.recruitment-nav .navbar-nav > li > a {
    display: flex;
    align-items: center;
    border-radius: 0.5rem;
    color: #4b5565;
    font-weight: 600;
    font-size: 0.875rem;
    padding: 0.5rem 0.85rem;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.recruitment-nav .navbar-nav > li > a:hover,
.recruitment-nav .navbar-nav > li > a:focus {
    background: #f1f5f9;
    color: #121926;
}

.recruitment-nav .navbar-nav > li.active > a {
    background: #eef2ff;
    color: #4338ca;
}

@media (max-width: 767px) {
    .recruitment-nav .navbar-toggle {
        display: inline-flex;
        align-items: center;
    }

    .recruitment-nav .navbar-collapse.collapse {
        display: none;
    }

    .recruitment-nav .navbar-collapse.collapse.in,
    .recruitment-nav .navbar-collapse.collapse[aria-expanded="true"] {
        display: block;
    }

    .recruitment-nav .navbar-nav {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (min-width: 768px) {
    .recruitment-filter-grid,
    .recruitment-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .recruitment-form-grid-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}


/* Repair module Tailwind conversion.
   Mirrors the structural pattern used for expense (public/css/tailwind/expense.css):
   custom classes (repair-card, repair-form-grid, repair-field, repair-input,
   repair-select, repair-input-icon, repair-modal-*) support the module's
   Tailwind-first pages and AJAX-loaded dialog content. */

.repair-card {
    background: #fff;
    border: 1px solid #e3e8ef;
    border-radius: 0.75rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}

/* Trailing submit-button row (job_sheet/create.blade.php, edit.blade.php):
   sits as a sibling right after the last .repair-card so it reads as
   "below the white card" rather than inside it, matching the site-wide
   below-card action pattern (see ui-consistency-fixes.css's
   .widget-action-bar for the equivalent on .module-shared-widget pages).
   No background/border of its own — it just floats on the plain page
   background below the card, which keeps its normal rounded corners. */
.repair-action-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.repair-tailwind-page details > summary {
    list-style: none;
}

.repair-tailwind-page details > summary::-webkit-details-marker {
    display: none;
}

.repair-tailwind-page details > summary::after {
    content: "\f078";
    margin-left: auto;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: #697586;
    transition: transform 0.2s ease;
}

.repair-tailwind-page details[open] > summary::after {
    transform: rotate(180deg);
}

.repair-filter-grid,
.repair-form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

.repair-field,
.repair-check-field {
    min-width: 0;
}

.repair-field {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

/* repair/index.blade.php and job_sheet/index.blade.php place .repair-field
   filter items directly inside the components.filters slot
   (.box-body.tw-flex.tw-flex-wrap) instead of wrapping them in
   .repair-filter-grid. Unlike that grid, plain flex children have no
   width/flex-basis of their own, so they shrink to fit their content
   (a few characters of placeholder text) while legacy grid siblings
   from sell_list_filters keep their 25% width -
   making the repair-specific filter (e.g. "Status") render much
   smaller than the rest of the row. Give it the same column width as
   those neighboring filter fields when used in that context. */
.box-body.tw-flex.tw-flex-wrap > .repair-field {
    flex: 0 0 auto;
    width: 100%;
    padding: 0 0.5rem;
    margin-bottom: 0.9375rem;
}

@media (min-width: 768px) {
    .box-body.tw-flex.tw-flex-wrap > .repair-field {
        width: 25%;
    }
}

.repair-field > button,
.repair-field > a.tw-dw-btn {
    align-self: flex-start;
}

/* Select / input with an appended trigger button on the same line. */
.repair-input-group {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
}

.repair-input-group > .repair-input-icon,
.repair-input-group > .repair-input,
.repair-input-group > .repair-select {
    flex: 1 1 auto;
    min-width: 0;
}

.repair-input-group > button,
.repair-input-group > a.tw-dw-btn {
    flex: 0 0 auto;
    align-self: stretch;
    height: auto;
    min-height: 2.625rem;
}

.repair-check-field {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 4.75rem;
}

.repair-field label {
    margin: 0;
    color: #364152;
    font-size: 0.875rem;
    font-weight: 600;
}

.repair-input,
.repair-select,
.repair-file-input {
    width: 100%;
    min-height: 2.625rem;
    border: 1px solid #cdd5df;
    border-radius: 0.5rem;
    background: #fff;
    color: #121926;
    font-size: 0.875rem;
    line-height: 1.25rem;
    padding: 0.625rem 0.75rem;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.repair-input:focus,
.repair-select:focus,
.repair-file-input:focus {
    /* Falls back to indigo if theme-vars.blade.php's CSS variables aren't
       loaded (e.g. a standalone preview), but on every real page this
       tracks the business's chosen brand color like the rest of the site's
       shared form fields do. */
    border-color: var(--brand-500, #6366f1);
    box-shadow: 0 0 0 3px var(--ui-focus-ring, rgba(99, 102, 241, 0.16));
}

.repair-input[readonly] {
    background: #f8fafc;
    cursor: pointer;
}

textarea.repair-input {
    min-height: 5.5rem;
    resize: vertical;
}

.repair-file-input {
    padding: 0.45rem 0.625rem;
}

.repair-file-input::file-selector-button {
    margin: -0.45rem 0.75rem -0.45rem -0.625rem;
    border: 0;
    border-right: 1px solid #cdd5df;
    background: #f8fafc;
    color: #364152;
    padding: 0.65rem 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

.repair-help {
    margin: 0;
    color: #697586;
    font-size: 0.75rem;
    line-height: 1.125rem;
}

.repair-input-icon {
    position: relative;
}

.repair-input-icon > i {
    position: absolute;
    top: 50%;
    left: 0.75rem;
    z-index: 2;
    color: #697586;
    transform: translateY(-50%);
    pointer-events: none;
}

.repair-input-icon > .repair-input,
.repair-input-icon > .repair-select {
    padding-left: 2.35rem;
}

/* The Vue picker component mounted via [data-vpicker] renders its input
   inside its own wrapper (.au-native-picker), so for a date/time field the
   actual <input class="repair-input"> is a grandchild of .repair-input-icon,
   not a direct child - the rule above never reached it, leaving the icon
   overlapping the field's placeholder text. Reach through the wrapper and
   make it a full-width block so the input still fills the row. */
.repair-input-icon > [data-vpicker] {
    display: block;
    width: 100%;
}

.repair-input-icon .au-native-picker {
    display: block;
    width: 100%;
}

.repair-input-icon .au-native-picker > .repair-input {
    padding-left: 2.35rem;
}

.repair-field-wide {
    grid-column: span 2;
}

.repair-field-full {
    grid-column: 1 / -1;
}

.repair-field-tall {
    grid-row: span 2;
}

.repair-status-date-row,
.repair-status-due-grid {
    display: grid;
    grid-template-columns: minmax(13rem, 18rem);
    gap: 1rem;
    align-items: end;
    justify-content: start;
}

.repair-tailwind-page .select2-container,
.repair-tailwind-modal .select2-container {
    width: 100% !important;
}

.repair-tailwind-page .select2-container .select2-selection--single,
.repair-tailwind-modal .select2-container .select2-selection--single {
    height: 2.625rem;
    border: 1px solid #cdd5df;
    border-radius: 0.5rem;
    background: #fff;
}

.repair-tailwind-page .select2-container .select2-selection--single .select2-selection__rendered,
.repair-tailwind-modal .select2-container .select2-selection--single .select2-selection__rendered {
    height: 2.5rem;
    color: #121926;
    line-height: 2.5rem;
    padding-left: 0.75rem;
}

.repair-tailwind-page .select2-container .select2-selection--single .select2-selection__arrow,
.repair-tailwind-modal .select2-container .select2-selection--single .select2-selection__arrow {
    height: 2.5rem;
    right: 0.5rem;
}

.repair-tailwind-page .select2-container--focus .select2-selection--single,
.repair-tailwind-page .select2-container--open .select2-selection--single,
.repair-tailwind-modal .select2-container--focus .select2-selection--single,
.repair-tailwind-modal .select2-container--open .select2-selection--single {
    border-color: var(--brand-500, #6366f1);
    box-shadow: 0 0 0 3px var(--ui-focus-ring, rgba(99, 102, 241, 0.16));
}

/* Tables / DataTables */
.repair-tailwind-page .dataTables_wrapper .dataTables_length,
.repair-tailwind-page .dataTables_wrapper .dataTables_filter,
.repair-tailwind-page .dataTables_wrapper .dataTables_info,
.repair-tailwind-page .dataTables_wrapper .dataTables_paginate {
    margin: 0.5rem 0;
    color: #4b5565;
}

.repair-tailwind-page .dataTables_wrapper .dataTables_length select,
.repair-tailwind-page .dataTables_wrapper .dataTables_filter input {
    min-height: 2.25rem;
    border: 1px solid #cdd5df;
    border-radius: 0.5rem;
    background: #fff;
    padding: 0.375rem 0.625rem;
    outline: none;
}

.repair-tailwind-page .dataTables_wrapper .dt-buttons .btn,
.repair-tailwind-page table.dataTable .btn {
    display: inline-flex;
    min-height: 2.25rem;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    border: 1px solid #cdd5df;
    border-radius: 0.5rem;
    background: #fff;
    color: #364152;
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1rem;
    padding: 0.55rem 0.75rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}

.repair-tailwind-page .dataTables_wrapper .dt-buttons .btn:hover,
.repair-tailwind-page table.dataTable .btn:hover,
.repair-tailwind-page table.dataTable .btn:focus {
    border-color: #a4acb9;
    background: #f8fafc;
    color: #121926;
}

/* (Page-scoped action-dropdown skin removed - see the Global Action Button
   & Dropdown Style block.) */

.repair-tailwind-page table.dataTable {
    width: 100% !important;
    border: 0;
}

.repair-tailwind-page table.dataTable thead th {
    border: 0;
    border-bottom: 1px solid #cdd5df;
    background: #f8fafc;
    color: #364152;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.025em;
    padding: 0.75rem;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.repair-tailwind-page table.dataTable tbody td {
    border: 0;
    border-bottom: 1px solid #eef2f6;
    color: #364152;
    padding: 0.75rem;
    vertical-align: middle;
}

.repair-tailwind-page table.dataTable tbody tr:hover {
    background: #f8fafc;
}

.repair-tailwind-page table.dataTable tfoot td {
    border: 0;
    border-top: 1px solid #cdd5df;
    background: #f8fafc;
    color: #121926;
    font-weight: 600;
    padding: 0.75rem;
}

.repair-tailwind-page .pagination {
    display: flex;
    gap: 0.25rem;
    margin: 0;
}

.repair-tailwind-page .pagination > li > a,
.repair-tailwind-page .pagination > li > span {
    min-width: 2.25rem;
    border: 1px solid #cdd5df;
    border-radius: 0.5rem;
    color: #364152;
    padding: 0.45rem 0.7rem;
    text-align: center;
}

.repair-tailwind-page .pagination > .active > a,
.repair-tailwind-page .pagination > .active > span {
    border-color: #4f46e5;
    background: #4f46e5;
    color: #fff;
}

/* nav-tabs-custom (job_sheet/repair create/edit/show use these) */
.repair-tailwind-page .nav-tabs-custom .nav-tabs, .repair-tailwind-page .nav-tabs-custom .au-tabs__nav,
.repair-tailwind-form .nav-tabs-custom .nav-tabs, .repair-tailwind-form .nav-tabs-custom .au-tabs__nav {
    display: flex;
    gap: 0.25rem;
    border-bottom: 1px solid #e3e8ef;
    flex-wrap: wrap;
}

.repair-tailwind-page .nav-tabs-custom .nav-tabs > li, .repair-tailwind-page .nav-tabs-custom .au-tabs__nav > li,
.repair-tailwind-form .nav-tabs-custom .nav-tabs > li, .repair-tailwind-form .nav-tabs-custom .au-tabs__nav > li {
    display: block;
    float: none;
    width: auto;
}

.repair-tailwind-page .nav-tabs-custom .nav-tabs > li > a, .repair-tailwind-page .nav-tabs-custom .au-tabs__nav > li > a,
.repair-tailwind-form .nav-tabs-custom .nav-tabs > li > a, .repair-tailwind-form .nav-tabs-custom .au-tabs__nav > li > a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1rem;
    border-radius: 0.5rem 0.5rem 0 0;
    color: #4b5565;
    font-weight: 600;
    font-size: 0.875rem;
}

.repair-tailwind-page .nav-tabs-custom .nav-tabs > li.active > a, .repair-tailwind-page .nav-tabs-custom .au-tabs__nav > li.active > a,
.repair-tailwind-form .nav-tabs-custom .nav-tabs > li.active > a, .repair-tailwind-form .nav-tabs-custom .au-tabs__nav > li.active > a {
    background: #eef2ff;
    color: #4338ca;
}

/* Pre-repair checklist toggle (repair::repair.partials.checklists) */
.repair-tailwind-page .repair-checklist-grid,
.repair-checklist-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem;
}

.repair-tailwind-page .repair-checklist-label,
.repair-checklist-label {
    margin-bottom: 0.25rem;
    color: #364152;
    font-size: 0.8125rem;
    font-weight: 600;
}

.repair-tailwind-page .repair-checklist-toggle,
.repair-checklist-toggle {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0 !important;
    border: 1px solid #cdd5df !important;
    border-radius: 0.5rem !important;
    overflow: hidden !important;
    background: #f8fafc !important;
}

.repair-tailwind-page .repair-checklist-toggle input,
.repair-checklist-toggle input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.repair-tailwind-page .repair-checklist-opt,
.repair-checklist-opt {
    display: flex !important;
    flex: 1 1 0 !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.25rem !important;
    min-height: 2.625rem !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #f8fafc !important;
    color: #364152 !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    padding: 0.4rem 0.5rem !important;
    text-align: center !important;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.repair-tailwind-page .repair-checklist-opt + .repair-checklist-opt,
.repair-checklist-opt + .repair-checklist-opt {
    border-left: 0 !important;
}

.repair-tailwind-page .repair-checklist-opt-no,
.repair-tailwind-page .repair-checklist-opt-na,
.repair-checklist-opt-no,
.repair-checklist-opt-na {
    border-left: 1px solid #cdd5df !important;
}

.repair-tailwind-page .repair-checklist-opt-yes i,
.repair-checklist-opt-yes i {
    color: #15803d !important;
    font-size: 0.95rem !important;
    line-height: 1 !important;
}

.repair-tailwind-page .repair-checklist-opt-no i,
.repair-checklist-opt-no i {
    color: #dc2626 !important;
    font-size: 0.95rem !important;
    line-height: 1 !important;
}

.repair-tailwind-page .repair-checklist-opt-yes:hover,
.repair-checklist-opt-yes:hover { background: #ecfdf5 !important; }

.repair-tailwind-page .repair-checklist-opt-no:hover,
.repair-checklist-opt-no:hover { background: #fef2f2 !important; }

.repair-tailwind-page .repair-checklist-opt-na,
.repair-checklist-opt-na {
    background: #475569 !important;
    color: #fff !important;
}

.repair-tailwind-page .repair-checklist-opt-na:hover,
.repair-checklist-opt-na:hover {
    background: #334155 !important;
}

.repair-tailwind-page .repair-checklist-toggle input[value="yes"]:checked + .repair-checklist-opt-yes,
.repair-checklist-toggle input[value="yes"]:checked + .repair-checklist-opt-yes {
    background: #ecfdf5 !important;
    color: #15803d !important;
    box-shadow: inset 0 0 0 2px #16a34a !important;
}

.repair-tailwind-page .repair-checklist-toggle input[value="yes"]:checked + .repair-checklist-opt-yes i,
.repair-checklist-toggle input[value="yes"]:checked + .repair-checklist-opt-yes i {
    color: #15803d !important;
}

.repair-tailwind-page .repair-checklist-toggle input[value="no"]:checked + .repair-checklist-opt-no,
.repair-checklist-toggle input[value="no"]:checked + .repair-checklist-opt-no {
    background: #fef2f2 !important;
    color: #dc2626 !important;
    box-shadow: inset 0 0 0 2px #dc2626 !important;
}

.repair-tailwind-page .repair-checklist-toggle input[value="no"]:checked + .repair-checklist-opt-no i,
.repair-checklist-toggle input[value="no"]:checked + .repair-checklist-opt-no i {
    color: #dc2626 !important;
}

.repair-tailwind-page .repair-checklist-toggle input[value="not_applicable"]:checked + .repair-checklist-opt-na,
.repair-checklist-toggle input[value="not_applicable"]:checked + .repair-checklist-opt-na {
    background: #1f2937 !important;
    color: #fff !important;
}

/* Tailwind modal shells used by the job-sheet form and Repair-owned AJAX
   dialogs. tw-fixed, tw-bg-black/50, and tw-z-[20000] are not in the
   pre-purged build so their essential values are baked in here. */
.repair-modal-overlay {
    position: fixed;
    z-index: 20000;
    background-color: rgba(0, 0, 0, 0.5);
}

.repair-modal-overlay.tw-flex {
    display: flex;
}

.repair-tailwind-modal .repair-modal-dialog,
.repair-modal-dialog {
    width: auto;
    max-width: 64rem;
    margin: 2rem auto;
    padding: 0 1rem;
}

/* Narrow variant for single-field modals (security pattern / password) so
   they don't inherit the 64rem width meant for the multi-column form
   modals (status, device model, etc.) above, which left a large empty
   gap next to the small pattern-lock widget. */
.repair-tailwind-modal .repair-modal-dialog-sm,
.repair-modal-dialog-sm {
    max-width: 26rem;
}

/* Pattern-lock widget (public/css/vendor.css's bundled PatternLock plugin,
   #pattern_container .patt-holder) ships with a hardcoded blue fill
   (#3382c0) that doesn't track the business's chosen brand color the way
   every other accent in the app does. Override it here (loads after
   vendor.css) so it repaints with the dynamic theme like everything else. */
.repair-tailwind-modal .patt-holder {
    background: var(--brand-500, #3382c0) !important;
}

/* checklist_modal.blade.php's header has a .repair-help subtitle next to
   the title (unlike the plain single-line title the shared gradient
   header system assumes). Its default grey (#697586) is unreadable on
   the colored gradient, so lighten it there specifically. */
.repair-tailwind-modal .repair-modal-header .repair-help {
    color: rgba(255, 255, 255, 0.85);
}

/* Plain solid blue header matching the app's global modal style */
.repair-modal-header {
    background: var(--ui-brand-start, #0ea5e9) !important;
    background-image: none !important;
}

/* Hide decorative icons inside modal titles (not the × close button) */
.repair-modal-header h4 > i,
.repair-modal-header h4 > svg {
    display: none !important;
}

/* Boost Select2 dropdown above repair modals (z-index: 20000). Select2 appends
   its dropdown to <body> at z-index 1051 by default, which renders it behind
   the repair modal overlay. This global bump ensures it's always on top.
   We also use dropdownParent in JS for modals where we control initialisation. */
.select2-dropdown {
    z-index: 20002 !important;
}

/* Same problem, same fix, for the shared au-popover/au-tooltip components
   (resources/assets/js/core-behaviors.js [data-vpopover]/[data-vtooltip]):
   both are appended to <body> at their base z-index (1060/1070 - see
   _bootstrap-parity.scss), so a tooltip triggered from inside a repair
   modal rendered completely hidden behind the modal's own z-index: 20000
   overlay. Affects every @show_tooltip icon in every repair modal, not
   just one page. */
.au-popover,
.au-tooltip {
    z-index: 20003 !important;
}

.repair-tailwind-modal .repair-modal-body,
.repair-modal-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.repair-tailwind-modal .repair-field label,
.repair-modal-panel .repair-field label {
    margin: 0;
    color: #364152;
    font-size: 0.875rem;
    font-weight: 600;
}

@media (min-width: 768px) {
    .repair-filter-grid,
    .repair-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .repair-tailwind-page .repair-checklist-grid,
    .repair-checklist-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .repair-status-date-row {
        grid-template-columns: minmax(13rem, 18rem) minmax(16rem, 22rem);
    }

    .repair-status-due-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .repair-tailwind-page .repair-checklist-grid,
    .repair-checklist-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (min-width: 1280px) {
    .repair-filter-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

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

    /* This 3-column bump is meant for the full-width page grid, but the
       media query only sees the browser viewport, not the modal's own
       (much narrower) width - so any .repair-form-grid inside a modal
       dialog also got bumped to 3 columns on a wide screen, leaving
       repair-field-wide fields (meant to span the full row) spanning only
       2 of 3 columns and the row looking unevenly split. Modals are never
       wide enough for 3 columns, so cap them at 2 regardless of viewport. */
    .repair-modal-body .repair-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* ── DataTable wrapper (roles index page) ─────────────────────────────── */
.role-tailwind-page .dataTables_wrapper .dataTables_length,
.role-tailwind-page .dataTables_wrapper .dataTables_filter,
.role-tailwind-page .dataTables_wrapper .dataTables_info,
.role-tailwind-page .dataTables_wrapper .dataTables_paginate {
    margin: 0.5rem 0;
    color: #4b5565;
}

.role-tailwind-page .dataTables_wrapper .dataTables_length select,
.role-tailwind-page .dataTables_wrapper .dataTables_filter input {
    min-height: 2.25rem;
    border: 1px solid #cdd5df;
    border-radius: 0.5rem;
    background: #fff;
    padding: 0.375rem 0.625rem;
    outline: none;
}

.role-tailwind-page table.dataTable {
    width: 100% !important;
    border: 0;
}

.role-tailwind-page table.dataTable thead th {
    border: 0;
    border-bottom: 1px solid #cdd5df;
    background: #f8fafc;
    color: #364152;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.025em;
    padding: 0.75rem;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.role-tailwind-page table.dataTable tbody td {
    border: 0;
    border-bottom: 1px solid #eef2f6;
    color: #364152;
    padding: 0.75rem;
    vertical-align: middle;
}

.role-tailwind-page table.dataTable tbody tr:hover {
    background: #f8fafc;
}

.role-tailwind-page .pagination {
    display: flex;
    gap: 0.25rem;
    margin: 0;
}

.role-tailwind-page .pagination > li > a,
.role-tailwind-page .pagination > li > span {
    min-width: 2.25rem;
    border: 1px solid #cdd5df;
    border-radius: 0.5rem;
    color: #364152;
    padding: 0.45rem 0.7rem;
    text-align: center;
}

.role-tailwind-page .pagination > .active > a,
.role-tailwind-page .pagination > .active > span {
    border-color: var(--brand-600);
    background: var(--brand-600);
    color: #fff;
}

/* ── Role name input ──────────────────────────────────────────────────── */
.role-tailwind-page .role-text-input {
    display: block;
    width: 100%;
    max-width: 28rem;
    padding: 0.5625rem 0.875rem;
    font-size: 0.875rem;
    color: #0f172a;
    border: 1.5px solid #cbd5e1;
    border-radius: 0.625rem;
    background: #fff;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.role-tailwind-page .role-text-input:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}

/* ── Permissions section heading ──────────────────────────────────────── */
.role-tailwind-page .perms-label {
    margin-bottom: 0.75rem;
    padding-bottom: 0.625rem;
    border-bottom: 2px solid #f1f5f9;
}

.role-tailwind-page .perms-label span {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: #94a3b8;
}

/* ── Permission rows (3 columns: category | select-all | items) ───────── */
.role-tailwind-page .perm-section {
    display: flex;
    align-items: flex-start;
    padding: 0.75rem 0.625rem;
    border-bottom: 1px solid #f1f5f9;
    border-left: 3px solid transparent;
    border-radius: 0.5rem 0 0 0.5rem;
    transition: background .1s ease, border-left-color .15s ease;
    gap: 0;
}

.role-tailwind-page .perm-section:last-of-type {
    border-bottom: 0;
}

.role-tailwind-page .perm-section:hover {
    background: #fafbff;
    border-left-color: #6366f1;
}

.role-tailwind-page .perm-section.perm-wide:hover {
    border-left-color: #0ea5e9;
}

/* ── Category column (left) ───────────────────────────────────────────── */
.role-tailwind-page .perm-cat {
    width: 10rem;
    flex-shrink: 0;
    padding-top: 0.25rem;
    padding-right: 0.5rem;
}

.role-tailwind-page .perm-cat h4 {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.4;
}

/* ── Select-all column (middle) ───────────────────────────────────────── */
.role-tailwind-page .perm-all {
    width: 8.5rem;
    flex-shrink: 0;
    padding-right: 0.5rem;
}

.role-tailwind-page .perm-all label {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.625rem 0.25rem 0.375rem;
    background: #fff !important;
    border: 0;
    box-shadow: none;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #4338ca;
    cursor: pointer;
    margin: 0;
    white-space: nowrap;
    transition: background .12s ease, color .12s ease;
}

.role-tailwind-page .perm-all label:hover {
    background: #fff !important;
    color: #3730a3;
}

/* ── Permission items column (right) ──────────────────────────────────── */
.role-tailwind-page .perm-items {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.0625rem;
    min-width: 0;
}

.role-tailwind-page .perm-items label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    border-radius: 0.375rem;
    margin: 0;
    line-height: 1.35;
    transition: background .1s ease, color .1s ease;
}

.role-tailwind-page .perm-items label:hover {
    background: #ede9fe;
    color: #1e293b;
}

/* Wide sections — no select-all; category column spans both col widths */
.role-tailwind-page .perm-section.perm-wide .perm-cat {
    width: 18.5rem;
}

/* Keep iCheck replaced elements from shrinking inside flex labels */
/* ── FOUC / load-time transition prevention ───────────────────────────── */

/* DaisyUI applies `animation: button-pop .25s` to every .tw-dw-btn on
   initial render (scale 0.98 → 1.02 → 1.0). Suppress it here so the
   Save/Update button appears at full size immediately. */
.role-tailwind-page .tw-dw-btn {
    animation: none !important;
}

/* iCheck replaces native <input> elements with 22×22 custom divs after
   DOMContentLoaded. Before that, native checkboxes (~13×13) are visible,
   then jump to 22×22 — causing a noticeable layout shift in flex labels.
   Pre-size the inputs to exactly match the iCheck custom element dimensions
   and make them invisible so there is zero reflow when iCheck initialises. */
.role-tailwind-page input.input-icheck {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    display: inline-block !important;
    width: 22px !important;
    height: 22px !important;
    flex-shrink: 0;
    border: 1px solid #cbd5e1;
    background: #fff;
    cursor: pointer;
    opacity: 1 !important;
    vertical-align: middle !important;
    margin: 0 !important;
}

.role-tailwind-page input[type="checkbox"].input-icheck {
    border-radius: 0;
}

.role-tailwind-page input[type="radio"].input-icheck {
    border-radius: 50%;
}

.role-tailwind-page input.input-icheck:checked {
    border-color: #2c91d1;
    background: #2c91d1;
}

.role-tailwind-page input[type="checkbox"].input-icheck:checked::after {
    content: "";
    position: absolute;
    top: 45%;
    left: 50%;
    width: 6px;
    height: 11px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -50%) rotate(45deg);
}

.role-tailwind-page input[type="radio"].input-icheck:checked::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    transform: translate(-50%, -50%);
}


.tw-float-right {
    float: right;
}

@media (min-width: 768px) {
    .md\:tw-grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.stockadj-tailwind-page .stockadj-card {
    background: #fff;
    border: 1px solid #e3e8ef;
    border-radius: 0.75rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}

.stockadj-form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

.stockadj-field {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.375rem;
}

.stockadj-field-wide {
    grid-column: 1 / -1;
}

.stockadj-field label {
    margin: 0;
    color: #364152;
    font-size: 0.875rem;
    font-weight: 600;
}

.stockadj-input,
.stockadj-textarea {
    width: 100%;
    min-height: 2.625rem;
    border: 1px solid #cdd5df;
    border-radius: 0.5rem;
    background: #fff;
    color: #121926;
    font-size: 0.875rem;
    line-height: 1.25rem;
    padding: 0.625rem 0.75rem;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.stockadj-input:focus,
.stockadj-textarea:focus {
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px var(--ui-focus-ring);
}

.stockadj-input[readonly],
.stockadj-input:disabled {
    background: #f8fafc;
    cursor: pointer;
}

.stockadj-textarea {
    min-height: 5.5rem;
    resize: vertical;
}

.stockadj-input-icon {
    position: relative;
    min-width: 0;
}

.stockadj-input-icon > i {
    position: absolute;
    top: 50%;
    left: 0.75rem;
    z-index: 2;
    color: #697586;
    transform: translateY(-50%);
    pointer-events: none;
}

.stockadj-input-icon > .stockadj-input {
    padding-left: 2.35rem;
}

/* Same fix as .repair-input-icon: the Vue picker's real input is a
   grandchild ([data-vpicker] > .au-native-picker > input), not the direct
   child this rule used to assume, so the icon overlapped the field text. */
.stockadj-input-icon > [data-vpicker] {
    display: block;
    width: 100%;
}

.stockadj-input-icon .au-native-picker {
    display: block;
    width: 100%;
}

.stockadj-input-icon .au-native-picker > .stockadj-input {
    padding-left: 2.35rem;
}

.stockadj-tailwind-page .select2-container,
.stockadj-tailwind-modal .select2-container {
    width: 100% !important;
}

.stockadj-tailwind-page .select2-container .select2-selection--single,
.stockadj-tailwind-modal .select2-container .select2-selection--single {
    height: 2.625rem;
    border: 1px solid #cdd5df;
    border-radius: 0.5rem;
    background: #fff;
}

.stockadj-tailwind-page .select2-selection--single .select2-selection__rendered,
.stockadj-tailwind-modal .select2-selection--single .select2-selection__rendered {
    height: 2.5rem;
    color: #121926;
    line-height: 2.5rem;
    padding-left: 0.75rem;
}

.stockadj-tailwind-page .select2-selection--single .select2-selection__arrow,
.stockadj-tailwind-modal .select2-selection--single .select2-selection__arrow {
    height: 2.5rem;
    right: 0.5rem;
}

.stockadj-product-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.8125rem;
}

.stockadj-product-table thead th {
    border-bottom: 1px solid #cdd5df;
    background: #f8fafc;
    color: #364152;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 0.6rem 0.6rem;
    text-align: center;
    text-transform: uppercase;
}

.stockadj-product-table tbody td {
    border-bottom: 1px solid #eef2f6;
    color: #364152;
    padding: 0.6rem 0.6rem;
    vertical-align: middle;
}

.stockadj-product-table tfoot td {
    border-top: 1px solid #cdd5df;
    background: #f8fafc;
    color: #121926;
    font-weight: 600;
    padding: 0.6rem 0.6rem;
}

.stockadj-product-table .form-control {
    width: 100%;
    min-height: 2.25rem;
    border: 1px solid #cdd5df;
    border-radius: 0.5rem;
    background: #fff;
    color: #121926;
    font-size: 0.8125rem;
    padding: 0.45rem 0.6rem;
}

.stockadj-tailwind-page .dataTables_wrapper .dataTables_length,
.stockadj-tailwind-page .dataTables_wrapper .dataTables_filter,
.stockadj-tailwind-page .dataTables_wrapper .dataTables_info,
.stockadj-tailwind-page .dataTables_wrapper .dataTables_paginate {
    margin: 0.5rem 0;
    color: #4b5565;
}

.stockadj-tailwind-page .dataTables_wrapper .dataTables_length select,
.stockadj-tailwind-page .dataTables_wrapper .dataTables_filter input {
    min-height: 2.25rem;
    border: 1px solid #cdd5df;
    border-radius: 0.5rem;
    background: #fff;
    padding: 0.375rem 0.625rem;
    outline: none;
}

.stockadj-tailwind-page table.dataTable {
    width: 100% !important;
    border: 0;
}

.stockadj-tailwind-page table.dataTable thead th {
    border: 0;
    border-bottom: 1px solid #cdd5df;
    background: #f8fafc;
    color: #364152;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.025em;
    padding: 0.75rem;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.stockadj-tailwind-page table.dataTable tbody td {
    border: 0;
    border-bottom: 1px solid #eef2f6;
    color: #364152;
    padding: 0.75rem;
    vertical-align: middle;
}

.stockadj-tailwind-page table.dataTable tbody tr:hover {
    background: #f8fafc;
}

/* (Page-scoped action-dropdown skin removed - see the Global Action Button
   & Dropdown Style block.) */

.stockadj-tailwind-page .pagination {
    display: flex;
    gap: 0.25rem;
    margin: 0;
}

.stockadj-tailwind-page .pagination > li > a,
.stockadj-tailwind-page .pagination > li > span {
    min-width: 2.25rem;
    border: 1px solid #cdd5df;
    border-radius: 0.5rem;
    color: #364152;
    padding: 0.45rem 0.7rem;
    text-align: center;
}

.stockadj-tailwind-page .pagination > .active > a,
.stockadj-tailwind-page .pagination > .active > span {
    border-color: var(--brand-600);
    background: var(--brand-600);
    color: #fff;
}

.stockadj-form-actions {
    display: flex;
    justify-content: center;
    padding: 2rem 0 1.75rem;
}

.stockadj-form-actions .tw-dw-btn {
    min-width: 102px;
    min-height: 64px;
    padding: 0.75rem 1.75rem;
    font-size: 1rem;
}

.stockadj-tailwind-modal .stockadj-modal-dialog {
    width: auto;
    max-width: 64rem;
    margin: 2rem auto;
    padding: 0 1rem;
}

.stockadj-tailwind-modal .stockadj-modal-panel {
    overflow: hidden;
    border: 1px solid #e3e8ef;
    border-radius: 0.875rem;
    background: #fff;
    box-shadow: 0 24px 48px rgba(16, 24, 40, 0.2);
}

.stockadj-tailwind-modal .stockadj-modal-header,
.stockadj-tailwind-modal .stockadj-modal-footer {
    display: flex;
    align-items: center;
    padding: 1rem 1.25rem;
}

.stockadj-tailwind-modal .stockadj-modal-header {
    justify-content: space-between;
    border-bottom: 1px solid #e3e8ef;
}

.stockadj-tailwind-modal .stockadj-modal-body {
    padding: 1.25rem;
}

.stockadj-tailwind-modal .stockadj-modal-footer {
    justify-content: flex-end;
    gap: 0.625rem;
    border-top: 1px solid #e3e8ef;
    background: #f8fafc;
}

.stockadj-tailwind-modal .stockadj-modal-close {
    display: inline-flex;
    width: 2.25rem;
    height: 2.25rem;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 0.5rem;
    background: transparent;
    color: #697586;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.stockadj-tailwind-modal .stockadj-modal-close:hover,
.stockadj-tailwind-modal .stockadj-modal-close:focus {
    background: #eef2f6;
    color: #121926;
    outline: none;
}

.stockadj-info-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

.stockadj-info-block address {
    color: #364152;
    font-size: 0.875rem;
    font-style: normal;
    line-height: 1.5rem;
}

.stockadj-detail-table {
    width: 100%;
    border-collapse: separate;
    font-size: 0.875rem;
}

.stockadj-detail-table th,
.stockadj-detail-table td {
    border-bottom: 1px solid #eef2f6;
    padding: 0.6rem 0.75rem;
    text-align: left;
}

.stockadj-detail-table thead th {
    background: #f8fafc;
    color: #364152;
    font-weight: 700;
}

.stockadj-summary-table {
    width: 100%;
    font-size: 0.875rem;
}

.stockadj-summary-table th,
.stockadj-summary-table td {
    padding: 0.5rem 0.25rem;
}

@media (min-width: 768px) {
    .stockadj-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

@media (min-width: 1024px) {
    .stockadj-form-grid-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}


.tw-float-right {
    float: right;
}

.tw-items-baseline {
    align-items: baseline;
}

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

@media (min-width: 768px) {
    .md\:tw-grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.stocktransfer-tailwind-page .stocktransfer-card {
    background: #fff;
    border: 1px solid #e3e8ef;
    border-radius: 0.75rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}

.stocktransfer-form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

.stocktransfer-field {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.375rem;
}

.stocktransfer-field-wide {
    grid-column: 1 / -1;
}

.stocktransfer-field label {
    margin: 0;
    color: #364152;
    font-size: 0.875rem;
    font-weight: 600;
}

.stocktransfer-input,
.stocktransfer-textarea {
    width: 100%;
    min-height: 2.625rem;
    border: 1px solid #cdd5df;
    border-radius: 0.5rem;
    background: #fff;
    color: #121926;
    font-size: 0.875rem;
    line-height: 1.25rem;
    padding: 0.625rem 0.75rem;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.stocktransfer-input:focus,
.stocktransfer-textarea:focus {
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px var(--ui-focus-ring);
}

.stocktransfer-input[readonly],
.stocktransfer-input:disabled {
    background: #f8fafc;
    cursor: pointer;
}

.stocktransfer-textarea {
    min-height: 5.5rem;
    resize: vertical;
}

.stocktransfer-input-icon {
    position: relative;
    min-width: 0;
}

.stocktransfer-input-icon > i {
    position: absolute;
    top: 50%;
    left: 0.75rem;
    z-index: 2;
    color: #697586;
    transform: translateY(-50%);
    pointer-events: none;
}

.stocktransfer-input-icon > .stocktransfer-input {
    padding-left: 2.35rem;
}

/* Same fix as .repair-input-icon: the Vue picker's real input is a
   grandchild ([data-vpicker] > .au-native-picker > input), not the direct
   child this rule used to assume, so the icon overlapped the field text. */
.stocktransfer-input-icon > [data-vpicker] {
    display: block;
    width: 100%;
}

.stocktransfer-input-icon .au-native-picker {
    display: block;
    width: 100%;
}

.stocktransfer-input-icon .au-native-picker > .stocktransfer-input {
    padding-left: 2.35rem;
}

.stocktransfer-tailwind-page .select2-container,
.stocktransfer-tailwind-modal .select2-container {
    width: 100% !important;
}

.stocktransfer-tailwind-page .select2-container .select2-selection--single,
.stocktransfer-tailwind-modal .select2-container .select2-selection--single {
    height: 2.625rem;
    border: 1px solid #cdd5df;
    border-radius: 0.5rem;
    background: #fff;
}

.stocktransfer-tailwind-page .select2-selection--single .select2-selection__rendered,
.stocktransfer-tailwind-modal .select2-selection--single .select2-selection__rendered {
    height: 2.5rem;
    color: #121926;
    line-height: 2.5rem;
    padding-left: 0.75rem;
}

.stocktransfer-tailwind-page .select2-selection--single .select2-selection__arrow,
.stocktransfer-tailwind-modal .select2-selection--single .select2-selection__arrow {
    height: 2.5rem;
    right: 0.5rem;
}

.stocktransfer-tailwind-page .select2-container--disabled .select2-selection--single {
    background: #f8fafc;
}

.stocktransfer-product-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.875rem;
}

.stocktransfer-product-table thead th {
    border-bottom: 1px solid #cdd5df;
    background: #f8fafc;
    color: #364152;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.025em;
    padding: 0.65rem 0.75rem;
    text-align: center;
    text-transform: uppercase;
}

.stocktransfer-product-table tbody td {
    border-bottom: 1px solid #eef2f6;
    color: #364152;
    padding: 0.65rem 0.75rem;
    vertical-align: middle;
}

.stocktransfer-product-table tfoot td {
    border-top: 1px solid #cdd5df;
    background: #f8fafc;
    color: #121926;
    font-weight: 600;
    padding: 0.65rem 0.75rem;
}

.stocktransfer-product-table .form-control {
    width: 100%;
    min-height: 2.375rem;
    border: 1px solid #cdd5df;
    border-radius: 0.5rem;
    background: #fff;
    color: #121926;
    font-size: 0.875rem;
    padding: 0.5rem 0.65rem;
}

.stocktransfer-tailwind-page .dataTables_wrapper .dataTables_length,
.stocktransfer-tailwind-page .dataTables_wrapper .dataTables_filter,
.stocktransfer-tailwind-page .dataTables_wrapper .dataTables_info,
.stocktransfer-tailwind-page .dataTables_wrapper .dataTables_paginate {
    margin: 0.5rem 0;
    color: #4b5565;
}

.stocktransfer-tailwind-page .dataTables_wrapper .dataTables_length select,
.stocktransfer-tailwind-page .dataTables_wrapper .dataTables_filter input {
    min-height: 2.25rem;
    border: 1px solid #cdd5df;
    border-radius: 0.5rem;
    background: #fff;
    padding: 0.375rem 0.625rem;
    outline: none;
}

.stocktransfer-tailwind-page table.dataTable {
    width: 100% !important;
    border: 0;
}

.stocktransfer-tailwind-page table.dataTable thead th {
    border: 0;
    border-bottom: 1px solid #cdd5df;
    background: #f8fafc;
    color: #364152;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.025em;
    padding: 0.75rem;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.stocktransfer-tailwind-page table.dataTable tbody td {
    border: 0;
    border-bottom: 1px solid #eef2f6;
    color: #364152;
    padding: 0.75rem;
    vertical-align: middle;
}

.stocktransfer-tailwind-page table.dataTable tbody tr:hover {
    background: #f8fafc;
}

/* (Page-scoped action-dropdown skin removed - see the Global Action Button
   & Dropdown Style block.) */

.stocktransfer-tailwind-page .pagination {
    display: flex;
    gap: 0.25rem;
    margin: 0;
}

.stocktransfer-tailwind-page .pagination > li > a,
.stocktransfer-tailwind-page .pagination > li > span {
    min-width: 2.25rem;
    border: 1px solid #cdd5df;
    border-radius: 0.5rem;
    color: #364152;
    padding: 0.45rem 0.7rem;
    text-align: center;
}

.stocktransfer-tailwind-page .pagination > .active > a,
.stocktransfer-tailwind-page .pagination > .active > span {
    border-color: var(--brand-600);
    background: var(--brand-600);
    color: #fff;
}

.stocktransfer-form-actions {
    display: flex;
    justify-content: center;
    padding: 2rem 0 1.75rem;
}

.stocktransfer-form-actions .tw-dw-btn {
    min-width: 102px;
    min-height: 64px;
    padding: 0.75rem 1.75rem;
    font-size: 1rem;
}

/* Purchase return add/edit — page action bar and totals line, mirroring the
   stock adjustment / stock transfer footer standard. */
.purchasereturn-form-actions {
    display: flex;
    justify-content: center;
    padding: 2rem 0 1.75rem;
}

.purchasereturn-form-actions .tw-dw-btn {
    min-width: 102px;
    min-height: 64px;
    padding: 0.75rem 1.75rem;
    font-size: 1rem;
}

/* Discount add/edit dialog — a wider shell so the fields sit three to a row
   instead of two, which also keeps the whole form above the fold.
   !important + the extra class: the global `.modal-dialog` width rule is
   itself !important. */
.discount_modal .discount-modal-dialog {
    width: min(1040px, calc(100vw - 40px)) !important;
    max-width: calc(100vw - 40px) !important;
}

/* Checkbox rows sit at the bottom of their column so they line up with each
   other rather than with the labelled fields above them. */
.discount_modal .form-group.discount-check {
    display: flex;
    align-items: center;
    min-height: var(--ui-field-height, 2.625rem);
    margin-top: 1.5rem;
}

.discount_modal .form-group.discount-check label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

/* The products picker is a multi-select: let it grow with its chips instead of
   clipping them to one field height. */
.discount_modal .select2-container--default .select2-selection--multiple {
    min-height: var(--ui-field-height, 2.625rem);
    border: 1px solid var(--ui-field-border, #cdd5df) !important;
    border-radius: var(--ui-field-radius, 0.5rem) !important;
    padding: 0.15rem 0.35rem;
}

/* Locked product search — a disabled field that still looks enabled reads as a
   broken control, so the lock is made visible and the whole group is a click
   target that explains itself. */
.purchasereturn-search-group.is-locked {
    cursor: pointer;
}

.purchasereturn-search-group.is-locked .input-group-addon,
.purchasereturn-search-group .form-control:disabled,
.purchasereturn-search-group .form-control[disabled] {
    background: #f1f5f9 !important;
    border-color: #dbe2ea !important;
    color: #94a3b8 !important;
    cursor: pointer;
}

.purchasereturn-search-group .form-control:disabled::placeholder,
.purchasereturn-search-group .form-control[disabled]::placeholder {
    color: #94a3b8;
    font-style: italic;
}

/* Section heading inside a card (the blue bar belongs to the page's first
   section only). */
.purchasereturn-section-title {
    margin: 0 0 0.9rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid #e3e8ef;
    color: #121926;
    font-size: 0.95rem;
    font-weight: 700;
}

/* The shared form grid lets the last column of a row absorb the leftover
   width; a file input stretched across the whole card looks like a mistake,
   so this one keeps its declared column width. */
@media (min-width: 768px) {
    /* !important: the shared rule that stretches the last column carries a
       much heavier selector (`... .row:not([class*="tw-flex"]) > [class*="col-"]:last-child`). */
    .purchasereturn-tailwind-page form .row > .purchasereturn-doc-col {
        flex-grow: 0 !important;
        width: 25% !important;
        max-width: 25% !important;
    }
}

/* Product table — `.table-bordered`/`.table-striped` lost their base styling
   when the legacy Bootstrap layer went away, so the rows read as loose text.
   Same skin as the stock adjustment product table. */
#purchase_return_product_table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.8125rem;
    margin-bottom: 1.25rem;
}

#purchase_return_product_table thead th {
    border-bottom: 1px solid #cdd5df;
    background: #f8fafc;
    color: #364152;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 0.6rem;
    text-align: center;
    text-transform: uppercase;
}

#purchase_return_product_table tbody td {
    border-bottom: 1px solid #eef2f6;
    color: #364152;
    padding: 0.6rem;
    vertical-align: middle;
}

#purchase_return_product_table .form-control {
    width: 100%;
    min-height: 2.25rem;
}

/* `pull-right` is a float, and the totals column is a flex item — the float
   collapsed to the column's left edge. */
.purchasereturn-total {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem;
    min-height: var(--ui-field-height, 2.625rem);
    padding-top: 1.5rem;
    font-size: 1rem;
}

/* Variation modal (Products » Variations » Add / Edit) — the value rows used to
   be legacy `.form-group > .col-sm-7.col-sm-offset-3` markup, so every extra
   value sat indented and narrower than the field it belongs to, with a bright
   red daisyUI "-" button floating off to the right. Rows now reuse the modal's
   own `.au-input-group` dialect so each one lines up edge to edge with the
   first value field. */
.au-variation-values {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.au-variation-values:empty {
    display: none;
}

#variation_add_form .au-input-group > .form-control,
#variation_edit_form .au-input-group > .form-control {
    flex: 1 1 auto;
    min-width: 0;
    /* !important: the layout ships a blanket `button/input` 6px radius rule. */
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

#variation_add_form .au-input-group > .au-button,
#variation_edit_form .au-input-group > .au-button {
    flex: 0 0 auto;
    width: var(--ui-field-height, 2.625rem);
    min-height: 0;
    margin-left: -1px;
    padding: 0;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-top-right-radius: 6px !important;
    border-bottom-right-radius: 6px !important;
    font-size: 0.875rem;
}

/* A global `.fa-times { font-size: 30px }` (sized for the modal close X)
   otherwise blows the remove glyph up to twice the "+" next to it. */
#variation_add_form .au-input-group > .au-button > .fa-times,
#variation_edit_form .au-input-group > .au-button > .fa-times {
    font-size: 0.875rem;
    line-height: 1;
}

#variation_add_form .au-input-group > .au-button--danger,
#variation_edit_form .au-input-group > .au-button--danger {
    border-color: var(--ui-field-border, #cdd5df);
}

#variation_add_form .au-input-group > .au-button--danger:hover,
#variation_edit_form .au-input-group > .au-button--danger:hover {
    border-color: #fca5a5;
}

/* A value already assigned to a product variation can't be removed — its
   button stays visible (rows keep their alignment) but reads as unavailable. */
#variation_edit_form .au-input-group > .au-button[disabled] {
    background: #f8fafc;
    border-color: var(--ui-field-border, #cdd5df);
    color: #94a3b8;
    cursor: not-allowed;
}

/* Product add / edit page bottom action bar.
   The old markup wrapped the four submit buttons in a Bootstrap `.btn-group`
   and coloured two of them with the AdminLTE helpers `bg-purple` /
   `bg-maroon` — neither class exists in the bundles any more, so
   "Save & Add Opening Stock" and "Save And Add Another" rendered as unfilled
   blocks (with white label text on edit, i.e. invisible), while the joined
   `.btn-group` edges fought the global 4px button radius. This mirrors the
   stock adjustment / stock transfer footer standard instead. */
.product-form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    gap: 0.75rem;
    padding: 1.75rem 0;
}

.product-form-actions .tw-dw-btn {
    min-width: 102px;
    min-height: 48px !important;
    height: auto !important;
    padding: 0.75rem 1.5rem !important;
    font-size: 0.9375rem !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    white-space: normal;
    /* Match the app-wide inline button radius (layouts/partials/css.blade.php). */
    border-radius: 6px !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08) !important;
    transition: background 0.18s ease, box-shadow 0.18s ease !important;
}

/* Secondary actions get explicit fills — the daisyUI variants alone resolve
   to theme tokens that read almost white on this page. */
.product-form-actions .tw-dw-btn-warning {
    background: #f59e0b !important;
    background-image: none !important;
    border-color: #f59e0b !important;
    color: #fff !important;
}

.product-form-actions .tw-dw-btn-warning:hover,
.product-form-actions .tw-dw-btn-warning:focus {
    background: #d97706 !important;
    border-color: #d97706 !important;
}

.product-form-actions .tw-dw-btn-info {
    background: #0284c7 !important;
    background-image: none !important;
    border-color: #0284c7 !important;
    color: #fff !important;
}

.product-form-actions .tw-dw-btn-info:hover,
.product-form-actions .tw-dw-btn-info:focus {
    background: #0369a1 !important;
    border-color: #0369a1 !important;
}

.product-form-actions .tw-dw-btn-neutral {
    background: #334155 !important;
    background-image: none !important;
    border-color: #334155 !important;
    color: #fff !important;
}

.product-form-actions .tw-dw-btn-neutral:hover,
.product-form-actions .tw-dw-btn-neutral:focus {
    background: #1e293b !important;
    border-color: #1e293b !important;
}

/* "Save & Add Opening Stock" stays disabled until stock management is ticked —
   it must read as disabled, not as a second primary action. */
.product-form-actions .tw-dw-btn[disabled],
.product-form-actions .tw-dw-btn:disabled {
    background: #e5e7eb !important;
    background-image: none !important;
    border-color: #e5e7eb !important;
    color: #64748b !important;
    box-shadow: none !important;
    cursor: not-allowed;
    opacity: 1 !important;
}

@media (max-width: 575px) {
    .product-form-actions {
        flex-direction: column;
        padding: 1.25rem 0.75rem;
    }

    .product-form-actions .tw-dw-btn {
        width: 100%;
    }
}

.stocktransfer-tailwind-modal .stocktransfer-modal-dialog {
    width: auto;
    max-width: 64rem;
    margin: 2rem auto;
    padding: 0 1rem;
}

.stocktransfer-tailwind-modal .stocktransfer-modal-panel {
    overflow: hidden;
    border: 1px solid #e3e8ef;
    border-radius: 0.875rem;
    background: #fff;
    box-shadow: 0 24px 48px rgba(16, 24, 40, 0.2);
}

.stocktransfer-tailwind-modal .stocktransfer-modal-header,
.stocktransfer-tailwind-modal .stocktransfer-modal-footer {
    display: flex;
    align-items: center;
    padding: 1rem 1.25rem;
}

.stocktransfer-tailwind-modal .stocktransfer-modal-header {
    justify-content: space-between;
    border-bottom: 1px solid #e3e8ef;
}

.stocktransfer-tailwind-modal .stocktransfer-modal-body {
    padding: 1.25rem;
}

.stocktransfer-tailwind-modal .stocktransfer-modal-footer {
    justify-content: flex-end;
    gap: 0.625rem;
    border-top: 1px solid #e3e8ef;
    background: #f8fafc;
}

.stocktransfer-tailwind-modal .stocktransfer-modal-close {
    display: inline-flex;
    width: 2.25rem;
    height: 2.25rem;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 0.5rem;
    background: transparent;
    color: #697586;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.stocktransfer-tailwind-modal .stocktransfer-modal-close:hover,
.stocktransfer-tailwind-modal .stocktransfer-modal-close:focus {
    background: #eef2f6;
    color: #121926;
    outline: none;
}

.stocktransfer-info-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

.stocktransfer-info-block address {
    color: #364152;
    font-size: 0.875rem;
    font-style: normal;
    line-height: 1.5rem;
}

.stocktransfer-detail-table {
    width: 100%;
    border-collapse: separate;
    font-size: 0.875rem;
}

.stocktransfer-detail-table th,
.stocktransfer-detail-table td {
    border-bottom: 1px solid #eef2f6;
    padding: 0.6rem 0.75rem;
    text-align: left;
}

.stocktransfer-detail-table thead th {
    background: #f8fafc;
    color: #364152;
    font-weight: 700;
}

.stocktransfer-summary-table {
    width: 100%;
    font-size: 0.875rem;
}

.stocktransfer-summary-table th,
.stocktransfer-summary-table td {
    padding: 0.5rem 0.25rem;
}

.stocktransfer-note-box {
    border: 1px solid #e3e8ef;
    border-radius: 0.5rem;
    background: #f8fafc;
    color: #364152;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
}

@media (min-width: 768px) {
    .stocktransfer-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

@media (min-width: 1024px) {
    .stocktransfer-form-grid-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}


/* TailorPro module Tailwind conversion.
   Mirrors the structural pattern used for recruitment (public/css/tailwind/recruitment.css)
   and repair (public/css/tailwind/repair.css): custom classes (tailorpro-card,
   tailorpro-form-grid, tailorpro-field, tailorpro-input, tailorpro-select,
   tailorpro-btn*, tailorpro-badge-*, tailorpro-modal-*) replace Bootstrap row,
   col-N, form-group, form-control, box/panel, btn, badge classes in markup,
   scoped under .tailorpro-tailwind-page (full pages) and .tailorpro-tailwind-modal
   (ajax-loaded modal content, e.g. order status update modal).

   NOTE: legacy .tp-* helper classes (tp-card, tp-table, tp-page-title, etc.)
   come from tailorpro::layouts.ui (a shared <style> partial included on most
   pages) and from inline <style> blocks in a few pages (dashboard, order/index,
   report/*). They are left in place (still valid CSS, harmless) and are NOT
   duplicated/restyled here; the box/row/col-* wrapper divs around them are
   what get converted to tailorpro-card/tailorpro-form-grid/tailorpro-field. */

.tailorpro-card {
    background: #fff;
    border: 1px solid #e3e8ef;
    border-radius: 0.75rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
}

.tailorpro-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    border-bottom: 1px solid #e3e8ef;
    padding: 0.875rem 1.125rem;
}

.tailorpro-card-body {
    padding: 1.125rem;
}

.tailorpro-filter-grid,
.tailorpro-form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

.tailorpro-field {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    min-width: 0;
}

.tailorpro-field label,
.tailorpro-tailwind-page label,
.tailorpro-tailwind-modal label {
    margin: 0;
    color: #364152;
    font-size: 0.875rem;
    font-weight: 600;
}

.tailorpro-field-wide {
    grid-column: 1 / -1;
}

.tailorpro-input,
.tailorpro-select,
.tailorpro-file-input {
    width: 100%;
    min-height: 2.625rem;
    border: 1px solid #cdd5df;
    border-radius: 0.5rem;
    background: #fff;
    color: #121926;
    font-size: 0.875rem;
    line-height: 1.25rem;
    padding: 0.625rem 0.75rem;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.tailorpro-input:focus,
.tailorpro-select:focus,
.tailorpro-file-input:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.16);
}

.tailorpro-input[readonly] {
    background: #f8fafc;
    cursor: pointer;
}

textarea.tailorpro-textarea,
textarea.tailorpro-input {
    min-height: 5.5rem;
    resize: vertical;
}

.tailorpro-textarea {
    width: 100%;
    border: 1px solid #cdd5df;
    border-radius: 0.5rem;
    background: #fff;
    color: #121926;
    font-size: 0.875rem;
    line-height: 1.25rem;
    padding: 0.625rem 0.75rem;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.tailorpro-textarea:focus {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.16);
}

.tailorpro-file-input {
    padding: 0.45rem 0.625rem;
}

.tailorpro-file-input::file-selector-button {
    margin: -0.45rem 0.75rem -0.45rem -0.625rem;
    border: 0;
    border-right: 1px solid #cdd5df;
    background: #f8fafc;
    color: #364152;
    padding: 0.65rem 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

.tailorpro-help {
    margin: 0;
    color: #697586;
    font-size: 0.75rem;
    line-height: 1.125rem;
}

.tailorpro-check-field {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.625rem;
}

/* Garment catalog grid (catalog cards layout, if needed beyond the table view) */
.tailorpro-catalog-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

/* Measurement template field-builder rows (fields_table tbody rows use plain
   table cells already restyled via the table rules below; this grid is for
   the template header controls row that mixes inputs with an action button). */
.tailorpro-template-actions-field {
    display: flex;
    align-items: flex-end;
}

.tailorpro-tailwind-page .select2-container,
.tailorpro-tailwind-modal .select2-container {
    width: 100% !important;
}

.tailorpro-tailwind-page .select2-container .select2-selection--single,
.tailorpro-tailwind-modal .select2-container .select2-selection--single {
    height: 2.625rem;
    border: 1px solid #cdd5df;
    border-radius: 0.5rem;
    background: #fff;
}

.tailorpro-tailwind-page .select2-container .select2-selection--single .select2-selection__rendered,
.tailorpro-tailwind-modal .select2-container .select2-selection--single .select2-selection__rendered {
    height: 2.5rem;
    color: #121926;
    line-height: 2.5rem;
    padding-left: 0.75rem;
}

.tailorpro-tailwind-page .select2-container .select2-selection--single .select2-selection__arrow,
.tailorpro-tailwind-modal .select2-container .select2-selection--single .select2-selection__arrow {
    height: 2.5rem;
    right: 0.5rem;
}

.tailorpro-tailwind-page .select2-container--focus .select2-selection--single,
.tailorpro-tailwind-page .select2-container--open .select2-selection--single,
.tailorpro-tailwind-modal .select2-container--focus .select2-selection--single,
.tailorpro-tailwind-modal .select2-container--open .select2-selection--single {
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.16);
}

/* Buttons (Bootstrap .btn/.btn-* classes kept in markup per task scope where
   noted; tailorpro-btn* additive classes used on newly-written button markup).
   Both selector forms are restyled here so visual chrome matches regardless
   of which class name is present on a given element. */
.tailorpro-tailwind-page .btn,
.tailorpro-tailwind-modal .btn,
.tailorpro-tailwind-page .tailorpro-btn,
.tailorpro-tailwind-modal .tailorpro-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    border: 1px solid transparent;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.8125rem;
    line-height: 1.25rem;
    padding: 0.55rem 1rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.tailorpro-tailwind-page .btn-xs,
.tailorpro-tailwind-modal .btn-xs,
.tailorpro-btn-xs {
    padding: 0.3rem 0.65rem;
    font-size: 0.75rem;
    border-radius: 0.4rem;
}

.tailorpro-tailwind-page .btn-sm,
.tailorpro-tailwind-modal .btn-sm,
.tailorpro-btn-sm {
    padding: 0.4rem 0.8rem;
    font-size: 0.8125rem;
    border-radius: 0.45rem;
}

.tailorpro-tailwind-page .btn-lg,
.tailorpro-tailwind-modal .btn-lg,
.tailorpro-btn-lg {
    padding: 0.7rem 1.25rem;
    font-size: 0.9375rem;
    border-radius: 0.6rem;
}

.tailorpro-tailwind-page .btn-primary,
.tailorpro-tailwind-modal .btn-primary,
.tailorpro-btn-primary {
    border-color: #4f46e5;
    background: #4f46e5;
    color: #fff;
}

.tailorpro-tailwind-page .btn-primary:hover,
.tailorpro-tailwind-page .btn-primary:focus,
.tailorpro-tailwind-modal .btn-primary:hover,
.tailorpro-tailwind-modal .btn-primary:focus,
.tailorpro-btn-primary:hover,
.tailorpro-btn-primary:focus {
    background: #4338ca;
    border-color: #4338ca;
    color: #fff;
}

.tailorpro-tailwind-page .btn-success,
.tailorpro-tailwind-modal .btn-success,
.tailorpro-btn-success {
    border-color: #16a34a;
    background: #16a34a;
    color: #fff;
}

.tailorpro-tailwind-page .btn-success:hover,
.tailorpro-tailwind-page .btn-success:focus,
.tailorpro-tailwind-modal .btn-success:hover,
.tailorpro-tailwind-modal .btn-success:focus,
.tailorpro-btn-success:hover,
.tailorpro-btn-success:focus {
    background: #15803d;
    border-color: #15803d;
    color: #fff;
}

.tailorpro-tailwind-page .btn-info,
.tailorpro-tailwind-modal .btn-info,
.tailorpro-btn-info {
    border-color: #0284c7;
    background: #0ea5e9;
    color: #fff;
}

.tailorpro-tailwind-page .btn-info:hover,
.tailorpro-tailwind-page .btn-info:focus,
.tailorpro-tailwind-modal .btn-info:hover,
.tailorpro-tailwind-modal .btn-info:focus,
.tailorpro-btn-info:hover,
.tailorpro-btn-info:focus {
    background: #0284c7;
    border-color: #0284c7;
    color: #fff;
}

.tailorpro-tailwind-page .btn-warning,
.tailorpro-tailwind-modal .btn-warning,
.tailorpro-btn-warning {
    border-color: #d97706;
    background: #f59e0b;
    color: #fff;
}

.tailorpro-tailwind-page .btn-warning:hover,
.tailorpro-tailwind-page .btn-warning:focus,
.tailorpro-tailwind-modal .btn-warning:hover,
.tailorpro-tailwind-modal .btn-warning:focus,
.tailorpro-btn-warning:hover,
.tailorpro-btn-warning:focus {
    background: #d97706;
    border-color: #b45309;
    color: #fff;
}

.tailorpro-tailwind-page .btn-danger,
.tailorpro-tailwind-modal .btn-danger,
.tailorpro-btn-danger {
    border-color: #dc2626;
    background: #dc2626;
    color: #fff;
}

.tailorpro-tailwind-page .btn-danger:hover,
.tailorpro-tailwind-page .btn-danger:focus,
.tailorpro-tailwind-modal .btn-danger:hover,
.tailorpro-tailwind-modal .btn-danger:focus,
.tailorpro-btn-danger:hover,
.tailorpro-btn-danger:focus {
    background: #b91c1c;
    border-color: #b91c1c;
    color: #fff;
}

.tailorpro-tailwind-page .btn-default,
.tailorpro-tailwind-modal .btn-default,
.tailorpro-btn-default,
.tailorpro-tailwind-page .btn-secondary,
.tailorpro-tailwind-modal .btn-secondary,
.tailorpro-btn-secondary {
    border-color: #cdd5df;
    background: #fff;
    color: #364152;
}

.tailorpro-tailwind-page .btn-default:hover,
.tailorpro-tailwind-page .btn-default:focus,
.tailorpro-tailwind-modal .btn-default:hover,
.tailorpro-tailwind-modal .btn-default:focus,
.tailorpro-btn-default:hover,
.tailorpro-btn-default:focus,
.tailorpro-tailwind-page .btn-secondary:hover,
.tailorpro-tailwind-modal .btn-secondary:hover,
.tailorpro-btn-secondary:hover {
    background: #f8fafc;
    color: #121926;
}

.tailorpro-tailwind-page .btn-block,
.tailorpro-tailwind-modal .btn-block,
.tailorpro-btn-block {
    display: flex;
    width: 100%;
}

.tailorpro-tailwind-page .btn-group,
.tailorpro-tailwind-modal .btn-group {
    display: inline-flex;
    gap: 0.375rem;
}

/* Badges (order/garment statuses, custom field type chips, etc.) */
.tailorpro-tailwind-page .badge,
.tailorpro-tailwind-modal .badge,
.tailorpro-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1rem;
    padding: 0.25rem 0.65rem;
    text-transform: uppercase;
    color: #fff;
}

.tailorpro-tailwind-page .badge-primary,
.tailorpro-badge-primary {
    background: #4f46e5;
}

.tailorpro-tailwind-page .badge-success,
.tailorpro-badge-success {
    background: #16a34a;
}

.tailorpro-tailwind-page .badge-info,
.tailorpro-badge-info {
    background: #0ea5e9;
}

.tailorpro-tailwind-page .badge-warning,
.tailorpro-badge-warning {
    background: #f59e0b;
}

.tailorpro-tailwind-page .badge-danger,
.tailorpro-badge-danger {
    background: #dc2626;
}

.tailorpro-tailwind-page .badge-secondary,
.tailorpro-tailwind-page .badge-default,
.tailorpro-badge-secondary {
    background: #94a3b8;
}

/* Legacy Bootstrap .label / .label-* (status/index.blade.php renders status
   chips with inline background-color, plus is_completed_status uses
   label-success/label-default) */
.tailorpro-tailwind-page .label {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1rem;
    padding: 0.25rem 0.65rem;
    text-transform: uppercase;
    color: #fff;
}

.tailorpro-tailwind-page .label-success {
    background: #16a34a;
}

.tailorpro-tailwind-page .label-default,
.tailorpro-tailwind-page .label-secondary {
    background: #94a3b8;
}

/* Tables / DataTables */
.tailorpro-tailwind-page .table-responsive {
    width: 100%;
    overflow-x: auto;
}

.tailorpro-tailwind-page table.table,
.tailorpro-tailwind-page table.dataTable {
    width: 100% !important;
    border: 0;
    border-collapse: collapse;
}

.tailorpro-tailwind-page table.table thead th,
.tailorpro-tailwind-page table.dataTable thead th {
    border: 0;
    border-bottom: 1px solid #cdd5df;
    background: #f8fafc;
    color: #364152;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.025em;
    padding: 0.75rem;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.tailorpro-tailwind-page table.table tbody td,
.tailorpro-tailwind-page table.dataTable tbody td {
    border: 0;
    border-bottom: 1px solid #eef2f6;
    color: #364152;
    padding: 0.75rem;
    vertical-align: middle;
}

.tailorpro-tailwind-page table.table tbody tr:hover,
.tailorpro-tailwind-page table.dataTable tbody tr:hover {
    background: #f8fafc;
}

.tailorpro-tailwind-page table.table-condensed td,
.tailorpro-tailwind-page table.table-condensed th,
.tailorpro-tailwind-page table.table-sm td,
.tailorpro-tailwind-page table.table-sm th {
    padding: 0.5rem 0.6rem;
    font-size: 0.825rem;
}

.tailorpro-tailwind-page table.no-border td,
.tailorpro-tailwind-page table.no-border th {
    border: 0;
}

.tailorpro-tailwind-page .dataTables_wrapper .dataTables_length,
.tailorpro-tailwind-page .dataTables_wrapper .dataTables_filter,
.tailorpro-tailwind-page .dataTables_wrapper .dataTables_info,
.tailorpro-tailwind-page .dataTables_wrapper .dataTables_paginate {
    margin: 0.5rem 0;
    color: #4b5565;
}

.tailorpro-tailwind-page .dataTables_wrapper .dataTables_length select,
.tailorpro-tailwind-page .dataTables_wrapper .dataTables_filter input {
    min-height: 2.25rem;
    border: 1px solid #cdd5df;
    border-radius: 0.5rem;
    background: #fff;
    padding: 0.375rem 0.625rem;
    outline: none;
}

.tailorpro-tailwind-page .pagination {
    display: flex;
    gap: 0.25rem;
    margin: 0;
}

.tailorpro-tailwind-page .pagination > li > a,
.tailorpro-tailwind-page .pagination > li > span {
    min-width: 2.25rem;
    border: 1px solid #cdd5df;
    border-radius: 0.5rem;
    color: #364152;
    padding: 0.45rem 0.7rem;
    text-align: center;
}

.tailorpro-tailwind-page .pagination > .active > a,
.tailorpro-tailwind-page .pagination > .active > span {
    border-color: #4f46e5;
    background: #4f46e5;
    color: #fff;
}

/* info-box (reports landing + summary cards) */
.tailorpro-tailwind-page .info-box {
    display: flex;
    align-items: center;
    overflow: hidden;
    border: 1px solid #e3e8ef;
    border-radius: 0.75rem;
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    min-height: 5.5rem;
    margin-bottom: 1rem;
}

.tailorpro-tailwind-page .info-box-icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 3.75rem;
    height: 100%;
    align-self: stretch;
    font-size: 1.5rem;
    color: #fff;
}

.tailorpro-tailwind-page .info-box-content {
    padding: 0.75rem 1rem;
    min-width: 0;
}

.tailorpro-tailwind-page .info-box-text {
    display: block;
    color: #4b5565;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.tailorpro-tailwind-page .info-box-number {
    display: block;
    color: #121926;
    font-size: 1.5rem;
    font-weight: 700;
}

/* Navbar (tailorpro::layouts.nav). Bootstrap navbar-default / nav-tabs JS
   structural classes & data-toggle attrs kept as-is; only visual chrome
   restyled here, same approach as Recruitment's navbar handling. */
.tailorpro-nav {
    background: #fff;
}

.tailorpro-nav .navbar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
}

.tailorpro-nav .navbar-brand {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
}

.tailorpro-nav .navbar-toggle {
    display: none;
    border: 1px solid #cdd5df;
    border-radius: 0.5rem;
    background: transparent;
    padding: 0.4rem 0.6rem;
}

.tailorpro-nav .navbar-toggle .icon-bar {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 1px;
    background: #364152;
    margin: 3px 0;
}

.tailorpro-nav .navbar-collapse {
    display: block;
}

.tailorpro-nav .navbar-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    list-style: none;
    margin: 0;
    padding: 0 0.5rem 0.5rem;
}

.tailorpro-nav .navbar-nav > li > a {
    display: flex;
    align-items: center;
    border-radius: 0.5rem;
    color: #4b5565;
    font-weight: 600;
    font-size: 0.875rem;
    padding: 0.5rem 0.85rem;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.tailorpro-nav .navbar-nav > li > a:hover,
.tailorpro-nav .navbar-nav > li > a:focus {
    background: #f1f5f9;
    color: #121926;
}

.tailorpro-nav .navbar-nav > li.active > a {
    background: #eef2ff;
    color: #4338ca;
}

@media (max-width: 767px) {
    .tailorpro-nav .navbar-toggle {
        display: inline-flex;
        align-items: center;
    }

    .tailorpro-nav .navbar-collapse.collapse {
        display: none;
    }

    .tailorpro-nav .navbar-collapse.collapse.in,
    .tailorpro-nav .navbar-collapse.collapse[aria-expanded="true"] {
        display: block;
    }

    .tailorpro-nav .navbar-nav {
        flex-direction: column;
        align-items: stretch;
    }
}

/* Modal (Bootstrap .modal.fade outer kept; only inner classes restyled via
   additive .tailorpro-tailwind-modal wrapper class on .modal-dialog, plus
   the existing .modal-content/.modal-header/.modal-body/.modal-footer/.close
   structural classes are kept as-is for JS/Bootstrap-modal compatibility). */
.tailorpro-tailwind-modal.modal-dialog {
    width: auto;
    max-width: 40rem;
    margin: 2rem auto;
}

.tailorpro-tailwind-modal .modal-content,
.tailorpro-modal-content {
    overflow: hidden;
    border: 1px solid #e3e8ef;
    border-radius: 0.875rem;
    background: #fff;
    box-shadow: 0 24px 48px rgba(16, 24, 40, 0.2);
}

.tailorpro-tailwind-modal .modal-header,
.tailorpro-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #e3e8ef;
    padding: 1rem 1.25rem;
}

.tailorpro-tailwind-modal .modal-title,
.tailorpro-modal-header .modal-title {
    margin: 0;
    color: #121926;
    font-size: 1.125rem;
    font-weight: 600;
    flex: 1 1 auto;
}

.tailorpro-tailwind-modal .modal-body,
.tailorpro-modal-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem;
}

.tailorpro-tailwind-modal .modal-footer,
.tailorpro-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.625rem;
    border-top: 1px solid #e3e8ef;
    background: #f8fafc;
    padding: 1rem 1.25rem;
}

.tailorpro-tailwind-modal .close,
.tailorpro-modal-close {
    display: inline-flex;
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 0.5rem;
    background: transparent;
    color: #697586;
    font-size: 0.95rem;
    opacity: 1;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.tailorpro-tailwind-modal .close:hover,
.tailorpro-tailwind-modal .close:focus,
.tailorpro-modal-close:hover,
.tailorpro-modal-close:focus {
    background: #eef2f6;
    color: #121926;
    outline: none;
}

@media (min-width: 768px) {
    .tailorpro-filter-grid,
    .tailorpro-form-grid,
    .tailorpro-catalog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .tailorpro-filter-grid,
    .tailorpro-form-grid-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

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

@media (min-width: 1280px) {
    .tailorpro-form-grid-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

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


/* Warehouse module Tailwind conversion.
   Mirrors the structural pattern used for repair (public/css/tailwind/repair.css):
   custom classes (warehouse-card, warehouse-form-grid, warehouse-field, warehouse-input,
   warehouse-select, warehouse-table, warehouse-btn*, warehouse-modal-*, warehouse-badge*)
   replace Bootstrap row/col-N/form-group/form-control/btn/table/badge/alert classes
   in markup, scoped under .warehouse-tailwind-page (full pages) and
   .warehouse-tailwind-modal (ajax-loaded modal content). Bootstrap JS-driven
   structural attributes (data-toggle, .nav-tabs, .modal, .collapse) are kept
   as-is so existing JS interactions keep working; only their visual chrome
   is restyled here. */

.warehouse-card {
    background: #fff;
    border: 1px solid #e3e8ef;
    border-radius: 0.75rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    margin-bottom: 1.25rem;
}

.warehouse-card-header {
    border-bottom: 1px solid #e3e8ef;
    padding: 0.875rem 1.25rem;
    font-size: 1rem;
    font-weight: 600;
    color: #121926;
}

.warehouse-card-body {
    padding: 1.25rem;
}

.warehouse-filter-grid,
.warehouse-form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

.warehouse-field {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    min-width: 0;
}

.warehouse-field label,
.warehouse-tailwind-page label,
.warehouse-tailwind-modal label {
    margin: 0 0 0.375rem;
    color: #364152;
    font-size: 0.875rem;
    font-weight: 600;
}

.warehouse-field-wide {
    grid-column: span 2;
}

.warehouse-input,
.warehouse-select,
.warehouse-file-input {
    width: 100%;
    min-height: 2.625rem;
    border: 1px solid #cdd5df;
    border-radius: 0.5rem;
    background: #fff;
    color: #121926;
    font-size: 0.875rem;
    line-height: 1.25rem;
    padding: 0.625rem 0.75rem;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.warehouse-input:focus,
.warehouse-select:focus,
.warehouse-file-input:focus {
    border-color: #3498db;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.16);
}

.warehouse-input[readonly] {
    background: #f8fafc;
    cursor: pointer;
}

textarea.warehouse-input {
    min-height: 5.5rem;
    resize: vertical;
}

.warehouse-help {
    margin: 0.25rem 0 0;
    color: #697586;
    font-size: 0.75rem;
    line-height: 1.125rem;
}

.warehouse-input-group {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
}

.warehouse-input-group > .warehouse-input,
.warehouse-input-group > .warehouse-select {
    flex: 1 1 auto;
    min-width: 0;
}

.warehouse-input-group > button,
.warehouse-input-group > .warehouse-btn {
    flex: 0 0 auto;
}

/* Checkbox / inline label rows (replaces Bootstrap .checkbox / .radio) */
.warehouse-check-field {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.625rem;
}

.warehouse-check-field label {
    margin: 0;
    font-weight: 500;
}

/* Buttons (replaces btn btn-primary/success/info/warning/danger/default,
   btn-block, btn-sm, btn-xs, pull-right) */
.warehouse-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    border: 1px solid transparent;
    border-radius: 0.5rem;
    background: #fff;
    color: #364152;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25rem;
    padding: 0.55rem 1rem;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.warehouse-btn:hover,
.warehouse-btn:focus {
    text-decoration: none;
}

.warehouse-btn.disabled,
.warehouse-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.warehouse-btn-sm {
    font-size: 0.8125rem;
    padding: 0.4rem 0.75rem;
}

.warehouse-btn-xs {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
}

.warehouse-btn-lg {
    font-size: 1rem;
    padding: 0.7rem 1.35rem;
}

.warehouse-btn-block {
    display: flex;
    width: 100%;
}

.warehouse-btn-primary {
    border-color: #3498db;
    background: #3498db;
    color: #fff;
}

.warehouse-btn-primary:hover,
.warehouse-btn-primary:focus {
    background: #2980b9;
    border-color: #2980b9;
    color: #fff;
}

.warehouse-btn-success {
    border-color: #27ae60;
    background: #27ae60;
    color: #fff;
}

.warehouse-btn-success:hover,
.warehouse-btn-success:focus {
    background: #219150;
    border-color: #219150;
    color: #fff;
}

.warehouse-btn-info {
    border-color: #00838f;
    background: #00838f;
    color: #fff;
}

.warehouse-btn-info:hover,
.warehouse-btn-info:focus {
    background: #006a74;
    border-color: #006a74;
    color: #fff;
}

.warehouse-btn-warning {
    border-color: #e65100;
    background: #e65100;
    color: #fff;
}

.warehouse-btn-warning:hover,
.warehouse-btn-warning:focus {
    background: #c44600;
    border-color: #c44600;
    color: #fff;
}

.warehouse-btn-danger {
    border-color: #c0392b;
    background: #c0392b;
    color: #fff;
}

.warehouse-btn-danger:hover,
.warehouse-btn-danger:focus {
    background: #a93224;
    border-color: #a93224;
    color: #fff;
}

.warehouse-btn-default,
.warehouse-btn-secondary {
    border-color: #cdd5df;
    background: #fff;
    color: #364152;
}

.warehouse-btn-default:hover,
.warehouse-btn-secondary:hover,
.warehouse-btn-default:focus,
.warehouse-btn-secondary:focus {
    background: #f8fafc;
    color: #121926;
}

.warehouse-pull-right {
    float: right;
}

/* Tables (replaces table table-bordered/table-striped/table-condensed/table-hover/table-sm) */
.warehouse-tailwind-page table.table,
.warehouse-tailwind-modal table.table {
    width: 100%;
    margin-bottom: 0;
    border-collapse: collapse;
}

.warehouse-tailwind-page table.table th,
.warehouse-tailwind-page table.table td,
.warehouse-tailwind-modal table.table th,
.warehouse-tailwind-modal table.table td {
    border: 1px solid #e3e8ef;
    padding: 0.6rem 0.75rem;
    vertical-align: middle;
    font-size: 0.875rem;
    color: #364152;
}

.warehouse-tailwind-page table.table thead th,
.warehouse-tailwind-modal table.table thead th {
    background: #f8fafc;
    color: #364152;
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.025em;
    text-transform: uppercase;
    white-space: nowrap;
}

.warehouse-tailwind-page table.table-striped tbody tr:nth-of-type(odd),
.warehouse-tailwind-modal table.table-striped tbody tr:nth-of-type(odd) {
    background: #f8fafc;
}

.warehouse-tailwind-page table.table-hover tbody tr:hover {
    background: #eef2ff;
}

.warehouse-tailwind-page table.table-condensed th,
.warehouse-tailwind-page table.table-condensed td,
.warehouse-tailwind-modal table.table-condensed th,
.warehouse-tailwind-modal table.table-condensed td {
    padding: 0.4rem 0.6rem;
}

.warehouse-tailwind-page table.table-condensed th {
    background: transparent;
    border: 0;
    border-bottom: 1px solid #e3e8ef;
    width: 35%;
    text-transform: none;
    font-size: 0.8125rem;
    letter-spacing: normal;
}

.warehouse-tailwind-page table.table-condensed td {
    border: 0;
    border-bottom: 1px solid #eef2f6;
}

/* DataTables chrome */
.warehouse-tailwind-page .dataTables_wrapper .dataTables_length,
.warehouse-tailwind-page .dataTables_wrapper .dataTables_filter,
.warehouse-tailwind-page .dataTables_wrapper .dataTables_info,
.warehouse-tailwind-page .dataTables_wrapper .dataTables_paginate {
    margin: 0.5rem 0;
    color: #4b5565;
}

.warehouse-tailwind-page .dataTables_wrapper .dataTables_length select,
.warehouse-tailwind-page .dataTables_wrapper .dataTables_filter input {
    min-height: 2.25rem;
    border: 1px solid #cdd5df;
    border-radius: 0.5rem;
    background: #fff;
    padding: 0.375rem 0.625rem;
    outline: none;
}

.warehouse-tailwind-page .pagination {
    display: flex;
    gap: 0.25rem;
    margin: 0;
}

.warehouse-tailwind-page .pagination > li > a,
.warehouse-tailwind-page .pagination > li > span {
    min-width: 2.25rem;
    border: 1px solid #cdd5df;
    border-radius: 0.5rem;
    color: #364152;
    padding: 0.45rem 0.7rem;
    text-align: center;
}

.warehouse-tailwind-page .pagination > .active > a,
.warehouse-tailwind-page .pagination > .active > span {
    border-color: #3498db;
    background: #3498db;
    color: #fff;
}

/* select2 inside warehouse pages/modals */
.warehouse-tailwind-page .select2-container,
.warehouse-tailwind-modal .select2-container {
    width: 100% !important;
}

.warehouse-tailwind-page .select2-container .select2-selection--single,
.warehouse-tailwind-modal .select2-container .select2-selection--single {
    height: 2.625rem;
    border: 1px solid #cdd5df;
    border-radius: 0.5rem;
    background: #fff;
}

.warehouse-tailwind-page .select2-container .select2-selection--single .select2-selection__rendered,
.warehouse-tailwind-modal .select2-container .select2-selection--single .select2-selection__rendered {
    height: 2.5rem;
    color: #121926;
    line-height: 2.5rem;
    padding-left: 0.75rem;
}

.warehouse-tailwind-page .select2-container .select2-selection--single .select2-selection__arrow,
.warehouse-tailwind-modal .select2-container .select2-selection--single .select2-selection__arrow {
    height: 2.5rem;
    right: 0.5rem;
}

.warehouse-tailwind-page .select2-container--focus .select2-selection--single,
.warehouse-tailwind-page .select2-container--open .select2-selection--single,
.warehouse-tailwind-modal .select2-container--focus .select2-selection--single,
.warehouse-tailwind-modal .select2-container--open .select2-selection--single {
    border-color: #3498db;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.16);
}

/* Badges (replaces badge bg-*) */
.warehouse-badge {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    padding: 0.2rem 0.65rem;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.25rem;
    color: #fff;
    background: #94a3b8;
}

.warehouse-badge-secondary { background: #6c757d; }
.warehouse-badge-primary   { background: #3498db; }
.warehouse-badge-info      { background: #00838f; }
.warehouse-badge-success   { background: #27ae60; }
.warehouse-badge-warning   { background: #e65100; color: #fff; }
.warehouse-badge-danger    { background: #c0392b; }

/* Alerts (replaces alert alert-*) */
.warehouse-alert {
    border: 1px solid transparent;
    border-radius: 0.625rem;
    padding: 0.875rem 1.1rem;
    font-size: 0.875rem;
    margin-bottom: 1rem;
}

.warehouse-alert-info    { background: #e0f7fa; border-color: #b2ebf2; color: #00586b; }
.warehouse-alert-success { background: #e8f5e9; border-color: #c8e6c9; color: #1b5e20; }
.warehouse-alert-warning { background: #fff8e1; border-color: #ffe7a0; color: #7a4f00; }
.warehouse-alert-danger  { background: #fdecea; border-color: #f8c9c3; color: #7f1d12; }

/* info-box (AdminLTE style stat boxes used in transfer_report.blade.php) */
.warehouse-info-box {
    display: flex;
    align-items: center;
    overflow: hidden;
    border: 1px solid #e3e8ef;
    border-radius: 0.75rem;
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    min-height: 4.75rem;
}

.warehouse-info-box-icon {
    display: flex;
    flex: 0 0 4.25rem;
    align-items: center;
    justify-content: center;
    height: 4.75rem;
    font-size: 1.5rem;
    color: #fff;
}

.warehouse-info-box-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0.5rem 0.9rem;
}

.warehouse-info-box-text {
    color: #697586;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.warehouse-info-box-number {
    color: #121926;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.4rem;
}

.warehouse-info-box-aqua .warehouse-info-box-icon  { background: #00838f; }
.warehouse-info-box-green .warehouse-info-box-icon { background: #27ae60; }
.warehouse-info-box-yellow .warehouse-info-box-icon { background: #e65100; }
.warehouse-info-box-blue .warehouse-info-box-icon  { background: #3498db; }

/* Modal (Bootstrap .modal.fade outer kept; only inner classes restyled). */
.warehouse-tailwind-modal .modal-content,
.warehouse-modal-content {
    overflow: hidden;
    border: 1px solid #e3e8ef;
    border-radius: 0.875rem;
    background: #fff;
    box-shadow: 0 24px 48px rgba(16, 24, 40, 0.2);
}

.warehouse-tailwind-modal .modal-header,
.warehouse-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #e3e8ef;
    padding: 1rem 1.25rem;
}

.warehouse-tailwind-modal .modal-title,
.warehouse-modal-header .modal-title {
    margin: 0;
    color: #121926;
    font-size: 1.125rem;
    font-weight: 600;
    flex: 1 1 auto;
    text-align: left;
}

.warehouse-tailwind-modal .modal-body,
.warehouse-modal-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem;
}

.warehouse-tailwind-modal .modal-footer,
.warehouse-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.625rem;
    border-top: 1px solid #e3e8ef;
    background: #f8fafc;
    padding: 1rem 1.25rem;
}

.warehouse-tailwind-modal .close,
.warehouse-tailwind-modal .btn-close {
    display: inline-flex;
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 0.5rem;
    background: transparent;
    color: #697586;
    font-size: 1.1rem;
    line-height: 1;
    opacity: 1;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.warehouse-tailwind-modal .close:hover,
.warehouse-tailwind-modal .close:focus,
.warehouse-tailwind-modal .btn-close:hover,
.warehouse-tailwind-modal .btn-close:focus {
    background: #eef2f6;
    color: #121926;
    outline: none;
}

@media (min-width: 768px) {
    .warehouse-filter-grid,
    .warehouse-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1280px) {
    .warehouse-filter-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

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

/* Dashboard (index.blade.php) layout grids - plain CSS grid/flex since the
   pre-purged tw- utility set does not include every grid-cols/col-span
   combination this dashboard needs. */
.warehouse-dash-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    margin-bottom: 1rem;
}

.warehouse-dash-row-2 {
    grid-template-columns: minmax(0, 1fr);
}

.warehouse-dash-row-4 {
    grid-template-columns: minmax(0, 1fr);
}

.warehouse-dash-row-quick-actions {
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 576px) {
    .warehouse-dash-row-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 768px) {
    .warehouse-dash-row-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .warehouse-dash-row-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    .warehouse-dash-row-quick-actions {
        grid-template-columns: 3fr 4fr 5fr;
    }
}

.warehouse-dash-col-detail {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

@media (min-width: 768px) {
    .warehouse-dash-col-detail {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    .warehouse-dash-detail-main {
        grid-template-columns: 2fr 1fr;
    }
}

.warehouse-dash-detail-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

@media (min-width: 992px) {
    .warehouse-dash-detail-trend {
        grid-template-columns: 5fr 7fr;
    }
}

.warehouse-dash-detail-trend {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

.warehouse-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    text-align: center;
}

/* warehouse/show.blade.php layout grids */
.warehouse-show-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

.warehouse-show-info-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

.warehouse-show-stat-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    text-align: center;
}

@media (min-width: 768px) {
    .warehouse-show-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 992px) {
    .warehouse-show-grid {
        grid-template-columns: 2fr 1fr;
    }
}

/* A handful of utility values not present in the shared pre-purged tw-
   utility set (see public/css/tailwind/app.css) but needed on the
   warehouse dashboard. Scoped to this module only. */
.warehouse-tailwind-page .warehouse-py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.warehouse-tailwind-page .warehouse-opacity-50 { opacity: 0.5; }
.warehouse-tailwind-page .warehouse-text-link { color: #2563eb; }
.warehouse-tailwind-page .warehouse-text-link:hover { color: #1d4ed8; }
.warehouse-tailwind-page .warehouse-text-success { color: #16a34a; }
.warehouse-tailwind-page .warehouse-text-danger { color: #dc2626; }


.dashboard-stats-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    align-items: stretch;
    margin-bottom: 1rem;
}

.dashboard-stats-grid > * {
    min-width: 0;
    height: 100%;
}

.dashboard-stat-grid-item {
    display: flex;
}

.dashboard-stat-grid-item > * {
    width: 100%;
    height: 100%;
}

@media (min-width: 640px) {
    .dashboard-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .dashboard-stats-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.dashboard-three-column-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    align-items: stretch;
    margin-bottom: 1rem;
}

.dashboard-three-column-row > * {
    min-width: 0;
    height: 100%;
}

.dashboard-three-column-row .module-shared-widget {
    grid-column: auto !important;
    height: 100%;
    margin-bottom: 0 !important;
}

.dashboard-three-column-row .module-shared-widget-shell {
    height: 100%;
}

@media (min-width: 768px) {
    .dashboard-three-column-row {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}


/* ==========================================================================
   POS UI Enhanced Styles
   - Modernized product cards with image + name + price overlay
   - Compact, user-friendly cart table
   - Modern, consistent buttons
   - Fully responsive across screen sizes
   ========================================================================== */

/* ----------------------------- Design Tokens ------------------------------ */
/* --pos-primary / --pos-primary-dark are intentionally NOT redeclared here -
   resources/views/layouts/partials/theme-vars.blade.php sets them to
   var(--brand-600)/var(--brand-700) so POS buttons follow the business's
   selected theme color. This file loads after theme-vars in the cascade, so
   redeclaring them here would silently override the brand color with a
   fixed purple. */
:root {
    --pos-success: #059669;
    --pos-success-dark: #047857;
    --pos-danger: #dc2626;
    --pos-danger-dark: #b91c1c;
    --pos-warning: #d97706;
    --pos-warning-dark: #b45309;
    --pos-info: #0ea5e9;
    --pos-dark: #0f2b46;
    --pos-text: #1e293b;
    --pos-text-muted: #64748b;
    --pos-border: #e5e7eb;
    --pos-bg-soft: #f8fafc;
    --pos-radius-sm: 8px;
    --pos-radius: 12px;
    --pos-radius-lg: 16px;
    --pos-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
    --pos-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
    --pos-shadow-lg: 0 10px 30px rgba(15, 23, 42, 0.12);
    --pos-transition: all 0.2s ease;
    /* Single source of truth for cart-row control height, so the quantity
       stepper, unit price input, subtotal input, and unit dropdown all
       line up exactly - change this once instead of per-control. */
    --pos-control-height: 36px;
}

/* ----------------------------- Theme-color action buttons -----------------
   Date & Time, Kitchen Orders, and Recent Transactions buttons key off
   --pos-primary (brand-mapped, see theme-vars.blade.php) instead of a
   hardcoded purple/green so they repaint whenever the business changes its
   theme color in Business Settings -> System. The text-shadow on the label
   keeps white text legible against lighter brand colors (e.g. yellow). */
.pos-datetime-btn,
.pos-kitchen-orders-btn,
.pos-recent-transactions-btn {
    background-color: var(--pos-primary);
    transition: var(--pos-transition);
}
.pos-datetime-btn:hover,
.pos-kitchen-orders-btn:hover,
.pos-recent-transactions-btn:hover {
    background-color: var(--pos-primary-dark);
}
.pos-datetime-btn,
.pos-datetime-btn *,
.pos-kitchen-orders-btn,
.pos-kitchen-orders-btn *,
.pos-recent-transactions-btn,
.pos-recent-transactions-btn * {
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.pos-kitchen-orders-btn {
    border: 1.5px solid var(--pos-primary-dark);
    height: 34px;
    padding: 0 16px;
    white-space: nowrap;
}
.pos-recent-transactions-btn {
    box-shadow: 0 2px 8px rgba(var(--brand-600-rgb), 0.35);
}

/* =========================================================================
   1) PRODUCT LIST – image with name + price overlay
   ========================================================================= */
#product_list_body {
    max-height: calc(100vh - 180px);
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
    /* Push the scrollbar out into the panel's existing right padding
       instead of letting it eat into the card grid's own width — keeps
       the rightmost cards flush with the panel edge, matching the top
       toolbar and bottom action bar's content edge. */
    width: calc(100% + 10px);
    margin-right: -10px;
}
#product_list_body::-webkit-scrollbar { width: 8px; }
#product_list_body::-webkit-scrollbar-track { background: transparent; }
#product_list_body::-webkit-scrollbar-thumb {
    background: #cbd5e1; border-radius: 8px;
}
#product_list_body::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* Product cards use a fluid CSS grid — no Bootstrap columns involved.
   (Phase 3: the Bootstrap col-md-3/col-xs-4 markup was removed from both
   product_list.blade.php and the pos.js dynamic template, so the old
   float/width neutralisers are gone too.) */
#product_list_body {
    display: grid !important;
    gap: 8px;
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
    align-items: stretch;
    justify-content: start;
}
#product_list_body > .product_list {
    min-width: 0;
    max-width: 100%;
    padding: 0;
    margin: 0;
}
/* Empty / no-products message spans the full grid width. */
#product_list_body > .pos-product-empty {
    grid-column: 1 / -1;
    text-align: center;
    padding: 12px;
}
@media (min-width: 1600px) {
    #product_list_body { grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); }
}
@media (max-width: 1199px) {
    #product_list_body { grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 7px; }
}
@media (max-width: 991px) {
    #product_list_body { grid-template-columns: repeat(auto-fit, minmax(108px, 1fr)); gap: 7px; }
}
@media (max-width: 767px) {
    #product_list_body {
        grid-template-columns: repeat(4, 1fr);
        gap: 7px;
    }
}
@media (max-width: 575px) {
    #product_list_body {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }
}
@media (max-width: 380px) {
    #product_list_body {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }
}

/* Card */
.product_box {
    position: relative !important;
    background: #ffffff !important;
    border: 1px solid var(--pos-border) !important;
    border-radius: 10px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    cursor: pointer !important;
    box-shadow: var(--pos-shadow-sm) !important;
    transition: var(--pos-transition) !important;
    aspect-ratio: 1 / 0.95;
    display: flex;
    flex-direction: column;
    isolation: isolate;
}
.product_box:hover {
    transform: translateY(-2px);
    border-color: var(--pos-primary) !important;
    box-shadow: var(--pos-shadow-lg) !important;
}

/* Image area – full card with contain + center so the product is always
   visible end-to-end, never cropped, and consistently positioned. */
.product_box .image-container {
    position: absolute !important;
    inset: 0 !important;
    height: 100% !important;
    width: 100% !important;
    background-color: #f8fafc !important;
    background-size: contain !important;
    background-position: center 36% !important;
    background-repeat: no-repeat !important;
    background-origin: content-box !important;
    margin: 0 !important;
    padding: 4px 4px 38% 4px !important;
    border-radius: 0 !important;
    transform: scale(1);
    transform-origin: center 36%;
    transition: transform 0.35s ease;
}
.product_box:hover .image-container {
    transform: scale(1.05);
}

/* Clean placeholder for products that fall back to default.png.
   Use data-image-url (which holds ONLY the resolved image URL) — the inline
   style always contains "default.png" as a fallback layer, so a
   [style*="default.png"] match would hit every card and hide real images. */
.product_box .image-container[data-image-url$="default.png"] {
    background-image:
        linear-gradient(135deg, #eef2ff 0%, #f8fafc 100%),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23a5b4fc' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><rect x='8' y='12' width='48' height='40' rx='4'/><circle cx='22' cy='26' r='4'/><path d='M8 44l14-14 12 12 8-8 14 14'/></svg>") !important;
    background-size: 100%, 38% !important;
    background-position: center, center 38% !important;
    background-repeat: no-repeat, no-repeat !important;
}

/* Subtle gradient at the bottom – smoother, less harsh, lets the product
   stay visible while keeping overlay text readable. */
.product_box::before {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 50%;
    background: linear-gradient(
        180deg,
        rgba(15, 23, 42, 0) 0%,
        rgba(15, 23, 42, 0.32) 45%,
        rgba(15, 23, 42, 0.78) 100%
    );
    z-index: 1;
    pointer-events: none;
}

/* Text overlay */
.product_box .text_div {
    position: absolute !important;
    left: 0; right: 0; bottom: 0;
    z-index: 2;
    padding: 5px 7px 6px !important;
    margin: 0 !important;
    color: #fff;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.product_box .text_div .product-name {
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.01em;
    color: #ffffff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-break: break-word;
    margin: 0;
}
.product_box .text_div .product-sku {
    font-size: 9px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}

/* Stock pill – compact */
.product_box .text_div .product-stock {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    font-size: 8.5px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 999px;
    letter-spacing: 0.02em;
    margin-top: 1px;
    backdrop-filter: blur(4px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.35;
}
.product_box .text_div .product-stock.in-stock {
    background-color: rgba(16, 185, 129, 0.92);
    color: #ffffff;
}
.product_box .text_div .product-stock.no-stock {
    background-color: rgba(148, 163, 184, 0.4);
    color: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

/* Compact, consistent price badge */
.product_box[data-price]::after {
    content: attr(data-price);
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 3;
    background: rgba(255, 255, 255, 0.97);
    color: var(--pos-dark);
    font-size: 9.5px;
    font-weight: 800;
    line-height: 1;
    padding: 3px 6px;
    border-radius: 6px;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.08),
        0 3px 7px rgba(15, 23, 42, 0.10);
    pointer-events: none;
    letter-spacing: 0;
    white-space: nowrap;
}

/* Featured-products box uses same styling */
#featured_products_box .product_box { aspect-ratio: 1 / 0.95; }

/* =========================================================================
   2) CART / SALES TABLE – compact and user-friendly
   ========================================================================= */
.pos_product_div { padding: 0 4px; }

#pos_table {
    border-collapse: separate !important;
    border-spacing: 0 6px !important;
    border: 0 !important;
    background: transparent !important;
    margin-bottom: 8px;
    width: 100% !important;
}
#pos_table thead tr {
    background: var(--pos-bg-soft);
}
#pos_table thead th {
    background-color: #eef2ff !important;
    color: var(--pos-text) !important;
    font-weight: 700 !important;
    font-size: 12.5px !important;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 8px 8px !important;
    border: 0 !important;
    border-bottom: 1px solid var(--pos-border) !important;
    vertical-align: middle !important;
    /* Sticky header – stays pinned at the top of the scrollable
       .pos_product_div while the user scrolls through cart items. */
    position: sticky;
    top: 0;
    z-index: 5;
}
/* Soft shadow under the sticky header so it visually separates from
   the rows that scroll behind it. */
#pos_table thead::after {
    content: "";
}
#pos-left-pane .pos_product_div { position: relative; }
#pos_table thead tr th:first-child { border-top-left-radius: var(--pos-radius-sm); }
#pos_table thead tr th:last-child  { border-top-right-radius: var(--pos-radius-sm); }
#pos_table thead th:first-child { border-top-left-radius: var(--pos-radius-sm); border-bottom-left-radius: var(--pos-radius-sm); }
#pos_table thead th:last-child  { border-top-right-radius: var(--pos-radius-sm); border-bottom-right-radius: var(--pos-radius-sm); }

#pos_table tbody tr,
#pos_table tbody tr.product_row {
    background-color: #ffffff !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    transition: var(--pos-transition);
}
#pos_table tbody tr:hover { box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08); }

#pos_table tbody td {
    padding: 10px 10px !important;
    border: 0 !important;
    border-top: 1px solid #eef2f7 !important;
    border-bottom: 1px solid #eef2f7 !important;
    vertical-align: middle !important;
    font-size: 13px;
    color: var(--pos-text);
}
#pos_table tbody td:first-child {
    border-left: 1px solid #eef2f7 !important;
    border-top-left-radius: var(--pos-radius-sm);
    border-bottom-left-radius: var(--pos-radius-sm);
}
#pos_table tbody td:last-child {
    border-right: 1px solid #eef2f7 !important;
    border-top-right-radius: var(--pos-radius-sm);
    border-bottom-right-radius: var(--pos-radius-sm);
}

/* The serial-number column has no real width hook of its own (the table is
   auto-layout and its header text alone would otherwise reserve a wide
   column even when every cell in it is empty). Capping it here keeps the
   gap between the product cell and the pricing controls tight. */
#pos_table thead th.pos-col-serial {
    width: 70px;
}

/* Cart row internal controls.
   All controls share --pos-control-height (and box-sizing: border-box) so
   the quantity stepper, unit price input, subtotal input, and unit dropdown
   are pixel-identical in height, regardless of border-width differences
   between a plain input and a grouped button. */
#pos_table .form-control,
#pos_table input[type="text"],
#pos_table input[type="number"],
#pos_table select.form-control {
    height: var(--pos-control-height) !important;
    box-sizing: border-box !important;
    padding: 6px 10px !important;
    font-size: 13px !important;
    border-radius: var(--pos-radius-sm) !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: none !important;
    transition: var(--pos-transition);
}
#pos_table .form-control:focus {
    border-color: var(--pos-primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--brand-600-rgb), 0.15) !important;
}

/* Product note/description textarea (Add Sale/Quotation/Draft cart rows):
   exclude from the single-line control height above so its rows="2" sizing
   isn't squashed, and keep the Product cell top-aligned when it holds one
   so the note doesn't get vertically centered against the other short cells. */
#pos_table textarea.form-control {
    height: auto !important;
    min-height: 3.5rem;
    resize: vertical;
}
#pos_table td:has(> textarea.form-control) {
    vertical-align: top !important;
}

/* Quantity stepper - rendered as a single integrated pill (one outer
   border + radius around all three segments, thin internal dividers
   instead of doubled-up borders) so it reads as one control, the way
   Square/Shopify/Lightspeed style their quantity steppers. Sized with
   flexbox so the value field gets the lion's share of the width while the
   buttons stay a fixed, comfortable tap target - not a hard, cramped cap. */
#pos_table .input-group.input-number {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    width: 132px;
    max-width: 100%;
    height: var(--pos-control-height);
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    overflow: hidden;
    box-sizing: border-box;
    margin: 0 auto;
}
#pos_table .input-group.input-number:focus-within {
    border-color: var(--pos-primary);
    box-shadow: 0 0 0 3px rgba(var(--brand-600-rgb), 0.15);
}
#pos_table .input-group.input-number .input-group-btn {
    display: flex;
    flex: 0 0 32px;
}
#pos_table .pos-quantity .btn,
#pos_table .input-group.input-number .btn.quantity-up,
#pos_table .input-group.input-number .btn.quantity-down,
#pos_table .quantity-up,
#pos_table .quantity-down {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: var(--pos-text) !important;
    font-weight: 800 !important;
    width: 100%;
    height: 100%;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: none !important;
    transition: var(--pos-transition);
}
#pos_table .quantity-down,
#pos_table .input-group.input-number .btn.quantity-down {
    color: var(--pos-danger) !important;
    border-right: 1px solid #f1f5f9 !important;
}
#pos_table .quantity-up,
#pos_table .input-group.input-number .btn.quantity-up {
    color: var(--pos-success) !important;
    border-left: 1px solid #f1f5f9 !important;
}
#pos_table .quantity-down:hover,
#pos_table .input-group.input-number .btn.quantity-down:hover {
    background: #fee2e2 !important;
    color: var(--pos-danger-dark) !important;
}
#pos_table .quantity-up:hover,
#pos_table .input-group.input-number .btn.quantity-up:hover {
    background: #dcfce7 !important;
    color: var(--pos-success-dark) !important;
}
#pos_table .input-group.input-number .pos_quantity,
#pos_table .input-group.input-number input.pos_quantity {
    flex: 1 1 auto;
    min-width: 0;
    height: 100% !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 4px !important;
    text-align: center;
    font-weight: 700;
}

/* Unit dropdown ("Pieces") sits directly below the quantity stepper - match
   its width so the two stack as one visually aligned column. */
#pos_table td .sub_unit {
    width: 132px;
    max-width: 100%;
    display: block;
    margin: 0 auto;
}

/* Delete (trash) button */
#pos_table .pos_remove_row,
#pos_table .fa-trash-alt,
#pos_table .remove_pos_row {
    color: var(--pos-danger);
    font-size: 16px;
    transition: var(--pos-transition);
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
}
#pos_table .pos_remove_row:hover,
#pos_table .remove_pos_row:hover {
    color: var(--pos-danger-dark);
    background-color: rgba(220, 38, 38, 0.1);
    transform: scale(1.1);
}
#pos_table thead .fa-trash-alt {
    color: var(--pos-danger);
}

/* Empty cart hint */
#pos_table tbody:empty + .pos-empty-hint { display: block; }

/* Compact mobile cart */
@media (max-width: 767px) {
    #pos_table { font-size: 12px; }
    #pos_table thead { display: none; }
    #pos_table, #pos_table tbody, #pos_table tr, #pos_table td { display: block; width: 100%; }
    #pos_table tbody tr {
        margin-bottom: 10px;
        padding: 8px;
        border: 1px solid #eef2f7 !important;
        border-radius: var(--pos-radius);
    }
    #pos_table tbody td {
        border: 0 !important;
        padding: 4px 0 !important;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
    }
    #pos_table tbody td:first-child { border-radius: 0; }
    #pos_table tbody td:last-child  { border-radius: 0; justify-content: flex-end; }
}

/* Totals strip */
.pos_form_totals {
    background: transparent;
    border-radius: 0;
    padding: 0;
    margin-top: 4px;
    margin-bottom: 6px;
    border: 0;
}

.pos-totals-card {
    padding: 6px 8px;
}

.pos-totals-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
}

.pos-total-cell {
    flex: 1 1 110px;
    min-width: 110px;
    padding: 6px 8px;
}

.pos-total-heading {
    min-width: 0;
}

.pos-total-label {
    min-width: 0;
    font-size: 10px;
    line-height: 1.1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pos-total-label span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pos-total-value {
    margin-top: 4px;
    font-size: 13px;
    line-height: 1;
}

.pos-total-edit {
    width: 18px;
    height: 18px;
    min-width: 18px;
    font-size: 11px;
}

/* =========================================================================
   3) MODERN BUTTONS – global, consistent, screen-friendly
   ========================================================================= */

/* Generic button polish (won’t break Tailwind tw- buttons) */
.btn {
    border-radius: var(--pos-radius-sm) !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em;
    /* Only transition the hover/focus decoration properties. `all` used to
       also animate any post-load reflow (e.g. icheck.js re-styling a
       neighbouring checkbox), which showed up as a visible settle/flicker
       on buttons sitting in the same row on first paint. */
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease !important;
    border-width: 1px !important;
    box-shadow: var(--pos-shadow-sm);
}
.btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--pos-shadow);
}
.btn:active { transform: translateY(0); }
.btn:focus { outline: none; box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.25); }

.btn-primary {
    background: linear-gradient(135deg, var(--pos-primary), var(--pos-primary-dark)) !important;
    border-color: var(--pos-primary-dark) !important;
    color: #fff !important;
}
.btn-success {
    background: linear-gradient(135deg, var(--pos-success), var(--pos-success-dark)) !important;
    border-color: var(--pos-success-dark) !important;
    color: #fff !important;
}
.btn-danger {
    background: linear-gradient(135deg, var(--pos-danger), var(--pos-danger-dark)) !important;
    border-color: var(--pos-danger-dark) !important;
    color: #fff !important;
}
.btn-warning {
    background: linear-gradient(135deg, #f59e0b, var(--pos-warning-dark)) !important;
    border-color: var(--pos-warning-dark) !important;
    color: #fff !important;
}
.btn-info {
    background: linear-gradient(135deg, #38bdf8, var(--pos-info)) !important;
    border-color: var(--pos-info) !important;
    color: #fff !important;
}
.btn-default {
    background: #ffffff !important;
    border-color: var(--pos-border) !important;
    color: var(--pos-text) !important;
}
.btn-default:hover {
    border-color: var(--pos-primary) !important;
    color: var(--pos-primary) !important;
    background: #f8fafc !important;
}

/* Make the bottom action bar buttons more compact / consistent */
.pos-form-actions {
    backdrop-filter: blur(6px);
    background: rgba(255, 255, 255, 0.96) !important;
}
.pos-form-actions button {
    min-height: 44px;
    min-width: 76px;
    line-height: 1.1;
}
.pos-form-actions #pos-finalize,
.pos-form-actions .pos-express-finalize,
.pos-form-actions #pos-cancel,
.pos-form-actions #pos-draft,
.pos-form-actions #pos-quotation,
.pos-form-actions #btn-duitnow {
    min-height: 44px;
}
.pos-form-actions .pos-total {
    border-radius: var(--pos-radius-lg) !important;
}

@media (max-width: 991px) {
    .pos-form-actions button { min-height: 48px; min-width: 72px; }
    .pos-form-actions .pos-total { padding: 8px 12px !important; }
}
@media (max-width: 575px) {
    .pos-form-actions { padding: 4px !important; }
    .pos-form-actions > div { gap: 6px !important; }
    .pos-form-actions button {
        min-height: 42px;
        min-width: 60px;
        font-size: 11px !important;
        padding: 4px 8px !important;
    }
}

/* Input-group buttons (search / quick-add etc.) */
.input-group .btn-default,
.input-group .btn-flat,
.input-group .pos-input-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--pos-radius-sm) !important;
    border: 1px solid var(--pos-border) !important;
    background: #fff !important;
    height: 36px;
}
.input-group .input-group-addon {
    background: var(--pos-bg-soft);
    border: 1px solid var(--pos-border);
    color: var(--pos-text-muted);
    border-radius: var(--pos-radius-sm);
}
.input-group .form-control {
    border-radius: var(--pos-radius-sm) !important;
    border: 1px solid var(--pos-border) !important;
    height: 36px !important;
}

/* Select2 polish to match */
.select2-container--default .select2-selection--single {
    border-radius: var(--pos-radius-sm) !important;
    border: 1px solid var(--pos-border) !important;
    height: 36px !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 34px !important;
}

/* =========================================================================
   4) SEARCH / TOP FORM – cleaner alignment
   ========================================================================= */
#search_product {
    height: 40px !important;
    font-size: 14px;
}
#search_product + .input-group-btn .btn,
.input-group .input-group-btn .btn[data-target="#configure_search_modal"],
.input-group .input-group-btn .pos_add_quick_product,
.input-group .input-group-btn #weighing_scale_btn,
.input-group .input-group-btn .pos-input-button {
    height: 40px;
}

/* Category / Brand drawer trigger buttons polish – keep the gradient look. */
label[for="my-drawer-4"]:not(.tw-dw-drawer-overlay),
label[for="my-drawer-brand"]:not(.tw-dw-drawer-overlay) {
    box-shadow: var(--pos-shadow-sm);
}
label[for="my-drawer-4"]:not(.tw-dw-drawer-overlay):hover,
label[for="my-drawer-brand"]:not(.tw-dw-drawer-overlay):hover {
    box-shadow: var(--pos-shadow);
    transform: translateY(-1px);
}

/* =========================================================================
   5) RESPONSIVE LAYOUT TWEAKS
   ========================================================================= */
@media (max-width: 991px) {
    .pos_product_div { padding: 0; }
    #pos_table thead th { font-size: 11.5px !important; padding: 6px 6px !important; }
}
@media (max-width: 575px) {
    .product_box .text_div .product-name { font-size: 11.5px; }
    .product_box .text_div .product-sku  { font-size: 9.5px; }
}

/* =========================================================================
   6) POS MODALS – modifier + row-edit (description) modals share the look
   ========================================================================= */
.modifier_modal .modal-content,
.row_edit_product_price_model .modal-content {
    border-radius: var(--pos-radius-lg);
    border: 0;
    box-shadow: var(--pos-shadow-lg);
    overflow: hidden;
}
.modifier_modal .modal-header,
.row_edit_product_price_model .modal-header {
    background: linear-gradient(135deg, var(--pos-primary), var(--pos-primary-dark));
    color: #ffffff;
    border-bottom: 0;
    padding: 14px 18px;
}
.modifier_modal .modal-header .modal-title,
.modifier_modal .modal-header .modal-title .text-success,
.row_edit_product_price_model .modal-header .modal-title {
    color: #ffffff !important;
    font-weight: 700;
    font-size: 16px;
}
.modifier_modal .modal-header .close,
.row_edit_product_price_model .modal-header .close {
    color: #ffffff;
    opacity: 0.9;
    text-shadow: none;
    font-size: 24px;
}
.modifier_modal .modal-header .close:hover,
.row_edit_product_price_model .modal-header .close:hover { opacity: 1; }

.modifier_modal .modal-body,
.row_edit_product_price_model .modal-body { padding: 18px; background: #f8fafc; }

/* Form fields inside the row-edit modal */
.row_edit_product_price_model .modal-body label {
    color: var(--pos-text);
    font-weight: 700;
    font-size: 13px;
    margin-bottom: 6px;
    display: block;
}
.row_edit_product_price_model .modal-body .form-control,
.row_edit_product_price_model .modal-body textarea.form-control {
    border-radius: var(--pos-radius-sm) !important;
    border: 1.5px solid #cbd5e1 !important;
    background: #ffffff !important;
    box-shadow: none !important;
    padding: 8px 12px !important;
    color: var(--pos-text);
    transition: var(--pos-transition);
}
.row_edit_product_price_model .modal-body .form-control:focus,
.row_edit_product_price_model .modal-body textarea.form-control:focus {
    border-color: var(--pos-primary) !important;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15) !important;
}
.row_edit_product_price_model .modal-body .help-block {
    color: var(--pos-text-muted);
    font-size: 12px;
    margin-top: 6px;
}

.modifier_modal .panel,
.modifier_modal .panel-default {
    border: 1px solid #e2e8f0 !important;
    border-radius: var(--pos-radius) !important;
    box-shadow: var(--pos-shadow-sm) !important;
    overflow: hidden;
    background: #ffffff;
}
.modifier_modal .panel-heading {
    background: #eef2ff !important;
    border-bottom: 1px solid #e0e7ff !important;
    padding: 10px 14px !important;
}
.modifier_modal .panel-heading .panel-title a {
    color: var(--pos-primary-dark) !important;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
}
.modifier_modal .panel-body { background: #ffffff; padding: 12px 14px; }

/* Modifier choice pills */
.modifier_modal .btn-group { flex-wrap: wrap; gap: 8px; display: flex; }
.modifier_modal .btn-group > .btn,
.modifier_modal .btn-group > label.btn,
.modifier_modal .btn-group > label.btn.btn-primary {
    background: #ffffff !important;
    background-image: none !important;
    border: 1.5px solid #cbd5e1 !important;
    color: var(--pos-text) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    border-radius: 999px !important;
    padding: 6px 14px !important;
    margin: 0 !important;
    box-shadow: none !important;
    transition: var(--pos-transition);
}
.modifier_modal .btn-group > label.btn:hover {
    border-color: var(--pos-primary) !important;
    color: var(--pos-primary) !important;
    background: #eef2ff !important;
    transform: none;
}
.modifier_modal .btn-group > label.btn.active,
.modifier_modal .btn-group > label.btn.btn-primary.active {
    background: linear-gradient(135deg, var(--pos-primary), var(--pos-primary-dark)) !important;
    background-image: linear-gradient(135deg, var(--pos-primary), var(--pos-primary-dark)) !important;
    border-color: var(--pos-primary-dark) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(79, 70, 229, 0.25) !important;
}
.modifier_modal .btn-group > label.btn.active:hover {
    color: #ffffff !important;
}

/* Footer buttons polish */
.modifier_modal .modal-footer,
.row_edit_product_price_model .modal-footer {
    background: #ffffff;
    border-top: 1px solid #eef2f7;
    padding: 12px 16px;
}
.modifier_modal .modal-footer .add_modifier,
.modifier_modal .modal-footer .tw-dw-btn-primary,
.row_edit_product_price_model .modal-footer .tw-dw-btn-primary {
    background: linear-gradient(135deg, var(--pos-primary), var(--pos-primary-dark)) !important;
    border: 0 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    border-radius: var(--pos-radius-sm) !important;
    padding: 8px 18px !important;
    box-shadow: 0 4px 10px rgba(79, 70, 229, 0.25) !important;
    transition: var(--pos-transition);
}
.modifier_modal .modal-footer .add_modifier:hover,
.modifier_modal .modal-footer .tw-dw-btn-primary:hover,
.row_edit_product_price_model .modal-footer .tw-dw-btn-primary:hover {
    background: linear-gradient(135deg, var(--pos-primary-dark), var(--pos-primary-dark)) !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(79, 70, 229, 0.35) !important;
}
.modifier_modal .modal-footer .tw-dw-btn-neutral,
.row_edit_product_price_model .modal-footer .tw-dw-btn-neutral {
    background: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    color: var(--pos-text) !important;
    font-weight: 700 !important;
    border-radius: var(--pos-radius-sm) !important;
    padding: 8px 18px !important;
    box-shadow: none !important;
}
.modifier_modal .modal-footer .tw-dw-btn-neutral:hover,
.row_edit_product_price_model .modal-footer .tw-dw-btn-neutral:hover {
    background: #f1f5f9 !important;
    border-color: #94a3b8 !important;
    color: var(--pos-text) !important;
}

/* =========================================================================
   7) LEFT (CART) PANE – anchor bottom edge to the action bar
   The cart card must always extend down to just above the bottom action
   buttons (`.pos-form-actions`), regardless of how many top-form rows
   (customer, price group, types-of-service, etc.) are visible.
   ========================================================================= */
.pos-left-col {
    display: flex;
    flex-direction: column;
}
@media (min-width: 1024px) {
    .pos-sale-layout {
        flex-wrap: nowrap !important;
        gap: 0 !important;
    }
    .pos-sale-layout > .pos-left-col,
    .pos-sale-layout > .pos-product-panel {
        min-width: 0 !important;
    }
    .pos-sale-layout > .pos-product-panel {
        flex: 0 0 40% !important;
        max-width: 40% !important;
    }
}
#pos-left-pane {
    /* Bottom action bar is position:fixed ~56px tall; we leave ~70px so
       there's a small gap above the buttons. The card grows to fill the
       remaining viewport height — empty cart still looks anchored. */
    min-height: calc(100vh - 165px);
    display: flex;
    flex-direction: column;
}
#pos-left-pane > .au-card__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding-bottom: 0 !important;
}
/* Cart-row wrapper – takes all leftover vertical space inside the card.
   The pos_product_div nested inside scrolls internally, so the totals
   strip (which follows naturally in the flex column) ends up flush
   against the bottom of the cart-row whenever it's full. */
#pos-left-pane .pos-cart-row {
    flex: 1 1 0 !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    overflow: hidden;
}
/* Cart items container — force-override app.css's fixed 40vh / calc(100vh-460px)
   so it actually fills the leftover height inside the cart card. */
#pos-left-pane .pos-cart-row > .pos_product_div,
#pos-left-pane .pos_product_div {
    flex: 1 1 0 !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}
/* Same override under the desktop media query so it beats app.css's
   own (min-width: 992px) rule by specificity. */
@media (min-width: 992px) {
    #pos-left-pane .pos-cart-row > .pos_product_div,
    #pos-left-pane .pos_product_div {
        flex: 1 1 0 !important;
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        overflow-y: auto !important;
    }
}
/* Mobile override too (app.css uses clamp() height on ≤991px) */
@media (max-width: 991px) {
    #pos-left-pane .pos-cart-row > .pos_product_div,
    #pos-left-pane .pos_product_div {
        height: auto !important;
        max-height: 55vh !important;
    }
}

/* Table inside the scroll area – kill bottom margin/padding so the last
   row sits tight against the scroll-area bottom edge. */
#pos-left-pane .pos-cart-row #pos_table {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}
#pos-left-pane .pos-cart-row #pos_table tbody tr:last-child td {
    padding-bottom: 6px !important;
}

/* Totals strip – natural flow (no auto-margin), so it sits right after
   the cart-row rather than floating with a gap above it. */
#pos-left-pane .pos_form_totals {
    flex: 0 0 auto;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Wider/taller viewports get a roomier card */
@media (min-height: 900px) {
    #pos-left-pane { min-height: calc(100vh - 175px); }
}
/* Compact screens still keep the bottom-anchored look */
@media (max-height: 700px) {
    #pos-left-pane { min-height: calc(100vh - 145px); }
}
/* Mobile: action bar wraps and may take more space; keep behavior fluid */
@media (max-width: 991px) {
    #pos-left-pane {
        min-height: auto;
    }
    /* On mobile, #pos-left-pane sizes to content (min-height: auto), so a
       flex:1 + overflow:hidden cart-row would collapse to zero height and
       clip the cart rows entirely. Switch to natural sizing on mobile so
       every product row is visible. */
    #pos-left-pane .pos-cart-row {
        flex: 0 0 auto !important;
        overflow: visible !important;
        display: block !important;
    }
    #pos-left-pane .pos_product_div {
        flex: 0 0 auto;
        min-height: 0;
        overflow-y: visible;
    }
}

/* Print: keep originals untouched */
@media print {
    .product_box, .product_box * { all: revert; }
    #pos-left-pane { min-height: auto !important; }
}

/* =========================================================================
   7b) VIEWPORT-FIT POS — no page-level vertical scroll
   The POS page (body.lockscreen: pos/create, pos/{id}/edit, pos/payment) is
   locked to the visual viewport. Historically #scrollable-container carried
   tw-h-screen (100vh) UNDER the POS header inside <main>, so the page always
   overflowed the window by the header height and the browser grew a second,
   page-level scrollbar. Locking <body> and letting the container flex-fill
   the leftover height removes that: the only scrollbar left on narrow
   screens is the container's own, and on desktop (≥1024px, two-column
   layout) a flex chain stretches down to the panes so the whole screen fits
   and ONLY the cart body (.pos_product_div) and the product grid
   (#product_list_body) scroll.
   ========================================================================= */
/* !important is required: the legacy AdminLTE layout script bundled in
   vendor.js runs `$('body, html, .wrapper').css('height','auto')` on every
   page load, stamping an INLINE height:auto on <body> that would otherwise
   beat these rules and collapse the whole viewport chain to content height
   (blank content area). */
body.lockscreen {
    height: 100vh !important;
    height: 100dvh !important;
    overflow: hidden;
}
body.lockscreen > .thetop {
    height: 100%;
    width: 100%;
}
body.lockscreen main {
    min-height: 0;
}
body.lockscreen #scrollable-container {
    height: auto !important;  /* overrides tw-h-screen */
    flex: 1 1 0 !important;
    min-height: 0 !important;
}
/* In-flow copyright footer: the fixed action bar always covers it on the
   POS screen, and its height alone used to force page scroll. */
body.lockscreen #scrollable-container > footer {
    display: none;
}
/* ≤1023px: the bar stays position:fixed (set in the base rule; the
   ≥1024px block below switches it to static inside the flex chain) so
   it's always reachable at the bottom of the viewport, not the scroll
   container. Pin it flush — without this it keeps the page's left
   padding as its fixed `left` offset while still being width:100%,
   overflowing off the right edge of the viewport by that same amount
   and clipping the rightmost buttons. */
@media (max-width: 1023px) {
    body.lockscreen .pos-form-actions {
        left: 0;
        right: auto;
    }
}
@media print {
    /* must out-!important the screen rule above or receipts get clipped */
    body.lockscreen {
        height: auto !important;
        overflow: visible !important;
    }
}

@media (min-width: 1024px) {
    /* NOTE: #scrollable-container deliberately KEEPS overflow-y:auto — when
       everything fits (the normal case) no scrollbar renders, and on
       ultra-short viewports or non-sale lockscreen pages (pos/payment) it
       degrades gracefully to internal scrolling instead of clipping. */
    body.lockscreen #scrollable-container {
        display: flex;
        flex-direction: column;
    }
    /* The outer chain GROWS to fill the viewport but never SHRINKS below
       its content minimum (flex-shrink: 0): on ultra-short viewports the
       container scrolls instead of the panes spilling under the action bar. */
    body.lockscreen #scrollable-container > section.content {
        flex: 1 0 auto;
        display: flex;
        flex-direction: column;
        /* flush bottom edge — the sticky action bar sits on the viewport edge */
        padding-bottom: 0;
    }
    body.lockscreen #scrollable-container > section.content > form {
        flex: 1 0 auto;
        display: flex;
        flex-direction: column;
    }
    /* Only the main layout row — the action-bar row is handled separately
       below and must not steal free space. */
    body.lockscreen #scrollable-container > section.content > form > .pos-shell-row {
        flex: 1 0 auto;
        display: flex;
        margin-bottom: 0 !important;
    }
    body.lockscreen #scrollable-container > section.content > form > .pos-shell-row > .pos-shell-col {
        flex: 1 1 auto;
        float: none;
        min-width: 0;
        min-height: 0;
        display: flex;
        flex-direction: column;
        /* The 6.5rem reservation for the fixed action bar (rule
           `.content .tw-mb-14`) is obsolete here: the bar participates in
           the flex column below, so its true height is always accounted. */
        margin-bottom: 0 !important;
    }
    /* Action bar: in the viewport-locked layout it joins the flex column
       instead of floating fixed over the content. Its wrapper row sticks
       to the bottom of the scrollport, so if a short viewport ever forces
       the container to scroll, the bar stays visible — and its REAL height
       (it wraps taller at narrower widths) is reserved automatically. */
    body.lockscreen #scrollable-container > section.content > form > .pos-shell-row ~ .pos-actions-row {
        position: sticky;
        bottom: 0;
        z-index: 1000;
        flex: 0 0 auto;
    }
    body.lockscreen #scrollable-container > section.content > form .pos-form-actions {
        position: static;
        width: 100%;
    }
    body.lockscreen .pos-sale-layout {
        flex: 1 1 auto;
        min-height: 0;
    }
    body.lockscreen .pos-sale-layout > .pos-left-col {
        min-height: 0;
    }
    /* Height now comes from the flex chain — the old min-height:100vh-∆px
       heuristics (section 7) are what used to overshoot the viewport. */
    body.lockscreen #pos-left-pane {
        flex: 1 1 auto;
        min-height: 0 !important;
    }
    /* Keep a usable cart strip even when the top form rows are numerous;
       if space runs out beyond this floor the container scrolls instead. */
    body.lockscreen #pos-left-pane .pos-cart-row {
        min-height: 140px !important;
    }
    /* Right column: the product grid takes the leftover height and scrolls. */
    body.lockscreen .pos-sale-layout > .pos-product-panel {
        display: flex;
        flex-direction: column;
        min-height: 0;
    }
    body.lockscreen .pos-product-panel > .pos-product-results {
        flex: 1 1 0;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }
    body.lockscreen .pos-product-panel > .pos-product-results > .pos-product-results-grid {
        flex: 1 1 auto;
        min-height: 160px;
        display: flex;
        flex-direction: column;
    }
    body.lockscreen .pos-product-panel #product_list_body {
        flex: 1 1 0;
        min-height: 0;
        max-height: none !important;
        overflow-y: auto;
        overflow-x: hidden;
    }
}

/* =========================================================================
   8) MOBILE RESPONSIVENESS REFINEMENTS – touch-friendly POS on phones
   These rules ONLY scale layout/typography for narrow viewports. They never
   change which elements are visible (those branches are driven by Tailwind
   responsive utilities and isMobile() in the blade), and they preserve all
   existing IDs / classes so button click handlers remain intact.
   ========================================================================= */

/* --- 8.1) Safe spacing above the fixed bottom action bar --------------- */
/* The bottom action bar (.pos-form-actions) is position:fixed, so the scrolling
   content needs a bottom reserve at least as tall as the bar or the totals strip
   / last cart row can never be scrolled clear of it.

   This used to be three hard-coded tiers (14rem / 18rem / 22rem) guessed from
   the bar's measured height per breakpoint. That over-reserved badly — measured
   at 390px the bar was 255px tall against a 352px reserve, i.e. ~97px of dead
   space below the cart — and it silently went wrong whenever a POS setting
   hid one of the bar's buttons and changed its real height.

   The bar now publishes its own measured height as --pos-actionbar-h (see the
   sizer in sale_pos/partials/pos_form_actions.blade.php), so the reserve is
   always exactly the bar height plus a small gap. The rem fallbacks keep the
   old behaviour if that script has not run yet. Scoped to .pos-shell-col so
   only the POS shell is affected. */
@media (max-width: 991px) {
    #pos-left-pane {
        padding: 10px !important;
        margin-bottom: 8px !important;
    }
    .content .pos-shell-col.tw-mb-14 {
        margin-bottom: calc(var(--pos-actionbar-h, 14rem) + 8px) !important;
    }
}
@media (max-width: 767px) {
    .content .pos-shell-col.tw-mb-14 {
        margin-bottom: calc(var(--pos-actionbar-h, 18rem) + 8px) !important;
    }
}
@media (max-width: 575px) {
    .content .pos-shell-col.tw-mb-14 {
        margin-bottom: calc(var(--pos-actionbar-h, 22rem) + 8px) !important;
    }
    #pos-left-pane {
        padding: 8px !important;
        border-radius: 14px !important;
    }
}

/* --- 8.2) Top form row (customer select + search + quick actions) ------ */
@media (max-width: 767px) {
    /* Stack the customer/search columns with breathing room */
    #pos-left-pane .row > [class*="col-md-"],
    #pos-left-pane .row > [class*="col-sm-"] {
        margin-bottom: 8px;
    }
    #pos-left-pane .form-group { margin-bottom: 8px !important; }

    /* Bigger touch targets for inputs/buttons in any input-group inside the form */
    #pos-left-pane .input-group .form-control,
    #pos-left-pane #search_product {
        height: 42px !important;
        font-size: 14px !important;
    }
    #pos-left-pane .input-group .btn,
    #pos-left-pane .input-group-btn .btn,
    #pos-left-pane .pos-input-addon {
        height: 42px !important;
        min-width: 42px;
        font-size: 14px !important;
        padding: 6px 10px !important;
    }

    /* Select2 (customer, price group, types-of-service, etc.) */
    .select2-container--default .select2-selection--single {
        height: 42px !important;
    }
    .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 40px !important;
        font-size: 14px;
    }
    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 40px !important;
    }
}
@media (max-width: 575px) {
    #pos-left-pane #search_product,
    #pos-left-pane .input-group .form-control {
        font-size: 13.5px !important;
    }
}

/* --- 8.3) Category / Brand drawer triggers ------------------------------ */
@media (max-width: 575px) {
    label[for="my-drawer-4"]:not(.tw-dw-drawer-overlay),
    label[for="my-drawer-brand"]:not(.tw-dw-drawer-overlay) {
        height: 44px !important;
        font-size: 13.5px !important;
        padding: 0 10px !important;
        gap: 6px !important;
        border-radius: 12px !important;
    }
    label[for="my-drawer-4"]:not(.tw-dw-drawer-overlay) svg,
    label[for="my-drawer-brand"]:not(.tw-dw-drawer-overlay) svg {
        width: 18px !important;
        height: 18px !important;
    }
}

/* --- 8.4) Sidebar drawer panel (categories / brands list) -------------- */
@media (max-width: 767px) {
    /* Keep drawer padding and a readable maximum width on phones. */
    .tw-dw-drawer-side .tw-dw-menu {
        max-width: 380px;
        padding: 14px !important;
    }
    .tw-dw-drawer-side .tw-dw-menu h3 {
        font-size: 18px !important;
        margin-bottom: 12px !important;
    }
    .tw-dw-drawer-side .tw-dw-menu .tw-flex.tw-items-center.tw-mb-16 {
        margin-bottom: 12px !important;
    }
}

/* --- 8.5) Product cards: typography on small screens ------------------- */
@media (max-width: 575px) {
    .product_box .text_div { padding: 4px 6px 5px !important; }
    .product_box .text_div .product-name { font-size: 12px; line-height: 1.2; }
    .product_box .text_div .product-sku  { font-size: 10px; }
    .product_box .text_div .product-stock { font-size: 9px; padding: 1px 5px; }
    .product_box[data-price]::after {
        font-size: 10px;
        padding: 3px 6px;
        top: 4px;
        right: 4px;
        border-radius: 5px;
    }
}
@media (max-width: 380px) {
    .product_box .text_div .product-name { font-size: 12.5px; }
    .product_box .text_div .product-sku  { font-size: 10.5px; }
    .product_box[data-price]::after { font-size: 10.5px; }
}

/* --- 8.6) Cart table – mobile "card" rows refinement ------------------- */
@media (max-width: 767px) {
    .pos_product_div {
        padding: 0 !important;
        overflow: visible !important;
    }
    #pos_table {
        margin-bottom: 8px !important;
        display: block !important;
        width: 100% !important;
    }
    #pos_table tbody { display: block !important; width: 100% !important; }

    /* Row is a wrapping flex line-box, not a fixed grid.
       The previous 2-column grid gave every cell half the card and forced the
       qty stepper and the delete cell onto lines of their own, so one cart item
       cost ~230px of a ~660px cart — three items and the summary was already off
       screen. Which cells are actually visible is not fixed (unit price, inline
       discount, inline tax and the editable subtotal are each permission- or
       pos_settings-gated), so hard-coded grid tracks either left holes or forced
       wraps depending on the tenant's settings.

       Flex + wrap lets each cell declare the width it really needs as its
       flex-basis and pack as many as fit onto a line: name on its own line,
       qty+unit next, then price / subtotal / delete share the last line. Cells
       that don't fit simply wrap instead of breaking the layout. */
    #pos_table tbody tr,
    #pos_table tbody tr.product_row {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        column-gap: 6px !important;
        row-gap: 4px !important;
        width: 100% !important;
        margin-bottom: 6px !important;
        padding: 6px 8px !important;
        background: #ffffff !important;
        box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06) !important;
        border-radius: var(--pos-radius) !important;
        border: 1px solid #eef2f7 !important;
    }
    /* No flex-grow by default, on purpose: a product row carries several cells
       that are empty for most products (serial number, IMEI, inline service
       staff, modifiers). With grow:1 an empty cell still claims the whole line
       and pushes everything after it onto a new one — that alone was three of
       the four lines in a row. Shrink-only means an empty cell is 0 wide and
       costs nothing; the cells that should absorb slack opt in below. */
    #pos_table tbody td {
        display: flex !important;
        flex: 0 1 auto !important;
        width: auto !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 0 !important;
        font-size: 13px !important;
        gap: 4px !important;
        border: 0 !important;
        line-height: 1.3 !important;
        min-width: 0 !important;
    }
    /* Cells hidden by .hide class must remain hidden */
    #pos_table tbody td.hide,
    #pos_table tbody td.tw-hidden { display: none !important; }

    /* A cell with no element children renders nothing but still takes a flex
       line of its own (the product-name cell before it is 100% wide, so it
       wraps), costing a row gap per empty cell. The serial-number cell is empty
       for every product that doesn't have serials enabled, which is most of
       them. Text-only cells are unaffected — every cell in this row is markup. */
    #pos_table tbody tr.product_row > td:not(:has(*)) {
        display: none !important;
    }

    /* <br> inside a flex container becomes an empty flex item and adds a stray
       gap; the flow break it used to provide is now the wrap itself. */
    #pos_table tbody td > br { display: none !important; }

    /* Product name owns its own line; everything else shares. */
    #pos_table tbody td:first-child {
        flex: 1 1 100% !important;
    }

    /* First cell (product name + image + sub-unit + lot select etc.) –
       compact 2-col grid: name on the left, small image on the right. */
    #pos_table tbody td:first-child {
        display: grid !important;
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto;
        column-gap: 8px;
        row-gap: 1px;
        align-items: start !important;
        border-bottom: 1px dashed #eef2f7 !important;
        padding-bottom: 4px !important;
        margin-bottom: 2px !important;
        font-weight: 600;
    }
    #pos_table tbody td:first-child > * {
        grid-column: 1;
        min-width: 0;
    }
    #pos_table tbody td:first-child img {
        grid-column: 2 !important;
        grid-row: 1 / span 2 !important;
        width: 36px !important;
        height: 36px !important;
        margin: 0 !important;
        align-self: start;
        border-radius: 6px;
        object-fit: cover;
        flex-shrink: 0;
    }
    #pos_table tbody td:first-child .text-link,
    #pos_table tbody td:first-child > span:not([class*="text-muted"]) {
        font-size: 13.5px;
        line-height: 1.25;
    }
    #pos_table tbody td:first-child small.text-muted {
        font-size: 11px;
        padding: 0 !important;
    }
    #pos_table tbody td:first-child br { display: none; }

    /* Inputs / selects inside cells – compact */
    #pos_table tbody td .form-control,
    #pos_table tbody td .select2-container,
    #pos_table tbody td select {
        max-width: 100%;
        flex: 1 1 auto;
        min-width: 0;
    }
    #pos_table tbody td input[type="text"],
    #pos_table tbody td input[type="number"],
    #pos_table tbody td select,
    #pos_table tbody td .form-control {
        height: 32px !important;
        font-size: 12.5px !important;
        padding: 4px 6px !important;
    }

    /* Quantity + unit share one line: the stepper is intentionally the only
       fixed-width control here (a 3-digit qty is the realistic worst case) and
       the unit select takes the remainder, so a long unit name never squeezes
       the +/- targets below the 44px touch guideline. */
    #pos_table tbody td:has(.input-group.input-number) {
        flex: 1 1 100% !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 4px 6px !important;
    }
    /* Force the input-group to be a real flexbox row so the +/- buttons
       don't collapse via Bootstrap's default `display: table-cell` on
       `.input-group-btn` (which was reducing them to thin slivers). */
    #pos_table tbody td .input-group.input-number {
        width: auto !important;
        flex: 0 0 118px !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
    }
    #pos_table tbody td .input-group.input-number .input-group-btn {
        display: flex !important;
        flex: 0 0 36px !important;
        width: 36px !important;
        align-items: stretch !important;
    }
    #pos_table tbody td .input-group.input-number .input-group-btn .btn {
        width: 100% !important;
        height: 36px !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    #pos_table tbody td .input-group.input-number .input-group-btn .btn i {
        font-size: 13px !important;
        line-height: 1 !important;
    }
    #pos_table tbody td .input-group.input-number .form-control,
    #pos_table tbody td .input-group.input-number input.pos_quantity {
        flex: 1 1 auto !important;
        width: auto !important;
        text-align: center !important;
        font-weight: 700 !important;
        font-size: 14px !important;
        height: 36px !important;
        padding: 4px 2px !important;
        min-width: 0 !important;
    }
    #pos_table .quantity-up,
    #pos_table .quantity-down,
    #pos_table .input-group .btn.quantity-up,
    #pos_table .input-group .btn.quantity-down {
        width: 36px !important;
        height: 36px !important;
        font-size: 13px !important;
    }
    /* Unit control (sub-unit dropdown, or the plain label when the product has
       no sub-units) takes what the stepper leaves. */
    #pos_table tbody td .sub_unit,
    #pos_table tbody td .pos-unit-label {
        flex: 1 1 84px !important;
        width: auto !important;
        min-width: 0 !important;
        height: 32px !important;
        font-size: 12.5px !important;
        padding: 2px 6px !important;
        display: flex !important;
        align-items: center !important;
    }

    /* Unit price / inline discount / inline tax – narrow, side by side. */
    #pos_table tbody td:has(> input.pos_unit_price),
    #pos_table tbody td:has(> input.pos_unit_price_inc_tax) {
        flex: 1 1 92px !important;
    }
    #pos_table tbody td:has(.row_discount_amount) {
        flex: 1 1 132px !important;
        flex-wrap: nowrap !important;
    }
    #pos_table tbody td:has(.row_discount_amount) .row_discount_amount { flex: 1 1 56px !important; }
    #pos_table tbody td:has(.row_discount_amount) .row_discount_type  { flex: 1 1 72px !important; }
    #pos_table tbody td:has(> select.tax_id) {
        flex: 1 1 104px !important;
    }
    /* Line subtotal – right-aligned, emphasised, sized to its own text.
       When the tenant enables an editable subtotal this cell holds a text input
       instead of a span; capping it keeps price + subtotal + delete on one line
       either way. */
    #pos_table tbody td:has(.pos_line_total_text) {
        flex: 0 0 auto !important;
        justify-content: flex-end !important;
        font-weight: 700 !important;
        font-size: 13px !important;
        white-space: nowrap !important;
    }
    #pos_table tbody td input.pos_line_total {
        flex: 0 0 78px !important;
        max-width: 78px !important;
        text-align: right !important;
    }

    /* Delete – compact red pill pinned to the end of whichever line it lands on
       (margin-left:auto), instead of claiming a full row of its own. */
    #pos_table tbody td:last-child {
        flex: 0 0 auto !important;
        justify-content: flex-end !important;
        padding: 0 !important;
        margin-left: auto !important;
    }
    #pos_table tbody td:last-child .pos_remove_row,
    #pos_table tbody td:last-child .remove_pos_row,
    #pos_table tbody td:last-child .fa-trash-alt {
        font-size: 13px !important;
        padding: 10px 12px !important;
        border-radius: 8px !important;
        background-color: #fee2e2 !important;
        color: var(--pos-danger) !important;
        min-width: 44px;
        min-height: 34px;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        text-align: center;
        line-height: 1;
    }
    #pos_table tbody td:last-child .pos_remove_row:hover,
    #pos_table tbody td:last-child .remove_pos_row:hover {
        background-color: #fecaca !important;
    }
}

/* --- 8.7) Totals strip on mobile --------------------------------------- */
@media (max-width: 767px) {
    .pos_form_totals {
        margin-bottom: 8px !important;
    }
}
@media (max-width: 575px) {
    .pos_form_totals { margin-bottom: 8px !important; }
}

/* --- 8.8) Bottom action bar – mobile cluster --------------------------- */
@media (max-width: 767px) {
    .pos-form-actions {
        padding: 6px 8px !important;
    }
    .pos-form-actions > div {
        padding: 4px 4px !important;
        gap: 8px !important;
        flex-wrap: wrap !important;
        overflow-x: visible !important;
    }
    .pos-form-actions > div > div {
        gap: 6px !important;
        overflow-x: visible !important;
    }

    /* (Phase 3 cleanup: the Bootstrap `col-xs-6` classes were removed from the
       mobile toolbar buttons in pos_form_actions.blade.php, so the float/width
       neutraliser that used to live here is gone — the buttons are pure flex.) */

    /* Mobile-only checkout cluster (Checkout / Express / Cancel) – fill row evenly */
    .pos-form-actions .md\:\!tw-hidden {
        width: 100% !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
    }
    .pos-form-actions .md\:\!tw-hidden > button {
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 0 !important;
        font-size: 12px !important;
        padding: 10px 6px !important;
        white-space: nowrap;
        min-height: 46px !important;
    }
    /* Recent Transactions sits in the Total Payable row on mobile.
       Blue-accent pill — clearly visible, touch-friendly. */
    .pos-form-actions button.pos-recent-transactions-btn--mobile {
        flex: 0 0 auto !important;
        padding: 7px 14px !important;
        min-height: 38px !important;
        background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
        border: none !important;
        color: #fff !important;
        box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35) !important;
        text-shadow: none !important;
        font-size: 0.72rem !important;
        font-weight: 600 !important;
        border-radius: 10px !important;
        white-space: nowrap;
        letter-spacing: 0.01em;
    }
    .pos-form-actions button.pos-recent-transactions-btn--mobile:hover,
    .pos-form-actions button.pos-recent-transactions-btn--mobile:active {
        background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
        box-shadow: 0 3px 12px rgba(37, 99, 235, 0.45) !important;
    }
    .pos-form-actions button.pos-recent-transactions-btn--mobile i {
        font-size: 14px !important;
        color: #fff !important;
    }

    /* Secondary buttons row (Draft, Quotation, Suspend, Credit, DuitNow, Card)
       – ONE compact row on phones.

       The previous `flex: 1 1 calc(33.333% - 8px)` aimed at 3-per-row, but the
       33.333% basis plus gaps exceeded the available width once the surrounding
       padding was taken out, so it actually wrapped to 2-per-row / 3 rows and
       made the fixed bar 255px tall — ~30% of a 390px-wide phone screen, all of
       it stolen from the cart. `flex: 1 1 0` with nowrap divides the row evenly
       between however many buttons the POS settings leave visible (this count is
       not fixed — Draft/Quotation/Suspend/Credit/Card are each permission- and
       setting-gated), so it stays a single row whether 4 or 6 are shown.
       min-height 48px keeps every target at/above the 44px touch guideline. */
    .pos-form-actions .tw-flex-wrap {
        width: 100% !important;
        flex-wrap: nowrap !important;
        justify-content: stretch !important;
        gap: 4px !important;
    }
    .pos-form-actions .tw-flex-wrap > button {
        flex: 1 1 0 !important;
        max-width: none !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 5px 2px !important;
        border-radius: 10px !important;
        min-height: 48px !important;
        gap: 2px !important;
    }
    .pos-form-actions .tw-flex-wrap > button .tw-text-lg {
        font-size: 15px !important;
        line-height: 1;
    }
    .pos-form-actions .tw-flex-wrap > button .tw-text-xs {
        font-size: 9px !important;
        line-height: 1.05;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
        display: block;
        letter-spacing: -0.01em;
    }
    .pos-form-actions #btn-duitnow img {
        width: 17px !important;
        height: 17px !important;
    }

    /* Mobile total payable badge – compact, full width row */
    .pos-form-actions .tw-pos-total {
        width: 100%;
        justify-content: center !important;
        background: #ecfdf5;
        border: 1px solid #a7f3d0;
        border-radius: 10px;
        padding: 6px 10px;
    }
    .pos-form-actions .tw-pos-total > div > div,
    .pos-form-actions .tw-pos-total #total_payable {
        font-size: 14px !important;
    }

    /* "Recent transactions" trailing button — full width on mobile */
    .pos-form-actions [id="recent-transactions"] {
        width: 100% !important;
        height: 42px !important;
        font-size: 13px !important;
    }
}
@media (max-width: 575px) {
    .pos-form-actions .md\:\!tw-hidden > button {
        font-size: 11px !important;
        padding: 9px 4px !important;
    }
    /* Stay on ONE row here — this tier covers the 360-430px phone range, so it
       must refine the single row rather than re-introduce the old 3-up wrap
       (a `flex-basis: 33.333%` here would silently override the nowrap rule
       above and put us back to three stacked rows). */
    .pos-form-actions .tw-flex-wrap {
        gap: 3px !important;
    }
    .pos-form-actions .tw-flex-wrap > button {
        min-height: 46px !important;
        padding: 5px 1px !important;
    }
    .pos-form-actions .tw-flex-wrap > button .tw-text-xs {
        font-size: 8.5px !important;
    }
    .pos-form-actions .tw-flex-wrap > button .tw-text-lg {
        font-size: 14px !important;
    }
    .pos-form-actions #btn-duitnow img {
        width: 16px !important;
        height: 16px !important;
    }
}
@media (max-width: 380px) {
    .pos-form-actions .md\:\!tw-hidden > button {
        font-size: 10.5px !important;
        padding: 8px 3px !important;
    }
    .pos-form-actions button.pos-recent-transactions-btn--mobile {
        padding: 6px 10px !important;
        font-size: 0.65rem !important;
        min-height: 34px !important;
    }
    /* Still one row at 360-380px: the icon carries the meaning and each button
       keeps its title attribute, so the label is allowed to ellipsis rather
       than forcing a second row and stealing another ~50px from the cart. */
    .pos-form-actions .tw-flex-wrap {
        gap: 2px !important;
    }
    .pos-form-actions .tw-flex-wrap > button {
        padding: 5px 0 !important;
    }
    .pos-form-actions .tw-flex-wrap > button .tw-text-xs {
        font-size: 8px !important;
    }
}

/* --- 8.8b) Reclaim horizontal space + let the cart grow (phones/tablets) ---
   Measured at 390px BEFORE this block: the cart card spanned only 304 of 390px
   because four nested containers each added their own side padding —
   #scrollable-container 12px + section.content 15px + .pos-left-col 12px
   (tw-px-3) + #pos-left-pane 8px = 47px PER SIDE (94px, ~24% of the screen) —
   while the "Location:" header (.pos-header) is full-bleed 0..390. Trimming the
   nested padding aligns the cart with that header and hands the difference back
   to the product rows, which are the width-hungry part of this screen.

   Everything is scoped to the POS shell (:has(.pos-shell-row) / .pos-shell-row)
   so no other page's gutters change, and it is all inside a max-width query so
   tablet-landscape and desktop keep their existing spacing. */
@media (max-width: 767px) {
    body:has(.pos-shell-row) #scrollable-container {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }
    /* 4px (#scrollable-container) + 8px here = a 12px side gutter, which is
       exactly the inset of the "Location:" header card above (measured l=12,
       r=378 at a 390px viewport), so the cart card lines up with it edge to
       edge. Note the header sits OUTSIDE #scrollable-container, so on a desktop
       browser emulating a phone the scroller's classic scrollbar eats ~8px off
       the cart's right edge only; real touch devices use overlay scrollbars, so
       both edges match there. */
    section.content:has(.pos-shell-row) {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
    .pos-shell-row .pos-left-col {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .pos-shell-row #pos-left-pane {
        padding: 6px !important;
        margin-bottom: 0 !important;
    }

    /* Cart grows into whatever vertical space is actually left.
       --pos-viewport-h / --pos-cart-top / --pos-actionbar-h are published by the
       sizer in sale_pos/partials/pos_form_actions.blade.php, so this tracks the
       real chrome instead of hard-coded guesses; the fallbacks degrade to a
       sensible fixed height if that script has not run. min-height (not height)
       means a long cart still grows past it and scrolls the page as before. */
    .pos-shell-row .pos-left-col {
        display: flex;
        flex-direction: column;
    }
    .pos-shell-row #pos-left-pane {
        display: flex;
        flex-direction: column;
        min-height: calc(
            var(--pos-viewport-h, 100dvh) - var(--pos-cart-top, 96px)
            - var(--pos-actionbar-h, 16rem) - 14px
        );
    }
    .pos-shell-row .pos-cart-row {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }
    .pos-shell-row .pos_product_div {
        flex: 1 1 auto;
        min-height: 0;
    }

    /* Trim the stacked gaps between the top form rows: at 390px these added up
       to more vertical space than the cart header itself. */
    .pos-shell-row #pos-left-pane .row > [class*="col-md-"],
    .pos-shell-row #pos-left-pane .row > [class*="col-sm-"] {
        margin-bottom: 4px !important;
    }
    .pos-shell-row #pos-left-pane .form-group {
        margin-bottom: 4px !important;
    }
    .pos-shell-row #pos-left-pane .au-card__body {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* --- 8.8c) Cart summary anchored to the bottom of the cart card (phones) --
   The summary strip (.pos_form_totals) is the last child of the cart card, so
   where it lands depends entirely on how the card's children are sized.

   Section 7's `@media (max-width: 991px)` tier deliberately reverts the cart to
   natural sizing (`.pos-cart-row { flex: 0 0 auto; display: block }`) because
   back then #pos-left-pane had `min-height: auto` on mobile and a flex:1 child
   would have collapsed to zero and clipped every product row. Those rules carry
   an id, so they beat 8.8b's `.pos-shell-row .pos-cart-row { flex: 1 1 auto }`
   on specificity — which is why the summary still floated directly under the
   last product with the rest of the card blank beneath it (and, on an empty
   cart, sat just below the search box with ~350px of white space under it).

   8.8b now gives #pos-left-pane a real measured min-height, so the original
   collapse hazard is gone at this tier and the flex chain can be restored. The
   rules below re-assert it with matching id specificity, scoped to phones only
   (768-991px keeps the natural-sizing behaviour untouched):

     card -> body -> cart-row grow to fill the card,
     the product list scrolls INTERNALLY (overflow-y),
     so the summary is always the last thing before the card's bottom edge.

   The overflow-x:hidden is deliberate, not decorative: `overflow-y: auto` alone
   auto-promotes the other axis to `auto` per spec and would grow a phantom
   horizontal scrollbar on the cart. */
@media (max-width: 767px) {
    .pos-shell-row #pos-left-pane {
        display: flex !important;
        flex-direction: column !important;
    }
    .pos-shell-row #pos-left-pane > .au-card__body {
        flex: 1 1 auto !important;
        display: flex !important;
        flex-direction: column !important;
        min-height: 0 !important;
        padding-bottom: 0 !important;
    }
    .pos-shell-row #pos-left-pane .pos-cart-row {
        flex: 1 1 auto !important;
        display: flex !important;
        flex-direction: column !important;
        /* floor matches .pos_product_div below — roughly one product card plus
           a peek of the next, so the list is always usable */
        min-height: 132px !important;
        overflow: hidden !important;
        margin-bottom: 0 !important;
    }
    .pos-shell-row #pos-left-pane .pos_product_div {
        /* `1 1 auto`, NOT `1 1 0`: the header above the cart is not a fixed
           height — customer, search, price group, types of service, service
           staff and the Kitchen Orders button are each module/settings-gated,
           and on a tenant with all of them on they eat the whole card. With a
           0 basis the cart then flex-shrank to ~7px and the product list was
           unreachable. An auto basis makes the list's own content the starting
           size, so it grows into free space and only gives space back down to
           the min-height floor below, after which it scrolls internally. */
        flex: 1 1 auto !important;
        height: auto !important;
        /* beats the 55vh cap in section 7's ≤991px tier, which would otherwise
           stop the list short and re-open a gap under the summary */
        max-height: none !important;
        min-height: 132px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
    }
    /* An empty cart needs no floor — the floor exists so a product list is never
       squeezed to nothing, and there is no list yet. Dropping it lets the card
       collapse to the header + summary and the summary then sits flush at the
       bottom of the card with nothing scrollable underneath it. */
    .pos-shell-row #pos-left-pane .pos-cart-row:not(:has(tr.product_row)),
    .pos-shell-row #pos-left-pane .pos_product_div:not(:has(tr.product_row)) {
        min-height: 0 !important;
    }

    /* Sits flush at the bottom of the card — and STAYS visible even when the
       card cannot fit the viewport.

       The flex chain above is enough only while the card fits: how much room is
       left for the cart depends on the header above it, which is a different
       height for every tenant (customer, search, price group, types of service,
       service staff and the Kitchen Orders button are each module- or
       settings-gated; measured 460px of the 736px viewport with all of them on).
       When the header is that big the card is taller than the screen and the
       page scrolls, which would drop the summary out of sight again.

       Sticky solves that case without a max-height (a clamp would just push the
       summary out of the card's box instead). The scrollport is
       #scrollable-container, whose bottom runs UNDER the fixed action bar, so
       the offset is the bar's own measured height plus a small gap — otherwise
       the strip would pin itself behind the buttons. In the normal case the
       summary's natural position is already above that line and sticky changes
       nothing. */
    .pos-shell-row #pos-left-pane .pos_form_totals {
        flex: 0 0 auto !important;
        position: sticky;
        bottom: calc(var(--pos-actionbar-h, 16rem) + 6px);
        z-index: 2;
        background: #ffffff;
        margin-top: 6px !important;
        margin-bottom: 0 !important;
        padding-top: 4px;
        /* reads as an overlay while product rows pass underneath it */
        box-shadow: 0 -6px 12px -6px rgba(15, 23, 42, 0.18);
    }
}

/* --- 8.9) Kitchen Orders button on phones ------------------------------ */
@media (max-width: 575px) {
    #view_kitchen_display_btn {
        width: 100% !important;
        white-space: normal !important;
        height: 40px !important;
        font-size: 13px !important;
    }
}

/* --- 8.10) Mobile product suggestions modal ---------------------------- */
@media (max-width: 991px) {
    /* Header trigger button (cubes icon) – make it more discoverable */
    button[data-target="#mobile_product_suggestion_modal"] {
        width: 42px !important;
        height: 42px !important;
        border-radius: 10px !important;
        margin-right: 6px;
    }
    button[data-target="#mobile_product_suggestion_modal"] i {
        font-size: 18px !important;
    }
}
@media (max-width: 767px) {
    #mobile_product_suggestion_modal .modal-dialog {
        width: 96% !important;
        margin: 0.5rem auto !important;
    }
    #mobile_product_suggestion_modal .modal-content {
        max-height: 92vh;
        display: flex;
        flex-direction: column;
    }
    #mobile_product_suggestion_modal .modal-body {
        padding: 10px !important;
        overflow-y: auto;
    }
    #mobile_product_suggestion_modal #product_list_body {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
        max-height: none !important;
        overflow: visible !important;
    }
}
@media (max-width: 575px) {
    #mobile_product_suggestion_modal #product_list_body {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 6px !important;
    }
}
@media (max-width: 380px) {
    #mobile_product_suggestion_modal #product_list_body {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* =========================================================================
   9) GENERIC POS MODAL SKIN
   pos-ui-enhanced.css is loaded ONLY on the POS create/edit screens, so these
   broad .modal rules are page-scoped. They give every Bootstrap-driven POS
   pop-up (payment, recent transactions, suspend, recurring, edit discount,
   shipping, order-tax, weighing scale, service-staff, card details, configure
   search, invoice URL, etc.) the same modern look as the modifier modal —
   using app-owned modal/tab hooks (data-vmodal, data-vdismiss, data-vtab).
   ========================================================================= */
.modal-content {
    border-radius: var(--pos-radius-lg);
    border: 0;
    box-shadow: var(--pos-shadow-lg);
    overflow: hidden;
}
.modal-header {
    background: linear-gradient(135deg, var(--pos-primary), var(--pos-primary-dark));
    border-bottom: 0;
    padding: 14px 18px;
}
.modal-header .modal-title {
    color: #ffffff !important;
    font-weight: 700;
    font-size: 16px;
    margin: 0;
}
.modal-header .close {
    color: #ffffff;
    opacity: 0.9;
    text-shadow: none;
    font-size: 24px;
    line-height: 1;
}
.modal-header .close:hover { opacity: 1; }
.modal-body { background: var(--pos-bg-soft); padding: 18px; }
.modal-footer {
    background: #ffffff;
    border-top: 1px solid #eef2f7;
    padding: 12px 16px;
}

/* Form fields inside POS modals — consistent rounded inputs + focus ring */
.modal-body label,
.modal-body .control-label {
    color: var(--pos-text);
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 6px;
}
.modal-body .form-control {
    border-radius: var(--pos-radius-sm) !important;
    border: 1.5px solid #cbd5e1 !important;
    background: #ffffff !important;
    box-shadow: none !important;
    color: var(--pos-text);
    transition: var(--pos-transition);
}
.modal-body .form-control:focus {
    border-color: var(--pos-primary) !important;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15) !important;
}
.modal-body .help-block { color: var(--pos-text-muted); font-size: 12px; margin-top: 6px; }

/* Footer buttons — unify the DaisyUI-style tw-dw-btn variants used across
   the POS pop-ups so primary/secondary actions look identical everywhere. */
.modal-footer .tw-dw-btn,
.modal-footer .btn {
    border-radius: var(--pos-radius-sm) !important;
    font-weight: 700 !important;
    padding: 8px 18px !important;
    transition: var(--pos-transition);
}
.modal-footer .tw-dw-btn-primary {
    background: linear-gradient(135deg, var(--pos-primary), var(--pos-primary-dark)) !important;
    border: 0 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(79, 70, 229, 0.25) !important;
}
.modal-footer .tw-dw-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(79, 70, 229, 0.35) !important;
}
.modal-footer .tw-dw-btn-success {
    background: linear-gradient(135deg, var(--pos-success), var(--pos-success-dark)) !important;
    border: 0 !important;
    color: #ffffff !important;
}
/* Neutral / close buttons -> white outline secondary. Some markup carries a
   stray `tw-text-white`; force dark text so the label stays readable. */
.modal-footer .tw-dw-btn-neutral,
.modal-footer .tw-dw-btn-neutral.tw-text-white {
    background: #ffffff !important;
    border: 1.5px solid #cbd5e1 !important;
    color: var(--pos-text) !important;
    box-shadow: none !important;
}
.modal-footer .tw-dw-btn-neutral:hover {
    background: #f1f5f9 !important;
    border-color: #94a3b8 !important;
}

/* The DuitNow callout is an intentionally branded (pink) pop-up styled inline.
   Inline styles win for header/footer; just keep its body white, not the soft
   grey we apply to other modals. */
#duitnow_callout_modal .modal-body { background: #ffffff; }

/* =========================================================================
   9.1) PAYMENT MODAL (#modal_payment) – cards & totals summary
   ========================================================================= */
#modal_payment .au-modal__dialog--lg {
    width: min(900px, calc(100vw - 16px)) !important;
    max-width: min(900px, calc(100vw - 16px)) !important;
}

#modal_payment .au-modal__header {
    background: linear-gradient(90deg, #18a8de, #0b80b8) !important;
    border-bottom: 0 !important;
    border-top-left-radius: var(--ui-radius-xl, 4px) !important;
    border-top-right-radius: var(--ui-radius-xl, 4px) !important;
    min-height: 48px !important;
}

#modal_payment .au-modal__title {
    color: #ffffff !important;
    font-weight: 700 !important;
}

#modal_payment .au-modal__close {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
}

#modal_payment .au-modal__body > .tw-grid {
    align-items: start !important;
}

#modal_payment .payment_details_div.hide {
    display: none !important;
}

body.au-modal-open,
body.au-modal-open #scrollable-container,
#modal_payment.au-modal-root--open {
    overflow-x: hidden !important;
}

@media (min-width: 640px) {
    #modal_payment .au-modal__body > .tw-grid {
        grid-template-columns: minmax(0, 1fr) minmax(176px, 192px) !important;
    }

    #modal_payment .au-modal__body > .tw-grid > * {
        grid-column: auto !important;
        min-width: 0;
    }

    #modal_payment .au-modal__body > .tw-grid > :first-child {
        grid-column: 1 / -1 !important;
    }

    #modal_payment .au-modal__body > .tw-grid > :nth-child(2) {
        grid-column: 1 !important;
    }

    #modal_payment .au-modal__body > .tw-grid > :nth-child(3) {
        grid-column: 2 !important;
        align-self: start;
    }
}

#modal_payment .box,
#modal_payment .box.box-solid {
    border: 1px solid var(--pos-border) !important;
    border-radius: var(--pos-radius) !important;
    box-shadow: var(--pos-shadow-sm) !important;
    background: #ffffff !important;
}
/* Right-hand totals panel (was AdminLTE bg-orange) -> soft indigo summary */
#modal_payment .box.bg-orange {
    background: linear-gradient(160deg, #eef2ff, #ffffff) !important;
    border: 1px solid #e0e7ff !important;
}
#modal_payment .box.bg-orange strong {
    color: var(--pos-text-muted) !important;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
#modal_payment .box.bg-orange .lead,
#modal_payment .box.bg-orange .lead.text-bold {
    color: var(--pos-primary-dark) !important;
    font-weight: 800;
}
#modal_payment .box.bg-orange hr { border-top: 1px solid #e0e7ff; margin: 8px 0; }
#modal_payment .box.bg-lightgray { background: #ffffff !important; }
/* Add-payment-row button stays full-width but matches the system */
#modal_payment #add-payment-row { border-radius: var(--pos-radius-sm) !important; }

#modal_payment .au-modal__footer {
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
    white-space: nowrap;
}

#modal_payment .au-modal__footer .tw-dw-btn,
#modal_payment .au-modal__footer button {
    flex: 0 0 auto !important;
    width: auto !important;
}

#card_details_modal .au-modal__dialog {
    width: min(620px, calc(100vw - 16px)) !important;
    max-width: min(620px, calc(100vw - 16px)) !important;
}

#card_details_modal .au-modal__close,
#qrPayModal .au-modal__close,
#duitnow_callout_modal .au-modal__close {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#card_details_modal .au-modal__body > .tw-grid {
    align-items: start !important;
}

#qrPayModal .duitnow-qr-card,
.cd-qr-display .duitnow-qr-card {
    max-width: 384px;
    border-radius: 16px;
    background: #be185d;
    padding: 20px;
}

#qrPayModal .duitnow-qr-inner,
.cd-qr-display .duitnow-qr-inner {
    border-radius: 16px;
    padding: 20px;
}

#qrPayModal .duitnow-qr-logo,
.cd-qr-display .duitnow-qr-logo {
    max-height: 64px;
}

#qrPayModal .duitnow-qr-image,
.cd-qr-display .duitnow-qr-image {
    max-width: 280px;
    border: 4px solid #f3f4f6;
    border-radius: 12px;
}

#qrPayModal .duitnow-qr-acceptance,
.cd-qr-display .duitnow-qr-acceptance {
    border-radius: 12px;
}

#qrPayModal .duitnow-qr-bank-logo,
.cd-qr-display .duitnow-qr-bank-logo {
    max-height: 32px;
}

@media (min-width: 640px) {
    #card_details_modal .au-modal__body > .tw-grid {
        grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
    }

    #card_details_modal .au-modal__body > .tw-grid > * {
        min-width: 0;
    }

    #card_details_modal .au-modal__body > .tw-grid > :nth-child(-n + 3) {
        grid-column: span 4 / span 4 !important;
    }

    #card_details_modal .au-modal__body > .tw-grid > :nth-child(n + 4) {
        grid-column: span 3 / span 3 !important;
    }
}

/* =========================================================================
   9.2) RECENT TRANSACTIONS – modal tabs + table (and the right-pane box)
   AdminLTE `.nav-tabs-custom` tabs restyled to a clean underline look.
   ========================================================================= */
#recent_transactions_modal .modal-dialog {
    width: min(760px, calc(100vw - 40px)) !important;
    max-width: calc(100vw - 40px) !important;
}

#recent_transactions_modal .modal-body {
    background: #ffffff !important;
    padding: 16px 18px 18px !important;
}

#recent_transactions_modal .modal-footer {
    background: #ffffff !important;
}

#recent_transactions_modal .nav-tabs-custom {
    width: 100%;
}

.nav-tabs-custom { box-shadow: none; background: transparent; margin-bottom: 0; }
.nav-tabs-custom > .nav-tabs, .nav-tabs-custom > .au-tabs__nav {
    border-bottom: 1px solid #e5e7eb;
    margin: 0 0 12px;
    display: flex;
    gap: 4px;
    background: transparent;
}
.nav-tabs-custom > .nav-tabs > li, .nav-tabs-custom > .au-tabs__nav > li { margin-bottom: -1px; border-top: 0; }

/* Bootstrap-parity's .au-tabs__nav--justified sets `display:table-cell;
   width:1%` on each <li> at >=768px (see _bootstrap-parity.scss). Once
   this <ul> is a flex container (rule above), table-cell blockifies away
   but width:1% survives as the flex-basis, squeezing every tab to ~1%
   and stacking their wrapped labels on top of each other. Restore
   equal-width tabs sized to actually fit their content. */
.nav-tabs-custom > .au-tabs__nav--justified > li {
    display: block;
    width: auto;
    flex: 1 1 0%;
}
.nav-tabs-custom > .au-tabs__nav--justified > li > a {
    white-space: nowrap;
}

.nav-tabs-custom > .nav-tabs > li > a, .nav-tabs-custom > .au-tabs__nav > li > a {
    border: 0 !important;
    border-bottom: 2px solid transparent !important;
    border-radius: var(--pos-radius-sm) var(--pos-radius-sm) 0 0 !important;
    color: var(--pos-text-muted) !important;
    font-weight: 600;
    padding: 8px 14px !important;
    margin: 0 !important;
    background: transparent !important;
}
.nav-tabs-custom > .nav-tabs > li > a:hover, .nav-tabs-custom > .au-tabs__nav > li > a:hover {
    color: var(--pos-primary) !important;
    background: #f8fafc !important;
}
.nav-tabs-custom > .nav-tabs > li.active > a, .nav-tabs-custom > .au-tabs__nav > li.active > a,
.nav-tabs-custom > .nav-tabs > li.active > a:hover, .nav-tabs-custom > .au-tabs__nav > li.active > a:hover,
.nav-tabs-custom > .nav-tabs > li.active > a:focus, .nav-tabs-custom > .au-tabs__nav > li.active > a:focus {
    color: var(--pos-primary-dark) !important;
    background: #eef2ff !important;
    border-bottom: 2px solid var(--pos-primary) !important;
}

/* Recent-transactions table rows (loaded into the tabs / box) */
.nav-tabs-custom .tab-content, .nav-tabs-custom .au-tabs__content { padding: 0; }
.nav-tabs-custom .table { margin-bottom: 0; background: transparent; }
#recent_transactions_modal .nav-tabs-custom .table {
    width: 100% !important;
}
.nav-tabs-custom .table > tbody > tr { border-bottom: 1px solid #eef2f7; transition: var(--pos-transition); }
.nav-tabs-custom .table > tbody > tr:hover { background: #f8fafc; }
.nav-tabs-custom .table > tbody > tr > td {
    padding: 10px 8px;
    vertical-align: middle;
    border-top: 0 !important;
}

#recent_transactions_modal .table > tbody > tr > td:first-child {
    width: 32px;
}

#recent_transactions_modal .table > tbody > tr > td:nth-child(2) {
    width: 30%;
}

#recent_transactions_modal .table > tbody > tr > td:nth-child(3) {
    width: 86px;
}

/* Recent-transactions action buttons – keep Edit / Pay / Print / KOT / Delete
   on a single compact row inside the modal (the action cell is the td.col-md-6).
   Scoped to the modal so the narrower right-pane widget box can still wrap. */
#recent_transactions_modal .table td.col-md-6 {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center;
    justify-content: flex-start;
    gap: 6px !important;
    white-space: nowrap;
    width: auto !important;
}
#recent_transactions_modal .table td.col-md-6 > a,
#recent_transactions_modal .table td.col-md-6 > .tw-dw-btn {
    flex: 0 0 auto;
    min-height: 0 !important;
    height: 30px !important;
    padding: 0 10px !important;
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 28px !important;
    white-space: nowrap;
}
#recent_transactions_modal .table td.col-md-6 > a > i { font-size: 12px; }

/* Right-pane "Recent transactions" widget box */
.box.box-widget {
    border: 1px solid var(--pos-border);
    border-radius: var(--pos-radius);
    box-shadow: var(--pos-shadow-sm);
    overflow: hidden;
    background: #ffffff;
}
.box.box-widget > .box-header.with-border {
    padding: 12px 14px;
    background: #ffffff;
    border-bottom: 1px solid #eef2f7;
}
.box.box-widget > .box-header .box-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--pos-text);
}
.box.box-widget > .box-header .btn-box-tool { color: var(--pos-text-muted); }
.box.box-widget > .box-body { padding: 12px 14px; }

/* =========================================================================
   9.3) MODAL RESPONSIVENESS – comfortable on tablets / phones
   ========================================================================= */
@media (max-width: 767px) {
    .modal-header { padding: 12px 14px; }
    .modal-header .modal-title { font-size: 15px; }
    .modal-body { padding: 14px; }
    .modal-footer { padding: 10px 14px; }
    #recent_transactions_modal .modal-dialog,
    #recent_transactions_modal .au-modal__dialog {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
    }
    #recent_transactions_modal .modal-body,
    #recent_transactions_modal .au-modal__body {
        overflow-x: auto;
        padding: 14px !important;
    }
    #recent_transactions_modal .nav-tabs-custom {
        min-width: 0;
    }
    /* Stack recent-transactions table rows vertically on mobile */
    #recent_transactions_modal .table > tbody > tr > td {
        display: block;
        width: 100%;
        padding: 4px 6px;
        border-top: 0;
    }
    #recent_transactions_modal .table > tbody > tr {
        display: block;
        border-bottom: 1px solid #e5e7eb;
        padding: 10px 0;
    }
    /* Action buttons: wrap in a compact row on mobile */
    #recent_transactions_modal .table > tbody > tr > td.tw-flex {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap;
        gap: 6px;
    }
    #recent_transactions_modal .table > tbody > tr > td.tw-flex .tw-dw-btn {
        font-size: 0.7rem;
        padding: 0.35rem 0.5rem;
        min-height: unset;
        height: auto;
    }
    /* Payment modal: totals panel sits below the payment rows, full width */
    #modal_payment .col-md-9,
    #modal_payment .col-md-3 { width: 100%; }
    #modal_payment .box.bg-orange { margin-top: 8px; }
    /* Let recent-transactions action buttons wrap neatly on small screens */
    .nav-tabs-custom .table > tbody > tr > td { padding: 8px 6px; }
}

/* =========================================================================
   10) GLOBAL POS STYLE BRIDGE
   Keep the POS layout and JavaScript hooks intact, but route the visual
   language back through the shared global tokens used by the rest of the app.
   ========================================================================= */
:root {
    --pos-surface: #ffffff;
    --pos-surface-muted-global: var(--ui-surface-muted, #f8fafc);
    --pos-border-global: var(--ui-field-border, #cdd5df);
    --pos-radius-global: var(--ui-field-radius, 8px);
    --pos-field-height-global: var(--ui-field-height, 42px);
}

#pos-left-pane,
.pos-form-actions,
.box.box-widget,
.product_box,
.modal-content {
    border-radius: var(--pos-radius-global) !important;
}

#pos-left-pane,
.box.box-widget,
.orders-filter-card {
    border: 1px solid var(--pos-border-global) !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05) !important;
}

#pos-left-pane .form-group {
    margin-bottom: 1rem !important;
}

#pos-left-pane .pos-input-group {
    width: 100%;
    min-height: var(--pos-field-height-global);
    overflow: hidden;
    border: 1px solid var(--pos-border-global) !important;
    border-radius: var(--pos-radius-global) !important;
    background: var(--pos-surface) !important;
    box-shadow: none !important;
}

#pos-left-pane .pos-input-group:focus-within,
#pos-left-pane .pos-input-group:has(.select2-container--open),
#pos-left-pane .pos-input-group:has(.select2-container--focus) {
    border-color: var(--brand-500) !important;
    box-shadow: 0 0 0 3px var(--ui-focus-ring) !important;
}

#pos-left-pane .pos-input-group > .pos-control,
#pos-left-pane .pos-input-group > .select2-container,
#pos-left-pane .pos-input-group > .pos-input-addon,
#pos-left-pane .pos-input-group > .pos-input-actions,
#pos-left-pane .pos-input-group > .pos-input-actions > .btn,
#pos-left-pane .pos-input-group > .pos-input-actions > .pos-input-button {
    min-height: calc(var(--pos-field-height-global) - 2px) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

#pos-left-pane .pos-input-group > .pos-control {
    height: calc(var(--pos-field-height-global) - 2px) !important;
    background: transparent !important;
}

#pos-left-pane .pos-input-addon,
#pos-left-pane .pos-input-actions > .btn,
#pos-left-pane .pos-input-actions > .pos-input-button {
    min-width: 2.625rem !important;
    background: var(--ui-field-muted-bg, #f8fafc) !important;
    color: var(--ui-field-icon, #697586) !important;
}

#pos-left-pane .pos-input-addon {
    border-right: 1px solid #e3e8ef !important;
}

#pos-left-pane .pos-input-actions:first-child > .btn,
#pos-left-pane .pos-input-actions:first-child > .pos-input-button {
    border-right: 1px solid #e3e8ef !important;
}

#pos-left-pane .pos-input-actions:last-child > .btn,
#pos-left-pane .pos-input-actions:last-child > .pos-input-button {
    border-left: 1px solid #e3e8ef !important;
}

#pos-left-pane .pos-input-actions > .btn:hover,
#pos-left-pane .pos-input-actions > .btn:focus,
#pos-left-pane .pos-input-actions > .pos-input-button:hover,
#pos-left-pane .pos-input-actions > .pos-input-button:focus {
    background: #eef2f6 !important;
    color: var(--brand-700) !important;
    transform: none !important;
}

#pos-left-pane .select2-container--default .select2-selection--single {
    height: calc(var(--pos-field-height-global) - 2px) !important;
    min-height: calc(var(--pos-field-height-global) - 2px) !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

#pos-left-pane .select2-container--default .select2-selection--single .select2-selection__rendered {
    height: calc(var(--pos-field-height-global) - 2px) !important;
    line-height: calc(var(--pos-field-height-global) - 2px) !important;
    padding-left: 0.75rem !important;
    padding-right: 2rem !important;
}

#pos-left-pane .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: calc(var(--pos-field-height-global) - 2px) !important;
    right: 0.5rem;
}

/* POS form field placement: preserve the refreshed global field styling while
   restoring the older, denser field arrangement. */
#pos-left-pane .pos-entry-row,
#pos-left-pane .pos-edit-invoice-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 12px;
    align-items: start;
    margin: 0 0 10px !important;
}

#pos-left-pane .pos-edit-invoice-row > .tw-w-full:first-child {
    grid-column: 1 / -1;
}

#pos-left-pane .pos-options-grid,
#pos-left-pane .pos-repair-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
    grid-auto-flow: row dense;
    gap: 8px 12px;
    align-items: start;
    margin: 0 0 10px !important;
    width: 100%;
}

#pos-left-pane .pos-form-field,
#pos-left-pane .pos-repair-field,
#pos-left-pane .pos-customer-field,
#pos-left-pane .pos-search-field {
    float: none !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

#pos-left-pane .pos-repair-grid .pos-repair-actions-field {
    grid-column: span 2;
}

#pos-left-pane .pos-repair-grid .repair-pos-action-buttons {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 8px;
    width: 100%;
}

#pos-left-pane .pos-repair-grid .repair-pos-action-button {
    flex: 1 1 0;
    white-space: nowrap !important;
}

/* Walk-In Customer / Product Search: unlike the options-grid fields, these
   two live in .pos-entry-row and never picked up the flex treatment, so
   the icon/addon, select-or-input, and trailing action button(s) stacked
   as block-level children instead of sitting on one row. */
#pos-left-pane .pos-customer-field .pos-input-group,
#pos-left-pane .pos-search-field .pos-input-group {
    display: flex !important;
    align-items: stretch;
    min-width: 0 !important;
    width: 100% !important;
}

#pos-left-pane .pos-customer-field .pos-input-addon,
#pos-left-pane .pos-customer-field .pos-input-actions,
#pos-left-pane .pos-search-field .pos-input-addon,
#pos-left-pane .pos-search-field .pos-input-actions {
    align-items: center !important;
    display: flex !important;
    flex: 0 0 auto;
    justify-content: center !important;
    line-height: 1 !important;
    min-width: 42px !important;
    padding: 0 !important;
}

#pos-left-pane .pos-customer-field select.pos-control:not(.select2-hidden-accessible),
#pos-left-pane .pos-customer-field .select2-container,
#pos-left-pane .pos-search-field input.pos-control {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: 100% !important;
}

#pos-left-pane .pos-restaurant-slot {
    display: contents !important;
}

#pos-left-pane .pos-restaurant-slot > .pos-form-field {
    max-width: 100% !important;
    min-width: 0 !important;
    width: 100% !important;
}

#pos-left-pane .pos-options-grid > .pos-form-field,
#pos-left-pane .pos-options-grid > .pos-restaurant-slot {
    order: 0;
}

#pos-left-pane .pos-table-field-wide {
    grid-column: span 2;
}

#pos-left-pane .pos-table-field-full {
    grid-column: 1 / -1;
}

#pos-left-pane .pos-invoice-layout-field .pos-input-group,
#pos-left-pane .pos-commission-field .pos-input-group,
#pos-left-pane .pos-table-field .pos-input-group,
#pos-left-pane .pos-options-grid .pos-input-group {
    display: flex !important;
    align-items: stretch;
    min-width: 0 !important;
    width: 100% !important;
}

#pos-left-pane .pos-options-grid .pos-input-addon,
#pos-left-pane .pos-options-grid .pos-input-actions {
    align-items: center !important;
    display: flex !important;
    flex: 0 0 42px;
    justify-content: center !important;
    line-height: 1 !important;
    min-width: 42px !important;
    padding: 0 !important;
    width: 42px !important;
}

#pos-left-pane .pos-options-grid .pos-input-addon > i,
#pos-left-pane .pos-options-grid .pos-input-addon .fa,
#pos-left-pane .pos-options-grid .pos-input-addon .fas,
#pos-left-pane .pos-options-grid .pos-input-addon .hover-q {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    margin: 0 !important;
}

#pos-left-pane .pos-invoice-layout-field select.pos-control:not(.select2-hidden-accessible),
#pos-left-pane .pos-commission-field select.pos-control:not(.select2-hidden-accessible),
#pos-left-pane .pos-table-open-btn {
    flex: 1 1 auto;
    min-width: 0 !important;
    width: 100% !important;
}

/* .pos-invoice-scheme-field has no .pos-input-group wrapper (unlike its
   siblings above), so the select never picked up the card surface/border
   the other fields get for free — it fell back to the browser's native
   control colors (illegible dark-on-dark under a dark OS/browser theme). */
#pos-left-pane .pos-invoice-scheme-field select.pos-control:not(.select2-hidden-accessible) {
    background: var(--pos-surface) !important;
    color: inherit !important;
    border: 1px solid var(--pos-border-global) !important;
    border-radius: var(--pos-radius-global) !important;
    height: var(--pos-field-height-global) !important;
    padding: 0 10px !important;
    width: 100% !important;
}

#pos-left-pane .pos-invoice-layout-field .select2-container,
#pos-left-pane .pos-commission-field .select2-container {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: 100% !important;
}

#pos-left-pane .pos-price-group-field .select2-container,
#pos-left-pane .pos-service-type-field .select2-container,
#pos-left-pane .pos-price-group-field input.pos-control,
#pos-left-pane .pos-service-type-field input.pos-control {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
}

#pos-left-pane .pos-options-grid .pos-input-addon.pos-field-help-addon {
    border-left: 1px solid #e3e8ef !important;
    border-right: 0 !important;
    flex: 0 0 42px !important;
    width: 42px !important;
}

#pos-left-pane .pos-options-grid .pos-field-help-addon .hover-q {
    color: var(--pos-info) !important;
    font-size: 15px !important;
}

#pos-left-pane .pos-table-open-btn {
    align-items: center;
    background: transparent !important;
    color: var(--pos-text, #111827) !important;
    display: flex;
    height: calc(var(--pos-field-height-global) - 2px) !important;
    justify-content: space-between;
    padding: 0 0.75rem !important;
    text-align: left;
}

#pos-left-pane .pos-table-clear-addon {
    border-left: 1px solid #e3e8ef !important;
    border-right: 0 !important;
}

#pos-left-pane .pos-table-clear-btn {
    align-items: center;
    background: transparent;
    border: 0;
    color: #dc2626;
    display: flex;
    height: 100%;
    justify-content: center;
    padding: 0;
    width: 100%;
}

#pos-left-pane .pos-service-staff-field .pos-input-group,
#pos-left-pane .pos-service-staff-field select {
    width: 100% !important;
}

#pos-left-pane .pos-service-staff-field {
    justify-self: stretch;
    width: 100% !important;
}

#pos-left-pane .pos-service-staff-field .pos-input-group {
    display: flex !important;
    align-items: stretch;
}

#pos-left-pane .pos-service-staff-field .pos-input-addon,
#pos-left-pane .pos-service-staff-field .input-group-addon,
#pos-left-pane .pos-service-staff-field .pos-input-actions {
    flex: 0 0 42px;
}

#pos-left-pane .pos-service-staff-field .pos-input-addon,
#pos-left-pane .pos-service-staff-field .input-group-addon {
    align-items: center !important;
    display: flex !important;
    justify-content: center !important;
    line-height: 1 !important;
    min-width: 42px !important;
    padding: 0 !important;
    transform: none !important;
    transition: none !important;
    width: 42px !important;
}

#pos-left-pane .pos-service-staff-field .pos-input-addon > i,
#pos-left-pane .pos-service-staff-field .input-group-addon > i {
    display: block;
    font-size: 0.875rem;
    line-height: 1;
    margin: 0;
    transform: none !important;
    transition: none !important;
}

#pos-left-pane .pos-service-staff-field select.pos-control {
    flex: 1 1 auto;
    min-width: 0 !important;
}

#pos-left-pane .pos-service-staff-field .select2-container,
#pos-left-pane #res_waiter_id + .select2-container {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: 100% !important;
}

#pos-left-pane .pos-kitchen-field,
#pos-left-pane .pos-subscription-field {
    min-height: var(--pos-field-height-global);
}

#pos-left-pane .pos-kitchen-field {
    align-items: center;
    display: flex;
    justify-content: center;
    justify-self: stretch;
    width: 100% !important;
}

#pos-left-pane .pos-kitchen-field .pos-field {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--pos-field-height-global);
    margin-bottom: 0 !important;
    width: 100%;
}

#pos-left-pane .pos-kitchen-field .pos-kitchen-orders-btn {
    align-items: center;
    display: inline-flex !important;
    justify-content: center;
    margin: 0 auto;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    text-align: center;
}

#pos-left-pane .pos-subscription-field {
    display: flex;
    align-items: center;
    gap: 8px;
}

#pos-left-pane .pos-subscription-edit-btn {
    background: #ffffff;
    border: 1px solid var(--brand-600);
    color: var(--brand-700);
    min-height: 28px;
}

#pos-left-pane .pos-subscription-edit-btn:hover,
#pos-left-pane .pos-subscription-edit-btn:focus {
    background: var(--ui-field-muted-bg, #f8fafc);
    color: var(--brand-800);
}

@media (max-width: 991px) {
    #pos-left-pane .pos-options-grid,
    #pos-left-pane .pos-repair-grid {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
        gap: 8px 10px;
    }

    #pos-left-pane .pos-table-field-wide,
    #pos-left-pane .pos-table-field-full,
    #pos-left-pane .pos-restaurant-slot {
        grid-column: 1 / -1;
        min-width: 0;
    }

    #pos-left-pane .pos-service-staff-field,
    #pos-left-pane .pos-service-staff-field .input-group {
        min-width: 0 !important;
    }
}

@media (max-width: 767px) {
    #pos-left-pane .pos-entry-row,
    #pos-left-pane .pos-edit-invoice-row,
    #pos-left-pane .pos-options-grid,
    #pos-left-pane .pos-repair-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

#pos_table thead th {
    background: var(--pos-surface-muted-global) !important;
    border-bottom-color: var(--pos-border-global) !important;
    color: #364152 !important;
}

#pos_table .form-control,
#pos_table input[type="text"],
#pos_table input[type="number"],
#pos_table select.form-control {
    border-color: var(--pos-border-global) !important;
    border-radius: var(--pos-radius-global) !important;
}

#pos_table .form-control:focus,
#pos_table input[type="text"]:focus,
#pos_table input[type="number"]:focus,
#pos_table select.form-control:focus {
    border-color: var(--brand-500) !important;
    box-shadow: 0 0 0 3px var(--ui-focus-ring) !important;
}

label[for="my-drawer-4"]:not(.tw-dw-drawer-overlay),
label[for="my-drawer-brand"]:not(.tw-dw-drawer-overlay),
#show_featured_products,
.pos-kitchen-orders-btn,
.pos-recent-transactions-btn,
.pos-mobile-finalize-trigger,
#pos-finalize {
    background: linear-gradient(135deg, var(--ui-brand-start) 0%, var(--ui-brand-end) 100%) !important;
    border: 1px solid var(--brand-700) !important;
    border-radius: var(--pos-radius-global) !important;
    color: #ffffff !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08) !important;
    text-shadow: none !important;
}

label[for="my-drawer-4"]:not(.tw-dw-drawer-overlay):hover,
label[for="my-drawer-brand"]:not(.tw-dw-drawer-overlay):hover,
#show_featured_products:hover,
.pos-kitchen-orders-btn:hover,
.pos-recent-transactions-btn:hover,
.pos-mobile-finalize-trigger:hover,
#pos-finalize:hover {
    background: linear-gradient(135deg, var(--ui-brand-start-hover) 0%, var(--ui-brand-end-hover) 100%) !important;
    transform: none !important;
}

.tw-dw-drawer-overlay.overlay-category,
.tw-dw-drawer-overlay.overlay-brand {
    background: rgba(15, 23, 42, 0.35) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: inherit !important;
}

.tw-dw-drawer > .tw-dw-drawer-toggle:not(:checked) ~ .tw-dw-drawer-side {
    pointer-events: none !important;
}

.tw-dw-drawer > .tw-dw-drawer-toggle:not(:checked) ~ .tw-dw-drawer-side .tw-dw-drawer-overlay {
    background: transparent !important;
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

.tw-dw-drawer > .tw-dw-drawer-toggle:checked ~ .tw-dw-drawer-side {
    pointer-events: auto !important;
}

.tw-dw-drawer > .tw-dw-drawer-toggle:checked ~ .tw-dw-drawer-side .tw-dw-drawer-overlay {
    opacity: 1 !important;
    visibility: visible !important;
}

.pos-form-actions button,
.pos-form-actions .tw-dw-btn,
.modal-footer .btn,
.modal-footer .tw-dw-btn {
    border-radius: var(--pos-radius-global) !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

#pos-draft,
#pos-quotation,
.pos-express-finalize[data-pay_method="suspend"] {
    background: #fffbeb !important;
    border-color: #fcd34d !important;
    color: #92400e !important;
}

.pos-express-finalize[data-pay_method="credit_sale"],
.pos-express-finalize[data-pay_method="cash"],
.pos-express-finalize-mob {
    background: var(--global-save-button-green, #16a34a) !important;
    border-color: var(--global-save-button-green, #16a34a) !important;
    color: #ffffff !important;
}

.pos-express-finalize[data-pay_method="card"] {
    background: #eff6ff !important;
    border-color: #bfdbfe !important;
    color: #1d4ed8 !important;
}

#btn-duitnow {
    background: #f8fafc !important;
    border-color: var(--pos-border-global) !important;
    color: #364152 !important;
}

#pos-cancel,
#pos-delete {
    background: #dc2626 !important;
    border-color: #dc2626 !important;
    color: #ffffff !important;
}

.pos-form-actions button i {
    color: currentColor !important;
}

.pos-form-actions .pos-total {
    background: #dcfce7 !important;
    border: 1.5px solid #86efac !important;
    color: #166534 !important;
}

.pos-form-actions .pos-total > div {
    color: #166534 !important;
    font-size: 12px !important;
    letter-spacing: 0.05em;
    line-height: 1.1;
}

.pos-form-actions .pos-total #total_payable {
    color: #166534 !important;
    font-size: 1.8rem;
    line-height: 1;
}

/* Restore the POS action strip palette from the refreshed layout reference. */
.pos-form-actions {
    background: #ffffff !important;
    border-top: 1px solid #e5e7eb !important;
}

/* Appearance (all breakpoints). SIZING is deliberately NOT set here — see the
   min-width:768px block below. This rule sits ~1300 lines after the mobile
   tier in section 8.8 and carries ID selectors, so when it also declared
   min-width/min-height/padding/gap it silently beat every phone rule on both
   order AND specificity (an id beats any class combination). That is what
   pinned the six secondary buttons at 86px wide on a 390px screen and forced
   them to wrap onto three rows. */
.pos-form-actions .tw-flex-wrap > button,
.pos-form-actions #pos-draft,
.pos-form-actions #pos-quotation,
.pos-form-actions .pos-express-finalize,
.pos-form-actions #btn-duitnow,
.pos-form-actions #pos-finalize,
.pos-form-actions #pos-cancel,
.pos-form-actions #pos-delete {
    border-radius: 10px !important;
    border-width: 1px !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08) !important;
}

.pos-form-actions #btn-duitnow img {
    width: 16px !important;
    height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
    object-fit: contain !important;
    display: inline-block !important;
}

@media (min-width: 768px) {

.pos-form-actions .tw-flex-wrap {
    gap: 6px !important;
}

.pos-form-actions .tw-flex-wrap > button,
.pos-form-actions #pos-draft,
.pos-form-actions #pos-quotation,
.pos-form-actions .pos-express-finalize,
.pos-form-actions #btn-duitnow,
.pos-form-actions #pos-finalize,
.pos-form-actions #pos-cancel,
.pos-form-actions #pos-delete {
    min-height: 53px !important;
    min-width: 90px !important;
    padding: 5px 12px !important;
}

.pos-form-actions .tw-flex-wrap > button i {
    font-size: 17px !important;
}

.pos-form-actions .tw-flex-wrap > button span {
    font-size: 13px !important;
    font-weight: 700 !important;
}

.pos-form-actions #btn-duitnow img {
    width: 20px !important;
    height: 20px !important;
}

} /* end @media (min-width: 768px) — desktop/tablet action-button sizing (sized ~18% up from the 44/76px base across two passes, gap unchanged) */

.pos-form-actions #pos-draft {
    background: #dbeafe !important;
    border-color: #60a5fa !important;
    color: #1d4ed8 !important;
}

.pos-form-actions #pos-quotation {
    background: #fef3c7 !important;
    border-color: #f59e0b !important;
    color: #92400e !important;
}

.pos-form-actions .pos-express-finalize[data-pay_method="suspend"] {
    background: #ffedd5 !important;
    border-color: #fb923c !important;
    color: #c2410c !important;
}

.pos-form-actions .pos-express-finalize[data-pay_method="credit_sale"] {
    background: #dcfce7 !important;
    border-color: #86efac !important;
    color: #166534 !important;
}

.pos-form-actions #btn-duitnow {
    background: #fce7f3 !important;
    border-color: #f9a8d4 !important;
    color: #be185d !important;
}

.pos-form-actions .pos-express-finalize[data-pay_method="card"] {
    background: #e0e7ff !important;
    border-color: #a5b4fc !important;
    color: #3730a3 !important;
}

.pos-form-actions #pos-finalize {
    background: #0f2b46 !important;
    border-color: #0f2b46 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(15, 43, 70, 0.24) !important;
}

.pos-form-actions .pos-express-finalize[data-pay_method="cash"],
.pos-form-actions .pos-express-finalize-mob {
    background: #059669 !important;
    border-color: #059669 !important;
    color: #ffffff !important;
}

.pos-form-actions #pos-cancel,
.pos-form-actions #pos-delete {
    background: #dc2626 !important;
    border-color: #dc2626 !important;
    color: #ffffff !important;
}

.pos-form-actions .pos-total {
    min-height: 53px !important;
    min-width: 168px !important;
    padding: 5px 14px !important;
}

.product_box {
    border-color: var(--pos-border-global) !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08) !important;
}

.product_box:hover {
    border-color: var(--brand-500) !important;
    box-shadow: 0 6px 14px rgba(16, 24, 40, 0.12) !important;
    transform: none !important;
}

.product_box .image-container {
    background-color: var(--pos-surface-muted-global) !important;
    background-size: contain, 38% !important;
    background-position: center 36%, center 38% !important;
    background-repeat: no-repeat, no-repeat !important;
}

.product_box .image-container:not([data-image-url]),
.product_box .image-container[data-image-url=""] {
    background-image:
        linear-gradient(135deg, #eef2f6 0%, #ffffff 100%),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%239aa4b2' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><rect x='8' y='12' width='48' height='40' rx='4'/><circle cx='22' cy='26' r='4'/><path d='M8 44l14-14 12 12 8-8 14 14'/></svg>") !important;
}

.product_box[data-price]::after {
    border: 1px solid var(--pos-border-global);
    border-radius: calc(var(--pos-radius-global) - 2px);
    color: #121926;
}

.tw-dw-drawer-side .tw-dw-menu {
    border-left: 1px solid var(--pos-border-global);
    box-shadow: -18px 0 36px rgba(16, 24, 40, 0.12);
}

.tw-dw-drawer-side .tw-dw-card {
    border-color: var(--pos-border-global) !important;
    border-radius: var(--pos-radius-global) !important;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06) !important;
}

.tw-dw-drawer-side .main-category.tw-dw-btn,
.tw-dw-drawer-side .category-back,
.tw-dw-drawer-side .close-side-bar-category,
.tw-dw-drawer-side .close-side-bar-brand {
    border-radius: var(--pos-radius-global) !important;
}

/* =======================================================================
   GLOBAL MODAL STANDARDIZATION OVERRIDES
   Standardizes all application modals globally (Bootstrap, au-modal, Repair,
   TailorPro, Warehouse, Essentials, etc.) to use a single unified design.
   ======================================================================= */

/* 1. Modal Content Shell */
.modal .modal-content,
.modal-dialog .modal-content,
body .modal .modal-dialog .modal-content,
.repair-modal-panel,
.tailorpro-tailwind-modal .modal-content,
.tailorpro-modal-content,
.warehouse-tailwind-modal .modal-content,
.warehouse-modal-content,
.essentials-tailwind-module .modal-content,
.modal-dialog .au-modal,
.au-modal__content,
[class*="-modal-panel"] {
    border-radius: var(--ui-radius-xl, 4px) !important;
    overflow: hidden !important;
    border: none !important;
    box-shadow: 0 28px 60px -28px rgba(15, 23, 42, 0.45) !important;
    background: #fff !important;
}

.au-modal.au-modal--standalone {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* 2. Compact Blue Modal Header */
.modal .modal-header,
.modal-dialog .modal-header,
body .modal .modal-dialog .modal-header,
.au-modal__header,
.repair-modal-header,
.tailorpro-tailwind-modal .modal-header,
.tailorpro-modal-header,
.warehouse-tailwind-modal .modal-header,
.warehouse-modal-header,
.essentials-tailwind-module .modal-header,
.report-modal-header,
.contact-modal-header,
[class*="-modal-header"] {
    background: linear-gradient(135deg, var(--ui-brand-start, #3b82f6) 0%, var(--ui-brand-end, #2563eb) 100%) !important;
    background-image: linear-gradient(135deg, var(--ui-brand-start, #3b82f6) 0%, var(--ui-brand-end, #2563eb) 100%) !important;
    border-top-left-radius: var(--ui-radius-xl, 4px) !important;
    border-top-right-radius: var(--ui-radius-xl, 4px) !important;
    border-bottom: none !important;
    padding: 0.75rem 1.25rem !important;
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0.875rem !important;
    position: relative !important;
}

/* Make sure header before/after pseudo-elements do not disrupt the flex layout */
.modal .modal-header::before,
.modal .modal-header::after,
.modal-dialog .modal-header::before,
.modal-dialog .modal-header::after,
.au-modal__header::before,
.au-modal__header::after,
.repair-modal-header::before,
.repair-modal-header::after {
    content: none !important;
    display: none !important;
}

/* White Title Text on Blue Header */
.modal .modal-header .modal-title,
.modal-dialog .modal-header .modal-title,
.modal .modal-header h3,
.modal-dialog .modal-header h3,
.modal .modal-header h4,
.modal-dialog .modal-header h4,
.modal .modal-header h5,
.modal-dialog .modal-header h5,
.au-modal__title,
.repair-modal-header h4,
.tailorpro-tailwind-modal .modal-title,
.tailorpro-modal-header .modal-title,
.warehouse-tailwind-modal .modal-title,
.warehouse-modal-header .modal-title,
[class*="-modal-header"] .modal-title,
[class*="-modal-header"] h3,
[class*="-modal-header"] h4,
[class*="-modal-header"] h5 {
    color: #ffffff !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    order: 1 !important;
    flex: 1 1 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    text-indent: 0 !important;
    text-align: left !important;
}

/* Remove decorative icons inside header titles */
.modal-header h3 i, .modal-header h3 svg,
.modal-header h4 i, .modal-header h4 svg,
.modal-header h5 i, .modal-header h5 svg,
.au-modal__title i, .au-modal__title svg,
.repair-modal-header h4 i, .repair-modal-header h4 svg,
[class*="-modal-header"] > i, [class*="-modal-header"] > svg,
[class*="-modal-header"] .modal-title i, [class*="-modal-header"] .modal-title svg,
[class*="-modal-header"] h3 i, [class*="-modal-header"] h3 svg,
[class*="-modal-header"] h4 i, [class*="-modal-header"] h4 svg,
[class*="-modal-header"] h5 i, [class*="-modal-header"] h5 svg {
    display: none !important;
}

/* 3. Global Removal of Close "X" Button in Headers (No Empty Gaps).
   The generic catch is header-scoped so footer buttons whose class ends in
   -modal-close keep rendering (styled dark by the footer mapping below). */
.modal-header .close,
.modal-header button.close,
.modal-header .btn-close,
.modal-header .contact-modal-close,
.contact-tailwind-modal .contact-modal-header .contact-modal-close,
.au-modal__close,
.repair-modal-close,
.tailorpro-tailwind-modal .modal-header .close,
.warehouse-tailwind-modal .modal-header .close,
[class*="-modal-header"] [class*="-modal-close"],
.modal-header [data-vdismiss],
.modal-header [data-dismiss="modal"],
.au-modal__header [data-vdismiss],
.au-modal__header .close,
.au-modal__header .btn-close,
[class*="-modal-header"] [data-vdismiss],
[class*="-modal-header"] [data-dismiss="modal"],
[class*="-modal-header"] .close,
[class*="-modal-header"] .btn-close {
    display: none !important;
}

/* 4. Standardized Modal Body Spacing */
.modal .modal-body,
.modal-dialog .modal-body,
.au-modal__body,
.repair-modal-body,
.tailorpro-tailwind-modal .modal-body,
.tailorpro-modal-body,
.warehouse-tailwind-modal .modal-body,
.warehouse-modal-body,
.essentials-tailwind-module .modal-body,
[class*="-modal-body"] {
    padding: 1.25rem !important;
    background: #ffffff !important;
}

/* 5. Standardized White Modal Footer */
.modal .modal-footer,
.modal-dialog .modal-footer,
body .modal .modal-dialog .modal-footer,
.au-modal__footer,
.repair-modal-footer,
.tailorpro-tailwind-modal .modal-footer,
.tailorpro-modal-footer,
.warehouse-tailwind-modal .modal-footer,
.warehouse-modal-footer,
.essentials-tailwind-module .modal-footer,
[class*="-modal-footer"] {
    border-bottom-left-radius: var(--ui-radius-xl, 4px) !important;
    border-bottom-right-radius: var(--ui-radius-xl, 4px) !important;
    padding: 0.85rem 1.25rem !important;
    background: #ffffff !important;
    border-top: 1px solid var(--ui-surface-border, #e5e7eb) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0.75rem !important;
    flex-wrap: wrap !important;
}

/* 6. Standardized Footer Buttons (Size, Spacing, Typography, Corners) */
.modal-footer .btn,
.modal-footer .tw-dw-btn,
.modal-footer .au-button,
.modal-footer button,
.au-modal__footer .btn,
.au-modal__footer .tw-dw-btn,
.au-modal__footer .au-button,
.au-modal__footer button,
.repair-modal-footer .btn,
.repair-modal-footer .tw-dw-btn,
[class*="-modal-footer"] .btn,
[class*="-modal-footer"] .tw-dw-btn,
[class*="-modal-footer"] .au-button,
[class*="-modal-footer"] button {
    border-radius: var(--ui-radius-xl, 4px) !important; /* 4px/6px rectangular look instead of pill */
    font-weight: 600 !important;
    /* Fixed geometry so Save/Close are always the same size regardless of
       markup dialect or button class; width only grows for long labels. */
    height: 38px !important;
    min-height: 38px !important;
    min-width: 96px !important;
    padding: 0 1.25rem !important;
    font-size: 0.875rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
    margin: 0 !important;
    float: none !important;
    width: auto;
    vertical-align: middle !important;
}

/* Green Save/Submit Action Buttons */
.modal-footer .global-save-button,
.modal-footer button[type="submit"],
.modal-footer .btn-primary,
.modal-footer .tw-dw-btn-primary,
.au-modal__footer button[type="submit"],
.au-modal__footer .btn-primary,
.au-modal__footer .tw-dw-btn-primary,
.repair-modal-footer button[type="submit"],
.repair-modal-footer .tw-dw-btn-primary,
.modal-footer .btn-success,
.modal-footer .tw-dw-btn-success,
.modal-footer .au-button--primary,
.au-modal__footer .au-button--primary,
[class*="-modal-footer"] button[type="submit"],
[class*="-modal-footer"] .btn-primary,
[class*="-modal-footer"] .tw-dw-btn-primary,
[class*="-modal-footer"] .au-button--primary,
[class*="-modal-footer"] .global-save-button {
    background-color: var(--global-save-button-green, #16a34a) !important;
    border: 1px solid var(--global-save-button-green, #16a34a) !important;
    color: #ffffff !important;
    order: 0 !important;
}

.modal-footer .global-save-button:hover,
.modal-footer button[type="submit"]:hover,
.modal-footer .btn-primary:hover,
.modal-footer .tw-dw-btn-primary:hover,
.au-modal__footer button[type="submit"]:hover,
.au-modal__footer .btn-primary:hover,
.au-modal__footer .tw-dw-btn-primary:hover,
.repair-modal-footer button[type="submit"]:hover,
.repair-modal-footer .tw-dw-btn-primary:hover {
    background-color: var(--global-save-button-green-hover, #15803d) !important;
    border-color: var(--global-save-button-green-hover, #15803d) !important;
    color: #ffffff !important;
}

/* Dark Grey Close/Cancel Action Buttons */
.modal-footer .global-close-button,
.modal-footer [data-vdismiss]:not(.global-save-button),
.modal-footer [data-repair-modal-close],
.modal-footer [data-dismiss="modal"],
.modal-footer .btn-default,
.modal-footer .btn-secondary,
.modal-footer .tw-dw-btn-neutral,
.au-modal__footer [data-vdismiss],
.au-modal__footer .btn-default,
.au-modal__footer .btn-secondary,
.au-modal__footer .tw-dw-btn-neutral,
.repair-modal-footer [data-repair-modal-close],
.repair-modal-footer .tw-dw-btn-neutral,
.modal-footer .au-button--secondary,
.au-modal__footer .au-button--secondary,
[class*="-modal-footer"] [data-vdismiss],
[class*="-modal-footer"] [data-dismiss="modal"],
[class*="-modal-footer"] .btn-default,
[class*="-modal-footer"] .btn-secondary,
[class*="-modal-footer"] .tw-dw-btn-neutral,
[class*="-modal-footer"] .au-button--secondary,
[class*="-modal-footer"] [class*="-modal-close"] {
    background-color: #2f3a4a !important;
    border: 1px solid #2f3a4a !important;
    color: #ffffff !important;
    order: 2 !important;
}

.modal-footer .global-close-button:hover,
.modal-footer [data-vdismiss]:not(.global-save-button):hover,
.modal-footer [data-repair-modal-close]:hover,
.modal-footer [data-dismiss="modal"]:hover,
.modal-footer .btn-default:hover,
.modal-footer .btn-secondary:hover,
.modal-footer .tw-dw-btn-neutral:hover,
.au-modal__footer [data-vdismiss]:hover,
.au-modal__footer .btn-default:hover,
.au-modal__footer .btn-secondary:hover,
.au-modal__footer .tw-dw-btn-neutral:hover,
.repair-modal-footer [data-repair-modal-close]:hover,
.repair-modal-footer .tw-dw-btn-neutral:hover {
    background-color: #1e293b !important;
    border-color: #1e293b !important;
    color: #ffffff !important;
}

/* Hide icons inside footer buttons */
.modal-footer .btn i, .modal-footer .btn svg,
.modal-footer .tw-dw-btn i, .modal-footer .tw-dw-btn svg,
.modal-footer .au-button i, .modal-footer .au-button svg,
.au-modal__footer button i, .au-modal__footer button svg,
[class*="-modal-footer"] .btn i, [class*="-modal-footer"] .btn svg,
[class*="-modal-footer"] .tw-dw-btn i, [class*="-modal-footer"] .tw-dw-btn svg,
[class*="-modal-footer"] .au-button i, [class*="-modal-footer"] .au-button svg {
    display: none !important;
}

/* Destructive footer actions keep their red identity. Declared AFTER the green
   primary mapping above so a `.btn-danger[type=submit]` resolves red, not green. */
.modal-footer .btn-danger,
.modal-footer .tw-dw-btn-error,
.au-modal__footer .btn-danger,
.au-modal__footer .tw-dw-btn-error,
[class*="-modal-footer"] .btn-danger,
[class*="-modal-footer"] .tw-dw-btn-error {
    background-color: #dc2626 !important;
    border: 1px solid #dc2626 !important;
    color: #ffffff !important;
}

/* -----------------------------------------------------------------------
   Module navigation + page title consistency
   Presentation-only normalization for module nav bars, Settings submenu,
   Business Settings tabs, and page titles. */
:root {
    --au-module-nav-bg: #ffffff;
    --au-module-nav-border: #dbe3ea;
    --au-module-nav-text: #263244;
    --au-module-nav-muted: #4b5565;
    --au-module-nav-active-bg: #eef7fd;
    --au-module-nav-active-text: var(--brand-700, #0878a8);
}

#scrollable-container > section.no-print > nav,
main > section.no-print > nav {
    background: var(--au-module-nav-bg) !important;
    border: 1px solid var(--au-module-nav-border) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    margin: 16px !important;
    min-height: 44px !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    padding: 0 !important;
    scrollbar-width: thin;
    white-space: nowrap !important;
}

#scrollable-container > section.no-print > nav.navbar-default > .container-fluid,
main > section.no-print > nav.navbar-default > .container-fluid {
    align-items: center !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0.35rem !important;
    min-height: 44px !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    padding: 0 10px !important;
    white-space: nowrap !important;
    width: max-content;
    min-width: 100%;
}

#scrollable-container > section.no-print > nav.navbar-default .navbar-header,
main > section.no-print > nav.navbar-default .navbar-header {
    flex: 0 0 auto !important;
    float: none !important;
}

#scrollable-container > section.no-print > nav.navbar-default .navbar-toggle,
main > section.no-print > nav.navbar-default .navbar-toggle,
#scrollable-container > section.no-print > nav:not(.navbar-default) button[aria-controls$="navbar-collapse"],
main > section.no-print > nav:not(.navbar-default) button[aria-controls$="navbar-collapse"] {
    display: none !important;
}

#scrollable-container > section.no-print > nav.navbar-default .navbar-brand,
main > section.no-print > nav.navbar-default .navbar-brand {
    align-items: center !important;
    color: var(--au-module-nav-active-text) !important;
    display: inline-flex !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    gap: 6px !important;
    height: 42px !important;
    line-height: 1 !important;
    padding: 0 10px !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

#scrollable-container > section.no-print > nav.navbar-default .navbar-collapse,
main > section.no-print > nav.navbar-default .navbar-collapse {
    align-items: center !important;
    border-top: 0 !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    flex: 1 1 auto !important;
    gap: 2px !important;
    height: auto !important;
    min-width: 0 !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    padding: 0 !important;
    width: auto !important;
}

#scrollable-container > section.no-print > nav.navbar-default .navbar-nav,
main > section.no-print > nav.navbar-default .navbar-nav {
    align-items: center !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    float: none !important;
    gap: 2px !important;
    margin: 0 !important;
    min-height: 42px !important;
    white-space: nowrap !important;
}

#scrollable-container > section.no-print > nav.navbar-default .navbar-nav > li,
main > section.no-print > nav.navbar-default .navbar-nav > li {
    flex: 0 0 auto !important;
    float: none !important;
}

#scrollable-container > section.no-print > nav.navbar-default .navbar-nav > li > a,
main > section.no-print > nav.navbar-default .navbar-nav > li > a,
#scrollable-container > section.no-print > nav .gym-nav-link,
main > section.no-print > nav .gym-nav-link {
    align-items: center !important;
    border-radius: 4px !important;
    color: var(--au-module-nav-text) !important;
    display: inline-flex !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    gap: 6px !important;
    line-height: 1 !important;
    min-height: 34px !important;
    padding: 8px 10px !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

#scrollable-container > section.no-print > nav.navbar-default .navbar-nav > li.active > a,
#scrollable-container > section.no-print > nav.navbar-default .navbar-nav > li.active > a:hover,
#scrollable-container > section.no-print > nav.navbar-default .navbar-nav > li.active > a:focus,
main > section.no-print > nav.navbar-default .navbar-nav > li.active > a,
main > section.no-print > nav.navbar-default .navbar-nav > li.active > a:hover,
main > section.no-print > nav.navbar-default .navbar-nav > li.active > a:focus,
#scrollable-container > section.no-print > nav .gym-nav-link-active,
main > section.no-print > nav .gym-nav-link-active {
    background: var(--au-module-nav-active-bg) !important;
    color: var(--au-module-nav-active-text) !important;
}

#scrollable-container > section.no-print > nav > details,
main > section.no-print > nav > details {
    display: block !important;
    min-width: 100% !important;
}

#scrollable-container > section.no-print > nav > details > summary,
main > section.no-print > nav > details > summary {
    display: none !important;
}

#scrollable-container > section.no-print > nav > details > div,
main > section.no-print > nav > details > div,
#scrollable-container > section.no-print > nav:not(.navbar-default) > div,
main > section.no-print > nav:not(.navbar-default) > div {
    align-items: center !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 0.35rem !important;
    min-height: 42px !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    padding: 4px 10px !important;
    white-space: nowrap !important;
    width: max-content;
    min-width: 100%;
}

#scrollable-container > section.no-print > nav:not(.navbar-default):not(:has(> details)),
main > section.no-print > nav:not(.navbar-default):not(:has(> details)) {
    align-items: center !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 0.35rem !important;
}

#scrollable-container > section.no-print > nav:not(.navbar-default):not(:has(> details)) > div,
main > section.no-print > nav:not(.navbar-default):not(:has(> details)) > div {
    flex: 0 0 auto !important;
    justify-content: flex-start !important;
    min-width: 0 !important;
    padding-bottom: 4px !important;
    padding-top: 4px !important;
    width: auto !important;
}

#scrollable-container > section.no-print > nav:not(.navbar-default):not(:has(> details)) > div:first-child,
main > section.no-print > nav:not(.navbar-default):not(:has(> details)) > div:first-child {
    min-height: 42px !important;
}

#scrollable-container > section.no-print > nav:not(.navbar-default) button[onclick*="nav-links"],
main > section.no-print > nav:not(.navbar-default) button[onclick*="nav-links"] {
    display: none !important;
}

#scrollable-container > section.no-print > nav:not(.navbar-default) [id$="-nav-links"],
main > section.no-print > nav:not(.navbar-default) [id$="-nav-links"],
#scrollable-container > section.no-print > nav:not(.navbar-default) [id$="-navbar-collapse"],
main > section.no-print > nav:not(.navbar-default) [id$="-navbar-collapse"] {
    align-items: center !important;
    display: flex !important;
    flex: 0 0 auto !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 2px !important;
    min-height: 42px !important;
    min-width: 0 !important;
    overflow: visible !important;
    padding: 4px 10px !important;
    white-space: nowrap !important;
    width: auto !important;
}

#scrollable-container > section.no-print > nav:not(.navbar-default) [id$="-navbar-collapse"] > ul,
main > section.no-print > nav:not(.navbar-default) [id$="-navbar-collapse"] > ul {
    align-items: center !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 2px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
}

#scrollable-container > section.no-print > nav:not(.navbar-default) [id$="-navbar-collapse"] > ul > li,
main > section.no-print > nav:not(.navbar-default) [id$="-navbar-collapse"] > ul > li {
    flex: 0 0 auto !important;
}

#scrollable-container > section.no-print > nav > details > div > a,
#scrollable-container > section.no-print > nav > details > div > span,
#scrollable-container > section.no-print > nav:not(.navbar-default) > div > a,
#scrollable-container > section.no-print > nav:not(.navbar-default) > div > div:first-child,
main > section.no-print > nav > details > div > a,
main > section.no-print > nav > details > div > span,
main > section.no-print > nav:not(.navbar-default) > div > a,
main > section.no-print > nav:not(.navbar-default) > div > div:first-child {
    align-items: center !important;
    color: var(--au-module-nav-active-text) !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    gap: 6px !important;
    min-height: 34px !important;
    padding: 6px 8px !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    width: auto !important;
}

#scrollable-container > section.no-print > nav > details ul,
main > section.no-print > nav > details ul,
#scrollable-container > section.no-print > nav:not(.navbar-default) > div > div:not(:first-child),
main > section.no-print > nav:not(.navbar-default) > div > div:not(:first-child),
#scrollable-container > section.no-print > nav:not(.navbar-default) > div > div:first-child + div,
main > section.no-print > nav:not(.navbar-default) > div > div:first-child + div {
    align-items: center !important;
    display: flex !important;
    flex: 0 0 auto !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 2px !important;
    list-style: none !important;
    margin: 0 !important;
    min-width: 0 !important;
    overflow: visible !important;
    padding: 0 !important;
    white-space: nowrap !important;
}

#scrollable-container > section.no-print > nav > details ul > li,
main > section.no-print > nav > details ul > li {
    flex: 0 0 auto !important;
}

#scrollable-container > section.no-print > nav > details ul > li > a,
main > section.no-print > nav > details ul > li > a,
#scrollable-container > section.no-print > nav:not(.navbar-default) [id$="-nav-links"] > a,
main > section.no-print > nav:not(.navbar-default) [id$="-nav-links"] > a,
#scrollable-container > section.no-print > nav:not(.navbar-default) > div > div:not(:first-child) > a,
main > section.no-print > nav:not(.navbar-default) > div > div:not(:first-child) > a,
#scrollable-container > section.no-print > nav:not(.navbar-default) > div > div:first-child + div > a,
main > section.no-print > nav:not(.navbar-default) > div > div:first-child + div > a {
    align-items: center !important;
    border-radius: 4px !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    gap: 6px !important;
    line-height: 1 !important;
    min-height: 34px !important;
    padding: 8px 10px !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

#scrollable-container > section.no-print > nav:not(.navbar-default) a[class*="tw-bg-gray-100"],
#scrollable-container > section.no-print > nav:not(.navbar-default) a[class*="tw-bg-blue-50"],
main > section.no-print > nav:not(.navbar-default) a[class*="tw-bg-gray-100"],
main > section.no-print > nav:not(.navbar-default) a[class*="tw-bg-blue-50"] {
    background: var(--au-module-nav-active-bg) !important;
    color: var(--au-module-nav-active-text) !important;
}

main.unified-page-headers > #scrollable-container {
    padding-top: 0.5rem !important;
}

main.unified-page-headers .content-header,
.content-header.au-page-header,
section.content-header {
    align-items: center !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: #121926 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0.75rem !important;
    justify-content: space-between !important;
    margin: 0 0 0.75rem !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding: 0.75rem 1.35rem 0.35rem !important;
}

main.unified-page-headers .content-header h1,
main.unified-page-headers .content-header .row h1,
main.unified-page-headers .content-header h2,
main.unified-page-headers .content-header h3,
.content-header h1,
.content-header .row h1,
.content-header h2,
.content-header h3,
.au-page-header__title {
    align-items: center !important;
    color: #121926 !important;
    display: inline-flex !important;
    flex-wrap: wrap !important;
    font-size: 1.45rem !important;
    font-weight: 700 !important;
    gap: 0.5rem !important;
    letter-spacing: 0 !important;
    line-height: 1.25 !important;
    margin: 0 !important;
    text-align: left !important;
}

main.unified-page-headers .content-header > .d-flex,
main.unified-page-headers .content-header > .row,
section.content-header > .d-flex,
section.content-header > .row {
    align-items: center !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 0.75rem !important;
    justify-content: space-between !important;
    margin-bottom: 0 !important;
    width: 100% !important;
}

main.unified-page-headers .content-header > .d-flex > h1,
main.unified-page-headers .content-header > .row h1,
section.content-header > .d-flex > h1,
section.content-header > .row h1,
section.content-header > h1 {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    white-space: nowrap !important;
}

main.unified-page-headers .content-header > .d-flex > div:last-child,
section.content-header > .d-flex > div:last-child,
section.content-header > .row > div:last-child {
    align-items: center !important;
    display: flex !important;
    flex: 0 0 auto !important;
    flex-wrap: nowrap !important;
    gap: 0.5rem !important;
    justify-content: flex-end !important;
    margin-left: auto !important;
}

main.unified-page-headers .content-header h1 small,
main.unified-page-headers .content-header .row h1 small,
main.unified-page-headers .content-header .breadcrumb,
main.unified-page-headers .content-header .breadcrumb a,
main.unified-page-headers .content-header .breadcrumb > .active,
main.unified-page-headers .content-header .text-muted,
main.unified-page-headers .content-header p,
main.unified-page-headers .content-header .help-block,
main.unified-page-headers .content-header i,
main.unified-page-headers .content-header svg,
.content-header h1 small,
.content-header .row h1 small,
.content-header .breadcrumb,
.content-header .breadcrumb a,
.content-header .breadcrumb > .active,
.content-header .text-muted,
.content-header p,
.content-header .help-block,
.content-header i,
.content-header svg,
.au-page-header__subtitle {
    color: #4b5565 !important;
}

.au-page-header {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.accounting-tailwind-module .accounting-page-header,
.bs-page .bs-header,
.rd-header {
    align-items: center !important;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #121926 !important;
    display: flex !important;
    gap: 0.75rem !important;
    min-height: 0 !important;
    padding: 0 !important;
}

.accounting-tailwind-module .accounting-page-header h1,
.bs-page .bs-header h1,
.rd-header h1 {
    color: #121926 !important;
    font-size: 1.45rem !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    margin: 0 !important;
}

.bs-page .bs-header small,
.rd-header h1 small {
    color: #4b5565 !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
}

.bs-page .bs-header-icon,
.rd-header-icon {
    background: transparent !important;
    background-image: none !important;
    border-radius: 0 !important;
    color: var(--au-module-nav-active-text) !important;
    font-size: 1.2rem !important;
    height: auto !important;
    width: auto !important;
}

main.unified-page-headers .content-header .btn,
main.unified-page-headers .content-header .btn-modal,
main.unified-page-headers .content-header .tw-dw-btn,
main.unified-page-headers .content-header button:not(.au-input),
main.unified-page-headers .content-header a[role="button"] {
    background: var(--brand-600, #0b8fc4) !important;
    background-image: none !important;
    border: 1px solid var(--brand-600, #0b8fc4) !important;
    box-shadow: none !important;
    color: #fff !important;
}

/* Shared au-input-based controls (e.g. DateRangePickerInput.vue's toggle button) are
   real form controls, not header action buttons — the blanket brand-fill pill above
   was repainting them solid regardless of context, so a Date Range filter placed in a
   page header (Accounting dashboard) looked like a colored button instead of matching
   how the same shared component looks everywhere else in the app. */
main.unified-page-headers .content-header .au-input,
main.unified-page-headers .content-header button.au-input {
    background: #fff !important;
    background-image: none !important;
    border: 1px solid var(--au-color-border) !important;
    box-shadow: none !important;
    color: var(--au-color-text) !important;
    height: auto !important;
    min-height: 34px !important;
    padding: .45rem .75rem !important;
    border-radius: 6px !important;
}

.bs-page .pos-tab-container .module-shared-widget-body > div > div,
.bs-page .pos-tab-container .module-shared-widget-body > div > .sm\:tw-px-5 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.bs-page .pos-tab-container .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.bs-page .pos-tab-menu {
    border-right: 0 !important;
    float: none !important;
    padding: 0 !important;
    width: 100% !important;
}

.bs-page .pos-tab {
    float: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
}

.bs-page .pos-tab-menu .list-group {
    align-items: center !important;
    background: #fff !important;
    border-bottom: 1px solid var(--au-module-nav-border) !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 2px !important;
    margin: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 6px !important;
    scrollbar-width: thin;
    white-space: nowrap !important;
}

.bs-page .pos-tab-menu .list-group-item {
    align-items: center !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 4px !important;
    color: var(--au-module-nav-text) !important;
    display: inline-flex !important;
    flex: 0 0 auto !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    gap: 6px !important;
    margin: 0 !important;
    min-height: 34px !important;
    overflow: visible !important;
    padding: 8px 10px !important;
    text-align: left !important;
    text-decoration: none !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
}

.bs-page .pos-tab-menu .list-group-item.active,
.bs-page .pos-tab-menu .list-group-item.active:hover,
.bs-page .pos-tab-menu .list-group-item.active:focus {
    background: var(--au-module-nav-active-bg) !important;
    border-left: 0 !important;
    color: var(--au-module-nav-active-text) !important;
}

.bs-page .pos-tab-menu .list-group-item .menu-icon {
    color: inherit !important;
    opacity: 1 !important;
    width: auto !important;
}

.bs-page .pos-tab-menu .list-group-item .menu-label {
    overflow: visible !important;
    text-overflow: clip !important;
}

@media (max-width: 767px) {
    #scrollable-container > section.no-print > nav,
    main > section.no-print > nav {
        margin: 12px 10px !important;
    }

    main.unified-page-headers .content-header,
    .content-header.au-page-header,
    section.content-header {
        flex-wrap: wrap !important;
        padding: 0.65rem 1rem 0.25rem !important;
    }

    main.unified-page-headers .content-header > .d-flex,
    main.unified-page-headers .content-header > .row,
    section.content-header > .d-flex,
    section.content-header > .row {
        flex-wrap: wrap !important;
    }

    main.unified-page-headers .content-header > .d-flex > h1,
    main.unified-page-headers .content-header > .row h1,
    section.content-header > .d-flex > h1,
    section.content-header > .row h1,
    section.content-header > h1 {
        white-space: normal !important;
    }

    main.unified-page-headers .content-header h1,
    main.unified-page-headers .content-header .row h1,
    main.unified-page-headers .content-header h2,
    main.unified-page-headers .content-header h3,
    .content-header h1,
    .content-header .row h1,
    .content-header h2,
    .content-header h3,
    .au-page-header__title,
    .accounting-tailwind-module .accounting-page-header h1,
    .bs-page .bs-header h1,
    .rd-header h1 {
        font-size: 1.25rem !important;
    }
}

/* -----------------------------------------------------------------------
   Global modal design system final cascade lock.
   Keep this as the last modal block: older module modal skins above may remain
   for non-modal internals, but header/footer/button visuals resolve here. */
.modal .modal-content,
.modal-dialog .modal-content,
body .modal .modal-dialog .modal-content,
.modal-dialog > .au-modal,
.au-modal__content,
.repair-modal-panel,
.report-modal-panel,
.contact-modal-panel,
.clinic-modal-panel,
.booking-modal-panel,
.gym-modal-content,
.tailorpro-modal-content,
.warehouse-modal-content,
[class*="-modal-panel"] {
    background: #fff !important;
    border: 0 !important;
    border-radius: var(--ui-radius-xl, 4px) !important;
    box-shadow: 0 28px 60px -28px rgba(15, 23, 42, 0.45) !important;
    overflow: hidden !important;
}

.modal .modal-header,
.modal-dialog .modal-header,
body .modal .modal-dialog .modal-header,
.au-modal__header,
.repair-modal-header,
.report-modal-header,
.contact-modal-header,
.clinic-modal-header,
.booking-modal-header,
.gym-modal-header,
.tailorpro-modal-header,
.warehouse-modal-header,
[class*="-modal-header"] {
    align-items: center !important;
    background: var(--ui-brand-start, #0ea5e9) !important;
    background-image: none !important;
    border: 0 !important;
    border-top-left-radius: var(--ui-radius-xl, 4px) !important;
    border-top-right-radius: var(--ui-radius-xl, 4px) !important;
    color: #fff !important;
    display: flex !important;
    gap: 0.875rem !important;
    justify-content: flex-start !important;
    min-height: 48px !important;
    padding: 0.75rem 1.25rem !important;
    position: relative !important;
}

.modal .modal-header::before,
.modal .modal-header::after,
.modal-dialog .modal-header::before,
.modal-dialog .modal-header::after,
[class*="-modal-header"]::before,
[class*="-modal-header"]::after {
    content: none !important;
    display: none !important;
}

.modal .modal-header .modal-title,
.modal-dialog .modal-header .modal-title,
.modal .modal-header h3,
.modal-dialog .modal-header h3,
.modal .modal-header h4,
.modal-dialog .modal-header h4,
.modal .modal-header h5,
.modal-dialog .modal-header h5,
.au-modal__title,
[class*="-modal-header"] .modal-title,
[class*="-modal-header"] h3,
[class*="-modal-header"] h4,
[class*="-modal-header"] h5 {
    color: #fff !important;
    flex: 1 1 auto !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    order: 1 !important;
    padding: 0 !important;
    text-align: left !important;
    text-indent: 0 !important;
}

.modal .modal-header > i,
.modal .modal-header > svg,
.modal .modal-header > img,
.modal-dialog .modal-header > i,
.modal-dialog .modal-header > svg,
.modal-dialog .modal-header > img,
.modal .modal-title i,
.modal .modal-title svg,
.modal .modal-title img,
.modal-dialog .modal-title i,
.modal-dialog .modal-title svg,
.modal-dialog .modal-title img,
.au-modal__title i,
.au-modal__title svg,
.au-modal__title img,
[class*="-modal-header"] > i,
[class*="-modal-header"] > svg,
[class*="-modal-header"] > img,
[class*="-modal-header"] .modal-title i,
[class*="-modal-header"] .modal-title svg,
[class*="-modal-header"] .modal-title img,
[class*="-modal-header"] h3 i,
[class*="-modal-header"] h3 svg,
[class*="-modal-header"] h3 img,
[class*="-modal-header"] h4 i,
[class*="-modal-header"] h4 svg,
[class*="-modal-header"] h4 img,
[class*="-modal-header"] h5 i,
[class*="-modal-header"] h5 svg,
[class*="-modal-header"] h5 img,
.gym-modal-title-icon {
    display: none !important;
}

.modal .modal-header .close,
.modal-dialog .modal-header .close,
.modal .modal-header button.close,
.modal-dialog .modal-header button.close,
.modal .modal-header .btn-close,
.modal-dialog .modal-header .btn-close,
.au-modal__close,
[class*="-modal-header"] [class*="-modal-close"],
[class*="-modal-header"] [data-repair-modal-close] {
    display: none !important;
}

.modal .modal-body,
.modal-dialog .modal-body,
.au-modal__body,
[class*="-modal-body"] {
    background: #fff !important;
    padding: 1.25rem !important;
}

.modal .modal-body .row,
.modal-dialog .modal-body .row,
.au-modal__body .row,
[class*="-modal-body"] .row {
    row-gap: 0.75rem;
}

.modal .modal-body .form-group,
.modal-dialog .modal-body .form-group,
.au-modal__body .form-group,
.au-modal__body .au-field,
[class*="-modal-body"] .form-group,
[class*="-modal-body"] .au-field,
[class*="-modal-body"] [class*="-field"] {
    margin-bottom: 1rem;
}

.modal .modal-body label,
.modal-dialog .modal-body label,
.au-modal__body label,
[class*="-modal-body"] label {
    color: #364152 !important;
    display: block;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    margin-bottom: 0.35rem !important;
}

.modal .modal-body .form-control,
.modal .modal-body .select2-container,
.modal .modal-body textarea,
.modal .modal-body input:not([type="checkbox"]):not([type="radio"]),
.modal .modal-body select,
.modal-dialog .modal-body .form-control,
.modal-dialog .modal-body .select2-container,
.modal-dialog .modal-body textarea,
.modal-dialog .modal-body input:not([type="checkbox"]):not([type="radio"]),
.modal-dialog .modal-body select,
.au-modal__body .form-control,
.au-modal__body .select2-container,
.au-modal__body .au-input,
.au-modal__body textarea,
.au-modal__body input:not([type="checkbox"]):not([type="radio"]),
.au-modal__body select,
[class*="-modal-body"] .form-control,
[class*="-modal-body"] .select2-container,
[class*="-modal-body"] [class*="-input"]:not(.au-input-group__addon),
[class*="-modal-body"] textarea,
[class*="-modal-body"] input:not([type="checkbox"]):not([type="radio"]),
[class*="-modal-body"] select {
    max-width: 100% !important;
    width: 100% !important;
}

/* [class*="-input"] above also matches .au-input-group__addon (it contains
   "-input-"), which blew the icon addon up to fill the row and squeezed the
   field itself down to a sliver. Addons keep the design system's fixed
   icon-only width inside modals. */
[class*="-modal-body"] .au-input-group__addon {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
}

.modal .modal-footer,
.modal-dialog .modal-footer,
body .modal .modal-dialog .modal-footer,
.au-modal__footer,
.repair-modal-footer,
.report-modal-footer,
.contact-modal-footer,
.clinic-modal-footer,
.booking-modal-footer,
.gym-modal-footer,
.tailorpro-modal-footer,
.warehouse-modal-footer,
[class*="-modal-footer"] {
    align-items: center !important;
    background: #fff !important;
    border-top: 1px solid #e5e7eb !important;
    border-bottom-left-radius: var(--ui-radius-xl, 4px) !important;
    border-bottom-right-radius: var(--ui-radius-xl, 4px) !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.75rem !important;
    justify-content: flex-end !important;
    padding: 0.85rem 1.25rem !important;
    text-align: right !important;
}

.modal .modal-footer .btn,
.modal .modal-footer .tw-dw-btn,
.modal .modal-footer .au-button,
.modal .modal-footer button,
.modal .modal-footer input[type="submit"],
.modal-dialog .modal-footer .btn,
.modal-dialog .modal-footer .tw-dw-btn,
.modal-dialog .modal-footer .au-button,
.modal-dialog .modal-footer button,
.modal-dialog .modal-footer input[type="submit"],
.au-modal__footer .btn,
.au-modal__footer .tw-dw-btn,
.au-modal__footer .au-button,
.au-modal__footer button,
.au-modal__footer input[type="submit"],
[class*="-modal-footer"] .btn,
[class*="-modal-footer"] .tw-dw-btn,
[class*="-modal-footer"] .au-button,
[class*="-modal-footer"] button,
[class*="-modal-footer"] input[type="submit"] {
    align-items: center !important;
    border: 0 !important;
    border-radius: var(--ui-radius-xl, 4px) !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    float: none !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    height: 38px !important;
    justify-content: center !important;
    line-height: 1 !important;
    margin: 0 !important;
    min-height: 38px !important;
    min-width: 96px !important;
    padding: 0 1.25rem !important;
    position: static !important;
    text-align: center !important;
    transform: none !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
    width: auto !important;
}

.modal .modal-footer .btn-default,
.modal .modal-footer .btn-secondary,
.modal .modal-footer .tw-dw-btn-neutral,
.modal .modal-footer .tw-dw-btn-secondary,
.modal .modal-footer .au-button--secondary,
.modal .modal-footer .global-close-button,
.modal .modal-footer [data-vdismiss],
.modal .modal-footer [data-dismiss="modal"],
.modal .modal-footer [data-repair-modal-close],
.modal-dialog .modal-footer .btn-default,
.modal-dialog .modal-footer .btn-secondary,
.modal-dialog .modal-footer .tw-dw-btn-neutral,
.modal-dialog .modal-footer .tw-dw-btn-secondary,
.modal-dialog .modal-footer .au-button--secondary,
.modal-dialog .modal-footer .global-close-button,
.modal-dialog .modal-footer [data-vdismiss],
.modal-dialog .modal-footer [data-dismiss="modal"],
.modal-dialog .modal-footer [data-repair-modal-close],
.au-modal__footer .btn-default,
.au-modal__footer .btn-secondary,
.au-modal__footer .tw-dw-btn-neutral,
.au-modal__footer .tw-dw-btn-secondary,
.au-modal__footer .au-button--secondary,
.au-modal__footer .global-close-button,
.au-modal__footer [data-vdismiss],
.au-modal__footer [data-dismiss="modal"],
[class*="-modal-footer"] .btn-default,
[class*="-modal-footer"] .btn-secondary,
[class*="-modal-footer"] .tw-dw-btn-neutral,
[class*="-modal-footer"] .tw-dw-btn-secondary,
[class*="-modal-footer"] .au-button--secondary,
[class*="-modal-footer"] .global-close-button,
[class*="-modal-footer"] [data-vdismiss],
[class*="-modal-footer"] [data-dismiss="modal"],
[class*="-modal-footer"] [data-repair-modal-close],
[class*="-modal-footer"] [class*="-modal-close"] {
    background: #2f3a4a !important;
    background-image: none !important;
    color: #fff !important;
    order: 2 !important;
}

.modal .modal-footer button[type="submit"],
.modal .modal-footer input[type="submit"],
.modal .modal-footer .btn-primary,
.modal .modal-footer .btn-success,
.modal .modal-footer .tw-dw-btn-primary,
.modal .modal-footer .tw-dw-btn-success,
.modal .modal-footer .au-button--primary,
.modal .modal-footer .global-save-button,
.modal-dialog .modal-footer button[type="submit"],
.modal-dialog .modal-footer input[type="submit"],
.modal-dialog .modal-footer .btn-primary,
.modal-dialog .modal-footer .btn-success,
.modal-dialog .modal-footer .tw-dw-btn-primary,
.modal-dialog .modal-footer .tw-dw-btn-success,
.modal-dialog .modal-footer .au-button--primary,
.modal-dialog .modal-footer .global-save-button,
.au-modal__footer button[type="submit"],
.au-modal__footer input[type="submit"],
.au-modal__footer .btn-primary,
.au-modal__footer .btn-success,
.au-modal__footer .tw-dw-btn-primary,
.au-modal__footer .tw-dw-btn-success,
.au-modal__footer .au-button--primary,
.au-modal__footer .global-save-button,
[class*="-modal-footer"] button[type="submit"],
[class*="-modal-footer"] input[type="submit"],
[class*="-modal-footer"] .btn-primary,
[class*="-modal-footer"] .btn-success,
[class*="-modal-footer"] .tw-dw-btn-primary,
[class*="-modal-footer"] .tw-dw-btn-success,
[class*="-modal-footer"] .au-button--primary,
[class*="-modal-footer"] .global-save-button {
    background: var(--global-save-button-green, #16a34a) !important;
    background-image: none !important;
    color: #fff !important;
    order: 1 !important;
}

.modal .modal-footer button[type="submit"]:hover,
.modal .modal-footer input[type="submit"]:hover,
.modal .modal-footer .btn-primary:hover,
.modal .modal-footer .btn-success:hover,
.modal .modal-footer .tw-dw-btn-primary:hover,
.modal .modal-footer .tw-dw-btn-success:hover,
.modal .modal-footer .au-button--primary:hover,
.modal .modal-footer .global-save-button:hover,
.au-modal__footer button[type="submit"]:hover,
.au-modal__footer input[type="submit"]:hover,
.au-modal__footer .btn-primary:hover,
.au-modal__footer .tw-dw-btn-primary:hover,
.au-modal__footer .global-save-button:hover,
[class*="-modal-footer"] button[type="submit"]:hover,
[class*="-modal-footer"] input[type="submit"]:hover,
[class*="-modal-footer"] .btn-primary:hover,
[class*="-modal-footer"] .tw-dw-btn-primary:hover,
[class*="-modal-footer"] .global-save-button:hover {
    background: var(--global-save-button-green-hover, #15803d) !important;
    color: #fff !important;
}

.modal .modal-footer .btn-danger,
.modal .modal-footer .tw-dw-btn-error,
.modal-dialog .modal-footer .btn-danger,
.modal-dialog .modal-footer .tw-dw-btn-error,
.au-modal__footer .btn-danger,
.au-modal__footer .tw-dw-btn-error,
[class*="-modal-footer"] .btn-danger,
[class*="-modal-footer"] .tw-dw-btn-error {
    background: #dc2626 !important;
    color: #fff !important;
}

.modal .modal-footer button i,
.modal .modal-footer button svg,
.modal .modal-footer input[type="submit"] i,
.modal .modal-footer input[type="submit"] svg,
.au-modal__footer button i,
.au-modal__footer button svg,
[class*="-modal-footer"] button i,
[class*="-modal-footer"] button svg {
    display: none !important;
}

@media (max-width: 767px) {
    .modal .modal-header,
    .modal-dialog .modal-header,
    .au-modal__header,
    [class*="-modal-header"] {
        min-height: 48px !important;
        padding: 0.7rem 1rem !important;
    }

    .modal .modal-body,
    .modal-dialog .modal-body,
    .au-modal__body,
    [class*="-modal-body"],
    .modal .modal-footer,
    .modal-dialog .modal-footer,
    .au-modal__footer,
    [class*="-modal-footer"] {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    .modal .modal-footer .btn,
    .modal .modal-footer .tw-dw-btn,
    .modal .modal-footer button,
    .au-modal__footer .btn,
    .au-modal__footer .tw-dw-btn,
    .au-modal__footer button,
    [class*="-modal-footer"] .btn,
    [class*="-modal-footer"] .tw-dw-btn,
    [class*="-modal-footer"] button {
        min-width: 96px !important;
    }
}

/* Final cascade lock: internal content section headers only. */
.content .au-card > .au-card__header,
.content .module-shared-widget .module-shared-widget-header,
.content .box-header.module-shared-widget-header,
.content .box.box-primary:not(.module-shared-filters):not(.report-filters-block):not(.modal) > .box-header,
.content .box-primary:not(.module-shared-filters):not(.report-filters-block):not(.modal) > .box-header,
.content .expense-card > .expense-card-header,
.content .clinic-card-header,
.content .gym-card-header,
.content .tailorpro-card-header,
.content .warehouse-card-header,
.content .orders-section-header,
.content .au-section-header {
    align-items: center !important;
    background: linear-gradient(135deg, var(--ui-brand-start, #0ea5e9) 0%, var(--ui-brand-end, #0369a1) 100%) !important;
    border: 0 !important;
    color: #fff !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.75rem !important;
    justify-content: space-between !important;
    min-height: 56px !important;
    padding: 0.85rem 1.5rem !important;
}

.content .au-card > .au-card__header *,
.content .module-shared-widget .module-shared-widget-header *,
.content .box-header.module-shared-widget-header *,
.content .box.box-primary:not(.module-shared-filters):not(.report-filters-block):not(.modal) > .box-header *,
.content .box-primary:not(.module-shared-filters):not(.report-filters-block):not(.modal) > .box-header *,
.content .expense-card > .expense-card-header *,
.content .clinic-card-header *,
.content .gym-card-header *,
.content .tailorpro-card-header *,
.content .warehouse-card-header *,
.content .orders-section-header *,
.content .au-section-header * {
    color: #fff !important;
}

.content .au-card > .au-card__header .au-card__actions,
.content .au-card > .au-card__header .au-section-actions,
.content .au-card > .au-card__header > a,
.content .au-card > .au-card__header > button,
.content .module-shared-widget .module-shared-widget-header .box-tools,
.content .box-header.module-shared-widget-header .box-tools,
.content .box.box-primary:not(.module-shared-filters):not(.report-filters-block):not(.modal) > .box-header .box-tools,
.content .box-primary:not(.module-shared-filters):not(.report-filters-block):not(.modal) > .box-header .box-tools,
.content .au-section-header .section-actions,
.content .au-section-header .au-section-actions {
    align-items: center !important;
    display: inline-flex !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    justify-content: flex-end !important;
    margin-left: auto !important;
}

.content .au-card > .au-card__header .au-button,
.content .au-card > .au-card__header .btn,
.content .au-card > .au-card__header .btn-modal,
.content .au-card > .au-card__header .tw-dw-btn,
.content .module-shared-widget .module-shared-widget-header .btn,
.content .module-shared-widget .module-shared-widget-header .btn-modal,
.content .module-shared-widget .module-shared-widget-header .tw-dw-btn,
.content .box-header.module-shared-widget-header .btn,
.content .box-header.module-shared-widget-header .btn-modal,
.content .box-header.module-shared-widget-header .tw-dw-btn,
.content .box.box-primary:not(.module-shared-filters):not(.report-filters-block):not(.modal) > .box-header .btn,
.content .box.box-primary:not(.module-shared-filters):not(.report-filters-block):not(.modal) > .box-header .btn-modal,
.content .box.box-primary:not(.module-shared-filters):not(.report-filters-block):not(.modal) > .box-header .tw-dw-btn,
.content .box-primary:not(.module-shared-filters):not(.report-filters-block):not(.modal) > .box-header .btn,
.content .box-primary:not(.module-shared-filters):not(.report-filters-block):not(.modal) > .box-header .btn-modal,
.content .box-primary:not(.module-shared-filters):not(.report-filters-block):not(.modal) > .box-header .tw-dw-btn,
.content .au-section-header .btn,
.content .au-section-header .btn-modal,
.content .au-section-header .tw-dw-btn {
    background: rgba(255, 255, 255, 0.16) !important;
    background-image: none !important;
    border: 1px solid rgba(255, 255, 255, 0.32) !important;
    box-shadow: none !important;
    color: #fff !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 6px 14px !important;
}

/* Status badges (.au-badge) sitting inside a colored gradient card header:
   the ".au-card__header *" rule above strips the badge's own semantic text
   color, leaving white text on the badge's pale success/warning/danger tint
   — nearly invisible, and the tint itself can clash with whichever business
   theme color the header gradient happens to be. Give header badges a
   neutral frosted chip (reads on any hue, matches the header buttons' own
   translucent treatment above) plus a small solid-color status dot so
   success/warning/danger stay distinguishable at a glance. */
.content .au-card > .au-card__header .au-badge {
    align-items: center !important;
    background: rgba(255, 255, 255, 0.22) !important;
    border: 1px solid rgba(255, 255, 255, 0.42) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18) !important;
    color: #fff !important;
    display: inline-flex !important;
    font-weight: 700 !important;
    gap: 0.4rem !important;
    letter-spacing: 0.01em !important;
    padding: 0.3rem 0.7rem !important;
}

.content .au-card > .au-card__header .au-badge::before {
    background: currentColor;
    border-radius: 999px;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6);
    content: "";
    flex: 0 0 auto;
    height: 0.45rem;
    width: 0.45rem;
}

.content .au-card > .au-card__header .au-badge--success::before { color: #34d399; }
.content .au-card > .au-card__header .au-badge--warning::before { color: #fbbf24; }
.content .au-card > .au-card__header .au-badge--danger::before { color: #f87171; }

/* Curved internal section cards: one shared card/header shape across old and new modules. */
.content .au-card,
.content .module-shared-widget,
.content .box.box-primary:not(.module-shared-filters):not(.report-filters-block):not(.modal),
.content .box-primary:not(.module-shared-filters):not(.report-filters-block):not(.modal),
.content .expense-card,
.content .clinic-card,
.content .gym-card,
.content .tailorpro-card,
.content .warehouse-card,
.content .orders-section {
    background: #fff !important;
    border: 1px solid var(--ui-surface-border, #e3e8ef) !important;
    border-radius: var(--au-section-card-radius, 10px) !important;
    box-shadow: var(--au-section-card-shadow, 0 2px 8px rgba(15, 23, 42, 0.10)) !important;
    overflow: hidden !important;
}

.content .au-card > .au-card__header,
.content .module-shared-widget .module-shared-widget-header,
.content .box-header.module-shared-widget-header,
.content .box.box-primary:not(.module-shared-filters):not(.report-filters-block):not(.modal) > .box-header,
.content .box-primary:not(.module-shared-filters):not(.report-filters-block):not(.modal) > .box-header,
.content .expense-card > .expense-card-header,
.content .clinic-card-header,
.content .gym-card-header,
.content .tailorpro-card-header,
.content .warehouse-card-header,
.content .orders-section-header,
.content .au-section-header {
    border-radius: var(--au-section-card-radius, 10px) var(--au-section-card-radius, 10px) 0 0 !important;
    min-height: 56px !important;
    padding: 0.85rem 1.5rem !important;
}

/* Variations page: DataTables injects Bootstrap rows; keep those rows from
   escaping the au-card body and creating a false footer scrollbar. */
.variation-tailwind-page .au-table-responsive,
.variation-tailwind-page .dataTables_wrapper {
    max-width: 100% !important;
}

.variation-tailwind-page .au-table-responsive {
    overflow-x: visible !important;
    padding-bottom: 0 !important;
}

.variation-tailwind-page .dataTables_wrapper > .row {
    align-items: center !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.75rem !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
}

.variation-tailwind-page .dataTables_wrapper > .row::before,
.variation-tailwind-page .dataTables_wrapper > .row::after {
    content: none !important;
    display: none !important;
}

.variation-tailwind-page .dataTables_wrapper > .row > [class*="col-"] {
    float: none !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: auto !important;
}

.variation-tailwind-page .dataTables_wrapper > .row > .col-sm-12 {
    flex: 1 0 100% !important;
    width: 100% !important;
}

.variation-tailwind-page .dataTables_wrapper table.dataTable {
    min-width: 0 !important;
    width: 100% !important;
}

.variation-tailwind-page .dataTables_wrapper .dataTables_filter {
    margin-left: auto !important;
    text-align: right !important;
}

@media (max-width: 767px) {
    .variation-tailwind-page .au-table-responsive {
        overflow-x: auto !important;
    }

    .variation-tailwind-page .dataTables_wrapper table.dataTable {
        min-width: 500px !important;
    }

    .variation-tailwind-page .dataTables_wrapper .dataTables_filter {
        margin-left: 0 !important;
        text-align: left !important;
        width: 100% !important;
    }
}

/* =====================================================================
   Sell listing DataTables ("List POS" and "All Sales") — column spacing
   Scoped via .sell-list-tailwind-page (resources/views/sell/index.blade.php,
   "All Sales") and .pos-list-tailwind-page (resources/views/sale_pos/index.blade.php,
   "List POS") — both wrap a #sell_table instance built from the same
   table/table-bordered/table-striped markup (sell/index.blade.php and
   sale_pos/partials/sales_table.blade.php respectively). Replaces that
   markup's bare default cell padding — cells previously had no declared
   padding at all (only .table>thead>tr>th border rules exist globally),
   which is why Action/Date/Invoice No. read as cramped. Column widths/
   order/DataTables behavior, sorting, filtering, pagination and the
   .btn-group/.dropdown-menu action-menu contract (frozen, see legacy
   raw-class parity block above) are untouched — this only adds breathing
   room.
   ===================================================================== */
.sell-list-tailwind-page table.table,
.pos-list-tailwind-page table.table {
    width: 100%;
    margin-bottom: 0;
    border-collapse: collapse;
}

.sell-list-tailwind-page table.table th,
.sell-list-tailwind-page table.table td,
.pos-list-tailwind-page table.table th,
.pos-list-tailwind-page table.table td {
    padding: 0.65rem 1rem;
    vertical-align: middle;
    font-size: 0.8125rem;
    color: #364152;
}

.sell-list-tailwind-page table.table thead th,
.pos-list-tailwind-page table.table thead th {
    background: #f8fafc;
    color: #364152;
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.025em;
    text-transform: uppercase;
    white-space: nowrap;
}

.sell-list-tailwind-page table.table-striped tbody tr:nth-of-type(odd),
.pos-list-tailwind-page table.table-striped tbody tr:nth-of-type(odd) {
    background: #f9fafb;
}

.sell-list-tailwind-page table.table th:nth-child(1),
.sell-list-tailwind-page table.table td:nth-child(1),
.pos-list-tailwind-page table.table th:nth-child(1),
.pos-list-tailwind-page table.table td:nth-child(1) {
    min-width: 120px;
}

.sell-list-tailwind-page table.table th:nth-child(2),
.sell-list-tailwind-page table.table td:nth-child(2),
.pos-list-tailwind-page table.table th:nth-child(2),
.pos-list-tailwind-page table.table td:nth-child(2) {
    min-width: 130px;
    white-space: nowrap;
}

.sell-list-tailwind-page table.table th:nth-child(3),
.sell-list-tailwind-page table.table td:nth-child(3),
.pos-list-tailwind-page table.table th:nth-child(3),
.pos-list-tailwind-page table.table td:nth-child(3) {
    min-width: 100px;
}

.sell-list-tailwind-page .btn-group,
.pos-list-tailwind-page .btn-group {
    margin: 0;
}

/* ── Global loading experience (layouts/partials/page_loader.blade.php) ──
   The configurable full-page overlay is the ONLY loading indicator shown.
   Every legacy in-page indicator is disabled globally here:
   - DataTables "Processing" box — covers every table, including inits that
     pass processing:true explicitly and the au-loading-dots default injected
     by resources/js/bootstrap.js (left in place; this rule is the kill switch)
   - Pace top progress bar + corner spinner — pace.min.js in vendor.js
     auto-starts on every AJAX request (hover prefetches, DataTable redraws)
   - Project module section overlays (showLoading in project.js) */
div.dataTables_processing,
.dataTables_wrapper .dataTables_processing,
.pace,
.pace .pace-progress,
.pace .pace-activity,
.project-loading-overlay {
    display: none !important;
}

/* =========================================================================
   POS SHELL — TAILWIND-ERA LAYOUT HOOKS + FULL-WIDTH FINALIZATION
   Phase 2 migration: the Bootstrap `.row.mb-12 > .col-md-12` shell grid in
   create.blade.php / edit.blade.php was replaced by these semantic, POS-only
   layout hooks. They are NOT Bootstrap aliases — they carry no Bootstrap base
   styles (no negative gutter, no float); they are simple full-width block
   wrappers around the flex `.pos-sale-layout`. The viewport-fit (lockscreen)
   and mobile rules earlier in this file now target these hooks directly.

   Because `.pos-shell-row` exists only on the POS sell screen, we can enforce
   full viewport width with no centered wrapper and no horizontal body scroll
   without affecting any other page.
   ========================================================================= */
.pos-shell-row { width: 100%; }
.pos-shell-col { width: 100%; max-width: 100%; }
.pos-actions-row { width: 100%; }

#scrollable-container > section.content:has(.pos-shell-row) {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    padding-top: 4px !important;
}
section.content > form:has(> .pos-shell-row) {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

.pos-header {
    padding-left: 8px !important;
    padding-right: 8px !important;
}

.pos-header .pos-header-bar {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.pos-form-actions {
    padding-left: 8px !important;
    padding-right: 8px !important;
}

/* The bottom action toolbar must wrap onto new lines, never overlap. */
.pos-form-actions > div,
.pos-form-actions .tw-flex-wrap {
    row-gap: 8px;
}

.tw-mx-3 {
    margin-left: .75rem;
    margin-right: .75rem;
}

@media (max-width: 767px) {
    .pos-header {
        padding-left: 0 !important;
        padding-right: 0 !important;
        overflow: visible;
    }

    .pos-header > .tw-flex {
        align-items: stretch !important;
        gap: .625rem;
        overflow: hidden;
    }

    .pos-header-more-toggle {
        display: inline-flex !important;
        flex: 0 0 38px;
        width: 38px;
        height: 38px;
        align-items: center;
        justify-content: center;
        margin-left: auto;
        border: 1px solid #e3e8ef;
        border-radius: 10px;
        background: #fff;
        color: #364152;
        box-shadow: 0 4px 12px rgba(17, 24, 39, .08);
        transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
    }

    .pos-header-more-toggle--open {
        border-color: rgba(100, 110, 228, .5);
        background: #f8f9ff;
        color: #4f46e5;
        box-shadow: 0 6px 16px rgba(79, 70, 229, .16);
    }

    .pos-header-more-toggle .hamburger {
        margin: 0 !important;
        font-size: 1rem;
        line-height: 1;
    }

    .pos-header-actions {
        display: flex !important;
        flex-direction: row !important;
        justify-content: flex-start !important;
        align-items: center !important;
        gap: .5rem !important;
        max-width: 100%;
        min-width: 0;
        max-height: 0;
        margin-top: 0;
        padding: 0 .75rem !important;
        opacity: 0;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        scroll-behavior: smooth;
        scroll-padding-inline: .75rem;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        scrollbar-color: rgba(100, 110, 228, .65) rgba(227, 232, 239, .9);
        scrollbar-width: thin;
        mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 26px), transparent 100%);
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18px, #000 calc(100% - 26px), transparent 100%);
        pointer-events: none;
        transform: translateY(-6px);
        transition: max-height .22s ease, margin-top .22s ease, padding-top .22s ease, padding-bottom .22s ease, opacity .18s ease, transform .22s ease;
    }

    .pos-header-actions--open {
        max-height: 60px;
        margin-top: .25rem;
        padding-top: .125rem !important;
        padding-bottom: .55rem !important;
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }

    .pos-header-actions::-webkit-scrollbar {
        height: 5px;
    }

    .pos-header-actions::-webkit-scrollbar-track {
        background: #e3e8ef !important;
        border-radius: 999px !important;
    }

    .pos-header-actions::-webkit-scrollbar-thumb {
        background: rgba(100, 110, 228, .72) !important;
        border: 0 !important;
        border-radius: 999px !important;
    }

    .pos-header-actions > a,
    .pos-header-actions > button {
        display: inline-flex !important;
        flex: 0 0 42px !important;
        width: 42px !important;
        min-width: 42px !important;
        max-width: 42px !important;
        height: 42px !important;
        min-height: 42px !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 10px !important;
        float: none !important;
        scroll-snap-align: start;
        white-space: nowrap;
    }

    .pos-header-actions > a > strong,
    .pos-header-actions > button > strong {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        margin: 0 !important;
        font-size: 0 !important;
        line-height: 1 !important;
    }

    .pos-header-actions > a > strong > i,
    .pos-header-actions > button > strong > i,
    .pos-header-actions > a > i,
    .pos-header-actions > button > i {
        margin: 0 !important;
        font-size: 1rem !important;
        line-height: 1 !important;
    }

    .pos-header-actions > a > strong > span,
    .pos-header-actions > button > strong > span {
        display: none !important;
    }
}

/* =========================================================================
   POS CATEGORY / BRAND PICKER DRAWERS — compact, responsive shared layer
   pos_sidebar.blade.php builds both drawers from `tw-w-[88vw]`, `sm:tw-w-1/2`,
   `tw-grid-cols-2`, `sm:tw-grid-cols-3`, `lg:tw-grid-cols-4` and `tw-w-25` —
   none of which exist in the pre-purged Tailwind build (see the "Tailwind
   JIT-purged build" note above), so neither drawer ever actually got a fixed
   width or a real column count; the brand list in particular fell back to a
   single stacked column. `.pos-picker-*` gives both drawers one true
   responsive CSS Grid, one compact card, and one panel width, so they read
   as the same component instead of two different-looking lists. */
.pos-picker-panel {
    width: min(94vw, 620px) !important;
    max-width: 94vw !important;
    padding: 1.25rem 1.5rem !important;
}

.pos-picker-panel__head {
    margin-bottom: 1.25rem !important;
    padding-bottom: .85rem;
    border-bottom: 1px solid var(--ui-surface-border, #e3e8ef);
}

.pos-picker-panel__head h3 {
    font-size: 1.05rem !important;
    letter-spacing: .01em;
}

.pos-picker-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)) !important;
    /* `.pos-picker-grid` is itself the flex child of a column flex box
       (.tw-dw-menu) with only ~4-6 short rows of content, but CSS Grid's
       default align-content/align-items is `stretch`: it was distributing
       all of the drawer's leftover vertical space across the `auto` row
       tracks, turning each button into a tall near-empty card. Pinning both
       to `start` keeps every row (and every item inside it) exactly as tall
       as its own content. */
    grid-auto-rows: min-content;
    align-content: start;
    align-items: start;
    gap: .5rem !important;
    margin-right: 0 !important;
}

/* The sub-category pane is a single child of .pos-picker-grid that itself
   wraps several .product_category cards. display:contents drops its own
   box so those cards flow into the parent grid directly, while the element
   stays in the DOM (its `hidden` toggle in pos.js keeps working unchanged). */
.pos-picker-grid > .all-sub-category {
    display: contents;
}

.pos-picker-card {
    position: relative;
}

/* One compact, button-shaped pick — not a tall padded card. The whole
   element is the click target pos.js already listens on (.main-category /
   .product_category / .product_brand); no separate "All" label needed. */
.pos-picker-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    min-height: 44px;
    padding: .5rem .65rem;
    border-radius: var(--ui-radius-xl, 4px);
    border: 1px solid var(--ui-surface-border, #e3e8ef);
    background: #fff;
    color: var(--ui-text-strong, #121926);
    text-align: center;
    cursor: pointer;
    user-select: none;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease, transform .08s ease;
}

.pos-picker-btn:hover {
    border-color: var(--ui-brand-start, #3b82f6);
    background: var(--ui-surface-muted, #f8fafc);
    box-shadow: 0 2px 6px var(--ui-brand-shadow, rgba(37, 99, 235, .16));
}

.pos-picker-btn:active {
    transform: scale(.96);
}

/* Marked by the presentation-only click listener in pos.js so the drawer
   still shows what's currently applied to the product grid. */
.pos-picker-btn.is-selected {
    border-color: var(--ui-brand-end, #1d4ed8);
    background: linear-gradient(135deg, var(--ui-brand-start, #3b82f6) 0%, var(--ui-brand-end, #1d4ed8) 100%);
    color: #fff;
    box-shadow: 0 2px 8px var(--ui-brand-shadow-strong, rgba(37, 99, 235, .28));
}

.pos-picker-btn__label {
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Categories with sub-categories reserve room on the right for the
   drill-down chevron so its label never sits under it. */
.pos-picker-card--has-sub .pos-picker-btn {
    padding-right: 1.75rem;
}

/* A sibling of .pos-picker-btn (not a descendant) on purpose: clicking it
   must not also fire the "select this category" click bound to .pos-picker-btn,
   and keeping them as siblings means it doesn't have to — no stopPropagation
   / extra JS wiring needed, the existing per-element listeners in pos.js
   just keep working unchanged. */
.pos-picker-btn__chevron {
    position: absolute;
    top: 50%;
    right: .3rem;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, .9);
    color: var(--ui-brand-end, #1d4ed8);
    box-shadow: 0 1px 3px rgba(15, 23, 42, .2);
    cursor: pointer;
    transition: background-color .15s ease, transform .1s ease;
}

.pos-picker-btn__chevron:hover {
    background: #fff;
    transform: translateY(-50%) scale(1.08);
}

.pos-picker-btn__chevron svg {
    width: 14px;
    height: 14px;
}

/* Breadcrumb-style selection context appended to the existing blue Category
   / Brands toggle buttons — see markup at #category_toggle_crumb /
   #brand_toggle_crumb. Rendered `hidden` by default so it takes no space at
   all until pos.js fills it in and reveals it (no gap reserved, no layout
   shift): the toggle button looks 100% identical to before until a specific
   category/brand is picked. */
.pos-picker-toggle-crumb {
    max-width: 45%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
    opacity: .92;
}

/* =========================================================================
   POS MULTI PAY (#modal_payment) — modernized payable summary
   Replaces the legacy AdminLTE `box box-solid bg-orange` block (plain <hr>
   dividers, no radius/border) with a card that matches the shared au-modal
   design tokens (--ui-radius-xl / --ui-surface-border / --ui-brand-*) used
   everywhere else in the modal chrome. Purely visual: every id/class the
   JS in pos.js reads or writes (total_quantity, total_payable_span,
   total_paying, change_return_span + #change_return, balance_due +
   #in_balance_due) is unchanged, only the wrapper markup around them. */
.pos-pay-summary {
    background: var(--ui-surface-muted, #f8fafc);
    border: 1px solid var(--ui-surface-border, #e3e8ef);
    border-radius: var(--ui-radius-xl, 4px);
    padding: 1rem 1.1rem;
}

.pos-pay-summary__row {
    padding: .6rem 0;
}

.pos-pay-summary__row + .pos-pay-summary__row {
    border-top: 1px solid var(--ui-surface-border, #e3e8ef);
}

.pos-pay-summary__label {
    display: block;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #64748b;
    margin-bottom: .2rem;
}

.pos-pay-summary__value {
    display: block;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--ui-text-strong, #121926);
}

.pos-pay-summary__row--total .pos-pay-summary__value {
    color: var(--ui-brand-end, #1d4ed8);
}

/* =======================================================================
   MODAL SCROLL RESTORATION — post-migration global fix
   -----------------------------------------------------------------------
   Symptom: after the Bootstrap-to-au-modal migration, long modals lost
   internal scrolling and pinned action-buttons: Cash Register close
   summary, Add Contact (with More Informations expanded), long product/
   report edit modals — the footer either fell past the viewport or
   floated over blank space depending on the dialect.

   Root cause: only `.au-modal__footer` still carried `position: sticky`
   from the vendor stylesheet. Every other footer dialect (`.modal-footer`,
   `.contact-modal-footer`, `.repair-modal-footer`, ...) inherited nothing
   equivalent, so once the card grew past the viewport the footer rode
   off-screen. Meanwhile no dialect had bounded scrolling: the `overflow-y:
   auto` on `.au-modal__body` needed a bounded-height flex parent it never
   got, and even when the card was clamped, `flex: 1 1 auto; min-height: 0`
   on the body did NOT shrink in Chrome — the body kept its natural
   content height and the footer got clipped by the card's overflow.

   Fix: keep the overlay as the single scroll axis (it already is —
   `.au-modal-root { position: fixed; overflow-y: auto }` from vendor),
   let the card grow with its content, and make EVERY modal-footer
   dialect `position: sticky; bottom: 0` so the action buttons stay
   pinned to the viewport bottom while the overlay scrolls behind them.
   No card clamp, no flex tricks, no double scrollbars.
   ======================================================================= */

/* Make sure overlays that lack the au-modal-root class still scroll —
   pre-existing Bootstrap-style `.modal` overlays get the same behavior. */
.modal.in,
.modal.show,
.au-modal-root--open,
.au-modal-root.au-modal-root--open {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

/* Dialogs must not clip the sticky footer — the footer sticks within its
   nearest scrolling ancestor (the .au-modal-root overlay), so we keep the
   card `overflow: visible` and un-clamp it from the vendor's
   `max-height: calc(100dvh - 1.25rem)` + `display: flex` combo that
   would otherwise size the body via flex-shrink and hide overflow behind
   the sticky footer. Header still hides its own overflow via its own
   rules. */
.modal .modal-content,
.modal-dialog .modal-content,
body .modal .modal-dialog .modal-content,
.au-modal-root .au-modal,
.au-modal__dialog .au-modal,
.modal-dialog .au-modal,
.au-modal__content,
.repair-modal-panel,
.tailorpro-tailwind-modal .modal-content,
.tailorpro-modal-content,
.warehouse-tailwind-modal .modal-content,
.warehouse-modal-content,
.essentials-tailwind-module .modal-content,
[class*="-modal-panel"] {
    display: block !important;
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
}

/* Every modal footer dialect: pin to the viewport bottom via sticky.
   `position: sticky; bottom: 0` sticks within the overlay's scroll
   container, which is exactly what we want — the action buttons stay
   glued to the bottom of what the user sees, even as the card scrolls
   past. z-index sits above card decorations. */
.modal .modal-footer,
.modal-dialog .modal-footer,
body .modal .modal-dialog .modal-footer,
.au-modal__footer,
.repair-modal-footer,
.tailorpro-tailwind-modal .modal-footer,
.tailorpro-modal-footer,
.warehouse-tailwind-modal .modal-footer,
.warehouse-modal-footer,
.essentials-tailwind-module .modal-footer,
.contact-modal-footer,
.report-modal-footer,
[class*="-modal-footer"] {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 10 !important;
    background: #ffffff !important;
    /* Softly separate from the scrolling body so it reads as pinned */
    box-shadow: 0 -8px 16px -12px rgba(15, 23, 42, 0.25) !important;
}

/* Undo the earlier attempt's body-internal-scroll rules — the overlay
   owns scroll now, so the body just flows naturally. Leaving these here
   in undo form so a future dev editing this block sees the intent. */
.modal .modal-body,
.modal-dialog .modal-body,
.au-modal__body,
[class*="-modal-body"] {
    flex: unset !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

/* Mobile: overlay's own scrollbar is fine; nothing extra needed. */

/* -----------------------------------------------------------------------
   MODAL DIALOG WIDTH CAPS
   The vendor stylesheet sets `.modal-dialog { width: fit-content; max-width:
   calc(100vw - 2rem) }`. With a wide form inside (Add Contact, product
   edit), `fit-content` grows right up to that near-full-viewport cap and
   the modal reads as a full-bleed sheet instead of a centered dialog.
   Cap each size class to a concrete width so the modal stays centered
   with visible backdrop margins, matching the intended card feel.
   ======================================================================= */
@media (min-width: 768px) {
    .modal-dialog,
    .au-modal__dialog {
        width: auto !important;
        max-width: min(42rem, calc(100vw - 3rem)) !important;
    }
    .modal-dialog.modal-sm,
    .au-modal__dialog--sm {
        max-width: min(24rem, calc(100vw - 3rem)) !important;
    }
    .modal-dialog.modal-lg,
    .au-modal__dialog--lg {
        max-width: min(60rem, calc(100vw - 3rem)) !important;
        min-width: 0 !important;
    }
    .modal-dialog.modal-xl,
    .au-modal__dialog--xl {
        max-width: min(72rem, calc(100vw - 3rem)) !important;
        min-width: 0 !important;
    }
    /* "view-heavy" (invoice / receipt / show pages) still gets the wide
       treatment because those tables need the room. */
    .au-modal__dialog--view-heavy {
        max-width: min(80rem, calc(100vw - 3rem)) !important;
    }
}

/* -----------------------------------------------------------------------
   INLINE TOOLTIP ICONS
   `@show_tooltip` renders `<i class="fa fa-info-circle hover-q">` as a
   SIBLING that FOLLOWS the label. Modal/global form labels are
   `display: block`, so the icon is pushed onto its own second line under
   labels like "Total Card Slips:*".

   Fix: when a label is immediately followed by a tooltip icon, drop the
   label to `inline-block` so the icon can sit beside it. The input that
   follows is itself block-level (`.form-control`/`.au-input` are
   `display:block; width:100%`), so it still starts on its own line —
   the label keeps its stacked-above-input layout, only the icon moves
   up onto the label's row. */
.form-group > label:has(+ i.hover-q),
.form-group > label:has(+ i.fa-info-circle),
.au-field > label:has(+ i.hover-q),
.au-field > label:has(+ i.fa-info-circle),
label:has(+ i.hover-q),
label:has(+ i.fa-info-circle) {
    display: inline-block !important;
    width: auto !important;
    margin-bottom: 0.35rem !important;
    vertical-align: middle !important;
}
.form-group > label + i.hover-q,
.form-group > label + i.fa-info-circle,
.au-field > label + i.hover-q,
.au-field > label + i.fa-info-circle,
label + i.hover-q,
label + i.fa-info-circle {
    display: inline-block !important;
    vertical-align: middle !important;
    margin: 0 0 0.35rem 5px !important;
    line-height: 1;
    color: #0ea5e9;
    font-size: 0.95em;
    cursor: help;
}
/* Some legacy views put the icon BEFORE the label — keep those on one
   row as well. */
.form-group i.hover-q + label,
.au-field i.hover-q + label {
    display: inline-block !important;
    vertical-align: middle !important;
}

/* -----------------------------------------------------------------------
   REGISTER MODAL POLISH (Register Details + Close Register)
   Subtle typographic hierarchy, right-aligned amounts, cleaner
   dividers — no functional changes.
   ======================================================================= */
.au-modal-root .register-details-panel,
.au-modal-root .close-register-panel {
    font-size: 0.9rem;
    color: #1e293b;
}
.au-modal-root .register-details-panel .section-title,
.au-modal-root .close-register-panel .section-title {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #64748b;
    margin: 1.25rem 0 0.5rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid #e2e8f0;
}
.au-modal-root .register-details-panel .section-title:first-child,
.au-modal-root .close-register-panel .section-title:first-child { margin-top: 0; }
.au-modal-root .register-details-panel table.au-money,
.au-modal-root .close-register-panel table.au-money {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
    background: #fff;
}
.au-modal-root .register-details-panel table.au-money th,
.au-modal-root .register-details-panel table.au-money td,
.au-modal-root .close-register-panel table.au-money th,
.au-modal-root .close-register-panel table.au-money td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid #f1f5f9;
    font-size: 0.85rem;
    color: #1e293b;
    vertical-align: middle;
}
.au-modal-root .register-details-panel table.au-money thead th,
.au-modal-root .close-register-panel table.au-money thead th {
    background: #f8fafc;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #475569;
    border-bottom: 1px solid #e2e8f0;
}
.au-modal-root .register-details-panel table.au-money td:nth-child(n+2),
.au-modal-root .register-details-panel table.au-money th:nth-child(n+2),
.au-modal-root .close-register-panel table.au-money td:nth-child(n+2),
.au-modal-root .close-register-panel table.au-money th:nth-child(n+2) {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.au-modal-root .register-details-panel .totals-grid,
.au-modal-root .close-register-panel .totals-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.5rem;
    margin: 0.75rem 0;
}
.au-modal-root .register-details-panel .totals-grid > .tile,
.au-modal-root .close-register-panel .totals-grid > .tile {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.65rem 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.au-modal-root .register-details-panel .totals-grid > .tile > .label,
.au-modal-root .close-register-panel .totals-grid > .tile > .label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #64748b;
}
.au-modal-root .register-details-panel .totals-grid > .tile > .value,
.au-modal-root .close-register-panel .totals-grid > .tile > .value {
    font-size: 1.05rem;
    font-weight: 700;
    color: #0f172a;
    font-variant-numeric: tabular-nums;
}
.au-modal-root .register-details-panel .totals-grid > .tile.tile--positive > .value { color: #15803d; }
.au-modal-root .register-details-panel .totals-grid > .tile.tile--negative > .value { color: #b91c1c; }
.au-modal-root .close-register-panel .totals-grid > .tile.tile--positive > .value { color: #15803d; }
.au-modal-root .close-register-panel .totals-grid > .tile.tile--negative > .value { color: #b91c1c; }
.au-modal-root .register-details-panel .formula-summary,
.au-modal-root .close-register-panel .formula-summary {
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    padding: 0.6rem 0.85rem;
    font-size: 0.8rem;
    color: #475569;
    margin: 0.5rem 0 0;
    font-variant-numeric: tabular-nums;
}
.au-modal-root .register-details-panel .register-meta,
.au-modal-root .close-register-panel .register-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem;
    margin-top: 1rem;
}
.au-modal-root .register-details-panel .register-meta > div,
.au-modal-root .close-register-panel .register-meta > div {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 0.6rem 0.85rem;
    font-size: 0.85rem;
    color: #1e293b;
    line-height: 1.6;
}
.au-modal-root .register-details-panel .register-meta strong,
.au-modal-root .close-register-panel .register-meta strong {
    color: #64748b;
    font-weight: 600;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: block;
    margin-bottom: 0.15rem;
}

/* The print-only business header is hidden on screen and revealed by the
   print stylesheet below (flex row for A4, centered block for thermal). */
.au-print-header { display: none; }

/* -----------------------------------------------------------------------
   REGISTER PRINT LAYOUT — professional A4 portrait + 80mm thermal
   `.register-print-a4` and `.register-print-80mm` are toggled on the
   modal root by print_register_view_modal() (register_details.blade.php).
   The print stylesheet lives here so both the A4 report look and the
   thermal ticket look stay in sync with the on-screen polish above.
   ======================================================================= */
@media print {
    /* Kill on-screen chrome that never belongs in the printed doc.
       SPECIFICITY NOTE: the global modal skin above declares
       `body .modal .modal-dialog .modal-footer { display: flex !important }`
       — specificity (0,3,1). A plain `.no-print { display:none !important }`
       is only (0,1,0) and LOSES, which is why print output kept showing the
       modal header bar and the Print/Cancel footer. Repeating `[class]`
       pumps the selector to (0,4,2) without depending on DOM nesting, so it
       reliably beats the on-screen rule for any element tagged no-print. */
    body.au-modal-open { overflow: visible !important; }
    .au-modal-backdrop,
    .au-modal-root:not(.au-modal-root--open) { display: none !important; }
    html body .no-print[class][class][class],
    html body .register-print-a4 .modal-footer[class][class],
    html body .register-print-a4 .au-modal__footer[class][class],
    html body .register-print-80mm .modal-footer[class][class],
    html body .register-print-80mm .au-modal__footer[class][class],
    html body .register-print-a4 .modal-header[class][class],
    html body .register-print-80mm .modal-header[class][class] {
        display: none !important;
    }

    /* A4 shell */
    .register-print-a4 {
        position: absolute !important;
        inset: 0 !important;
        background: #ffffff !important;
        overflow: visible !important;
    }
    .register-print-a4 .modal-dialog,
    .register-print-a4 .au-modal__dialog {
        max-width: none !important;
        width: auto !important;
        margin: 0 !important;
    }
    .register-print-a4 .modal-content,
    .register-print-a4 .au-modal,
    .register-print-a4 .au-modal__content {
        border: 0 !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        background: #ffffff !important;
    }
    .register-print-a4 .au-print-header {
        display: flex !important;
        text-align: left !important;
        align-items: center !important;
        gap: 14pt !important;
        padding-bottom: 6pt !important;
        border-bottom: 1pt solid #000 !important;
        margin-bottom: 10pt !important;
    }
    .register-print-a4 .au-print-header img {
        max-height: 46pt !important;
        max-width: 120pt !important;
        object-fit: contain !important;
    }
    .register-print-a4 .au-print-header .business-name {
        font-size: 14pt !important;
        font-weight: 700 !important;
        color: #000 !important;
    }
    .register-print-a4 .au-print-header .business-meta {
        font-size: 9pt !important;
        color: #000 !important;
        line-height: 1.4 !important;
    }
    .register-print-a4 .register-details-panel,
    .register-print-a4 .close-register-panel {
        font-size: 10pt !important;
        color: #000 !important;
    }
    .register-print-a4 .section-title {
        font-size: 10pt !important;
        font-weight: 700 !important;
        color: #000 !important;
        margin: 8pt 0 4pt !important;
        border-bottom: 0.5pt solid #444 !important;
        padding: 0 0 2pt !important;
        letter-spacing: 0 !important;
        text-transform: uppercase !important;
    }
    .register-print-a4 table.au-money {
        width: 100% !important;
        border-collapse: collapse !important;
    }
    .register-print-a4 table.au-money th,
    .register-print-a4 table.au-money td {
        border: 0.5pt solid #444 !important;
        padding: 3pt 5pt !important;
        font-size: 9.5pt !important;
        color: #000 !important;
        background: #fff !important;
    }
    .register-print-a4 table.au-money thead th {
        background: #f2f2f2 !important;
    }
    .register-print-a4 .totals-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 4pt !important;
    }
    .register-print-a4 .totals-grid .tile {
        border: 0.5pt solid #444 !important;
        background: #fafafa !important;
        padding: 4pt 6pt !important;
        border-radius: 0 !important;
    }
    .register-print-a4 .totals-grid .tile .label {
        font-size: 8pt !important;
        color: #333 !important;
    }
    .register-print-a4 .totals-grid .tile .value {
        font-size: 11pt !important;
        color: #000 !important;
        font-weight: 700 !important;
    }
    .register-print-a4 .formula-summary {
        border: 0.5pt dashed #444 !important;
        background: #fff !important;
        color: #000 !important;
        font-size: 9pt !important;
        padding: 4pt 6pt !important;
        border-radius: 0 !important;
    }
    .register-print-a4 .register-meta {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 4pt !important;
        margin-top: 8pt !important;
    }
    .register-print-a4 .register-meta > div {
        border: 0.5pt solid #444 !important;
        background: #fff !important;
        border-radius: 0 !important;
        padding: 4pt 6pt !important;
        color: #000 !important;
    }

    /* 80mm thermal shell — narrow, monochrome, no borders */
    .register-print-80mm {
        position: absolute !important;
        inset: 0 !important;
        background: #ffffff !important;
        color: #000 !important;
        font-family: "Courier New", Consolas, monospace !important;
    }
    /* Fit the printable width instead of hardcoding 76mm. A fixed width
       overflows whenever the driver's printable area is narrower than the
       assumed 80mm − 4mm, which clipped the right-hand Expense column and
       left the receipt visually flush-left. 100% + auto margins means the
       @page margin alone decides the gutters, so they are always equal. */
    .register-print-80mm .modal-dialog,
    .register-print-80mm .au-modal__dialog {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }
    /* Nothing inside may exceed the paper width. */
    .register-print-80mm,
    .register-print-80mm * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .register-print-80mm .modal-body {
        padding: 0 !important;
        overflow: visible !important;
    }
    .register-print-80mm .modal-content,
    .register-print-80mm .au-modal,
    .register-print-80mm .au-modal__content {
        border: 0 !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        background: #fff !important;
    }
    .register-print-80mm .modal-header,
    .register-print-80mm .au-modal__header {
        background: #fff !important;
        color: #000 !important;
        padding: 2mm 0 !important;
        text-align: center !important;
        min-height: 0 !important;
        border-bottom: 1px dashed #000 !important;
    }
    .register-print-80mm .modal-header .modal-title,
    .register-print-80mm .au-modal__header .au-modal__title {
        color: #000 !important;
        font-size: 10pt !important;
        text-align: center !important;
        font-weight: 700 !important;
    }
    .register-print-80mm .au-print-header {
        display: block !important;
        text-align: center !important;
        padding: 2mm 0 !important;
        border-bottom: 1px dashed #000 !important;
    }
    .register-print-80mm .au-print-header img {
        max-height: 18mm !important;
        max-width: 60mm !important;
        margin: 0 auto 1mm !important;
        display: block !important;
    }
    .register-print-80mm .au-print-header .business-name {
        font-size: 10pt !important;
        font-weight: 700 !important;
    }
    .register-print-80mm .au-print-header .business-meta {
        font-size: 8pt !important;
        line-height: 1.3 !important;
    }
    /* Symmetric side padding; zero on top so the receipt starts at the
       very first printable line (thermal rolls have no top margin to
       spare). */
    .register-print-80mm .register-details-panel,
    .register-print-80mm .close-register-panel {
        font-size: 8pt !important;
        color: #000 !important;
        padding: 0 1mm 2mm !important;
    }
    .register-print-80mm .au-print-header {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    .register-print-80mm .section-title {
        font-size: 8pt !important;
        font-weight: 700 !important;
        color: #000 !important;
        margin: 3mm 0 1mm !important;
        border: 0 !important;
        border-bottom: 1px dashed #000 !important;
        padding: 0 0 0.5mm !important;
        letter-spacing: 0 !important;
    }
    /* Auto layout so each column keeps its natural proportion (a fixed
       layout would give the 3-column payment table and the 5-column
       products table the same useless equal split). What actually caused
       the original right-hand clipping was `white-space: nowrap` on the
       amount columns from the on-screen polish — with wrapping allowed the
       table's min-content width collapses and auto layout fits the roll. */
    .register-print-80mm table.au-money {
        width: 100% !important;
        max-width: 100% !important;
        border-collapse: collapse !important;
        table-layout: auto !important;
        min-width: 0 !important;
    }
    .register-print-80mm table.au-money th,
    .register-print-80mm table.au-money td {
        white-space: normal !important;
        overflow-wrap: break-word !important;
    }
    /* Amount cells must not break mid-figure ("RM 5" / "0.00"); they are
       short enough to stay on one line once the label column can wrap. */
    .register-print-80mm table.au-money td:nth-child(n + 2),
    .register-print-80mm table.au-money th:nth-child(n + 2) {
        overflow-wrap: normal !important;
        word-break: keep-all !important;
    }
    .register-print-80mm table.au-money th,
    .register-print-80mm table.au-money td {
        border: 0 !important;
        border-bottom: 1px dotted #999 !important;
        padding: 1px 2px !important;
        font-size: 8pt !important;
        color: #000 !important;
        background: #fff !important;
    }
    .register-print-80mm table.au-money thead th {
        border-bottom: 1px solid #000 !important;
        background: #fff !important;
    }
    .register-print-80mm .totals-grid {
        display: block !important;
        margin: 1mm 0 !important;
    }
    .register-print-80mm .totals-grid .tile {
        display: flex !important;
        justify-content: space-between !important;
        border: 0 !important;
        border-bottom: 1px dotted #999 !important;
        background: #fff !important;
        padding: 0.5mm 0 !important;
        border-radius: 0 !important;
    }
    .register-print-80mm .totals-grid .tile .label,
    .register-print-80mm .totals-grid .tile .value {
        display: inline !important;
        font-size: 8pt !important;
        color: #000 !important;
        font-weight: 400 !important;
    }
    .register-print-80mm .totals-grid .tile .value { font-weight: 700 !important; }
    .register-print-80mm .formula-summary {
        border: 0 !important;
        border-top: 1px dashed #000 !important;
        background: #fff !important;
        color: #000 !important;
        font-size: 7.5pt !important;
        padding: 1mm 0 !important;
        border-radius: 0 !important;
    }
    .register-print-80mm .register-meta {
        display: block !important;
        margin-top: 2mm !important;
    }
    .register-print-80mm .register-meta > div {
        border: 0 !important;
        border-top: 1px dashed #000 !important;
        background: #fff !important;
        padding: 1mm 0 !important;
        color: #000 !important;
        border-radius: 0 !important;
    }
    /* Monochrome guard for thermal — theme tints are invisible on
       thermal paper anyway. */
    .register-print-80mm * {
        color: #000 !important;
        background: #fff !important;
        text-shadow: none !important;
        box-shadow: none !important;
    }
}

/* -----------------------------------------------------------------------
   POS ▸ KITCHEN ORDERS POPUP
   The cashier's kitchen queue used to be the whole /modules/kitchen screen
   in an <iframe>, so the modal showed a page title, a page description, a
   "go back" button and a second Refresh control on top of the chrome the
   modal already provides. The popup now renders the order cards directly
   (resources/views/sale_pos/partials/kitchen_orders_modal.blade.php +
   js/pos-kitchen-orders.js) and reuses the kitchen screen's own card CSS
   (.kitchen-order-card et al) so the two views stay visually identical.
   The kitchen screen itself is untouched.
   ======================================================================= */
.pos-kitchen-modal .au-modal__body.pos-kitchen-modal__body {
    /* Slate ground so the white order cards read as cards, matching the
       kitchen screen's page background. */
    background: #f1f5f9 !important;
    padding: 1rem !important;
}

/* Refresh sits left, Close keeps the standard trailing position. */
.pos-kitchen-modal .pos-kitchen-modal__footer {
    justify-content: space-between;
}

.pos-kitchen-orders {
    position: relative;
    min-height: 12rem;
}

/* The card list is the popup's ONLY scroll region: the modal title and the
   sticky Refresh/Close footer stay put while a long queue scrolls. The
   height is an explicit max-height on the list itself, NOT flex-shrink on
   the modal body — see the MODAL SCROLL RESTORATION block above for why
   Chrome refuses to shrink a flex modal body. */
.pos-kitchen-orders__list {
    max-height: min(58vh, 34rem);
    overflow-x: hidden;
    overflow-y: auto;
    align-content: start;
    padding: 0.25rem;
}

.pos-kitchen-orders__list .kitchen-empty-state {
    grid-column: 1 / -1;
    min-height: 11rem;
    border-radius: 0.75rem;
}

/* The single action fills the card footer once Order details is dropped. */
.kitchen-order-actions--single {
    grid-template-columns: minmax(0, 1fr);
}

/* Per-card feedback while "Mark as cooked" is in flight / on success. */
.pos-kitchen-order--busy {
    opacity: 0.55;
    pointer-events: none;
}

.pos-kitchen-order--done {
    opacity: 0;
    transform: scale(0.97);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

/* First-paint and error states. */
.pos-kitchen-orders__state {
    display: flex;
    min-height: 12rem;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    border: 1px solid #e3e8ef;
    border-radius: 0.75rem;
    background: #fff;
    color: #697586;
    text-align: center;
}

.pos-kitchen-orders__state i {
    font-size: 1.75rem;
    color: #9aa4b2;
}

.pos-kitchen-orders__state p {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
}

.pos-kitchen-orders__state--error i {
    color: #e02424;
}

/* Refresh veil — keeps the current list readable underneath. */
.pos-kitchen-orders__veil {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem;
    background: rgba(241, 245, 249, 0.6);
    color: #364152;
    font-size: 1.5rem;
    z-index: 3;
}

/* The dialog is capped at 72rem, so the kitchen screen's 4-column layout at
   >=1440px would squeeze the cards inside the popup. Hold at 3. */
@media (min-width: 1440px) {
    .pos-kitchen-orders__list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .pos-kitchen-orders__list {
        max-height: 62vh;
    }
}