*, ::before, ::after { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-gradient-from-position: ; --tw-gradient-via-position: ; --tw-gradient-to-position: ; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; --tw-contain-size: ; --tw-contain-layout: ; --tw-contain-paint: ; --tw-contain-style: ; } ::backdrop { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-gradient-from-position: ; --tw-gradient-via-position: ; --tw-gradient-to-position: ; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; --tw-contain-size: ; --tw-contain-layout: ; --tw-contain-paint: ; --tw-contain-style: ; }/* ! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com *//* 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) */ *, ::before, ::after { box-sizing: border-box; /* 1 */ border-width: 0; /* 2 */ border-style: solid; /* 2 */ border-color: #e5e7eb; /* 2 */ } ::before, ::after { --tw-content: ''; } /* 1. Use a consistent sensible line-height in all browsers. 2. Prevent adjustments of font size after orientation changes in iOS. 3. Use a more readable tab size. 4. Use the user's configured `sans` font-family by default. 5. Use the user's configured `sans` font-feature-settings by default. 6. Use the user's configured `sans` font-variation-settings by default. 7. Disable tap highlights on iOS */ html, :host { line-height: 1.5; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ -moz-tab-size: 4; /* 3 */ -o-tab-size: 4; tab-size: 4; /* 3 */ font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */ font-feature-settings: normal; /* 5 */ font-variation-settings: normal; /* 6 */ -webkit-tap-highlight-color: transparent; /* 7 */ } /* 1. Remove the margin in all browsers. 2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. */ body { margin: 0; /* 1 */ line-height: inherit; /* 2 */ } /* 1. Add the correct height in Firefox. 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) 3. Ensure horizontal rules are visible by default. */ hr { height: 0; /* 1 */ color: inherit; /* 2 */ border-top-width: 1px; /* 3 */ } /* Add the correct text decoration in Chrome, Edge, and Safari. */ abbr:where([title]) { -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } /* Remove the default font size and weight for headings. */ h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } /* Reset links to optimize for opt-in styling instead of opt-out. */ a { color: inherit; text-decoration: inherit; } /* Add the correct font weight in Edge and Safari. */ b, strong { font-weight: bolder; } /* 1. Use the user's configured `mono` font-family by default. 2. Use the user's configured `mono` font-feature-settings by default. 3. Use the user's configured `mono` font-variation-settings by default. 4. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */ font-feature-settings: normal; /* 2 */ font-variation-settings: normal; /* 3 */ font-size: 1em; /* 4 */ } /* Add the correct font size in all browsers. */ small { font-size: 80%; } /* Prevent `sub` and `sup` elements from affecting the line height in all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) 2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) 3. Remove gaps between table borders by default. */ table { text-indent: 0; /* 1 */ border-color: inherit; /* 2 */ border-collapse: collapse; /* 3 */ } /* 1. Change the font styles in all browsers. 2. Remove the margin in Firefox and Safari. 3. Remove default padding in all browsers. */ button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-feature-settings: inherit; /* 1 */ font-variation-settings: inherit; /* 1 */ font-size: 100%; /* 1 */ font-weight: inherit; /* 1 */ line-height: inherit; /* 1 */ letter-spacing: inherit; /* 1 */ color: inherit; /* 1 */ margin: 0; /* 2 */ padding: 0; /* 3 */ } /* Remove the inheritance of text transform in Edge and Firefox. */ button, select { text-transform: none; } /* 1. Correct the inability to style clickable types in iOS and Safari. 2. Remove default button styles. */ button, input:where([type='button']), input:where([type='reset']), input:where([type='submit']) { -webkit-appearance: button; /* 1 */ background-color: transparent; /* 2 */ background-image: none; /* 2 */ } /* Use the modern Firefox focus style for all focusable elements. */ :-moz-focusring { outline: auto; } /* Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) */ :-moz-ui-invalid { box-shadow: none; } /* Add the correct vertical alignment in Chrome and Firefox. */ progress { vertical-align: baseline; } /* Correct the cursor style of increment and decrement buttons in Safari. */ ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; } /* 1. Correct the odd appearance in Chrome and Safari. 2. Correct the outline style in Safari. */ [type='search'] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /* Remove the inner padding in Chrome and Safari on macOS. */ ::-webkit-search-decoration { -webkit-appearance: none; } /* 1. Correct the inability to style clickable types in iOS and Safari. 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Add the correct display in Chrome and Safari. */ summary { display: list-item; } /* Removes the default spacing and border for appropriate elements. */ blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre { margin: 0; } fieldset { margin: 0; padding: 0; } legend { padding: 0; } ol, ul, menu { list-style: none; margin: 0; padding: 0; } /* Reset default styling for dialogs. */ dialog { padding: 0; } /* Prevent resizing textareas horizontally by default. */ textarea { resize: vertical; } /* 1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) 2. Set the default placeholder color to the user's configured gray 400 color. */ input::-moz-placeholder, textarea::-moz-placeholder { opacity: 1; /* 1 */ color: #9ca3af; /* 2 */ } input::placeholder, textarea::placeholder { opacity: 1; /* 1 */ color: #9ca3af; /* 2 */ } /* Set the default cursor for buttons. */ button, [role="button"] { cursor: pointer; } /* Make sure disabled buttons don't get the pointer cursor. */ :disabled { cursor: default; } /* 1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) 2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) This can trigger a poorly considered lint error in some tools but is included by design. */ img, svg, video, canvas, audio, iframe, embed, object { display: block; /* 1 */ vertical-align: middle; /* 2 */ } /* Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) */ img, video { max-width: 100%; height: auto; } /* Make elements with the HTML hidden attribute stay hidden by default */ [hidden]:where(:not([hidden="until-found"])) { display: none; } input:where([type='text']),input:where(:not([type])),input:where([type='email']),input:where([type='url']),input:where([type='password']),input:where([type='number']),input:where([type='date']),input:where([type='datetime-local']),input:where([type='month']),input:where([type='search']),input:where([type='tel']),input:where([type='time']),input:where([type='week']),select:where([multiple]),textarea,select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: #fff; border-color: #6b7280; border-width: 1px; border-radius: 0px; padding-top: 0.5rem; padding-right: 0.75rem; padding-bottom: 0.5rem; padding-left: 0.75rem; font-size: 1rem; line-height: 1.5rem; --tw-shadow: 0 0 #0000; } input:where([type='text']):focus, input:where(:not([type])):focus, input:where([type='email']):focus, input:where([type='url']):focus, input:where([type='password']):focus, input:where([type='number']):focus, input:where([type='date']):focus, input:where([type='datetime-local']):focus, input:where([type='month']):focus, input:where([type='search']):focus, input:where([type='tel']):focus, input:where([type='time']):focus, input:where([type='week']):focus, select:where([multiple]):focus, textarea:focus, select:focus { outline: 2px solid transparent; outline-offset: 2px; --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/); --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: #2563eb; --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); border-color: #2563eb; } input::-moz-placeholder, textarea::-moz-placeholder { color: #6b7280; opacity: 1; } input::placeholder,textarea::placeholder { color: #6b7280; opacity: 1; } ::-webkit-datetime-edit-fields-wrapper { padding: 0; } ::-webkit-date-and-time-value { min-height: 1.5em; text-align: inherit; } ::-webkit-datetime-edit { display: inline-flex; } ::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field { padding-top: 0; padding-bottom: 0; } select { background-image: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 fill=%27none%27 viewBox=%270 0 20 20%27%3e%3cpath stroke=%27%236b7280%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 stroke-width=%271.5%27 d=%27M6 8l4 4 4-4%27/%3e%3c/svg%3e"); background-position: right 0.5rem center; background-repeat: no-repeat; background-size: 1.5em 1.5em; padding-right: 2.5rem; -webkit-print-color-adjust: exact; print-color-adjust: exact; } select:where([multiple]),select:where([size]:not([size="1"])) { background-image: initial; background-position: initial; background-repeat: unset; background-size: initial; padding-right: 0.75rem; -webkit-print-color-adjust: unset; print-color-adjust: unset; } input:where([type='checkbox']),input:where([type='radio']) { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding: 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; display: inline-block; vertical-align: middle; background-origin: border-box; -webkit-user-select: none; -moz-user-select: none; user-select: none; flex-shrink: 0; height: 1rem; width: 1rem; color: #2563eb; background-color: #fff; border-color: #6b7280; border-width: 1px; --tw-shadow: 0 0 #0000; } input:where([type='checkbox']) { border-radius: 0px; } input:where([type='radio']) { border-radius: 100%; } input:where([type='checkbox']):focus,input:where([type='radio']):focus { outline: 2px solid transparent; outline-offset: 2px; --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/); --tw-ring-offset-width: 2px; --tw-ring-offset-color: #fff; --tw-ring-color: #2563eb; --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow); } input:where([type='checkbox']):checked,input:where([type='radio']):checked { border-color: transparent; background-color: currentColor; background-size: 100% 100%; background-position: center; background-repeat: no-repeat; } input:where([type='checkbox']):checked { background-image: url("data:image/svg+xml,%3csvg viewBox=%270 0 16 16%27 fill=%27white%27 xmlns=%27http://www.w3.org/2000/svg%27%3e%3cpath d=%27M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z%27/%3e%3c/svg%3e"); } @media (forced-colors: active) { input:where([type='checkbox']):checked { -webkit-appearance: auto; -moz-appearance: auto; appearance: auto; } } input:where([type='radio']):checked { background-image: url("data:image/svg+xml,%3csvg viewBox=%270 0 16 16%27 fill=%27white%27 xmlns=%27http://www.w3.org/2000/svg%27%3e%3ccircle cx=%278%27 cy=%278%27 r=%273%27/%3e%3c/svg%3e"); } @media (forced-colors: active) { input:where([type='radio']):checked { -webkit-appearance: auto; -moz-appearance: auto; appearance: auto; } } input:where([type='checkbox']):checked:hover,input:where([type='checkbox']):checked:focus,input:where([type='radio']):checked:hover,input:where([type='radio']):checked:focus { border-color: transparent; background-color: currentColor; } input:where([type='checkbox']):indeterminate { background-image: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 fill=%27none%27 viewBox=%270 0 16 16%27%3e%3cpath stroke=%27white%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 stroke-width=%272%27 d=%27M4 8h8%27/%3e%3c/svg%3e"); border-color: transparent; background-color: currentColor; background-size: 100% 100%; background-position: center; background-repeat: no-repeat; } @media (forced-colors: active) { input:where([type='checkbox']):indeterminate { -webkit-appearance: auto; -moz-appearance: auto; appearance: auto; } } input:where([type='checkbox']):indeterminate:hover,input:where([type='checkbox']):indeterminate:focus { border-color: transparent; background-color: currentColor; } input:where([type='file']) { background: unset; border-color: inherit; border-width: 0; border-radius: 0; padding: 0; font-size: unset; line-height: inherit; } input:where([type='file']):focus { outline: 1px solid ButtonText; outline: 1px auto -webkit-focus-ring-color; } html { font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } body { --tw-bg-opacity: 1; background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(15 23 42 / var(--tw-text-opacity, 1)); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body:is(.dark *) { --tw-bg-opacity: 1; background-color: rgb(21 21 25 / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(232 232 234 / var(--tw-text-opacity, 1)); } .container { width: 100%; } @media (min-width: 640px) { .container { max-width: 640px; } } @media (min-width: 768px) { .container { max-width: 768px; } } @media (min-width: 1024px) { .container { max-width: 1024px; } } @media (min-width: 1280px) { .container { max-width: 1280px; } } @media (min-width: 1536px) { .container { max-width: 1536px; } } .app-shell { min-height: 100vh; --tw-bg-opacity: 1; background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1)); } .app-shell:is(.dark *) { --tw-bg-opacity: 1; background-color: rgb(21 21 25 / var(--tw-bg-opacity, 1)); } .sidebar { position: fixed; top: 0px; bottom: 0px; left: 0px; z-index: 50; display: flex; width: 18rem; --tw-translate-x: -100%; 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)); flex-direction: column; border-right-width: 1px; --tw-border-opacity: 1; border-color: rgb(226 232 240 / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 200ms; transition-timing-function: cubic-bezier(0, 0, 0.2, 1); } .sidebar:is(.dark *) { --tw-border-opacity: 1; border-color: rgb(44 44 50 / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(26 27 31 / var(--tw-bg-opacity, 1)); } @media (min-width: 1024px) { .sidebar { z-index: 40; --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)); } } .sidebar-open { --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)); } .sidebar-scrim { position: fixed; inset: 0px; z-index: 40; background-color: rgb(2 6 23 / 0.6); } @media (min-width: 1024px) { .sidebar-scrim { display: none; } } .nav-toggle { display: inline-flex; height: 2.5rem; width: 2.5rem; flex-shrink: 0; align-items: center; justify-content: center; --tw-text-opacity: 1; color: rgb(71 85 105 / var(--tw-text-opacity, 1)); 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; } .nav-toggle:hover { --tw-bg-opacity: 1; background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(15 23 42 / var(--tw-text-opacity, 1)); } .nav-toggle:is(.dark *) { --tw-text-opacity: 1; color: rgb(201 201 207 / var(--tw-text-opacity, 1)); } .nav-toggle:hover:is(.dark *) { --tw-bg-opacity: 1; background-color: rgb(35 35 41 / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } .nav-toggle { border-radius: 2px; } .nav-link { display: flex; align-items: center; gap: 0.75rem; border-left-width: 2px; border-color: transparent; padding-left: 0.75rem; padding-right: 0.75rem; padding-top: 0.5rem; padding-bottom: 0.5rem; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; --tw-text-opacity: 1; color: rgb(71 85 105 / var(--tw-text-opacity, 1)); 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; } .nav-link:hover { --tw-bg-opacity: 1; background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(2 6 23 / var(--tw-text-opacity, 1)); } .nav-link:is(.dark *) { --tw-text-opacity: 1; color: rgb(169 169 176 / var(--tw-text-opacity, 1)); } .nav-link:hover:is(.dark *) { --tw-border-opacity: 1; border-color: rgb(74 74 81 / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(35 35 41 / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(244 244 245 / var(--tw-text-opacity, 1)); } .nav-link { border-radius: 2px; } .nav-link-active { --tw-border-opacity: 1; border-color: rgb(239 63 63 / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(255 241 241 / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(206 44 44 / var(--tw-text-opacity, 1)); } .nav-link-active:is(.dark *) { --tw-bg-opacity: 1; background-color: rgb(37 33 38 / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(244 244 245 / var(--tw-text-opacity, 1)); --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); --tw-ring-color: rgb(239 63 63 / 0.3); } .main-panel { min-height: 100vh; padding-left: 0px; } @media (min-width: 1024px) { .main-panel { padding-left: 18rem; } } .topbar { position: sticky; top: 0px; z-index: 30; display: flex; height: 4rem; align-items: center; justify-content: space-between; gap: 0.5rem; border-bottom-width: 1px; --tw-border-opacity: 1; border-color: rgb(226 232 240 / var(--tw-border-opacity, 1)); background-color: rgb(255 255 255 / 0.9); padding-left: 1rem; padding-right: 1rem; --tw-backdrop-blur: blur(8px); 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); } .topbar:is(.dark *) { --tw-border-opacity: 1; border-color: rgb(44 44 50 / var(--tw-border-opacity, 1)); background-color: rgb(27 28 32 / 0.95); } @media (min-width: 640px) { .topbar { padding-left: 1.5rem; padding-right: 1.5rem; } } .admin-identity { display: none; height: 2.5rem; align-items: center; gap: 0.5rem; padding-left: 0.25rem; padding-right: 0.25rem; font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; --tw-text-opacity: 1; color: rgb(51 65 85 / var(--tw-text-opacity, 1)); 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; } .admin-identity:hover { --tw-text-opacity: 1; color: rgb(239 63 63 / var(--tw-text-opacity, 1)); } .admin-identity:focus { outline: 2px solid transparent; outline-offset: 2px; --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); --tw-ring-color: rgb(242 88 77 / 0.3); } .admin-identity:is(.dark *) { --tw-text-opacity: 1; color: rgb(240 240 242 / var(--tw-text-opacity, 1)); } .admin-identity:hover:is(.dark *) { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } @media (min-width: 640px) { .admin-identity { display: flex; } } .admin-identity { border-radius: 2px; } .admin-avatar { display: grid; height: 2rem; width: 2rem; place-items: center; --tw-bg-opacity: 1; background-color: rgb(42 43 48 / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(244 244 245 / var(--tw-text-opacity, 1)); border-radius: 9999px; } .page { width: 100%; padding-left: 1rem; padding-right: 1rem; padding-top: 1rem; padding-bottom: 1rem; } @media (min-width: 640px) { .page { padding-left: 1.5rem; padding-right: 1.5rem; padding-top: 1.5rem; padding-bottom: 1.5rem; } } .panel { border-width: 1px; --tw-border-opacity: 1; border-color: rgb(226 232 240 / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); --tw-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.10); --tw-shadow-colored: 0 1px 2px var(--tw-shadow-color), 0 1px 3px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .panel:is(.dark *) { --tw-border-opacity: 1; border-color: rgb(48 48 56 / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(32 33 38 / var(--tw-bg-opacity, 1)); --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); } .panel { border-radius: 2px; } .breadcrumbs { margin-bottom: 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: 0.875rem; line-height: 1.25rem; } .breadcrumb-link { padding-left: 0.25rem; padding-right: 0.25rem; font-weight: 500; --tw-text-opacity: 1; color: rgb(100 116 139 / var(--tw-text-opacity, 1)); 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; } .breadcrumb-link:hover { --tw-text-opacity: 1; color: rgb(15 23 42 / var(--tw-text-opacity, 1)); } .breadcrumb-link:is(.dark *) { --tw-text-opacity: 1; color: rgb(154 154 162 / var(--tw-text-opacity, 1)); } .breadcrumb-link:hover:is(.dark *) { --tw-text-opacity: 1; color: rgb(244 244 245 / var(--tw-text-opacity, 1)); } .breadcrumb-link { border-radius: 2px; } .breadcrumb-current { padding-left: 0.25rem; padding-right: 0.25rem; font-weight: 600; --tw-text-opacity: 1; color: rgb(15 23 42 / var(--tw-text-opacity, 1)); } .breadcrumb-current:is(.dark *) { --tw-text-opacity: 1; color: rgb(244 244 245 / var(--tw-text-opacity, 1)); } .breadcrumb-separator { height: 1rem; width: 1rem; --tw-text-opacity: 1; color: rgb(148 163 184 / var(--tw-text-opacity, 1)); } .breadcrumb-separator:is(.dark *) { --tw-text-opacity: 1; color: rgb(102 102 111 / var(--tw-text-opacity, 1)); } .panel-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; border-bottom-width: 1px; --tw-border-opacity: 1; border-color: rgb(226 232 240 / var(--tw-border-opacity, 1)); padding-left: 1.25rem; padding-right: 1.25rem; padding-top: 1rem; padding-bottom: 1rem; } .panel-header:is(.dark *) { --tw-border-opacity: 1; border-color: rgb(48 48 56 / var(--tw-border-opacity, 1)); } .panel-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; border-top-width: 1px; --tw-border-opacity: 1; border-color: rgb(226 232 240 / var(--tw-border-opacity, 1)); padding-left: 1.25rem; padding-right: 1.25rem; padding-top: 1rem; padding-bottom: 1rem; font-size: 0.875rem; line-height: 1.25rem; --tw-text-opacity: 1; color: rgb(100 116 139 / var(--tw-text-opacity, 1)); } .panel-footer:is(.dark *) { --tw-border-opacity: 1; border-color: rgb(48 48 56 / var(--tw-border-opacity, 1)); --tw-text-opacity: 1; color: rgb(154 154 162 / var(--tw-text-opacity, 1)); } .alert-error { --tw-bg-opacity: 1; background-color: rgb(255 241 242 / var(--tw-bg-opacity, 1)); padding-left: 0.75rem; padding-right: 0.75rem; padding-top: 0.5rem; padding-bottom: 0.5rem; font-size: 0.875rem; line-height: 1.25rem; --tw-text-opacity: 1; color: rgb(190 18 60 / var(--tw-text-opacity, 1)); } .alert-error:is(.dark *) { border-width: 1px; border-color: rgb(244 63 94 / 0.2); background-color: rgb(244 63 94 / 0.1); --tw-text-opacity: 1; color: rgb(253 164 175 / var(--tw-text-opacity, 1)); } .alert-error { border-radius: 2px; } .alert-success { --tw-bg-opacity: 1; background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1)); padding-left: 0.75rem; padding-right: 0.75rem; padding-top: 0.5rem; padding-bottom: 0.5rem; font-size: 0.875rem; line-height: 1.25rem; --tw-text-opacity: 1; color: rgb(6 95 70 / var(--tw-text-opacity, 1)); } .alert-success:is(.dark *) { border-width: 1px; border-color: rgb(16 185 129 / 0.2); background-color: rgb(16 185 129 / 0.1); --tw-text-opacity: 1; color: rgb(167 243 208 / var(--tw-text-opacity, 1)); } .alert-success { border-radius: 2px; } /* A refusal that belongs to one input, printed under that input. The tier editor used to have nowhere to put these, so every message landed in one banner above three stacked forms and could not say which form it came from. */ .field-error { margin-top: 0.25rem; display: flex; align-items: flex-start; gap: 0.375rem; font-size: 0.75rem; line-height: 1rem; font-weight: 500; --tw-text-opacity: 1; color: rgb(225 29 72 / var(--tw-text-opacity, 1)); } .field-error:is(.dark *) { --tw-text-opacity: 1; color: rgb(251 113 133 / var(--tw-text-opacity, 1)); } .field-note { margin-top: 0.25rem; font-size: 0.75rem; line-height: 1rem; --tw-text-opacity: 1; color: rgb(100 116 139 / var(--tw-text-opacity, 1)); } .field-note:is(.dark *) { --tw-text-opacity: 1; color: rgb(143 143 152 / var(--tw-text-opacity, 1)); } .alert-warn { --tw-bg-opacity: 1; background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1)); padding-left: 0.75rem; padding-right: 0.75rem; padding-top: 0.5rem; padding-bottom: 0.5rem; font-size: 0.875rem; line-height: 1.25rem; --tw-text-opacity: 1; color: rgb(146 64 14 / var(--tw-text-opacity, 1)); } .alert-warn:is(.dark *) { border-width: 1px; border-color: rgb(245 158 11 / 0.2); background-color: rgb(245 158 11 / 0.1); --tw-text-opacity: 1; color: rgb(253 230 138 / var(--tw-text-opacity, 1)); } .alert-warn { border-radius: 2px; } /* Prices / Sales / Product. A second tab bar under the settings tabs would read as the same level of navigation, so this is a filled segmented control instead. */ .segmented { display: inline-flex; width: 100%; gap: 0.25rem; border-width: 1px; --tw-border-opacity: 1; border-color: rgb(226 232 240 / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1)); padding: 0.25rem; } .segmented:is(.dark *) { --tw-border-opacity: 1; border-color: rgb(48 48 56 / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(24 25 29 / var(--tw-bg-opacity, 1)); } @media (min-width: 640px) { .segmented { width: auto; } } .segmented { border-radius: 2px; } .segment { flex: 1 1 0%; padding-left: 0.75rem; padding-right: 0.75rem; padding-top: 0.375rem; padding-bottom: 0.375rem; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; --tw-text-opacity: 1; color: rgb(71 85 105 / var(--tw-text-opacity, 1)); 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; } .segment:hover { --tw-text-opacity: 1; color: rgb(15 23 42 / var(--tw-text-opacity, 1)); } .segment:is(.dark *) { --tw-text-opacity: 1; color: rgb(154 154 162 / var(--tw-text-opacity, 1)); } .segment:hover:is(.dark *) { --tw-text-opacity: 1; color: rgb(244 244 245 / var(--tw-text-opacity, 1)); } @media (min-width: 640px) { .segment { flex: none; } } .segment { border-radius: 2px; } .segment-active { --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(15 23 42 / var(--tw-text-opacity, 1)); --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); } .segment-active:is(.dark *) { --tw-bg-opacity: 1; background-color: rgb(44 45 51 / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(244 244 245 / var(--tw-text-opacity, 1)); } .stat-card { border-width: 1px; --tw-border-opacity: 1; border-color: rgb(226 232 240 / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); padding: 1rem; --tw-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.10); --tw-shadow-colored: 0 1px 2px var(--tw-shadow-color), 0 1px 3px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .stat-card:is(.dark *) { --tw-border-opacity: 1; border-color: rgb(48 48 56 / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(32 33 38 / var(--tw-bg-opacity, 1)); --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); } .stat-card { border-radius: 2px; } .stat-card-link { cursor: pointer; 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; } .stat-card-link:hover { border-color: rgb(242 88 77 / 0.4); --tw-bg-opacity: 1; background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1)); } .stat-card-link:focus { outline: 2px solid transparent; outline-offset: 2px; } .stat-card-link:focus-visible { border-color: rgb(242 88 77 / 0.6); } .stat-card-link:hover:is(.dark *) { border-color: rgb(242 88 77 / 0.4); --tw-bg-opacity: 1; background-color: rgb(38 39 45 / var(--tw-bg-opacity, 1)); } .stat-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; } .stat-icon { display: inline-flex; height: 2rem; width: 2rem; flex-shrink: 0; align-items: center; justify-content: center; border-width: 1px; border-radius: 2px; } .stat-icon-red { border-color: rgb(242 88 77 / 0.25); background-color: rgb(242 88 77 / 0.1); --tw-text-opacity: 1; color: rgb(239 63 63 / var(--tw-text-opacity, 1)); } .stat-icon-red:is(.dark *) { --tw-text-opacity: 1; color: rgb(242 88 77 / var(--tw-text-opacity, 1)); } .stat-icon-blue { border-color: rgb(14 165 233 / 0.25); background-color: rgb(14 165 233 / 0.1); --tw-text-opacity: 1; color: rgb(2 132 199 / var(--tw-text-opacity, 1)); } .stat-icon-blue:is(.dark *) { --tw-text-opacity: 1; color: rgb(56 189 248 / var(--tw-text-opacity, 1)); } .stat-icon-amber { border-color: rgb(245 158 11 / 0.25); background-color: rgb(245 158 11 / 0.1); --tw-text-opacity: 1; color: rgb(217 119 6 / var(--tw-text-opacity, 1)); } .stat-icon-amber:is(.dark *) { --tw-text-opacity: 1; color: rgb(251 191 36 / var(--tw-text-opacity, 1)); } .stat-icon-teal { border-color: rgb(20 184 166 / 0.25); background-color: rgb(20 184 166 / 0.1); --tw-text-opacity: 1; color: rgb(13 148 136 / var(--tw-text-opacity, 1)); } .stat-icon-teal:is(.dark *) { --tw-text-opacity: 1; color: rgb(45 212 191 / var(--tw-text-opacity, 1)); } .stat-icon-muted { --tw-border-opacity: 1; border-color: rgb(203 213 225 / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(100 116 139 / var(--tw-text-opacity, 1)); } .stat-icon-muted:is(.dark *) { --tw-border-opacity: 1; border-color: rgb(69 69 77 / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(24 25 29 / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(168 168 176 / var(--tw-text-opacity, 1)); } .label { font-size: 0.75rem; line-height: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.025em; --tw-text-opacity: 1; color: rgb(100 116 139 / var(--tw-text-opacity, 1)); } .label:is(.dark *) { --tw-text-opacity: 1; color: rgb(143 143 152 / var(--tw-text-opacity, 1)); } .input { height: 2.5rem; --tw-border-opacity: 1; border-color: rgb(203 213 225 / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); font-size: 0.875rem; line-height: 1.25rem; --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); } .input::-moz-placeholder { --tw-text-opacity: 1; color: rgb(148 163 184 / var(--tw-text-opacity, 1)); } .input::placeholder { --tw-text-opacity: 1; color: rgb(148 163 184 / var(--tw-text-opacity, 1)); } .input:focus { --tw-border-opacity: 1; border-color: rgb(242 88 77 / var(--tw-border-opacity, 1)); --tw-ring-opacity: 1; --tw-ring-color: rgb(242 88 77 / var(--tw-ring-opacity, 1)); } .input:is(.dark *) { --tw-border-opacity: 1; border-color: rgb(69 69 77 / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(24 25 29 / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(236 236 239 / var(--tw-text-opacity, 1)); } .input:is(.dark *)::-moz-placeholder { --tw-text-opacity: 1; color: rgb(119 119 128 / var(--tw-text-opacity, 1)); } .input:is(.dark *)::placeholder { --tw-text-opacity: 1; color: rgb(119 119 128 / var(--tw-text-opacity, 1)); } .input:focus:is(.dark *) { --tw-border-opacity: 1; border-color: rgb(242 88 77 / var(--tw-border-opacity, 1)); --tw-ring-color: rgb(242 88 77 / 0.3); } .input { border-radius: 2px; } .input-icon { --tw-text-opacity: 1; color: rgb(148 163 184 / var(--tw-text-opacity, 1)); } .input-icon:is(.dark *) { --tw-text-opacity: 1; color: rgb(138 138 147 / var(--tw-text-opacity, 1)); } .filter-select { min-width: 11rem; padding-right: 2.5rem; } .filter-select-wide { min-width: 15rem; } .filters-row { display: flex; flex: 1 1 0%; flex-wrap: wrap; align-items: center; gap: 0.5rem; } .filters-search { position: relative; width: 100%; } @media (min-width: 640px) { .filters-search { width: auto; } } .filters-group { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; } .filters-dot { display: inline-flex; height: 1.25rem; min-width: 1.25rem; align-items: center; justify-content: center; border-radius: 9999px; --tw-bg-opacity: 1; background-color: rgb(239 63 63 / var(--tw-bg-opacity, 1)); padding-left: 0.25rem; padding-right: 0.25rem; font-size: 0.75rem; line-height: 1rem; font-weight: 600; --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } .header-actions { display: flex; flex-shrink: 0; align-items: center; gap: 0.5rem; } .btn { display: inline-flex; height: 2.5rem; align-items: center; justify-content: center; gap: 0.5rem; padding-left: 0.75rem; padding-right: 0.75rem; font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; 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; } .btn:disabled { cursor: not-allowed; opacity: 0.5; } .btn { border-radius: 2px; } .btn-primary { display: inline-flex; height: 2.5rem; align-items: center; justify-content: center; gap: 0.5rem; padding-left: 0.75rem; padding-right: 0.75rem; font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; 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; } .btn-primary:disabled { cursor: not-allowed; opacity: 0.5; } .btn-primary { border-radius: 2px; } .table td.table-actions .btn-primary { margin-left: auto; } .row-actions .btn-primary { margin-left: 0px; padding-left: 0.5rem; padding-right: 0.5rem; font-size: 0.75rem; line-height: 1rem; height: 2.25rem; } .btn-primary { --tw-bg-opacity: 1; background-color: rgb(239 63 63 / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } @media (max-width: 639.98px) { .list-table td.table-actions .btn-primary { margin-left: 0px; flex: 1 1 0%; min-height: 44px; } .btn-primary { min-height: 44px; } .btn-primary.h-9 { height: auto; min-height: 44px; } } .btn-primary:hover { --tw-bg-opacity: 1; background-color: rgb(206 44 44 / var(--tw-bg-opacity, 1)); } .btn-secondary { display: inline-flex; height: 2.5rem; align-items: center; justify-content: center; gap: 0.5rem; padding-left: 0.75rem; padding-right: 0.75rem; font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; 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; } .btn-secondary:disabled { cursor: not-allowed; opacity: 0.5; } .btn-secondary { border-radius: 2px; } .table td.table-actions .btn-secondary { margin-left: auto; } .row-actions .btn-secondary { margin-left: 0px; padding-left: 0.5rem; padding-right: 0.5rem; font-size: 0.75rem; line-height: 1rem; height: 2.25rem; } .btn-secondary { border-width: 1px; --tw-border-opacity: 1; border-color: rgb(203 213 225 / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(51 65 85 / var(--tw-text-opacity, 1)); } @media (max-width: 639.98px) { .list-table td.table-actions .btn-secondary { margin-left: 0px; flex: 1 1 0%; min-height: 44px; } .btn-secondary { min-height: 44px; } .btn-secondary.h-9 { height: auto; min-height: 44px; } } .btn-secondary:hover { --tw-bg-opacity: 1; background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1)); } .btn-secondary:is(.dark *) { --tw-border-opacity: 1; border-color: rgb(69 69 77 / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(27 28 32 / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(240 240 242 / var(--tw-text-opacity, 1)); } .btn-secondary:hover:is(.dark *) { --tw-border-opacity: 1; border-color: rgb(90 90 99 / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(36 37 42 / var(--tw-bg-opacity, 1)); } .btn-danger { display: inline-flex; height: 2.5rem; align-items: center; justify-content: center; gap: 0.5rem; padding-left: 0.75rem; padding-right: 0.75rem; font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; 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; } .btn-danger:disabled { cursor: not-allowed; opacity: 0.5; } .btn-danger { border-radius: 2px; } .table td.table-actions .btn-danger { margin-left: auto; } .row-actions .btn-danger { margin-left: 0px; padding-left: 0.5rem; padding-right: 0.5rem; font-size: 0.75rem; line-height: 1rem; height: 2.25rem; } .btn-danger { --tw-bg-opacity: 1; background-color: rgb(225 29 72 / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } @media (max-width: 639.98px) { .list-table td.table-actions .btn-danger { margin-left: 0px; flex: 1 1 0%; min-height: 44px; } .btn-danger { min-height: 44px; } .btn-danger.h-9 { height: auto; min-height: 44px; } } .btn-danger:hover { --tw-bg-opacity: 1; background-color: rgb(190 18 60 / var(--tw-bg-opacity, 1)); } .badge { display: inline-flex; align-items: center; border-radius: 9999px; padding-left: 0.5rem; padding-right: 0.5rem; padding-top: 0.25rem; padding-bottom: 0.25rem; font-size: 0.75rem; line-height: 1rem; font-weight: 500; } .badge-active { --tw-bg-opacity: 1; background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(4 120 87 / var(--tw-text-opacity, 1)); } .badge-active:is(.dark *) { background-color: rgb(16 185 129 / 0.1); --tw-text-opacity: 1; color: rgb(110 231 183 / var(--tw-text-opacity, 1)); } .badge-muted { --tw-bg-opacity: 1; background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(51 65 85 / var(--tw-text-opacity, 1)); } .badge-muted:is(.dark *) { --tw-bg-opacity: 1; background-color: rgb(48 48 56 / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(215 215 220 / var(--tw-text-opacity, 1)); } .badge-warn { --tw-bg-opacity: 1; background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(180 83 9 / var(--tw-text-opacity, 1)); } .badge-warn:is(.dark *) { background-color: rgb(245 158 11 / 0.1); --tw-text-opacity: 1; color: rgb(252 211 77 / var(--tw-text-opacity, 1)); } .table { min-width: 100%; } .table > :not([hidden]) ~ :not([hidden]) { --tw-divide-y-reverse: 0; border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse))); border-bottom-width: calc(1px * var(--tw-divide-y-reverse)); --tw-divide-opacity: 1; border-color: rgb(226 232 240 / var(--tw-divide-opacity, 1)); } .table { font-size: 0.875rem; line-height: 1.25rem; } .table:is(.dark *) > :not([hidden]) ~ :not([hidden]) { --tw-divide-opacity: 1; border-color: rgb(48 48 56 / var(--tw-divide-opacity, 1)); } .table th { --tw-bg-opacity: 1; background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1)); padding-left: 1rem; padding-right: 1rem; padding-top: 0.75rem; padding-bottom: 0.75rem; text-align: left; font-size: 0.75rem; line-height: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.025em; --tw-text-opacity: 1; color: rgb(100 116 139 / var(--tw-text-opacity, 1)); } .table th:is(.dark *) { --tw-bg-opacity: 1; background-color: rgb(27 28 32 / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(143 143 152 / var(--tw-text-opacity, 1)); } .table th.table-actions, .table td.table-actions { width: 8rem; text-align: right; } .table td.table-actions .btn { margin-left: auto; } .row-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.25rem; } .row-actions .btn { margin-left: 0px; padding-left: 0.5rem; padding-right: 0.5rem; font-size: 0.75rem; line-height: 1rem; height: 2.25rem; } /* Pre-approved reservations rows carry edit, revoke, and audited recovery actions. On desktop, widen the action column enough to keep the compact action group stable. Scoped via the reservations-actions class Alpine binds on the table, so the other list routes keep their w-32/gap-1 and their single-button ml-auto. Width is held at specificity (0,2,1) so the mobile full-width rule (~line 600) still wins. */ .reservations-actions th.table-actions, .reservations-actions td.table-actions { width: 24rem; } .reservations-actions .row-actions { gap: 0.25rem; } /* The shared `.table td.table-actions .btn { ml-auto }` is expanded at build time to the button-variant classes, so each action button gets margin-left:auto (0,3,1) and the two reservations buttons spread apart. Neutralize it for this row (0,4,1 wins) so they pack at the gap above; matches the mobile ml-0. */ .list-table.reservations-actions td.table-actions .btn-secondary, .list-table.reservations-actions td.table-actions .btn-danger { margin-left: 0; } .table-sort { display: inline-flex; align-items: center; gap: 0.25rem; text-align: left; text-transform: uppercase; letter-spacing: 0.025em; 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; } .table-sort:hover { --tw-text-opacity: 1; color: rgb(15 23 42 / var(--tw-text-opacity, 1)); } .table-sort:hover:is(.dark *) { --tw-text-opacity: 1; color: rgb(244 244 245 / var(--tw-text-opacity, 1)); } .table-sort-active { --tw-text-opacity: 1; color: rgb(206 44 44 / var(--tw-text-opacity, 1)); } .table-sort-active:is(.dark *) { --tw-text-opacity: 1; color: rgb(242 88 77 / var(--tw-text-opacity, 1)); } .table-sort-icon { height: 0.875rem; width: 0.875rem; } .table td { white-space: nowrap; padding-left: 1rem; padding-right: 1rem; padding-top: 0.75rem; padding-bottom: 0.75rem; --tw-text-opacity: 1; color: rgb(51 65 85 / var(--tw-text-opacity, 1)); } .table td:is(.dark *) { --tw-text-opacity: 1; color: rgb(217 217 221 / var(--tw-text-opacity, 1)); } .table tbody tr:hover:is(.dark *) { --tw-bg-opacity: 1; background-color: rgb(39 39 46 / var(--tw-bg-opacity, 1)); } .table-compact td { padding-top: 0.625rem; padding-bottom: 0.625rem; } .count-value { font-weight: 600; --tw-text-opacity: 1; color: rgb(51 65 85 / var(--tw-text-opacity, 1)); } .count-value:is(.dark *) { --tw-text-opacity: 1; color: rgb(232 232 234 / var(--tw-text-opacity, 1)); } .page-count { min-width: 5rem; text-align: center; font-size: 0.75rem; line-height: 1rem; font-weight: 600; --tw-text-opacity: 1; color: rgb(71 85 105 / var(--tw-text-opacity, 1)); } .page-count:is(.dark *) { --tw-text-opacity: 1; color: rgb(196 196 202 / var(--tw-text-opacity, 1)); } .code-block { margin-top: 0.75rem; overflow: auto; --tw-bg-opacity: 1; background-color: rgb(16 17 20 / var(--tw-bg-opacity, 1)); padding: 1rem; font-size: 0.75rem; line-height: 1rem; --tw-text-opacity: 1; color: rgb(238 238 239 / var(--tw-text-opacity, 1)); --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); --tw-ring-opacity: 1; --tw-ring-color: rgb(48 48 56 / var(--tw-ring-opacity, 1)); } @media (max-width: 639.98px) { .code-block { -ms-overflow-style: auto; scrollbar-width: thin; scrollbar-color: rgba(148, 148, 160, 0.5) transparent; } .code-block::-webkit-scrollbar { display: block; height: 6px; width: 6px; } .code-block::-webkit-scrollbar-track { background: transparent; } .code-block::-webkit-scrollbar-thumb { background: rgba(148, 148, 160, 0.5); border-radius: 999px; } .code-block::-webkit-scrollbar-button { display: none; width: 0; height: 0; } .code-block::-webkit-scrollbar-corner { background: transparent; } .code-block { min-width: 0; } } .code-block { border-radius: 2px; -ms-overflow-style: none; scrollbar-width: none; } .code-block::-webkit-scrollbar { display: none; } .detail-grid { display: grid; grid-template-columns: 8rem 1fr; -moz-column-gap: 0.75rem; column-gap: 0.75rem; row-gap: 0.5rem; border-width: 1px; --tw-border-opacity: 1; border-color: rgb(226 232 240 / var(--tw-border-opacity, 1)); padding: 1rem; font-size: 0.875rem; line-height: 1.25rem; } .detail-grid:is(.dark *) { --tw-border-opacity: 1; border-color: rgb(48 48 56 / var(--tw-border-opacity, 1)); } .detail-grid { border-radius: 2px; } .detail-grid span:nth-child(even) { min-width: 0px; word-break: break-all; --tw-text-opacity: 1; color: rgb(51 65 85 / var(--tw-text-opacity, 1)); } .detail-grid span:nth-child(even):is(.dark *) { --tw-text-opacity: 1; color: rgb(217 217 221 / var(--tw-text-opacity, 1)); } .chart-bars { display: flex; height: 14rem; align-items: flex-end; gap: 0.5rem; border-width: 1px; --tw-border-opacity: 1; border-color: rgb(226 232 240 / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1)); padding-left: 0.75rem; padding-right: 0.75rem; padding-bottom: 1.5rem; padding-top: 1rem; } .chart-bars:is(.dark *) { --tw-border-opacity: 1; border-color: rgb(48 48 56 / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(25 26 31 / var(--tw-bg-opacity, 1)); } .chart-bars { border-radius: 2px; } @media (min-width: 1280px) { .chart-bars.chart-bars-fill { flex: 1 1 0%; height: auto; min-height: 0; } } .chart-bar-cell { display: flex; min-width: 0px; flex: 1 1 0%; flex-direction: column; align-items: center; justify-content: flex-end; gap: 0.5rem; font-size: 10px; font-weight: 600; text-transform: uppercase; --tw-text-opacity: 1; color: rgb(100 116 139 / var(--tw-text-opacity, 1)); } .chart-bar-cell:is(.dark *) { --tw-text-opacity: 1; color: rgb(143 143 152 / var(--tw-text-opacity, 1)); } .chart-bar-cell { height: 100%; } .chart-bar { width: 100%; min-width: 0.5rem; max-width: 2rem; 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; border-radius: 2px 2px 0 0; } .chart-bar-activation { --tw-bg-opacity: 1; background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1)); } .chart-bar-failure { --tw-bg-opacity: 1; background-color: rgb(225 29 72 / var(--tw-bg-opacity, 1)); } .chart-pair { display: flex; height: 100%; width: 100%; max-width: 2.5rem; align-items: flex-end; justify-content: center; gap: 0.25rem; } .chart-pair .chart-bar { width: 50%; } .legend-dot { display: inline-block; height: 0.625rem; width: 0.625rem; border-radius: 2px; } .statistics-panel { padding: 1.5rem; } .statistics-header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem; } .statistics-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; } .chart-tabs { display: inline-flex; border-width: 1px; --tw-border-opacity: 1; border-color: rgb(226 232 240 / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1)); padding: 0.25rem; font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; } .chart-tabs:is(.dark *) { --tw-border-opacity: 1; border-color: rgb(48 56 74 / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(21 27 40 / var(--tw-bg-opacity, 1)); } .chart-tabs { border-radius: 2px; } .chart-tab { height: 2.25rem; padding-left: 1rem; padding-right: 1rem; --tw-text-opacity: 1; color: rgb(100 116 139 / var(--tw-text-opacity, 1)); 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; } @media (max-width: 639.98px) { .btn.chart-tab, .input.chart-tab { height: auto; min-height: 44px; } } .chart-tab:hover { --tw-text-opacity: 1; color: rgb(15 23 42 / var(--tw-text-opacity, 1)); } .chart-tab:is(.dark *) { --tw-text-opacity: 1; color: rgb(159 176 206 / var(--tw-text-opacity, 1)); } .chart-tab:hover:is(.dark *) { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } .chart-tab { border-radius: 2px; } .chart-tab-active { --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(15 23 42 / var(--tw-text-opacity, 1)); --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); } .chart-tab-active:is(.dark *) { --tw-bg-opacity: 1; background-color: rgb(32 40 58 / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); --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); } .chart-range { display: inline-flex; height: 2.75rem; align-items: center; gap: 0.75rem; border-width: 1px; --tw-border-opacity: 1; border-color: rgb(226 232 240 / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1)); padding-left: 1rem; padding-right: 1rem; font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; --tw-text-opacity: 1; color: rgb(100 116 139 / var(--tw-text-opacity, 1)); } .chart-range:is(.dark *) { --tw-border-opacity: 1; border-color: rgb(48 56 74 / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(32 40 58 / var(--tw-bg-opacity, 1)); --tw-text-opacity: 1; color: rgb(159 176 206 / var(--tw-text-opacity, 1)); } .chart-range { border-radius: 2px; } .statistics-meta { margin-top: 1.25rem; display: flex; flex-wrap: wrap; gap: 1rem; font-size: 0.875rem; line-height: 1.25rem; --tw-text-opacity: 1; color: rgb(100 116 139 / var(--tw-text-opacity, 1)); } .statistics-meta:is(.dark *) { --tw-text-opacity: 1; color: rgb(159 176 206 / var(--tw-text-opacity, 1)); } .statistics-meta strong { font-weight: 600; --tw-text-opacity: 1; color: rgb(15 23 42 / var(--tw-text-opacity, 1)); } .statistics-meta strong:is(.dark *) { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } .statistics-chart { position: relative; margin-top: 1.5rem; height: 20rem; overflow: hidden; } .statistics-chart svg { height: 100%; width: 100%; } .chart-grid-line { stroke: #e2e8f0; stroke-width: 1; } .dark .chart-grid-line { stroke: #263146; } .chart-axis-label, .chart-x-label { fill: #64748b; font-size: 12px; font-weight: 600; } .dark .chart-axis-label, .dark .chart-x-label { fill: #9fb0ce; } .payment-area-primary { fill: url("#paymentRevenueFill"); } .payment-area-secondary { fill: url("#paymentSalesFill"); } .payment-line { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.5; } .payment-line-primary { stroke: #4658ff; } .payment-line-secondary { stroke: #93b7ff; } .payment-point { opacity: 0; transition: opacity 0.15s ease; } .statistics-chart:hover .payment-point { opacity: 1; } .payment-point-primary { fill: #4658ff; } .payment-point-secondary { fill: #93b7ff; } .statistics-legend { margin-top: 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; font-size: 0.875rem; line-height: 1.25rem; font-weight: 600; --tw-text-opacity: 1; color: rgb(100 116 139 / var(--tw-text-opacity, 1)); } .statistics-legend:is(.dark *) { --tw-text-opacity: 1; color: rgb(159 176 206 / var(--tw-text-opacity, 1)); } .statistics-legend span { display: inline-flex; align-items: center; gap: 0.5rem; } .chart-empty { position: absolute; inset: 0px; display: flex; align-items: center; justify-content: center; font-size: 0.875rem; line-height: 1.25rem; --tw-text-opacity: 1; color: rgb(148 163 184 / var(--tw-text-opacity, 1)); } .chart-empty:is(.dark *) { --tw-text-opacity: 1; color: rgb(143 143 152 / var(--tw-text-opacity, 1)); } .donut-card { display: flex; min-height: 15rem; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; } .donut-chart { position: relative; height: 10rem; width: 10rem; flex-shrink: 0; border-radius: 9999px; } .donut-chart::after { content: ""; position: absolute; inset: 2.6rem; border-radius: 9999px; border: 1px solid #e2e8f0; background: #ffffff; } .dark .donut-chart::after { border-color: #303038; background: #202126; } .donut-legend { width: 100%; } .donut-legend > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.5rem * var(--tw-space-y-reverse)); } .donut-legend-row { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; line-height: 1.25rem; --tw-text-opacity: 1; color: rgb(71 85 105 / var(--tw-text-opacity, 1)); } .donut-legend-row:is(.dark *) { --tw-text-opacity: 1; color: rgb(217 217 221 / var(--tw-text-opacity, 1)); } .donut-dot { display: inline-block; height: 0.625rem; width: 0.625rem; flex-shrink: 0; border-radius: 2px; } .donut-percent { width: 2.5rem; text-align: right; font-size: 0.75rem; line-height: 1rem; font-weight: 600; --tw-text-opacity: 1; color: rgb(148 163 184 / var(--tw-text-opacity, 1)); } .donut-percent:is(.dark *) { --tw-text-opacity: 1; color: rgb(143 143 152 / var(--tw-text-opacity, 1)); } .empty-state { padding-top: 0.75rem; padding-bottom: 0.75rem; text-align: center; font-size: 0.875rem; line-height: 1.25rem; --tw-text-opacity: 1; color: rgb(148 163 184 / var(--tw-text-opacity, 1)); } .empty-state:is(.dark *) { --tw-text-opacity: 1; color: rgb(143 143 152 / var(--tw-text-opacity, 1)); } .scrollbar-none { -ms-overflow-style: none; scrollbar-width: none; } .scrollbar-none::-webkit-scrollbar { display: none; } .pointer-events-none { pointer-events: none; } .visible { visibility: visible; } .collapse { visibility: collapse; } .fixed { position: fixed; } .absolute { position: absolute; } .relative { position: relative; } .inset-0 { inset: 0px; } .left-3 { left: 0.75rem; } .top-3 { top: 0.75rem; } .z-50 { z-index: 50; } .mx-5 { margin-left: 1.25rem; margin-right: 1.25rem; } .-mb-px { margin-bottom: -1px; } .mb-2 { margin-bottom: 0.5rem; } .mb-4 { margin-bottom: 1rem; } .mb-5 { margin-bottom: 1.25rem; } .mb-6 { margin-bottom: 1.5rem; } .ml-1 { margin-left: 0.25rem; } .ml-2 { margin-left: 0.5rem; } .ml-auto { margin-left: auto; } .mr-1 { margin-right: 0.25rem; } .mt-1 { margin-top: 0.25rem; } .mt-1\.5 { margin-top: 0.375rem; } .mt-2 { margin-top: 0.5rem; } .mt-3 { margin-top: 0.75rem; } .mt-4 { margin-top: 1rem; } .mt-5 { margin-top: 1.25rem; } .block { display: block; } .inline { display: inline; } .flex { display: flex; } .inline-flex { display: inline-flex; } .table { display: table; } .grid { display: grid; } .hidden { display: none; } .h-10 { height: 2.5rem; } .h-16 { height: 4rem; } .h-20 { height: 5rem; } .h-24 { height: 6rem; } .h-28 { height: 7rem; } .h-3\.5 { height: 0.875rem; } .h-4 { height: 1rem; } .h-40 { height: 10rem; } .h-5 { height: 1.25rem; } .h-9 { height: 2.25rem; } .max-h-64 { max-height: 16rem; } .max-h-80 { max-height: 20rem; } .max-h-\[90vh\] { max-height: 90vh; } .min-h-0 { min-height: 0px; } .min-h-16 { min-height: 4rem; } .min-h-20 { min-height: 5rem; } .min-h-24 { min-height: 6rem; } .min-h-28 { min-height: 7rem; } .min-h-\[10rem\] { min-height: 10rem; } .min-h-screen { min-height: 100vh; } .w-10 { width: 2.5rem; } .w-24 { width: 6rem; } .w-3\.5 { width: 0.875rem; } .w-4 { width: 1rem; } .w-5 { width: 1.25rem; } .w-56 { width: 14rem; } .w-64 { width: 16rem; } .w-9 { width: 2.25rem; } .w-full { width: 100%; } .min-w-0 { min-width: 0px; } .max-w-3xl { max-width: 48rem; } .max-w-4xl { max-width: 56rem; } .max-w-lg { max-width: 32rem; } .max-w-md { max-width: 28rem; } .max-w-xs { max-width: 20rem; } .flex-1 { flex: 1 1 0%; } .shrink-0 { flex-shrink: 0; } .border-collapse { border-collapse: collapse; } .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)); } .resize-y { resize: vertical; } .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .flex-col { flex-direction: column; } .flex-wrap { flex-wrap: wrap; } .flex-nowrap { flex-wrap: nowrap; } .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-1 { gap: 0.25rem; } .gap-2 { gap: 0.5rem; } .gap-3 { gap: 0.75rem; } .gap-4 { gap: 1rem; } .space-y-1 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.25rem * var(--tw-space-y-reverse)); } .space-y-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)); } .space-y-4 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(1rem * var(--tw-space-y-reverse)); } .space-y-5 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(1.25rem * var(--tw-space-y-reverse)); } .divide-y > :not([hidden]) ~ :not([hidden]) { --tw-divide-y-reverse: 0; border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse))); border-bottom-width: calc(1px * var(--tw-divide-y-reverse)); } .divide-slate-100 > :not([hidden]) ~ :not([hidden]) { --tw-divide-opacity: 1; border-color: rgb(241 245 249 / var(--tw-divide-opacity, 1)); } .overflow-auto { overflow: auto; } .overflow-hidden { overflow: hidden; } .overflow-x-auto { overflow-x: auto; } .overflow-y-auto { overflow-y: auto; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .break-all { word-break: break-all; } .rounded-lg { border-radius: 0.5rem; } .border { border-width: 1px; } .border-b { border-bottom-width: 1px; } .border-b-2 { border-bottom-width: 2px; } .border-r-0 { border-right-width: 0px; } .border-t { border-top-width: 1px; } .border-dashed { border-style: dashed; } .border-amber-500\/40 { border-color: rgb(245 158 11 / 0.4); } .border-brand-600 { --tw-border-opacity: 1; border-color: rgb(239 63 63 / var(--tw-border-opacity, 1)); } .border-emerald-400\/50 { border-color: rgb(52 211 153 / 0.5); } .border-slate-100 { --tw-border-opacity: 1; border-color: rgb(241 245 249 / var(--tw-border-opacity, 1)); } .border-slate-200 { --tw-border-opacity: 1; border-color: rgb(226 232 240 / var(--tw-border-opacity, 1)); } .border-slate-300 { --tw-border-opacity: 1; border-color: rgb(203 213 225 / var(--tw-border-opacity, 1)); } .border-transparent { border-color: transparent; } .bg-\[\#4658ff\] { --tw-bg-opacity: 1; background-color: rgb(70 88 255 / var(--tw-bg-opacity, 1)); } .bg-\[\#93b7ff\] { --tw-bg-opacity: 1; background-color: rgb(147 183 255 / var(--tw-bg-opacity, 1)); } .bg-amber-500\/10 { background-color: rgb(245 158 11 / 0.1); } .bg-emerald-400 { --tw-bg-opacity: 1; background-color: rgb(52 211 153 / var(--tw-bg-opacity, 1)); } .bg-emerald-500\/5 { background-color: rgb(16 185 129 / 0.05); } .bg-rose-500 { --tw-bg-opacity: 1; background-color: rgb(244 63 94 / var(--tw-bg-opacity, 1)); } .bg-slate-50 { --tw-bg-opacity: 1; background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1)); } .bg-slate-950\/50 { background-color: rgb(2 6 23 / 0.5); } .bg-white { --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); } .p-0 { padding: 0px; } .p-3 { padding: 0.75rem; } .p-4 { padding: 1rem; } .p-5 { padding: 1.25rem; } .p-6 { padding: 1.5rem; } .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; } .px-4 { padding-left: 1rem; padding-right: 1rem; } .px-5 { padding-left: 1.25rem; padding-right: 1.25rem; } .py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; } .py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; } .py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; } .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; } .py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; } .pl-9 { padding-left: 2.25rem; } .pt-4 { padding-top: 1rem; } .text-left { text-align: left; } .text-center { text-align: center; } .text-right { text-align: right; } .font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; } .text-2xl { font-size: 1.5rem; line-height: 2rem; } .text-base { font-size: 1rem; line-height: 1.5rem; } .text-lg { font-size: 1.125rem; line-height: 1.75rem; } .text-sm { font-size: 0.875rem; line-height: 1.25rem; } .text-xl { font-size: 1.25rem; line-height: 1.75rem; } .text-xs { font-size: 0.75rem; line-height: 1rem; } .font-medium { font-weight: 500; } .font-normal { font-weight: 400; } .font-semibold { font-weight: 600; } .uppercase { text-transform: uppercase; } .lowercase { text-transform: lowercase; } .capitalize { text-transform: capitalize; } .leading-tight { line-height: 1.25; } .tracking-wide { letter-spacing: 0.025em; } .tracking-widest { letter-spacing: 0.1em; } .text-amber-500 { --tw-text-opacity: 1; color: rgb(245 158 11 / var(--tw-text-opacity, 1)); } .text-amber-600 { --tw-text-opacity: 1; color: rgb(217 119 6 / var(--tw-text-opacity, 1)); } .text-brand-600 { --tw-text-opacity: 1; color: rgb(239 63 63 / var(--tw-text-opacity, 1)); } .text-brand-700 { --tw-text-opacity: 1; color: rgb(206 44 44 / var(--tw-text-opacity, 1)); } .text-emerald-600 { --tw-text-opacity: 1; color: rgb(5 150 105 / var(--tw-text-opacity, 1)); } .text-rose-400 { --tw-text-opacity: 1; color: rgb(251 113 133 / var(--tw-text-opacity, 1)); } .text-rose-600 { --tw-text-opacity: 1; color: rgb(225 29 72 / var(--tw-text-opacity, 1)); } .text-slate-100 { --tw-text-opacity: 1; color: rgb(241 245 249 / var(--tw-text-opacity, 1)); } .text-slate-300 { --tw-text-opacity: 1; color: rgb(203 213 225 / var(--tw-text-opacity, 1)); } .text-slate-400 { --tw-text-opacity: 1; color: rgb(148 163 184 / var(--tw-text-opacity, 1)); } .text-slate-500 { --tw-text-opacity: 1; color: rgb(100 116 139 / var(--tw-text-opacity, 1)); } .text-slate-600 { --tw-text-opacity: 1; color: rgb(71 85 105 / var(--tw-text-opacity, 1)); } .text-slate-700 { --tw-text-opacity: 1; color: rgb(51 65 85 / var(--tw-text-opacity, 1)); } .text-slate-900 { --tw-text-opacity: 1; color: rgb(15 23 42 / var(--tw-text-opacity, 1)); } .underline { text-decoration-line: underline; } .line-through { text-decoration-line: line-through; } .opacity-60 { opacity: 0.6; } .filter { filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } .transition { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-timing-function: cubic-bezier(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; } /* Collapse the list filter selects into a toggle panel below lg (desktop keeps them inline). */ @media (max-width: 1023.98px) { .filters-group { display: none; width: 100%; flex-direction: column; align-items: stretch; } .filters-group.filters-open { display: flex; } .filters-group .input { width: 100%; } /* The header actions default to `shrink-0` + nowrap, which is right on desktop but makes them a rigid max-content row on a phone: the Vouchers route carries six buttons — measured 614-660px depending on the operator's font (no webfont is shipped, so `Inter` above resolves only if they happen to have it; Segoe UI 635, Arial/generic 660) — so the whole PAGE scrolled sideways rather than the row. Let the row shrink and wrap instead. `min-w-0` is the load-bearing part — a flex item's automatic minimum size is its content, so `shrink` alone would still floor the row at ~635px and keep the page scrolling. Every declaration here is CONDITIONAL on the row actually running out of room: a toolbar that fits is untouched, so the 9 routes sharing this container keep their right-aligned single row at every width, and >=1024px never sees this rule at all. (Rejected `w-full`: it also fixes the overflow, but it is unconditional — it would force the row full-width and left-aligned from 640-1023px on routes that were never broken.) Deliberately container-only: a nested `.header-actions .btn` rule would be inlined into EVERY button variant at build time by `@apply btn` (see the .table td.table-actions .btn note above), so touch targets are left to the existing phone `.btn { min-height: 44px }`. */ .header-actions { min-width: 0px; flex-shrink: 1; flex-wrap: wrap; } } /* Phone: wide data tables restack as cards, and touch targets grow. */ @media (max-width: 639.98px) { .list-table, .list-table tbody, .list-table tr, .list-table td { display: block; width: 100%; } .list-table thead { display: none; } .list-table tr { margin-bottom: 0.5rem; border-width: 1px; --tw-border-opacity: 1; border-color: rgb(226 232 240 / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); padding: 0.75rem; } .list-table tr:is(.dark *) { --tw-border-opacity: 1; border-color: rgb(48 48 56 / var(--tw-border-opacity, 1)); --tw-bg-opacity: 1; background-color: rgb(32 33 38 / var(--tw-bg-opacity, 1)); } .list-table tr { border-radius: 2px; } .list-table td { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; white-space: normal; border-bottom-width: 1px; --tw-border-opacity: 1; border-color: rgb(241 245 249 / var(--tw-border-opacity, 1)); padding-left: 0px; padding-right: 0px; padding-top: 0.5rem; padding-bottom: 0.5rem; text-align: right; } .list-table td:is(.dark *) { --tw-border-opacity: 1; border-color: rgb(43 43 49 / var(--tw-border-opacity, 1)); } .list-table td:last-child { border-bottom-width: 0px; } .list-table td::before { content: attr(data-label); text-align: left; font-size: 0.75rem; line-height: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.025em; --tw-text-opacity: 1; color: rgb(100 116 139 / var(--tw-text-opacity, 1)); } .list-table td:is(.dark *)::before { --tw-text-opacity: 1; color: rgb(143 143 152 / var(--tw-text-opacity, 1)); } .list-table td::before { flex: none; } .list-table td:not([data-label])::before { content: none; } .list-table td.table-actions { width: 100%; flex-wrap: wrap; justify-content: flex-start; gap: 0.5rem; border-bottom-width: 0px; padding-top: 0.75rem; } .list-table td.table-actions .btn { margin-left: 0px; flex: 1 1 0%; min-height: 44px; } .btn, .input { min-height: 44px; } .btn.h-9, .input.h-9 { height: auto; min-height: 44px; } input[type="checkbox"] { width: 1.1rem; height: 1.1rem; } .payment-point { opacity: 1; } } /* The Banner tab's live preview: the strip as the site renders it, so an operator can see the sentence in place rather than imagining it. Mirrors .sale-banner on the website. */ .sale-banner-preview { display: flex; align-items: center; gap: 10px; border: 1px solid rgba(242, 88, 77, 0.28); background: linear-gradient(90deg, rgba(242, 88, 77, 0.12), rgba(242, 88, 77, 0.03)); border-radius: 10px; padding: 10px 14px; font-size: 13px; } .sale-banner-preview .led { width: 8px; height: 8px; border-radius: 50%; background: #f2584d; box-shadow: 0 0 10px rgba(242, 88, 77, 0.8); flex: none; } /* --------------------------------------------------------------------------------------------- Phone: a table you can scroll must LOOK scrollable. Every table wrapper carries `.scrollbar-none`, which hides the bar for a clean desktop panel. On a phone that removed the only cue that a table continues past the screen edge: the wide tables that do NOT restack as cards (`.table` / `.table-compact` — App Builds, vouchers, admins) simply looked truncated, with nothing to say a swipe would reveal more. `.list-table` tables are unaffected in practice: below 640px they restack into cards and have no horizontal overflow to scroll, so the bar never appears on them. --------------------------------------------------------------------------------------------- */ @media (max-width: 639.98px) { /* EVERY horizontal scroll container, not just the `.scrollbar-none` ones. The Admins wrapper is a bare `overflow-x-auto`, so it never had the bar hidden and was showing the platform default -- a light track with arrow buttons, against a dark panel. Styling only `.scrollbar-none` fixed ten tables and left that one looking like a different application. */ .scrollbar-none, .overflow-x-auto, .overflow-auto { -ms-overflow-style: auto; scrollbar-width: thin; scrollbar-color: rgba(148, 148, 160, 0.5) transparent; } .scrollbar-none::-webkit-scrollbar, .overflow-x-auto::-webkit-scrollbar, .overflow-auto::-webkit-scrollbar { display: block; height: 6px; width: 6px; } .scrollbar-none::-webkit-scrollbar-track, .overflow-x-auto::-webkit-scrollbar-track, .overflow-auto::-webkit-scrollbar-track { background: transparent; } .scrollbar-none::-webkit-scrollbar-thumb, .overflow-x-auto::-webkit-scrollbar-thumb, .overflow-auto::-webkit-scrollbar-thumb { background: rgba(148, 148, 160, 0.5); border-radius: 999px; } /* The arrows. Styling `::-webkit-scrollbar` without this leaves the platform's stepper buttons at both ends -- which is most of why the default bar looked foreign on a dark panel. */ .scrollbar-none::-webkit-scrollbar-button, .overflow-x-auto::-webkit-scrollbar-button, .overflow-auto::-webkit-scrollbar-button { display: none; width: 0; height: 0; } .scrollbar-none::-webkit-scrollbar-corner, .overflow-x-auto::-webkit-scrollbar-corner, .overflow-auto::-webkit-scrollbar-corner { background: transparent; } /* A scroll container inside a grid or flex parent will not shrink below its content unless it is told it may. Without this the wrapper grows to the table's width, the table never overflows it, no bar appears -- and the PAGE scrolls sideways instead, which is the worse failure because it drags the whole layout including the header. */ .overflow-x-auto, .overflow-auto { min-width: 0; } } /* --------------------------------------------------------------------------------------------- Phone: the panel toolbar stacks instead of straddling two rows. `.panel-header` is `justify-between`, so `.filters-row` and `.header-actions` share one line. On a phone the search field is already `w-full`, which pushes Filters onto a second line inside the filters row -- while the primary action stays on the first line, `items-center` floats it against the midpoint of that two-line block, and it ends up beside nothing. Affiliates ("Promote a license holder") and Reset requests ("Refresh") both showed it. Giving each part its own full-width line makes the toolbar read top to bottom: search, filters, then the action. NOT a contradiction of the `w-full` rejected for `.header-actions` under 1024px -- that rejection was about it being UNCONDITIONAL across 640-1023px, where the single right-aligned row is correct and was never broken. This is scoped below 640px, where the row cannot fit by construction. --------------------------------------------------------------------------------------------- */ @media (max-width: 639.98px) { .panel-header { align-items: stretch; } .panel-header > .filters-row, .panel-header > .header-actions { width: 100%; } /* Left-aligned, natural widths, wrapping. NOT full-width buttons: the Vouchers toolbar carries six of them, and stretching each to the screen would turn a toolbar into a menu. */ .panel-header > .header-actions { justify-content: flex-start; } } /* ================================================================================================== A6 redeemable-card print — GENERATED voucher handoffs only. ONE card per A5-landscape SHEET: its two near-A6 portrait panels (front hero | back activation steps) side by side, reusing the approved dark CueCart card design. Sheets are hidden on screen; in print we hide the whole app and reveal only the active chunk's sheets (one per card). BACKGROUND-OFF CONTRACT (§GIFT-1.R4/R8): the dark surface, glow, chips, silver strip, and step panels are DECORATIVE backgrounds that degrade gracefully when the operator disables "Background graphics". Every MUST-SURVIVE mark is a foreground ink that stays legible on the resulting white page: - the QR is a self-contained (its own white ground + black modules); - the redeem code is DARK ink on the silver strip (dark-on-white when the strip fill drops); - the activation steps and the email instruction are DARK ink on light panels/chips (dark-on-white when the fill drops). The control number is PLAIN light text per the approved reference + operator direction (no fill/border); like the brand wordmark, headings, ledes and thank-you it reads with backgrounds ON (recommended). print-color-adjust:exact asks the browser to honour the dark design when backgrounds ARE enabled (the setting the print panel recommends). v1 = A5-landscape SHEET (210x148mm) holding two 104mm panels separated by a 2mm fold/cut gutter, no bleed; content sits in an 8mm safe area per panel. ================================================================================================== */ .voucher-print-sheet { display: none; } @media print { /* Print isolation: hide everything, then reveal only the A6 sheet subtree. */ body * { visibility: hidden !important; } .voucher-print-sheet, .voucher-print-sheet * { visibility: visible !important; } .voucher-print-screen { display: none !important; } .voucher-print-portal { position: static !important; background: none !important; padding: 0 !important; } html, body { background: #fff !important; } .voucher-print-sheet { display: block !important; position: absolute; left: 0; top: 0; } /* A5 LANDSCAPE (210x148mm) = ONE card as two near-A6 portrait panels side by side (front | back), separated by a 2mm fold/cut gutter. One sheet per card, single-sided (fold/cut), no duplex. */ @page { size: 210mm 148mm; margin: 0; } .a6-sheet { width: 210mm; height: 148mm; display: flex; gap: 2mm; page-break-after: always; -moz-column-break-after: page; break-after: page; } .a6-sheet:last-child { page-break-after: auto; -moz-column-break-after: auto; break-after: auto; } .a6-card { width: 104mm; height: 148mm; /* 104 + 2mm gutter + 104 = 210mm A5 width */ box-sizing: border-box; padding: 8mm; /* >= 5mm safe-area inset; no bleed */ overflow: hidden; display: flex; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .a6-card__face { display: flex; width: 100%; flex-direction: column; color: #f8fafc; } .a6-card--front { background: radial-gradient(circle at 20% 0%, rgba(240,68,68,.24), transparent 42%), #0d1119; border: 0.3mm solid #303743; } .a6-card--back { background: #0d1119; border: 0.3mm solid #303743; } /* Brand row (decorative). */ .a6-card__head { display: flex; align-items: center; gap: 3mm; } .a6-card__logo { display: grid; place-items: center; width: 8mm; height: 8mm; border-radius: 2mm; background: #1f2430; border: 0.25mm solid #3b4252; color: #f04444; font-weight: 900; font-size: 13pt; line-height: 1; } .a6-card__brand { color: #fff; font-weight: 800; font-size: 13pt; } .a6-card__title { margin-top: 4mm; color: #fff; font-weight: 800; font-size: 17pt; line-height: 1.08; letter-spacing: -.01em; } .a6-card__lede { margin-top: 2mm; color: #cbd5e1; font-size: 8.5pt; line-height: 1.35; } /* Must-survive chips: DARK ink on a light fill (legible with the fill on OR gone). */ .a6-card__chip { align-self: flex-start; padding: 1mm 2.5mm; border-radius: 1.5mm; background: #f8fafc; color: #0d1119; font-weight: 700; font-size: 8.5pt; } .a6-card__notechip { margin-top: auto; align-self: stretch; background: #ecfdf3; border-left: 0.8mm solid #10b981; } /* QR row (the QR is self-surviving; captions are decorative). */ .a6-card__qrrow { display: flex; align-items: center; gap: 5mm; margin-top: 5mm; } .a6-card__qrtile { display: grid; place-items: center; padding: 2mm; background: #f8fafc; border-radius: 2mm; } .a6-card__qr { display: block; width: 30mm; height: 30mm; } .a6-card__qrhead { color: #fff; font-weight: 800; font-size: 11pt; } .a6-card__qrurl { margin-top: 1mm; color: #cbd5e1; font-size: 9pt; } .a6-card__qrsub { margin-top: 1mm; color: #9aa4b2; font-size: 8pt; line-height: 1.3; } /* Scratch panel: dashed guide (foreground) + a 50x10mm silver strip carrying the DARK code. */ .a6-card__scratch { margin-top: 5mm; padding: 2.5mm; border: 0.3mm dashed #778195; border-radius: 2mm; } .a6-card__scratchlabel { color: #cbd5e1; font-weight: 800; font-size: 7pt; letter-spacing: .16em; text-transform: uppercase; text-align: center; } .a6-card__strip { display: flex; align-items: center; justify-content: center; width: 50mm; height: 10mm; margin: 2mm auto 0; /* the 50 x 10 mm scratch-label footprint */ background: repeating-linear-gradient(135deg, #d8dee8 0 1.4mm, #b6bfcb 1.4mm 2.8mm); border-radius: 1mm; } /* Single-line fit: 23 chars of Courier at 8pt ~= 39mm, comfortably inside the 50mm strip. Fixed pt (no viewport scaling); nowrap so it can never break onto a second line. See §GIFT-1.R8 (F2). */ .a6-card__code { color: #1f2937; font-family: "Courier New", monospace; font-weight: 700; font-size: 8pt; letter-spacing: 0; white-space: nowrap; } /* Back — numbered activation steps as light panels (dark ink survives backgrounds-off). */ .a6-card__steps { list-style: none; margin: 5mm 0 0; padding: 0; } .a6-card__step { display: grid; grid-template-columns: 7mm 1fr; gap: 2.5mm; align-items: start; margin-bottom: 2.5mm; padding: 2mm 2.5mm; background: #f9fafb; border-radius: 1.5mm; } .a6-card__stepno { display: grid; place-items: center; width: 6mm; height: 6mm; border-radius: 50%; background: #fee2e2; color: #b91c1c; font-weight: 800; font-size: 8.5pt; } .a6-card__steptext b { display: block; color: #0f172a; font-size: 8.5pt; } .a6-card__steptext span { display: block; margin-top: 0.5mm; color: #334155; font-size: 7.5pt; line-height: 1.3; } .a6-card__thanks { margin-top: 3mm; color: #fff; font-weight: 800; font-size: 10pt; text-align: center; } /* Foot: keep/support line, then the control number as PLAIN text — NO border, NO fill — bottom-left, per the approved back reference and operator direction. Visible with backgrounds ON (recommended). */ .a6-card__foot { margin-top: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 1.5mm; } .a6-card__foothelp { color: #9aa4b2; font-size: 7.5pt; line-height: 1.3; } .a6-card__control { color: #cbd5e1; font-family: "Courier New", monospace; font-size: 8.5pt; letter-spacing: .06em; } } .hover\:text-slate-900:hover { --tw-text-opacity: 1; color: rgb(15 23 42 / var(--tw-text-opacity, 1)); } .focus\:ring-brand-500:focus { --tw-ring-opacity: 1; --tw-ring-color: rgb(242 88 77 / var(--tw-ring-opacity, 1)); } .dark\:divide-\[\#303038\]:is(.dark *) > :not([hidden]) ~ :not([hidden]) { --tw-divide-opacity: 1; border-color: rgb(48 48 56 / var(--tw-divide-opacity, 1)); } .dark\:border-\[\#26262c\]:is(.dark *) { --tw-border-opacity: 1; border-color: rgb(38 38 44 / var(--tw-border-opacity, 1)); } .dark\:border-\[\#2c2c32\]:is(.dark *) { --tw-border-opacity: 1; border-color: rgb(44 44 50 / var(--tw-border-opacity, 1)); } .dark\:border-\[\#2c2d33\]:is(.dark *) { --tw-border-opacity: 1; border-color: rgb(44 45 51 / var(--tw-border-opacity, 1)); } .dark\:border-\[\#303038\]:is(.dark *) { --tw-border-opacity: 1; border-color: rgb(48 48 56 / var(--tw-border-opacity, 1)); } .dark\:border-\[\#45454d\]:is(.dark *) { --tw-border-opacity: 1; border-color: rgb(69 69 77 / var(--tw-border-opacity, 1)); } .dark\:bg-\[\#18191d\]:is(.dark *) { --tw-bg-opacity: 1; background-color: rgb(24 25 29 / var(--tw-bg-opacity, 1)); } .dark\:bg-\[\#202126\]:is(.dark *) { --tw-bg-opacity: 1; background-color: rgb(32 33 38 / var(--tw-bg-opacity, 1)); } .dark\:text-\[\#77777f\]:is(.dark *) { --tw-text-opacity: 1; color: rgb(119 119 127 / var(--tw-text-opacity, 1)); } .dark\:text-\[\#8f8f98\]:is(.dark *) { --tw-text-opacity: 1; color: rgb(143 143 152 / var(--tw-text-opacity, 1)); } .dark\:text-\[\#9a9aa2\]:is(.dark *) { --tw-text-opacity: 1; color: rgb(154 154 162 / var(--tw-text-opacity, 1)); } .dark\:text-\[\#a9a9b0\]:is(.dark *) { --tw-text-opacity: 1; color: rgb(169 169 176 / var(--tw-text-opacity, 1)); } .dark\:text-\[\#b8c7df\]:is(.dark *) { --tw-text-opacity: 1; color: rgb(184 199 223 / var(--tw-text-opacity, 1)); } .dark\:text-\[\#c9c9cf\]:is(.dark *) { --tw-text-opacity: 1; color: rgb(201 201 207 / var(--tw-text-opacity, 1)); } .dark\:text-\[\#d9d9dd\]:is(.dark *) { --tw-text-opacity: 1; color: rgb(217 217 221 / var(--tw-text-opacity, 1)); } .dark\:text-\[\#f4f4f5\]:is(.dark *) { --tw-text-opacity: 1; color: rgb(244 244 245 / var(--tw-text-opacity, 1)); } .dark\:text-amber-300:is(.dark *) { --tw-text-opacity: 1; color: rgb(252 211 77 / var(--tw-text-opacity, 1)); } .dark\:text-amber-400:is(.dark *) { --tw-text-opacity: 1; color: rgb(251 191 36 / var(--tw-text-opacity, 1)); } .dark\:text-emerald-300:is(.dark *) { --tw-text-opacity: 1; color: rgb(110 231 183 / var(--tw-text-opacity, 1)); } .dark\:text-emerald-400:is(.dark *) { --tw-text-opacity: 1; color: rgb(52 211 153 / var(--tw-text-opacity, 1)); } .dark\:text-rose-400:is(.dark *) { --tw-text-opacity: 1; color: rgb(251 113 133 / var(--tw-text-opacity, 1)); } .dark\:hover\:text-\[\#e8e8ea\]:hover:is(.dark *) { --tw-text-opacity: 1; color: rgb(232 232 234 / var(--tw-text-opacity, 1)); } @media (min-width: 640px) { .sm\:col-span-2 { grid-column: span 2 / span 2; } .sm\:inline { display: inline; } .sm\:w-72 { width: 18rem; } .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sm\:grid-cols-\[minmax\(0\2c 1\.2fr\)_minmax\(0\2c 1fr\)_minmax\(0\2c 1\.4fr\)_auto\] { grid-template-columns: minmax(0,1.2fr) minmax(0,1fr) minmax(0,1.4fr) auto; } .sm\:items-center { align-items: center; } .sm\:p-4 { padding: 1rem; } } @media (min-width: 768px) { .md\:col-span-2 { grid-column: span 2 / span 2; } .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .md\:flex-row { flex-direction: row; } .md\:items-start { align-items: flex-start; } .md\:justify-between { justify-content: space-between; } } @media (min-width: 1024px) { .lg\:hidden { display: none; } } @media (min-width: 1280px) { .xl\:col-span-1 { grid-column: span 1 / span 1; } .xl\:col-span-2 { grid-column: span 2 / span 2; } .xl\:col-span-3 { grid-column: span 3 / span 3; } .xl\:col-span-7 { grid-column: span 7 / span 7; } .xl\:flex { display: flex; } .xl\:grid-cols-10 { grid-template-columns: repeat(10, minmax(0, 1fr)); } .xl\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .xl\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .xl\:grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); } .xl\:flex-col { flex-direction: column; } }