/*!*****************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/app/globals.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************/
/* Base look: src/styles/design.css (+ grid.css). Tailwind runs without preflight and only adds utilities.
   `base` is still needed: with preflight off it only declares the --tw-* defaults (translate, rotate, ring,
   shadow …) — without them any transform utility (-translate-x-1/2 that centres the shadcn dialogs) is void. */
*, ::before, ::after { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x:  ; --tw-pan-y:  ; --tw-pinch-zoom:  ; --tw-scroll-snap-strictness: proximity; --tw-gradient-from-position:  ; --tw-gradient-via-position:  ; --tw-gradient-to-position:  ; --tw-ordinal:  ; --tw-slashed-zero:  ; --tw-numeric-figure:  ; --tw-numeric-spacing:  ; --tw-numeric-fraction:  ; --tw-ring-inset:  ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur:  ; --tw-brightness:  ; --tw-contrast:  ; --tw-grayscale:  ; --tw-hue-rotate:  ; --tw-invert:  ; --tw-saturate:  ; --tw-sepia:  ; --tw-drop-shadow:  ; --tw-backdrop-blur:  ; --tw-backdrop-brightness:  ; --tw-backdrop-contrast:  ; --tw-backdrop-grayscale:  ; --tw-backdrop-hue-rotate:  ; --tw-backdrop-invert:  ; --tw-backdrop-opacity:  ; --tw-backdrop-saturate:  ; --tw-backdrop-sepia:  ; --tw-contain-size:  ; --tw-contain-layout:  ; --tw-contain-paint:  ; --tw-contain-style:  ; }
::backdrop { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x:  ; --tw-pan-y:  ; --tw-pinch-zoom:  ; --tw-scroll-snap-strictness: proximity; --tw-gradient-from-position:  ; --tw-gradient-via-position:  ; --tw-gradient-to-position:  ; --tw-ordinal:  ; --tw-slashed-zero:  ; --tw-numeric-figure:  ; --tw-numeric-spacing:  ; --tw-numeric-fraction:  ; --tw-ring-inset:  ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur:  ; --tw-brightness:  ; --tw-contrast:  ; --tw-grayscale:  ; --tw-hue-rotate:  ; --tw-invert:  ; --tw-saturate:  ; --tw-sepia:  ; --tw-drop-shadow:  ; --tw-backdrop-blur:  ; --tw-backdrop-brightness:  ; --tw-backdrop-contrast:  ; --tw-backdrop-grayscale:  ; --tw-backdrop-hue-rotate:  ; --tw-backdrop-invert:  ; --tw-backdrop-opacity:  ; --tw-backdrop-saturate:  ; --tw-backdrop-sepia:  ; --tw-contain-size:  ; --tw-contain-layout:  ; --tw-contain-paint:  ; --tw-contain-style:  ; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; }
.pointer-events-none { pointer-events: none; }
.pointer-events-auto { pointer-events: auto; }
.static { position: static; }
.fixed { position: fixed; }
.absolute { position: absolute; }
.relative { position: relative; }
.sticky { position: sticky; }
.inset-0 { inset: 0px; }
.inset-\[1px\] { inset: 1px; }
.inset-x-0 { left: 0px; right: 0px; }
.inset-y-0 { top: 0px; bottom: 0px; }
.bottom-0 { bottom: 0px; }
.bottom-\[16px\] { bottom: 16px; }
.end-0 { inset-inline-end: 0px; }
.end-\[4px\] { inset-inline-end: 4px; }
.left-0 { left: 0px; }
.left-\[10px\] { left: 10px; }
.left-\[2px\] { left: 2px; }
.right-\[12px\] { right: 12px; }
.right-\[4px\] { right: 4px; }
.right-\[8px\] { right: 8px; }
.start-\[10px\] { inset-inline-start: 10px; }
.top-0 { top: 0px; }
.top-1\/2 { top: 50%; }
.top-\[10vh\] { top: 10vh; }
.top-\[14px\] { top: 14px; }
.top-\[18vh\] { top: 18vh; }
.top-\[2px\] { top: 2px; }
.top-\[60\%\] { top: 60%; }
.top-\[6px\] { top: 6px; }
.top-\[6vh\] { top: 6vh; }
.top-\[8px\] { top: 8px; }
.top-full { top: 100%; }
.top-px { top: 1px; }
.isolate { isolation: isolate; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-\[1040\] { z-index: 1040; }
.z-\[1050\] { z-index: 1050; }
.z-\[1060\] { z-index: 1060; }
.z-\[1070\] { z-index: 1070; }
.z-\[1\] { z-index: 1; }
.z-\[40\] { z-index: 40; }
.z-\[5\] { z-index: 5; }
.z-\[60\] { z-index: 60; }
.m-0 { margin: 0px; }
.-mx-\[4px\] { margin-left: -4px; margin-right: -4px; }
.-mx-\[6px\] { margin-left: -6px; margin-right: -6px; }
.mx-\[8px\] { margin-left: 8px; margin-right: 8px; }
.mx-auto { margin-left: auto; margin-right: auto; }
.my-\[10px\] { margin-top: 10px; margin-bottom: 10px; }
.my-\[4px\] { margin-top: 4px; margin-bottom: 4px; }
.my-\[8px\] { margin-top: 8px; margin-bottom: 8px; }
.my-auto { margin-top: auto; margin-bottom: auto; }
.-ml-px { margin-left: -1px; }
.mb-0 { margin-bottom: 0px; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-5 { margin-bottom: 1.25rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-\[10px\] { margin-bottom: 10px; }
.mb-\[12px\] { margin-bottom: 12px; }
.mb-\[3px\] { margin-bottom: 3px; }
.mb-\[4px\] { margin-bottom: 4px; }
.mb-\[8px\] { margin-bottom: 8px; }
.ml-2 { margin-left: 0.5rem; }
.ml-4 { margin-left: 1rem; }
.ml-\[15px\] { margin-left: 15px; }
.ml-\[4px\] { margin-left: 4px; }
.ml-\[6px\] { margin-left: 6px; }
.ml-auto { margin-left: auto; }
.ms-\[7px\] { margin-inline-start: 7px; }
.ms-auto { margin-inline-start: auto; }
.mt-0 { margin-top: 0px; }
.mt-1 { margin-top: 0.25rem; }
.mt-16 { margin-top: 4rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-5 { margin-top: 1.25rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-\[12px\] { margin-top: 12px; }
.mt-\[1px\] { margin-top: 1px; }
.mt-\[2px\] { margin-top: 2px; }
.mt-\[3px\] { margin-top: 3px; }
.mt-\[4px\] { margin-top: 4px; }
.mt-\[6px\] { margin-top: 6px; }
.mt-\[8px\] { margin-top: 8px; }
.mt-auto { margin-top: auto; }
.block { display: block; }
.inline-block { display: inline-block; }
.inline { display: inline; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.table { display: table; }
.table-caption { display: table-caption; }
.table-cell { display: table-cell; }
.table-row { display: table-row; }
.\!grid { display: grid !important; }
.grid { display: grid; }
.inline-grid { display: inline-grid; }
.contents { display: contents; }
.hidden { display: none; }
.aspect-square { aspect-ratio: 1 / 1; }
.size-\[10px\] { width: 10px; height: 10px; }
.size-\[12px\] { width: 12px; height: 12px; }
.size-\[14px\] { width: 14px; height: 14px; }
.size-\[15px\] { width: 15px; height: 15px; }
.size-\[16px\] { width: 16px; height: 16px; }
.size-\[18px\] { width: 18px; height: 18px; }
.size-\[28px\] { width: 28px; height: 28px; }
.size-\[32px\] { width: 32px; height: 32px; }
.size-\[40px\] { width: 40px; height: 40px; }
.size-\[8px\] { width: 8px; height: 8px; }
.size-full { width: 100%; height: 100%; }
.h-\[1\.25em\] { height: 1.25em; }
.h-\[12px\] { height: 12px; }
.h-\[16px\] { height: 16px; }
.h-\[2\.2px\] { height: 2.2px; }
.h-\[20px\] { height: 20px; }
.h-\[22px\] { height: 22px; }
.h-\[24px\] { height: 24px; }
.h-\[28px\] { height: 28px; }
.h-\[29px\] { height: 29px; }
.h-\[30px\] { height: 30px; }
.h-\[32px\] { height: 32px; }
.h-\[34px\] { height: 34px; }
.h-\[36px\] { height: 36px; }
.h-\[40px\] { height: 40px; }
.h-\[44px\] { height: 44px; }
.h-\[48px\] { height: 48px; }
.h-\[66px\] { height: 66px; }
.h-\[6px\] { height: 6px; }
.h-\[var\(--radix-navigation-menu-viewport-height\)\] { height: var(--radix-navigation-menu-viewport-height); }
.h-auto { height: auto; }
.h-fit { height: -moz-fit-content; height: fit-content; }
.h-full { height: 100%; }
.h-px { height: 1px; }
.h-svh { height: 100svh; }
.max-h-\[80vh\] { max-height: 80vh; }
.max-h-\[86vh\] { max-height: 86vh; }
.max-h-\[min\(420px\2c 60vh\)\] { max-height: min(420px, 60vh); }
.max-h-\[var\(--radix-dropdown-menu-content-available-height\)\] { max-height: var(--radix-dropdown-menu-content-available-height); }
.min-h-0 { min-height: 0px; }
.min-h-\[34px\] { min-height: 34px; }
.min-h-\[38px\] { min-height: 38px; }
.min-h-\[44px\] { min-height: 44px; }
.min-h-\[56px\] { min-height: 56px; }
.min-h-\[64px\] { min-height: 64px; }
.min-h-svh { min-height: 100svh; }
.w-24 { width: 6rem; }
.w-40 { width: 10rem; }
.w-72 { width: 18rem; }
.w-80 { width: 20rem; }
.w-\[110px\] { width: 110px; }
.w-\[120px\] { width: 120px; }
.w-\[130px\] { width: 130px; }
.w-\[140px\] { width: 140px; }
.w-\[150px\] { width: 150px; }
.w-\[16px\] { width: 16px; }
.w-\[170px\] { width: 170px; }
.w-\[20px\] { width: 20px; }
.w-\[230px\] { width: 230px; }
.w-\[24px\] { width: 24px; }
.w-\[256px\] { width: 256px; }
.w-\[28px\] { width: 28px; }
.w-\[29px\] { width: 29px; }
.w-\[32px\] { width: 32px; }
.w-\[360px\] { width: 360px; }
.w-\[40px\] { width: 40px; }
.w-\[48px\] { width: 48px; }
.w-\[64px\] { width: 64px; }
.w-\[84px\] { width: 84px; }
.w-\[8px\] { width: 8px; }
.w-\[90px\] { width: 90px; }
.w-\[96px\] { width: 96px; }
.w-\[9px\] { width: 9px; }
.w-\[calc\(100vw-16px\)\] { width: calc(100vw - 16px); }
.w-\[var\(--sidebar-width\)\] { width: var(--sidebar-width); }
.w-auto { width: auto; }
.w-fit { width: -moz-fit-content; width: fit-content; }
.w-full { width: 100%; }
.w-max { width: -moz-max-content; width: max-content; }
.w-px { width: 1px; }
.min-w-0 { min-width: 0px; }
.min-w-\[120px\] { min-width: 120px; }
.min-w-\[140px\] { min-width: 140px; }
.min-w-\[16rem\] { min-width: 16rem; }
.min-w-\[192px\] { min-width: 192px; }
.min-w-\[20px\] { min-width: 20px; }
.min-w-\[220px\] { min-width: 220px; }
.min-w-\[560px\] { min-width: 560px; }
.min-w-\[780px\] { min-width: 780px; }
.\!max-w-\[86vw\] { max-width: 86vw !important; }
.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-4xl { max-width: 56rem; }
.max-w-\[1080px\] { max-width: 1080px; }
.max-w-\[280px\] { max-width: 280px; }
.max-w-\[360px\] { max-width: 360px; }
.max-w-\[400px\] { max-width: 400px; }
.max-w-\[512px\] { max-width: 512px; }
.max-w-\[560px\] { max-width: 560px; }
.max-w-\[600px\] { max-width: 600px; }
.max-w-\[720px\] { max-width: 720px; }
.max-w-\[920px\] { max-width: 920px; }
.max-w-\[calc\(100\%\+0\.5rem\)\] { max-width: calc(100% + 0.5rem); }
.max-w-\[calc\(100vw-16px\)\] { max-width: calc(100vw - 16px); }
.max-w-\[var\(--skeleton-width\)\] { max-width: var(--skeleton-width); }
.max-w-full { max-width: 100%; }
.max-w-max { max-width: -moz-max-content; max-width: max-content; }
.max-w-md { max-width: 28rem; }
.flex-1 { flex: 1 1 0%; }
.shrink { flex-shrink: 1; }
.shrink-0 { flex-shrink: 0; }
.grow { flex-grow: 1; }
.table-fixed { table-layout: fixed; }
.caption-bottom { caption-side: bottom; }
.border-collapse { border-collapse: collapse; }
.origin-\[var\(--radix-tooltip-content-transform-origin\)\] { transform-origin: var(--radix-tooltip-content-transform-origin); }
.origin-left { transform-origin: left; }
.origin-top { transform-origin: top; }
.-translate-y-1\/2 { --tw-translate-y: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }
.translate-x-0 { --tw-translate-x: 0px; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }
.translate-x-1\/2 { --tw-translate-x: 50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }
.translate-x-\[18px\] { --tw-translate-x: 18px; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }
.translate-y-\[calc\(-50\%_-_2px\)\] { --tw-translate-y: calc(-50% - 2px); transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }
.-rotate-90 { --tw-rotate: -90deg; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }
.rotate-45 { --tw-rotate: 45deg; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }
.rotate-90 { --tw-rotate: 90deg; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }
.scale-100 { --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)); }
.scale-75 { --tw-scale-x: .75; --tw-scale-y: .75; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }
.transform { transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }
@keyframes pulse {
 50% { opacity: .5; } }
.animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.cursor-col-resize { cursor: col-resize; }
.cursor-pointer { cursor: pointer; }
.touch-none { touch-action: none; }
.select-none { -webkit-user-select: none; -moz-user-select: none; user-select: none; }
.resize-y { resize: vertical; }
.resize { resize: both; }
.list-none { list-style-type: none; }
.appearance-none { -webkit-appearance: none; -moz-appearance: none; appearance: none; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-\[16px_1fr\] { grid-template-columns: 16px 1fr; }
.grid-cols-\[1fr\] { grid-template-columns: 1fr; }
.grid-cols-\[1fr_auto\] { grid-template-columns: 1fr auto; }
.flex-row-reverse { flex-direction: row-reverse; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.place-items-center { place-items: center; }
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.items-center { align-items: center; }
.justify-end { justify-content: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-0 { gap: 0px; }
.gap-10 { gap: 2.5rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }
.gap-\[10px\] { gap: 10px; }
.gap-\[12px\] { gap: 12px; }
.gap-\[16px\] { gap: 16px; }
.gap-\[1px\] { gap: 1px; }
.gap-\[2px\] { gap: 2px; }
.gap-\[3px\] { gap: 3px; }
.gap-\[4px\] { gap: 4px; }
.gap-\[6px\] { gap: 6px; }
.gap-\[8px\] { gap: 8px; }
.gap-\[9px\] { gap: 9px; }
.gap-x-6 { -moz-column-gap: 1.5rem; column-gap: 1.5rem; }
.gap-x-\[10px\] { -moz-column-gap: 10px; column-gap: 10px; }
.gap-x-\[12px\] { -moz-column-gap: 12px; column-gap: 12px; }
.gap-x-\[16px\] { -moz-column-gap: 16px; column-gap: 16px; }
.gap-x-\[6px\] { -moz-column-gap: 6px; column-gap: 6px; }
.gap-y-1 { row-gap: 0.25rem; }
.gap-y-\[10px\] { row-gap: 10px; }
.gap-y-\[2px\] { row-gap: 2px; }
.gap-y-\[4px\] { row-gap: 4px; }
.gap-y-\[8px\] { row-gap: 8px; }
.space-y-3 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.75rem * var(--tw-space-y-reverse)); }
.overflow-auto { overflow: auto; }
.overflow-hidden { overflow: hidden; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }
.overflow-x-hidden { overflow-x: hidden; }
.overscroll-x-contain { overscroll-behavior-x: contain; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.whitespace-nowrap { white-space: nowrap; }
.rounded { border-radius: 0.25rem; }
.rounded-\[16px\] { border-radius: 16px; }
.rounded-\[4px\] { border-radius: 4px; }
.rounded-\[5px\] { border-radius: 5px; }
.rounded-\[8px\] { border-radius: 8px; }
.rounded-full { border-radius: 9999px; }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-md { border-radius: var(--radius); }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-r-none { border-top-right-radius: 0px; border-bottom-right-radius: 0px; }
.border { border-width: 1px; }
.border-0 { border-width: 0px; }
.border-b { border-bottom-width: 1px; }
.border-b-2 { border-bottom-width: 2px; }
.border-l { border-left-width: 1px; }
.border-s { border-inline-start-width: 1px; }
.border-t { border-top-width: 1px; }
.border-solid { border-style: solid; }
.border-\[var\(--border\)\] { border-color: var(--border); }
.border-\[var\(--border-strong\)\] { border-color: var(--border-strong); }
.border-\[var\(--danger-100\)\] { border-color: var(--danger-100); }
.border-\[var\(--hairline\)\] { border-color: var(--hairline); }
.border-\[var\(--info-100\)\] { border-color: var(--info-100); }
.border-\[var\(--success-100\)\] { border-color: var(--success-100); }
.border-\[var\(--text-2\)\] { border-color: var(--text-2); }
.border-\[var\(--warning-100\)\] { border-color: var(--warning-100); }
.border-\[var\(--warning-100\2c \#fde68a\)\] { border-color: var(--warning-100,#fde68a); }
.border-border { border-color: var(--border); }
.border-ink { --tw-border-opacity: 1; border-color: rgb(30 42 53 / var(--tw-border-opacity, 1)); }
.border-input { border-color: var(--border-strong); }
.border-pine-900 { --tw-border-opacity: 1; border-color: rgb(23 77 129 / var(--tw-border-opacity, 1)); }
.border-primary { border-color: var(--primary); }
.border-rule { --tw-border-opacity: 1; border-color: rgb(214 219 224 / var(--tw-border-opacity, 1)); }
.border-sidebar-border { border-color: var(--sidebar-border); }
.border-transparent { border-color: transparent; }
.bg-\[var\(--accent\)\] { background-color: var(--accent); }
.bg-\[var\(--background\)\] { background-color: var(--background); }
.bg-\[var\(--danger-50\)\] { background-color: var(--danger-50); }
.bg-\[var\(--danger-tint\)\] { background-color: var(--danger-tint); }
.bg-\[var\(--info-50\)\] { background-color: var(--info-50); }
.bg-\[var\(--input\)\] { background-color: var(--input); }
.bg-\[var\(--primary-50\2c rgba\(20\2c 71\2c 230\2c \.05\)\)\] { background-color: var(--primary-50,rgba(20,71,230,.05)); }
.bg-\[var\(--sidebar\)\] { background-color: var(--sidebar); }
.bg-\[var\(--success-50\)\] { background-color: var(--success-50); }
.bg-\[var\(--surface\)\] { background-color: var(--surface); }
.bg-\[var\(--surface-2\)\] { background-color: var(--surface-2); }
.bg-\[var\(--text\)\] { background-color: var(--text); }
.bg-\[var\(--warning-50\)\] { background-color: var(--warning-50); }
.bg-\[var\(--warning-50\2c \#fffbeb\)\] { background-color: var(--warning-50,#fffbeb); }
.bg-background { background-color: var(--bg); }
.bg-black\/50 { background-color: rgb(0 0 0 / 0.5); }
.bg-border { background-color: var(--border); }
.bg-card { background-color: var(--surface); }
.bg-current { background-color: currentColor; }
.bg-foreground { background-color: var(--text); }
.bg-pine-50\/60 { background-color: rgb(237 243 249 / 0.6); }
.bg-popover { background-color: var(--surface); }
.bg-primary { background-color: var(--primary); }
.bg-secondary { background-color: var(--surface-2); }
.bg-sidebar { background-color: var(--sidebar); }
.bg-sidebar-border { background-color: var(--sidebar-border); }
.bg-transparent { background-color: transparent; }
.fill-foreground { fill: var(--text); }
.p-0 { padding: 0px; }
.p-3 { padding: 0.75rem; }
.p-4 { padding: 1rem; }
.p-8 { padding: 2rem; }
.p-\[12px\] { padding: 12px; }
.p-\[14px\] { padding: 14px; }
.p-\[20px\] { padding: 20px; }
.p-\[4px\] { padding: 4px; }
.p-\[8px\] { padding: 8px; }
.px-0 { padding-left: 0px; padding-right: 0px; }
.px-\[10px\] { padding-left: 10px; padding-right: 10px; }
.px-\[12px\] { padding-left: 12px; padding-right: 12px; }
.px-\[14px\] { padding-left: 14px; padding-right: 14px; }
.px-\[16px\] { padding-left: 16px; padding-right: 16px; }
.px-\[20px\] { padding-left: 20px; padding-right: 20px; }
.px-\[24px\] { padding-left: 24px; padding-right: 24px; }
.px-\[4px\] { padding-left: 4px; padding-right: 4px; }
.px-\[6px\] { padding-left: 6px; padding-right: 6px; }
.px-\[7px\] { padding-left: 7px; padding-right: 7px; }
.px-\[8px\] { padding-left: 8px; padding-right: 8px; }
.px-\[9px\] { padding-left: 9px; padding-right: 9px; }
.py-0\.5 { padding-top: 0.125rem; padding-bottom: 0.125rem; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-24 { padding-top: 6rem; padding-bottom: 6rem; }
.py-\[10px\] { padding-top: 10px; padding-bottom: 10px; }
.py-\[12px\] { padding-top: 12px; padding-bottom: 12px; }
.py-\[16px\] { padding-top: 16px; padding-bottom: 16px; }
.py-\[1px\] { padding-top: 1px; padding-bottom: 1px; }
.py-\[20px\] { padding-top: 20px; padding-bottom: 20px; }
.py-\[2px\] { padding-top: 2px; padding-bottom: 2px; }
.py-\[3px\] { padding-top: 3px; padding-bottom: 3px; }
.py-\[4px\] { padding-top: 4px; padding-bottom: 4px; }
.py-\[5px\] { padding-top: 5px; padding-bottom: 5px; }
.py-\[64px\] { padding-top: 64px; padding-bottom: 64px; }
.py-\[6px\] { padding-top: 6px; padding-bottom: 6px; }
.py-\[7px\] { padding-top: 7px; padding-bottom: 7px; }
.py-\[8px\] { padding-top: 8px; padding-bottom: 8px; }
.pb-2 { padding-bottom: 0.5rem; }
.pb-3 { padding-bottom: 0.75rem; }
.pb-4 { padding-bottom: 1rem; }
.pb-\[12px\] { padding-bottom: 12px; }
.pb-\[4px\] { padding-bottom: 4px; }
.pb-\[56px\] { padding-bottom: 56px; }
.pb-\[8px\] { padding-bottom: 8px; }
.pe-0 { padding-inline-end: 0px; }
.pe-\[32px\] { padding-inline-end: 32px; }
.pe-\[4px\] { padding-inline-end: 4px; }
.pe-\[8px\] { padding-inline-end: 8px; }
.pl-3 { padding-left: 0.75rem; }
.pl-8 { padding-left: 2rem; }
.pl-\[32px\] { padding-left: 32px; }
.pl-\[6px\] { padding-left: 6px; }
.pr-0 { padding-right: 0px; }
.pr-\[40px\] { padding-right: 40px; }
.ps-\[12px\] { padding-inline-start: 12px; }
.ps-\[32px\] { padding-inline-start: 32px; }
.ps-\[8px\] { padding-inline-start: 8px; }
.pt-0 { padding-top: 0px; }
.pt-1 { padding-top: 0.25rem; }
.pt-\[12px\] { padding-top: 12px; }
.pt-\[6px\] { padding-top: 6px; }
.pt-\[8px\] { padding-top: 8px; }
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-start { text-align: start; }
.text-end { text-align: end; }
.align-middle { vertical-align: middle; }
.font-sans { font-family: var(--font); }
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
.text-\[0\.7rem\] { font-size: 0.7rem; }
.text-\[11\.5px\] { font-size: 11.5px; }
.text-\[11px\] { font-size: 11px; }
.text-\[12px\] { font-size: 12px; }
.text-\[13\.5px\] { font-size: 13.5px; }
.text-\[13px\] { font-size: 13px; }
.text-\[14px\] { font-size: 14px; }
.text-\[15px\] { font-size: 15px; }
.text-\[16px\] { font-size: 16px; }
.text-\[19px\] { font-size: 19px; }
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.text-xs { font-size: 0.75rem; line-height: 1rem; }
.font-bold { font-weight: 700; }
.font-medium { font-weight: 500; }
.font-normal { font-weight: 400; }
.font-semibold { font-weight: 600; }
.lowercase { text-transform: lowercase; }
.capitalize { text-transform: capitalize; }
.tabular-nums { --tw-numeric-spacing: tabular-nums; font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction); }
.leading-\[1\.35\] { line-height: 1.35; }
.leading-\[1\.3\] { line-height: 1.3; }
.leading-\[1\.45\] { line-height: 1.45; }
.leading-\[1\.4\] { line-height: 1.4; }
.leading-none { line-height: 1; }
.leading-tight { line-height: 1.25; }
.tracking-\[-0\.01em\] { letter-spacing: -0.01em; }
.tracking-\[0\.03em\] { letter-spacing: 0.03em; }
.tracking-wide { letter-spacing: 0.025em; }
.text-\[var\(--border-strong\)\] { color: var(--border-strong); }
.text-\[var\(--danger-text\)\] { color: var(--danger-text); }
.text-\[var\(--destructive\)\] { color: var(--destructive); }
.text-\[var\(--info-text\)\] { color: var(--info-text); }
.text-\[var\(--muted\)\] { color: var(--muted); }
.text-\[var\(--primary-foreground\)\] { color: var(--primary-foreground); }
.text-\[var\(--success-text\)\] { color: var(--success-text); }
.text-\[var\(--surface\)\] { color: var(--surface); }
.text-\[var\(--text\)\] { color: var(--text); }
.text-\[var\(--text-2\)\] { color: var(--text-2); }
.text-\[var\(--warning-text\)\] { color: var(--warning-text); }
.text-background { color: var(--bg); }
.text-brick { --tw-text-opacity: 1; color: rgb(192 57 43 / var(--tw-text-opacity, 1)); }
.text-card-foreground { color: var(--text); }
.text-destructive { color: var(--danger); }
.text-foreground { color: var(--text); }
.text-ink { --tw-text-opacity: 1; color: rgb(30 42 53 / var(--tw-text-opacity, 1)); }
.text-ink-faint { --tw-text-opacity: 1; color: rgb(97 108 119 / var(--tw-text-opacity, 1)); }
.text-ink-soft { --tw-text-opacity: 1; color: rgb(74 86 98 / var(--tw-text-opacity, 1)); }
.text-muted-foreground { color: var(--muted); }
.text-pine-900 { --tw-text-opacity: 1; color: rgb(23 77 129 / var(--tw-text-opacity, 1)); }
.text-pine-950 { --tw-text-opacity: 1; color: rgb(18 62 105 / var(--tw-text-opacity, 1)); }
.text-popover-foreground { color: var(--text); }
.text-primary { color: var(--primary); }
.text-sidebar-foreground { color: var(--sidebar-foreground); }
.underline { text-decoration-line: underline; }
.no-underline { text-decoration-line: none; }
.underline-offset-2 { text-underline-offset: 2px; }
.underline-offset-4 { text-underline-offset: 4px; }
.accent-\[var\(--primary\)\] { accent-color: var(--primary); }
.opacity-0 { opacity: 0; }
.opacity-100 { opacity: 1; }
.opacity-20 { opacity: 0.2; }
.opacity-40 { opacity: 0.4; }
.opacity-60 { opacity: 0.6; }
.opacity-70 { opacity: 0.7; }
.shadow { --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); }
.shadow-\[0_0_0_1px_var\(--sidebar-border\)\] { --tw-shadow: 0 0 0 1px var(--sidebar-border); --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); }
.shadow-\[0_1px_2px_-1px_rgba\(0\2c 0\2c 0\2c 0\.06\)\2c 0_2px_4px_0_rgba\(0\2c 0\2c 0\2c 0\.04\)\] { --tw-shadow: 0 1px 2px -1px rgba(0,0,0,0.06),0 2px 4px 0 rgba(0,0,0,0.04); --tw-shadow-colored: 0 1px 2px -1px var(--tw-shadow-color), 0 2px 4px 0 var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); }
.shadow-\[0_6px_10px_-8px_rgba\(0\2c 0\2c 0\2c 0\.35\)\] { --tw-shadow: 0 6px 10px -8px rgba(0,0,0,0.35); --tw-shadow-colored: 0 6px 10px -8px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); }
.shadow-\[0_8px_24px_rgba\(0\2c 0\2c 0\2c 0\.18\)\] { --tw-shadow: 0 8px 24px rgba(0,0,0,0.18); --tw-shadow-colored: 0 8px 24px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); }
.shadow-\[12px_0_10px_-10px_rgba\(0\2c 0\2c 0\2c 0\.12\)\] { --tw-shadow: 12px 0 10px -10px rgba(0,0,0,0.12); --tw-shadow-colored: 12px 0 10px -10px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); }
.shadow-lg { --tw-shadow: var(--shadow-xl); --tw-shadow-colored: var(--shadow-xl); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); }
.shadow-md { --tw-shadow: var(--shadow-lg); --tw-shadow-colored: var(--shadow-lg); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); }
.shadow-none { --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); }
.shadow-sm { --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); }
.outline-none { outline: 2px solid transparent; outline-offset: 2px; }
.outline { outline-style: solid; }
.ring { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); }
.ring-1 { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); }
.ring-\[var\(--hairline\)\] { --tw-ring-color: var(--hairline); }
.ring-sidebar-ring { --tw-ring-color: var(--sidebar-ring); }
.blur { --tw-blur: blur(8px); filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); }
.filter { filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); }
.backdrop-blur-\[2px\] { --tw-backdrop-blur: blur(2px); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); }
.transition { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.transition-\[border-color\2c box-shadow\] { transition-property: border-color,box-shadow; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.transition-\[border-color\] { transition-property: border-color; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.transition-\[color\2c opacity\] { transition-property: color,opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.transition-\[margin\2c opacity\] { transition-property: margin,opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.transition-\[opacity\2c scale\] { transition-property: opacity,scale; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.transition-\[transform\2c color\2c background-color\2c opacity\2c border-color\] { transition-property: transform,color,background-color,opacity,border-color; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.transition-\[width\2c height\2c padding\] { transition-property: width,height,padding; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.transition-\[width\] { transition-property: width; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.transition-all { transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.transition-colors { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.transition-none { transition-property: none; }
.transition-opacity { transition-property: opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.transition-shadow { transition-property: box-shadow; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.transition-transform { transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.duration-100 { transition-duration: 100ms; }
.duration-150 { transition-duration: 150ms; }
.duration-200 { transition-duration: 200ms; }
.duration-300 { transition-duration: 300ms; }
.ease-ledger { transition-timing-function: var(--ease); }
.ease-linear { transition-timing-function: linear; }
.ease-out { transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }
@keyframes enter {
 from { opacity: var(--tw-enter-opacity, 1); transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0)); } }
@keyframes exit {
 to { opacity: var(--tw-exit-opacity, 1); transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0)); } }
.duration-100 { animation-duration: 100ms; }
.duration-150 { animation-duration: 150ms; }
.duration-200 { animation-duration: 200ms; }
.duration-300 { animation-duration: 300ms; }
.ease-ledger { animation-timing-function: var(--ease); }
.ease-linear { animation-timing-function: linear; }
.ease-out { animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }
.running { animation-play-state: running; }

/* =====================================================================
   Legacy helpers (were public/css/styles.css + header.php inline styles)
   ===================================================================== */
.clear { clear: both; }
.float-left { float: left !important; }
.float-right { float: right !important; }
.margin-bottom { margin-bottom: 1em; }
.margin-top { margin-top: 1em; }
.padding-right { padding-right: 15px; }
.no-padding-right { padding-right: 0; }
.no-margin-bottom { margin-bottom: 0; }
.user { margin-top: 8px; margin-right: 10px; }
input.shipping { text-align: right; }
.custom_email_textarea { width: 100%; padding: 10px; }
#invoice_status, #invoice_type { margin-top: 23px; }
.invoice_product_qty { width: 100%; text-align: center; }
.invoice_type { text-transform: uppercase; }
.select-customer { margin-top: 10px; }
.delete-row { float: left; margin-top: 4px; }
.item-select { float: left; margin: 4px; }
.item-input { float: left; width: 65%; margin-left: 10px; }
.textarea { width: 100%; }
.textarea textarea { width: 100%; padding: 5px; resize: none; }
strong.shipping { margin-top: 4px; display: block; }
.progress .bar { display: block; height: 20px; }








/* bare inputs the legacy pages render without .form-control (Previous Due, Credit Limit …) */
.ap-content input:not(.sp-table *)[type="text"]:not(.form-control):not(.ap-input):not([class*="easyui"]),
.ap-content input:not(.sp-table *)[type="number"]:not(.form-control):not(.ap-input),
.ap-content input:not(.sp-table *)[type="date"]:not(.form-control):not(.ap-input),
.ap-content input:not(.sp-table *)[type="search"]:not(.form-control):not(.ap-input),
.ap-content input:not(.sp-table *)[type="password"]:not(.form-control):not(.ap-input),
.ap-content input:not(.sp-table *):not([type]):not(.form-control):not(.ap-input),
.ap-content select:not(.sp-table *):not(.form-control):not(.ap-input),
.ap-content textarea:not(.sp-table *):not(.form-control):not(.ap-input) {
  max-width: 100%; padding: 3px 6px; font-size: 13px; line-height: 1.4; border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); background: var(--surface); color: var(--text);
}
.ap-content input:not(.sp-table *):not(.form-control):not(.ap-input):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="hidden"]):focus,
.ap-content select:not(.sp-table *):not(.form-control):not(.ap-input):focus, .ap-content textarea:not(.sp-table *):not(.form-control):not(.ap-input):focus {
  outline: 0; border-color: var(--primary); box-shadow: 0 0 0 2px var(--ring);
}
.ap-content input:not(.sp-table *)[readonly]:not(.form-control):not(.ap-input) { background: var(--surface-2); }
.ap-content input:not(.sp-table *)[type="submit"]:not(.btn), .ap-content input:not(.sp-table *)[type="button"]:not(.btn), .ap-content button:not(.sp-table *):not([class]) {
  padding: 3px 12px; border-radius: var(--radius); border: 1px solid var(--border-strong); background: #f4f5f7; cursor: pointer;
}

/* ---- small helpers used by the React pages ---- */
.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.dataTables_wrapper { margin-bottom: 12px; }
.dataTables_wrapper .dt-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; gap: 10px; flex-wrap: wrap; }
.dt-search { position: relative; display: flex; align-items: center; flex: 0 1 300px; min-width: 180px; }
.dt-search > svg { position: absolute; left: 8px; color: var(--muted); pointer-events: none; }
.dt-search > .form-control { padding-left: 28px; padding-right: 26px; }
.dt-search > kbd { position: absolute; right: 6px; pointer-events: none; }
/* legacy DataTableJS keeps its dataTables_* hooks; neutralise the old inline-label sizing inside the new toolbar */
.dataTables_wrapper .dt-search.dataTables_filter > input.form-control { width: 100%; min-width: 0; margin-left: 0; display: block; }
.dataTables_wrapper .dt-info.dataTables_info { margin-top: 0; padding-top: 0; }
.dataTables_wrapper .dt-size.dataTables_length { color: var(--text-2); }
.dt-search > .form-control:focus + kbd { display: none; }
.dt-count { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.dt-count strong { color: var(--text); font-weight: 600; }
.dt-info { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.dt-size { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 400; color: var(--text-2); }
.dt-size > select.form-control { width: auto; display: inline-block; }

.combo-list > .combo-empty { padding: 6px 12px; color: var(--muted); font-size: 13px; }

/* picker dialogs (Select Item / Customer / Supplier / Ledger) — shadcn Dialog, see components/PickerModal.tsx */
.picker-body tbody > tr.is-hi > td { background-color: var(--primary-50) !important; }
.picker-body tbody > tr.is-hi > td:first-child { color: var(--primary-700); font-weight: 600; }
.picker-body .dataTables_wrapper { margin: 0; }
.picker-hint { margin-right: auto; font-size: 12px; color: var(--muted); }
.picker-hint kbd { margin: 0 1px; }
/* read-only fields that open a picker look and behave like a control, not like disabled text */
.form-control[readonly][data-picker], .ap-content input:not(.sp-table *)[readonly][data-picker] {
  cursor: pointer; background-color: var(--surface);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237d8893' stroke-width='2.4' stroke-linecap='round'%3e%3ccircle cx='11' cy='11' r='7'/%3e%3cpath d='m20 20-3.5-3.5'/%3e%3c/svg%3e");
  background-repeat: no-repeat; background-position: right 8px center; background-size: 14px; padding-right: 28px;
}
.form-control[readonly][data-picker]:focus { border-color: var(--primary); box-shadow: 0 0 0 2px var(--ring); }
.form-control[readonly][data-picker]:hover { border-color: #9fa8b2; }
/* type-to-search fields (TypeAhead: customer, item …): same search mark, but a normal text field */
.ap-content input:not(.sp-table *)[role=combobox][data-picker] {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237d8893' stroke-width='2.4' stroke-linecap='round'%3e%3ccircle cx='11' cy='11' r='7'/%3e%3cpath d='m20 20-3.5-3.5'/%3e%3c/svg%3e");
  background-repeat: no-repeat; background-position: right 8px center; background-size: 14px; padding-right: 28px;
}
.ta-list { padding: 2px 0; }
.ta-list > li > a.ta-opt { display: flex; flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 5px 10px; white-space: normal; }
.ta-opt .ta-name { min-width: 0; }
.ta-opt .ta-fig { flex: none; text-align: right; font-size: 13px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.ta-opt .ta-fig small { display: block; font-size: 11.5px; color: var(--muted); }
.ta-opt .ta-fig small.is-out { color: var(--danger); }
.ta-list > .active > a .ta-fig, .ta-list > .active > a .ta-fig small { color: #fff; }
.ta-list > .ta-more { padding: 5px 10px; font-size: 12px; color: var(--muted); border-top: 1px solid var(--border); }
.dataTables_wrapper .dt-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; gap: 10px; flex-wrap: wrap; color: var(--text-2); font-size: 13px; }
.dataTables_wrapper .pagination { margin: 0; }
.dataTables_wrapper label { font-weight: 400; color: var(--text-2); }
.dataTables_wrapper .table-responsive { border: 1px solid var(--border); background: var(--surface); }
.dataTables_wrapper .table-responsive > .table { margin-bottom: 0; }
.dataTables_wrapper .table-responsive > .table-bordered { border: 0; }
.dataTables_wrapper .table-responsive > .table-bordered > thead > tr > th:first-child,
.dataTables_wrapper .table-responsive > .table-bordered > tbody > tr > td:first-child { border-left: 0; }
.dataTables_wrapper .table-responsive > .table-bordered > thead > tr > th:last-child,
.dataTables_wrapper .table-responsive > .table-bordered > tbody > tr > td:last-child { border-right: 0; }
.dataTables_wrapper .table-responsive > .table-bordered > thead > tr:first-child > th { border-top: 0; }
.dataTables_wrapper .table-responsive > .table-bordered > tbody > tr:last-child > td { border-bottom: 0; }
.dataTables_filter input, .dataTables_length select { margin-left: 4px; }
.dataTables_filter input { min-width: 180px; }
.dataTables_info, .dataTables_paginate { color: var(--text-2); font-size: 13px; margin-top: 6px; }
.combo-list { position: absolute; z-index: 1050; left: 0; right: 0; max-height: 260px; overflow-y: auto; margin-top: 1px; min-width: 16rem; }
.combo-list > li > a { cursor: pointer; white-space: normal; }
.combo-list > li > a small { display: block; color: var(--muted); font-size: 11.5px; }
.combo-list > .active > a small { color: #dbe6f2; }
.form-inline label { margin-right: 8px; }
.form-inline label > .control-label { margin-right: 4px; }

/* Report letterhead (report.css style) */
.letterhead { text-align: center; margin-bottom: 12px; color: #000; }
.letterhead .lh-name { font-size: 20px; font-weight: 700; }
.letterhead .lh-addr { font-size: 13px; }
.letterhead .lh-title { margin-top: 4px; font-size: 15px; font-weight: 700; text-decoration: underline; }

/* =====================================================================
   App shell: sidebar + top bar
   ===================================================================== */
.ap-shell { min-height: 100vh; }

.ap-main { margin-left: var(--sidebar-w); min-height: 100vh; display: flex; flex-direction: column; transition: margin-left .15s ease; }

.ap-shell.is-collapsed .ap-main { margin-left: var(--sidebar-w-collapsed); }

.ap-brand { display: flex; align-items: center; gap: 6px; height: var(--topbar-h); padding: 0 10px; background: #1a2530; border-bottom: 1px solid #16202a; }
.ap-brand-link { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--sidebar-text-strong); flex: 1; }
.ap-brand-link:hover, .ap-brand-link:focus { color: #fff; text-decoration: none; }
.ap-brand-logo { flex: none; width: 28px; height: 28px; border-radius: 2px; overflow: hidden; background: #fff; display: grid; place-items: center; }
.ap-brand-logo img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
.ap-brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.ap-brand-text strong { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-brand-text small { display: none; }

.ap-nav { flex: 1; overflow-y: auto; padding: 4px 0 8px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .15) transparent; }
.ap-nav::-webkit-scrollbar { width: 6px; } .ap-nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .15); }
.ap-nav-top {
  display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 12px; margin: 0; border: 0; border-left: 3px solid transparent; border-radius: 0;
  background: transparent; color: var(--sidebar-text); font-size: 14px; font-weight: 400; text-align: left; cursor: pointer;
  transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}
.ap-nav-top svg { flex: none; opacity: .85; width: 16px; height: 16px; }
.ap-nav-top svg.ap-nav-caret { width: 13px; height: 13px; }
.ap-nav-top:hover, .ap-nav-top:focus-visible { background: var(--sidebar-hover); color: var(--sidebar-text-strong); text-decoration: none; }
.ap-nav-top.is-active { background: var(--sidebar-active); border-left-color: #7fb2e5; color: #fff; }
.ap-nav-group.is-open > .ap-nav-top { background: #1c2833; color: #fff; }
.ap-nav-group.has-active > .ap-nav-top { color: #fff; border-left-color: #7fb2e5; }
.ap-nav-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ap-nav-caret { opacity: .55; }
.ap-nav-group.is-open > .ap-nav-top .ap-nav-caret { transform: rotate(180deg); }
.ap-nav-items { background: #1c2833; padding: 2px 0 4px; }
.ap-nav-link {
  position: relative; display: flex; align-items: center; gap: 6px; width: 100%; padding: 4px 12px 4px 36px; margin: 0; border: 0; border-radius: 0;
  background: transparent; color: var(--sidebar-text); font-size: 13.5px; font-weight: 400; text-align: left; cursor: pointer;
  transition: background-color .12s ease, color .12s ease;
}
.ap-nav-link:hover, .ap-nav-link:focus-visible { background: var(--sidebar-hover); color: var(--sidebar-text-strong); text-decoration: none; }
.ap-nav-link.is-active { color: #fff; background: var(--sidebar-active); }
.ap-nav-dot { display: none; }
.ap-nav-ext { flex: none; opacity: .5; }
.ap-nav-subcaret { flex: none; opacity: .5; }
.ap-nav-subgroup.is-open > .ap-nav-subtoggle .ap-nav-subcaret { transform: rotate(90deg); }
.ap-nav-subgroup.is-open > .ap-nav-subtoggle { color: var(--sidebar-text-strong); }
.ap-nav-link.is-sub { padding-left: 50px; font-size: 13px; }
.ap-nav-sep { height: 1px; margin: 3px 12px 3px 36px; background: rgba(255, 255, 255, .08); }
.ap-nav-html a { display: block; padding: 4px 12px 4px 36px; color: var(--sidebar-text); font-size: 13.5px; transition: background-color .12s ease, color .12s ease; }
.ap-nav-html a:hover { background: var(--sidebar-hover); color: #fff; text-decoration: none; }

.ap-sidebar-foot { border-top: 1px solid rgba(255, 255, 255, .07); }
.ap-collapse-btn { display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 14px; border: 0; background: transparent;
  color: #8b97a3; font-size: 12px; cursor: pointer; text-align: left; }
.ap-collapse-btn:hover { background: var(--sidebar-hover); color: #fff; }

/* collapsed rail */
.ap-shell.is-collapsed .ap-brand { justify-content: center; padding: 0; }
.ap-shell.is-collapsed .ap-brand-text,
.ap-shell.is-collapsed .ap-nav-text,
.ap-shell.is-collapsed .ap-nav-caret,
.ap-shell.is-collapsed .ap-nav-items { display: none !important; }
.ap-shell.is-collapsed .ap-brand-link { flex: none; }
.ap-shell.is-collapsed .ap-nav-top, .ap-shell.is-collapsed .ap-collapse-btn { justify-content: center; padding-left: 0; padding-right: 0; }


.ap-mobile-only { display: none !important; }

/* top bar */
.ap-topbar {
  position: sticky; top: 0; z-index: 50; height: var(--topbar-h); display: flex; align-items: center; gap: 12px; padding: 0 16px;
  background: #fff; border-bottom: 1px solid var(--border);
}
.ap-crumbs { display: flex; align-items: baseline; gap: 6px; min-width: 0; margin-right: auto; white-space: nowrap; overflow: hidden; }
.ap-crumb-group { font-size: 13px; color: var(--muted); }
.ap-crumb-group::after { content: "/"; margin-left: 6px; color: #b5bdc5; }
.ap-crumb-page { font-size: 15px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; }
.ap-search-trigger {
  display: inline-flex; align-items: center; gap: 6px; height: 28px; width: 220px; padding: 0 8px; border: 1px solid var(--border-strong);
  border-radius: var(--radius); background: #fff; color: var(--muted); font-size: 13px; cursor: text;
  transition: border-color .12s ease;
}
.ap-search-trigger:hover { border-color: #9fa8b2; }
.ap-search-trigger span { flex: 1; text-align: left; }
kbd { display: inline-block; padding: 0 4px; font-family: var(--font); font-size: 10.5px; color: var(--muted);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 2px; line-height: 1.5; }
.ap-icon-btn { display: inline-grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: #fff; color: var(--text-2); cursor: pointer; }
.ap-icon-btn:hover { background: var(--surface-2); color: var(--text); }


.ap-user { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-2); white-space: nowrap; }
.ap-user strong { color: var(--text); font-weight: 600; }
.ap-user-type { padding: 0 5px; border: 1px solid var(--border-strong); border-radius: 2px; font-size: 11px; color: var(--text-2); text-transform: capitalize; }
.ap-logout { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 9px; border: 1px solid var(--border-strong); border-radius: var(--radius);
  color: var(--text-2); background: #fff; transition: color .12s ease, border-color .12s ease, background-color .12s ease; }
.ap-logout:hover { color: var(--danger); border-color: #d9a39d; background: var(--danger-50); text-decoration: none; }

.ap-content { flex: 1; padding: 10px 0 14px; }
.ap-content > .container { max-width: none; padding-left: 15px; padding-right: 15px; animation: ap-in .14s ease-out; }
@keyframes ap-in { from { opacity: .4; } to { opacity: 1; } }
.ap-content > .container > h1:first-child, .ap-content > .container > h2:first-child, .ap-content > .container > h3:first-child { margin-top: 0; }
/* legacy pages start with <br/><br/> spacers meant for the old fixed navbar */
.ap-content > .container > br:first-child, .ap-content > .container > br:first-child + br { display: none; }

.ap-footer {
  display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 5px 14px; font-size: 12.5px; color: var(--muted);
  border-top: 1px solid var(--border); background: #fff;
}
.ap-footer strong { color: var(--text-2); font-weight: 600; }
.ap-license-notice { margin: 0 16px 8px; padding: 6px 10px; border: 1px solid var(--warning-100); background: var(--warning-50);
  color: var(--warning-text); font-size: 12.5px; text-align: center; }

/* navigation progress bar */
.ap-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 2000; pointer-events: none; opacity: 0; transition: opacity .3s ease .1s; }
.ap-progress span { display: block; height: 100%; width: 0; background: #3d8bd4; }
.ap-progress.is-busy { opacity: 1; transition: opacity .1s; }
.ap-progress.is-busy span { animation: ap-progress 8s cubic-bezier(.08, .7, .2, 1) forwards; }
@keyframes ap-progress { 0% { width: 0; } 10% { width: 35%; } 40% { width: 70%; } 100% { width: 94%; } }

/* quick search (Ctrl+K), New menu and shortcuts are shadcn/ui (src/components/ui): command, dropdown-menu, dialog */

/* skip link: first stop for keyboard users */
.ap-skip { position: fixed; left: 8px; top: -40px; z-index: 2100; padding: 6px 10px; background: var(--primary); color: #fff; border-radius: var(--radius); transition: top .12s var(--ease); }
.ap-skip:focus { top: 6px; color: #fff; text-decoration: none; }

/* "New" — create menu in the top bar */
/* the top bar's controls are all 28px high */
.ap-new-btn { gap: 4px; height: 28px; min-height: 28px; padding: 0 10px 0 8px; }
.ap-help-btn { width: 28px; height: 28px; }

/* keyboard shortcuts sheet */
.ap-keys-table { width: 100%; font-size: 13.5px; }
.ap-keys-table td { padding: 6px 12px; border-bottom: 1px solid #f0f2f4; vertical-align: middle; }
.ap-keys-table tr:last-child td { border-bottom: 0; }
.ap-keys-table td:first-child { width: 1%; padding-right: 20px; white-space: nowrap; color: var(--text-2); }
.ap-keys-table kbd { font-size: 11.5px; padding: 1px 6px; margin: 0 1px; color: var(--text); background: var(--surface-2); border-color: var(--border-strong); border-bottom-width: 2px; }

/* loading placeholder */
.ap-skeleton { padding-top: 2px; }
.ap-skeleton .sk { background: #e3e7eb; animation: ap-pulse 1.1s ease-in-out infinite alternate; }
.sk-title { height: 20px; width: 200px; margin-bottom: 8px; }
.sk-line { height: 10px; margin-bottom: 14px; }
.ap-skeleton-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
.sk-card { height: 60px; }
.sk-table { height: 260px; }
@keyframes ap-pulse { from { opacity: 1; } to { opacity: .55; } }

/* =====================================================================
   Dashboard
   ===================================================================== */
.dash-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; margin-bottom: 10px; }
.dash-head h1 { display: inline; margin: 0 10px 0 0; }
.dash-head .dash-date { color: var(--muted); font-size: 13px; }
.dash-shortcuts { display: flex; flex-wrap: wrap; gap: 4px; }
.dash-shortcuts .btn { display: inline-flex; align-items: center; gap: 6px; }
.dash-shortcuts .btn svg { color: var(--primary); }
.dash-shortcuts .btn-primary svg { color: #fff; }
/* money first, approvals beside it */
.dash-top { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 10px; margin-bottom: 10px; align-items: start; }
.dash-money { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); }
.dash-money .dash-stat { padding: 12px 14px; border: 0; border-left: 1px solid var(--border); margin: 0; }
.dash-money .dash-stat:first-child { border-left: 0; }
.dash-stat { padding: 8px 12px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); margin: 0 -1px -1px 0; }
.dash-stat-label { font-size: 13px; color: var(--muted); }
.dash-stat-value { font-size: 15px; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; line-height: 1.4; }
.dash-stat.is-lead .dash-stat-value { font-size: 18px; margin-top: 2px; }
.dash-stat-value small { font-size: 11px; font-weight: 400; color: var(--muted); margin-left: 3px; }
.dash-stat-foot { font-size: 12.5px; }
.dash-stat-foot a { color: var(--primary); }
/* operations: quieter, one strip of shared rules */
.dash-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); margin-bottom: 10px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.dash-approvals-panel { margin: 0; }
.dash-approvals { list-style: none; margin: 0; padding: 0; }
.dash-approvals li + li { border-top: 1px solid var(--border); }
.dash-appr-row { display: flex; align-items: center; gap: 8px; padding: 8px 12px; color: var(--text); }
a.dash-appr-row:hover, a.dash-appr-row:focus-visible { background: var(--surface-2); color: var(--text); text-decoration: none; }
a.dash-appr-row:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.dash-appr-label { flex: 1; min-width: 0; }
.dash-count { min-width: 30px; font-size: 12px; font-variant-numeric: tabular-nums; }
.dash-appr-go { flex: none; color: var(--muted); }
.dash-chart .panel-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.dash-legend { display: flex; gap: 10px; font-size: 11.5px; color: var(--text-2); font-weight: 400; }
.dash-legend i { display: inline-block; width: 9px; height: 9px; margin-right: 4px; vertical-align: -1px; }
.dash-welcome { padding: 14px 16px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); }
.dash-welcome h2 { margin: 0 0 4px; }
.dash-welcome p { margin: 0; color: var(--text-2); }
/* ---------- Dashboard (owner, 2026-11-12: "more charts, bars, statistics — professional, aligned, compact") ----------
   Chart colours: categorical slots checked with the dataviz validator against the card surface — light #155dfc / #eb6834
   on #ffffff, dark #3b82f6 / #d95926 on #161b1d (all checks pass; the purchase orange is not the warning status orange). */
:root { --viz-sales: #155dfc; --viz-purchase: #eb6834; }
html.dark { --viz-sales: #3b82f6; --viz-purchase: #d95926; }
@media print { :root, html.dark { --viz-sales: #155dfc; --viz-purchase: #eb6834; } }

.dbx-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; }
.dbx-kpi { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding: 8px 12px 9px; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-lg); }
.dbx-kpi-label { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dbx-kpi-label .ap-btn-icon { color: var(--primary); }
.dbx-kpi-value { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dbx-kpi-value small { margin-left: 4px; font-size: 11px; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.dbx-kpi-sub { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dbx-kpi-sub a { color: var(--primary); }
.dbx-kpi-sub b { font-weight: 600; color: var(--text-2); }
.dbx-kpi.is-loading .dbx-kpi-value { color: var(--muted); }
.dbx-up { color: var(--success-text); font-weight: 500; }
.dbx-down { color: var(--danger-text); font-weight: 500; }
.dbx-warn { color: var(--warning-text); font-weight: 500; }

.dbx-row { display: grid; gap: 8px; margin-bottom: 8px; align-items: start; }
.dbx-row-21 { grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); align-items: stretch; }
/* a chart card fills its row (no gap under it beside a taller side column) */
.dbx-card.is-fill { display: flex; flex-direction: column; }
.dbx-card.is-fill > .dbx-card-body { display: flex; flex: 1; flex-direction: column; }
.dbx-card.is-fill .dbx-plot { flex: 1; min-height: 232px; }
.dbx-dim { color: var(--muted); font-size: 11.5px; font-weight: 400; }
.dbx-row-11 { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
.dbx-side { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.dbx-card { min-width: 0; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-lg); overflow: hidden; }
.dbx-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 7px 12px; border-bottom: 1px solid var(--border); }
.dbx-card-head h2 { margin: 0; font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--text); }
.dbx-card-head p { margin: 1px 0 0; font-size: 12px; color: var(--muted); }
.dbx-head-tools { display: flex; flex: none; align-items: center; gap: 10px; min-height: 24px; }
.dbx-legend { display: flex; gap: 10px; font-size: 12px; color: var(--text-2); }
.dbx-legend i { display: inline-block; width: 9px; height: 9px; margin-right: 5px; border-radius: 2px; vertical-align: -1px; }
.dbx-legend i.is-sales { background: var(--viz-sales); }
.dbx-legend i.is-purchase { background: var(--viz-purchase); }
.dbx-switch { height: 24px; padding: 0 8px; border: 1px solid var(--border); border-radius: 4px; background: var(--surface); color: var(--text-2); font-size: 12px; cursor: pointer; transition: background-color 120ms ease, color 120ms ease; }
.dbx-switch:hover { background: var(--surface-2); color: var(--text); }
.dbx-switch[aria-pressed="true"] { background: var(--primary-50); color: var(--primary-700); border-color: transparent; }
.dbx-switch:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.dbx-link { font-size: 12.5px; color: var(--primary); }
.dbx-card-body { padding: 8px 10px 6px 2px; }
.dbx-card-body > .dbx-bars, .dbx-card-body > .dbx-empty, .dbx-card-body > .dbx-table-wrap { margin-left: 10px; }

.dbx-bars { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.dbx-bars li { display: grid; grid-template-columns: minmax(0, 36%) minmax(0, 1fr) minmax(84px, auto); align-items: center; gap: 10px; min-height: 24px; font-size: 13px; }
.dbx-bar-name { overflow: hidden; color: var(--text-2); text-overflow: ellipsis; white-space: nowrap; }
.dbx-bar-track { display: block; height: 10px; background: var(--surface-2); border-radius: 0 4px 4px 0; }
.dbx-bar-fill { display: block; height: 100%; background: var(--viz-sales); border-radius: 0 4px 4px 0; }
.dbx-bar-value { color: var(--text); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dbx-bar-value small { margin-left: 6px; color: var(--muted); font-size: 11px; font-weight: 400; }
.dbx-bars li:hover .dbx-bar-name { color: var(--text); }
.dbx-bars li:hover .dbx-bar-fill { filter: brightness(0.92); }

.dbx-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
.dbx-facts > div { padding: 6px 12px; border-top: 1px solid var(--border); }
.dbx-facts > div:nth-child(-n+2) { border-top: 0; }
.dbx-facts > div:nth-child(even) { border-left: 1px solid var(--border); }
.dbx-facts dt { font-size: 12px; font-weight: 400; color: var(--muted); }
.dbx-facts dd { margin: 0; font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.dbx-facts dd a { color: var(--text); }
.dbx-facts dd a:hover { color: var(--primary); }

.dbx-tip { min-width: 150px; padding: 6px 9px; background: var(--popover); border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1); font-size: 12px; }
.dbx-tip-head { margin-bottom: 3px; font-weight: 600; color: var(--text); }
.dbx-tip-row { display: flex; align-items: center; gap: 6px; color: var(--text-2); }
.dbx-tip-row i { width: 8px; height: 8px; border-radius: 2px; }
.dbx-tip-row b { margin-left: auto; padding-left: 12px; color: var(--text); font-variant-numeric: tabular-nums; }
.dbx-empty { padding: 22px 12px; color: var(--muted); font-size: 13px; text-align: center; }
.dbx-table-wrap { max-height: 232px; overflow: auto; }
.dbx-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.dbx-table th, .dbx-table td { padding: 4px 8px; border-bottom: 1px solid var(--border); text-align: left; }
.dbx-table th { position: sticky; top: 0; background: var(--surface); color: var(--muted); font-weight: 600; }
.dbx-table .num { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 1180px) { .dbx-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1000px) { .dbx-row-21, .dbx-row-11 { grid-template-columns: minmax(0, 1fr); } }
html.dark .dbx-link, html.dark .dbx-kpi-sub a { color: var(--primary-700); }
@media (max-width: 600px) { .dbx-kpi { padding: 7px 10px 8px; } .dbx-kpi-value { font-size: 17px; } .dbx-kpi-sub { white-space: normal; } }
@media (max-width: 420px) { .dbx-bars li { grid-template-columns: minmax(0, 1fr) minmax(76px, auto); } .dbx-bar-track { display: none; } }
@media (max-width: 340px) { .dbx-kpis { grid-template-columns: minmax(0, 1fr); } }
.ap-empty-chart { display: grid; place-items: center; height: 240px; color: var(--muted); font-size: 12.5px; text-align: center; }
/* =====================================================================
   Line-item document editor (DocumentForm)
   ===================================================================== */
.doc-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.ap-content .doc-head > .doc-title { margin: 0; font-size: 17px; letter-spacing: .03em; }
.doc-figs { display: flex; margin: 0; }
.doc-figs > div { padding: 0 14px; border-left: 1px solid var(--border); }
.doc-figs > div:first-child { border-left: 0; }
.doc-figs dt { font-size: 12px; font-weight: 600; color: var(--muted); }
.doc-figs dd { margin: 0; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.doc-figs .is-bad dd { color: var(--danger); }
.doc-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.doc-panels > .panel { margin-bottom: 10px; }
.doc-fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 10px; }
.doc-field { display: block; margin: 0; font-weight: 400; }
.doc-field > span { display: block; margin-bottom: 2px; font-size: 12px; font-weight: 600; color: var(--text-2); }
.doc-field-wide { grid-column: span 3; }
.doc-lines-wrap { margin-bottom: 10px; }
.doc-lines { margin-bottom: 0; }
.doc-lines > tbody > tr > td { padding: 3px 4px; vertical-align: top; }
.doc-lines > thead > tr > th { vertical-align: middle; }
.doc-lines .doc-col-id { width: 72px; }
.doc-lines .doc-col-item { min-width: 280px; }
.doc-lines .doc-line-total { padding: 8px 8px 0 !important; font-weight: 600; }
.doc-item { display: flex; gap: 4px; }
.doc-item > .btn { align-self: stretch; }
.doc-item-pick { flex: 1; min-width: 0; }
.doc-stock { display: block; margin-top: 2px; font-size: 12px; }
.doc-foot { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; margin-bottom: 10px; }
.doc-notes { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.doc-sum { margin: 0; font-variant-numeric: tabular-nums; }
.doc-sum > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 3px 0; }
.doc-sum dt { font-weight: 600; color: var(--text-2); }
.doc-sum dt label { margin: 0; font-size: 14px; }
.doc-sum dd { margin: 0; text-align: right; }
.doc-sum-paid dd > .form-control { width: 150px; }
.doc-sum-due { margin-top: 4px; padding: 5px 0 !important; border-top: 1px solid var(--text-2); border-bottom: 3px double var(--text-2); }
.doc-sum-due dt, .doc-sum-due dd { font-size: 16px; font-weight: 600; color: var(--text); }
.doc-sum-current dt, .doc-sum-current dd { font-size: 13px; font-weight: 400; color: var(--muted); }
/* the save bar stays in reach however long the invoice gets */
.doc-bar {
  position: sticky; bottom: 0; z-index: 40; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 14px;
  margin: 0 -15px -14px; padding: 8px 15px; background: rgba(255, 255, 255, .97); border-top: 1px solid var(--border-strong);
}
.doc-bar-alert { flex-basis: 100%; margin: 0; }
.doc-bar-figs { display: flex; gap: 18px; margin-right: auto; font-size: 13px; color: var(--text-2); font-variant-numeric: tabular-nums; }
.doc-bar-figs strong { margin-left: 4px; font-size: 15px; color: var(--text); }
.doc-bar-hint { font-size: 12px; color: var(--muted); }
.doc-bar > .btn { min-width: 140px; }
@media (max-width: 900px) {
  .doc-panels, .doc-foot { grid-template-columns: minmax(0, 1fr); }
  .doc-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .doc-field-wide { grid-column: span 2; }
  .doc-figs > div { padding: 0 8px; }
  .doc-bar-hint { display: none; }
  .doc-bar { margin: 0 -15px -14px; }
  /* the grid scrolls sideways on a phone; keep every cell wide enough to read */
  .doc-lines > tbody > tr > td > .form-control { min-width: 64px; }
  .doc-lines > tbody > tr > td:first-child > .form-control { min-width: 56px; }
}
@media print { .doc-bar { position: static; border: 0; } .doc-bar-hint { display: none; } }

/* =====================================================================
   Login
   ===================================================================== */
.login-page { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 12px 80px; background: var(--bg); }
.login-box { width: 100%; max-width: 340px; }
.login-company { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.login-company img { width: 44px; height: 44px; border: 1px solid var(--border); background: #fff; }
.login-company strong { display: block; font-size: 16px; color: var(--text); }
.login-company small { color: var(--muted); font-size: 12px; }
.login-box .panel { margin-bottom: 0; }
.login-box .panel-heading { font-weight: 600; }
.login-box .panel-body { padding: 14px; }
.login-box #response { margin-bottom: 10px; }
.login-box .checkbox { margin: 2px 0 12px; }
.login-box .checkbox label { font-weight: 400; }
.login-pw { position: relative; }
.login-pw .form-control { padding-right: 52px; }

.login-footer { position: fixed; left: 0; right: 0; bottom: 0; padding: 0 12px 8px; }
.login-footer .ap-footer { border: 0; background: transparent; justify-content: center; text-align: center; padding: 0; gap: 2px 10px; }
.login-footer .ap-license-notice { max-width: 640px; margin: 0 auto 6px; }
@media (max-height: 560px) { .login-footer { position: static; } .login-page { padding-bottom: 24px; } }

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width: 1000px) { .dash-top { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .dash-money { grid-template-columns: minmax(0, 1fr); } .dash-money .dash-stat { border-left: 0; border-top: 1px solid var(--border); } .dash-money .dash-stat:first-child { border-top: 0; } }
@media (max-width: 991px) {

  .ap-main, .ap-shell.is-collapsed .ap-main { margin-left: 0; }


  .ap-shell.is-collapsed .ap-brand-text, .ap-shell.is-collapsed .ap-nav-text, .ap-shell.is-collapsed .ap-nav-caret { display: initial !important; }
  .ap-shell.is-collapsed .ap-nav-items:not([hidden]) { display: block !important; }
  .ap-mobile-only { display: inline-grid !important; }
  .ap-sidebar-foot { display: none; }
  .ap-search-trigger { width: 30px; justify-content: center; padding: 0; } .ap-search-trigger span, .ap-search-trigger kbd { display: none; }
  .ap-user-name, .ap-user-type, .ap-logout span { display: none; }
  .ap-help-btn { display: none; }
  .ap-new-btn { padding: 0 7px; } .ap-new-btn span { display: none; }
  .ap-topbar { padding: 0 10px; gap: 8px; }
  /* container keeps the 15px gutter so the grid's -15px rows never stick out of the page */
  /* wide tables scroll inside their own box instead of widening the page */
  .ap-content table.table:not(.table-responsive > table) { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* label | field form tables: label above its field on a phone */
  .ap-content form table:not(.table):not([data-entry-grid]) > tbody > tr > td { display: block; width: auto !important; padding: 2px 0 !important; }
  .ap-content form table:not(.table):not([data-entry-grid]) > tbody > tr { display: block; margin-bottom: 4px; }
  .ap-content .input-group-addon { white-space: normal; padding-left: 6px; padding-right: 6px; }
  .ap-content .form-control, .ap-content select:not(.sp-table *), .ap-content input:not(.sp-table *) { max-width: 100%; }
  .ap-content #container { min-width: 0 !important; } /* stock chart: Highcharts box had min-width 400px */

  .ap-content .dataTables_wrapper .dataTables_filter { text-align: left !important; margin-top: 4px; }
}
.ap-content .input-group.date > .input-group-addon { cursor: pointer; }
.ap-content .input-group.date > .input-group-addon:hover { color: var(--primary); }
@media (max-width: 600px) {
  /* half-width blocks (invoice / purchase headers, totals, two-up panels) stack on a phone */
  .ap-content .col-xs-5, .ap-content .col-xs-6, .ap-content .col-xs-7 { width: 100%; float: none; }
/* label | field rows (col-xs-3/4 + col-xs-8/9) stack too: a date field at 22% of a phone is unusable */
  .ap-content .col-xs-3, .ap-content .col-xs-4, .ap-content .col-xs-8 { width: 100%; float: none; }
  .ap-content [class*="col-xs-offset-"] { margin-left: 0; }
  .ap-content .col-xs-6.text-right, .ap-content .col-xs-7.text-right { text-align: left; } .ap-skeleton-grid { grid-template-columns: 1fr; } .ap-footer { padding: 6px 10px; } .ap-crumb-group { display: none; }
}

/* =====================================================================
   Print — reports and invoices print without the app chrome
   ===================================================================== */
@media print {
  @page { size: A4; margin: 12mm; }
  html, body { background: #fff !important; }
  body { padding: 0 !important; font-size: 12px; }
.no-print, .noprint, .navbar, .footer, .ap-topbar, .ap-footer, .ap-progress, .ap-license-notice { display: none !important; }
  .ap-main { margin-left: 0 !important; }
  .ap-content { padding: 0 !important; }
  .ap-content > .container { padding: 0 !important; }
  a[href]::after { content: none !important; }
  .table > thead > tr > th { background: #eee !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .btn { display: none !important; }
}

/* SMS settings panel */
.sms-form .control-label { font-weight: 500; }
.sms-form .checkbox-inline { margin-right: 14px; }
.sms-small { margin-top: 4px; font-size: 13px; color: var(--text-2); }
.sms-row { margin: 8px 0; }

/* touch screens: targets big enough for a finger (desktop density is unchanged) */
@media (pointer: coarse) {
  .btn, .ap-content .btn-sm { min-height: 40px; }
  .btn-xs { min-height: 36px; min-width: 36px; }
  .rf-chip, .rf-type, .pagination > li > a, .pagination > li > span { min-height: 40px; display: inline-flex; align-items: center; }
  .ap-nav-link, .ap-nav-top, [role=menuitem], [cmdk-item], .combo-list > li > a { min-height: 44px; display: flex; align-items: center; }
  .combo-list > li > a { flex-direction: column; align-items: flex-start; justify-content: center; }
}
/* phones: 16px fields so the browser does not zoom in on focus */
@media (max-width: 600px) {
  .form-control, .ap-content input:not(.sp-table *):not([type="checkbox"]):not([type="radio"]), .ap-content select:not(.sp-table *), .ap-content textarea:not(.sp-table *) { font-size: 16px; }
}

/* reduced motion: no fades */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
.placeholder\:text-\[var\(--muted\)\]::-moz-placeholder { color: var(--muted); }
.placeholder\:text-\[var\(--muted\)\]::placeholder { color: var(--muted); }
.placeholder\:text-muted-foreground::-moz-placeholder { color: var(--muted); }
.placeholder\:text-muted-foreground::placeholder { color: var(--muted); }
.before\:absolute::before { content: var(--tw-content); position: absolute; }
.before\:inset-y-\[6px\]::before { content: var(--tw-content); top: 6px; bottom: 6px; }
.before\:left-1\/2::before { content: var(--tw-content); left: 50%; }
.before\:w-px::before { content: var(--tw-content); width: 1px; }
.before\:-translate-x-1\/2::before { content: var(--tw-content); --tw-translate-x: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }
.before\:bg-primary::before { content: var(--tw-content); background-color: var(--primary); }
.before\:opacity-0::before { content: var(--tw-content); opacity: 0; }
.before\:opacity-100::before { content: var(--tw-content); opacity: 1; }
.before\:transition-opacity::before { content: var(--tw-content); transition-property: opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.before\:duration-100::before { content: var(--tw-content); transition-duration: 100ms; }
.before\:content-\[\'\'\]::before { --tw-content: ''; content: var(--tw-content); }
.before\:duration-100::before { content: var(--tw-content); animation-duration: 100ms; }
.after\:absolute::after { content: var(--tw-content); position: absolute; }
.after\:inset-y-0::after { content: var(--tw-content); top: 0px; bottom: 0px; }
.after\:left-1\/2::after { content: var(--tw-content); left: 50%; }
.after\:w-\[2px\]::after { content: var(--tw-content); width: 2px; }
.first\:border-s-0:first-child { border-inline-start-width: 0px; }
.last\:border-b-0:last-child { border-bottom-width: 0px; }
.read-only\:bg-\[var\(--sidebar\)\]:-moz-read-only { background-color: var(--sidebar); }
.read-only\:bg-\[var\(--sidebar\)\]:read-only { background-color: var(--sidebar); }
.hover\:border-\[var\(--border-strong\)\]:hover { border-color: var(--border-strong); }
.hover\:bg-\[rgba\(255\2c 255\2c 255\2c \.1\)\]:hover { background-color: rgba(255,255,255,.1); }
.hover\:bg-\[var\(--accent\)\]:hover { background-color: var(--accent); }
.hover\:bg-\[var\(--danger-tint-2\)\]:hover { background-color: var(--danger-tint-2); }
.hover\:bg-\[var\(--primary-600\)\]:hover { background-color: var(--primary-600); }
.hover\:bg-\[var\(--secondary-hover\)\]:hover { background-color: var(--secondary-hover); }
.hover\:bg-\[var\(--sidebar\)\]:hover { background-color: var(--sidebar); }
.hover\:bg-\[var\(--surface-2\)\]:hover { background-color: var(--surface-2); }
.hover\:bg-secondary:hover { background-color: var(--surface-2); }
.hover\:bg-sidebar-accent:hover { background-color: var(--sidebar-accent); }
.hover\:text-\[var\(--primary-foreground\)\]:hover { color: var(--primary-foreground); }
.hover\:text-\[var\(--text\)\]:hover { color: var(--text); }
.hover\:text-\[var\(--text-2\)\]:hover { color: var(--text-2); }
.hover\:text-foreground:hover { color: var(--text); }
.hover\:text-sidebar-accent-foreground:hover { color: var(--sidebar-accent-foreground); }
.hover\:underline:hover { text-decoration-line: underline; }
.hover\:no-underline:hover { text-decoration-line: none; }
.hover\:opacity-100:hover { opacity: 1; }
.hover\:before\:opacity-20:hover::before { content: var(--tw-content); opacity: 0.2; }
.hover\:after\:bg-sidebar-border:hover::after { content: var(--tw-content); background-color: var(--sidebar-border); }
.focus\:border-\[var\(--border-strong\)\]:focus { border-color: var(--border-strong); }
.focus\:bg-secondary:focus { background-color: var(--surface-2); }
.focus\:text-foreground:focus { color: var(--text); }
.focus-visible\:border-\[var\(--ring-color\)\]:focus-visible { border-color: var(--ring-color); }
.focus-visible\:shadow-\[0_0_0_1px_var\(--ring\)\]:focus-visible { --tw-shadow: 0 0 0 1px var(--ring); --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); }
.focus-visible\:shadow-\[0_0_0_2px_var\(--ring\)\]:focus-visible { --tw-shadow: 0 0 0 2px var(--ring); --tw-shadow-colored: 0 0 0 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-visible\:outline-none:focus-visible { outline: 2px solid transparent; outline-offset: 2px; }
.focus-visible\:ring-1:focus-visible { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); }
.focus-visible\:ring-2:focus-visible { --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); }
.focus-visible\:ring-\[var\(--ring-color\)\]:focus-visible { --tw-ring-color: var(--ring-color); }
.focus-visible\:ring-current:focus-visible { --tw-ring-color: currentColor; }
.focus-visible\:before\:opacity-100:focus-visible::before { content: var(--tw-content); opacity: 1; }
.active\:translate-y-px:active { --tw-translate-y: 1px; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }
.active\:scale-\[0\.96\]:active { --tw-scale-x: 0.96; --tw-scale-y: 0.96; 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)); }
.active\:bg-sidebar-accent:active { background-color: var(--sidebar-accent); }
.active\:text-sidebar-accent-foreground:active { color: var(--sidebar-accent-foreground); }
.disabled\:pointer-events-none:disabled { pointer-events: none; }
.disabled\:cursor-not-allowed:disabled { cursor: not-allowed; }
.disabled\:cursor-wait:disabled { cursor: wait; }
.disabled\:opacity-40:disabled { opacity: 0.4; }
.disabled\:opacity-50:disabled { opacity: 0.5; }
.disabled\:opacity-60:disabled { opacity: 0.6; }
.disabled\:opacity-70:disabled { opacity: 0.7; }
.group\/search:focus-within .group-focus-within\/search\:text-\[var\(--text-2\)\] { color: var(--text-2); }
.group\/menu-item:focus-within .group-focus-within\/menu-item\:opacity-100 { opacity: 1; }
.group\/row:focus-within .group-focus-within\/row\:opacity-100 { opacity: 1; }
.group\/page:hover .group-hover\/page\:-translate-x-px { --tw-translate-x: -1px; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }
.group\/page:hover .group-hover\/page\:translate-x-px { --tw-translate-x: 1px; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }
.group\/sort:hover .group-hover\/sort\:scale-100 { --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)); }
.group\/row:hover .group-hover\/row\:bg-\[var\(--surface-2\)\] { background-color: var(--surface-2); }
.group\/menu-item:hover .group-hover\/menu-item\:opacity-100 { opacity: 1; }
.group\/row:hover .group-hover\/row\:opacity-100 { opacity: 1; }
.group\/sort:hover .group-hover\/sort\:opacity-40 { opacity: 0.4; }
.group\/sort:focus-visible .group-focus-visible\/sort\:scale-100 { --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)); }
.group\/sort:focus-visible .group-focus-visible\/sort\:opacity-40 { opacity: 0.4; }
.peer\/menu-button:hover ~ .peer-hover\/menu-button\:text-sidebar-accent-foreground { color: var(--sidebar-accent-foreground); }
.peer:focus-visible ~ .peer-focus-visible\: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); }
.peer:focus-visible ~ .peer-focus-visible\:ring-\[var\(--ring-color\)\] { --tw-ring-color: var(--ring-color); }
.group\/menu-item:has([data-sidebar=menu-action]) .group-has-\[\[data-sidebar\=menu-action\]\]\/menu-item\:pr-\[32px\] { padding-right: 32px; }
.aria-disabled\:pointer-events-none[aria-disabled="true"] { pointer-events: none; }
.aria-disabled\:opacity-50[aria-disabled="true"] { opacity: 0.5; }
.aria-expanded\:opacity-100[aria-expanded="true"] { opacity: 1; }
.data-\[disabled\=true\]\:pointer-events-none[data-disabled="true"] { pointer-events: none; }
.data-\[disabled\]\:pointer-events-none[data-disabled] { pointer-events: none; }
.data-\[side\=bottom\]\:inset-x-0[data-side="bottom"] { left: 0px; right: 0px; }
.data-\[side\=left\]\:inset-y-0[data-side="left"] { top: 0px; bottom: 0px; }
.data-\[side\=right\]\:inset-y-0[data-side="right"] { top: 0px; bottom: 0px; }
.data-\[side\=top\]\:inset-x-0[data-side="top"] { left: 0px; right: 0px; }
.data-\[side\=bottom\]\:bottom-0[data-side="bottom"] { bottom: 0px; }
.data-\[side\=left\]\:left-0[data-side="left"] { left: 0px; }
.data-\[side\=right\]\:right-0[data-side="right"] { right: 0px; }
.data-\[side\=top\]\:top-0[data-side="top"] { top: 0px; }
.data-\[side\=bottom\]\:h-auto[data-side="bottom"] { height: auto; }
.data-\[side\=left\]\:h-full[data-side="left"] { height: 100%; }
.data-\[side\=right\]\:h-full[data-side="right"] { height: 100%; }
.data-\[side\=top\]\:h-auto[data-side="top"] { height: auto; }
.data-\[side\=left\]\:w-3\/4[data-side="left"] { width: 75%; }
.data-\[side\=right\]\:w-3\/4[data-side="right"] { width: 75%; }
.data-\[side\=left\]\:max-w-\[300px\][data-side="left"] { max-width: 300px; }
.data-\[side\=right\]\:max-w-\[300px\][data-side="right"] { max-width: 300px; }
.data-\[side\=bottom\]\:border-0[data-side="bottom"] { border-width: 0px; }
.data-\[side\=left\]\:border-0[data-side="left"] { border-width: 0px; }
.data-\[side\=right\]\:border-0[data-side="right"] { border-width: 0px; }
.data-\[side\=top\]\:border-0[data-side="top"] { border-width: 0px; }
.data-\[side\=bottom\]\:border-t[data-side="bottom"] { border-top-width: 1px; }
.data-\[side\=left\]\:border-r[data-side="left"] { border-right-width: 1px; }
.data-\[side\=right\]\:border-l[data-side="right"] { border-left-width: 1px; }
.data-\[side\=top\]\:border-b[data-side="top"] { border-bottom-width: 1px; }
.data-\[active\=true\]\:bg-sidebar-accent[data-active="true"] { background-color: var(--sidebar-accent); }
.data-\[active\]\:bg-secondary[data-active] { background-color: var(--surface-2); }
.data-\[selected\=true\]\:bg-secondary[data-selected="true"] { background-color: var(--surface-2); }
.data-\[state\=open\]\:bg-secondary[data-state="open"] { background-color: var(--surface-2); }
.data-\[state\=selected\]\:bg-\[var\(--surface-2\)\][data-state="selected"] { background-color: var(--surface-2); }
.data-\[size\=md\]\:text-\[13\.5px\][data-size="md"] { font-size: 13.5px; }
.data-\[size\=sm\]\:text-\[13px\][data-size="sm"] { font-size: 13px; }
.data-\[active\=true\]\:font-medium[data-active="true"] { font-weight: 500; }
.data-\[active\=true\]\:text-sidebar-accent-foreground[data-active="true"] { color: var(--sidebar-accent-foreground); }
.data-\[selected\=true\]\:text-foreground[data-selected="true"] { color: var(--text); }
.data-\[disabled\=true\]\:opacity-50[data-disabled="true"] { opacity: 0.5; }
.data-\[disabled\]\:opacity-50[data-disabled] { opacity: 0.5; }
.group[data-side="left"] .group-data-\[side\=left\]\:-right-\[16px\] { right: -16px; }
.group[data-side="right"] .group-data-\[side\=right\]\:left-0 { left: 0px; }
.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:top-full { top: 100%; }
.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:-mt-\[32px\] { margin-top: -32px; }
.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:mt-\[6px\] { margin-top: 6px; }
.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:hidden { display: none; }
.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:\!size-\[32px\] { width: 32px !important; height: 32px !important; }
.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)\+16px\)\] { width: calc(var(--sidebar-width-icon) + 16px); }
.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)\+18px\)\] { width: calc(var(--sidebar-width-icon) + 18px); }
.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:w-\[var\(--sidebar-width-icon\)\] { width: var(--sidebar-width-icon); }
.group[data-collapsible="offcanvas"] .group-data-\[collapsible\=offcanvas\]\:w-0 { width: 0px; }
.group[data-collapsible="offcanvas"] .group-data-\[collapsible\=offcanvas\]\:translate-x-0 { --tw-translate-x: 0px; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }
.group[data-side="right"] .group-data-\[side\=right\]\:rotate-180 { --tw-rotate: 180deg; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }
.group\/navigation-menu-trigger[data-state="open"] .group-data-\[state\=open\]\/navigation-menu-trigger\:rotate-180 { --tw-rotate: 180deg; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }
.group[data-side="left"] .group-data-\[side\=left\]\:cursor-w-resize { cursor: w-resize; }
.group[data-side="right"] .group-data-\[side\=right\]\:cursor-e-resize { cursor: e-resize; }
.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:overflow-hidden { overflow: hidden; }
.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:overflow-hidden { overflow: hidden; }
.group[data-side="left"] .group-data-\[side\=left\]\:border-r { border-right-width: 1px; }
.group[data-side="right"] .group-data-\[side\=right\]\:border-l { border-left-width: 1px; }
.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:bg-popover { background-color: var(--surface); }
.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:\!p-0 { padding: 0px !important; }
.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:\!p-\[8px\] { padding: 8px !important; }
.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:text-popover-foreground { color: var(--text); }
.group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:opacity-0 { opacity: 0; }
.group[data-variant="floating"] .group-data-\[variant\=floating\]\:shadow-sm { --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); }
.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:shadow-md { --tw-shadow: var(--shadow-lg); --tw-shadow-colored: var(--shadow-lg); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); }
.group[data-variant="floating"] .group-data-\[variant\=floating\]\: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); }
.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\: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); }
.group[data-variant="floating"] .group-data-\[variant\=floating\]\:ring-sidebar-border { --tw-ring-color: var(--sidebar-border); }
.group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:ring-\[var\(--hairline\)\] { --tw-ring-color: var(--hairline); }
.group[data-collapsible="offcanvas"] .group-data-\[collapsible\=offcanvas\]\:after\:left-full::after { content: var(--tw-content); left: 100%; }
.group[data-collapsible="offcanvas"] .hover\:group-data-\[collapsible\=offcanvas\]\:bg-sidebar:hover { background-color: var(--sidebar); }
.group[data-collapsible="offcanvas"] .data-\[side\=left\]\:group-data-\[collapsible\=offcanvas\]\:left-\[calc\(var\(--sidebar-width\)\*-1\)\][data-side="left"] { left: calc(var(--sidebar-width) * -1); }
.group[data-collapsible="offcanvas"] .data-\[side\=right\]\:group-data-\[collapsible\=offcanvas\]\:right-\[calc\(var\(--sidebar-width\)\*-1\)\][data-side="right"] { right: calc(var(--sidebar-width) * -1); }
@media (max-width: 991px) {
 .max-\[991px\]\:hidden { display: none; } }
@media not all and (min-width: 640px) {
 .max-sm\:hidden { display: none; } }
@media (min-width: 640px) {
 .sm\:col-span-2 { grid-column: span 2 / span 2; }
 .sm\:col-span-3 { grid-column: span 3 / span 3; }
 .sm\:inline { display: inline; }
 .sm\:table-cell { display: table-cell; }
 .sm\:w-\[224px\] { width: 224px; }
 .sm\:w-auto { width: auto; }
 .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
 .sm\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
 .sm\:grid-cols-\[1fr_3fr\] { grid-template-columns: 1fr 3fr; }
 .sm\:grid-cols-\[minmax\(0\2c 1fr\)_150px\] { grid-template-columns: minmax(0,1fr) 150px; }
 .sm\:gap-\[12px\] { gap: 12px; }
 .sm\:text-\[13px\] { font-size: 13px; }
 .sm\:focus-within\:w-\[288px\]:focus-within { width: 288px; } }
@media (min-width: 768px) {
 .md\:table-cell { display: table-cell; }
 .md\:grid-cols-\[minmax\(0\2c 1fr\)_340px\] { grid-template-columns: minmax(0,1fr) 340px; }
 .min-\[768px\]\:absolute { position: absolute; }
 .min-\[768px\]\:w-\[var\(--radix-navigation-menu-viewport-width\)\] { width: var(--radix-navigation-menu-viewport-width); }
 .min-\[768px\]\:w-auto { width: auto; } }
@media (min-width: 992px) {
 .min-\[992px\]\:opacity-0 { opacity: 0; } }
@media (min-width: 1024px) {
 .lg\:table-cell { display: table-cell; }
 .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
 .lg\:grid-cols-\[minmax\(0\2c 340px\)_minmax\(0\2c 1fr\)\] { grid-template-columns: minmax(0,340px) minmax(0,1fr); }
 .lg\:grid-cols-\[minmax\(0\2c 3fr\)_minmax\(0\2c 2fr\)\] { grid-template-columns: minmax(0,3fr) minmax(0,2fr); } }
.rtl\:origin-right:where([dir="rtl"], [dir="rtl"] *) { transform-origin: right; }
.rtl\:-rotate-90:where([dir="rtl"], [dir="rtl"] *) { --tw-rotate: -90deg; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }
.rtl\:rotate-90:where([dir="rtl"], [dir="rtl"] *) { --tw-rotate: 90deg; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }
.group\/page:hover .rtl\:group-hover\/page\:-translate-x-px:where([dir="rtl"], [dir="rtl"] *) { --tw-translate-x: -1px; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }
.group\/page:hover .rtl\:group-hover\/page\:translate-x-px:where([dir="rtl"], [dir="rtl"] *) { --tw-translate-x: 1px; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); }
.\[\&\.num\]\:text-right.num { text-align: right; }
.\[\&\:\:-webkit-search-cancel-button\]\:hidden::-webkit-search-cancel-button { display: none; }
.\[\&\>div\]\:min-w-\[100px\]>div { min-width: 100px; }
.\[\&\>div\]\:flex-1>div { flex: 1 1 0%; }
@media (min-width: 640px) {
 .sm\:\[\&\>div\]\:flex-none>div { flex: none; } }
.\[\&\>span\:last-child\]\:truncate>span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.\[\&\>svg\]\:mt-\[2px\]>svg { margin-top: 2px; }
.\[\&\>svg\]\:size-\[12px\]>svg { width: 12px; height: 12px; }
.\[\&\>svg\]\:size-\[16px\]>svg { width: 16px; height: 16px; }
.\[\&\>svg\]\:shrink-0>svg { flex-shrink: 0; }
.\[\&_\.num\]\:text-right .num { text-align: right; }
.\[\&_\[cmdk-group-heading\]\]\:px-\[8px\] [cmdk-group-heading] { padding-left: 8px; padding-right: 8px; }
.\[\&_\[cmdk-group-heading\]\]\:pb-\[4px\] [cmdk-group-heading] { padding-bottom: 4px; }
.\[\&_\[cmdk-group-heading\]\]\:pt-\[8px\] [cmdk-group-heading] { padding-top: 8px; }
.\[\&_\[cmdk-group-heading\]\]\:text-\[12px\] [cmdk-group-heading] { font-size: 12px; }
.\[\&_\[cmdk-group-heading\]\]\:font-semibold [cmdk-group-heading] { font-weight: 600; }
.\[\&_\[cmdk-group-heading\]\]\:text-muted-foreground [cmdk-group-heading] { color: var(--muted); }
.\[\&_p\]\:m-0 p { margin: 0px; }
.\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-\[16px\] svg:not([class*='size-']) { width: 16px; height: 16px; }
.\[\&_svg\]\:pointer-events-none svg { pointer-events: none; }
.\[\&_svg\]\:size-\[14px\] svg { width: 14px; height: 14px; }
.\[\&_svg\]\:size-\[16px\] svg { width: 16px; height: 16px; }
.\[\&_svg\]\:shrink-0 svg { flex-shrink: 0; }
.\[\&_tbody_td\]\:border-0 tbody td { border-width: 0px; }
.\[\&_tbody_td\]\:border-t tbody td { border-top-width: 1px; }
.\[\&_tbody_td\]\:border-solid tbody td { border-style: solid; }
.\[\&_tbody_td\]\:border-border tbody td { border-color: var(--border); }
.\[\&_tbody_td\]\:px-\[8px\] tbody td { padding-left: 8px; padding-right: 8px; }
.\[\&_tbody_td\]\:py-\[6px\] tbody td { padding-top: 6px; padding-bottom: 6px; }
.\[\&_tbody_td\]\:align-middle tbody td { vertical-align: middle; }
.\[\&_tbody_tr\:first-child_td\]\:border-t-0 tbody tr:first-child td { border-top-width: 0px; }
.\[\&_tbody_tr\:hover\]\:bg-\[var\(--surface-2\)\] tbody tr:hover { background-color: var(--surface-2); }
.\[\&_tfoot_td\]\:bg-\[var\(--sidebar\)\] tfoot td { background-color: var(--sidebar); }
.\[\&_tfoot_td\]\:px-\[8px\] tfoot td { padding-left: 8px; padding-right: 8px; }
.\[\&_tfoot_td\]\:py-\[6px\] tfoot td { padding-top: 6px; padding-bottom: 6px; }
.\[\&_tfoot_td\]\:font-semibold tfoot td { font-weight: 600; }
.\[\&_thead_th\]\:h-\[34px\] thead th { height: 34px; }
.\[\&_thead_th\]\:whitespace-nowrap thead th { white-space: nowrap; }
.\[\&_thead_th\]\:border-0 thead th { border-width: 0px; }
.\[\&_thead_th\]\:border-b thead th { border-bottom-width: 1px; }
.\[\&_thead_th\]\:border-solid thead th { border-style: solid; }
.\[\&_thead_th\]\:border-border thead th { border-color: var(--border); }
.\[\&_thead_th\]\:bg-\[var\(--sidebar\)\] thead th { background-color: var(--sidebar); }
.\[\&_thead_th\]\:px-\[8px\] thead th { padding-left: 8px; padding-right: 8px; }
.\[\&_thead_th\]\:text-left thead th { text-align: left; }
.\[\&_thead_th\]\:align-middle thead th { vertical-align: middle; }
.\[\&_thead_th\]\:text-\[13px\] thead th { font-size: 13px; }
.\[\&_thead_th\]\:font-medium thead th { font-weight: 500; }
.\[\&_thead_th\]\:text-muted-foreground thead th { color: var(--muted); }
.\[\&_tr\:last-child\]\:border-0 tr:last-child { border-width: 0px; }
.\[\&_tr\]\:border-0 tr { border-width: 0px; }
.\[\&_tr\]\:border-b tr { border-bottom-width: 1px; }
.\[\&_tr\]\:border-solid tr { border-style: solid; }
.\[\&_tr\]\:border-border tr { border-color: var(--border); }
[data-side=left][data-collapsible=offcanvas] .\[\[data-side\=left\]\[data-collapsible\=offcanvas\]_\&\]\:-right-\[8px\] { right: -8px; }
[data-side=left][data-state=collapsed] .\[\[data-side\=left\]\[data-state\=collapsed\]_\&\]\:cursor-e-resize { cursor: e-resize; }
[data-side=right][data-collapsible=offcanvas] .\[\[data-side\=right\]\[data-collapsible\=offcanvas\]_\&\]\:-left-\[8px\] { left: -8px; }
[data-side=right][data-state=collapsed] .\[\[data-side\=right\]\[data-state\=collapsed\]_\&\]\:cursor-w-resize { cursor: w-resize; }
/*!***********************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./node_modules/@fontsource-variable/inter/index.css ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************************/
/* inter-cyrillic-ext-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/_next/static/media/inter-cyrillic-ext-wght-normal.460bdf14.woff2) format('woff2-variations');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* inter-cyrillic-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/_next/static/media/inter-cyrillic-wght-normal.491cbc05.woff2) format('woff2-variations');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* inter-greek-ext-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/_next/static/media/inter-greek-ext-wght-normal.23aae568.woff2) format('woff2-variations');
  unicode-range: U+1F00-1FFF;
}

/* inter-greek-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/_next/static/media/inter-greek-wght-normal.4449bf7a.woff2) format('woff2-variations');
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* inter-vietnamese-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/_next/static/media/inter-vietnamese-wght-normal.113a630f.woff2) format('woff2-variations');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* inter-latin-ext-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/_next/static/media/inter-latin-ext-wght-normal.3835a68e.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* inter-latin-wght-normal */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/_next/static/media/inter-latin-wght-normal.6c596dfc.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/*!*******************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/styles/design.css ***!
  \*******************************************************************************************************************************************************************************************************************************************************************/
/* =====================================================================
   Mahi Trade ERP — design system
   Replaces the old Bootstrap 3 / Bootswatch theme (public/css/superhero.css).
   It implements the same class names the pages already use (row, col-*,
   form-control, btn, panel, table, modal, alert, label …) so every page,
   form and script keeps working — only the look is new.
   ===================================================================== */

:root {
  /* Segoe UI Variable (Windows 11) is hinted for 12–14px; plain Segoe UI on Windows 10 */
  --font: "Segoe UI Variable Text", "Segoe UI", Tahoma, Roboto, Arial, "Hind Siliguri", "Nirmala UI", sans-serif;
  --mono: Consolas, "Courier New", monospace;

  --bg: #eceff2;
  --surface: #ffffff;
  --surface-2: #f5f6f8;
  --surface-3: #e9ecef;
  --border: #d6dbe0;
  --border-strong: #bfc6ce;
  --text: #1e2a35;
  --text-2: #4a5662;
  --muted: #616c77; /* 4.6:1 on --bg, 5.3:1 on white (was #7d8893, 3.1:1 on --bg) */

  --primary: #1d5c99;
  --primary-600: #174d81;
  --primary-700: #123e69;
  --primary-50: #edf3f9;
  --primary-100: #d3e2f1;
  --ring: rgba(29, 92, 153, .22);

  --success: #2f7d32; --success-600: #26672a; --success-50: #eef7ee; --success-100: #cfe6d0; --success-text: #1e5222;
  --info: #1b7bb4;    --info-600: #166697;    --info-50: #ecf5fb;    --info-100: #cde4f2;    --info-text: #114e72;
  --warning: #b86e00; --warning-600: #965a00; --warning-50: #fdf6e8; --warning-100: #f3e0b5; --warning-text: #6e4300;
  --danger: #c0392b;  --danger-600: #a03024;  --danger-50: #fbefed;  --danger-100: #f1cdc8;  --danger-text: #7f241b;

  --sidebar-bg: #22303c;
  --sidebar-bg-2: #22303c;
  --sidebar-text: #c3ccd5;
  --sidebar-text-strong: #ffffff;
  --sidebar-hover: rgba(255, 255, 255, .07);
  --sidebar-active: #1d5c99;

  --radius-sm: 2px;
  --radius: 3px;
  --radius-lg: 4px;
  --radius-xl: 4px;
  --shadow-xs: none;
  --shadow-sm: none;
  --shadow: 0 1px 2px rgba(0, 0, 0, .08);
  --shadow-lg: 0 3px 10px rgba(0, 0, 0, .14);
  --shadow-xl: 0 6px 20px rgba(0, 0, 0, .2);

  /* control heights: fields and buttons line up in every row */
  --control-h: 32px;
  --control-h-sm: 29px;
  --control-h-xs: 24px;
  --ease: cubic-bezier(.2, 0, 0, 1);

  --sidebar-w: 216px;
  --sidebar-w-collapsed: 52px;
  --topbar-h: 44px;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 14px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body {
  margin: 0; font-family: var(--font); font-size: 14px; line-height: 1.45; color: var(--text); background: var(--bg);
}
article, aside, footer, header, main, nav, section { display: block; }
[hidden], template { display: none; }
a { color: var(--primary); text-decoration: none; background: transparent; transition: color .15s; }
a:hover, a:focus { color: var(--primary-700); text-decoration: none; } /* owner 2026-11-10: no underline on links */
a:focus-visible, button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
b, strong { font-weight: 600; }
small, .small { font-size: 85%; }
mark, .mark { background: #fef9c3; padding: .1em .25em; border-radius: 3px; }
img { border: 0; vertical-align: middle; max-width: 100%; }
svg:not(:root) { overflow: hidden; }
hr { height: 0; margin: 10px 0; border: 0; border-top: 1px solid var(--border); }
code, kbd, pre, samp { font-family: var(--mono); font-size: .92em; }
code { padding: 2px 5px; background: var(--surface-3); border-radius: 4px; color: #be185d; }
pre { display: block; padding: 12px; margin: 0 0 12px; overflow: auto; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); }
button, input, optgroup, select, textarea { font: inherit; color: inherit; margin: 0; }
button { overflow: visible; text-transform: none; cursor: pointer; }
button[disabled], html input[disabled] { cursor: not-allowed; }
input { line-height: normal; }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; accent-color: var(--primary); width: 15px; height: 15px; vertical-align: -2px; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; }
fieldset { min-width: 0; padding: 0; margin: 0; border: 0; }
legend { display: block; width: 100%; padding: 0; margin-bottom: 16px; font-size: 16px; font-weight: 600; color: var(--text); border: 0; border-bottom: 1px solid var(--border); padding-bottom: 6px; }
label { display: inline-block; max-width: 100%; margin-bottom: 3px; font-weight: 600; color: var(--text-2); font-size: 13px; }
textarea { overflow: auto; }
table { border-collapse: collapse; border-spacing: 0; }
td, th { padding: 0; }
th { text-align: left; }
caption { padding: 8px 0; color: var(--muted); text-align: left; }
p { margin: 0 0 10px; }
ul, ol { margin-top: 0; margin-bottom: 10px; }
ul ul, ol ol, ul ol, ol ul { margin-bottom: 0; }
dl { margin-top: 0; margin-bottom: 18px; }
dt { font-weight: 600; } dd { margin-left: 0; }
abbr[title] { cursor: help; border-bottom: 1px dotted var(--muted); text-decoration: none; }
address { margin-bottom: 18px; font-style: normal; line-height: 1.5; }
blockquote { padding: 8px 16px; margin: 0 0 18px; border-left: 1px solid var(--border-strong); color: var(--text-2); }
::-moz-selection { background: var(--primary-100); color: var(--primary-700); }
::selection { background: var(--primary-100); color: var(--primary-700); }

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4 { font-family: var(--font); font-weight: 600; line-height: 1.25; color: var(--text); }
h1, .h1, h2, .h2, h3, .h3 { margin-top: 12px; margin-bottom: 8px; }
h4, .h4, h5, h6 { margin-top: 8px; margin-bottom: 6px; }
h1, .h1 { font-size: 19px; }
h2, .h2 { font-size: 17px; }
h3, .h3 { font-size: 15px; }
h4, .h4 { font-size: 14px; }
h5 { font-size: 14px; }
h6 { font-size: 12px; color: var(--text-2); }
h1 small, h2 small, h3 small, h4 small { font-weight: 400; color: var(--muted); font-size: 70%; }
.lead { margin-bottom: 18px; font-size: 16px; font-weight: 400; color: var(--text-2); }

/* ---------- text & helpers ---------- */
.text-left { text-align: left; } .text-right { text-align: right; } .text-center { text-align: center; } .text-justify { text-align: justify; }

 .text-uppercase { text-transform: uppercase; } .text-capitalize { text-transform: capitalize; }
.text-muted { color: var(--muted); }
.text-primary { color: var(--primary); } a.text-primary:hover { color: var(--primary-700); }
 .text-info { color: var(--info); }
 .text-danger { color: var(--danger); }
.bg-primary { color: #fff; background-color: var(--primary); }
 .bg-info { background-color: var(--info-50); }
 .bg-danger { background-color: var(--danger-50); }

 .list-inline > li { display: inline-block; padding-left: 5px; padding-right: 5px; }
 .pull-left { float: left !important; }

.hide { display: none !important; } .show { display: block !important; } .invisible { visibility: hidden; }

/* .hidden (Bootstrap, display:none !important) removed 2026-11-10: it beat Tailwind's responsive variants; Tailwind's own hidden utility does the job */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }
.img-responsive { display: block; max-width: 100%; height: auto; }
 .img-circle { border-radius: 50%; }
.container::before, .container::after, .row::before, .row::after, .form-horizontal .form-group::before, .form-horizontal .form-group::after, .nav::before, .nav::after, .navbar::before, .navbar::after, .pager::before, .pager::after, .panel-body::before, .panel-body::after, .modal-header::before, .modal-header::after, .modal-footer::before, .modal-footer::after {
  content: " "; display: table;
}
.container::after, .row::after, .form-horizontal .form-group::after, .nav::after, .navbar::after, .pager::after, .panel-body::after, .modal-header::after, .modal-footer::after { clear: both; }
.caret {
  display: inline-block; width: 0; height: 0; margin-left: 4px; vertical-align: middle;
  border-top: 4px dashed; border-right: 4px solid transparent; border-left: 4px solid transparent;
}
.close {
  float: right; font-size: 20px; font-weight: 600; line-height: 1; color: var(--text); opacity: .35; text-shadow: none;
}
.close:hover, .close:focus { color: var(--text); text-decoration: none; cursor: pointer; opacity: .7; }
button.close { padding: 0; cursor: pointer; background: transparent; border: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
.page-header { padding-bottom: 6px; margin: 0 0 12px; border-bottom: 1px solid var(--border); }
.page-header h1 { margin: 0; }

/* ---------- grid (Bootstrap-3 compatible, see grid.css for the columns) ---------- */
.container { margin-right: auto; margin-left: auto; padding-left: 15px; padding-right: 15px; width: 100%; }

.row { margin-left: -15px; margin-right: -15px; }

/* ---------- tables ---------- */
table { background-color: transparent; }
.table { width: 100%; max-width: 100%; margin-bottom: 12px; background: var(--surface); font-variant-numeric: tabular-nums; }
.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th,
.table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
  padding: 5px 8px; line-height: 1.42857; vertical-align: top; border-top: 1px solid var(--border);
}
.table > thead > tr > th {
  vertical-align: bottom; border-bottom: 1px solid var(--border-strong); background: #e8ebee;
  font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap;
}
.table > caption + thead > tr:first-child > th, .table > colgroup + thead > tr:first-child > th,
.table > thead:first-child > tr:first-child > th, .table > caption + thead > tr:first-child > td,
.table > colgroup + thead > tr:first-child > td, .table > thead:first-child > tr:first-child > td { border-top: 0; }
.table > tbody + tbody { border-top: 2px solid var(--border); }
.table .table { background-color: var(--surface); }
.table-condensed > thead > tr > th, .table-condensed > tbody > tr > th, .table-condensed > tfoot > tr > th,
.table-condensed > thead > tr > td, .table-condensed > tbody > tr > td, .table-condensed > tfoot > tr > td { padding: 3px 6px; }
.table-bordered { border: 1px solid var(--border); }
.table-bordered > thead > tr > th, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td, .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td { border: 1px solid var(--border); }
.table-bordered > thead > tr > th, .table-bordered > thead > tr > td { border-bottom-width: 1px; }
.table-striped > tbody > tr:nth-of-type(odd) { background-color: #f7f8fa; }
.table-hover > tbody > tr:hover { background-color: #eef3f8; }
table col[class*="col-"] { position: static; float: none; display: table-column; }
table td[class*="col-"], table th[class*="col-"] { position: static; float: none; display: table-cell; }
.table > thead > tr > td.active, .table > tbody > tr > td.active, .table > tfoot > tr > td.active,
.table > thead > tr > th.active, .table > tbody > tr > th.active, .table > tfoot > tr > th.active,
.table > thead > tr.active > td, .table > tbody > tr.active > td, .table > tfoot > tr.active > td,
.table > thead > tr.active > th, .table > tbody > tr.active > th, .table > tfoot > tr.active > th { background-color: var(--surface-3); }
.table > tbody > tr.success > td, .table > tbody > tr > td.success, .table > tbody > tr.success > th, .table > tfoot > tr.success > td { background-color: var(--success-50); }
.table > tbody > tr.info > td, .table > tbody > tr > td.info, .table > tbody > tr.info > th, .table > tfoot > tr.info > td { background-color: var(--info-50); }
.table > tbody > tr.warning > td, .table > tbody > tr > td.warning, .table > tbody > tr.warning > th, .table > tfoot > tr.warning > td { background-color: var(--warning-50); }
.table > tbody > tr.danger > td, .table > tbody > tr > td.danger, .table > tbody > tr.danger > th, .table > tfoot > tr.danger > td { background-color: var(--danger-50); }
.table-responsive { overflow-x: auto; min-height: .01%; -webkit-overflow-scrolling: touch; }
.table-responsive > .table { margin-bottom: 0; }
.table > tfoot > tr > td, .table > tfoot > tr > th { font-weight: 650; background: var(--surface-2); }
/* ledger convention: a rule above the totals, a double rule under the last one */
.table > tfoot > tr:first-child > td, .table > tfoot > tr:first-child > th { border-top: 1px solid var(--text-2); }
.table > tfoot > tr:last-child > td, .table > tfoot > tr:last-child > th { border-bottom: 3px double var(--text-2); }
/* sortable column heads (DataTable) */
.table > thead > tr > th[aria-sort] { padding: 0; }

.table > thead > tr > th { vertical-align: middle; }







/* ---------- forms ---------- */
output { display: block; padding-top: 7px; font-size: 13.5px; line-height: 1.5; color: var(--text); }
.form-control {
  display: block; width: 100%; height: 32px; padding: 5px 9px; font-size: 14px; line-height: 1.42857; color: var(--text);
  background-color: var(--surface); background-image: none; border: 1px solid var(--border-strong); border-radius: var(--radius);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.form-control:focus { border-color: var(--primary); outline: 0; box-shadow: 0 0 0 2px var(--ring); }
/* the browser's own validation, shown only after the user has touched the field */
.form-control:user-invalid { border-color: #e08b80; }
.form-control:user-invalid:focus { border-color: var(--danger); box-shadow: 0 0 0 2px rgba(192, 57, 43, .18); }
.form-control::-moz-placeholder { color: #6b7681; opacity: 1; }
.form-control::placeholder { color: #6b7681; opacity: 1; } /* legacy forms use placeholders as labels: keep them AA */
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control { background-color: var(--surface-2); opacity: 1; }
.form-control[readonly] { color: var(--text); }
.form-control[readonly]:focus { box-shadow: none; border-color: var(--border-strong); }
.form-control[disabled], fieldset[disabled] .form-control { cursor: not-allowed; color: var(--muted); }
textarea.form-control { height: auto; min-height: 64px; }
select.form-control { padding-right: 4px; }
select[multiple].form-control, select[size].form-control { height: auto; }
input[type="search"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; }
input[type="date"].form-control, input[type="time"].form-control, input[type="datetime-local"].form-control, input[type="month"].form-control { line-height: 1.2; }
input[type="file"] { display: block; }
.form-group { margin-bottom: 10px; }
.help-block { display: block; margin-top: 3px; margin-bottom: 6px; color: var(--muted); font-size: 12px; }
.control-label { color: var(--text-2); }


.input-sm, .form-group-sm .form-control {
  height: 29px; padding: 3px 8px; font-size: 13px; line-height: 1.42857; border-radius: var(--radius-sm);
}
select.input-sm, .form-group-sm select.form-control { height: 29px; line-height: 1.2; padding-right: 2px; }
textarea.input-sm, select[multiple].input-sm, .form-group-sm textarea.form-control, .form-group-sm select[multiple].form-control { height: auto; }





.has-error .help-block, .has-error .control-label, .has-error .radio, .has-error .checkbox, .has-error.radio label, .has-error.checkbox label { color: var(--danger); }
.has-error .form-control { border-color: #f19a9a; background-color: #fffafa; }
.has-error .form-control:focus { border-color: var(--danger); box-shadow: 0 0 0 2px rgba(192, 57, 43, .18); }
.has-error .input-group-addon { color: var(--danger); border-color: #f19a9a; background-color: var(--danger-50); }





.radio, .checkbox { position: relative; display: block; margin-top: 8px; margin-bottom: 8px; }
.radio label, .checkbox label { min-height: 18px; padding-left: 22px; margin-bottom: 0; font-weight: 500; cursor: pointer; color: var(--text); font-size: 14px; }
.radio input[type="radio"], .checkbox input[type="checkbox"], .checkbox-inline input[type="checkbox"] { position: absolute; margin-left: -22px; margin-top: 2px; }
.radio + .radio, .checkbox + .checkbox { margin-top: -4px; }
.checkbox-inline { position: relative; display: inline-block; padding-left: 22px; margin-bottom: 0; vertical-align: middle; font-weight: 500; cursor: pointer; color: var(--text); }
.checkbox-inline + .checkbox-inline { margin-top: 0; margin-left: 12px; }

@media (min-width: 768px) {
  .form-inline .form-group { display: inline-block; margin-bottom: 0; vertical-align: middle; }
  .form-inline .form-control { display: inline-block; width: auto; vertical-align: middle; }

  .form-inline .input-group { display: inline-table; vertical-align: middle; }
.form-inline .input-group .input-group-addon, .form-inline .input-group .form-control { width: auto; }
  .form-inline .input-group > .form-control { width: 100%; }
  .form-inline .control-label { margin-bottom: 0; vertical-align: middle; }
  .form-inline .radio, .form-inline .checkbox { display: inline-block; margin-top: 0; margin-bottom: 0; vertical-align: middle; }
  .form-inline .radio label, .form-inline .checkbox label { padding-left: 0; }
  .form-inline .radio input[type="radio"], .form-inline .checkbox input[type="checkbox"] { position: relative; margin-left: 0; }
}
.form-horizontal .radio, .form-horizontal .checkbox, .form-horizontal .checkbox-inline { margin-top: 0; margin-bottom: 0; padding-top: 7px; }
.form-horizontal .radio, .form-horizontal .checkbox { min-height: 25px; }
.form-horizontal .form-group { margin-left: -15px; margin-right: -15px; }
@media (min-width: 768px) {
  .form-horizontal .control-label { text-align: right; margin-bottom: 0; padding-top: 8px; }
  .form-horizontal .form-group-sm .control-label { padding-top: 6px; font-size: 12.5px; }

}

/* ---------- input groups ---------- */
.input-group { position: relative; display: table; border-collapse: separate; width: 100%; }
.input-group[class*="col-"] { float: none; padding-left: 0; padding-right: 0; }
.input-group .form-control { position: relative; z-index: 2; float: left; width: 100%; margin-bottom: 0; box-shadow: none; }
.input-group .form-control:focus { z-index: 3; }

.input-group-sm > .form-control, .input-group-sm > .input-group-addon {
  height: 29px; padding: 3px 8px; font-size: 13px; line-height: 1.42857; border-radius: var(--radius-sm);
}
select.input-group-sm > .form-control, .input-group-sm > select.form-control { height: 29px; line-height: 1.2; padding-right: 2px; }
.input-group-addon, .input-group .form-control { display: table-cell; }
.input-group-addon:not(:first-child):not(:last-child), .input-group .form-control:not(:first-child):not(:last-child) { border-radius: 0; }
.input-group-addon { width: 1%; white-space: nowrap; vertical-align: middle;
  padding: 5px 9px; font-size: 14px; font-weight: 400; line-height: 1; color: var(--text-2); text-align: center;
  background-color: #eef0f2; border: 1px solid var(--border-strong); border-radius: var(--radius); }
.input-group-addon input[type="radio"], .input-group-addon input[type="checkbox"] { margin-top: 0; }
.input-group-addon img { max-width: none; }
.input-group-addon a { display: inline-block; line-height: 1; }
.input-group .form-control:first-child, .input-group-addon:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group-addon:first-child { border-right: 0; }
.input-group .form-control:last-child, .input-group-addon:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-group-addon:last-child { border-left: 0; }






/* ---------- buttons ---------- */
.btn {
  display: inline-block; margin-bottom: 0; font-weight: 500; text-align: center; vertical-align: middle; touch-action: manipulation;
  cursor: pointer; background-image: none; border: 1px solid transparent; white-space: nowrap;
  min-height: var(--control-h); padding: 5px 12px; font-size: 14px; line-height: 20px; border-radius: var(--radius); -webkit-user-select: none; -moz-user-select: none; user-select: none;
  color: var(--text); background-color: #f4f5f7; border-color: var(--border-strong);
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
  text-decoration: none;
}
.btn:hover, .btn:focus, .btn.focus { color: var(--text); text-decoration: none; background-color: #e8eaed; }
.btn:focus-visible { outline: 0; box-shadow: 0 0 0 2px var(--ring); }
.btn:active, .btn.active { box-shadow: inset 0 2px 3px rgba(0, 0, 0, .12); }
.btn.disabled, .btn[disabled], fieldset[disabled] .btn { cursor: not-allowed; opacity: .55; box-shadow: none; }
a.btn.disabled, fieldset[disabled] a.btn { pointer-events: none; }
.btn .glyphicon { top: 0; vertical-align: -1px; }
.btn-default { color: var(--text); background-color: #f4f5f7; border-color: var(--border-strong); }
.btn-default:hover, .btn-default:focus { background-color: #e8eaed; border-color: #aab2bc; color: var(--text); }
.btn-primary { color: #fff; background-color: var(--primary); border-color: var(--primary-600); }
.btn-primary:hover, .btn-primary:focus, .btn-primary.active, .btn-primary:active { color: #fff; background-color: var(--primary-600); border-color: var(--primary-600); }
.btn-success { color: #fff; background-color: var(--success); border-color: var(--success-600); }
.btn-success:hover, .btn-success:focus, .btn-success.active, .btn-success:active { color: #fff; background-color: var(--success-600); border-color: var(--success-600); }
.btn-info { color: #fff; background-color: var(--info); border-color: var(--info); }
.btn-info:hover, .btn-info:focus, .btn-info.active, .btn-info:active { color: #fff; background-color: var(--info-600); border-color: var(--info-600); }
.btn-warning { color: #fff; background-color: var(--warning); border-color: var(--warning); }
.btn-warning:hover, .btn-warning:focus, .btn-warning.active, .btn-warning:active { color: #fff; background-color: var(--warning-600); border-color: var(--warning-600); }
.btn-danger { color: #fff; background-color: var(--danger); border-color: var(--danger); }
.btn-danger:hover, .btn-danger:focus, .btn-danger.active, .btn-danger:active { color: #fff; background-color: var(--danger-600); border-color: var(--danger-600); }
.btn-primary.disabled:hover, .btn-primary[disabled]:hover { background-color: var(--primary); }
.btn-success.disabled:hover, .btn-success[disabled]:hover { background-color: var(--success); }
.btn-danger.disabled:hover, .btn-danger[disabled]:hover { background-color: var(--danger); }


.btn-lg { min-height: 38px; padding: 8px 16px; font-size: 15px; line-height: 20px; border-radius: var(--radius); }
.btn-sm, .btn-small { min-height: var(--control-h-sm); padding: 4px 10px; font-size: 13px; line-height: 19px; border-radius: var(--radius-sm); }
.btn-xs { min-height: var(--control-h-xs); padding: 2px 7px; font-size: 12px; line-height: 18px; border-radius: var(--radius-sm); }
/* icon-only line buttons (add / remove line) sit square beside a 29–32px field */
.btn-xs:has(> .glyphicon:only-child) { min-width: var(--control-h-xs); padding-left: 0; padding-right: 0; }
.btn-default.btn-xs:has(> .glyphicon-remove:only-child) { color: var(--text-2); }
.btn-default.btn-xs:has(> .glyphicon-remove:only-child):hover { color: var(--danger); border-color: #d9a39d; background: var(--danger-50); }
.btn-block { display: block; width: 100%; }
.btn-block + .btn-block { margin-top: 6px; }
input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="button"].btn-block { width: 100%; }
.btn-group { position: relative; display: inline-block; vertical-align: middle; }
.btn-group > .btn { position: relative; float: left; }
.btn-group > .btn:hover, .btn-group > .btn:focus, .btn-group > .btn:active, .btn-group > .btn.active { z-index: 2; }
.btn-group .btn + .btn, .btn-group .btn + .btn-group, .btn-group .btn-group + .btn, .btn-group .btn-group + .btn-group { margin-left: -1px; }

.btn-group > .btn:first-child { margin-left: 0; }

.btn-group > .btn:last-child:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
/* `.col-xs-12 btn-group` wraps single submit buttons in the legacy forms: keep it a full-width block */
[class*="col-"].btn-group { display: block; float: left; }
[class*="col-"].btn-group > .btn { float: none; }
[class*="col-"].btn-group > .btn.float-right { float: right; }






.dropdown { position: relative; }

.dropdown-menu {
  position: absolute; top: 100%; left: 0; z-index: 1000; display: none; float: left; min-width: 160px; padding: 3px 0; margin: 2px 0 0;
  list-style: none; font-size: 14px; text-align: left; background-color: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius); box-shadow: var(--shadow-lg); background-clip: padding-box;
}

.dropdown-menu .divider { height: 1px; margin: 3px 0; overflow: hidden; background-color: var(--border); }
.dropdown-menu > li > a {
  display: block; padding: 4px 12px; clear: both; font-weight: 400; line-height: 1.42857; color: var(--text); white-space: nowrap; cursor: pointer;
}
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { text-decoration: none; color: var(--text); background-color: var(--surface-3); }
.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus { color: #fff; background-color: var(--primary); }
.dropdown-menu > .disabled > a, .dropdown-menu > .disabled > a:hover { color: var(--muted); cursor: not-allowed; background: transparent; }
.open > .dropdown-menu { display: block; }
.open > a { outline: 0; }


/* ---------- navs / pagination ---------- */
.nav { margin-bottom: 0; padding-left: 0; list-style: none; }
.nav > li { position: relative; display: block; }
.nav > li > a { position: relative; display: block; padding: 8px 14px; border-radius: var(--radius); color: var(--text-2); }
.nav > li > a:hover, .nav > li > a:focus { text-decoration: none; background-color: var(--surface-3); color: var(--text); }







.breadcrumb { padding: 8px 14px; margin-bottom: 18px; list-style: none; background-color: var(--surface-2); border-radius: var(--radius); }
.breadcrumb > li { display: inline-block; }
.breadcrumb > li + li::before { content: "/\00a0"; padding: 0 5px; color: var(--muted); }
.breadcrumb > .active { color: var(--muted); }

.pagination { display: inline-flex; flex-wrap: wrap; padding-left: 0; margin: 12px 0; list-style: none; }
.pagination > li { display: inline; }
.pagination > li > a, .pagination > li > span {
  position: relative; float: left; min-width: 28px; text-align: center; padding: 3px 9px; margin-left: -1px; line-height: 1.42857; text-decoration: none;
  color: var(--primary); background-color: var(--surface); border: 1px solid var(--border-strong);
}
.pagination > li:first-child > a, .pagination > li:first-child > span { margin-left: 0; border-radius: var(--radius) 0 0 var(--radius); }
.pagination > li:last-child > a, .pagination > li:last-child > span { border-radius: 0 var(--radius) var(--radius) 0; }
.pagination > li > a:hover, .pagination > li > span:hover, .pagination > li > a:focus { color: var(--primary-700); background-color: var(--surface-3); }
.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > a:focus {
  z-index: 3; color: #fff; background-color: var(--primary); border-color: var(--primary); cursor: default;
}
.pagination > .disabled > span, .pagination > .disabled > a, .pagination > .disabled > a:hover, .pagination > .disabled > a:focus {
  color: #b5bfcc; background-color: var(--surface); border-color: var(--border); cursor: not-allowed;
}


.pager { padding-left: 0; margin: 18px 0; list-style: none; text-align: center; }
.pager li { display: inline; }
.pager li > a, .pager li > span { display: inline-block; padding: 5px 14px; background-color: var(--surface); border: 1px solid var(--border); border-radius: 999px; }

/* legacy top navbar (only used by a few stand-alone pages now) */
.navbar { position: relative; min-height: 52px; margin-bottom: 18px; border: 1px solid transparent; }





@media (min-width: 768px) { .navbar-nav { float: left; margin: 0; } .navbar-nav > li { float: left; } .navbar-right { float: right !important; } .navbar-header { float: left; } .navbar-collapse.collapse { display: block !important; } .navbar-toggle { display: none; } }

.collapse { display: none; } .collapse.in { display: block; }

/* ---------- labels, badges ---------- */
.label {
  display: inline-block; padding: .2em .55em; font-size: 75%; font-weight: 600; line-height: 1.2; color: #fff; text-align: center;
  white-space: nowrap; vertical-align: baseline; border-radius: var(--radius-sm);
}
a.label:hover, a.label:focus { text-decoration: none; cursor: pointer; }
.label:empty { display: none; }
.btn .label { position: relative; top: -1px; }
/* status labels are tinted chips: calm in a long list, still unmistakable */
.label { border: 1px solid transparent; }
.label-default { color: var(--text-2); background-color: var(--surface-3); border-color: var(--border); }

.label-success { color: var(--success-text); background-color: var(--success-50); border-color: var(--success-100); }

.label-warning { color: var(--warning-text); background-color: var(--warning-50); border-color: var(--warning-100); }
.label-danger { color: var(--danger-text); background-color: var(--danger-50); border-color: var(--danger-100); }
a.label:hover, a.label:focus { filter: brightness(.96); }
.badge {
  display: inline-block; min-width: 18px; padding: 1px 6px; font-size: 11.5px; font-weight: 600; color: #fff; line-height: 1.35;
  vertical-align: middle; white-space: nowrap; text-align: center; background-color: #6b7681; border-radius: 9px;
}
.badge:empty { display: none; }
.btn .badge { position: relative; top: -1px; }



/* ---------- panels (cards) ---------- */
.panel {
  margin-bottom: 12px; background-color: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.panel-body { padding: 10px 12px; }
.panel-heading {
  padding: 6px 12px; border-bottom: 1px solid var(--border); border-top-left-radius: calc(var(--radius-lg) - 1px);
  border-top-right-radius: calc(var(--radius-lg) - 1px); background: var(--surface);
}

.panel-heading h1, .panel-heading h2, .panel-heading h3, .panel-heading h4, .panel-heading h5 { margin-top: 3px; margin-bottom: 3px; }
.panel-title { margin-top: 0; margin-bottom: 0; font-size: 14px; font-weight: 600; color: inherit; }
.panel-title > a, .panel-title > small, .panel-title > .small { color: inherit; }
.panel-footer {
  padding: 6px 12px; background-color: var(--surface-2); border-top: 1px solid var(--border);
  border-bottom-right-radius: calc(var(--radius-lg) - 1px); border-bottom-left-radius: calc(var(--radius-lg) - 1px);
}
.panel > .table, .panel > .table-responsive > .table { margin-bottom: 0; }
.panel > .table:first-child, .panel > .table-responsive:first-child > .table:first-child { border-top-left-radius: var(--radius-lg); border-top-right-radius: var(--radius-lg); }
.panel > .panel-body + .table, .panel > .panel-body + .table-responsive, .panel > .table + .panel-body { border-top: 1px solid var(--border); }
.panel > .table-bordered, .panel > .table-responsive > .table-bordered { border: 0; }

 .panel-group .panel + .panel { margin-top: 6px; }
.panel-default > .panel-heading { color: var(--text); background-color: #f0f2f4; }











/* ---------- wells, alerts, list group, progress, thumbnails ---------- */
.well {
  min-height: 20px; padding: 10px 12px; margin-bottom: 12px; background-color: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.well blockquote { border-color: var(--border-strong); }



.alert {
  position: relative; padding: 7px 12px; margin-bottom: 12px; border: 1px solid transparent; border-radius: var(--radius);
  font-size: 14px;
}
/* each state alert carries its icon (drawn from --alert-icon, tinted with the text colour) */
.alert:is(.alert-success, .alert-warning, .alert-danger) { padding-left: 34px; }
.alert:is(.alert-success, .alert-warning, .alert-danger)::before {
  content: ""; position: absolute; left: 11px; top: 9px; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: var(--alert-icon) center / contain no-repeat; mask: var(--alert-icon) center / contain no-repeat;
}
.alert h4 { margin-top: 0; color: inherit; }

.alert > p, .alert > ul { margin-bottom: 0; }
.alert > p + p { margin-top: 5px; }
.alert .close { position: relative; top: -1px; color: inherit; }


.alert-success { background-color: var(--success-50); border-color: var(--success-100); border-left-color: var(--success); color: var(--success-text);
  --alert-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3e%3ccircle cx='12' cy='12' r='10'/%3e%3cpath d='m8.5 12.5 2.5 2.5 5-5.5'/%3e%3c/svg%3e"); }

.alert-warning { background-color: var(--warning-50); border-color: var(--warning-100); border-left-color: var(--warning); color: var(--warning-text);
  --alert-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0z'/%3e%3cpath d='M12 9v4M12 17v.01'/%3e%3c/svg%3e"); }
.alert-danger { background-color: var(--danger-50); border-color: var(--danger-100); border-left-color: var(--danger); color: var(--danger-text);
  --alert-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3e%3ccircle cx='12' cy='12' r='10'/%3e%3cpath d='m15 9-6 6M9 9l6 6'/%3e%3c/svg%3e"); }

/* one even 1px frame; the icon carries the state */
.alert-success { border-left-color: var(--success-100); } .alert-info { border-left-color: var(--info-100); }
.alert-warning { border-left-color: var(--warning-100); } .alert-danger { border-left-color: var(--danger-100); }









.progress { overflow: hidden; height: 10px; margin-bottom: 18px; background-color: var(--surface-3); border-radius: 999px; }

 .progress-bar-info { background-color: var(--info); }
 .progress-bar-danger { background-color: var(--danger); }


.media { overflow: hidden; zoom: 1; } .media-body { width: 10000px; } .media-left, .media-right, .media-body { display: table-cell; vertical-align: top; }


.modal { display: none; overflow: hidden; position: fixed; inset: 0; z-index: 1050; -webkit-overflow-scrolling: touch; outline: 0; }
.modal.fade .modal-dialog { transform: translate(0, -10px); transition: transform .15s ease-out; }
.modal.in .modal-dialog { transform: none; }
.modal.in { overflow-x: hidden; overflow-y: auto; }
.modal-dialog { position: relative; width: auto; margin: 12px; max-width: calc(100vw - 24px); }
.modal-content {
  position: relative; background-color: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl); background-clip: padding-box; outline: 0; overflow: hidden;
}
.modal-backdrop { position: fixed; inset: 0; z-index: 1040; background-color: #0b1324; }
.modal-backdrop.fade { opacity: 0; } .modal-backdrop.in { opacity: .4; }
.modal-header { padding: 8px 14px; border-bottom: 1px solid var(--border); background: #f0f2f4; }
.modal-header .close { margin-top: 0; font-size: 22px; line-height: 20px; }
.modal-title { margin: 0; line-height: 1.4; font-size: 14px; font-weight: 600; }
.modal-body { position: relative; padding: 12px 14px; max-height: calc(100vh - 160px); overflow-y: auto; }
.modal-footer { padding: 8px 14px; text-align: right; border-top: 1px solid var(--border); background: var(--surface-2); }
.modal-footer .btn + .btn { margin-left: 5px; margin-bottom: 0; }

@media (min-width: 768px) {
  .modal-dialog { width: 600px; margin: 40px auto; }

}
@media (min-width: 992px) { .modal-lg { width: 900px; } }
.fade { opacity: 0; transition: opacity .15s linear; } .fade.in { opacity: 1; }
/* .fade.in above would otherwise make every dialog backdrop fully opaque */
.modal-backdrop.fade.in { opacity: .4; }

/* ---------- tooltips / popovers (rare) ---------- */
.tooltip { position: absolute; z-index: 1070; display: block; font-size: 12px; opacity: 0; } .tooltip.in { opacity: .95; }



@media (max-width: 767px) { .visible-xs { display: block !important; } .hidden-xs { display: none !important; } }
@media (min-width: 768px) and (max-width: 991px) { .visible-sm { display: block !important; } .hidden-sm { display: none !important; } }
@media (min-width: 992px) and (max-width: 1199px) { .visible-md { display: block !important; } .hidden-md { display: none !important; } }
@media (min-width: 1200px) { .visible-lg { display: block !important; } .hidden-lg { display: none !important; } }

@media print { .visible-print { display: block !important; } .hidden-print { display: none !important; } }

/*!*****************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/styles/grid.css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************/
.col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-12, .col-sm-3, .col-sm-9, .col-md-3, .col-md-4, .col-md-5, .col-md-7, .col-md-8, .col-md-9 { position: relative; min-height: 1px; padding-left: 15px; padding-right: 15px; }
.col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-12 { float: left; }
.col-xs-12 { width: 100%; }



.col-xs-8 { width: 66.66666667%; }
.col-xs-7 { width: 58.33333333%; }
.col-xs-6 { width: 50%; }
.col-xs-5 { width: 41.66666667%; }
.col-xs-4 { width: 33.33333333%; }
.col-xs-3 { width: 25%; }



































.col-xs-offset-5 { margin-left: 41.66666667%; }





@media (min-width: 768px) {
.col-sm-3, .col-sm-9 { float: left; }



.col-sm-9 { width: 75%; }





.col-sm-3 { width: 25%; }





































.col-sm-offset-3 { margin-left: 25%; }



}
@media (min-width: 992px) {
.col-md-3, .col-md-4, .col-md-5, .col-md-7, .col-md-8, .col-md-9 { float: left; }



.col-md-9 { width: 75%; }
.col-md-8 { width: 66.66666667%; }
.col-md-7 { width: 58.33333333%; }

.col-md-5 { width: 41.66666667%; }
.col-md-4 { width: 33.33333333%; }
.col-md-3 { width: 25%; }









































}
@media (min-width: 1200px) {




















































}

/*!******************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/styles/pages.css ***!
  \******************************************************************************************************************************************************************************************************************************************************************/
/* =====================================================================
   Page layer — tidies the markup the old PHP pages left behind, in one place,
   so every screen lines up the same way without touching field names / ids.
   Scope: only inside the app content area (.ap-content). Legacy print reports
   are separate documents and are not affected.
   ===================================================================== */

/* ---------- page title: the first heading of a page (h1–h4) + its rule ---------- */
.ap-content > .container > :is(h1, h2, h3),
.ap-content > .container > div:first-child > :is(h1, h2, h3),
.ap-content > .container > h4:first-of-type,
.ap-content > .container > div:first-child > h4:first-of-type {
  font-size: 17px; font-weight: 600; line-height: 1.3; margin: 0 0 8px; color: var(--text); text-align: left !important;
}
.ap-content > .container > :is(h1, h2, h3, h4) + hr,
.ap-content > .container > div:first-child > :is(h1, h2, h3, h4) + hr { margin: 0 0 10px; }
/* a leading or trailing rule with nothing above / below it is just noise */
.ap-content > .container > hr:first-child,
.ap-content > .container > div:first-child > hr:first-child,
.ap-content > .container > div:last-child > hr:last-child,
.ap-content > .container > div:only-child > hr:last-child,
.ap-content > .container > div:last-child:has(> hr:only-child) { display: none; }

/* ---------- grid safety nets ---------- */
/* a .row that holds no columns would pull its content 15px into the sidebar */
.ap-content .row:not(:has(> [class*="col-"])) { margin-left: 0; margin-right: 0; }
/* a .row straight inside another .row (no column between) would stick out 15px on each side */
.ap-content .row > .row { margin-left: 0; margin-right: 0; }
/* loose inline elements next to columns get the column gutter */
.ap-content .row:has(> [class*="col-"]) > :is(a, span, label) { margin-left: 15px; margin-right: 15px; }

/* ---------- layout tables (label | field) ---------- */
/* design.css zeroes td padding, which also wiped out the old cellpadding attribute */
.ap-content table[cellpadding] > tbody > tr > td,
.ap-content table[cellpadding] > tr > td { padding: 4px 10px 4px 0; vertical-align: middle; }
.ap-content form table:not(.table):not([class*="dataTable"]) > tbody > tr > td { vertical-align: middle; }
.ap-content form table:not(.table) > tbody > tr > td:first-child:not(:has(input, select, textarea, .input-group, button)) {
  white-space: nowrap; color: var(--text-2); font-size: 13px; font-weight: 600; padding-right: 12px;
}
.ap-content table:not(.table):not([class*="dataTable"]) > tbody > tr > td > .form-control,
.ap-content table:not(.table):not([class*="dataTable"]) > tbody > tr > td > .input-group { margin: 2px 0; }

/* plain rows of the old "label | input" forms (col-xs-4 label + col-xs-8 field) */
.ap-content form .row > .col-xs-4:has(+ .col-xs-8):not(:has(input, select, textarea, .input-group, button, a)) {
  color: var(--text-2); font-size: 13px; font-weight: 600; padding-top: 7px;
}
.ap-content .margin-bottom { margin-bottom: 4px; }

/* ---------- report filter forms (every report opens in a new tab: target=_blank) ---------- */
.ap-content form[target="_blank"] {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 12px 15px; margin-bottom: 12px; max-width: 760px;
}
.ap-content form[target="_blank"]::after { content: ""; display: table; clear: both; }
.ap-content [class*="col-"] > form[target="_blank"] { max-width: none; }
.ap-content form[target="_blank"] .row:last-child,
.ap-content form[target="_blank"] .form-group:last-child { margin-bottom: 0; }
.ap-content form[target="_blank"] .input-group { margin-bottom: 6px; }
.ap-content form[target="_blank"] > table { width: auto; }
.ap-content form[target="_blank"] > table > tbody > tr > td { padding: 3px 10px 3px 0; vertical-align: middle; }
.ap-content form[target="_blank"] > table > tbody > tr > td:first-child { width: 130px; }
.ap-content form[target="_blank"] .btn { min-width: 72px; }
.ap-content form[target="_blank"] [align="Right"], .ap-content form[target="_blank"] div[align="right"] { text-align: right; }

/* ---------- ReportFilter: the shared report filter card (the form itself gets the card frame above) ---------- */
.ap-content form.rf { max-width: 820px; }
.rf-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 0 10px; }
.ap-content .rf-head .rf-title { margin: 0; font-size: 15px; }
.rf-note { font-size: 12.5px; color: var(--muted); }
.rf-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; margin-bottom: 10px; }
.rf-field { position: relative; margin: 0; }
.rf-field > label { display: block; margin: 0 0 2px; font-size: 12px; font-weight: 600; color: var(--text-2); }
.rf-date { width: 168px; }
.rf-pick { flex: 1 1 320px; min-width: 220px; }
.rf-field > select.form-control { min-width: 180px; }
.rf-field.has-error .help-block { position: absolute; top: 100%; left: 0; margin: 2px 0 0; white-space: nowrap; color: var(--danger); font-size: 12px; }
.rf-row:has(.has-error) { margin-bottom: 26px; }

.rf-date .input-group { display: flex; }
.rf-date .input-group > .form-control { flex: 1 1 auto; min-width: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }


.rf-presets { display: flex; flex-wrap: wrap; gap: 4px; padding-bottom: 1px; }
.rf-chip {
  height: var(--control-h-sm); padding: 0 10px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface);
  color: var(--text-2); font-size: 13px; cursor: pointer; transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.rf-chip:hover { background: var(--surface-2); color: var(--text); }
.rf-chip:focus-visible { outline: 0; box-shadow: 0 0 0 2px var(--ring); }
.rf-chip.is-on { background: var(--primary-50); border-color: var(--primary-100); color: var(--primary-700); font-weight: 600; }
.rf-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 12px; padding-top: 10px; border-top: 1px solid var(--border); }
.rf-types { display: inline-flex; margin-right: auto; border: 1px solid var(--border-strong); border-radius: var(--radius); overflow: hidden; }
.rf-type { position: relative; margin: 0; padding: 4px 12px; font-size: 13px; font-weight: 500; color: var(--text-2); cursor: pointer; background: var(--surface); transition: background-color .12s ease, color .12s ease; }
.rf-type + .rf-type { border-left: 1px solid var(--border-strong); }
.rf-type > input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rf-type:hover { background: var(--surface-2); color: var(--text); }
.rf-type.is-on { background: var(--primary-50); color: var(--primary-700); font-weight: 600; }
.rf-type:focus-within { box-shadow: inset 0 0 0 2px var(--ring); }
.rf-hint { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rf-newtab { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); }
@media (max-width: 600px) {
  .rf-date, .rf-pick, .rf-field { flex: 1 1 100%; width: auto; }
  .rf-types { margin-right: 0; flex: 1 1 100%; } .rf-type { flex: 1; text-align: center; }
  .rf-field.has-error .help-block { position: static; white-space: normal; }
  .rf-row:has(.has-error) { margin-bottom: 10px; }
  .rf-newtab { display: none; }
}

/* ---------- unstyled controls left over from the old pages ---------- */
.ap-content select:not([class]),
.ap-content input:not([class]):is([type="text"], [type="number"], [type="date"], [type="search"], :not([type])) {
  height: var(--control-h); padding: 4px 8px; font-size: 14px; color: var(--text); background: var(--surface);
  border: 1px solid var(--border-strong); border-radius: var(--radius); vertical-align: middle;
}
.ap-content select:not([class]):focus, .ap-content input:not([class]):focus { border-color: var(--primary); outline: 0; box-shadow: 0 0 0 2px var(--ring); }
.ap-content :is(input[type="submit"], input[type="button"], button):not([class]) {
  height: var(--control-h); padding: 4px 14px; font-size: 14px; font-weight: 500; line-height: 1.2; cursor: pointer; vertical-align: middle;
  color: #fff; background: var(--primary); border: 1px solid var(--primary-600); border-radius: var(--radius);
  transition: background-color .12s ease;
}
.ap-content :is(input[type="submit"], input[type="button"], button):not([class]):hover { background: var(--primary-600); }
.ap-content :is(input[type="submit"], input[type="button"], button):not([class]):focus-visible { outline: 0; box-shadow: 0 0 0 2px var(--ring); }
.ap-content input[type="button"].form-control, .ap-content input[type="submit"].form-control {
  color: #fff; background: var(--primary); border-color: var(--primary-600); cursor: pointer; font-weight: 600;
}
.ap-content input[type="button"].form-control:hover, .ap-content input[type="submit"].form-control:hover { background: var(--primary-600); }

/* legacy table heads wrapped their text in <p> / <h4>: one head style everywhere, no stray margins */
.ap-content .table > thead > tr > th > :is(p, h4, h5) { margin: 0; font-size: 13px; font-weight: 600; line-height: 1.42857; color: inherit; }

/* ---------- list tables (our DataTable) ---------- */
.ap-content .dataTables_wrapper > .row:first-child { margin-bottom: 6px; }
.ap-content .dataTables_wrapper > .row:last-child { margin-top: 6px; }
.ap-content .dataTables_wrapper .dataTables_length label,
.ap-content .dataTables_wrapper .dataTables_filter label { font-weight: 400; color: var(--text-2); margin: 0; }
.ap-content .dataTables_wrapper .dataTables_filter input { width: 200px; display: inline-block; }
.ap-content .dataTables_wrapper .dataTables_length select { width: auto; display: inline-block; }
.ap-content .dataTables_wrapper .dataTables_info { color: var(--muted); font-size: 13px; padding-top: 4px; }
.ap-content .dataTables_wrapper table { margin-bottom: 0; }
.ap-content .dataTables_wrapper table th h4 { margin: 0; font-size: 13px; }
.ap-content td.dataTables_empty { color: var(--muted); padding: 14px 8px !important; }

/* ---------- panels: heading row (title left, link/button right) ---------- */
.ap-content .panel-heading > h4 { margin: 0; font-size: 14px; display: inline-block; vertical-align: middle; }
.ap-content .panel-heading { min-height: 34px; }
.ap-content .panel-heading .float-right { margin-top: 1px; }
.ap-content .panel-heading .clear { clear: both; }



.ap-content .ap-list > .panel-body { padding: 10px 12px; }

/* ---------- action rows ---------- */
.ap-content .btn-group.margin-top { margin-top: 8px; }
.ap-content .float-right { float: right; }
.ap-content .float-left { float: left; }
.ap-content .clear { clear: both; }

/* ---------- master-data / voucher entry forms ----------
   Two old layouts: a "label | field" table straight in the form, or rows of col-xs-4 label + col-xs-8 field.
   Both become one card of a readable width instead of fields stretched across the whole screen. */
.ap-content > .container > form:not([target]):has(> table:not(.table)),
.ap-content > .container > div > form:not([target]):has(> table:not(.table)),
.ap-content form:not([target]):has(> .row > .col-xs-4 + .col-xs-8) {
  max-width: 880px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 12px 15px; margin-bottom: 12px;
}
.ap-content form:not([target]):has(> table:not(.table))::after,
.ap-content form:not([target]):has(> .row > .col-xs-4 + .col-xs-8)::after { content: ""; display: table; clear: both; }
.ap-content form > table:not(.table) > tbody > tr > td[style] { padding: 4px 12px 4px 0 !important; }
.ap-content form > table:not(.table) > tbody > tr > td:first-child { width: 180px; }
.ap-content form > table:not(.table) > tbody > tr > td:last-child:not(:first-child) { padding-right: 0 !important; }
.ap-content form:has(> .row > .col-xs-4 + .col-xs-8) > .row { margin-bottom: 4px; }
.ap-content form:has(> .row > .col-xs-4 + .col-xs-8) .form-group { margin-bottom: 0; }
.ap-content form:has(> .row > .col-xs-4 + .col-xs-8) > .row > .col-xs-4 { width: 26%; }
.ap-content form:has(> .row > .col-xs-4 + .col-xs-8) > .row > .col-xs-8 { width: 74%; }
/* the pages' panels already frame their form: no second card inside a panel */
.ap-content .panel form:not([target]) { max-width: none; border: 0; padding: 0; background: transparent; margin-bottom: 0; }

/* ---------- legacy entry forms (invoice / return / purchase / damage / finished goods / vouchers) ----------
   Same markup, ids and field names as before; only the presentation is set here. */
/* document title (INVOICE, RETURN INVOICE …) */
.ap-content h2.invoice_type { margin: 0 0 8px; font-size: 17px; letter-spacing: .03em; }
/* credit figures above the invoice: read as figures, not as boxes */
.ap-content :is(#Credit_Limit, #customer_due, #Credit_Available) {
  display: block; width: 100%; height: auto; padding: 0; border: 0 !important; background: transparent !important; box-shadow: none !important;
  color: var(--text) !important; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums;
}
/* red only when it reports something: no credit left */
.ap-content #Credit_Available.is-bad { color: var(--danger) !important; }
.ap-content .ap-limit-block { margin: 0 0 6px; }
.ap-content strong:has(+ :is(#Credit_Limit, #customer_due, #Credit_Available)) { display: block; font-size: 12px; font-weight: 600; color: var(--muted); }
/* totals ladder: Due is ruled like a ledger total */
.ap-content #invoice_totals { margin-top: 4px; font-variant-numeric: tabular-nums; }
.ap-content #invoice_totals > [class*="col-"]:last-child > .row { padding: 3px 0; margin-left: 0; margin-right: 0; }
/* an empty input-group addon was a spacer in the old theme; now it is just a stray box */
.ap-content .input-group-addon:empty { display: none; }
.ap-content .input-group-addon:empty + .form-control { border-radius: var(--radius-sm); }
/* amounts typed into a right-aligned grid cell line up on the right too */
.ap-content table.table td.text-right > :is(.form-group, .input-group) > input.form-control:not([type="date"]) { text-align: right; }
.ap-content #invoice_totals > [class*="col-"]:last-child > .row:last-child {
  margin-top: 4px; padding: 5px 0; border-top: 1px solid var(--text-2); border-bottom: 3px double var(--text-2); font-size: 16px; font-weight: 600;
}
.ap-content #CurrentDue { border: 0 !important; background: transparent !important; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; width: 140px; }
.ap-content #invoice_totals textarea { margin: 4px 0 6px; }
/* one way to add a line: the header "+" (and Enter on the last field); the duplicate under the grid is hidden */
.ap-content #invoice_totals > [class*="col-"]:first-child > p:has(> .add-row1) { display: none; }
.ap-content .panel-heading > h3 { margin: 0; font-size: 14px; display: inline-block; vertical-align: middle; }
/* the save row stays in reach on long documents */
.ap-content form > .row:last-child:has(> .margin-top.btn-group > :is(input, button)[type="submit"]) {
  position: sticky; bottom: 0; z-index: 40; margin: 12px -15px -14px; padding: 8px 15px;
  background: rgba(255, 255, 255, .97); border-top: 1px solid var(--border-strong);
}
.ap-content form > .row:last-child:has(> .margin-top.btn-group > :is(input, button)[type="submit"]) > .btn-group { margin-top: 0; }
.ap-content form > .row:last-child >  .margin-top.btn-group > :is(input, button)[type="submit"].btn-primary { min-width: 140px; }
@media print { .ap-content form > .row:last-child:has(> .margin-top.btn-group) { position: static; border: 0; } }

/* label cells linked to their field by LegacyForm; required fields carry a quiet marker */
.ap-content .ap-flabel { cursor: default; }
.ap-content .ap-flabel.is-req::after { content: " *"; color: var(--danger); font-weight: 600; }

/* ---------- page header (PageHeader): title + subline left, actions right ---------- */
.ap-content .ap-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; margin: 0 0 10px; }

.ap-content .ap-page-head p { margin: 2px 0 0; font-size: 13px; }
.ap-content .ap-page-actions, .ap-content .ap-panel-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
/* empty state: says what is missing, in the list's own frame */
.ap-content .ap-empty { padding: 18px 12px; text-align: center; color: var(--muted); background: var(--surface-2); border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); }

/* ---------- narrow forms (master data entry) ---------- */
.ap-content .ap-narrow { max-width: 880px; }
.ap-content .ap-form-title { font-size: 17px; margin: 0 0 8px; }
.ap-content .ap-form-title + hr { margin: 0 0 10px; }
.ap-content .ap-narrow > .form-horizontal {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 12px 15px 4px;
}
.ap-content .form-horizontal .control-label { padding-top: 7px; margin-bottom: 0; }
.ap-content .form-horizontal .form-group { margin-bottom: 8px; }


.ap-content .ap-actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 10px; }

/* journal / contra voucher */
.ap-content .ap-jdate { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.ap-content .ap-jdate > label { padding-top: 7px; margin: 0; min-width: 40px; }
.ap-content .ap-jdate .input-group { width: 200px; }
.ap-content .details { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 10px 12px; }
.ap-content .details > .table { margin-bottom: 6px; }
.ap-content .details > .table th p { margin: 0; }
.ap-content #orderItems > .table { margin-bottom: 8px; }

@media (max-width: 900px) {
  .ap-content form[target="_blank"] { max-width: none; padding: 10px; }
  .ap-content .dataTables_wrapper .dataTables_filter input { width: 140px; }
}

/* Item cell on Damage / Offer rows (2026-11-11): remove · item field · search on one line, field takes the rest */
.ap-content .ap-item-cell { display: flex; align-items: center; gap: 6px; }
.ap-content .ap-item-cell > .form-control { flex: 1 1 auto; min-width: 0; width: auto; margin: 0; }
.ap-content .ap-item-cell > .btn { flex: none; }
.ap-content .ap-item-cell > .btn-sm { height: 32px; width: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
#invoice_table > tbody > tr > td, #FinishedGoodsTable > tbody > tr > td { vertical-align: middle; }
/* OfferCreate: form left, offers right (one column under 1200px) */
.ap-content .ap-offer-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--border); padding-bottom: 8px; margin-bottom: 10px; }
.ap-content .ap-offer-head h3 { margin: 0; }
.ap-content .ap-offer-grid { display: grid; gap: 12px; align-items: start; }
@media (min-width: 1200px) { .ap-content .ap-offer-grid { grid-template-columns: minmax(0, 1fr) 560px; } }
.ap-content .ap-offer-list td { white-space: nowrap; }
.ap-content .ap-offer-form > form > .panel-body { padding: 0; }
.ap-content .ap-offer-form table { width: 100%; }
/* Journal / Contra entry row: every field on the top line, its hint under it */
.ap-content .details > .table > tbody > tr > td { vertical-align: top; }
.ap-content .details #add { height: 32px; }

/* Inventory -> Settings -> Item Types (2026-11-12) */
.it-table th { padding: 7px 10px; border-bottom: 1px solid var(--border); background: var(--surface-2); color: var(--muted); font-size: 12.5px; font-weight: 600; text-align: center; white-space: nowrap; }
.it-table th.text-left { text-align: left; }
.it-table td { padding: 6px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.it-table tbody tr:last-child td { border-bottom: 0; }
.it-table tbody tr:hover td { background: var(--surface-2); }
.it-table tr.is-editing td { background: var(--primary-50); }
.it-yes { display: inline-flex; color: var(--success-text); }
.it-no { color: var(--muted); }
.ap-field-link { display: inline-block; margin-top: 3px; font-size: 12px; color: var(--primary); }

/*!******************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/styles/theme.css ***!
  \******************************************************************************************************************************************************************************************************************************************************************/
/* GENERATED by scripts/gen-theme.mjs from theme-source.css - do not edit by hand.
   Plain hex / rgba only (works in every browser, incl. Chrome/Edge before 111).
   Night mode = class "dark" on <html> (ThemeToggle in the top bar); printing always uses the light set. */
:root {
  --background: #ffffff;
  --foreground: #090b0c;
  --card: #ffffff;
  --card-foreground: #090b0c;
  --popover: #ffffff;
  --popover-foreground: #090b0c;
  --primary-foreground: #eff6ff;
  --secondary: #f4f4f5;
  --secondary-foreground: #18181b;
  --muted-foreground: #67787c;
  --accent: #f1f3f3;
  --accent-foreground: #161b1d;
  --destructive: #e7000b;
  --input: #e3e7e8;
  --chart-1: #8ec5ff;
  --chart-2: #2b7fff;
  --chart-3: #155dfc;
  --chart-4: #1447e6;
  --chart-5: #193cb8;
  --sidebar: #f9fbfb;
  --sidebar-foreground: #090b0c;
  --sidebar-primary: #155dfc;
  --sidebar-primary-foreground: #eff6ff;
  --sidebar-accent: #f1f3f3;
  --sidebar-accent-foreground: #161b1d;
  --sidebar-border: #e3e7e8;
  --sidebar-ring: #9ca8ab;
  --theme-primary: #1447e6;
  --theme-muted: #f1f3f3;
  --theme-border: #e3e7e8;
  --ring-color: #9ca8ab;
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f1f3f3;
  --surface-3: #e3e7e8;
  --border: #e3e7e8;
  --border-strong: #e3e7e8;
  --text: #090b0c;
  --text-2: #353738;
  --muted: #67787c;
  --hairline: rgba(9, 11, 12, 0.1);
  --primary: #1447e6;
  --primary-600: rgba(20, 71, 230, 0.8);
  --primary-700: #0c32ab;
  --primary-50: #edf3ff;
  --primary-100: #d7e4ff;
  --ring: rgba(156, 168, 171, 0.5);
  --secondary-hover: #dededf;
  --danger: #e7000b;
  --danger-600: #ba0007;
  --danger-50: #fff1ef;
  --danger-100: #ffd3cd;
  --danger-text: #ab0006;
  --danger-tint: rgba(231, 0, 11, 0.1);
  --danger-tint-2: rgba(231, 0, 11, 0.2);
  --info: #1447e6;
  --info-600: rgba(20, 71, 230, 0.8);
  --info-50: #edf3ff;
  --info-100: #d7e4ff;
  --info-text: #0c32ab;
  --success: #009966;
  --success-600: #007a50;
  --success-50: #eef7f2;
  --success-100: #bee1cf;
  --success-text: #00704a;
  --warning: #e17100;
  --warning-600: #b55a00;
  --warning-50: #fef4ed;
  --warning-100: #fad6bc;
  --warning-text: #a75200;
  --color-scheme: light;
  color-scheme: light;
}

html.dark {
  --background: #090b0c;
  --foreground: #f9fbfb;
  --card: #161b1d;
  --card-foreground: #f9fbfb;
  --popover: #161b1d;
  --popover-foreground: #f9fbfb;
  --primary-foreground: #eff6ff;
  --secondary: #27272a;
  --secondary-foreground: #fafafa;
  --muted-foreground: #9ca8ab;
  --accent: #22292b;
  --accent-foreground: #f9fbfb;
  --destructive: #ff6467;
  --input: rgba(255, 255, 255, 0.15);
  --chart-1: #8ec5ff;
  --chart-2: #2b7fff;
  --chart-3: #155dfc;
  --chart-4: #1447e6;
  --chart-5: #193cb8;
  --sidebar: #161b1d;
  --sidebar-foreground: #f9fbfb;
  --sidebar-primary: #2b7fff;
  --sidebar-primary-foreground: #eff6ff;
  --sidebar-accent: #22292b;
  --sidebar-accent-foreground: #f9fbfb;
  --sidebar-border: rgba(255, 255, 255, 0.1);
  --sidebar-ring: #67787c;
  --theme-primary: #193cb8;
  --theme-muted: #22292b;
  --theme-border: rgba(255, 255, 255, 0.1);
  --ring-color: #67787c;
  --bg: #090b0c;
  --surface: #161b1d;
  --surface-2: #22292b;
  --surface-3: rgba(255, 255, 255, 0.1);
  --border: rgba(255, 255, 255, 0.1);
  --border-strong: rgba(255, 255, 255, 0.15);
  --text: #f9fbfb;
  --text-2: #bdbfbf;
  --muted: #9ca8ab;
  --hairline: rgba(249, 251, 251, 0.1);
  --primary: #193cb8;
  --primary-600: rgba(25, 60, 184, 0.8);
  --primary-700: #7997dd;
  --primary-50: #0d1527;
  --primary-100: #0f1c3d;
  --ring: rgba(103, 120, 124, 0.5);
  --secondary-hover: #353538;
  --danger: #ff6467;
  --danger-600: #cf4f51;
  --danger-50: #2d1817;
  --danger-100: #552827;
  --danger-text: #ffaeab;
  --danger-tint: rgba(255, 100, 103, 0.18);
  --danger-tint-2: rgba(255, 100, 103, 0.28);
  --info: #193cb8;
  --info-600: rgba(25, 60, 184, 0.8);
  --info-50: #0d1527;
  --info-100: #0f1c3d;
  --info-text: #7997dd;
  --success: #00bc7d;
  --success-600: #009763;
  --success-50: #10231a;
  --success-100: #12402d;
  --success-text: #8edcb6;
  --warning: #fe9a00;
  --warning-600: #cc7b00;
  --warning-50: #2b1e0e;
  --warning-100: #53360f;
  --warning-text: #ffca89;
  --color-scheme: dark;
  color-scheme: dark;
}

@media print {
  html.dark {
    --background: #ffffff;
    --foreground: #090b0c;
    --card: #ffffff;
    --card-foreground: #090b0c;
    --popover: #ffffff;
    --popover-foreground: #090b0c;
    --primary-foreground: #eff6ff;
    --secondary: #f4f4f5;
    --secondary-foreground: #18181b;
    --muted-foreground: #67787c;
    --accent: #f1f3f3;
    --accent-foreground: #161b1d;
    --destructive: #e7000b;
    --input: #e3e7e8;
    --chart-1: #8ec5ff;
    --chart-2: #2b7fff;
    --chart-3: #155dfc;
    --chart-4: #1447e6;
    --chart-5: #193cb8;
    --sidebar: #f9fbfb;
    --sidebar-foreground: #090b0c;
    --sidebar-primary: #155dfc;
    --sidebar-primary-foreground: #eff6ff;
    --sidebar-accent: #f1f3f3;
    --sidebar-accent-foreground: #161b1d;
    --sidebar-border: #e3e7e8;
    --sidebar-ring: #9ca8ab;
    --theme-primary: #1447e6;
    --theme-muted: #f1f3f3;
    --theme-border: #e3e7e8;
    --ring-color: #9ca8ab;
    --bg: #ffffff;
    --surface: #ffffff;
    --surface-2: #f1f3f3;
    --surface-3: #e3e7e8;
    --border: #e3e7e8;
    --border-strong: #e3e7e8;
    --text: #090b0c;
    --text-2: #353738;
    --muted: #67787c;
    --hairline: rgba(9, 11, 12, 0.1);
    --primary: #1447e6;
    --primary-600: rgba(20, 71, 230, 0.8);
    --primary-700: #0c32ab;
    --primary-50: #edf3ff;
    --primary-100: #d7e4ff;
    --ring: rgba(156, 168, 171, 0.5);
    --secondary-hover: #dededf;
    --danger: #e7000b;
    --danger-600: #ba0007;
    --danger-50: #fff1ef;
    --danger-100: #ffd3cd;
    --danger-text: #ab0006;
    --danger-tint: rgba(231, 0, 11, 0.1);
    --danger-tint-2: rgba(231, 0, 11, 0.2);
    --info: #1447e6;
    --info-600: rgba(20, 71, 230, 0.8);
    --info-50: #edf3ff;
    --info-100: #d7e4ff;
    --info-text: #0c32ab;
    --success: #009966;
    --success-600: #007a50;
    --success-50: #eef7f2;
    --success-100: #bee1cf;
    --success-text: #00704a;
    --warning: #e17100;
    --warning-600: #b55a00;
    --warning-50: #fef4ed;
    --warning-100: #fad6bc;
    --warning-text: #a75200;
    --color-scheme: light;
    color-scheme: light;
  }
  }

/*!*******************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[10].use[3]!./src/styles/shadcn.css ***!
  \*******************************************************************************************************************************************************************************************************************************************************************/
/* =====================================================================
   shadcn/ui look (radix-lyra shapes) over the class names every page already uses (panel, btn, form-control,
   table, label, pagination, sidebar …) — React pages, legacy HTML and the Go reports shown inside the shell take
   the shadcn look without touching markup, IDs or names. Density stays: 14px text, 32px controls.
   COLOURS come from src/styles/theme.css (generated from the pasted theme in theme-source.css by
   `node scripts/gen-theme.mjs`, plain hex/rgba so older browsers draw them too). This file holds no colour values.
   Remove the theme.css + shadcn.css imports in src/app/layout.tsx to go back to the old look.
   ===================================================================== */

:root {
  --sidebar-bg: var(--sidebar);
  --sidebar-bg-2: var(--sidebar);
  --sidebar-text: var(--sidebar-foreground);
  --sidebar-text-strong: var(--sidebar-accent-foreground);
  --sidebar-hover: var(--sidebar-accent);
  --sidebar-active: var(--sidebar-accent);

  /* preset font: Inter (self-hosted, @fontsource-variable/inter); Bangla falls back to Hind Siliguri / Nirmala UI */
  --font: "Inter Variable", "Segoe UI Variable Text", "Segoe UI", Tahoma, Roboto, Arial, "Hind Siliguri", "Nirmala UI", sans-serif;
  --font-sans: var(--font);
  --font-heading: var(--font);

  /* theme radius 0: square everywhere */
  --radius-sm: 0px;
  --radius: 0px;
  --radius-lg: 0px;
  --radius-xl: 0px;
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, .05);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, .08), 0 1px 2px -1px rgba(0, 0, 0, .08);
  --shadow: var(--shadow-sm);
  --shadow-lg: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);
  --shadow-xl: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
}
html, body { font-family: var(--font); }
body { background: var(--bg); color: var(--text); font-feature-settings: "cv11", "ss01"; }
a:hover, a:focus { color: var(--primary-700); }
::-moz-selection { background: var(--primary-100); color: var(--text); }
::selection { background: var(--primary-100); color: var(--text); }
label { color: var(--text); font-weight: 500; }
hr { border-top-color: var(--border); }
h1, h2, h3, .h1, .h2, .h3 { letter-spacing: -.01em; }
kbd { border-radius: var(--radius-sm); background: var(--surface-2); border-color: var(--border); color: var(--muted); box-shadow: none; }
code { border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text); }

/* ---------- cards ---------- */
/* Lyra card: square, a hairline (ring-foreground/10), no shadow */
.panel, .well {
  border-color: var(--hairline); border-radius: var(--radius-xl); box-shadow: none;
}
.panel { background: var(--surface); }
.panel-heading, .panel-default > .panel-heading {
  padding: 10px 14px; background: transparent; color: var(--text); border-bottom-color: var(--border);
  border-top-left-radius: calc(var(--radius-xl) - 1px); border-top-right-radius: calc(var(--radius-xl) - 1px);
}
.panel-title { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.panel-body { padding: 12px 14px; }
.panel-footer { background: var(--sidebar-bg); border-top-color: var(--border); padding: 8px 14px;
  border-bottom-left-radius: calc(var(--radius-xl) - 1px); border-bottom-right-radius: calc(var(--radius-xl) - 1px); }
.panel > .table:first-child, .panel > .table-responsive:first-child > .table:first-child { border-top-left-radius: var(--radius-xl); border-top-right-radius: var(--radius-xl); }
/* coloured panels become plain cards with a coloured title, as shadcn has no tinted cards */
:is(.panel-primary, .panel-success, .panel-info, .panel-warning, .panel-danger) { border-color: var(--border); }
:is(.panel-primary, .panel-success, .panel-info, .panel-warning, .panel-danger) > .panel-heading { background: transparent; border-color: var(--border); }
.panel-primary > .panel-heading { color: var(--primary); }
.panel-danger > .panel-heading { color: var(--danger); }



.well { background: var(--sidebar-bg); box-shadow: none; }

/* ---------- buttons (shadcn Button variants) ---------- */
/* Lyra Button: square, no shadow, 1px ring on focus, presses down 1px */
.btn {
  border-radius: var(--radius); font-weight: 500; box-shadow: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.btn:active, .btn.active { box-shadow: none; transform: translateY(1px); }
.btn:focus-visible { border-color: var(--ring-color); box-shadow: 0 0 0 1px var(--ring); outline: 0; }
/* default → outline */
.btn, .btn-default { color: var(--text); background-color: var(--surface); border-color: var(--border); }
.btn:hover, .btn:focus, .btn-default:hover, .btn-default:focus { color: var(--text); background-color: var(--surface-2); border-color: var(--border); }
/* primary */
.btn-primary { color: var(--primary-foreground); background-color: var(--primary); border-color: transparent; }
.btn-primary:hover, .btn-primary:focus, .btn-primary.active, .btn-primary:active { color: var(--primary-foreground); background-color: var(--primary-600); border-color: transparent; }
/* info → secondary (grey), the shadcn way for "View"-type actions */
.btn-info { color: var(--secondary-foreground); background-color: var(--secondary); border-color: transparent; }
.btn-info:hover, .btn-info:focus, .btn-info.active, .btn-info:active { color: var(--secondary-foreground); background-color: var(--secondary-hover); border-color: transparent; }
/* Lyra destructive: tinted, not solid */
.btn-danger { color: var(--destructive); background-color: var(--danger-tint); border-color: transparent; }
.btn-danger:hover, .btn-danger:focus, .btn-danger.active, .btn-danger:active { color: var(--destructive); background-color: var(--danger-tint-2); border-color: transparent; }
.btn-success { color: #fff; background-color: var(--success); border-color: var(--success); }
.btn-success:hover, .btn-success:focus { color: #fff; background-color: var(--success-600); border-color: var(--success-600); }
.btn-warning { color: #fff; background-color: var(--warning); border-color: var(--warning); }
.btn-warning:hover, .btn-warning:focus { color: #fff; background-color: var(--warning-600); border-color: var(--warning-600); }
.btn-primary.disabled:hover, .btn-primary[disabled]:hover { background-color: var(--primary); }

.btn-sm, .btn-small { border-radius: var(--radius); }
.btn-xs { border-radius: var(--radius-sm); }
.btn-default.btn-xs:has(> .glyphicon-remove:only-child):hover { color: var(--danger); border-color: var(--danger-100); background: var(--danger-50); }

/* ---------- fields (shadcn Input) ---------- */
.form-control, .ap-content select:not(.sp-table *):not(.form-control):not(.ap-input), .ap-content textarea:not(.sp-table *):not(.form-control):not(.ap-input),
.ap-content input:not(.sp-table *)[type="text"]:not(.form-control):not(.ap-input):not([class*="easyui"]) {
  border-color: var(--input); border-radius: var(--radius); background-color: transparent; box-shadow: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
/* Lyra Input focus: border-ring + 1px ring-ring/50 */
.form-control:focus, .ap-content select:not(.sp-table *):not(.form-control):not(.ap-input):focus, .ap-content textarea:not(.sp-table *):not(.form-control):not(.ap-input):focus {
  border-color: var(--ring-color); box-shadow: 0 0 0 1px var(--ring);
}
.form-control::-moz-placeholder { color: var(--muted); }
.form-control::placeholder { color: var(--muted); }
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control { background-color: var(--sidebar-bg); box-shadow: none; }
.form-control[readonly]:focus { border-color: var(--border); box-shadow: none; }
.input-sm, .form-group-sm .form-control, .input-group-sm > .form-control { border-radius: var(--radius); }
.input-group-addon { background-color: var(--sidebar-bg); border-color: var(--border); color: var(--muted); border-radius: var(--radius); }
.has-error .form-control { border-color: var(--danger); background-color: var(--surface); }
/* converted fields (inputClass → .ap-input): validateForm() puts .has-error on the field's parent */
.has-error > .ap-input, .has-error > [data-date-group] > .ap-input { border-color: var(--danger); }
.has-error > .ap-input:focus-visible { border-color: var(--destructive); box-shadow: 0 0 0 1px var(--danger-tint-2); }
.has-error .form-control:focus { border-color: var(--destructive); box-shadow: 0 0 0 1px var(--danger-tint-2); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--primary); }

/* ---------- tables (shadcn Table: horizontal rules, muted heads, no stripes) ---------- */
.table { background: transparent; }
.table > thead > tr > th {
  background: transparent; color: var(--muted); font-weight: 500; font-size: 13px;
  border-bottom: 1px solid var(--border);
}
.table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th,
.table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td { padding: 7px 8px; border-top-color: var(--border); vertical-align: middle; }
.table-condensed > thead > tr > th, .table-condensed > tbody > tr > th, .table-condensed > tfoot > tr > th,
.table-condensed > thead > tr > td, .table-condensed > tbody > tr > td, .table-condensed > tfoot > tr > td { padding: 5px 8px; }
.table-bordered { border: 1px solid var(--border); border-radius: var(--radius-lg); border-collapse: separate; border-spacing: 0; overflow: hidden; }
.table-bordered > thead > tr > th, .table-bordered > tbody > tr > th, .table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td, .table-bordered > tbody > tr > td, .table-bordered > tfoot > tr > td {
  border: 0; border-top: 1px solid var(--border);
}
.table-bordered > thead > tr:first-child > th, .table-bordered > thead > tr:first-child > td { border-top: 0; }
.table-bordered > thead > tr > th { border-bottom: 0; background: var(--sidebar-bg); }
.table-striped > tbody > tr:nth-of-type(odd) { background-color: transparent; }
.table-hover > tbody > tr:hover, .table > tbody > tr:hover { background-color: var(--surface-2); }
.table > tfoot > tr > td, .table > tfoot > tr > th { background: var(--sidebar-bg); }


.dataTables_wrapper .table-responsive { border: 1px solid var(--border); border-radius: var(--radius-lg); }
.dataTables_wrapper .table-responsive > .table, .dataTables_wrapper .table-responsive > .table-bordered { border: 0; border-radius: 0; margin-bottom: 0; }
.dataTables_wrapper .table-responsive > .table > thead > tr > th { background: var(--sidebar-bg); }

/* ---------- badges (shadcn Badge) ---------- */
.label { border-radius: var(--radius); padding: .2em .6em; font-weight: 500; font-size: 12px; }
.label-default { color: var(--text); background: var(--surface-2); border-color: transparent; }

.label-success { color: var(--success-text); background: var(--success-50); border-color: var(--success-100); }
.label-danger { color: var(--danger-text); background: var(--danger-50); border-color: var(--danger-100); }
.label-warning { color: var(--warning-text); background: var(--warning-50); border-color: var(--warning-100); }

.badge { border-radius: var(--radius); background: var(--text); font-weight: 500; }

/* ---------- alerts (shadcn Alert) ---------- */
.alert { border-radius: var(--radius-lg); border-color: var(--border); background: var(--surface); }
.alert-success { color: var(--success-text); background: var(--success-50); border-color: var(--success-100); }

.alert-warning { color: var(--warning-text); background: var(--warning-50); border-color: var(--warning-100); }
.alert-danger { color: var(--danger-text); background: var(--danger-50); border-color: var(--danger-100); }

/* ---------- pagination (shadcn Pagination: separate ghost buttons, outlined current page) ---------- */
.pagination { gap: 2px; }
.pagination > li > a, .pagination > li > span {
  margin-left: 0; min-width: 30px; padding: 4px 9px; border: 1px solid transparent; border-radius: var(--radius) !important;
  color: var(--text); background: transparent; font-weight: 500;
}
.pagination > li > a:hover, .pagination > li > a:focus { background: var(--surface-2); color: var(--text); }
.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > a:focus {
  color: var(--text); background: var(--surface); border-color: var(--border); box-shadow: none;
}
.pagination > .disabled > a, .pagination > .disabled > span, .pagination > .disabled > a:hover { color: #a1a1aa; background: transparent; border-color: transparent; }

/* ---------- menus, lists (shadcn Popover / Command) ---------- */
/* Lyra popover: square, shadow-md + ring-1 ring-foreground/10 instead of a border */
.dropdown-menu { border-color: transparent; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg), 0 0 0 1px var(--hairline); padding: 4px; }
.dropdown-menu > li > a { border-radius: var(--radius-sm); padding: 5px 8px; }
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus,
.dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus { color: var(--text); background-color: var(--surface-2); }
.combo-list > .active > a small, .ta-list > .active > a .ta-fig, .ta-list > .active > a .ta-fig small { color: var(--muted); }
.ta-list > .active > a .ta-fig small.is-out { color: var(--danger); }




/* ---------- legacy modals (static Bootstrap ones still inside old pages) ---------- */
.modal-content { border-radius: var(--radius-lg); border-color: var(--border); box-shadow: var(--shadow-xl); }
/* dialogs read as their own panel: muted title bar and footer, white body, 50% scrim (same as ui/dialog.tsx) */
.modal-content { background: var(--surface); }
.modal-header { background: var(--surface-2); padding: 10px 16px; }
.modal-title { font-size: 15px; }
.modal-footer { background: var(--surface-2); padding: 10px 16px; }
.modal-backdrop.in, .modal-backdrop.fade.in { opacity: .5; background: #000; }
.picker-body tbody > tr.is-hi > td { background-color: var(--surface-2) !important; }
.picker-body tbody > tr.is-hi > td:first-child { color: var(--text); }


.ap-brand { background: var(--sidebar-bg); border-bottom: 1px solid var(--border); padding: 0 10px; }
.ap-brand-link, .ap-brand-link:hover, .ap-brand-link:focus { color: var(--text); }
.ap-brand-logo { border-radius: var(--radius); border: 1px solid var(--border); }
.ap-brand { height: var(--topbar-h); }
.ap-brand-text strong { font-size: 13px; letter-spacing: -.015em; } /* Inter is wider: keep the full company name */
.ap-nav { padding: 6px 8px 8px; scrollbar-color: #d4d4d8 transparent; }
.ap-nav::-webkit-scrollbar-thumb { background: #d4d4d8; }
.ap-nav-top, .ap-nav-link, .ap-nav-html a {
  border-left: 0; border-radius: var(--radius); color: var(--sidebar-text); margin: 1px 0;
}
.ap-nav-top { padding: 6px 8px; font-weight: 500; }
.ap-nav-top svg { opacity: .8; }
.ap-nav-link { padding: 5px 8px 5px 32px; }
.ap-nav-link.is-sub { padding-left: 44px; }
.ap-nav-html a { padding: 5px 8px 5px 32px; }
.ap-nav-top:hover, .ap-nav-top:focus-visible, .ap-nav-link:hover, .ap-nav-link:focus-visible, .ap-nav-html a:hover {
  background: var(--sidebar-hover); color: var(--sidebar-text-strong);
}
.ap-nav-group.is-open > .ap-nav-top { background: transparent; color: var(--sidebar-text-strong); }
.ap-nav-group.has-active > .ap-nav-top { color: var(--sidebar-text-strong); }
.ap-nav-top.is-active, .ap-nav-link.is-active {
  background: var(--sidebar-accent); color: var(--sidebar-accent-foreground); font-weight: 500; box-shadow: none;
}
.ap-nav-link.is-active::before {
  content: ""; position: absolute; left: 20px; top: 50%; width: 4px; height: 4px; margin-top: -2px; border-radius: 50%; background: var(--primary);
}
.ap-nav-items { background: transparent; padding: 1px 0 4px; margin-left: 15px; border-left: 1px solid var(--border); }
.ap-nav-items .ap-nav-link { padding-left: 12px; }
.ap-nav-items .ap-nav-link.is-sub { padding-left: 24px; }
.ap-nav-items .ap-nav-html a { padding-left: 12px; }
.ap-nav-link.is-active::before { left: 4px; }
.ap-nav-items { margin-right: 0; }
.ap-nav-items .ap-nav-link, .ap-nav-items .ap-nav-html a { margin-left: 6px; width: calc(100% - 6px); }
.ap-nav-sep { background: var(--border); margin: 4px 8px 4px 12px; }
.ap-sidebar-foot { border-top: 1px solid var(--border); }
.ap-collapse-btn { color: var(--muted); border-radius: 0; }
.ap-collapse-btn:hover { background: var(--sidebar-hover); color: var(--text); }

.ap-shell.is-collapsed .ap-nav { padding-left: 6px; padding-right: 6px; }

.ap-topbar { background: rgba(255, 255, 255, .92); backdrop-filter: saturate(1.4) blur(6px); border-bottom-color: var(--border); }
.ap-crumb-group::after { color: #d4d4d8; }
.ap-search-trigger { height: 30px; border-color: var(--border); border-radius: var(--radius); background: var(--sidebar-bg); box-shadow: none; color: var(--muted); }
.ap-search-trigger:hover { border-color: var(--border); background: var(--surface-2); }
.ap-icon-btn, .ap-logout { height: 30px; border-color: var(--border); border-radius: var(--radius); box-shadow: none; color: var(--text-2); }
.ap-icon-btn { width: 30px; }
.ap-icon-btn:hover { background: var(--surface-2); }
.ap-logout:hover { color: var(--danger); border-color: var(--danger-100); background: var(--danger-50); }
.ap-user-type { border-radius: var(--radius); border-color: transparent; background: var(--surface-2); color: var(--text-2); font-weight: 500; padding: 1px 6px; }
.ap-new-btn { height: 30px; min-height: 30px; }

.ap-content { padding: 14px 0 18px; }
.ap-content > .container { padding-left: 18px; padding-right: 18px; }

@media (max-width: 991px) {

  /* entry grids (invoice, return, purchase …) keep usable fields on a phone and scroll sideways in their box */
  .ap-content form table.table > tbody > tr > td input:not([type=hidden]):not([type=checkbox]),
  .ap-content form table.table > tbody > tr > td select { min-width: 72px; }
  .ap-content form table.table > tbody > tr > td input[role=combobox]:not([type=hidden]):not([type=checkbox]) { min-width: 190px; }
}

/* ---------- shadcn Calendar (react-day-picker v9, components/ui/calendar.tsx) ---------- */
.ap-cal-pop { padding: 8px; width: auto; }
.ap-cal { --cell: 32px; font-size: 14px; color: var(--text); -webkit-user-select: none; -moz-user-select: none; user-select: none; }
.ap-cal .rdp-months { position: relative; display: flex; gap: 12px; }
.ap-cal .rdp-month { display: flex; flex-direction: column; gap: 6px; }
.ap-cal .rdp-nav { position: absolute; top: 0; right: 0; display: flex; gap: 2px; z-index: 1; }
.ap-cal .rdp-button_previous, .ap-cal .rdp-button_next {
  display: inline-grid; place-items: center; width: var(--cell); height: var(--cell); padding: 0; border: 1px solid transparent;
  border-radius: var(--radius); background: transparent; color: var(--text); cursor: pointer;
}
.ap-cal .rdp-button_previous:hover, .ap-cal .rdp-button_next:hover { background: var(--surface-2); }
.ap-cal .rdp-button_previous:disabled, .ap-cal .rdp-button_next:disabled { opacity: .4; cursor: default; }
.ap-cal .rdp-chevron { width: 16px; height: 16px; fill: currentColor; }
.ap-cal .rdp-month_caption { display: flex; align-items: center; height: var(--cell); padding-right: calc(var(--cell) * 2 + 8px); font-weight: 500; }
.ap-cal .rdp-dropdowns { display: inline-flex; align-items: center; gap: 6px; }
.ap-cal .rdp-dropdown_root { position: relative; display: inline-flex; align-items: center; height: 28px; padding: 0 22px 0 8px;
  border: 1px solid var(--input); border-radius: var(--radius); background: var(--surface); font-size: 13px; font-weight: 500; }
.ap-cal .rdp-dropdown_root:focus-within { border-color: var(--ring-color); box-shadow: 0 0 0 1px var(--ring); }
.ap-cal .rdp-dropdown { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 0; font: inherit; }
.ap-cal .rdp-caption_label { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; font-weight: 500; }
.ap-cal .rdp-dropdown_root .rdp-caption_label .rdp-chevron { position: absolute; right: 6px; width: 12px; height: 12px; opacity: .6; }
.ap-cal .rdp-month_grid { border-collapse: collapse; border-spacing: 0; }
.ap-cal .rdp-weekday { width: var(--cell); height: 24px; padding: 0; font-size: 12px; font-weight: 400; color: var(--muted); text-align: center; }
.ap-cal .rdp-day { width: var(--cell); height: var(--cell); padding: 0; text-align: center; }
.ap-cal .rdp-day_button {
  width: var(--cell); height: var(--cell); padding: 0; border: 1px solid transparent; border-radius: var(--radius);
  background: transparent; color: inherit; font: inherit; font-variant-numeric: tabular-nums; cursor: pointer;
  transition: background-color .12s ease, color .12s ease;
}
.ap-cal .rdp-day_button:hover { background: var(--surface-2); }
.ap-cal .rdp-day_button:focus-visible { outline: 0; border-color: var(--ring-color); box-shadow: 0 0 0 1px var(--ring); }
.ap-cal .rdp-today:not(.rdp-selected) .rdp-day_button { background: var(--accent); color: var(--accent-foreground); font-weight: 600; }
.ap-cal .rdp-selected .rdp-day_button, .ap-cal .rdp-selected .rdp-day_button:hover { background: var(--primary); color: var(--primary-foreground); font-weight: 500; }
.ap-cal .rdp-outside .rdp-day_button { color: var(--muted); opacity: .6; }
.ap-cal .rdp-disabled .rdp-day_button { opacity: .35; cursor: default; }
.ap-cal .rdp-hidden { visibility: hidden; }
.ap-cal-foot { display: flex; align-items: center; gap: 8px; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border); }


/* the calendar icon on every date field is a button */
.input-group.date > .input-group-addon { cursor: pointer; transition: background-color .12s ease, color .12s ease; }
.input-group.date > .input-group-addon:hover { background: var(--surface-2); color: var(--text); }
.ap-date { max-width: 190px; }

/* ---------- shadcn Select look for native <select> (chevron, no OS arrow) ---------- */
select.form-control, select.ap-input, .ap-content select:not(.sp-table *):not(.form-control):not(.ap-input):not([multiple]):not([size]) {
  -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-right: 26px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 8px center; background-size: 14px 14px;
}
select[multiple].form-control, select[size].form-control { background-image: none; padding-right: 8px; }
/* number fields: no spinner arrows (shadcn Input) */
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; -webkit-appearance: textfield; appearance: textfield; }
/* checkbox / radio: theme primary */
input[type="checkbox"], input[type="radio"] { accent-color: var(--primary); }

/* ---------- bare legacy fields and buttons (no .form-control / .btn) get the shadcn Input / Button look ---------- */
.ap-content input:not(.sp-table *)[type="text"]:not(.form-control):not(.ap-input):not([class*="easyui"]),
.ap-content input:not(.sp-table *)[type="number"]:not(.form-control):not(.ap-input),
.ap-content input:not(.sp-table *)[type="search"]:not(.form-control):not(.ap-input),
.ap-content input:not(.sp-table *)[type="password"]:not(.form-control):not(.ap-input),
.ap-content input:not(.sp-table *)[type="email"]:not(.form-control):not(.ap-input),
.ap-content input:not(.sp-table *)[type="tel"]:not(.form-control):not(.ap-input),
.ap-content input:not(.sp-table *):not([type]):not(.form-control):not(.ap-input),
.ap-content select:not(.sp-table *):not(.form-control):not(.ap-input),
.ap-content textarea:not(.sp-table *):not(.form-control):not(.ap-input) {
  min-height: 30px; padding: 4px 8px; font-size: 14px; border: 1px solid var(--input); border-radius: var(--radius);
  background-color: transparent; color: var(--text); box-shadow: none; transition: border-color .15s ease, box-shadow .15s ease;
}
.ap-content input:not(.sp-table *):not(.form-control):not(.ap-input):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="hidden"]):focus,
.ap-content select:not(.sp-table *):not(.form-control):not(.ap-input):focus, .ap-content textarea:not(.sp-table *):not(.form-control):not(.ap-input):focus {
  outline: 0; border-color: var(--ring-color); box-shadow: 0 0 0 1px var(--ring);
}
.ap-content input:not(.sp-table *)[readonly]:not(.form-control):not(.ap-input) { background: var(--sidebar-bg); }
.ap-content input:not(.sp-table *)::-moz-placeholder, .ap-content textarea:not(.sp-table *)::-moz-placeholder { color: var(--muted); }
.ap-content input:not(.sp-table *)::placeholder, .ap-content textarea:not(.sp-table *)::placeholder { color: var(--muted); }
.ap-content input:not(.sp-table *)[type="submit"]:not(.btn), .ap-content input:not(.sp-table *)[type="button"]:not(.btn), .ap-content button:not(.sp-table *):not([class]) {
  min-height: 30px; padding: 4px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--background);
  color: var(--text); font-weight: 500; cursor: pointer; transition: background-color .15s ease;
}
.ap-content input:not(.sp-table *)[type="submit"]:not(.btn):hover, .ap-content input:not(.sp-table *)[type="button"]:not(.btn):hover, .ap-content button:not(.sp-table *):not([class]):hover { background: var(--surface-2); }

/* ---------- night mode (html.dark; colours in theme.css) — surfaces that older rules painted white ---------- */
.ap-icon-btn, .ap-logout { background: var(--background); }
.ap-footer { background: var(--bg); }
.ap-keys-table td { border-bottom-color: var(--border); }
.ap-skeleton .sk { background: var(--surface-2); }
.dash-money, .dash-stats, .dash-welcome { background: var(--surface); border-color: var(--hairline); }
.doc-bar, .ap-content form > .row:last-child:has(> .margin-top.btn-group > :is(input, button)[type="submit"]) { background: var(--bg); } /* sticky save bars */
html.dark .ap-topbar { background: var(--bg); }
html.dark .ap-brand-logo { background: #fff; border-color: transparent; } /* the logo stays on white */
html.dark mark, html.dark .mark { background: var(--warning-100); color: var(--warning-text); }
html.dark ::-moz-selection { background: var(--primary-100); color: var(--text); }
html.dark ::selection { background: var(--primary-100); color: var(--text); }
html.dark .modal-backdrop.in, html.dark .modal-backdrop.fade.in { opacity: .6; }
html.dark img { opacity: .95; }
/* dashboard chart (recharts paints SVG attributes; CSS wins over them) */
.recharts-cartesian-grid line { stroke: var(--border); }
.recharts-cartesian-axis-tick-value, .recharts-cartesian-axis-tick text { fill: var(--muted); }
.recharts-default-tooltip { background: var(--popover) !important; border-color: var(--border) !important; color: var(--text); }
.recharts-tooltip-cursor { fill: var(--surface-2); }
/* the theme switch */
.ap-theme-btn svg { transition: transform .2s ease, opacity .15s ease; }
.ap-theme-btn:active svg { transform: rotate(-20deg) scale(.9); }
/* night: links take the light blue (the dark theme's primary is a deep blue meant for button fills) */
html.dark .ap-content a:not([class]), html.dark .ap-content .dash-stat a, html.dark .ap-content .table a:not(.btn):not(.label), html.dark .ap-content .panel-heading a:not(.btn) { color: var(--primary-700); }

/* ---------- Spectrum UI data-table (components/ui/data-table.tsx), always inside .sp-table ---------- */
/* scoped preflight: Tailwind's border reset (preflight is off app-wide); zero specificity so utilities win */
:where(.sp-table) *, :where(.sp-table) *::before, :where(.sp-table) *::after { border-width: 0; border-style: solid; border-color: var(--border); }
:where(.sp-table) table { border-collapse: collapse; width: 100%; }
:where(.sp-table) th { text-align: inherit; font-weight: inherit; }
:where(.sp-table) button { background: transparent; color: inherit; padding: 0; font: inherit; }
:where(.sp-table) p, :where(.sp-table) h2, :where(.sp-table) h3 { margin: 0; }
.sp-table input[type="checkbox"] { width: 100%; height: 100%; margin: 0; vertical-align: baseline; }
.sp-table input[type="search"] { -webkit-appearance: none; -moz-appearance: none; appearance: none; }
.sp-rows { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; font-weight: 400; color: var(--muted); white-space: nowrap; }
.sp-rows select { height: 32px; padding: 0 26px 0 8px; border: 1px solid var(--input); background-color: transparent; color: var(--text); font-size: 13px; }
.sp-actions { display: inline-flex; gap: 4px; flex-wrap: nowrap; white-space: nowrap; }
.sp-actions > span { flex-wrap: nowrap !important; } /* ActionTable's group sets wrap inline; in the row it stays on one line */

/* ---------- Animate UI icon buttons (components/ActionButtons.tsx) ---------- */
.ap-icon-label { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.ap-icon-label > svg { flex: none; }
.float-right.ap-icon-label { float: right; }
.float-left.ap-icon-label { float: left; }
/* the calendar mark fills its addon, so hovering anywhere on the addon plays it */
.ap-date-icon { display: inline-grid; place-items: center; margin: -5px -9px; padding: 5px 9px; line-height: 0; }
.rf-cal .ap-date-icon { margin: 0; padding: 0; }
/* BtnIcon (animated Lucide in buttons / links) */
.ap-btn-icon { display: inline-flex; align-items: center; justify-content: center; vertical-align: -2px; line-height: 0; }
/* Phosphor button icons (ActionButtons.tsx, siteplane's icon set): on hover / keyboard focus the icon takes the duotone
   fill and plays one short motion of its own; the chevron runs through like siteplane's animated-button arrow. */
.ap-btn-icon svg { transform-origin: 50% 50%; }
.ap-icon-run { position: relative; display: inline-block; overflow: hidden; }
.ap-icon-run > svg { position: absolute; inset: 0; transition: transform 300ms cubic-bezier(.32, .72, 0, 1); }
.ap-icon-run > svg:last-child { transform: translateX(-110%); }
.ap-btn-icon[data-on] .ap-icon-run > svg:first-child { transform: translateX(110%); }
.ap-btn-icon[data-on] .ap-icon-run > svg:last-child { transform: translateX(0); }
@media (prefers-reduced-motion: no-preference) {
  .ap-btn-icon[data-on] > svg { animation: ap-ic-pop 360ms cubic-bezier(.34, 1.56, .64, 1); }
  .ap-btn-icon[data-on][data-icon=edit] > svg { animation: ap-ic-write 520ms ease-in-out; transform-origin: 15% 85%; }
  .ap-btn-icon[data-on][data-icon=trash] > svg,
  .ap-btn-icon[data-on][data-icon=remove] > svg { animation: ap-ic-wiggle 420ms ease-in-out; }
  .ap-btn-icon[data-on][data-icon=plus] > svg { animation: ap-ic-turn 380ms cubic-bezier(.32, .72, 0, 1); }
  .ap-btn-icon[data-on][data-icon=refresh] > svg { animation: ap-ic-spin 520ms cubic-bezier(.32, .72, 0, 1); }
  .ap-btn-icon[data-on][data-icon=search] > svg { animation: ap-ic-look 520ms ease-in-out; }
  .ap-btn-icon[data-on][data-icon=print] > svg,
  .ap-btn-icon[data-on][data-icon=download-alt] > svg,
  .ap-btn-icon[data-on][data-icon=save] > svg { animation: ap-ic-drop 420ms cubic-bezier(.32, .72, 0, 1); }
  .ap-btn-icon[data-on][data-icon=envelope] > svg,
  .ap-btn-icon[data-on][data-icon=truck] > svg,
  .ap-btn-icon[data-on][data-icon=logout] > svg { animation: ap-ic-nudge 420ms cubic-bezier(.32, .72, 0, 1); }
  .ap-btn-icon[data-on][data-icon=eye] > svg { animation: ap-ic-blink 420ms ease-in-out; }
  .ap-btn-icon[data-on][data-icon=calendar] > svg { animation: ap-ic-tilt 420ms ease-in-out; }
  .ap-btn-icon[data-on][data-icon=approve] > svg,
  .ap-btn-icon[data-on][data-icon=check] > svg,
  .ap-btn-icon[data-on][data-icon=saved] > svg { animation: ap-ic-pop 420ms cubic-bezier(.34, 1.56, .64, 1); }
  .ap-btn-icon[data-on][data-icon=reject] > svg,
  .ap-btn-icon[data-on][data-icon=eraser] > svg { animation: ap-ic-wiggle 420ms ease-in-out; }
  .ap-btn-icon[data-on][data-icon=copy] > svg { animation: ap-ic-drop 420ms cubic-bezier(.32, .72, 0, 1); }
  .ap-btn-icon[data-on][data-icon=upload] > svg { animation: ap-ic-rise 420ms cubic-bezier(.32, .72, 0, 1); }
  .ap-btn-icon[data-on][data-icon=back] > svg { animation: ap-ic-nudge-l 420ms cubic-bezier(.32, .72, 0, 1); }
  .ap-btn-icon[data-on][data-icon=login] > svg,
  .ap-btn-icon[data-on][data-icon=external] > svg { animation: ap-ic-nudge 420ms cubic-bezier(.32, .72, 0, 1); }
  .ap-btn-icon[data-on][data-icon=undo] > svg { animation: ap-ic-spin-back 520ms cubic-bezier(.32, .72, 0, 1); }
  .ap-btn-icon[data-on][data-icon=gear] > svg,
  .ap-btn-icon[data-on][data-icon=sun] > svg { animation: ap-ic-spin 640ms cubic-bezier(.32, .72, 0, 1); }
  .ap-btn-icon[data-on][data-icon=moon] > svg,
  .ap-btn-icon[data-on][data-icon=key] > svg { animation: ap-ic-tilt 420ms ease-in-out; }
  .ap-btn-icon[data-on][data-icon=shield] > svg { animation: ap-ic-pop 420ms cubic-bezier(.34, 1.56, .64, 1); }
}
@keyframes ap-ic-rise { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-2px) scale(.94); } 70% { transform: translateY(1px); } }
@keyframes ap-ic-nudge-l { 0%, 100% { transform: translateX(0); } 45% { transform: translateX(-3px); } 75% { transform: translateX(1px); } }
@keyframes ap-ic-spin-back { from { transform: rotate(0); } to { transform: rotate(-360deg); } }

/* Busy: while a button's save is running (legacy data-loading-text swap sets data-busy, React buttons aria-busy) its icon
   turns into a spinner of the same size, so the button keeps its width and says "working" without words. */
.ap-btn-icon { position: relative; }
:is([data-busy], [aria-busy="true"]) > .ap-btn-icon > svg,
:is([data-busy], [aria-busy="true"]) > .ap-btn-icon > .ap-icon-run { visibility: hidden; animation: none !important; }
:is([data-busy], [aria-busy="true"]) > .ap-btn-icon::after {
  content: ""; position: absolute; inset: 1px; border-radius: 9999px;
  border: 2px solid currentColor; border-right-color: transparent; opacity: .9;
  animation: ap-ic-spin 700ms linear infinite;
}

/* Row actions (icon-only xs buttons, React <BtnIcon> or legacy .glyphicon): soft tinted squares by intent — edit blue,
   delete/reject red, approve/complete green, print/view neutral — that fill in solid on hover. Press gives way a little. */
.btn-xs:is(:has(> .ap-btn-icon:only-child), :has(> .glyphicon:only-child)) {
  transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease, transform 120ms ease;
}
.btn-xs:is(:has(> [data-icon=edit]:only-child), :has(> .glyphicon-edit:only-child), :has(> .glyphicon-pencil:only-child)) {
  color: var(--primary-700); background-color: var(--primary-50); border-color: var(--primary-100);
}
.btn-xs:is(:has(> [data-icon=edit]:only-child), :has(> .glyphicon-edit:only-child), :has(> .glyphicon-pencil:only-child)):is(:hover, :focus-visible) {
  color: var(--primary-foreground); background-color: var(--primary); border-color: var(--primary);
}
.btn-xs:is(:has(> [data-icon=trash]:only-child), :has(> [data-icon=reject]:only-child), :has(> .glyphicon-trash:only-child)) {
  color: var(--danger-text); background-color: var(--danger-50); border-color: var(--danger-100);
}
.btn-xs:is(:has(> [data-icon=trash]:only-child), :has(> [data-icon=reject]:only-child), :has(> .glyphicon-trash:only-child)):is(:hover, :focus-visible) {
  color: #fff; background-color: var(--danger); border-color: var(--danger);
}
.btn-xs:is(:has(> [data-icon=saved]:only-child), :has(> [data-icon=approve]:only-child), :has(> [data-icon=check]:only-child), :has(> .glyphicon-saved:only-child), :has(> .glyphicon-ok:only-child)) {
  color: var(--success-text); background-color: var(--success-50); border-color: var(--success-100);
}
.btn-xs:is(:has(> [data-icon=saved]:only-child), :has(> [data-icon=approve]:only-child), :has(> [data-icon=check]:only-child), :has(> .glyphicon-saved:only-child), :has(> .glyphicon-ok:only-child)):is(:hover, :focus-visible) {
  color: #fff; background-color: var(--success); border-color: var(--success);
}
.btn-xs:is(:has(> [data-icon=print]:only-child), :has(> [data-icon=download-alt]:only-child), :has(> [data-icon=eye]:only-child), :has(> .glyphicon-print:only-child), :has(> .glyphicon-download-alt:only-child), :has(> .glyphicon-eye-open:only-child)) {
  color: var(--text-2); background-color: var(--surface-2, var(--secondary)); border-color: var(--border);
}
.btn-xs:is(:has(> [data-icon=print]:only-child), :has(> [data-icon=download-alt]:only-child), :has(> [data-icon=eye]:only-child), :has(> .glyphicon-print:only-child), :has(> .glyphicon-download-alt:only-child), :has(> .glyphicon-eye-open:only-child)):is(:hover, :focus-visible) {
  color: var(--background); background-color: var(--foreground); border-color: var(--foreground);
}
.btn-xs:is(:has(> .ap-btn-icon:only-child), :has(> .glyphicon:only-child)):active:not(:disabled) { transform: scale(.92); }
.ap-icon-label:active:not(:disabled) { transform: translateY(.5px) scale(.98); }
.ap-icon-label { transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease, transform 120ms ease; }

/* Legacy .glyphicon buttons (old pages, Go reports): the same short motions on hover as the React icons */
@media (prefers-reduced-motion: no-preference) {
  .btn:hover > .glyphicon:is(.glyphicon-edit, .glyphicon-pencil) { animation: ap-ic-write 520ms ease-in-out; transform-origin: 15% 85%; }
  .btn:hover > .glyphicon:is(.glyphicon-trash, .glyphicon-remove) { animation: ap-ic-wiggle 420ms ease-in-out; }
  .btn:hover > .glyphicon:is(.glyphicon-print, .glyphicon-download-alt, .glyphicon-floppy-disk) { animation: ap-ic-drop 420ms cubic-bezier(.32, .72, 0, 1); }
  .btn:hover > .glyphicon:is(.glyphicon-plus, .glyphicon-plus-sign) { animation: ap-ic-turn 380ms cubic-bezier(.32, .72, 0, 1); }
  .btn:hover > .glyphicon:is(.glyphicon-search, .glyphicon-eye-open) { animation: ap-ic-look 520ms ease-in-out; }
  .btn:hover > .glyphicon:is(.glyphicon-refresh, .glyphicon-repeat) { animation: ap-ic-spin 520ms cubic-bezier(.32, .72, 0, 1); }
  .btn:hover > .glyphicon:is(.glyphicon-saved, .glyphicon-ok, .glyphicon-ok-sign) { animation: ap-ic-pop 420ms cubic-bezier(.34, 1.56, .64, 1); }
}
@keyframes ap-ic-pop { 0% { transform: scale(1); } 45% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes ap-ic-write { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-14deg) translateY(-1px); } 65% { transform: rotate(8deg); } }
@keyframes ap-ic-wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-12deg); } 60% { transform: rotate(9deg); } 85% { transform: rotate(-3deg); } }
@keyframes ap-ic-turn { from { transform: rotate(0); } to { transform: rotate(90deg); } }
@keyframes ap-ic-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes ap-ic-look { 0%, 100% { transform: translate(0, 0); } 30% { transform: translate(-1.5px, -1px) rotate(-8deg); } 65% { transform: translate(1.5px, 0) rotate(6deg); } }
@keyframes ap-ic-drop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(2px) scale(.94); } 70% { transform: translateY(-1px); } }
@keyframes ap-ic-nudge { 0%, 100% { transform: translateX(0); } 45% { transform: translateX(3px); } 75% { transform: translateX(-1px); } }
@keyframes ap-ic-blink { 0%, 100% { transform: scaleY(1); } 40% { transform: scaleY(.1); } }
@keyframes ap-ic-tilt { 0%, 100% { transform: rotate(0); } 35% { transform: rotate(-10deg); } 70% { transform: rotate(6deg); } }
.btn > .ap-btn-icon + *, .btn > .ap-btn-icon { flex: none; }
.btn:not(.ap-icon-label) > .ap-btn-icon:not(:only-child) { margin-right: 5px; }
.btn-xs:has(> .ap-btn-icon:only-child) { min-width: var(--control-h-xs); padding-left: 0; padding-right: 0; display: inline-flex; align-items: center; justify-content: center; }
.btn-default.btn-xs:has(> [data-icon="remove"]:only-child) { color: var(--text-2); }
.btn-default.btn-xs:has(> [data-icon="remove"]:only-child):hover { color: var(--danger); border-color: var(--danger-100); background: var(--danger-50); }
.ap-logout .ap-btn-icon { vertical-align: 0; }

/* ---------- shadcn Sidebar shell (components/ui/sidebar.tsx in AppShell) ---------- */
.ap-main { margin-left: 0 !important; min-height: 100svh; }
.ap-sb { background: var(--sidebar); }
.ap-sb .ap-brand { flex-direction: row; gap: 6px; }
.ap-sb .ap-nav { padding: 6px 8px 8px; }
.ap-sb ul, .ap-sb li { list-style: none; margin: 0; padding: 0; }
.ap-sb .ap-nav-items { margin: 1px 0 4px 15px !important; padding: 1px 0 1px 0 !important; }
.ap-sb .ap-nav-subitems { margin: 0 0 2px; padding: 0; }
.ap-sb .ap-nav-top { height: auto; min-height: 32px; }
.ap-sb .ap-sidebar-foot { padding: 0; }
/* icon rail (collapsed): icons only, centred; tooltips carry the names */
[data-collapsible=icon] .ap-nav-text, [data-collapsible=icon] .ap-nav-caret, [data-collapsible=icon] .ap-brand-text,
[data-collapsible=icon] .ap-nav-items { display: none !important; }
[data-collapsible=icon] .ap-nav-top, [data-collapsible=icon] .ap-collapse-btn { justify-content: center; padding-left: 0 !important; padding-right: 0 !important; }
[data-collapsible=icon] .ap-brand { padding: 0; align-items: center; justify-content: center; }
[data-collapsible=icon] .ap-brand-link { flex: none; }
[data-collapsible=icon] .ap-nav { padding-left: 10px; padding-right: 10px; }
.sb-no-scrollbar { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
.ap-tip-wrap { display: inline-flex; }
@media print { [data-slot=sidebar], [data-slot=sidebar-gap] { display: none !important; } }

/* legacy HTML drop-downs (no React): the same short menu entrance as the Animate UI menus */
@keyframes ap-menu-in { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
.open > .dropdown-menu { transform-origin: top left; animation: ap-menu-in .2s cubic-bezier(.22, 1, .36, 1); }
@media (prefers-reduced-motion: reduce) { .open > .dropdown-menu, .dropdown-submenu:hover > .dropdown-menu { animation: ap-fade-in .15s ease-out; } }
@keyframes ap-fade-in { from { opacity: 0; } to { opacity: 1; } }
/* ---- Toast = siteplane toast (ui.siteplane.io/docs/components/toast; owner 2026-11-10), on sonner (ui/sonner.tsx).
   Values from siteplane's toast.tsx / toast-surface.ts / design-rework.css: floating-md shadow, control radius 8px,
   py 12 / ps 14 / pe 40, icon + text gap 8, title 500, description muted, gap 2; 24px dismiss 8px in from the
   top-end corner; slide 350ms / exit 250ms on the panel curve; behind toasts peek 12px and shrink 10% each and
   darken 1% (6% at night); success pulse / error shake when updated in place. Square app, but the toast keeps
   siteplane's 8px (owner asked for exactly that toast). */
.ap-toaster {
  --ap-toast-ease: cubic-bezier(.32, .72, 0, 1);
  --ap-toast-shadow: 0 0 0 1px var(--popover), 0 0 0 2px rgba(114, 114, 112, .28), 0 0 24px 6px rgba(0, 0, 0, .04),
    0 1.5px 1px rgba(0, 0, 0, .04), 0 1.5px 1px -.5px rgba(0, 0, 0, .04), 0 3.5px 3px -1.5px rgba(0, 0, 0, .04),
    0 6.5px 6px -3px rgba(0, 0, 0, .04), 0 12.5px 12px -6px rgba(0, 0, 0, .04), 0 24.5px 24px -12px rgba(0, 0, 0, .04);
  --ap-toast-dim: .01;
}
.dark .ap-toaster, .ap-toaster[data-sonner-theme=dark] {
  --ap-toast-shadow: 0 0 0 1px rgba(114, 114, 112, .36), 0 0 0 1px var(--popover), 0 0 0 2px rgba(0, 0, 0, .28),
    0 0 24px 6px rgba(0, 0, 0, .12), 0 2px 1px rgba(0, 0, 0, .12), 0 2px 1px -.5px rgba(0, 0, 0, .12), 0 4px 3px -1.5px rgba(0, 0, 0, .12),
    0 7px 6px -3px rgba(0, 0, 0, .12), 0 13px 12px -6px rgba(0, 0, 0, .12), 0 25px 24px -12px rgba(0, 0, 0, .12), 0 49px 48px -24px rgba(0, 0, 0, .12);
  --ap-toast-dim: .06;
}
html .ap-toaster [data-sonner-toast][data-styled=true] {
  align-items: flex-start; gap: 8px; padding: 12px 40px 12px 14px; width: var(--width);
  border: 0; border-radius: 8px; box-shadow: var(--ap-toast-shadow);
  background: var(--popover); color: var(--popover-foreground); font-size: 14px; line-height: 20px;
  /* the fill darkens a little per place behind the front toast */
  background-image: linear-gradient(rgba(0, 0, 0, calc(var(--ap-toast-dim) * var(--toasts-before, 0))), rgba(0, 0, 0, calc(var(--ap-toast-dim) * var(--toasts-before, 0))));
  transition: transform 350ms var(--ap-toast-ease), opacity 350ms var(--ap-toast-ease), height 150ms cubic-bezier(.25, .1, .25, 1), background-color 350ms var(--ap-toast-ease);
}
html .ap-toaster [data-sonner-toast][data-expanded=true] { background-image: none; }
html .ap-toaster [data-sonner-toast][data-removed=true] { transition-duration: 250ms, 150ms, 150ms, 250ms; }
/* behind toasts: siteplane shrinks each one 10% (sonner: 5%) */
html .ap-toaster [data-sonner-toast][data-expanded=false][data-front=false] { --scale: var(--toasts-before) * .1 + 1; }
/* behind toasts' text fades over the expand time */
html .ap-toaster [data-sonner-toast][data-styled=true] > * { transition: opacity 200ms cubic-bezier(0, 0, .2, 1); }
html .ap-toaster [data-sonner-toast] [data-icon] { width: 16px; height: 20px; margin: 0; display: flex; align-items: center; flex: none; }
html .ap-toaster [data-sonner-toast] [data-icon] svg { width: 16px; height: 16px; margin: 0; }
html .ap-toaster [data-sonner-toast][data-type=success] [data-icon] { color: var(--success); }
html .ap-toaster [data-sonner-toast][data-type=error] [data-icon] { color: var(--destructive); }
html .ap-toaster [data-sonner-toast][data-type=warning] [data-icon] { color: var(--warning); }
html .ap-toaster [data-sonner-toast][data-type=info] [data-icon] { color: var(--primary); }
html .ap-toaster [data-sonner-toast] [data-content] { gap: 2px; min-width: 0; }
html .ap-toaster [data-sonner-toast] [data-title] { font-weight: 500; line-height: 20px; color: var(--popover-foreground); overflow-wrap: anywhere; }
html .ap-toaster [data-sonner-toast] [data-description] { color: var(--muted-foreground); line-height: 20px; overflow-wrap: anywhere; }
html .ap-toaster [data-sonner-toast] [data-description] a { color: var(--primary); font-weight: 500; }
html .ap-toaster [data-sonner-toast] [data-description] a:hover { text-decoration: none; opacity: .8; }
html .ap-toaster [data-sonner-toast] [data-close-button] {
  left: auto; right: 8px; top: 8px; transform: none; width: 24px; height: 24px; border: 0; border-radius: 6px;
  background: transparent; color: var(--muted-foreground); opacity: 1;
  transition: background-color 120ms, color 120ms;
}
html .ap-toaster [data-sonner-toast] [data-close-button]:hover { background: var(--accent); color: var(--popover-foreground); border: 0; }
html .ap-toaster [data-sonner-toast] [data-close-button]:focus-visible { box-shadow: 0 0 0 1px var(--ring-color, var(--primary)); outline: none; }
html .ap-toaster [data-sonner-toast] [data-close-button] svg { width: 16px; height: 16px; }
html .ap-toaster [data-sonner-toast] [data-button] { height: 24px; padding: 0 8px; border-radius: 6px; font-size: 12px; font-weight: 500; background: var(--primary); color: var(--primary-foreground); flex: none; align-self: center; }
.ap-toast-spinner { width: 14px; height: 14px; border-radius: 999px; border: 2px solid currentColor; border-right-color: transparent; opacity: .8; animation: ap-toast-spin .7s linear infinite; }
@keyframes ap-toast-spin { to { transform: rotate(1turn); } }
/* an updated toast replays its type (two names so each update restarts it) */
.ap-toast-replay-ok-odd, .ap-toast-replay-ok-even { animation: ap-toast-pulse-a 320ms cubic-bezier(.5, 1, .89, 1); }
.ap-toast-replay-ok-even { animation-name: ap-toast-pulse-b; }
.ap-toast-replay-err-odd, .ap-toast-replay-err-even { animation: ap-toast-shake-a 280ms cubic-bezier(.5, 1, .89, 1); }
.ap-toast-replay-err-even { animation-name: ap-toast-shake-b; }
@keyframes ap-toast-pulse-a { 0%, 100% { scale: 1; } 30% { scale: 1.025; } 60% { scale: .99; } }
@keyframes ap-toast-pulse-b { 0%, 100% { scale: 1; } 30% { scale: 1.025; } 60% { scale: .99; } }
@keyframes ap-toast-shake-a { 0%, 100% { translate: 0 0; } 25%, 75% { translate: -3px 0; } 50% { translate: 3px 0; } }
@keyframes ap-toast-shake-b { 0%, 100% { translate: 0 0; } 25%, 75% { translate: -3px 0; } 50% { translate: 3px 0; } }
/* like the tables (owner), the toast's slide plays even with Windows animation effects off: sonner's own
   reduced-motion rule (transition/animation none !important) is undone here */
@media (prefers-reduced-motion) {
  html .ap-toaster [data-sonner-toast][data-styled=true] {
    transition: transform 350ms var(--ap-toast-ease), opacity 350ms var(--ap-toast-ease), height 150ms cubic-bezier(.25, .1, .25, 1) !important;
  }
  html .ap-toaster [data-sonner-toast][data-styled=true] > * { transition: opacity 200ms cubic-bezier(0, 0, .2, 1) !important; }
  html .ap-toaster .ap-toast-replay-ok-odd { animation: ap-toast-pulse-a 320ms cubic-bezier(.5, 1, .89, 1) !important; }
  html .ap-toaster .ap-toast-replay-ok-even { animation: ap-toast-pulse-b 320ms cubic-bezier(.5, 1, .89, 1) !important; }
  html .ap-toaster .ap-toast-replay-err-odd { animation: ap-toast-shake-a 280ms cubic-bezier(.5, 1, .89, 1) !important; }
  html .ap-toaster .ap-toast-replay-err-even { animation: ap-toast-shake-b 280ms cubic-bezier(.5, 1, .89, 1) !important; }
  html .ap-toaster .ap-toast-spinner { animation: ap-toast-spin .7s linear infinite !important; }
}
@media print { .ap-toaster { display: none !important; } }
.ap-search-trigger { white-space: nowrap; } .ap-search-trigger > .ap-btn-icon { flex: none; } /* the icon is a span too: only the label stretches */

/* app popover list (TypeAhead / SearchSelect drop-downs; was Bootstrap .dropdown-menu) */
.ap-popover-list { position: absolute; z-index: 1050; margin: 2px 0 0; padding: 4px; list-style: none; min-width: 160px; background: var(--popover); color: var(--popover-foreground); font-size: 14px; text-align: left; box-shadow: var(--shadow-lg), 0 0 0 1px var(--hairline); }
.ap-popover-list > li > a { display: block; padding: 5px 8px; color: var(--text); cursor: pointer; white-space: normal; text-decoration: none; }
.ap-popover-list > li.active > a, .ap-popover-list > li > a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.ap-date .ap-date-icon { margin: 0; padding: 0; }
@media (max-width: 991px) { .ap-search-trigger > .ap-btn-icon { display: inline-flex !important; } } /* the phone rule hides the label spans, not the icon */

/* ---------- Spectrum UI data-table look for every list (owner, 2026-11-10) ----------
   ui/data-table.tsx (DataTable / ActionTable) carries it in its own classes; DataTableJS (legacy lists, picker
   dialogs) gets the same card, toolbar, pills and pager here. Theme tokens only (night mode follows). */
.sp-shell { margin-bottom: 12px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); overflow: hidden; }
.sp-shell .sp-shell-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 0; padding: 12px 16px; }
.sp-shell .sp-shell-scroll { width: 100%; overflow-x: auto; border-top: 1px solid var(--border); }
.sp-shell .sp-shell-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 0; padding: 10px 16px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--muted); }
.sp-shell .dt-info { margin: 0; padding: 0; color: var(--muted); font-size: 12.5px; }
.sp-shell .sp-range { font-variant-numeric: tabular-nums; color: var(--muted); }
.sp-shell .sp-range-of { color: var(--muted); opacity: .8; }
/* search: a pill with an outline glass that darkens on focus, widening like Spectrum's */
.sp-shell .sp-search { position: relative; display: flex; align-items: center; flex: 0 1 240px; min-width: 180px; margin-left: auto; transition: flex-basis .3s cubic-bezier(.2,0,0,1); }
.sp-shell .sp-search:focus-within { flex-basis: 300px; }
.sp-shell .sp-search > svg { position: absolute; left: 11px; color: var(--muted); pointer-events: none; transition: color .15s ease-out; }
.sp-shell .sp-search:focus-within > svg { color: var(--text-2); }
.sp-shell .sp-search-input { width: 100%; height: 34px; padding: 0 30px 0 32px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--text); font-size: 13px; outline: none; transition: border-color .15s ease-out; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
.sp-shell .sp-search-input::-moz-placeholder { color: var(--muted); }
.sp-shell .sp-search-input::placeholder { color: var(--muted); }
.sp-shell .sp-search-input:focus { border-color: var(--text-2); box-shadow: none; }
.sp-shell .sp-search-input::-webkit-search-cancel-button { display: none; }
.sp-shell .sp-search > kbd { position: absolute; right: 10px; pointer-events: none; }
.sp-shell .sp-search-input:focus + kbd { display: none; }
/* quick-filter pills with live counts; the chosen one is solid ink (white at night) */
.sp-fpills { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.sp-fpill { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: 500 12.5px/1 inherit; font-family: inherit; cursor: pointer; transition: background-color .14s ease-out, color .14s ease-out; }
.sp-fpill:hover { background: var(--surface-2); color: var(--text); }
.sp-fpill:focus-visible { outline: none; box-shadow: 0 0 0 1px var(--ring-color); }
.sp-fpill { position: relative; }
.sp-fpill > .sp-fpill-fill { position: absolute; inset: 0; z-index: 0; border-radius: 999px; background: var(--text); }
.sp-fpill > .sp-fpill-t, .sp-fpill > .sp-fpill-n { position: relative; z-index: 1; }
.sp-fpill[aria-pressed="true"] { color: var(--surface); background: transparent; }
.sp-fpill[aria-pressed="true"]:hover { background: transparent; }
.sp-fpill-n { font-variant-numeric: tabular-nums; opacity: .6; }
.sp-fpill[aria-pressed="true"] .sp-fpill-n { opacity: .7; }
/* table: no header fill, roomy single-line rows, soft hover */
.sp-shell table.sp-shell-table thead th { height: 42px; background: var(--surface); padding: 0 16px; color: var(--text-2); font-size: 13px; font-weight: 600; border-bottom: 1px solid var(--border); }
.sp-shell table.sp-shell-table tbody td { padding: 9px 16px; border-top: 1px solid var(--border); }
.sp-shell table.sp-shell-table tbody tr:first-child td { border-top: 0; }
.sp-shell table.sp-shell-table tbody tr { transition: background-color .1s ease-out; }
.sp-shell table.sp-shell-table tbody tr:hover { background: var(--sidebar); }
.sp-shell table.sp-shell-table td.dataTables_empty { padding: 28px 16px; color: var(--muted); }
/* pager: ‹ n / N › */
.sp-shell .sp-pager { display: flex; align-items: center; gap: 4px; }
.sp-shell .sp-page { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; transition: background-color .12s ease-out, color .12s ease-out; }
.sp-shell .sp-page:hover:not(:disabled) { background: var(--surface-2); color: var(--text); }
.sp-shell .sp-page:disabled { opacity: .4; cursor: default; }
.sp-shell .sp-page-n { min-width: 44px; text-align: center; font-variant-numeric: tabular-nums; font-size: 12.5px; color: var(--muted); }
.picker-body .sp-shell { margin: 0; }

/* status pills: Spectrum's dot + word, used by DataTable's status column and by the old lists' .label badges */
.sp-pill, .sp-shell .label, .sp-table .label { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border: 0; border-radius: 999px; font-size: 12px; font-weight: 500; line-height: 1; white-space: nowrap; }
.sp-pill-dot, .sp-shell .label::before, .sp-table .label::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: currentColor; flex: none; }
.sp-pill-dot { content: none; }
.sp-pill-good, .sp-shell .label-success, .sp-table .label-success { color: var(--success-text); background: var(--success-50); box-shadow: inset 0 0 0 1px var(--success-100); }
.sp-pill-wait, .sp-shell .label-warning, .sp-table .label-warning, .sp-shell .label-danger.is-pending { color: var(--warning-text); background: var(--warning-50); box-shadow: inset 0 0 0 1px var(--warning-100); }
.sp-pill-bad, .sp-shell .label-danger, .sp-table .label-danger { color: var(--danger-text); background: var(--danger-50); box-shadow: inset 0 0 0 1px var(--danger-100); }
.sp-pill-plain, .sp-shell .label-default, .sp-shell .label-info, .sp-shell .label-primary { color: var(--text-2); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border); }

/* row checkboxes + the floating selection bar (Spectrum: ink pill with "N selected · Copy · Export · ×") */
.sp-shell { position: relative; }
.sp-shell table.sp-shell-table th.sp-check-col, .sp-shell table.sp-shell-table td.sp-check-col { width: 44px; padding-left: 16px !important; padding-right: 0 !important; }
.sp-shell table.sp-shell-table tbody tr[data-selected] { background: var(--sidebar); }
.sp-check { position: relative; display: inline-grid; place-items: center; width: 18px; height: 18px; vertical-align: middle; }
.sp-check > input { position: absolute; inset: 0; width: 100% !important; height: 100% !important; margin: 0; opacity: 0; cursor: pointer; }
.sp-check-box { display: grid; place-items: center; width: 18px; height: 18px; border: 1px solid var(--border-strong); border-radius: 5px; background: var(--surface); color: var(--surface); pointer-events: none; transition: background-color .12s ease-out, border-color .12s ease-out; }
.sp-check > input:checked + .sp-check-box, .sp-check > input:indeterminate + .sp-check-box { background: var(--text); border-color: var(--text); }
.sp-check > input:focus-visible + .sp-check-box { box-shadow: 0 0 0 2px var(--ring-color); }
.sp-check:hover .sp-check-box { border-color: var(--text-2); }
.sp-check-dash { display: block; width: 9px; height: 2.2px; border-radius: 999px; background: currentColor; }
.sp-bulk-wrap { pointer-events: none; position: absolute; left: 0; right: 0; bottom: 60px; z-index: 5; display: flex; justify-content: center; padding: 0 12px; }
.sp-bulk { pointer-events: auto; display: flex; align-items: center; gap: 4px; max-width: 100%; padding: 4px 4px 4px 12px; border-radius: 999px; background: var(--text); color: var(--surface); white-space: nowrap; box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.sp-bulk-n { padding-right: 4px; font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; }
.sp-bulk-sep { width: 1px; height: 16px; background: currentColor; opacity: .2; }
.sp-bulk-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 0; border-radius: 999px; background: transparent; color: inherit; font: 500 13px/1 inherit; font-family: inherit; cursor: pointer; transition: background-color .12s ease-out; }
.sp-bulk-btn:hover { background: rgba(255,255,255,.1); }
html.dark .sp-bulk-btn:hover { background: rgba(0,0,0,.08); }
.sp-bulk-btn:focus-visible, .sp-bulk-x:focus-visible { outline: none; box-shadow: 0 0 0 1px currentColor; }
.sp-bulk-btn > svg { width: 16px; height: 16px; }
.sp-bulk-x { display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 999px; background: transparent; color: inherit; opacity: .6; cursor: pointer; }
.sp-bulk-x:hover { opacity: 1; }

/* ---------- AttachmentUpload (components/motion/attachment-upload.tsx, karaUI-like) ---------- */
.au { display: grid; gap: 8px; }
.au-label { font-size: 13px; font-weight: 500; color: var(--text-2); }
.au-list { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.au-card { position: relative; display: flex; align-items: center; width: 220px; height: 64px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); overflow: hidden; }
.au-card.is-image { width: 96px; height: 96px; }
.au-card.is-failed { border-color: var(--danger-100); }
.au-thumb { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; display: block; }
.au-file { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 0 34px 0 10px; }
.au-file-icon, .au-play { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 10px; background: var(--surface-2); color: var(--text-2); border: 0; }
.au-play { cursor: pointer; background: var(--text); color: var(--surface); border-radius: 999px; }
.au-file-text { display: grid; min-width: 0; }
.au-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 500; color: var(--text); }
.au-meta { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.au-remove { position: absolute; top: 6px; right: 6px; z-index: 3; display: grid; place-items: center; width: 22px; height: 22px; border: 0; border-radius: 999px; background: rgba(0,0,0,.55); color: #fff; cursor: pointer; opacity: 0; transition: opacity .14s ease-out; }
.au-card:hover .au-remove, .au-remove:focus-visible { opacity: 1; }
.au-card:not(.is-image) .au-remove { background: transparent; color: var(--muted); opacity: 1; }
.au-card:not(.is-image) .au-remove:hover { color: var(--text); background: var(--surface-2); }
.au-add { width: 96px; height: 96px; border-style: dashed; border-color: var(--border-strong); background: var(--sidebar); transition: border-color .14s ease-out, background-color .14s ease-out; }
.au-add.is-over, .au-add:hover { border-color: var(--text-2); background: var(--surface-2); }
.au-add-btn { display: grid; place-items: center; gap: 4px; width: 100%; height: 100%; border: 0; background: transparent; color: var(--muted); font-size: 12px; font-family: inherit; cursor: pointer; }
.au-status { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; background: rgba(0,0,0,.42); color: #fff; }
.au-status.is-round { border-radius: 999px; }
.au-status.is-complete { background: rgba(0,0,0,.32); }
.au-status.is-failed { background: var(--danger-50); color: var(--danger-text); padding: 6px; text-align: center; }
.au-ring { width: 34px; height: 34px; transform: rotate(-90deg); }
.au-ring-track { fill: none; stroke: rgba(255,255,255,.3); stroke-width: 3; }
.au-ring-bar { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; }
.au-done { width: 30px; height: 30px; }
.au-failed { display: grid; gap: 4px; justify-items: center; font-size: 11.5px; font-weight: 500; }
.au-retry { padding: 2px 10px; border: 1px solid currentColor; border-radius: 999px; background: transparent; color: inherit; font: 500 11.5px inherit; font-family: inherit; cursor: pointer; }
.au-hint { margin: 0; font-size: 12px; color: var(--muted); }
.au-error { margin: 0; font-size: 12.5px; color: var(--danger-text); }
.au-avatar { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.au-avatar-ring { position: relative; display: grid; place-items: center; flex: none; width: 112px; height: 112px; padding: 0; border: 1px dashed var(--border-strong); border-radius: 999px; background: var(--sidebar); color: var(--muted); cursor: pointer; overflow: visible; transition: border-color .14s ease-out; }
.au-avatar-ring.is-over, .au-avatar-ring:hover { border-color: var(--text-2); }
.au-avatar-ring:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ring-color); }
.au-avatar-img { width: 100%; height: 100%; border-radius: 999px; -o-object-fit: cover; object-fit: cover; display: block; }
.au-avatar-empty { display: grid; place-items: center; }
.au-avatar-edit { position: absolute; right: 2px; bottom: 2px; z-index: 3; display: grid; place-items: center; width: 30px; height: 30px; border: 2px solid var(--surface); border-radius: 999px; background: var(--text); color: var(--surface); }
.au-avatar-side { display: grid; gap: 6px; min-width: 0; }
.au-avatar-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.au-btn { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border: 1px solid var(--text); border-radius: 999px; background: var(--text); color: var(--surface); font: 500 13px/1 inherit; font-family: inherit; cursor: pointer; transition: opacity .12s ease-out; }
.au-btn:hover { opacity: .88; }
.au-btn-quiet { background: transparent; color: var(--text); border-color: var(--border-strong); }
.au-btn:disabled { opacity: .5; cursor: default; }
/* top bar, far right: the user's picture → Profile / Night mode / Log out (AppShell UserMenu) */
.ap-avatar-btn { display: grid; place-items: center; flex: none; width: 34px; height: 34px; margin-left: 2px; padding: 0; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); color: var(--text-2); cursor: pointer; overflow: hidden; transition: box-shadow .14s ease-out, border-color .14s ease-out; }
.ap-avatar-btn:hover { border-color: var(--text-2); }
.ap-avatar-btn:focus-visible, .ap-avatar-btn[data-state="open"] { outline: none; box-shadow: 0 0 0 2px var(--ring-color); }
.ap-avatar-img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; display: block; }
.ap-avatar-initials { font-size: 12.5px; font-weight: 600; letter-spacing: .02em; }
.ap-user-menu-head { display: flex; align-items: center; gap: 10px; padding: 8px 10px !important; }
.ap-user-menu-avatar { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 999px; background: var(--surface-2); color: var(--text-2); font-size: 13px; font-weight: 600; overflow: hidden; }
.ap-user-menu-avatar img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
.ap-user-menu-item { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.ap-user-menu-out { color: var(--danger-text); }.ap-avatar-btn[data-has-picture] { background-size: cover; background-position: center; background-repeat: no-repeat; }
/* ---------- Reports hub (components/ReportsNav.tsx, owner 2026-11-11): report list beside every report page ---------- */
.ap-rpt { display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: 12px; align-items: start; }
.ap-rpt-main { min-width: 0; }
.ap-rpt-nav { position: sticky; top: 8px; display: flex; flex-direction: column; gap: 8px; max-height: calc(100svh - 112px); padding: 10px 8px; border: 1px solid var(--border); background: var(--card); }
.ap-rpt-head { display: flex; align-items: center; gap: 6px; padding: 0 6px; font-size: 15px; font-weight: 600; color: var(--foreground); }
.ap-rpt-search { display: flex; align-items: center; gap: 6px; height: 32px; margin: 0; padding: 0 9px; border: 1px solid var(--border); background: var(--background); color: var(--muted); font-weight: 400; }
.ap-rpt-search:focus-within { border-color: var(--ring-color, var(--primary)); }
.ap-rpt-search input { flex: 1; min-width: 0; height: 30px; padding: 0; border: 0 !important; outline: 0; box-shadow: none !important; background: transparent; color: var(--foreground); font-size: 14px; }
.ap-rpt-list { overflow: auto; min-height: 0; margin: 0 -2px; padding: 0 2px; }
.ap-rpt-group + .ap-rpt-group { margin-top: 8px; }
.ap-rpt-title { padding: 4px 8px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.ap-rpt-link { display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 5px 8px; border-left: 2px solid transparent; color: var(--text-2); font-size: 14px; line-height: 1.25; text-decoration: none; transition: background-color 120ms ease, color 120ms ease; }
.ap-rpt-link:hover { background: var(--secondary); color: var(--foreground); text-decoration: none; }
.ap-rpt-link:focus-visible { outline: 1px solid var(--ring-color, var(--primary)); outline-offset: -1px; }
.ap-rpt-link.is-active { border-left-color: var(--primary); background: var(--primary-50); color: var(--primary-700); font-weight: 500; }
.ap-rpt-link > .ap-btn-icon { flex: none; color: var(--muted); }
.ap-rpt-link.is-active > .ap-btn-icon { color: var(--primary-700); }
.ap-rpt-empty { padding: 8px; color: var(--muted); font-size: 13px; }
.ap-rpt-view { display: flex; flex-direction: column; gap: 8px; }
.ap-rpt-viewbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ap-rpt-viewbar h1 { margin: 0; font-size: 19px; }
.ap-rpt-frame { display: block; width: 100%; height: calc(100svh - 170px); min-height: 480px; border: 1px solid var(--border); background: #fff; }
@media (max-width: 991px) {
  .ap-rpt { grid-template-columns: minmax(0, 1fr); }
  .ap-rpt-nav { position: static; max-height: 280px; }
}
@media print { .ap-rpt { display: block; } }

/* Accounts hub, compact (owner, 2026-11-12: "less padding / gap / space — rows break into 2-3 lines"): a narrower list,
   tighter rows and cards, and short values (dates, amounts, buttons) that never break onto a second line. */
.ap-rpt.is-accounts { grid-template-columns: 196px minmax(0, 1fr); gap: 8px; }
.is-accounts .ap-rpt-nav { gap: 6px; padding: 8px 6px; }
.is-accounts .ap-rpt-head { font-size: 14px; padding: 0 4px; }
.is-accounts .ap-rpt-search { height: 29px; padding: 0 8px; }
.is-accounts .ap-rpt-search input { height: 27px; font-size: 13px; }
.is-accounts .ap-rpt-group + .ap-rpt-group { margin-top: 4px; }
.is-accounts .ap-rpt-title { padding: 3px 6px; font-size: 10.5px; }
.is-accounts .ap-rpt-link { gap: 7px; min-height: 28px; padding: 3px 6px; font-size: 13.5px; }
.is-accounts .ap-rpt-main [data-slot="card"] { margin-bottom: 8px; }
.is-accounts .ap-rpt-main [data-slot="card-header"] { min-height: 38px; padding: 5px 10px; }
.is-accounts .ap-rpt-main [data-slot="card-content"] { padding: 8px 10px; }
.is-accounts .ap-rpt-main .panel-body { padding: 8px 10px; }
.is-accounts .ap-rpt-main .panel-heading { padding: 6px 10px; }
.is-accounts .sp-shell table.sp-shell-table thead th { height: 34px; padding: 0 10px; white-space: nowrap; }
.is-accounts .sp-shell table.sp-shell-table tbody td { padding: 5px 10px; line-height: 1.35; }
.is-accounts .sp-shell table.sp-shell-table tbody td:last-child { white-space: nowrap; }
.is-accounts .sp-shell table.sp-shell-table th.sp-check-col, .is-accounts .sp-shell table.sp-shell-table td.sp-check-col { width: 34px; padding-left: 10px !important; }
.is-accounts .ap-nowrap { white-space: nowrap; }
.is-accounts .ap-rpt-main > h1, .is-accounts .ap-rpt-main > h2, .is-accounts .ap-rpt-main > * > h1, .is-accounts .ap-rpt-main > * > h2 { margin: 0 0 6px; font-size: 17px; }
.is-accounts .ap-rpt-main hr { margin: 6px 0 8px; }
.is-accounts .ap-rpt-main .panel { margin-bottom: 8px; }
.is-accounts .ap-rpt-main .panel-heading h4 { margin: 0; font-size: 14px; }
.is-accounts .ap-rpt-main .panel-body table:not(.table):not(.sp-shell-table) td { padding-top: 3px; padding-bottom: 3px; }
.is-accounts .ap-rpt-main .margin-top { margin-top: 4px; }
.is-accounts .ap-rpt-main #drcr { min-width: 64px; }
.is-accounts .sp-shell-table td .btn-xs + .btn-xs, .is-accounts .sp-shell-table td a + a { margin-left: 4px; }
@media (max-width: 991px) { .ap-rpt.is-accounts { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Notifications bell (components/NotificationBell.tsx, owner 2026-11-11) ---------- */
.ap-bell-btn { position: relative; }
.ap-bell-count { position: absolute; top: -4px; right: -5px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9999px;
  background: var(--danger); color: #fff; font-size: 10.5px; font-weight: 700; line-height: 17px; text-align: center; pointer-events: none;
  box-shadow: 0 0 0 2px var(--background); }
.ap-notes-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--border); }
.ap-notes-head strong { font-size: 14px; }
.ap-notes-readall { display: inline-flex; align-items: center; gap: 4px; border: 0; background: transparent; color: var(--primary); font-size: 12.5px; cursor: pointer; padding: 2px 4px; }
.ap-notes-readall:hover { text-decoration: underline; }
.ap-notes-list { max-height: min(420px, 70vh); overflow-y: auto; padding: 4px; }
.ap-notes-empty { margin: 0; padding: 20px 12px; color: var(--muted); font-size: 13px; text-align: center; }
.ap-note { display: flex !important; align-items: flex-start !important; gap: 10px; padding: 8px !important; cursor: pointer; white-space: normal !important; }
.ap-note.is-unread { background: var(--primary-50); }
.ap-note-icon { flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 9999px; background: var(--secondary); color: var(--text-2); }
.ap-note-icon.is-approved { background: var(--success-50); color: var(--success-text); }
.ap-note-icon.is-rejected { background: var(--danger-50); color: var(--danger-text); }
.ap-note-icon.is-invoice, .ap-note-icon.is-voucher { background: var(--primary-50); color: var(--primary-700); }
.ap-note-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.ap-note-title { font-size: 13.5px; font-weight: 600; color: var(--foreground); line-height: 1.3; }
.ap-note-body { font-size: 12.5px; color: var(--text-2); line-height: 1.35; }
.ap-note-time { font-size: 11.5px; color: var(--muted); }
.ap-note-dot { flex: none; width: 8px; height: 8px; margin-top: 6px; border-radius: 9999px; background: var(--primary); }
@media (prefers-reduced-motion: no-preference) {
  .ap-btn-icon[data-on][data-icon=bell] > svg { animation: ap-ic-ring 600ms ease-in-out; transform-origin: 50% 10%; }
}
@keyframes ap-ic-ring { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(14deg); } 30% { transform: rotate(-12deg); } 45% { transform: rotate(8deg); } 60% { transform: rotate(-5deg); } 75% { transform: rotate(2deg); } }

/* Click feedback (owner 2026-11-11, speed): between a click and the new page the content fades at once (FastNav sets
   html[data-nav-busy]) — the click answers immediately even while the server is still working. */
.ap-content { transition: opacity 120ms ease; }
html[data-nav-busy] .ap-content { opacity: .5; pointer-events: none; transition-delay: 40ms; }