/*
! tailwindcss v3.4.3 | 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: Plus Jakarta Sans, Noto Sans Khmer, system-ui, sans-serif;
  /* 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] {
  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='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 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='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}

@media (forced-colors: active)  {
  input:where([type='checkbox']):checked {
    -webkit-appearance: auto;
       -moz-appearance: auto;
            appearance: auto;
  }
}

input:where([type='radio']):checked {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
}

@media (forced-colors: active)  {
  input:where([type='radio']):checked {
    -webkit-appearance: auto;
       -moz-appearance: auto;
            appearance: auto;
  }
}

input:where([type='checkbox']):checked:hover,input:where([type='checkbox']):checked:focus,input:where([type='radio']):checked:hover,input:where([type='radio']):checked:focus {
  border-color: transparent;
  background-color: currentColor;
}

input:where([type='checkbox']):indeterminate {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
  border-color: transparent;
  background-color: currentColor;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

@media (forced-colors: active)  {
  input:where([type='checkbox']):indeterminate {
    -webkit-appearance: auto;
       -moz-appearance: auto;
            appearance: auto;
  }
}

input:where([type='checkbox']):indeterminate:hover,input:where([type='checkbox']):indeterminate:focus {
  border-color: transparent;
  background-color: currentColor;
}

input:where([type='file']) {
  background: unset;
  border-color: inherit;
  border-width: 0;
  border-radius: 0;
  padding: 0;
  font-size: unset;
  line-height: inherit;
}

input:where([type='file']):focus {
  outline: 1px solid ButtonText;
  outline: 1px auto -webkit-focus-ring-color;
}

:root{
  --bg:#eef1ef;
  --surface:#ffffff;
  --surface-2:#f7f9f8;
  --surface-3:#f0f3f1;
  --border:#e4e9e6;
  --border-2:#eef1ef;
  --text:#111a15;
  --text-2:#5a655e;
  --text-3:#8b968e;
  --brand:#159a4d;
  --brand-strong:#0e7a3c;
  --brand-weak:#e6f5ec;
  --brand-ink:#0b5a2c;
  --danger:#e04b4b;
  --danger-weak:#fdeaea;
  --warn:#e08a1e;
  --warn-weak:#fcf1e0;
  --blue:#2f74d0;
  --blue-weak:#e9f1fc;
  /* Telegram's own brand blue. Kept apart from --blue (the app's generic informational blue)
       so a control that sends a Telegram message is recognised as such on sight. */
  --telegram:#229ed9;
  --telegram-strong:#1c87ba;
  --telegram-weak:#e6f4fc;
  --violet:#8a5be0;
  --violet-weak:rgba(160,110,240,.14);
  --teal:#0e9a94;
  --teal-weak:rgba(47,201,192,.14);
  --pink:#d0356a;
  --pink-weak:rgba(240,90,138,.15);
  --shadow-sm:0 1px 2px rgba(16,32,24,.05);
  --shadow-md:0 4px 16px -4px rgba(16,32,24,.10),0 1px 3px rgba(16,32,24,.06);
  --row-py:15px;
}

[data-theme="dark"]{
  --bg:#0d1210;
  --surface:#151c18;
  --surface-2:#1a221d;
  --surface-3:#202a24;
  --border:#26302a;
  --border-2:#1e2621;
  --text:#eaf0ec;
  --text-2:#9aa79f;
  --text-3:#69756d;
  --brand:#2fbf6a;
  --brand-strong:#37cc74;
  --brand-weak:#15271d;
  --brand-ink:#8ce6ae;
  --danger:#f0706f;
  --danger-weak:#2a1918;
  --warn:#e6a34d;
  --warn-weak:#2a2113;
  --blue:#5b9bec;
  --blue-weak:#16233a;
  --telegram:#3fb6ec;
  --telegram-strong:#5cc4f2;
  --telegram-weak:#112a3a;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 4px 16px -4px rgba(0,0,0,.5);
}

*, ::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:  ;
}

.\!container {
  width: 100% !important;
}

.container {
  width: 100%;
}

@media (min-width: 640px) {
  .\!container {
    max-width: 640px !important;
  }

  .container {
    max-width: 640px;
  }
}

@media (min-width: 768px) {
  .\!container {
    max-width: 768px !important;
  }

  .container {
    max-width: 768px;
  }
}

@media (min-width: 1024px) {
  .\!container {
    max-width: 1024px !important;
  }

  .container {
    max-width: 1024px;
  }
}

@media (min-width: 1280px) {
  .\!container {
    max-width: 1280px !important;
  }

  .container {
    max-width: 1280px;
  }
}

@media (min-width: 1536px) {
  .\!container {
    max-width: 1536px !important;
  }

  .container {
    max-width: 1536px;
  }
}

.form-input,.form-textarea,.form-select,.form-multiselect {
  -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;
}

.form-input:focus, .form-textarea:focus, .form-select:focus, .form-multiselect: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;
}

.form-input::-moz-placeholder, .form-textarea::-moz-placeholder {
  color: #6b7280;
  opacity: 1;
}

.form-input::placeholder,.form-textarea::placeholder {
  color: #6b7280;
  opacity: 1;
}

.form-input::-webkit-datetime-edit-fields-wrapper {
  padding: 0;
}

.form-input::-webkit-date-and-time-value {
  min-height: 1.5em;
  text-align: inherit;
}

.form-input::-webkit-datetime-edit {
  display: inline-flex;
}

.form-input::-webkit-datetime-edit,.form-input::-webkit-datetime-edit-year-field,.form-input::-webkit-datetime-edit-month-field,.form-input::-webkit-datetime-edit-day-field,.form-input::-webkit-datetime-edit-hour-field,.form-input::-webkit-datetime-edit-minute-field,.form-input::-webkit-datetime-edit-second-field,.form-input::-webkit-datetime-edit-millisecond-field,.form-input::-webkit-datetime-edit-meridiem-field {
  padding-top: 0;
  padding-bottom: 0;
}

/* root: sets the app font only inside the new shell */

.app-shell{
  font-family:'Plus Jakarta Sans','Noto Sans Khmer',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  background:var(--bg);
  color:var(--text);
  font-size:14px;
}

/* The shell is sized h-screen, and on a phone 100vh is the window as it would be with the
     browser's address bar hidden — taller than what is actually visible. The page then pans,
     and the topbar and module bar slide out the top, leaving half a pill hanging over the
     content. dvh is the window as it IS, bar and all, so the shell always fits and its own
     main column does the scrolling. */

.app-shell.h-screen{
  height:100vh;
  height:100dvh
}

.app-shell ::-moz-selection{
  background:var(--brand-weak)
}

.app-shell ::selection{
  background:var(--brand-weak)
}

.app-shell a{
  color:var(--brand);
  text-decoration:none
}

.app-shell a:hover{
  color:var(--brand-strong)
}

.app-shell input::-moz-placeholder, .app-shell textarea::-moz-placeholder{
  color:var(--text-3)
}

.app-shell input::placeholder,.app-shell textarea::placeholder{
  color:var(--text-3)
}

.km{
  font-family:'Noto Sans Khmer',sans-serif
}

.app-shell .scroll::-webkit-scrollbar{
  width:9px;
  height:9px
}

/* Declaring a width on ::-webkit-scrollbar opts the element out of the platform's overlay
     scrollbar and into a classic one that takes up space — on a phone that is nine pixels of
     every page permanently given over to a bar nobody drags, sitting as a strip down the right
     of the content. Touch scrolling needs no bar, so the scroller goes back to the platform
     default and the page gets the width back. */

@media (max-width:700px){
  .app-shell .scroll{
    scrollbar-width:none
  }

  .app-shell .scroll::-webkit-scrollbar{
    width:0;
    height:0
  }
}

.app-shell .scroll::-webkit-scrollbar-thumb{
  background:var(--border);
  border-radius:6px;
  border:2px solid transparent;
  background-clip:padding-box
}

.app-shell .scroll::-webkit-scrollbar-thumb:hover{
  background:var(--text-3)
}

/* sidebar */

.app-shell .sidebar{
  width:86px;
  flex:none;
  background:var(--surface);
  border-right:1px solid var(--border);
  display:flex;
  flex-direction:column;
  overflow:hidden
}

/* Rail: one entry per module, icon over a short label. A module's own sections live
     in .module-bar across the top of the content, not nested under the rail entry. */

/* The logo block and the top bar sit side by side and their dividers read as one line
     across the screen — so they have to be the same height and the same colour. They were
     64px against 60, and --border-2 against --border, which showed as a step at the seam. */

.app-shell .rail-head{
  display:flex;
  height:60px;
  flex:none;
  align-items:center;
  justify-content:center;
  border-bottom:1px solid var(--border)
}

.app-shell .rail-head .brand-logo{
  width:36px;
  height:36px;
  border-radius:12px
}

.app-shell .rail-scroll{
  display:flex;
  flex:1;
  min-height:0;
  flex-direction:column;
  padding:8px 7px 9px;
  overflow-y:auto
}

.app-shell .rail-nav{
  display:flex;
  min-height:100%;
  flex:1 0 auto;
  flex-direction:column;
  gap:1px
}

/* Settings is pinned to the foot of the rail: it is reached from every screen, and on
     a rail long enough to scroll it used to sit wherever the column happened to end.
     Sticky rather than fixed, so it stays inside the scrolling column on short viewports. */

.app-shell .rail-pinned{
  position:sticky;
  bottom:-10px;
  z-index:2;
  display:flex;
  flex-direction:column;
  gap:1px;
  margin-top:auto;
  padding-bottom:10px;
  border-top:1px solid var(--border-2);
  background:var(--surface)
}

.app-shell .rail-pinned>.rail-item:first-child{
  margin-top:6px
}

/* No tile behind the icon: a grey square per entry added boxes without adding meaning.
     The item itself carries the state, and sections do the separating. */

/* Section names are not drawn: at this width they were five lines of all-caps text
     competing with the entries. A run change is a gap instead. */

.app-shell .rail-item.starts-section{
  margin-top:9px
}

.app-shell .rail-item{
  position:relative;
  display:flex;
  width:100%;
  flex-direction:column;
  align-items:center;
  gap:4px;
  padding:7px 3px 6px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:color-mix(in srgb,var(--text) 84%,var(--surface));
  text-decoration:none;
  -webkit-font-smoothing:antialiased;
  transition:background .15s,color .15s
}

.app-shell .rail-ico{
  display:grid;
  width:20px;
  height:20px;
  flex:0 0 20px;
  place-items:center;
  color:color-mix(in srgb,var(--text) 78%,var(--surface));
  transition:color .16s
}

.app-shell .rail-ico svg,.app-shell .rail-ico i{
  width:18px;
  height:18px
}

/* Lucide draws at 2px on a 24px grid; the few menu icons that fall through are
     normalised so the column reads as one set. */

.app-shell .rail-ico svg{
  stroke-width:1.7;
  shape-rendering:geometricPrecision
}

/* The stroke is held at its CSS width while the 24-grid icon is drawn at 20px, so
     the line does not thin out with the scale and the column stays legible. */

.app-shell .rail-ico svg *{
  vector-effect:non-scaling-stroke
}

/* Sentence case at 10px: 9px all-caps reads as a system utility, and long module
     names had to break mid-word to fit. */

/* One line. Two-line labels made the entries different heights and broke long names
     mid-word; anything that still does not fit is cut with an ellipsis and the full name
     stays on the link's title. */

.app-shell .rail-label{
  display:block;
  max-width:100%;
  overflow:hidden;
  color:inherit;
  font-size:9.2px;
  font-weight:640;
  letter-spacing:-.005em;
  line-height:1.2;
  text-align:center;
  text-overflow:ellipsis;
  text-transform:none;
  white-space:nowrap
}

/* What an entry is waiting on. The rail is 86px of icon over a one-line label, with no
     room for a pill beside the name — so the count sits on the corner of the icon, the
     way an app badge does. aria-hidden: the number is already in the link's title. */

.app-shell .rail-badge{
  position:absolute;
  top:4px;
  left:calc(50% + 3px);
  display:inline-flex;
  min-width:15px;
  height:15px;
  align-items:center;
  justify-content:center;
  padding:0 4px;
  border:1.5px solid var(--surface);
  border-radius:9999px;
  background:var(--danger,#ef4444);
  color:#fff;
  font-size:9px;
  font-weight:800;
  line-height:1;
  pointer-events:none
}

.app-shell .rail-item.is-active .rail-badge{
  border-color:var(--brand-weak)
}

.app-shell .rail-item:hover{
  background:var(--surface-2);
  color:var(--text)
}

.app-shell .rail-item:hover .rail-ico{
  color:var(--text)
}

.app-shell .rail-item.is-active{
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .rail-item.is-active .rail-label{
  font-weight:750
}

.app-shell .rail-item.is-active .rail-ico{
  color:var(--brand-strong)
}

/* Marker on the rail edge, so the current module is readable at a glance even when
     the entry is near the top or bottom of a scrolled column. */

.app-shell .rail-item.is-active:before{
  position:absolute;
  top:9px;
  bottom:9px;
  left:-8px;
  width:3px;
  border-radius:0 3px 3px 0;
  background:var(--brand);
  content:""
}

.app-shell .rail-item:focus-visible{
  outline:2px solid color-mix(in srgb,var(--brand) 55%,transparent);
  outline-offset:-2px
}

/* Module bar: the sections of whichever module the user is inside. */

.app-shell .module-bar{
  display:flex;
  align-items:center;
  gap:7px;
  flex:none;
  padding:8px 24px;
  border-bottom:1px solid var(--border);
  background:var(--surface)
}

.app-shell .module-bar-title{
  display:inline-flex;
  flex:0 0 auto;
  align-items:center;
  gap:7px;
  padding:7px 12px;
  border-radius:9px;
  background:var(--brand-weak);
  color:var(--brand-strong);
  font-size:12px;
  font-weight:800;
  white-space:nowrap
}

.app-shell .module-bar-title svg{
  width:16px;
  height:16px;
  flex:0 0 16px
}

.app-shell .module-bar-links{
  display:flex;
  min-width:0;
  flex:1;
  align-items:center;
  gap:2px;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none
}

.app-shell .module-bar-links::-webkit-scrollbar{
  display:none
}

/* Products and Reports have more sections than fit; fade the edge that still has
     content so a cut-off bar does not read as the end of the list. */

.app-shell .module-bar-links[data-overflow="end"]{
  -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 34px),transparent);
          mask-image:linear-gradient(to right,#000 calc(100% - 34px),transparent)
}

.app-shell .module-bar-links[data-overflow="start"]{
  -webkit-mask-image:linear-gradient(to right,transparent,#000 34px);
          mask-image:linear-gradient(to right,transparent,#000 34px)
}

.app-shell .module-bar-links[data-overflow="both"]{
  -webkit-mask-image:linear-gradient(to right,transparent,#000 34px,#000 calc(100% - 34px),transparent);
          mask-image:linear-gradient(to right,transparent,#000 34px,#000 calc(100% - 34px),transparent)
}

.app-shell .module-bar-links>a{
  display:inline-flex;
  flex:0 0 auto;
  align-items:center;
  height:34px;
  padding:0 11px;
  border:1px solid transparent;
  border-radius:9px;
  color:var(--text-2);
  font-size:12px;
  font-weight:650;
  text-decoration:none;
  white-space:nowrap;
  transition:background .13s,color .13s
}

.app-shell .module-bar-links>a:hover{
  background:var(--surface-2);
  color:var(--text)
}

.app-shell .module-bar-links>a.is-active{
  border-color:var(--text);
  background:var(--text);
  color:var(--surface)
}

.app-shell .module-bar-links>a.is-index{
  margin-left:5px;
  border-color:var(--border);
  color:var(--brand-strong);
  font-weight:750
}

.app-shell .module-bar-links>a.is-index:hover{
  border-color:color-mix(in srgb,var(--brand) 40%,transparent);
  background:var(--brand-weak)
}

/* The index link's own colour is written after the active one and matches its
     specificity, so on its own screen it repainted the selected pill's text green
     on the dark fill. Selected always wins. */

.app-shell .module-bar-links>a.is-index.is-active{
  border-color:var(--text);
  background:var(--text);
  color:var(--surface)
}

.app-shell .module-bar-links>a.is-index.is-active:hover{
  border-color:var(--text);
  background:var(--text);
  color:var(--surface)
}

.app-shell .module-bar-links>a:focus-visible{
  outline:2px solid color-mix(in srgb,var(--brand) 45%,transparent);
  outline-offset:2px
}

/* A tab that opens the screens filed under it. The bar used to carry whichever six
     reports the menu listed first and swap one of them for whatever report you opened, so
     the tabs changed as you moved; these are the same areas on every screen. */

.app-shell .module-bar-group{
  position:relative;
  flex:0 0 auto
}

.app-shell .module-bar-group>button{
  display:inline-flex;
  height:34px;
  align-items:center;
  gap:5px;
  padding:0 10px;
  border:1px solid transparent;
  border-radius:9px;
  background:transparent;
  color:var(--text-2);
  font-size:12px;
  font-weight:650;
  white-space:nowrap;
  cursor:pointer;
  transition:background .13s,color .13s
}

.app-shell .module-bar-group>button:hover{
  background:var(--surface-2);
  color:var(--text)
}

.app-shell .module-bar-group>button.is-active{
  border-color:var(--text);
  background:var(--text);
  color:var(--surface)
}

.app-shell .module-bar-group>button>svg{
  opacity:.7
}

.app-shell .module-bar-group>button:focus-visible{
  outline:2px solid color-mix(in srgb,var(--brand) 45%,transparent);
  outline-offset:2px
}

.app-shell .module-bar-menu{
  position:absolute;
  z-index:60;
  top:calc(100% + 6px);
  left:0;
  display:none;
  min-width:250px;
  max-height:min(60vh,420px);
  flex-direction:column;
  padding:6px;
  overflow-y:auto;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface);
  box-shadow:var(--shadow-lg)
}

.app-shell .module-bar-group.is-open .module-bar-menu{
  display:flex
}

/* A menu the script has lifted out of the tab row — see layouts/master — is no longer a
   descendant of its group, so the rule above cannot reach it. It carries its own state instead. */

.app-shell .module-bar-menu.is-lifted{
  display:flex
}

.app-shell .module-bar-menu>a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:7px 10px;
  border-radius:8px;
  color:var(--text-2);
  font-size:12.5px;
  font-weight:650;
  text-decoration:none
}

.app-shell .module-bar-menu>a:hover{
  background:var(--surface-2);
  color:var(--text)
}

.app-shell .module-bar-menu>a.is-active{
  background:var(--brand-weak);
  color:var(--brand-strong);
  font-weight:780
}

.app-shell .module-bar-menu>a>svg{
  flex:none;
  color:var(--brand-strong)
}

/* The bar clips its own overflow so the tabs can scroll; a menu inside it would be cut
     off at the first row, so the bar stops clipping while one is open. */

.app-shell .module-bar-links:has(.module-bar-group.is-open){
  overflow:visible
}

@media(max-width:760px){
  .app-shell .module-bar{
    padding:7px 14px
  }

  .app-shell .module-bar-title>span{
    display:none
  }

  .app-shell .module-bar-title{
    padding:7px 9px
  }
}

/* The rail is a static column at every width.

     It used to slide off screen below 1024px and come back through a button in the header —
     a button that, on the desktop this is used on, revealed a rail already in front of you.
     The rail is 86px of icons; it costs little enough on a narrow screen to simply stay, and
     nothing then needs a drawer, a backdrop or a control to open them. */

@media (max-width:640px){
  .app-shell .sidebar{
    width:64px
  }

  .app-shell .rail-label{
    display:none
  }
}

/* The tile was a green gradient with a white glyph on it. The mark is full colour and
     carries its own green, so it gets a plain ground and a hairline instead of a second
     brand colour behind it. Written in tokens, so it follows the theme. */

.app-shell .brand-logo{
  width:38px;
  height:38px;
  border-radius:11px;
  background:var(--surface);
  border:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
  flex:none;
  padding:4px;
  box-shadow:var(--shadow-sm);
  color:var(--brand)
}

.app-shell .group-label{
  padding:6px 12px;
  font-size:10.5px;
  font-weight:700;
  letter-spacing:1.1px;
  text-transform:uppercase;
  color:var(--text-3)
}

.app-shell .nav-item{
  width:100%;
  display:flex;
  align-items:center;
  gap:11px;
  height:40px;
  padding:0 11px;
  border-radius:10px;
  border:none;
  outline:none;
  cursor:pointer;
  font:inherit;
  font-size:13.5px;
  font-weight:500;
  background:transparent;
  color:var(--text-2);
  margin-bottom:2px;
  transition:background .12s,color .12s;
  text-align:left
}

.app-shell .nav-item:hover{
  background:var(--surface-3);
  color:var(--text)
}

.app-shell .nav-item.active{
  background:var(--brand-weak);
  color:var(--brand-strong);
  font-weight:600
}

.app-shell .nav-item.parent{
  color:var(--brand-strong);
  font-weight:600
}

.app-shell .nav-item .ico{
  display:flex;
  align-items:center;
  justify-content:center;
  width:20px;
  flex:none
}

.app-shell .badge{
  min-width:19px;
  height:19px;
  padding:0 6px;
  border-radius:9px;
  background:var(--surface-3);
  color:var(--text-2);
  font-size:11px;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-left:auto
}

.app-shell .\!badge{
  min-width:19px !important;
  height:19px !important;
  padding:0 6px !important;
  border-radius:9px !important;
  background:var(--surface-3) !important;
  color:var(--text-2) !important;
  font-size:11px !important;
  font-weight:700 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin-left:auto !important
}

.app-shell .sub-wrap{
  margin:2px 0 6px 33px;
  padding-left:12px;
  border-left:1.5px solid var(--border);
  display:flex;
  flex-direction:column;
  gap:1px
}

.app-shell .sub{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  text-align:left;
  padding:8px 10px;
  border-radius:8px;
  border:none;
  outline:none;
  cursor:pointer;
  font:inherit;
  font-size:13px;
  font-weight:500;
  background:transparent;
  color:var(--text-2)
}

.app-shell .sub:hover{
  color:var(--text)
}

.app-shell .sub.active{
  background:var(--brand-weak);
  color:var(--brand-strong);
  font-weight:600
}

.app-shell .sub .dot{
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--text-3);
  flex:none
}

.app-shell .sub .\!dot{
  width:5px !important;
  height:5px !important;
  border-radius:50% !important;
  background:var(--text-3) !important;
  flex:none !important
}

.app-shell .sub.active .dot{
  background:var(--brand)
}

.app-shell .sub.active .\!dot{
  background:var(--brand) !important
}

/* header */

/* --topbar-h is read by the notifications panel, which drops out of the header on a phone
     and has to place itself under it. */

.app-shell .topbar{
  --topbar-h:60px;
  position:relative;
  z-index:40;
  height:60px;
  flex:none;
  background:var(--surface);
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 18px 0 20px;
  box-shadow:0 1px 2px rgba(16,32,24,.03)
}

.app-shell .hdr-btn{
  width:36px;
  height:36px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--surface-2);
  color:var(--text-2);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  flex:none
}

.app-shell .hdr-btn:hover{
  background:var(--surface-3);
  color:var(--text)
}

/* One row of controls, evenly spaced, all the same height. They were three groups with
     three different heights — 38px pills, a 40px clock, a 44px account button — separated by
     a hairline rule, which read as three unrelated strips rather than one set of actions. */

.app-shell .topbar-actions{
  display:flex;
  align-items:center;
  gap:9px
}

.app-shell .topbar-jump{
  display:none;
  align-items:center;
  gap:7px
}

@media(min-width:1024px){
  .app-shell .topbar-jump{
    display:flex
  }
}

.app-shell .pill-btn{
  height:36px;
  padding:0 13px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text-2);
  font:inherit;
  font-size:12.5px;
  font-weight:700;
  display:flex;
  align-items:center;
  gap:7px;
  cursor:pointer;
  text-decoration:none;
  white-space:nowrap;
  transition:background .13s,border-color .13s,color .13s
}

.app-shell .pill-btn:hover{
  background:var(--surface-2);
  border-color:var(--text-3);
  color:var(--text);
  text-decoration:none
}

.app-shell .pill-btn>svg{
  color:var(--text-3)
}

.app-shell .pill-btn:hover>svg{
  color:var(--text-2)
}

.app-shell .pill-btn.is-active{
  border-color:var(--text);
  background:var(--text);
  color:var(--surface)
}

.app-shell .pill-btn.is-active>svg{
  color:var(--surface)
}

/* Superadmin left the rail for the header, so the button has to carry the state the
     rail entry used to: brand-tinted when you are inside it. */

.app-shell .pill-btn.is-superadmin{
  border-color:color-mix(in srgb,var(--brand) 24%,var(--border));
  background:var(--brand-weak);
  color:var(--brand-strong);
  font-weight:700
}

.app-shell .pill-btn.is-superadmin:hover{
  border-color:var(--brand);
  background:var(--brand-weak)
}

.app-shell .pill-btn.is-superadmin.is-active{
  border-color:var(--brand);
  background:var(--brand);
  color:#fff
}

.app-shell .pill-btn.is-superadmin.is-active:hover{
  background:var(--brand-strong);
  border-color:var(--brand-strong);
  color:#fff
}

.app-shell .date{
  height:38px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 12px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--surface-2);
  color:var(--text-2);
  font-size:12.5px;
  font-weight:600
}

.app-shell .icon-group{
  display:flex;
  align-items:center;
  gap:2px;
  padding:3px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--surface-2)
}

.app-shell .icon-btn{
  width:30px;
  height:30px;
  border-radius:8px;
  border:none;
  background:transparent;
  color:var(--text-2);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  position:relative;
  text-decoration:none;
  transition:background .13s,color .13s
}

.app-shell .icon-btn:hover{
  background:var(--surface);
  color:var(--text)
}

.app-shell .icon-btn.is-active{
  background:var(--surface);
  color:var(--brand-strong);
  box-shadow:var(--shadow-sm)
}

.app-shell .icon-btn:focus-visible{
  outline:2px solid color-mix(in srgb,var(--brand) 45%,transparent);
  outline-offset:1px
}

.app-shell .dot-badge{
  position:absolute;
  top:3px;
  right:3px;
  min-width:16px;
  height:16px;
  padding:0 4px;
  border-radius:8px;
  background:var(--danger);
  color:#fff;
  font-size:10px;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  border:2px solid var(--surface-2)
}

.app-shell .user{
  display:flex;
  align-items:center;
  gap:9px;
  height:40px;
  padding:0 9px 0 4px;
  border-radius:11px;
  border:1px solid var(--border);
  background:var(--surface-2);
  cursor:pointer;
  transition:background .13s,border-color .13s
}

.app-shell .user:hover{
  background:var(--surface-3);
  border-color:var(--text-3)
}

/* The name and the chevron are hidden below xl, and their padding went with them — without
     this the button keeps 9px of empty space to the right of the avatar. */

@media(max-width:1279px){
  .app-shell .user{
    gap:0;
    padding:3px
  }
}

.app-shell .header-user-avatar{
  width:32px;
  height:32px;
  flex:none;
  border-radius:9px;
  background:var(--surface-3);
  -o-object-fit:cover;
     object-fit:cover
}

.app-shell .header-account-dropdown{
  position:relative
}

.app-shell .header-account-menu{
  top:100%;
  z-index:80;
  width:260px
}

.app-shell .header-account-dropdown.is-open .header-account-menu{
  display:block
}

.app-shell .header-account-summary{
  display:flex;
  align-items:center;
  gap:11px;
  padding:10px;
  border-radius:9px;
  text-decoration:none
}

.app-shell .header-account-summary:hover,.app-shell .header-account-summary:focus-visible{
  background:var(--surface-3);
  outline:none
}

.app-shell .header-account-avatar{
  width:42px;
  height:42px;
  flex:none;
  border-radius:11px;
  background:var(--surface-3);
  -o-object-fit:cover;
     object-fit:cover
}

.app-shell .header-account-label{
  color:var(--text-3);
  font-size:10.5px;
  font-weight:600
}

.app-shell .header-account-name{
  margin-top:2px;
  color:var(--text);
  font-size:12.5px;
  font-weight:800;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}

.app-shell .header-account-email{
  margin-top:1px;
  color:var(--text-3);
  font-size:10.5px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}

.app-shell .header-account-divider{
  height:1px;
  margin:3px 6px 5px;
  background:var(--border-2)
}

/* notifications panel — the bell in .icon-group opens this */

.app-shell .header-notifications{
  position:relative;
  display:flex
}

/* The count is written by public/js/app.js on an interval; empty means nothing unread. */

.app-shell .notifications_count:empty{
  display:none
}

.app-shell .header-notifications-menu{
  top:100%;
  z-index:80;
  width:340px;
  max-width:calc(100vw - 24px);
  max-height:min(70vh,460px);
  flex-direction:column;
  overflow:hidden
}

.app-shell .header-notifications.is-open .header-notifications-menu{
  display:flex
}

.app-shell .header-notifications-head{
  padding:11px 13px 9px;
  border-bottom:1px solid var(--border-2);
  color:var(--text-3);
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.4px;
  text-transform:uppercase
}

.app-shell .header-notifications-list{
  flex:1 1 auto;
  margin:0;
  padding:5px;
  list-style:none;
  overflow-y:auto
}

.app-shell .header-notifications-placeholder,.app-shell .header-notifications-list .no-notification{
  padding:22px 13px;
  color:var(--text-3);
  font-size:12.5px;
  text-align:center
}

.app-shell .header-notifications-list .notification-link{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:9px;
  border-radius:9px;
  color:var(--text-2);
  text-decoration:none;
  transition:background .13s
}

.app-shell .header-notifications-list .notification-link:hover{
  background:var(--surface-3);
  color:var(--text)
}

/* Every notification arrives unread, so filling those rows tints the whole panel. A dot
     and a heavier line carry the same meaning without it. */

.app-shell .header-notifications-list .notification-li.unread .notif-info{
  color:var(--text);
  font-weight:700
}

.app-shell .header-notifications-list .notification-li.unread .notification-link::after{
  content:"";
  flex:none;
  width:7px;
  height:7px;
  margin-top:7px;
  border-radius:50%;
  background:var(--brand)
}

/* vendor.css floats .notif-icon and sets width with !important, from the AdminLTE header. */

.app-shell .header-notifications-list .notif-icon{
  display:flex;
  flex:none;
  float:none;
  width:28px!important;
  height:28px;
  align-items:center;
  justify-content:center;
  margin:0;
  border-radius:8px;
  background:var(--surface-3);
  color:var(--text-2);
  line-height:1!important
}

.app-shell .header-notifications-list .notif-icon.is-info{
  background:var(--blue-weak);
  color:var(--blue)
}

.app-shell .header-notifications-list .notif-icon.is-success{
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .header-notifications-list .notif-icon.is-warning{
  background:var(--warn-weak);
  color:var(--warn)
}

.app-shell .header-notifications-list .notif-icon.is-danger{
  background:var(--danger-weak);
  color:var(--danger)
}

.app-shell .header-notifications-list .notif-body{
  display:flex;
  min-width:0;
  flex-direction:column;
  gap:2px
}

.app-shell .header-notifications-list .notif-info{
  font-size:12.5px;
  font-weight:600;
  line-height:1.35
}

.app-shell .header-notifications-list .time{
  color:var(--text-3);
  font-size:10.5px;
  font-weight:500
}

.app-shell .header-notifications-foot{
  padding:7px;
  border-top:1px solid var(--border-2);
  text-align:center
}

.app-shell .header-notifications-foot a{
  color:var(--brand-strong);
  font-size:12px;
  font-weight:700;
  text-decoration:none
}

.app-shell .header-notifications-foot a:hover{
  text-decoration:underline
}

/* On a phone the panel is wider than the space to the left of the bell, so anchoring it to
     the bell pushes it off the screen. Below this width it stops being a dropdown and spans
     the viewport under the header instead. */

@media(max-width:640px){
  .app-shell .header-notifications{
    position:static
  }

  .app-shell .header-notifications-menu{
    position:fixed;
    top:calc(var(--topbar-h,60px) + 6px);
    right:10px;
    left:10px;
    width:auto;
    max-width:none;
    max-height:calc(100vh - var(--topbar-h,60px) - 26px);
    margin-top:0
  }
}

/* content / cards */

.app-shell .h1{
  margin:0;
  font-size:24px;
  font-weight:800;
  letter-spacing:-.5px;
  color:var(--text)
}

.app-shell .sub-title{
  margin:6px 0 0;
  color:var(--text-2);
  font-size:13.5px
}

.app-shell .crumb{
  display:flex;
  align-items:center;
  gap:9px;
  font-size:12px;
  color:var(--text-3);
  font-weight:500
}

.app-shell .crumb-separator{
  display:inline-flex;
  width:14px;
  height:14px;
  min-width:14px;
  align-items:center;
  justify-content:center;
  overflow:hidden
}

.app-shell .crumb-separator svg{
  display:block;
  width:14px!important;
  height:14px!important;
  max-width:14px!important;
  max-height:14px!important
}

.app-shell .crumb-link{
  color:inherit;
  border-radius:4px;
  transition:color .16s ease
}

.app-shell .crumb-link:hover,.app-shell .crumb-link:focus-visible{
  color:var(--brand-strong);
  text-decoration:underline
}

.app-shell .card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow:var(--shadow-md);
  overflow:hidden
}

.app-shell .\!card{
  background:var(--surface) !important;
  border:1px solid var(--border) !important;
  border-radius:16px !important;
  box-shadow:var(--shadow-md) !important;
  overflow:hidden !important
}

.app-shell .stat{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  padding:15px 16px;
  box-shadow:var(--shadow-sm)
}

.app-shell .stat-ico{
  width:30px;
  height:30px;
  border-radius:9px;
  display:flex;
  align-items:center;
  justify-content:center
}

.app-shell .btn-primary{
  height:42px;
  padding:0 18px;
  border-radius:11px;
  border:none;
  background:var(--brand);
  color:#fff;
  font:inherit;
  font-weight:600;
  font-size:14px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  box-shadow:0 4px 12px -3px rgba(21,154,77,.55)
}

.app-shell .btn-primary:hover{
  background:var(--brand-strong)
}

.app-shell .btn-ghost{
  height:42px;
  padding:0 18px;
  border-radius:11px;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text-2);
  font:inherit;
  font-weight:600;
  font-size:14px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  cursor:pointer
}

.app-shell .btn-ghost:hover{
  background:var(--surface-3);
  color:var(--text)
}

/* table */

.app-shell .input{
  width:100%;
  height:38px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--surface-2);
  padding:0 12px;
  font:inherit;
  font-size:13px;
  color:var(--text);
  outline:none
}

.app-shell .\!input{
  width:100% !important;
  height:38px !important;
  border-radius:10px !important;
  border:1px solid var(--border) !important;
  background:var(--surface-2) !important;
  padding:0 12px !important;
  font:inherit !important;
  font-size:13px !important;
  color:var(--text) !important;
  outline:none !important
}

.app-shell .input:focus{
  border-color:var(--brand);
  background:var(--surface)
}

.app-shell .\!input:focus{
  border-color:var(--brand) !important;
  background:var(--surface) !important
}

.app-shell .th{
  text-align:left;
  padding:12px 16px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.4px;
  text-transform:uppercase;
  color:var(--text-3)
}

.app-shell .td{
  padding:var(--row-py) 16px
}

.app-shell .avatar{
  width:38px;
  height:38px;
  border-radius:11px;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:700;
  font-size:13px;
  flex:none
}

.app-shell .role{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:8px;
  font-size:12px;
  font-weight:600;
  white-space:nowrap
}

.app-shell .role .dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:currentColor
}

.app-shell .role .\!dot{
  width:6px !important;
  height:6px !important;
  border-radius:50% !important;
  background:currentColor !important
}

.app-shell .toggle{
  width:42px;
  height:24px;
  border-radius:20px;
  border:none;
  cursor:pointer;
  padding:0;
  position:relative;
  background:var(--border);
  transition:background .18s;
  flex:none
}

.app-shell .\!toggle{
  width:42px !important;
  height:24px !important;
  border-radius:20px !important;
  border:none !important;
  cursor:pointer !important;
  padding:0 !important;
  position:relative !important;
  background:var(--border) !important;
  transition:background .18s !important;
  flex:none !important
}

.app-shell .toggle.on{
  background:var(--brand)
}

.app-shell .\!toggle.on{
  background:var(--brand) !important
}

.app-shell .toggle .knob{
  position:absolute;
  top:3px;
  left:3px;
  width:18px;
  height:18px;
  border-radius:50%;
  background:var(--surface);
  transition:left .18s;
  box-shadow:0 1px 2px rgba(0,0,0,.25);
  display:block
}

.app-shell .\!toggle .knob{
  position:absolute !important;
  top:3px !important;
  left:3px !important;
  width:18px !important;
  height:18px !important;
  border-radius:50% !important;
  background:var(--surface) !important;
  transition:left .18s !important;
  box-shadow:0 1px 2px rgba(0,0,0,.25) !important;
  display:block !important
}

.app-shell .toggle.on .knob{
  left:21px
}

.app-shell .\!toggle.on .knob{
  left:21px !important
}

.app-shell .act{
  width:32px;
  height:32px;
  border-radius:8px;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text-2);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer
}

.app-shell .row-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  white-space:nowrap
}

.app-shell .row-actions .act{
  flex:none;
  transition:border-color .15s,background .15s,color .15s,box-shadow .15s
}

.app-shell .row-actions .act:hover{
  border-color:color-mix(in srgb,var(--brand) 38%,var(--border));
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .row-actions .act-danger{
  border-color:color-mix(in srgb,var(--danger) 24%,var(--border));
  color:var(--danger)
}

.app-shell .row-actions .act-danger:hover{
  border-color:color-mix(in srgb,var(--danger) 42%,var(--border));
  background:var(--danger-weak);
  color:var(--danger)
}

.app-shell .variation-value-list{
  display:flex;
  align-items:center;
  gap:5px;
  flex-wrap:wrap
}

.app-shell .variation-value-chip{
  display:inline-flex;
  align-items:center;
  padding:4px 8px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--surface-2);
  color:var(--text-2);
  font-size:11px;
  font-weight:650;
  line-height:1.2
}

/* Variations use the DataTable engine but present as a reusable-option catalogue. */

.app-shell .variation-list-card .data-table-content{
  background:var(--surface-2)
}

.app-shell .variation-list-card .variation-card-grid-wrap{
  padding:16px
}

.app-shell .variation-list-card table.dataTable{
  display:block!important;
  width:100%!important;
  border:0!important;
  background:transparent!important
}

.app-shell .variation-list-card table.dataTable thead{
  display:none
}

.app-shell .variation-list-card table.dataTable tbody{
  display:grid;
  width:100%;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px
}

.app-shell .variation-list-card table.dataTable tbody tr{
  display:grid!important;
  min-width:0;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"identity actions" "values values";
  align-content:start;
  border:1px solid var(--border)!important;
  border-radius:14px;
  background:var(--surface)!important;
  box-shadow:var(--shadow-sm);
  overflow:hidden;
  transition:border-color .16s,box-shadow .16s,transform .16s
}

.app-shell .variation-list-card table.dataTable tbody tr:hover{
  border-color:color-mix(in srgb,var(--brand) 32%,var(--border))!important;
  box-shadow:var(--shadow-md);
  transform:translateY(-1px)
}

.app-shell .variation-list-card table.dataTable tbody td{
  display:block!important;
  min-width:0;
  height:auto!important;
  border:0!important;
  background:transparent!important
}

.app-shell .variation-list-card table.dataTable tbody td:nth-child(1){
  grid-area:identity;
  padding:16px 8px 12px 16px
}

.app-shell .variation-list-card table.dataTable tbody td:nth-child(2){
  grid-area:values;
  min-height:58px;
  padding:12px 16px 16px;
  border-top:1px solid var(--border-2)!important
}

.app-shell .variation-list-card table.dataTable tbody td:nth-child(3){
  grid-area:actions;
  padding:16px 16px 12px 8px
}

.app-shell .variation-card-identity{
  display:flex;
  min-width:0;
  align-items:center;
  gap:11px
}

.app-shell .variation-card-icon{
  display:flex;
  width:40px;
  height:40px;
  flex:none;
  align-items:center;
  justify-content:center;
  border:1px solid color-mix(in srgb,var(--brand) 20%,var(--border));
  border-radius:11px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .variation-card-heading{
  display:flex;
  min-width:0;
  flex-direction:column;
  gap:3px
}

.app-shell .variation-card-heading strong{
  overflow:hidden;
  color:var(--text);
  font-size:14px;
  font-weight:750;
  line-height:1.2;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .variation-card-heading small{
  color:var(--text-3);
  font-size:11px;
  font-weight:600
}

.app-shell .variation-list-card .variation-value-list{
  align-content:flex-start
}

.app-shell .variation-list-card .variation-value-chip{
  padding:5px 9px;
  background:var(--surface-2)
}

.app-shell .variation-list-card .row-actions{
  gap:5px
}

.app-shell .variation-list-card .variation-card-action{
  width:34px;
  height:34px
}

.app-shell .variation-list-card td.dataTables_empty{
  grid-column:1/-1;
  min-height:150px!important;
  padding:52px 20px!important;
  text-align:center;
  color:var(--text-3)
}

@media (max-width:900px){
  .app-shell .variation-list-card table.dataTable tbody{
    grid-template-columns:1fr
  }
}

@media (max-width:560px){
  .app-shell .variation-list-card .variation-card-grid-wrap{
    padding:10px
  }

  .app-shell .variation-list-card table.dataTable tbody{
    gap:10px
  }
}

.app-shell .act:hover{
  color:var(--brand);
  border-color:var(--brand)
}

.app-shell .seg{
  flex:1;
  padding:0 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  border:none;
  background:var(--surface);
  color:var(--text-3)
}

.app-shell .seg.on{
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .exp{
  height:34px;
  padding:0 12px;
  border-radius:9px;
  border:1px solid var(--border);
  background:var(--surface-2);
  color:var(--text-2);
  font:inherit;
  font-size:12.5px;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap:6px;
  cursor:pointer
}

.app-shell .exp:hover{
  background:var(--surface-3);
  color:var(--text);
  border-color:var(--text-3)
}

/* Shared DataTable shell and toolbar. Columns and AJAX remain page-owned. */

.app-shell .data-table-card{
  --data-table-radius:14px;
  position:relative;
  overflow:visible;
  border-radius:var(--data-table-radius);
  background:var(--surface);
  box-shadow:var(--shadow-md)
}

/* Nested in a workspace card, the table is not its own box: the card around it already
     carries the header, border and radius, so a second rounded box read as a box in a box. */

/* This matched a direct child only, so a table card sitting inside a tab pane kept its
     own radius and shadow and read as a rounded box floating inside the card, with its
     top corners cut against the tab strip above it. */

.app-shell .workspace-card .data-table-card,
  .app-shell .repair-job-workspace .data-table-card{
  border-radius:0;
  box-shadow:none
}

.app-shell .workspace-card .data-table-card>.table-toolbar,
  .app-shell .repair-job-workspace .data-table-card>.table-toolbar{
  border-radius:0
}

.app-shell .workspace-card .data-table-card .data-table-content,
  .app-shell .repair-job-workspace .data-table-card .data-table-content{
  border-radius:0
}

.app-shell .workspace-card .data-table-card>.data-table-footer,
  .app-shell .repair-job-workspace .data-table-card>.data-table-footer{
  border-radius:0
}

/* The tabs already draw the line under themselves, so the pane needs no gap above it. */

.app-shell .workspace-card>.tab-content{
  padding-top:0
}

.app-shell .data-table-card>.table-toolbar{
  border-radius:var(--data-table-radius) var(--data-table-radius) 0 0
}

.app-shell .data-table-card>[id$="bulk-bar"]{
  border-radius:var(--data-table-radius) var(--data-table-radius) 0 0
}

.app-shell .data-table-card>[id$="bulk-bar"]:not(.hidden)+.table-toolbar{
  border-radius:0
}

.app-shell .data-table-card .dataTables_wrapper{
  padding:0;
  overflow:visible
}

.app-shell .data-table-content{
  overflow:visible;
  border-radius:0 0 var(--data-table-radius) var(--data-table-radius);
  background:var(--surface)
}

.app-shell .data-table-content>table:not(.dataTable){
  visibility:hidden
}

.app-shell .table-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:11px 14px;
  border-bottom:1px solid var(--border-2);
  background:var(--surface)
}

.app-shell .table-toolbar-search{
  position:relative;
  width:min(100%,360px)
}

.app-shell .table-toolbar-search>svg{
  position:absolute;
  left:12px;
  top:50%;
  z-index:1;
  color:var(--text-3);
  transform:translateY(-50%);
  pointer-events:none
}

.app-shell .table-toolbar-search .finput{
  height:36px;
  padding-left:35px;
  font-size:12.5px;
  background:var(--surface-2)
}

.app-shell .table-toolbar-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  flex-wrap:wrap
}

.app-shell .table-page-size{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0;
  color:var(--text-3);
  font-size:12px;
  font-weight:700;
  white-space:nowrap
}

.app-shell .table-page-size .finput{
  width:68px;
  padding-right:24px;
  font-size:12px;
  background:var(--surface-2)
}

/* The page size draws its own panel now rather than the browser's, so what is on screen is
     select2's box and the rules above no longer reach it. Same 68px, same height as the rest of
     the toolbar, so nothing about it looks different for having changed hands. */

.app-shell .table-page-size .select2-container{
  width:68px!important
}

.app-shell .table-page-size .select2-container--default .select2-selection--single{
  height:var(--table-toolbar-control-h,36px);
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface-2)
}

.app-shell .table-page-size .select2-container--default .select2-selection--single .select2-selection__rendered{
  padding-left:11px;
  padding-right:22px;
  color:var(--text);
  font-size:12px;
  font-weight:700;
  line-height:var(--table-toolbar-control-h,36px)
}

.app-shell .table-page-size .select2-container--default .select2-selection--single .select2-selection__arrow{
  height:var(--table-toolbar-control-h,36px);
  right:4px
}

.app-shell .table-export-holder{
  display:flex;
  align-items:center;
  gap:7px;
  flex-wrap:wrap
}

.app-shell .table-export-holder .dt-buttons{
  display:flex;
  align-items:center;
  gap:7px;
  margin:0
}

.app-shell .table-export-holder .dt-button,
  .app-shell .table-export-holder .btn,
  .app-shell .table-export-holder .table-export-button,
  .app-shell .table-export-holder>a,
  .app-shell .table-export-holder>button,
  .app-shell .table-export-holder .dt-buttons>a,
  .app-shell .table-export-holder .dt-buttons>button{
  padding:0 10px;
  margin:0;
  border:1px solid var(--border)!important;
  border-radius:9px!important;
  background:var(--surface-2)!important;
  color:var(--text-2)!important;
  font:inherit!important;
  font-size:12px!important;
  font-weight:650!important;
  line-height:1;
  text-decoration:none!important;
  box-shadow:none!important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  cursor:pointer
}


  .app-shell .table-export-holder .\!btn{
  padding:0 10px !important;
  margin:0 !important;
  border:1px solid var(--border)!important;
  border-radius:9px!important;
  background:var(--surface-2)!important;
  color:var(--text-2)!important;
  font:inherit!important;
  font-size:12px!important;
  font-weight:650!important;
  line-height:1 !important;
  text-decoration:none!important;
  box-shadow:none!important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;
  cursor:pointer !important
}

/* One order, every screen.
     DataTables emits its buttons in whatever order the config lists them, and the toolbar used
     to re-append them one by one to fix that — which only holds if every button exists at the
     moment the toolbar binds. On a table whose buttons are built a beat later, or rebuilt (which
     is what Columns does whenever a column is toggled), the row kept the emitted order.

     Written against .dt-buttons rather than the toolbar that holds it, because there are two
     toolbars: screens on the component keep their buttons in .table-export-holder, and screens
     on the default dom keep them in .datatable-header. Scoped to the first, the second went on
     reading CSV, Excel, Print, Columns, PDF while the first read Print, CSV, Excel, PDF,
     Columns — the same five buttons in two orders, which is the thing being fixed. */

.app-shell .dt-buttons{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:7px
}

.app-shell .dt-buttons .buttons-print{
  order:1
}

.app-shell .dt-buttons .buttons-csv{
  order:2
}

.app-shell .dt-buttons .buttons-excel{
  order:3
}

.app-shell .dt-buttons .buttons-pdf{
  order:4
}

.app-shell .dt-buttons .buttons-colvis{
  order:5
}

.app-shell .table-export-holder .dt-button:hover,
  .app-shell .table-export-holder .btn:hover,
  .app-shell .table-export-holder .table-export-button:hover,
  .app-shell .table-export-holder>a:hover,
  .app-shell .table-export-holder>button:hover,
  .app-shell .table-export-holder .dt-buttons>a:hover,
  .app-shell .table-export-holder .dt-buttons>button:hover{
  border-color:var(--text-3)!important;
  background:var(--surface-3)!important;
  color:var(--text)!important
}


  .app-shell .table-export-holder .\!btn:hover{
  border-color:var(--text-3)!important;
  background:var(--surface-3)!important;
  color:var(--text)!important
}

.app-shell .table-export-holder svg{
  width:13px;
  height:13px;
  flex:none
}

.app-shell .table-export-holder .dt-buttons{
  gap:6px
}

.app-shell .table-export-holder .dt-button span,.app-shell .table-export-holder .dt-button{
  font-size:11.5px;
  font-weight:700
}

.app-shell .data-table-buttons-source{
  display:none
}

.app-shell .data-table-footer{
  display:flex;
  min-height:58px;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 16px;
  border-top:1px solid var(--border-2);
  border-radius:0 0 var(--data-table-radius) var(--data-table-radius);
  background:var(--surface)
}

.app-shell .data-table-footer .dataTables_info,
  .app-shell .data-table-footer .dataTables_paginate{
  padding:0
}

@media (max-width:760px){
  .app-shell .table-toolbar{
    align-items:stretch;
    flex-direction:column
  }

  .app-shell .table-toolbar-search{
    width:100%
  }

  .app-shell .table-toolbar-actions{
    justify-content:space-between
  }

  .app-shell .data-table-content{
    overflow-x:auto
  }

  .app-shell .data-table-footer{
    align-items:flex-start;
    flex-direction:column
  }
}

/* Product catalogue: dense operational table with explicit bulk-selection state. */

.app-shell .product-list-page{
  --product-table-min-width:2100px
}

.app-shell .product-filter-card{
  margin-bottom:14px
}

.app-shell .product-filter-options{
  display:flex;
  min-height:64px;
  align-items:flex-end;
  gap:8px;
  flex-wrap:wrap
}

.app-shell .product-filter-toggle{
  display:flex;
  min-height:42px;
  flex:1 1 160px;
  align-items:center;
  gap:9px;
  margin:0;
  padding:9px 12px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface-2);
  color:var(--text-2);
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  transition:border-color .15s,background .15s,color .15s,box-shadow .15s
}

.app-shell .product-filter-toggle:hover{
  border-color:color-mix(in srgb,var(--brand) 42%,var(--border));
  background:var(--surface);
  color:var(--text)
}

.app-shell .product-filter-toggle:has(input:checked),.app-shell .product-filter-toggle:has(.checked){
  border-color:color-mix(in srgb,var(--brand) 55%,var(--border));
  background:var(--brand-weak);
  color:var(--brand-strong);
  box-shadow:0 0 0 3px rgba(21,154,77,.07)
}

.app-shell .product-filter-toggle .icheckbox_square-blue{
  flex:none;
  margin:0
}

.app-shell .product-module-filters{
  display:contents
}

.app-shell .product-module-filters>.col-md-3,.app-shell .product-module-filters>.col-md-4,.app-shell .product-module-filters>.col-sm-6{
  width:auto;
  min-width:0;
  padding:0;
  float:none
}

.app-shell .product-module-filters .form-group{
  margin:0
}

.app-shell .product-workspace{
  display:grid;
  min-width:0;
  max-width:100%;
  gap:0;
  margin-top:0
}

/* Expense workspace ------------------------------------------------------- */

body.app-ui .expense-overview{
  display:grid;
  grid-template-columns:1.25fr repeat(3,1fr);
  overflow:hidden;
  margin-top:14px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

body.app-ui .expense-overview-intro{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  gap:12px;
  padding:15px 18px;
  border-right:1px solid var(--border-2)
}

body.app-ui .expense-overview-intro>span{
  display:grid;
  width:38px;
  height:38px;
  place-items:center;
  border-radius:11px;
  background:var(--brand-weak);
  color:var(--brand)
}

body.app-ui .expense-overview-intro small,body.app-ui .expense-overview-intro strong,body.app-ui .expense-overview-intro p{
  display:block
}

.expense-overview-intro small{
  color:var(--text-3);
  font-size:10px;
  font-weight:850;
  letter-spacing:.08em
}

.expense-overview-intro strong{
  margin-top:2px;
  font-size:14px
}

.expense-overview-intro p{
  margin:2px 0 0;
  color:var(--text-3);
  font-size:12px
}

body.app-ui .expense-show-all{
  grid-column:2;
  display:flex;
  align-items:center;
  gap:4px;
  width:-moz-max-content;
  width:max-content;
  margin-top:4px;
  border:0;
  background:transparent;
  color:var(--brand);
  font-size:11.5px;
  font-weight:750
}

body.app-ui .expense-state-card{
  display:flex;
  align-items:center;
  gap:12px;
  padding:15px 18px;
  border:0;
  border-right:1px solid var(--border-2);
  background:var(--surface);
  text-align:left;
  transition:.15s ease
}

body.app-ui .expense-state-card:last-child{
  border-right:0
}

body.app-ui .expense-state-card:hover,body.app-ui .expense-state-card.is-active{
  background:var(--surface-2)
}

body.app-ui .expense-state-card.is-active{
  box-shadow:inset 0 -3px var(--brand)
}

body.app-ui .expense-state-card i{
  display:grid;
  width:36px;
  height:36px;
  place-items:center;
  border-radius:10px
}

.expense-state-card.is-paid i{
  background:#e8f7ee;
  color:#19934a
}

.expense-state-card.is-partial i{
  background:#fff3df;
  color:#d57a00
}

.expense-state-card.is-due i{
  background:#ffebed;
  color:#dd3e47
}

body.app-ui .expense-state-card strong,body.app-ui .expense-state-card small{
  display:block
}

.expense-state-card strong{
  font-size:13px
}

.expense-state-card small{
  margin-top:3px;
  color:var(--text-3);
  font-size:11.5px
}

body.app-ui .expense-filter-card{
  overflow:visible;
  margin-top:14px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

body.app-ui .expense-filter-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 14px;
  border-bottom:1px solid var(--border-2);
  border-radius:13px 13px 0 0;
  background:var(--surface-2)
}

body.app-ui .expense-filter-head>div{
  display:flex;
  align-items:center;
  gap:10px
}

.expense-filter-head>div>span{
  display:grid;
  width:34px;
  height:34px;
  place-items:center;
  border-radius:9px;
  background:var(--surface);
  color:var(--text-2)
}

.expense-filter-head strong{
  display:block;
  font-size:13px
}

.expense-filter-head p{
  margin:2px 0 0;
  color:var(--text-3);
  font-size:11.5px
}

body.app-ui .expense-filter-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:13px;
  padding:14px
}

body.app-ui .expense-list-card{
  margin-top:14px
}

body.app-ui .expense-table-stage{
  overflow-x:auto
}

body.app-ui .expense-ledger-table{
  min-width:1080px
}

body.app-ui .expense-ledger-table th{
  font-size:11px!important
}

body.app-ui .expense-ledger-table td{
  padding:13px 12px!important;
  font-size:13px;
  vertical-align:middle!important
}

body.app-ui .expense-reference,body.app-ui .expense-party{
  display:flex;
  align-items:center;
  gap:10px
}

body.app-ui .expense-reference strong,body.app-ui .expense-reference small,body.app-ui .expense-date strong,body.app-ui .expense-date small,body.app-ui .expense-category strong,body.app-ui .expense-category small,body.app-ui .expense-party strong,body.app-ui .expense-party small,body.app-ui .expense-created strong,body.app-ui .expense-created small,body.app-ui .expense-financial small,body.app-ui .expense-financial strong,body.app-ui .expense-financial span{
  display:block
}

body.app-ui .expense-reference strong,body.app-ui .expense-category strong,body.app-ui .expense-party strong,body.app-ui .expense-created strong{
  color:var(--text);
  font-size:13px
}

body.app-ui .expense-reference small,body.app-ui .expense-date small,body.app-ui .expense-category small,body.app-ui .expense-party small,body.app-ui .expense-created small{
  margin-top:3px;
  color:var(--text-3);
  font-size:11.5px
}

body.app-ui .expense-party small{
  display:flex;
  align-items:center;
  gap:5px
}

body.app-ui .expense-external-reference{
  display:inline-block;
  margin-left:7px;
  padding:2px 6px;
  border:1px solid var(--border);
  border-radius:6px;
  background:var(--surface-2);
  color:var(--text-3);
  font-size:10.5px;
  font-weight:650;
  vertical-align:1px
}

body.app-ui .expense-payment-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 9px;
  border:1px solid;
  border-radius:999px;
  font-size:11.5px;
  font-weight:800;
  text-decoration:none!important
}

.expense-payment-chip>span,.expense-payment-chip>i{
  width:6px;
  height:6px;
  border-radius:50%;
  background:currentColor
}

.expense-payment-chip.is-paid{
  border-color:#a9dfbd;
  background:#eaf8ef;
  color:#188044
}

.expense-payment-chip.is-partial{
  border-color:#f0d29a;
  background:#fff5e5;
  color:#ad6500
}

.expense-payment-chip.is-due{
  border-color:#f1b7bc;
  background:#fff0f1;
  color:#c9343e
}

body.app-ui .expense-financial small{
  color:var(--text-3);
  font-size:9.5px;
  font-weight:850;
  letter-spacing:.06em
}

/* One row, one loud thing. Every cell drew its first line in a <strong>, so the reference, the
   date, the category, the payee and the recorder all shouted at the same volume and a category
   written in two scripts shouted longest. Emphasis now goes to what identifies the row and what
   it cost; everything else steps back to a normal weight. */

body.app-ui .expense-ledger-table .expense-reference strong{
  font-weight:750
}

body.app-ui .expense-ledger-table .expense-financial strong{
  font-weight:750
}

body.app-ui .expense-ledger-table .expense-date strong{
  color:var(--text-2);
  font-weight:550;
  white-space:nowrap
}

body.app-ui .expense-ledger-table .expense-category{
  max-width:250px
}

body.app-ui .expense-ledger-table .expense-category strong{
  font-size:12.5px;
  font-weight:600;
  line-height:1.4
}

body.app-ui .expense-ledger-table .expense-created strong{
  font-weight:600;
  white-space:nowrap
}

/* The payee cell holds the name and, when there is a chat to send to, a Send Telegram button.
   Both arrive as markup from the listing, stacked by the column the button was built for. */

/* The cell holds both of the form's "expense for" fields — the staff member first, then the
   contact, in the order the form asks for them. Each is a block of its own with the field name
   over the value: a name can carry a Send Telegram button and wrap onto a second line, and a
   caption sitting beside that was left stranded against empty space. Without the captions a row
   naming a supplier and a staff member is two unexplained names. */

body.app-ui .expense-ledger-table .expense-party{
  max-width:240px;
  flex-direction:column;
  align-items:flex-start;
  gap:9px
}

body.app-ui .expense-party-row{
  display:flex;
  width:100%;
  min-width:0;
  flex-direction:column;
  gap:3px
}

/* Sized to the TOTAL caption in the Financials cell of the same row — these are the same kind of
   thing and were competing with the names for weight at 10px. */

body.app-ui .expense-party-row>small{
  color:var(--text-3);
  font-size:9.5px;
  font-weight:850;
  letter-spacing:.06em;
  text-transform:uppercase
}

body.app-ui .expense-party-row>div{
  display:flex;
  min-width:0;
  flex-wrap:wrap;
  align-items:center;
  gap:5px
}

body.app-ui .expense-party-name{
  color:var(--text);
  font-weight:600
}

body.app-ui .expense-party-none,body.app-ui .expense-note-none{
  color:var(--text-3)
}

/* The note is typed over several lines and every one of them is a fact somebody wrote down on
   purpose, so it is shown whole on the lines it was typed with, bounded so it grows downwards. */

body.app-ui .expense-note{
  max-width:260px;
  color:var(--text-2);
  font-size:12px;
  line-height:1.45;
  white-space:pre-line;
  overflow-wrap:anywhere
}

body.app-ui .expense-ledger-summary{
  display:flex;
  justify-content:flex-end;
  border-top:1px solid var(--border-2);
  background:var(--surface-2)
}

body.app-ui .expense-ledger-summary>div{
  display:flex;
  min-width:190px;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:12px 15px;
  border-left:1px solid var(--border-2);
  font-size:12px
}

.expense-ledger-summary span{
  color:var(--text-3)
}

.expense-ledger-summary strong{
  font-size:14px
}

.expense-ledger-summary>div:last-child strong{
  color:var(--danger)
}

body.app-ui .expense-row-actions{
  justify-content:flex-end
}

body.app-ui .action-menu svg{
  display:inline-block;
  margin-right:9px;
  vertical-align:-3px
}

body.app-ui .action-menu a{
  display:flex!important;
  align-items:center;
  padding:9px 13px!important;
  font-size:13px!important;
  font-weight:650
}

.action-menu a.danger{
  color:var(--danger)!important
}

body.app-ui .expense-form-page form{
  display:grid;
  gap:14px
}

body.app-ui .expense-details-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px
}

/* Both halves are ordinary labelled fields now, so they are sized alike and hung from their labels
   rather than bottom-aligned — only the refund half carries a help line, and aligning on that would
   have pushed its label out of step with Total amount's. */

body.app-ui .expense-amount-layout{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  align-items:start
}

body.app-ui .expense-form-page .money-control,body.app-ui .expense-quick-modal .money-control{
  display:flex;
  width:100%;
  min-width:0;
  align-items:stretch;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface);
  transition:border-color .15s,box-shadow .15s
}

body.app-ui .expense-form-page .money-control:focus-within,body.app-ui .expense-quick-modal .money-control:focus-within{
  border-color:var(--brand);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 14%,transparent)
}

body.app-ui .expense-form-page .money-control>span,body.app-ui .expense-quick-modal .money-control>span{
  order:-1;
  display:grid;
  width:48px;
  min-width:48px;
  height:44px;
  place-items:center;
  border:0;
  border-right:1px solid var(--border-2);
  border-radius:0;
  background:var(--surface-2);
  color:var(--text-2);
  font-size:13px;
  font-weight:800
}

body.app-ui .expense-form-page .money-control>.finput,body.app-ui .expense-quick-modal .money-control>.finput{
  width:100%;
  min-width:0;
  height:44px;
  flex:1;
  border:0!important;
  border-radius:0!important;
  background:transparent;
  text-align:right;
  box-shadow:none!important
}

/* The recurring switch heads its own panel, so it stays a filled card. The refund switch does not:
   it stands in a field row beside Total amount, where a filled card read as a different kind of
   thing to the input next to it. It borrows the input's geometry instead — same 44px, same radius,
   same surface, same focus ring — and hands its description to the field's own help line, which
   is what keeps the two halves of the row the same height. */

body.app-ui .expense-refund-toggle,body.app-ui .expense-recurring-toggle{
  display:flex;
  align-items:center;
  gap:11px;
  cursor:pointer
}

body.app-ui .expense-recurring-toggle{
  min-height:46px;
  padding:10px 13px;
  border:1px solid var(--border);
  border-radius:11px;
  background:var(--surface-2)
}

body.app-ui .expense-refund-toggle{
  height:44px;
  padding:0 13px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface);
  transition:border-color .15s,box-shadow .15s
}

body.app-ui .expense-refund-toggle:hover{
  border-color:var(--brand)
}

body.app-ui .expense-refund-toggle:focus-within{
  border-color:var(--brand);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 14%,transparent)
}

body.app-ui .expense-refund-toggle>span{
  font-size:13.5px;
  color:var(--text)
}

.expense-refund-toggle input,.expense-recurring-toggle input{
  width:17px;
  height:17px;
  accent-color:var(--brand)
}

.expense-recurring-toggle strong,.expense-recurring-toggle small{
  display:block
}

.expense-recurring-toggle strong{
  font-size:13px
}

.expense-recurring-toggle small{
  margin-top:2px;
  color:var(--text-3);
  font-size:11.5px
}

body.app-ui .expense-recurring-panel{
  margin-top:17px;
  padding-top:17px;
  border-top:1px solid var(--border-2)
}

body.app-ui .expense-recurring-fields{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  margin-top:14px;
  opacity:.55
}

body.app-ui .expense-recurring-panel.is-enabled .expense-recurring-fields{
  opacity:1
}

body.app-ui .expense-support-grid{
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:18px;
  align-items:stretch
}

/* `.finput` sets a flat height:42px, which a textarea inherits too — so rows="6" drew as a single
   line. Releasing that height is not enough on its own: a textarea then sizes itself from `rows`,
   which made the note the taller of the two columns instead of the shorter one. Sizing it from a
   flex-basis of 0 means it asks for no height at all, so the row is measured by the document
   column and the note grows into exactly that — level bottom edges whatever the document side
   holds, including the "current document" link the edit screen adds under the picker. */

body.app-ui .expense-support-grid>div{
  display:flex;
  min-width:0;
  flex-direction:column
}

body.app-ui .expense-support-grid textarea.finput{
  height:0;
  min-height:0;
  flex:1 1 0;
  padding:10px 13px;
  line-height:1.5;
  overflow:auto;
  resize:none
}

.expense-current-document{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-top:8px;
  color:var(--brand);
  font-size:12px;
  font-weight:700
}

.expense-payment-panel{
  padding:4px
}

.expense-payment-due{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:18px;
  margin-top:14px;
  padding:12px 14px;
  border-radius:10px;
  background:var(--surface-2);
  font-size:13px
}

.expense-payment-due strong{
  color:var(--brand);
  font-size:17px
}

.finput.has-error{
  border-color:var(--danger)!important
}

body.app-ui .expense-detail-dialog{
  width:min(1180px,calc(100vw - 28px));
  margin:26px auto
}

body.app-ui .expense-detail-modal{
  overflow:hidden;
  border:0!important;
  border-radius:16px!important;
  box-shadow:0 24px 70px rgba(16,24,40,.28)
}

body.app-ui .expense-detail-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 17px;
  border-bottom:1px solid var(--border-2);
  background:var(--surface)
}

.expense-detail-heading{
  display:flex;
  align-items:center;
  gap:11px
}

.expense-detail-heading>span{
  display:grid;
  width:39px;
  height:39px;
  place-items:center;
  border-radius:11px;
  background:var(--brand-weak);
  color:var(--brand)
}

.expense-detail-heading strong,.expense-detail-heading small{
  display:block
}

.expense-detail-heading strong{
  font-size:16px
}

.expense-detail-heading small{
  margin-top:2px;
  color:var(--text-3);
  font-size:12px
}

.modal-close{
  display:grid;
  width:34px;
  height:34px;
  place-items:center;
  border:0;
  border-radius:9px;
  background:var(--surface-2);
  color:var(--text-2)
}

body.app-ui .expense-detail-body{
  padding:18px;
  background:#f8faf9
}

.expense-document-title{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  padding:4px 3px 16px;
  border-bottom:2px solid var(--text)
}

.expense-document-title>div:last-child{
  text-align:right
}

.expense-document-title small,.expense-document-title strong,.expense-document-title span{
  display:block
}

.expense-document-title small{
  color:var(--text-3);
  font-size:10px;
  font-weight:800;
  letter-spacing:.06em
}

.expense-document-title h2{
  margin:4px 0;
  color:var(--text);
  font-size:23px;
  font-weight:850
}

.expense-document-title>div:first-child>strong{
  color:var(--brand);
  font-size:13px
}

.expense-document-title>div:last-child>strong{
  margin-top:4px;
  font-size:14px
}

.expense-document-title span{
  margin-top:3px;
  color:var(--text-3);
  font-size:11.5px
}

body.app-ui .expense-detail-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-top:14px
}

.expense-detail-grid>section,.expense-note-card,.expense-total-card{
  padding:15px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface)
}

.expense-detail-grid>section>small,.expense-note-card>small{
  display:block;
  color:var(--text-3);
  font-size:10px;
  font-weight:850;
  letter-spacing:.07em
}

.expense-detail-grid>section>strong{
  display:block;
  margin-top:9px;
  font-size:14px
}

.expense-detail-grid>section>span{
  display:block;
  margin-top:4px;
  color:var(--text-2);
  font-size:12.5px
}

.expense-detail-grid dl{
  margin:7px 0 0
}

.expense-detail-grid dl>div{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:6px 0
}

.expense-detail-grid dt{
  color:var(--text-3);
  font-size:12px
}

.expense-detail-grid dd{
  margin:0;
  font-size:12.5px;
  font-weight:750;
  text-align:right
}

body.app-ui .expense-detail-lower{
  display:grid;
  grid-template-columns:1fr 390px;
  gap:12px;
  margin-top:12px
}

.expense-note-card p{
  margin:8px 0 0;
  color:var(--text-2);
  font-size:13px;
  line-height:1.6
}

.expense-total-card>div{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:9px 0;
  border-bottom:1px solid var(--border-2);
  font-size:12.5px
}

.expense-total-card>div:last-child{
  border:0;
  color:var(--danger);
  font-weight:800
}

.expense-total-card>div:last-child strong{
  font-size:17px
}

.expense-activity-card{
  overflow:hidden;
  margin-top:12px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface)
}

.expense-section-head{
  display:flex;
  align-items:center;
  gap:9px;
  padding:11px 14px;
  border-bottom:1px solid var(--border-2);
  background:var(--surface-2)
}

.expense-section-head strong,.expense-section-head small{
  display:block
}

.expense-section-head strong{
  font-size:13.5px
}

.expense-section-head small{
  margin-top:2px;
  color:var(--text-3);
  font-size:11px
}

.expense-activity-card table{
  width:100%;
  border-collapse:collapse
}

.expense-activity-card th,.expense-activity-card td{
  padding:10px 13px;
  border-bottom:1px solid var(--border-2);
  font-size:12.5px;
  text-align:left
}

.expense-activity-card th{
  color:var(--text-3);
  font-size:10.5px;
  text-transform:uppercase
}

.expense-detail-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 17px;
  border-top:1px solid var(--border-2);
  background:var(--surface)
}

.expense-detail-footer>span{
  color:var(--text-3);
  font-size:12px
}

@media(max-width:1050px){
  body.app-ui .expense-overview{
    grid-template-columns:1fr 1fr
  }

  .expense-overview-intro{
    grid-column:1/-1;
    border-bottom:1px solid var(--border-2)
  }

  body.app-ui .expense-filter-grid,body.app-ui .expense-details-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

  body.app-ui .expense-detail-lower{
    grid-template-columns:1fr
  }
}

@media(max-width:720px){
  body.app-ui .expense-overview,body.app-ui .expense-filter-grid,body.app-ui .expense-details-grid,body.app-ui .expense-amount-layout,body.app-ui .expense-recurring-fields,body.app-ui .expense-support-grid,body.app-ui .expense-detail-grid{
    grid-template-columns:1fr
  }

  /* Stacked, there is no document column left to take the note's height from, so it goes back to sizing itself. */

  body.app-ui .expense-support-grid textarea.finput{
    height:auto;
    min-height:112px;
    flex:0 1 auto;
    resize:vertical
  }

  .expense-state-card{
    border-right:0!important;
    border-bottom:1px solid var(--border-2)
  }

  body.app-ui .expense-ledger-summary{
    flex-direction:column
  }

  body.app-ui .expense-ledger-summary>div{
    width:100%;
    border-left:0;
    border-top:1px solid var(--border-2)
  }

  body.app-ui .expense-detail-dialog{
    width:calc(100vw - 12px);
    margin:6px auto
  }

  .expense-detail-body{
    padding:12px!important
  }

  .expense-detail-footer>span{
    display:none
  }
}

.expense-category-intro{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:14px;
  padding:15px 17px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

.expense-category-intro>span{
  display:grid;
  width:40px;
  height:40px;
  place-items:center;
  border-radius:11px;
  background:var(--brand-weak);
  color:var(--brand)
}

.expense-category-intro strong{
  display:block;
  font-size:14px
}

.expense-category-intro p{
  margin:3px 0 0;
  color:var(--text-3);
  font-size:12.5px
}

.expense-category-list-card{
  margin-top:14px
}

.expense-category-table th{
  font-size:11px!important
}

.expense-category-table td{
  padding:12px 15px!important;
  font-size:13.5px;
  vertical-align:middle!important
}

.expense-category-table td:first-child{
  font-weight:750
}

.expense-category-cell{
  display:flex;
  align-items:center;
  gap:11px
}

.expense-category-cell-icon{
  display:grid;
  width:34px;
  height:34px;
  flex:0 0 34px;
  place-items:center;
  border-radius:9px;
  background:var(--brand-weak);
  color:var(--brand)
}

.expense-category-cell>span:last-child,.expense-category-cell strong,.expense-category-cell small{
  display:block
}

.expense-category-cell strong{
  color:var(--text);
  font-size:13.5px
}

.expense-category-cell small{
  margin-top:2px;
  color:var(--text-3);
  font-size:11.5px;
  font-weight:550
}

.expense-category-cell.is-subcategory{
  position:relative;
  padding-left:30px
}

/* A rail down the indent, so a run of children reads as one family rather than as rows that   happen to be indented. */

.expense-category-cell.is-subcategory::before{
  content:'';
  position:absolute;
  top:-14px;
  bottom:-14px;
  left:14px;
  width:1px;
  background:var(--border-2)
}

.expense-category-cell.is-subcategory .expense-category-cell-icon{
  background:var(--surface-2);
  color:var(--text-3)
}

.expense-category-cell.is-parent strong{
  font-weight:750
}

.expense-category-cell.is-subcategory strong{
  font-weight:600
}

.expense-category-row-actions{
  justify-content:flex-end
}

.expense-category-row-actions .act svg{
  display:block;
  width:16px;
  height:16px
}

.expense-category-dialog{
  width:min(620px,calc(100vw - 24px));
  margin:50px auto
}

.expense-category-modal{
  overflow:hidden;
  border:0!important;
  border-radius:16px!important;
  box-shadow:0 24px 70px rgba(16,24,40,.28)
}

.expense-category-modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:15px 17px;
  border-bottom:1px solid var(--border-2)
}

.expense-category-modal-head>div{
  display:flex;
  align-items:center;
  gap:11px
}

.expense-category-modal-head>div>span{
  display:grid;
  width:40px;
  height:40px;
  place-items:center;
  border-radius:11px;
  background:var(--brand-weak);
  color:var(--brand)
}

.expense-category-modal-head strong,.expense-category-modal-head small{
  display:block
}

.expense-category-modal-head strong{
  font-size:16px
}

.expense-category-modal-head small{
  margin-top:2px;
  color:var(--text-3);
  font-size:12px
}

.expense-category-modal-body{
  display:grid;
  gap:15px;
  padding:18px
}

.expense-category-fields{
  display:grid;
  grid-template-columns:1.35fr .8fr;
  gap:14px
}

.expense-subcategory-toggle{
  display:flex;
  align-items:center;
  gap:11px;
  padding:12px 13px;
  border:1px solid var(--border);
  border-radius:11px;
  background:var(--surface-2);
  cursor:pointer
}

.expense-subcategory-toggle input{
  width:17px;
  height:17px;
  accent-color:var(--brand)
}

.expense-subcategory-toggle strong,.expense-subcategory-toggle small{
  display:block
}

.expense-subcategory-toggle strong{
  font-size:13px
}

.expense-subcategory-toggle small{
  margin-top:2px;
  color:var(--text-3);
  font-size:11.5px
}

.expense-category-modal-foot{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:9px;
  padding:13px 17px;
  border-top:1px solid var(--border-2);
  background:var(--surface)
}

.expense-category-modal-foot .btn-ghost,.expense-category-modal-foot .btn-primary{
  height:42px;
  min-width:112px;
  justify-content:center
}

@media(max-width:620px){
  .expense-category-fields{
    grid-template-columns:1fr
  }
}

body.app-ui .expense-opening-payment-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:15px
}

.expense-opening-payment-grid .expense-payment-note{
  grid-column:1/-1
}

@media(max-width:980px){
  body.app-ui .expense-opening-payment-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}

@media(max-width:620px){
  body.app-ui .expense-opening-payment-grid{
    grid-template-columns:1fr
  }
}

/* ======================================================= the rail, on a phone
 *
 * Below 900px the rail stops being part of the layout and becomes a drawer: hidden off the
 * left edge, brought in by the menu button in the top bar, closed by the sheet behind it, a
 * link, or Escape. It is wider there than on a desktop and lays each entry out as a row, so
 * the modules can carry their names instead of being sixteen unlabelled icons.
 *
 * All of it lives in one place rather than a second stylesheet: the dashboard compiles to a
 * single app-ui.css, and a phone file would be built from the same source, loaded on the same
 * pages, and drift from the rules it overrides. (The POS is different — pos-ui.css is written
 * by hand and served as-is, so its phone file can be deleted without a build.)
 */

body.app-ui .nav-toggle{
  display:none
}

@media(max-width:900px){
  body.app-ui .nav-toggle{
    display:grid;
    width:38px;
    height:38px;
    flex:none;
    place-items:center;
    border:1px solid var(--border);
    border-radius:10px;
    background:var(--surface);
    color:var(--text-2);
    cursor:pointer
  }

  body.app-ui .nav-toggle:hover{
    border-color:var(--brand);
    background:var(--brand-weak);
    color:var(--brand-strong)
  }

  body.app-ui .app-shell>.sidebar{
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    z-index:1050;
    width:264px;
    max-width:84vw;
    transform:translateX(-100%);
    transition:transform .22s ease;
    box-shadow:none
  }

  body.app-ui .app-shell.is-nav-open>.sidebar{
    transform:none;
    box-shadow:0 24px 60px rgba(16,32,24,.28)
  }

  body.app-ui .nav-scrim{
    position:fixed;
    inset:0;
    z-index:1040;
    background:rgba(13,18,16,.42);
    opacity:0;
    transition:opacity .22s ease
  }

  body.app-ui .app-shell.is-nav-open .nav-scrim{
    opacity:1
  }

  body.app-ui .nav-scrim[hidden]{
    display:none
  }

  body.has-nav-open{
    overflow:hidden
  }

  /* A drawer has room for the names, so each module reads as a row rather than a glyph over a
     caption. Written .app-shell .sidebar-first to outweigh the rail's own centred layout. */

  body.app-ui .app-shell .sidebar .rail-nav .rail-item{
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:flex-start;
    gap:11px;
    width:100%;
    height:auto;
    min-height:0;
    padding:8px 11px;
    border-radius:9px;
    text-align:left
  }

  body.app-ui .app-shell .sidebar .rail-nav .rail-ico{
    flex:none;
    margin:0
  }

  /*
   * A navigation list is read by scanning it, not by reading it, so the whole column being set
   * in semibold gave nineteen entries the same emphasis and left nothing for the one you are on
   * to stand out with. The label drops to a medium weight and the active row keeps a step above
   * it — that step is what carries "you are here", along with the pill it already sits on.
   */

  body.app-ui .app-shell .sidebar .rail-nav .rail-label{
    display:block;
    max-width:none;
    overflow:hidden;
    margin:0;
    font-size:13px;
    font-weight:530;
    letter-spacing:-.002em;
    line-height:1.25;
    text-align:left;
    text-overflow:ellipsis;
    white-space:nowrap
  }

  body.app-ui .app-shell .sidebar .rail-nav .rail-item.is-active .rail-label{
    font-weight:640
  }

  /*
   * The icons are line drawings, and at 1.7 the strokes read heavier than the text beside them,
   * which is what made the column look crowded. Thinner and a touch smaller sits them under the
   * label rather than over it; the active row keeps the full weight so the eye still finds it.
   */

  body.app-ui .app-shell .sidebar .rail-nav .rail-ico svg{
    width:17px;
    height:17px;
    stroke-width:1.5
  }

  body.app-ui .app-shell .sidebar .rail-nav .rail-item.is-active .rail-ico svg{
    stroke-width:1.8
  }

  /* In a row there is room for the count to sit where a message list puts it — at the end
     of the line — instead of on the corner of the icon, which is only where it goes when
     the entry is a glyph over a caption. */

  body.app-ui .app-shell .sidebar .rail-nav .rail-badge{
    position:static;
    order:3;
    min-width:18px;
    height:18px;
    margin-left:auto;
    padding:0 5px;
    border:0;
    font-size:10.5px
  }

  body.app-ui .app-shell .sidebar .rail-head{
    justify-content:flex-start;
    padding:14px 14px 10px
  }

  body.app-ui .app-shell .sidebar .rail-nav,body.app-ui .app-shell .sidebar .rail-scroll{
    padding:6px 8px 14px
  }

  /* Settings sits at the end of the list rather than floating over it: a drawer scrolls, and a
     pinned footer inside a scrolling panel lands on top of whatever is under it. */

  body.app-ui .app-shell .sidebar .rail-pinned{
    position:static;
    margin-top:6px;
    padding-top:6px;
    border-top:1px solid var(--border-2);
    background:none
  }
}

/* On a phone the dashboard bar carries nothing but its own controls — no title, no search, no
   tabs — so the white strip and its rule were dividing the page from nothing. The buttons keep
   their own shapes and sit straight on the page's background, which lets the dashboard's tint run
   to the top of the screen instead of starting sixty pixels down.
   Only there: a screen that opens on a table or a form has a bar with work in it, and wants the
   edge between the two. */

@media(max-width:900px){
  body.app-ui.is-dashboard .app-shell .topbar{
    --topbar-h:68px;
    height:auto;
    min-height:52px;
    padding:8px 12px;
    border-bottom:0;
    background:transparent;
    box-shadow:none
  }
}

/* The dashboard used to paint its own page fill — a fixed #f8fafc from the old stylesheet, laid
   over the theme's background. The bar above it shows the theme's, so the two never matched: a
   grey strip over a whiter page. The fixed colour also stayed near-white in dark mode, where it
   is meant to be nearly black. The page shows the background the rest of the app does; the cards
   on it carry their own surface, as they always did. */

body.app-ui .dashboard{
  background:transparent;
  min-height:0
}

/* The wash the dashboard opens on. It was three flat tones stacked — a white bar, a near-white
   page fill and the app's background under both — which read as a gradient and broke into bands
   the moment the bar went transparent. It is one gradient now, painted on the shell so it runs
   behind the bar as well as the page: the buttons sit on the same colour the greeting does. Built
   from the brand token, so it follows the theme instead of freezing a light-mode hex. */

body.app-ui.is-dashboard .app-shell{
  background:linear-gradient(180deg,color-mix(in srgb,var(--brand-weak) 70%,var(--bg)) 0,var(--bg) 340px)
}

@media(max-width:900px) and (prefers-reduced-motion:reduce){
  body.app-ui .app-shell>.sidebar,body.app-ui .nav-scrim{
    transition:none
  }
}

/* The staff dashboard: one list of what this person has to do, with the shift above it and
   the things that are merely true — takings, notices, the way into each module — beside it. */

body.app-ui .staff-board{
  display:grid;
  gap:16px
}

body.app-ui .staff-shift{
  display:flex;
  align-items:center;
  gap:13px;
  padding:14px 16px
}

body.app-ui .staff-shift-ico{
  display:grid;
  width:42px;
  height:42px;
  flex:none;
  place-items:center;
  border-radius:12px;
  background:var(--surface-3);
  color:var(--text-2)
}

body.app-ui .staff-shift-ico.is-in{
  background:var(--brand-weak);
  color:var(--brand)
}

body.app-ui .staff-shift-text{
  min-width:0;
  flex:1
}

body.app-ui .staff-shift-text strong{
  display:block;
  font-size:14.5px
}

body.app-ui .staff-shift-text span{
  display:block;
  margin-top:2px;
  color:var(--text-3);
  font-size:12.5px
}

body.app-ui .staff-shift-actions{
  display:flex;
  flex:none;
  align-items:center;
  gap:8px
}

body.app-ui .staff-board-main{
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  gap:16px;
  align-items:start
}

body.app-ui .staff-today{
  overflow:hidden
}

body.app-ui .staff-count{
  margin-left:auto;
  padding:3px 10px;
  border-radius:999px;
  background:var(--surface-3);
  color:var(--text-2);
  font-size:12px;
  font-weight:800
}

/* Counters as filters over the list they count. */

body.app-ui .staff-filters{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  padding:12px 14px;
  border-bottom:1px solid var(--border-2);
  background:var(--surface-2)
}

body.app-ui .staff-chip{
  display:inline-flex;
  align-items:center;
  gap:7px;
  height:32px;
  padding:0 11px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--surface);
  color:var(--text-2);
  font-size:12.5px;
  font-weight:650;
  cursor:pointer;
  transition:border-color .12s,background .12s,color .12s
}

body.app-ui .staff-chip span{
  color:var(--text-3);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11.5px;
  font-weight:800
}

body.app-ui .staff-chip:hover{
  border-color:var(--brand);
  color:var(--brand-strong)
}

body.app-ui .staff-chip.is-on{
  border-color:var(--brand);
  background:var(--brand-weak);
  color:var(--brand-strong)
}

body.app-ui .staff-chip.is-on span{
  color:var(--brand-strong)
}

body.app-ui .staff-chip.is-late span{
  color:var(--danger)
}

body.app-ui .staff-chip.is-late.is-on{
  border-color:var(--danger);
  background:var(--danger-weak);
  color:var(--danger)
}

body.app-ui .staff-chip.is-late.is-on span{
  color:var(--danger)
}

/* One row per thing to do. */

body.app-ui .staff-rows{
  display:flex;
  flex-direction:column
}

body.app-ui .staff-row{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border-bottom:1px solid var(--border-2);
  color:inherit;
  text-decoration:none;
  transition:background .12s
}

body.app-ui .staff-row:last-of-type{
  border-bottom:0
}

body.app-ui .staff-row:hover{
  background:var(--surface-2)
}

body.app-ui .staff-row-ico{
  display:grid;
  width:36px;
  height:36px;
  flex:none;
  place-items:center;
  border-radius:10px
}

body.app-ui .staff-row-ico svg{
  width:18px;
  height:18px
}

body.app-ui .staff-row-body{
  min-width:0;
  flex:1
}

body.app-ui .staff-row-title{
  display:block;
  overflow:hidden;
  color:var(--text);
  font-size:13.5px;
  font-weight:700;
  text-overflow:ellipsis;
  white-space:nowrap
}

body.app-ui .staff-row-meta{
  display:block;
  margin-top:2px;
  overflow:hidden;
  color:var(--text-3);
  font-size:12px;
  text-overflow:ellipsis;
  white-space:nowrap
}

body.app-ui .staff-due{
  flex:none;
  padding:3px 10px;
  border-radius:999px;
  background:var(--surface-3);
  color:var(--text-2);
  font-size:11.5px;
  font-weight:750;
  white-space:nowrap
}

body.app-ui .staff-due.is-late{
  background:var(--danger-weak);
  color:var(--danger)
}

body.app-ui .staff-due.is-today{
  background:var(--brand-weak);
  color:var(--brand-strong)
}

body.app-ui .staff-row-go{
  flex:none;
  color:var(--text-3)
}

body.app-ui .staff-empty{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  padding:44px 16px;
  color:var(--text-3);
  text-align:center
}

body.app-ui .staff-empty strong{
  color:var(--text-2);
  font-size:13.5px
}

body.app-ui .staff-empty.is-filtered{
  padding:32px 16px
}

/* display:flex would otherwise beat the hidden attribute the filter toggles. */

body.app-ui .staff-empty[hidden],body.app-ui .staff-row[hidden]{
  display:none
}

/* The column beside the work. */

body.app-ui .staff-side{
  display:grid;
  gap:14px
}

body.app-ui .staff-sales{
  display:block;
  padding:15px 16px;
  color:inherit;
  text-decoration:none
}

body.app-ui .staff-side-label{
  display:block;
  color:var(--text-3);
  font-size:10px;
  font-weight:850;
  letter-spacing:.06em;
  text-transform:uppercase
}

body.app-ui .staff-sales strong{
  display:block;
  margin-top:6px;
  color:var(--text);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:26px;
  font-weight:800;
  letter-spacing:-.02em
}

body.app-ui .staff-side-foot{
  display:block;
  margin-top:4px;
  color:var(--text-3);
  font-size:12px
}

body.app-ui .staff-sales:hover{
  border-color:var(--brand)
}

body.app-ui .staff-notice-list{
  display:grid;
  gap:2px;
  padding:8px
}

body.app-ui .staff-notice{
  display:flex;
  align-items:flex-start;
  gap:9px;
  padding:8px 8px;
  border-radius:9px;
  color:var(--text-2);
  font-size:12.5px
}

body.app-ui .staff-notice svg{
  flex:none;
  margin-top:1px;
  color:var(--text-3)
}

body.app-ui .staff-notice small{
  display:block;
  margin-top:2px;
  color:var(--text-3);
  font-size:11px
}

body.app-ui .staff-quick-list{
  display:grid;
  padding:6px
}

body.app-ui .staff-quick-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 9px;
  border-radius:9px;
  color:var(--text-2);
  font-size:13px;
  font-weight:600;
  text-decoration:none;
  transition:background .12s,color .12s
}

body.app-ui .staff-quick-item:hover{
  background:var(--surface-2);
  color:var(--text)
}

body.app-ui .staff-quick-ico{
  display:grid;
  width:30px;
  height:30px;
  flex:none;
  place-items:center;
  border-radius:8px
}

body.app-ui .staff-quick-ico svg{
  width:16px;
  height:16px
}

@media(max-width:1100px){
  body.app-ui .staff-board-main{
    grid-template-columns:1fr
  }
}

@media(max-width:620px){
  body.app-ui .staff-shift{
    flex-wrap:wrap;
    padding:12px
  }

  body.app-ui .staff-shift-actions{
    width:100%
  }

  /* Clock in takes the row; the way to the attendance sheet is a square beside it, not half
     the width holding one icon. */

  body.app-ui .staff-shift-actions>#sd-clock-btn{
    flex:1;
    justify-content:center
  }

  body.app-ui .staff-shift-actions>a{
    flex:none;
    width:44px;
    justify-content:center;
    padding:0
  }

  body.app-ui .staff-hide-sm{
    display:none
  }

  /* The chips scroll rather than wrap: four of them stacked is most of the screen before a
     single task is visible. */

  body.app-ui .staff-filters{
    overflow-x:auto;
    flex-wrap:nowrap;
    scrollbar-width:none;
    padding:10px 12px
  }

  body.app-ui .staff-filters::-webkit-scrollbar{
    display:none
  }

  body.app-ui .staff-chip{
    flex:none
  }

  /*
   * A task's own name is the whole point of the row, and on a phone it was the first thing cut:
   * "fasfdsaf - c...", "Contact to ...". The chevron goes — the whole row is already the link —
   * and the title is allowed two lines. The due badge sits under the name with the rest of the
   * detail rather than taking width from it.
   */

  body.app-ui .staff-row{
    align-items:flex-start;
    gap:10px;
    padding:11px 12px
  }

  body.app-ui .staff-row-go{
    display:none
  }

  body.app-ui .staff-row-ico{
    width:32px;
    height:32px
  }

  body.app-ui .staff-row-ico svg{
    width:16px;
    height:16px
  }

  body.app-ui .staff-row-title{
    overflow:visible;
    font-size:13.5px;
    line-height:1.35;
    white-space:normal
  }

  body.app-ui .staff-row-meta{
    margin-top:3px;
    overflow:visible;
    white-space:normal
  }

  body.app-ui .staff-due{
    align-self:flex-start;
    margin-top:1px
  }

  body.app-ui .staff-board{
    gap:12px
  }

  body.app-ui .staff-side{
    gap:12px
  }

  body.app-ui .staff-sales strong{
    font-size:23px
  }
}

/* Open Cash Register: one number, asked once at the start of a shift. The amount carries the
   currency in a fixed cap so the figure itself is read as money, the same control the expense
   form uses. */

body.app-ui .register-open-page form{
  display:grid;
  gap:14px
}

body.app-ui .register-open-fields{
  display:grid;
  grid-template-columns:1fr;
  gap:16px
}

body.app-ui .register-open-page .register-money-control{
  display:flex;
  width:100%;
  min-width:0;
  align-items:stretch;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface);
  transition:border-color .15s,box-shadow .15s
}

body.app-ui .register-open-page .register-money-control:focus-within{
  border-color:var(--brand);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 14%,transparent)
}

body.app-ui .register-open-page .register-money-control>span{
  order:-1;
  display:grid;
  width:48px;
  min-width:48px;
  height:46px;
  place-items:center;
  border-right:1px solid var(--border-2);
  background:var(--surface-2);
  color:var(--text-2);
  font-size:13px;
  font-weight:800
}

body.app-ui .register-open-page .register-money-control>.finput{
  width:100%;
  min-width:0;
  height:46px;
  flex:1;
  border:0!important;
  border-radius:0!important;
  background:transparent;
  box-shadow:none!important;
  font-size:17px;
  font-weight:750;
  text-align:right
}

body.app-ui .register-open-empty{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:18px
}

body.app-ui .register-open-empty strong{
  display:block;
  font-size:14px
}

body.app-ui .register-open-empty p{
  margin:4px 0 0;
  color:var(--text-3);
  font-size:12.5px;
  line-height:1.6
}

@media(max-width:620px){
  body.app-ui .register-open-page .register-money-control>.finput{
    font-size:16px
  }
}

body.app-ui .expense-quick-dialog{
  width:min(980px,calc(100vw - 24px));
  margin:34px auto
}

.expense-quick-modal{
  overflow:hidden;
  border:0!important;
  border-radius:16px!important;
  box-shadow:0 24px 70px rgba(16,24,40,.28)
}

.expense-quick-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:15px 18px;
  border-bottom:1px solid var(--border-2)
}

.expense-quick-head>div{
  display:flex;
  align-items:center;
  gap:11px
}

.expense-quick-head>div>span{
  display:grid;
  width:40px;
  height:40px;
  place-items:center;
  border-radius:11px;
  background:var(--brand-weak);
  color:var(--brand)
}

.expense-quick-head strong,.expense-quick-head small{
  display:block
}

.expense-quick-head strong{
  font-size:17px
}

.expense-quick-head small{
  margin-top:2px;
  color:var(--text-3);
  font-size:13px
}

.expense-quick-body{
  display:grid;
  gap:14px;
  padding:18px;
  background:#f8faf9
}

.expense-quick-section{
  padding:16px;
  border:1px solid var(--border);
  border-radius:13px;
  background:var(--surface)
}

.expense-quick-section-head{
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:15px;
  padding-bottom:12px;
  border-bottom:1px solid var(--border-2)
}

.expense-quick-section-head strong,.expense-quick-section-head small{
  display:block
}

.expense-quick-section-head strong{
  font-size:14px
}

.expense-quick-section-head small{
  margin-top:2px;
  color:var(--text-3);
  font-size:12px
}

.expense-quick-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px
}

.expense-quick-payment-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px
}

.expense-quick-due{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:18px;
  margin-top:14px;
  padding:11px 13px;
  border-radius:10px;
  background:var(--surface-2);
  font-size:13px
}

.expense-quick-due strong{
  color:var(--brand);
  font-size:17px
}

.expense-quick-foot{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:9px;
  padding:13px 18px;
  border-top:1px solid var(--border-2);
  background:var(--surface)
}

.expense-quick-foot .btn-ghost,.expense-quick-foot .btn-primary{
  height:42px;
  min-width:118px
}

@media(max-width:820px){
  body.app-ui .expense-quick-grid,body.app-ui .expense-quick-payment-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}

@media(max-width:560px){
  body.app-ui .expense-quick-grid,body.app-ui .expense-quick-payment-grid{
    grid-template-columns:1fr
  }

  .expense-quick-dialog{
    width:calc(100vw - 12px)!important;
    margin:6px auto!important
  }
}

.app-shell .nav-tabs.product-view-tabs{
  display:inline-flex;
  isolation:isolate;
  align-items:center;
  gap:0;
  width:-moz-max-content;
  width:max-content;
  max-width:100%;
  margin:0 0 8px;
  padding:3px;
  border:0;
  border-radius:8px;
  background:color-mix(in srgb,var(--border) 76%,var(--surface-3));
  box-shadow:none
}

.app-shell .nav-tabs.product-view-tabs::before,.app-shell .nav-tabs.product-view-tabs::after{
  display:none
}

.app-shell .nav-tabs.product-view-tabs>li{
  margin:0;
  float:none
}

.app-shell .nav-tabs.product-view-tabs>li>a{
  display:flex;
  min-height:30px;
  align-items:center;
  margin:0;
  padding:6px 10px;
  border:0!important;
  border-radius:6px;
  background:transparent;
  color:var(--text-2);
  font-size:12.5px;
  font-weight:600;
  line-height:1.2;
  outline:none!important;
  box-shadow:none;
  transition:background .15s,color .15s,box-shadow .15s
}

.app-shell .nav-tabs.product-view-tabs>li>a:hover{
  background:color-mix(in srgb,var(--surface) 52%,transparent);
  color:var(--text)
}

.app-shell .nav-tabs.product-view-tabs>li>a:focus-visible{
  box-shadow:0 0 0 2px var(--surface),0 0 0 4px color-mix(in srgb,var(--brand) 28%,transparent)
}

.app-shell .nav-tabs.product-view-tabs>li.active>a,.app-shell .nav-tabs.product-view-tabs>li.active>a:hover,.app-shell .nav-tabs.product-view-tabs>li.active>a:focus{
  border:0!important;
  background:var(--surface);
  color:var(--text);
  font-weight:600;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--border) 72%,transparent),0 1px 2px rgba(16,32,24,.10),0 1px 1px rgba(16,32,24,.06)
}

.app-shell .tab-content.product-tab-content,.app-shell .tab-content.product-tab-content>.tab-pane{
  min-width:0;
  max-width:100%
}

.app-shell .tab-content.product-tab-content{
  overflow:visible;
  padding:0;
  border:0;
  background:transparent
}

.app-shell .product-list-card{
  width:100%;
  min-width:0;
  max-width:100%;
  border:1px solid var(--border)
}

.app-shell .product-table-stage{
  position:relative;
  width:100%;
  min-width:0;
  max-width:100%;
  overflow:hidden
}

.app-shell .product-table-stage>table:not(.dataTable){
  visibility:hidden
}

/* Both product tables — the list and the stock report — are drawn the same way. The header
     row, the cell padding, the zebra and the hover used to be written against #product_table
     inside .product-list-card, so the stock report inherited none of it and drew tall generic
     rows in a card that also padded itself: a table framed twice, next to a tab that isn't. */

.app-shell .product-list-card .dataTables_wrapper,.app-shell .product-list-card .dataTables_scroll,
  .app-shell .product-stock-card .dataTables_wrapper,.app-shell .product-stock-card .dataTables_scroll{
  width:100%!important;
  min-width:0;
  max-width:100%
}

.app-shell .product-list-card .dataTables_scrollBody,
  .app-shell .product-stock-card .dataTables_scrollBody{
  max-width:100%;
  overflow-x:auto!important;
  overflow-y:auto!important
}

.app-shell .product-list-card .dataTables_scroll,
  .app-shell .product-stock-card .dataTables_scroll{
  border-radius:0 0 var(--data-table-radius) var(--data-table-radius)
}

.app-shell .product-list-card .dataTables_scrollHead,
  .app-shell .product-stock-card .dataTables_scrollHead{
  border-bottom:1px solid var(--border-2)!important;
  background:var(--surface-2)
}

.app-shell .product-list-card .dataTables_scrollHeadInner,.app-shell .product-list-card .dataTables_scrollHeadInner table,
  .app-shell .product-stock-card .dataTables_scrollHeadInner,.app-shell .product-stock-card .dataTables_scrollHeadInner table{
  background:var(--surface-2)
}

.app-shell .product-list-card #product_table{
  min-width:var(--product-table-min-width)!important;
  margin:0!important
}

.app-shell .product-stock-card #stock_report_table{
  margin:0!important
}

.app-shell .product-list-card .product-table thead th,.app-shell .product-list-card .dataTables_scrollHead table.dataTable thead th,
  .app-shell .product-stock-card .product-table thead th,.app-shell .product-stock-card .dataTables_scrollHead table.dataTable thead th{
  padding:12px 13px;
  border-bottom:0;
  background:var(--surface-2);
  color:var(--text-3);
  font-size:10px;
  font-weight:750;
  letter-spacing:.35px;
  text-transform:uppercase;
  white-space:nowrap!important;
  vertical-align:middle
}

.app-shell .product-list-card .product-table tbody td,
  .app-shell .product-stock-card .product-table tbody td{
  padding:11px 13px;
  border-bottom:1px solid var(--border-2);
  color:var(--text-2);
  font-size:12px;
  vertical-align:middle
}

.app-shell .product-list-card .product-table tbody tr:nth-child(even),
  .app-shell .product-stock-card .product-table tbody tr:nth-child(even){
  background:var(--surface-2)
}

.app-shell .product-list-card .product-table tbody tr:hover,
  .app-shell .product-stock-card .product-table tbody tr:hover{
  background:color-mix(in srgb,var(--brand-weak) 50%,var(--surface))
}

.app-shell .product-list-card .product-table tbody tr.selected{
  background:color-mix(in srgb,var(--brand-weak) 72%,var(--surface))
}

.app-shell .product-list-card .product-table tbody tr.\!selected{
  background:color-mix(in srgb,var(--brand-weak) 72%,var(--surface)) !important
}

.app-shell .product-list-card #product_table th:first-child,.app-shell .product-list-card #product_table td:first-child{
  width:42px;
  min-width:42px;
  text-align:center
}

.app-shell .product-list-card #product_table th:nth-child(2),.app-shell .product-list-card #product_table td:nth-child(2){
  width:88px;
  min-width:88px;
  text-align:center
}

.app-shell .product-list-card #product_table th:nth-child(3),.app-shell .product-list-card #product_table td:nth-child(3){
  min-width:260px;
  color:var(--text);
  font-weight:650
}

.app-shell .product-list-card .row-select,.app-shell .product-list-card #select-all-row{
  width:16px;
  height:16px;
  margin:0;
  accent-color:var(--brand);
  cursor:pointer
}

.app-shell .product-thumbnail-small{
  display:block;
  width:42px;
  height:42px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface-2);
  -o-object-fit:cover;
     object-fit:cover
}

.app-shell .product-identity{
  display:flex;
  min-width:0;
  align-items:center;
  gap:11px
}

.app-shell .product-identity-image{
  display:block;
  width:42px;
  flex:none
}

.app-shell .product-identity-copy{
  display:block;
  min-width:0;
  line-height:1.35
}

.app-shell .product-identity-copy>strong{
  display:block;
  color:var(--text);
  font-size:12.5px;
  font-weight:750;
  white-space:normal
}

.app-shell .product-identity-copy .label{
  display:inline-flex;
  margin:4px 4px 0 0;
  padding:3px 6px;
  border-radius:999px;
  background:var(--surface-3);
  color:var(--text-3);
  font-size:9.5px;
  font-weight:750;
  line-height:1.2
}

/* A retired product is not a quiet note beside the name — it is the reason the product is not
     turning up on the till. Grey put it on level terms with "not for selling", which is a standing
     property of a product rather than the end of one. */

.app-shell .product-identity-copy .label.product-state-inactive,.app-shell .label.product-state-inactive{
  border-color:color-mix(in srgb,var(--danger) 24%,transparent);
  background:var(--danger-weak);
  color:var(--danger)
}

.app-shell .product-identity>.rack-details{
  flex:none;
  margin:0!important
}

/* Opens the panel listing where this product sits in every branch. It writes its own colours as
     it toggles, so only the things a state change does not touch belong here. */

.app-shell .product-identity>.product-rack-toggle{
  flex:none;
  margin:0!important
}

.app-shell .product-rack-toggle:hover{
  border-color:var(--border-strong,#c7d2cc)!important
}

.app-shell .product-rack-toggle:focus-visible{
  outline:2px solid var(--brand,#159a4d);
  outline-offset:2px
}

/* The row a panel belongs to, and the panel itself, read as one block rather than as a row and
     a loose table under it. */

.app-shell #product_table tr.has-open-racks>td{
  background:var(--surface-2)
}

.app-shell #product_table tr.has-open-racks+tr>td{
  padding-top:0;
  box-shadow:inset 3px 0 0 var(--brand,#159a4d)
}

.app-shell .product-actions-cell{
  position:relative;
  min-width:88px;
  overflow:visible;
  text-align:center;
  white-space:nowrap
}

.app-shell .product-actions-cell:has(.product-action-group.open){
  z-index:190
}

.app-shell .product-actions-cell:has(.product-action-group.\!open){
  z-index:190 !important
}

.app-shell .product-row-actions{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  white-space:nowrap
}

.app-shell .product-row-actions>.act{
  flex:none
}

.app-shell .product-actions-cell>.btn-group{
  float:none
}

.app-shell .product-list-card .btn-group{
  position:relative;
  display:inline-flex;
  vertical-align:top
}

.app-shell .product-action-group .act{
  width:32px;
  min-width:32px;
  height:32px;
  min-height:32px;
  padding:0
}

.app-shell .product-action-group .act svg{
  display:block;
  width:15px;
  height:15px
}

.app-shell .product-action-menu{
  right:auto!important;
  left:0!important
}

.app-shell .product-list-card .dropdown-menu{
  z-index:160;
  min-width:230px;
  margin-top:6px;
  padding:6px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface);
  box-shadow:0 16px 38px -16px rgba(16,32,24,.42)
}

.app-shell .product-list-card .btn-group.dropup>.dropdown-menu{
  top:auto;
  bottom:calc(100% + 6px);
  margin:0
}

.app-shell .product-list-card .dropdown-menu>li>a{
  display:flex;
  min-height:34px;
  align-items:center;
  gap:9px;
  padding:8px 10px;
  border-radius:7px;
  color:var(--text-2);
  font-size:12px;
  font-weight:650;
  line-height:1.3;
  white-space:nowrap
}

.app-shell .product-list-card .dropdown-menu>li>a>i{
  width:16px;
  flex:none;
  color:var(--text-3);
  text-align:center
}

.app-shell .product-list-card .dropdown-menu>li>a>.product-action-icon{
  width:16px;
  height:16px;
  flex:none;
  color:var(--text-3)
}

.app-shell .product-list-card .dropdown-menu>li>a:hover{
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .product-list-card .dropdown-menu>li>a:hover>i,.app-shell .product-list-card .dropdown-menu>li>a:hover>.product-action-icon{
  color:currentColor
}

.app-shell .product-list-card .dropdown-menu>li>a.delete-product{
  color:var(--danger)
}

.app-shell .product-list-card .dropdown-menu>li>a.delete-product:hover{
  background:var(--danger-weak);
  color:var(--danger)
}

.app-shell .product-list-card .dropdown-menu>.divider{
  height:1px;
  margin:5px 2px;
  background:var(--border-2)
}

.app-shell .product-list-card .product-telegram-menu-item>a{
  color:var(--blue)
}

.app-shell .product-list-card .product-telegram-menu-item>a:hover{
  background:var(--blue-weak);
  color:var(--blue)
}

.app-shell .telegram-recipient-option{
  display:flex;
  min-width:0;
  align-items:center;
  gap:10px;
  padding:11px;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface);
  color:var(--text-2);
  cursor:pointer;
  transition:border-color .15s,background .15s,color .15s,box-shadow .15s
}

.app-shell .telegram-recipient-option:hover{
  border-color:color-mix(in srgb,var(--blue) 38%,var(--border));
  color:var(--text)
}

.app-shell .telegram-recipient-option:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 18%,transparent)
}

.app-shell .telegram-recipient-option-icon{
  display:flex;
  width:32px;
  height:32px;
  flex:none;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  background:var(--surface-3);
  color:var(--text-3)
}

.app-shell .telegram-recipient-option.is-on{
  border-color:color-mix(in srgb,var(--blue) 55%,var(--border));
  background:var(--blue-weak);
  color:var(--blue);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--blue) 10%,transparent)
}

.app-shell .telegram-recipient-option.is-on .telegram-recipient-option-icon{
  background:var(--blue);
  color:#fff
}

.app-shell .product-bulk-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border-bottom:1px solid color-mix(in srgb,var(--brand) 20%,var(--border));
  background:var(--brand-weak)
}

.app-shell .product-bulk-bar[hidden],.app-shell .product-bulk-bar.hidden{
  display:none!important
}

.app-shell .product-bulk-summary{
  display:flex;
  align-items:center;
  gap:9px;
  color:var(--brand-strong);
  font-size:12px;
  font-weight:650;
  white-space:nowrap
}

.app-shell .product-bulk-summary strong{
  font-size:14px;
  font-weight:850
}

.app-shell .product-bulk-summary-icon{
  display:inline-flex;
  width:30px;
  height:30px;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  background:var(--surface);
  color:var(--brand-strong);
  box-shadow:0 1px 2px rgba(16,32,24,.08)
}

.app-shell .product-bulk-controls{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  flex-wrap:wrap
}

.app-shell .product-bulk-controls form{
  display:inline-flex;
  margin:0
}

.app-shell .product-bulk-button{
  display:inline-flex;
  min-height:34px;
  align-items:center;
  justify-content:center;
  gap:6px;
  margin:0;
  padding:0 10px;
  border:1px solid color-mix(in srgb,var(--brand) 30%,var(--border));
  border-radius:8px;
  background:var(--surface);
  color:var(--brand-strong);
  font:inherit;
  font-size:11px;
  font-weight:750;
  line-height:1.2;
  cursor:pointer;
  transition:border-color .15s,background .15s,color .15s
}

.app-shell .product-bulk-button:hover{
  border-color:var(--brand);
  background:var(--brand);
  color:#fff
}

.app-shell .product-bulk-button-warning{
  border-color:color-mix(in srgb,var(--warning) 38%,var(--border));
  color:#a85c00
}

.app-shell .product-bulk-button-warning:hover{
  border-color:var(--warning);
  background:var(--warning);
  color:#fff
}

.app-shell .product-bulk-button-danger{
  border-color:color-mix(in srgb,var(--danger) 42%,var(--border));
  color:var(--danger)
}

.app-shell .product-bulk-button-danger:hover{
  border-color:var(--danger);
  background:var(--danger);
  color:#fff
}

/* The card is the frame. It padded itself as well, which drew a band of surface around the
     table that the All Products tab beside it does not have. */

.app-shell .product-stock-card{
  width:100%;
  min-width:0;
  max-width:100%;
  border:1px solid var(--border);
  box-shadow:var(--shadow-md)
}

.app-shell .product-stock-card .dataTables_scrollHead table.dataTable thead th{
  border-bottom:0
}

/* The report's own footer totals read as a row of the table rather than a summary of it. */

.app-shell .product-stock-card #stock_report_table tfoot td{
  padding:12px 13px;
  border-top:1px solid var(--border);
  background:var(--surface-2);
  color:var(--text);
  font-size:12px;
  font-weight:750
}

/* The two in-row buttons set the row height, and at full button size the report stood a third
     taller per row than the list beside it. Compact, and the history icon sized with its label. */

.app-shell .product-stock-card .product-table tbody .btn-ghost.btn-sm,
  .app-shell .product-stock-card .product-table tbody .btn-primary.btn-sm{
  min-height:30px;
  padding:0 9px;
  font-size:11px;
  font-weight:700;
  white-space:nowrap
}

.app-shell .product-stock-card .stock-report-history{
  display:inline-flex;
  align-items:center;
  gap:6px
}

.app-shell .product-stock-card .stock-report-history svg{
  width:14px;
  height:14px;
  flex:none;
  color:var(--text-3)
}

.app-shell .product-stock-card .stock-report-history:hover svg{
  color:currentColor
}

@media (max-width:899.98px){
  .app-shell .product-filter-options{
    min-height:auto;
    align-items:stretch
  }

  .app-shell .product-bulk-bar{
    align-items:flex-start;
    flex-direction:column
  }

  .app-shell .product-bulk-controls{
    justify-content:flex-start
  }
}

/* Shared Suppliers / Customers listing. */

.app-shell .contact-filter-toggle{
  min-height:42px;
  margin:0;
  padding:9px 12px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface-2);
  color:var(--text-2);
  font-size:12.5px;
  font-weight:650;
  display:flex;
  align-items:center;
  gap:9px;
  cursor:pointer;
  transition:border-color .15s,background .15s,color .15s,box-shadow .15s
}

.app-shell .contact-filter-toggle:hover{
  border-color:color-mix(in srgb,var(--brand) 42%,var(--border));
  background:var(--surface);
  color:var(--text)
}

.app-shell .contact-filter-toggle:has(input:checked),.app-shell .contact-filter-toggle:has(.checked){
  border-color:color-mix(in srgb,var(--brand) 55%,var(--border));
  background:var(--brand-weak);
  color:var(--brand-strong);
  box-shadow:0 0 0 3px rgba(21,154,77,.07)
}

.app-shell .contact-filter-toggle .icheckbox_square-blue{
  flex:none;
  margin:0
}

.app-shell .contact-list-card .contact-table-stage{
  overflow:visible
}

.app-shell .contact-list-card .dataTables_scroll{
  border-radius:0 0 var(--data-table-radius) var(--data-table-radius)
}

.app-shell .contact-list-card .dataTables_scrollHead{
  border-bottom:1px solid var(--border-2)!important;
  background:var(--surface-2)
}

.app-shell .contact-list-card .dataTables_scrollHeadInner,.app-shell .contact-list-card .dataTables_scrollHeadInner table{
  background:var(--surface-2)
}

.app-shell .contact-list-card #contact_table{
  min-width:2200px!important;
  margin:0!important
}

.app-shell .contact-list-card #contact_table thead th,
  .app-shell .contact-list-card .dataTables_scrollHead table.dataTable thead th{
  min-width:-moz-max-content;
  min-width:max-content;
  padding:13px 14px;
  background:var(--surface-2);
  color:var(--text-3);
  font-size:10.5px;
  font-weight:750;
  letter-spacing:.35px;
  text-transform:uppercase;
  white-space:nowrap!important
}

.app-shell .contact-list-card #contact_table tbody td{
  padding:13px 14px;
  border-bottom:1px solid var(--border-2);
  color:var(--text-2);
  font-size:12.5px;
  vertical-align:middle
}

.app-shell .contact-list-card #contact_table tbody tr:nth-child(even){
  background:var(--surface-2)
}

.app-shell .contact-list-card #contact_table tbody tr:hover{
  background:color-mix(in srgb,var(--brand-weak) 50%,var(--surface))
}

.app-shell .contact-list-card #contact_table tfoot td{
  padding:13px 14px;
  border-top:1px solid var(--border);
  background:var(--surface-2);
  font-size:12px
}

.app-shell .contact-list-card .contact-action-column{
  min-width:82px
}

.app-shell .contact-list-card #contact_table tbody td:first-child{
  position:relative;
  overflow:visible
}

.app-shell .contact-list-card #contact_table tbody td:first-child:has(.contact-action-group.open){
  z-index:180
}

.app-shell .contact-list-card #contact_table tbody td:first-child:has(.contact-action-group.\!open){
  z-index:180 !important
}

.app-shell .contact-row-actions{
  display:flex;
  align-items:center;
  gap:6px;
  white-space:nowrap
}

/* Merged customer cells: who the customer is, what they owe, who opened them.
     Six columns of identity and five of money became one cell each, so each cell stacks its
     facts — the name (or figure) that leads, and the quiet lines underneath. */

.app-shell .contact-list-card .contact-meta{
  display:flex;
  min-width:150px;
  flex-direction:column;
  gap:2px
}

.app-shell .contact-list-card .contact-meta__primary{
  color:var(--text);
  font-size:12.5px;
  font-weight:750;
  line-height:1.35
}

.app-shell .contact-list-card .contact-meta__secondary{
  color:var(--text-2);
  font-size:11.5px;
  font-weight:650;
  line-height:1.35
}

.app-shell .contact-list-card .contact-meta__line{
  color:var(--text-2);
  font-size:11.5px;
  font-weight:600;
  line-height:1.4
}

.app-shell .contact-list-card .contact-meta__muted{
  color:var(--text-3);
  font-size:11px;
  font-weight:600;
  line-height:1.4
}

.app-shell .contact-list-card .contact-meta__address{
  white-space:normal;
  max-width:240px
}

.app-shell .contact-list-card .contact-meta__telegram{
  margin-top:3px
}

.app-shell .contact-list-card .contact-financials{
  display:flex;
  min-width:170px;
  flex-direction:column;
  gap:3px
}

.app-shell .contact-list-card .contact-financials__row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:14px;
  white-space:nowrap
}

.app-shell .contact-list-card .contact-financials__label{
  color:var(--text-3);
  font-size:10px;
  font-weight:700;
  letter-spacing:.25px;
  text-transform:uppercase
}

.app-shell .contact-list-card .contact-financials__value{
  color:var(--text);
  font-size:12px;
  font-weight:700
}

/* Reusable compact row action dropdown. */

.app-shell .table-action-group{
  position:relative
}

.app-shell .table-action-group .act{
  outline:none;
  transition:border-color .15s,background .15s,color .15s,box-shadow .15s
}

.app-shell .table-action-group.open .act{
  border-color:var(--brand);
  background:var(--brand-weak);
  color:var(--brand-strong);
  box-shadow:0 0 0 3px rgba(21,154,77,.1)
}

.app-shell .table-action-group.\!open .act{
  border-color:var(--brand) !important;
  background:var(--brand-weak) !important;
  color:var(--brand-strong) !important;
  box-shadow:0 0 0 3px rgba(21,154,77,.1) !important
}

.app-shell .table-action-group .act:focus-visible{
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(21,154,77,.14)
}

body.app-ui .table-action-menu{
  top:calc(100% + 6px);
  left:0;
  z-index:130;
  min-width:210px;
  margin:0;
  padding:6px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface);
  box-shadow:0 16px 38px -16px rgba(16,32,24,.42)
}

body.app-ui .table-action-menu>li>a,body.app-ui .table-action-menu>li>button{
  display:flex;
  min-height:35px;
  align-items:center;
  gap:9px;
  padding:8px 10px;
  border:0;
  border-radius:7px;
  background:transparent;
  color:var(--text-2);
  font:inherit;
  font-size:12.5px;
  font-weight:650;
  line-height:1.35;
  text-align:left;
  white-space:nowrap
}

body.app-ui .table-action-menu>li>a>i,body.app-ui .table-action-menu>li>button>i,body.app-ui .table-action-menu .table-action-icon{
  width:16px;
  height:16px;
  flex:none;
  color:var(--text-3);
  text-align:center
}

body.app-ui .table-action-menu>li>a:hover,body.app-ui .table-action-menu>li>button:hover{
  background:var(--brand-weak);
  color:var(--brand-strong)
}

/* On a phone the menu was a full-height column of 15px rows — it filled the screen and its
     top ran off it. Compact rows, a hard viewport cap, and it scrolls inside itself. */

@media(max-width:700px){
  body.app-ui .table-action-menu{
    min-width:176px;
    max-width:calc(100vw - 16px);
    max-height:min(62vh,460px);
    padding:4px;
    overflow-y:auto
  }

  body.app-ui .table-action-menu>li>a,body.app-ui .table-action-menu>li>button{
    min-height:30px;
    gap:7px;
    padding:6px 9px;
    font-size:12px
  }

  body.app-ui .table-action-menu>li>a>svg,body.app-ui .table-action-menu>li>button>svg,body.app-ui .table-action-menu .table-action-icon{
    width:14px;
    height:14px
  }

  body.app-ui .table-action-menu .divider{
    margin:3px 0
  }

  /* The repair invoice menu styles its items under its own heavier selector, which outranked
       the compact rules above and kept ITS menu at full desktop size on a phone. */

  .app-shell .repair-invoice-row-actions .table-action-menu>li>a.invoice-menu-button{
    min-height:30px;
    gap:7px;
    padding:6px 9px;
    font-size:12px
  }

  .app-shell .repair-invoice-row-actions .invoice-menu-icon{
    width:14px;
    height:14px
  }

  /* The belt: by its Bootstrap class and with !important, so the phone gets a compact,
       screen-capped menu whatever era of markup the server is serving. */

  body.app-ui .repair-invoice-row-actions .dropdown-menu,
    body.app-ui .table-action-group .dropdown-menu{
    min-width:176px!important;
    max-width:calc(100vw - 16px)!important;
    max-height:min(62vh,460px)!important;
    padding:4px!important;
    overflow-y:auto!important
  }

  body.app-ui .repair-invoice-row-actions .dropdown-menu>li>a,
    body.app-ui .table-action-group .dropdown-menu>li>a{
    min-height:30px!important;
    gap:7px!important;
    padding:6px 9px!important;
    font-size:12px!important
  }

  body.app-ui .repair-invoice-row-actions .dropdown-menu>li>a svg,
    body.app-ui .table-action-group .dropdown-menu>li>a svg{
    width:14px!important;
    height:14px!important
  }

  /* On a phone the open menu is a bottom sheet: fixed just above the thumb, centred, always
       entirely on screen. !important beats the inline top/left the positioning script writes —
       whatever coordinates any era of that script computes, the phone ignores them. A finger
       does not need the menu glued to a 24px button; it needs it reachable and whole. */

  body.app-ui .table-action-group.open>.dropdown-menu,
    body.app-ui .table-action-portal .table-action-group>.dropdown-menu{
    position:fixed!important;
    top:auto!important;
    bottom:14px!important;
    left:50%!important;
    right:auto!important;
    width:min(320px,calc(100vw - 24px))!important;
    transform:translateX(-50%)!important;
    margin:0!important;
    box-shadow:0 -8px 40px rgba(16,32,24,.28),0 18px 44px -18px rgba(16,32,24,.45)!important
  }

  {
    min-width:176px !important;
    max-width:calc(100vw - 16px) !important;
    max-height:min(62vh,460px) !important;
    padding:4px !important;
    overflow-y:auto !important;
    min-height:30px !important;
    gap:7px !important;
    padding:6px 9px !important;
    font-size:12px !important;
    width:14px !important;
    height:14px !important;
    margin:3px 0 !important
  }

  /* The repair invoice menu styles its items under its own heavier selector, which outranked
       the compact rules above and kept ITS menu at full desktop size on a phone. */

  {
    min-height:30px !important;
    gap:7px !important;
    padding:6px 9px !important;
    font-size:12px !important;
    width:14px !important;
    height:14px !important
  }

  /* The belt: by its Bootstrap class and with !important, so the phone gets a compact,
       screen-capped menu whatever era of markup the server is serving. */

  {
    min-width:176px!important;
    max-width:calc(100vw - 16px)!important;
    max-height:min(62vh,460px)!important;
    padding:4px!important;
    overflow-y:auto!important;
    min-height:30px!important;
    gap:7px!important;
    padding:6px 9px!important;
    font-size:12px!important;
    width:14px!important;
    height:14px!important
  }

  /* On a phone the open menu is a bottom sheet: fixed just above the thumb, centred, always
       entirely on screen. !important beats the inline top/left the positioning script writes —
       whatever coordinates any era of that script computes, the phone ignores them. A finger
       does not need the menu glued to a 24px button; it needs it reachable and whole. */

  body.app-ui .table-action-group.\!open>.dropdown-menu{
    position:fixed!important;
    top:auto!important;
    bottom:14px!important;
    left:50%!important;
    right:auto!important;
    width:min(320px,calc(100vw - 24px))!important;
    transform:translateX(-50%)!important;
    margin:0!important;
    box-shadow:0 -8px 40px rgba(16,32,24,.28),0 18px 44px -18px rgba(16,32,24,.45)!important
  }
}

/* Touch screens hold :hover after a tap, and the bottom sheet opens under the fingertip —
     so whichever item landed beneath the tap looked pre-selected. Hover tinting is for
     pointers that hover; a finger gets its feedback from :active while pressing. */

@media (hover:none){
  body.app-ui .table-action-menu>li>a:hover,body.app-ui .table-action-menu>li>button:hover,
    .app-shell .repair-invoice-row-actions .table-action-menu>li>a.invoice-menu-button:hover,
    body.app-ui .table-action-group .dropdown-menu>li>a:hover{
    background:transparent;
    color:var(--text-2)
  }

  .app-shell .repair-invoice-row-actions .table-action-menu>li>a.invoice-menu-button--danger:hover{
    background:transparent;
    color:var(--danger)
  }

  body.app-ui .table-action-menu>li>a:active,body.app-ui .table-action-menu>li>button:active,
    body.app-ui .table-action-group .dropdown-menu>li>a:active{
    background:var(--brand-weak);
    color:var(--brand-strong)
  }
}

/* An icon in a row menu, sized by its own class rather than by where it happens to sit.
   These were sized only under .product-list-card, and the menu is moved out of that card when
   it opens — so the svgs fell back to their natural size and the menu became a column of
   hundred-pixel pictograms. */

body.app-ui .table-action-menu>li>a>svg,
body.app-ui .table-action-menu>li>button>svg,
body.app-ui .table-action-menu .product-action-icon,
body.app-ui .table-action-menu .table-action-icon,
body.app-ui .product-action-icon{
  width:16px;
  height:16px;
  min-width:16px;
  flex:none;
  color:var(--text-3)
}

body.app-ui .table-action-menu>li>a:hover>svg,
body.app-ui .table-action-menu>li>button:hover>svg{
  color:currentColor
}

body.app-ui .table-action-menu>li>a:hover>i,body.app-ui .table-action-menu>li>button:hover>i,body.app-ui .table-action-menu>li>a:hover>.table-action-icon,body.app-ui .table-action-menu>li>button:hover>.table-action-icon{
  color:currentColor
}

body.app-ui .table-action-menu>li>.table-action-delete{
  color:var(--danger)
}

body.app-ui .table-action-menu>li>.table-action-delete:hover{
  background:var(--danger-weak);
  color:var(--danger)
}

body.app-ui .table-action-menu>.divider{
  height:1px;
  min-height:1px;
  margin:5px 2px;
  background:var(--border-2)
}

.app-shell .contact-list-card #contact_table .table-action-group .act{
  width:32px;
  min-width:32px;
  height:32px;
  min-height:32px;
  padding:0
}

.app-shell .contact-list-card .contact-action-menu{
  right:auto!important;
  left:0!important
}

/* Users listing action menu. */

.app-shell .user-action-group{
  position:relative
}

.app-shell .user-action-group .act{
  outline:none;
  transition:border-color .15s,background .15s,color .15s,box-shadow .15s
}

.app-shell .user-action-group.open .act{
  border-color:var(--brand);
  background:var(--brand-weak);
  color:var(--brand-strong);
  box-shadow:0 0 0 3px rgba(21,154,77,.1)
}

.app-shell .user-action-group.\!open .act{
  border-color:var(--brand) !important;
  background:var(--brand-weak) !important;
  color:var(--brand-strong) !important;
  box-shadow:0 0 0 3px rgba(21,154,77,.1) !important
}

.app-shell .user-action-group .act:focus-visible{
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(21,154,77,.14)
}

.app-shell .user-action-menu{
  top:calc(100% + 6px);
  right:0;
  left:auto;
  z-index:110;
  min-width:176px;
  margin:0;
  padding:6px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface);
  box-shadow:0 16px 38px -16px rgba(16,32,24,.42)
}

.app-shell .user-action-menu>li>a,.app-shell .user-action-menu>li>button{
  display:flex;
  min-height:34px;
  align-items:center;
  padding:8px 10px;
  border-radius:7px;
  color:var(--text-2);
  font-size:12.5px;
  font-weight:650;
  line-height:1.35;
  white-space:nowrap
}

.app-shell .user-action-menu>li>a:hover,.app-shell .user-action-menu>li>button:hover{
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .user-action-menu>li>.user-action-delete{
  color:var(--danger)
}

.app-shell .user-action-menu>li>.user-action-delete:hover{
  background:var(--danger-weak);
  color:var(--danger)
}

.app-shell #users_table tbody tr:last-child .user-action-menu{
  top:auto;
  bottom:calc(100% + 6px)
}

/* form */

.app-shell .sec-ico{
  width:36px;
  height:36px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:none
}

.app-shell .sec-head{
  display:flex;
  align-items:center;
  gap:12px;
  padding:18px 22px;
  border-bottom:1px solid var(--border)
}

.app-shell .flabel{
  display:block;
  font-size:12.5px;
  font-weight:600;
  color:var(--text-2);
  margin-bottom:7px
}

.app-shell .finput{
  width:100%;
  height:42px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--surface-2);
  padding:0 13px;
  font:inherit;
  font-size:13.5px;
  color:var(--text);
  outline:none
}

.app-shell .finput:focus{
  border-color:var(--brand);
  background:var(--surface)
}

.app-shell .check{
  width:20px;
  height:20px;
  border-radius:6px;
  border:1.5px solid var(--border);
  flex:none;
  display:flex;
  align-items:center;
  justify-content:center
}

.app-shell .check.on{
  background:var(--brand);
  border-color:var(--brand);
  color:#fff
}

.app-shell .req{
  color:var(--danger)
}

/* tab bar — <x-tab-nav>, for a page holding more than one form */

.app-shell .tab-nav{
  display:flex;
  gap:4px;
  align-items:center;
  margin-bottom:16px;
  padding:4px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface-2);
  overflow-x:auto
}

.app-shell .tab-nav-item{
  display:inline-flex;
  flex:none;
  align-items:center;
  gap:7px;
  height:36px;
  padding:0 14px;
  border:0;
  border-radius:9px;
  background:transparent;
  color:var(--text-2);
  font:inherit;
  font-size:12.5px;
  font-weight:700;
  white-space:nowrap;
  cursor:pointer;
  transition:background .13s,color .13s
}

.app-shell .tab-nav-item:hover{
  background:var(--surface-3);
  color:var(--text)
}

.app-shell .tab-nav-item.is-active{
  background:var(--surface);
  color:var(--brand-strong);
  box-shadow:var(--shadow-sm)
}

.app-shell .tab-nav-item:focus-visible{
  outline:2px solid color-mix(in srgb,var(--brand) 45%,transparent);
  outline-offset:1px
}

.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;
}

.\!visible {
  visibility: visible !important;
}

.visible {
  visibility: visible;
}

.invisible {
  visibility: hidden;
}

.collapse {
  visibility: collapse;
}

.static {
  position: static;
}

.fixed {
  position: fixed;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.sticky {
  position: sticky;
}

.inset-0 {
  inset: 0px;
}

.inset-y-0 {
  top: 0px;
  bottom: 0px;
}

.-bottom-px {
  bottom: -1px;
}

.-right-px {
  right: -1px;
}

.bottom-\[-12px\] {
  bottom: -12px;
}

.bottom-\[calc\(100\%\+8px\)\] {
  bottom: calc(100% + 8px);
}

.bottom-full {
  bottom: 100%;
}

.left-3 {
  left: 0.75rem;
}

.left-3\.5 {
  left: 0.875rem;
}

.left-4 {
  left: 1rem;
}

.left-\[11px\] {
  left: 11px;
}

.right-0 {
  right: 0px;
}

.right-0\.5 {
  right: 0.125rem;
}

.right-1 {
  right: 0.25rem;
}

.right-3 {
  right: 0.75rem;
}

.right-4 {
  right: 1rem;
}

.right-5 {
  right: 1.25rem;
}

.top-0 {
  top: 0px;
}

.top-0\.5 {
  top: 0.125rem;
}

.top-1 {
  top: 0.25rem;
}

.top-1\/2 {
  top: 50%;
}

.top-2 {
  top: 0.5rem;
}

.top-5 {
  top: 1.25rem;
}

.top-8 {
  top: 2rem;
}

.top-full {
  top: 100%;
}

.isolate {
  isolation: isolate;
}

.z-10 {
  z-index: 10;
}

.z-30 {
  z-index: 30;
}

.z-40 {
  z-index: 40;
}

.col-span-full {
  grid-column: 1 / -1;
}

.\!m-0 {
  margin: 0px !important;
}

.m-0 {
  margin: 0px;
}

.m-4 {
  margin: 1rem;
}

.m-5 {
  margin: 1.25rem;
}

.m-6 {
  margin: 1.5rem;
}

.m-8 {
  margin: 2rem;
}

.-mx-4 {
  margin-left: -1rem;
  margin-right: -1rem;
}

.-my-2 {
  margin-top: -0.5rem;
  margin-bottom: -0.5rem;
}

.mx-2 {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

.mx-4 {
  margin-left: 1rem;
  margin-right: 1rem;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.my-2 {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

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

.mb-0 {
  margin-bottom: 0px;
}

.mb-1 {
  margin-bottom: 0.25rem;
}

.mb-1\.5 {
  margin-bottom: 0.375rem;
}

.mb-10 {
  margin-bottom: 2.5rem;
}

.mb-12 {
  margin-bottom: 3rem;
}

.mb-2 {
  margin-bottom: 0.5rem;
}

.mb-3 {
  margin-bottom: 0.75rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mb-5 {
  margin-bottom: 1.25rem;
}

.ml-1 {
  margin-left: 0.25rem;
}

.ml-4 {
  margin-left: 1rem;
}

.ml-auto {
  margin-left: auto;
}

.mr-2 {
  margin-right: 0.5rem;
}

.mr-3 {
  margin-right: 0.75rem;
}

.mr-8 {
  margin-right: 2rem;
}

.mt-0 {
  margin-top: 0px;
}

.mt-0\.5 {
  margin-top: 0.125rem;
}

.mt-1 {
  margin-top: 0.25rem;
}

.mt-1\.5 {
  margin-top: 0.375rem;
}

.mt-10 {
  margin-top: 2.5rem;
}

.mt-2 {
  margin-top: 0.5rem;
}

.mt-20 {
  margin-top: 5rem;
}

.mt-3 {
  margin-top: 0.75rem;
}

.mt-4 {
  margin-top: 1rem;
}

.mt-5 {
  margin-top: 1.25rem;
}

.mt-6 {
  margin-top: 1.5rem;
}

.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.inline {
  display: inline;
}

.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

.\!table {
  display: table !important;
}

.table {
  display: table;
}

.flow-root {
  display: flow-root;
}

.grid {
  display: grid;
}

.contents {
  display: contents;
}

.hidden {
  display: none;
}

.aspect-square {
  aspect-ratio: 1 / 1;
}

.size-3 {
  width: 0.75rem;
  height: 0.75rem;
}

.size-3\.5 {
  width: 0.875rem;
  height: 0.875rem;
}

.size-4 {
  width: 1rem;
  height: 1rem;
}

.size-5 {
  width: 1.25rem;
  height: 1.25rem;
}

.size-6 {
  width: 1.5rem;
  height: 1.5rem;
}

.size-8 {
  width: 2rem;
  height: 2rem;
}

.h-10 {
  height: 2.5rem;
}

.h-11 {
  height: 2.75rem;
}

.h-12 {
  height: 3rem;
}

.h-14 {
  height: 3.5rem;
}

.h-2 {
  height: 0.5rem;
}

.h-3 {
  height: 0.75rem;
}

.h-3\.5 {
  height: 0.875rem;
}

.h-4 {
  height: 1rem;
}

.h-5 {
  height: 1.25rem;
}

.h-6 {
  height: 1.5rem;
}

.h-7 {
  height: 1.75rem;
}

.h-8 {
  height: 2rem;
}

.h-9 {
  height: 2.25rem;
}

.h-\[11px\] {
  height: 11px;
}

.h-\[13px\] {
  height: 13px;
}

.h-\[14px\] {
  height: 14px;
}

.h-\[15px\] {
  height: 15px;
}

.h-\[17px\] {
  height: 17px;
}

.h-\[18px\] {
  height: 18px;
}

.h-\[19px\] {
  height: 19px;
}

.h-\[20px\] {
  height: 20px;
}

.h-\[22px\] {
  height: 22px;
}

.h-\[30px\] {
  height: 30px;
}

.h-\[34px\] {
  height: 34px;
}

.h-\[42px\] {
  height: 42px;
}

.h-\[66px\] {
  height: 66px;
}

.h-full {
  height: 100%;
}

.h-px {
  height: 1px;
}

.h-screen {
  height: 100vh;
}

.max-h-\[70vh\] {
  max-height: 70vh;
}

.max-h-\[calc\(100vh-190px\)\] {
  max-height: calc(100vh - 190px);
}

.min-h-\[190px\] {
  min-height: 190px;
}

.min-h-\[260px\] {
  min-height: 260px;
}

.min-h-\[4\.5rem\] {
  min-height: 4.5rem;
}

.min-h-\[42px\] {
  min-height: 42px;
}

.min-h-\[68px\] {
  min-height: 68px;
}

.min-h-\[72px\] {
  min-height: 72px;
}

.\!w-\[min\(1280px\2c calc\(100vw-24px\)\)\] {
  width: min(1280px,calc(100vw - 24px)) !important;
}

.\!w-\[min\(560px\2c calc\(100vw-24px\)\)\] {
  width: min(560px,calc(100vw - 24px)) !important;
}

.\!w-\[min\(640px\2c calc\(100vw-24px\)\)\] {
  width: min(640px,calc(100vw - 24px)) !important;
}

.\!w-\[min\(680px\2c calc\(100vw-24px\)\)\] {
  width: min(680px,calc(100vw - 24px)) !important;
}

.\!w-\[min\(900px\2c calc\(100vw-24px\)\)\] {
  width: min(900px,calc(100vw - 24px)) !important;
}

.w-10 {
  width: 2.5rem;
}

.w-11 {
  width: 2.75rem;
}

.w-12 {
  width: 3rem;
}

.w-14 {
  width: 3.5rem;
}

.w-16 {
  width: 4rem;
}

.w-20 {
  width: 5rem;
}

.w-24 {
  width: 6rem;
}

.w-3 {
  width: 0.75rem;
}

.w-3\.5 {
  width: 0.875rem;
}

.w-32 {
  width: 8rem;
}

.w-4 {
  width: 1rem;
}

.w-44 {
  width: 11rem;
}

.w-48 {
  width: 12rem;
}

.w-5 {
  width: 1.25rem;
}

.w-6 {
  width: 1.5rem;
}

.w-7 {
  width: 1.75rem;
}

.w-8 {
  width: 2rem;
}

.w-9 {
  width: 2.25rem;
}

.w-\[110px\] {
  width: 110px;
}

.w-\[11px\] {
  width: 11px;
}

.w-\[13px\] {
  width: 13px;
}

.w-\[14px\] {
  width: 14px;
}

.w-\[150px\] {
  width: 150px;
}

.w-\[15px\] {
  width: 15px;
}

.w-\[170px\] {
  width: 170px;
}

.w-\[17px\] {
  width: 17px;
}

.w-\[18px\] {
  width: 18px;
}

.w-\[19px\] {
  width: 19px;
}

.w-\[20px\] {
  width: 20px;
}

.w-\[22px\] {
  width: 22px;
}

.w-\[230px\] {
  width: 230px;
}

.w-\[250px\] {
  width: 250px;
}

.w-\[310px\] {
  width: 310px;
}

.w-\[34px\] {
  width: 34px;
}

.w-\[42px\] {
  width: 42px;
}

.w-\[calc\(100\%-2rem\)\] {
  width: calc(100% - 2rem);
}

.w-full {
  width: 100%;
}

.w-px {
  width: 1px;
}

.min-w-0 {
  min-width: 0px;
}

.min-w-24 {
  min-width: 6rem;
}

.min-w-\[1120px\] {
  min-width: 1120px;
}

.min-w-\[112px\] {
  min-width: 112px;
}

.min-w-\[13rem\] {
  min-width: 13rem;
}

.min-w-\[174px\] {
  min-width: 174px;
}

.min-w-\[180px\] {
  min-width: 180px;
}

.min-w-\[620px\] {
  min-width: 620px;
}

.min-w-\[680px\] {
  min-width: 680px;
}

.min-w-\[760px\] {
  min-width: 760px;
}

.min-w-\[820px\] {
  min-width: 820px;
}

.min-w-\[860px\] {
  min-width: 860px;
}

.min-w-\[88px\] {
  min-width: 88px;
}

.min-w-\[900px\] {
  min-width: 900px;
}

.min-w-full {
  min-width: 100%;
}

.\!max-w-none {
  max-width: none !important;
}

.max-w-3xl {
  max-width: 48rem;
}

.max-w-\[1180px\] {
  max-width: 1180px;
}

.max-w-\[1200px\] {
  max-width: 1200px;
}

.max-w-\[1220px\] {
  max-width: 1220px;
}

.max-w-\[1320px\] {
  max-width: 1320px;
}

.max-w-\[1480px\] {
  max-width: 1480px;
}

.max-w-\[300px\] {
  max-width: 300px;
}

.max-w-\[440px\] {
  max-width: 440px;
}

.max-w-\[720px\] {
  max-width: 720px;
}

.max-w-\[calc\(100vw-48px\)\] {
  max-width: calc(100vw - 48px);
}

.max-w-full {
  max-width: 100%;
}

.max-w-md {
  max-width: 28rem;
}

.max-w-xl {
  max-width: 36rem;
}

.flex-1 {
  flex: 1 1 0%;
}

.flex-shrink {
  flex-shrink: 1;
}

.shrink {
  flex-shrink: 1;
}

.shrink-0 {
  flex-shrink: 0;
}

.flex-grow {
  flex-grow: 1;
}

.grow {
  flex-grow: 1;
}

.border-collapse {
  border-collapse: collapse;
}

.border-separate {
  border-collapse: separate;
}

.border-spacing-0 {
  --tw-border-spacing-x: 0px;
  --tw-border-spacing-y: 0px;
  border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
}

.-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));
}

.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));
}

.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 spin {
  to {
    transform: rotate(360deg);
  }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

.cursor-pointer {
  cursor: pointer;
}

.select-all {
  -webkit-user-select: all;
     -moz-user-select: all;
          user-select: all;
}

.resize-y {
  resize: vertical;
}

.resize {
  resize: both;
}

.list-none {
  list-style-type: none;
}

.columns-3 {
  -moz-columns: 3;
       columns: 3;
}

.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-\[minmax\(0\2c 1fr\)_130px\] {
  grid-template-columns: minmax(0,1fr) 130px;
}

.grid-cols-\[minmax\(0\2c 1fr\)_140px\] {
  grid-template-columns: minmax(0,1fr) 140px;
}

.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 !important;
}

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.gap-1 {
  gap: 0.25rem;
}

.gap-1\.5 {
  gap: 0.375rem;
}

.gap-2 {
  gap: 0.5rem;
}

.gap-2\.5 {
  gap: 0.625rem;
}

.gap-3 {
  gap: 0.75rem;
}

.gap-4 {
  gap: 1rem;
}

.gap-5 {
  gap: 1.25rem;
}

.gap-6 {
  gap: 1.5rem;
}

.gap-\[11px\] {
  gap: 11px;
}

.gap-x-2 {
  -moz-column-gap: 0.5rem;
       column-gap: 0.5rem;
}

.gap-x-3 {
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
}

.gap-x-4 {
  -moz-column-gap: 1rem;
       column-gap: 1rem;
}

.gap-x-6 {
  -moz-column-gap: 1.5rem;
       column-gap: 1.5rem;
}

.gap-y-1 {
  row-gap: 0.25rem;
}

.\!space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0 !important;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))) !important;
  margin-bottom: calc(1rem * var(--tw-space-y-reverse)) !important;
}

.-space-x-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(-0.25rem * var(--tw-space-x-reverse));
  margin-left: calc(-0.25rem * calc(1 - var(--tw-space-x-reverse)));
}

.-space-x-1\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(-0.375rem * var(--tw-space-x-reverse));
  margin-left: calc(-0.375rem * calc(1 - var(--tw-space-x-reverse)));
}

.-space-x-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 0;
  margin-right: calc(-0.5rem * var(--tw-space-x-reverse));
  margin-left: calc(-0.5rem * calc(1 - var(--tw-space-x-reverse)));
}

.space-y-0 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0px * var(--tw-space-y-reverse));
}

.space-y-0\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.125rem * var(--tw-space-y-reverse));
}

.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-1\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
}

.space-y-2 > :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));
}

.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-bd > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--border);
}

.divide-bd2 > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--border-2);
}

.divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-divide-opacity));
}

.self-start {
  align-self: flex-start;
}

.self-end {
  align-self: flex-end;
}

.self-center {
  align-self: center;
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-visible {
  overflow: visible;
}

.overflow-x-auto {
  overflow-x: auto;
}

.overflow-y-auto {
  overflow-y: auto;
}

.scroll-smooth {
  scroll-behavior: smooth;
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-ellipsis {
  text-overflow: ellipsis;
}

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

.\!rounded-none {
  border-radius: 0px !important;
}

.rounded {
  border-radius: 0.25rem;
}

.rounded-2xl {
  border-radius: 1rem;
}

.rounded-\[10px\] {
  border-radius: 10px;
}

.rounded-\[11px\] {
  border-radius: 11px;
}

.rounded-full {
  border-radius: 9999px;
}

.rounded-lg {
  border-radius: 0.5rem;
}

.rounded-md {
  border-radius: 0.375rem;
}

.rounded-xl {
  border-radius: 0.75rem;
}

.\!border-0 {
  border-width: 0px !important;
}

.border {
  border-width: 1px;
}

.border-0 {
  border-width: 0px;
}

.border-2 {
  border-width: 2px;
}

.border-\[3px\] {
  border-width: 3px;
}

.border-x {
  border-left-width: 1px;
  border-right-width: 1px;
}

.border-b {
  border-bottom-width: 1px;
}

.border-l {
  border-left-width: 1px;
}

.border-t {
  border-top-width: 1px;
}

.border-solid {
  border-style: solid;
}

.border-dashed {
  border-style: dashed;
}

.border-none {
  border-style: none;
}

.border-\[\#D1D5DA\] {
  --tw-border-opacity: 1;
  border-color: rgb(209 213 218 / var(--tw-border-opacity));
}

.border-\[var\(--border\)\] {
  border-color: var(--border);
}

.border-bd {
  border-color: var(--border);
}

.border-bd2 {
  border-color: var(--border-2);
}

.border-brand {
  border-color: var(--brand);
}

.border-current {
  border-color: currentColor;
}

.border-gray-200 {
  --tw-border-opacity: 1;
  border-color: rgb(229 231 235 / var(--tw-border-opacity));
}

.border-gray-300 {
  --tw-border-opacity: 1;
  border-color: rgb(209 213 219 / var(--tw-border-opacity));
}

.border-green-200 {
  --tw-border-opacity: 1;
  border-color: rgb(187 247 208 / var(--tw-border-opacity));
}

.border-red-200 {
  --tw-border-opacity: 1;
  border-color: rgb(254 202 202 / var(--tw-border-opacity));
}

.border-s2 {
  border-color: var(--surface-2);
}

.border-transparent {
  border-color: transparent;
}

.border-white {
  --tw-border-opacity: 1;
  border-color: rgb(255 255 255 / var(--tw-border-opacity));
}

.border-t-brand {
  border-top-color: var(--brand);
}

.border-t-transparent {
  border-top-color: transparent;
}

.bg-\[var\(--surface-2\)\] {
  background-color: var(--surface-2);
}

.bg-bd {
  background-color: var(--border);
}

.bg-bd2 {
  background-color: var(--border-2);
}

.bg-blue-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(239 246 255 / var(--tw-bg-opacity));
}

.bg-blue-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
}

.bg-blue-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(37 99 235 / var(--tw-bg-opacity));
}

.bg-blue-700 {
  --tw-bg-opacity: 1;
  background-color: rgb(29 78 216 / var(--tw-bg-opacity));
}

.bg-brand {
  background-color: var(--brand);
}

.bg-brand-weak {
  background-color: var(--brand-weak);
}

.bg-danger {
  background-color: var(--danger);
}

.bg-danger-weak {
  background-color: var(--danger-weak);
}

.bg-gray-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
}

.bg-gray-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(229 231 235 / var(--tw-bg-opacity));
}

.bg-gray-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}

.bg-gray-50\/40 {
  background-color: rgb(249 250 251 / 0.4);
}

.bg-gray-50\/50 {
  background-color: rgb(249 250 251 / 0.5);
}

.bg-gray-50\/70 {
  background-color: rgb(249 250 251 / 0.7);
}

.bg-gray-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(17 24 39 / var(--tw-bg-opacity));
}

.bg-green-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(220 252 231 / var(--tw-bg-opacity));
}

.bg-green-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(240 253 244 / var(--tw-bg-opacity));
}

.bg-green-50\/60 {
  background-color: rgb(240 253 244 / 0.6);
}

.bg-info {
  background-color: var(--blue);
}

.bg-info-weak {
  background-color: var(--blue-weak);
}

.bg-orange-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 247 237 / var(--tw-bg-opacity));
}

.bg-red-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 226 226 / var(--tw-bg-opacity));
}

.bg-red-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 242 / var(--tw-bg-opacity));
}

.bg-red-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(239 68 68 / var(--tw-bg-opacity));
}

.bg-s2 {
  background-color: var(--surface-2);
}

.bg-s3 {
  background-color: var(--surface-3);
}

.bg-sky-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(224 242 254 / var(--tw-bg-opacity));
}

.bg-surface {
  background-color: var(--surface);
}

.bg-teal {
  background-color: var(--teal);
}

.bg-teal-weak {
  background-color: var(--teal-weak);
}

.bg-transparent {
  background-color: transparent;
}

.bg-violet-weak {
  background-color: var(--violet-weak);
}

.bg-warn-weak {
  background-color: var(--warn-weak);
}

.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

.bg-white\/70 {
  background-color: rgb(255 255 255 / 0.7);
}

.bg-white\/95 {
  background-color: rgb(255 255 255 / 0.95);
}

.bg-yellow-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 249 195 / var(--tw-bg-opacity));
}

.bg-opacity-50 {
  --tw-bg-opacity: 0.5;
}

.bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

.from-indigo-500 {
  --tw-gradient-from: #6366f1 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(99 102 241 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-indigo-600 {
  --tw-gradient-from: #4f46e5 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(79 70 229 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-blue-500 {
  --tw-gradient-to: #3b82f6 var(--tw-gradient-to-position);
}

.bg-clip-text {
  -webkit-background-clip: text;
          background-clip: text;
}

.fill-black {
  fill: #000;
}

.object-contain {
  -o-object-fit: contain;
     object-fit: contain;
}

.object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}

.object-fill {
  -o-object-fit: fill;
     object-fit: fill;
}

.p-0 {
  padding: 0px;
}

.p-0\.5 {
  padding: 0.125rem;
}

.p-1 {
  padding: 0.25rem;
}

.p-1\.5 {
  padding: 0.375rem;
}

.p-2 {
  padding: 0.5rem;
}

.p-3 {
  padding: 0.75rem;
}

.p-3\.5 {
  padding: 0.875rem;
}

.p-4 {
  padding: 1rem;
}

.p-5 {
  padding: 1.25rem;
}

.p-6 {
  padding: 1.5rem;
}

.p-8 {
  padding: 2rem;
}

.\!px-5 {
  padding-left: 1.25rem !important;
  padding-right: 1.25rem !important;
}

.\!py-3 {
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
}

.\!py-3\.5 {
  padding-top: 0.875rem !important;
  padding-bottom: 0.875rem !important;
}

.\!py-4 {
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
}

.\!py-5 {
  padding-top: 1.25rem !important;
  padding-bottom: 1.25rem !important;
}

.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

.px-1\.5 {
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}

.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.px-2\.5 {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}

.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.px-3\.5 {
  padding-left: 0.875rem;
  padding-right: 0.875rem;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.py-0 {
  padding-top: 0px;
  padding-bottom: 0px;
}

.py-0\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}

.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

.py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}

.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.py-3\.5 {
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}

.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.py-5 {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.\!pl-10 {
  padding-left: 2.5rem !important;
}

.pb-0 {
  padding-bottom: 0px;
}

.pb-10 {
  padding-bottom: 2.5rem;
}

.pb-16 {
  padding-bottom: 4rem;
}

.pb-2 {
  padding-bottom: 0.5rem;
}

.pb-20 {
  padding-bottom: 5rem;
}

.pb-3 {
  padding-bottom: 0.75rem;
}

.pb-4 {
  padding-bottom: 1rem;
}

.pb-6 {
  padding-bottom: 1.5rem;
}

.pl-10 {
  padding-left: 2.5rem;
}

.pr-10 {
  padding-right: 2.5rem;
}

.pr-12 {
  padding-right: 3rem;
}

.pt-0 {
  padding-top: 0px;
}

.pt-2 {
  padding-top: 0.5rem;
}

.pt-20 {
  padding-top: 5rem;
}

.pt-3 {
  padding-top: 0.75rem;
}

.pt-4 {
  padding-top: 1rem;
}

.pt-5 {
  padding-top: 1.25rem;
}

.text-left {
  text-align: left;
}

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

.text-right {
  text-align: right;
}

.text-end {
  text-align: end;
}

.align-top {
  vertical-align: top;
}

.align-middle {
  vertical-align: middle;
}

.align-bottom {
  vertical-align: bottom;
}

.font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.font-sans {
  font-family: Plus Jakarta Sans, Noto Sans Khmer, system-ui, sans-serif;
}

.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}

.text-6xl {
  font-size: 3.75rem;
  line-height: 1;
}

.text-\[10\.5px\] {
  font-size: 10.5px;
}

.text-\[10px\] {
  font-size: 10px;
}

.text-\[11px\] {
  font-size: 11px;
}

.text-\[13px\] {
  font-size: 13px;
}

.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-bold {
  font-weight: 700;
}

.font-extrabold {
  font-weight: 800;
}

.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;
}

.normal-case {
  text-transform: none;
}

.italic {
  font-style: italic;
}

.leading-4 {
  line-height: 1rem;
}

.leading-5 {
  line-height: 1.25rem;
}

.leading-\[1\.05\] {
  line-height: 1.05;
}

.leading-\[1\.15\] {
  line-height: 1.15;
}

.tracking-\[-\.3px\] {
  letter-spacing: -.3px;
}

.tracking-tight {
  letter-spacing: -0.025em;
}

.tracking-wide {
  letter-spacing: 0.025em;
}

.text-\[\#1e1e1e\] {
  --tw-text-opacity: 1;
  color: rgb(30 30 30 / var(--tw-text-opacity));
}

.text-\[\#1f1f1f\] {
  --tw-text-opacity: 1;
  color: rgb(31 31 31 / var(--tw-text-opacity));
}

.text-\[var\(--brand\)\] {
  color: var(--brand);
}

.text-\[var\(--muted\)\] {
  color: var(--muted);
}

.text-\[var\(--text\)\] {
  color: var(--text);
}

.text-black {
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity));
}

.text-blue-500 {
  --tw-text-opacity: 1;
  color: rgb(59 130 246 / var(--tw-text-opacity));
}

.text-blue-600 {
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity));
}

.text-brand {
  color: var(--brand);
}

.text-brand-ink {
  color: var(--brand-ink);
}

.text-brand-strong {
  color: var(--brand-strong);
}

.text-danger {
  color: var(--danger);
}

.text-gray-400 {
  --tw-text-opacity: 1;
  color: rgb(156 163 175 / var(--tw-text-opacity));
}

.text-gray-500 {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity));
}

.text-gray-600 {
  --tw-text-opacity: 1;
  color: rgb(75 85 99 / var(--tw-text-opacity));
}

.text-gray-700 {
  --tw-text-opacity: 1;
  color: rgb(55 65 81 / var(--tw-text-opacity));
}

.text-gray-800 {
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / var(--tw-text-opacity));
}

.text-gray-900 {
  --tw-text-opacity: 1;
  color: rgb(17 24 39 / var(--tw-text-opacity));
}

.text-green-500 {
  --tw-text-opacity: 1;
  color: rgb(34 197 94 / var(--tw-text-opacity));
}

.text-green-600 {
  --tw-text-opacity: 1;
  color: rgb(22 163 74 / var(--tw-text-opacity));
}

.text-green-700 {
  --tw-text-opacity: 1;
  color: rgb(21 128 61 / var(--tw-text-opacity));
}

.text-green-800 {
  --tw-text-opacity: 1;
  color: rgb(22 101 52 / var(--tw-text-opacity));
}

.text-info {
  color: var(--blue);
}

.text-orange-600 {
  --tw-text-opacity: 1;
  color: rgb(234 88 12 / var(--tw-text-opacity));
}

.text-red-500 {
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity));
}

.text-sky-500 {
  --tw-text-opacity: 1;
  color: rgb(14 165 233 / var(--tw-text-opacity));
}

.text-t1 {
  color: var(--text);
}

.text-t2 {
  color: var(--text-2);
}

.text-t3 {
  color: var(--text-3);
}

.text-teal {
  color: var(--teal);
}

.text-transparent {
  color: transparent;
}

.text-violet {
  color: var(--violet);
}

.text-warn {
  color: var(--warn);
}

.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

.text-yellow-500 {
  --tw-text-opacity: 1;
  color: rgb(234 179 8 / var(--tw-text-opacity));
}

.underline {
  text-decoration-line: underline;
}

.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.opacity-0 {
  opacity: 0;
}

.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-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-md {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.shadow-panel-md {
  --tw-shadow: var(--shadow-md);
  --tw-shadow-colored: var(--shadow-md);
  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-gray-200 {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(229 231 235 / var(--tw-ring-opacity));
}

.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);
}

.grayscale {
  --tw-grayscale: grayscale(100%);
  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-filter {
  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-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-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-150 {
  transition-duration: 150ms;
}

.duration-200 {
  transition-duration: 200ms;
}

.duration-500 {
  transition-duration: 500ms;
}

.duration-700 {
  transition-duration: 700ms;
}

.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.ease-out {
  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}

/* ===================================================================== select2, the library

   select2 ships its own stylesheet — the box, the arrow, the dropdown panel, the search
   field, the multi-select tags. That used to arrive with vendor.css. The admin screens never
   noticed it go, because the .app-shell rules further down restate every visible property.
   The till did: .pos-ui is not .app-shell, so its selects collapsed to inline text 129px wide
   with a zero-width arrow.

   This is the library's own CSS, recovered from vendor.css before it was deleted. It sits up
   here, ahead of the design-system rules, so anything below still wins on specificity — this
   only provides the structure those rules assume. Do not restyle here; override below. */

.select2-container{
  box-sizing:border-box;
  display:inline-block;
  margin:0;
  position:relative;
  vertical-align:middle
}

.select2-container .select2-selection--single{
  box-sizing:border-box;
  cursor:pointer;
  display:block;
  height:28px;
  -moz-user-select:none;
       user-select:none;
  -webkit-user-select:none
}

.select2-container .select2-selection--single .select2-selection__rendered{
  display:block;
  padding-left:8px;
  padding-right:20px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

.select2-container .select2-selection--single .select2-selection__clear{
  position:relative
}

.select2-container[dir=rtl] .select2-selection--single .select2-selection__rendered{
  padding-right:8px;
  padding-left:20px
}

.select2-container .select2-selection--multiple{
  box-sizing:border-box;
  cursor:pointer;
  display:block;
  min-height:32px;
  -moz-user-select:none;
       user-select:none;
  -webkit-user-select:none
}

.select2-container .select2-selection--multiple .select2-selection__rendered{
  display:inline-block;
  overflow:hidden;
  padding-left:8px;
  text-overflow:ellipsis;
  white-space:nowrap
}

.select2-container .select2-search--inline{
  float:left
}

.select2-container .select2-search--inline .select2-search__field{
  box-sizing:border-box;
  border:none;
  font-size:100%;
  margin-top:5px;
  padding:0
}

.select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button{
  -webkit-appearance:none
}

.select2-dropdown{
  background-color:#fff;
  border:1px solid #aaa;
  border-radius:4px;
  box-sizing:border-box;
  display:block;
  position:absolute;
  left:-100000px;
  width:100%;
  z-index:1051
}

.select2-results{
  display:block
}

.select2-results__options{
  list-style:none;
  margin:0;
  padding:0
}

.select2-results__option{
  padding:6px;
  -moz-user-select:none;
       user-select:none;
  -webkit-user-select:none
}

.select2-results__option[aria-selected]{
  cursor:pointer
}

/* The panel sits on the body, so it has to clear the dialog it belongs to. */

body.app-ui .select2-container--open{
  z-index:1060
}

.select2-container--open .select2-dropdown{
  left:0
}

.select2-container--open .select2-dropdown--above{
  border-bottom:none;
  border-bottom-left-radius:0;
  border-bottom-right-radius:0
}

.select2-container--open .select2-dropdown--below{
  border-top:none;
  border-top-left-radius:0;
  border-top-right-radius:0
}

.select2-search--dropdown{
  display:block;
  padding:4px
}

.select2-search--dropdown .select2-search__field{
  padding:4px;
  width:100%;
  box-sizing:border-box
}

.select2-search--dropdown .select2-search__field::-webkit-search-cancel-button{
  -webkit-appearance:none
}

.select2-search--dropdown.select2-search--hide{
  display:none
}

.select2-close-mask{
  border:0;
  margin:0;
  padding:0;
  display:block;
  position:fixed;
  left:0;
  top:0;
  min-height:100%;
  min-width:100%;
  height:auto;
  width:auto;
  opacity:0;
  z-index:99;
  background-color:#fff
}

.select2-hidden-accessible{
  border:0!important;
  clip:rect(0 0 0 0)!important;
  height:1px!important;
  margin:-1px!important;
  overflow:hidden!important;
  padding:0!important;
  position:absolute!important;
  width:1px!important
}

.select2-container--default .select2-selection--single{
  background-color:#fff;
  border:1px solid #aaa;
  border-radius:4px
}

.select2-container--default .select2-selection--single .select2-selection__rendered{
  color:#444;
  line-height:28px
}

.select2-container--default .select2-selection--single .select2-selection__clear{
  cursor:pointer;
  float:right;
  font-weight:700
}

.select2-container--default .select2-selection--single .select2-selection__placeholder{
  color:#999
}

.select2-container--default .select2-selection--single .select2-selection__arrow{
  height:26px;
  position:absolute;
  top:1px;
  right:1px;
  width:20px
}

.select2-container--default .select2-selection--single .select2-selection__arrow b{
  border-color:#888 transparent transparent transparent;
  border-style:solid;
  border-width:5px 4px 0 4px;
  height:0;
  left:50%;
  margin-left:-4px;
  margin-top:-2px;
  position:absolute;
  top:50%;
  width:0
}

.select2-container--default[dir=rtl] .select2-selection--single .select2-selection__clear{
  float:left
}

.select2-container--default[dir=rtl] .select2-selection--single .select2-selection__arrow{
  left:1px;
  right:auto
}

.select2-container--default.select2-container--disabled .select2-selection--single{
  background-color:#eee;
  cursor:default
}

.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__clear{
  display:none
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b{
  border-color:transparent transparent #888 transparent;
  border-width:0 4px 5px 4px
}

.select2-container--default .select2-selection--multiple{
  background-color:#fff;
  border:1px solid #aaa;
  border-radius:4px;
  cursor:text
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered{
  box-sizing:border-box;
  list-style:none;
  margin:0;
  padding:0 5px;
  width:100%
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered li{
  list-style:none
}

.select2-container--default .select2-selection--multiple .select2-selection__placeholder{
  color:#999;
  margin-top:5px;
  float:left
}

.select2-container--default .select2-selection--multiple .select2-selection__clear{
  cursor:pointer;
  float:right;
  font-weight:700;
  margin-top:5px;
  margin-right:10px
}

.select2-container--default .select2-selection--multiple .select2-selection__choice{
  background-color:#e4e4e4;
  border:1px solid #aaa;
  border-radius:4px;
  cursor:default;
  float:left;
  margin-right:5px;
  margin-top:5px;
  padding:0 5px
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove{
  color:#999;
  cursor:pointer;
  display:inline-block;
  font-weight:700;
  margin-right:2px
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover{
  color:#333
}

.select2-container--default[dir=rtl] .select2-selection--multiple .select2-search--inline,.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__choice,.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__placeholder{
  float:right
}

.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__choice{
  margin-left:5px;
  margin-right:auto
}

.select2-container--default[dir=rtl] .select2-selection--multiple .select2-selection__choice__remove{
  margin-left:2px;
  margin-right:auto
}

.select2-container--default.select2-container--focus .select2-selection--multiple{
  border:solid #000 1px;
  outline:0
}

.select2-container--default.select2-container--disabled .select2-selection--multiple{
  background-color:#eee;
  cursor:default
}

.select2-container--default.select2-container--disabled .select2-selection__choice__remove{
  display:none
}

.select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple,.select2-container--default.select2-container--open.select2-container--above .select2-selection--single{
  border-top-left-radius:0;
  border-top-right-radius:0
}

.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple,.select2-container--default.select2-container--open.select2-container--below .select2-selection--single{
  border-bottom-left-radius:0;
  border-bottom-right-radius:0
}

.select2-container--default .select2-search--dropdown .select2-search__field{
  border:1px solid #aaa
}

.select2-container--default .select2-search--inline .select2-search__field{
  background:0 0;
  border:none;
  outline:0;
  box-shadow:none;
  -webkit-appearance:textfield
}

.select2-container--default .select2-results>.select2-results__options{
  max-height:200px;
  overflow-y:auto
}

.select2-container--default .select2-results__option[role=group]{
  padding:0
}

.select2-container--default .select2-results__option[aria-disabled=true]{
  color:#999
}

.select2-container--default .select2-results__option[aria-selected=true]{
  background-color:#ddd
}

.select2-container--default .select2-results__option .select2-results__option{
  padding-left:1em
}

.select2-container--default .select2-results__option .select2-results__option .select2-results__group{
  padding-left:0
}

.select2-container--default .select2-results__option .select2-results__option .select2-results__option{
  margin-left:-1em;
  padding-left:2em
}

.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option{
  margin-left:-2em;
  padding-left:3em
}

.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{
  margin-left:-3em;
  padding-left:4em
}

.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{
  margin-left:-4em;
  padding-left:5em
}

.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option{
  margin-left:-5em;
  padding-left:6em
}

.select2-container--default .select2-results__option--highlighted[aria-selected]{
  background-color:#5897fb;
  color:#fff
}

.select2-container--default .select2-results__group{
  cursor:default;
  display:block;
  padding:6px
}

.select2-container--classic .select2-selection--single{
  background-color:#f7f7f7;
  border:1px solid #aaa;
  border-radius:4px;
  outline:0;
  background-image:linear-gradient(to bottom,#fff 50%,#eee 100%);
  background-repeat:repeat-x
}

.select2-container--classic .select2-selection--single:focus{
  border:1px solid #5897fb
}

.select2-container--classic .select2-selection--single .select2-selection__rendered{
  color:#444;
  line-height:28px
}

.select2-container--classic .select2-selection--single .select2-selection__clear{
  cursor:pointer;
  float:right;
  font-weight:700;
  margin-right:10px
}

.select2-container--classic .select2-selection--single .select2-selection__placeholder{
  color:#999
}

.select2-container--classic .select2-selection--single .select2-selection__arrow{
  background-color:#ddd;
  border:none;
  border-left:1px solid #aaa;
  border-top-right-radius:4px;
  border-bottom-right-radius:4px;
  height:26px;
  position:absolute;
  top:1px;
  right:1px;
  width:20px;
  background-image:linear-gradient(to bottom,#eee 50%,#ccc 100%);
  background-repeat:repeat-x
}

.select2-container--classic .select2-selection--single .select2-selection__arrow b{
  border-color:#888 transparent transparent transparent;
  border-style:solid;
  border-width:5px 4px 0 4px;
  height:0;
  left:50%;
  margin-left:-4px;
  margin-top:-2px;
  position:absolute;
  top:50%;
  width:0
}

.select2-container--classic[dir=rtl] .select2-selection--single .select2-selection__clear{
  float:left
}

.select2-container--classic[dir=rtl] .select2-selection--single .select2-selection__arrow{
  border:none;
  border-right:1px solid #aaa;
  border-radius:0;
  border-top-left-radius:4px;
  border-bottom-left-radius:4px;
  left:1px;
  right:auto
}

.select2-container--classic.select2-container--open .select2-selection--single{
  border:1px solid #5897fb
}

.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow{
  background:0 0;
  border:none
}

.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow b{
  border-color:transparent transparent #888 transparent;
  border-width:0 4px 5px 4px
}

.select2-container--classic.select2-container--open.select2-container--above .select2-selection--single{
  border-top:none;
  border-top-left-radius:0;
  border-top-right-radius:0;
  background-image:linear-gradient(to bottom,#fff 0,#eee 50%);
  background-repeat:repeat-x
}

.select2-container--classic.select2-container--open.select2-container--below .select2-selection--single{
  border-bottom:none;
  border-bottom-left-radius:0;
  border-bottom-right-radius:0;
  background-image:linear-gradient(to bottom,#eee 50%,#fff 100%);
  background-repeat:repeat-x
}

.select2-container--classic .select2-selection--multiple{
  background-color:#fff;
  border:1px solid #aaa;
  border-radius:4px;
  cursor:text;
  outline:0
}

.select2-container--classic .select2-selection--multiple:focus{
  border:1px solid #5897fb
}

.select2-container--classic .select2-selection--multiple .select2-selection__rendered{
  list-style:none;
  margin:0;
  padding:0 5px
}

.select2-container--classic .select2-selection--multiple .select2-selection__clear{
  display:none
}

.select2-container--classic .select2-selection--multiple .select2-selection__choice{
  background-color:#e4e4e4;
  border:1px solid #aaa;
  border-radius:4px;
  cursor:default;
  float:left;
  margin-right:5px;
  margin-top:5px;
  padding:0 5px
}

.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove{
  color:#888;
  cursor:pointer;
  display:inline-block;
  font-weight:700;
  margin-right:2px
}

.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove:hover{
  color:#555
}

.select2-container--classic[dir=rtl] .select2-selection--multiple .select2-selection__choice{
  float:right;
  margin-left:5px;
  margin-right:auto
}

.select2-container--classic[dir=rtl] .select2-selection--multiple .select2-selection__choice__remove{
  margin-left:2px;
  margin-right:auto
}

.select2-container--classic.select2-container--open .select2-selection--multiple{
  border:1px solid #5897fb
}

.select2-container--classic.select2-container--open.select2-container--above .select2-selection--multiple{
  border-top:none;
  border-top-left-radius:0;
  border-top-right-radius:0
}

.select2-container--classic.select2-container--open.select2-container--below .select2-selection--multiple{
  border-bottom:none;
  border-bottom-left-radius:0;
  border-bottom-right-radius:0
}

.select2-container--classic .select2-search--dropdown .select2-search__field{
  border:1px solid #aaa;
  outline:0
}

.select2-container--classic .select2-search--inline .select2-search__field{
  outline:0;
  box-shadow:none
}

.select2-container--classic .select2-dropdown{
  background-color:#fff;
  border:1px solid transparent
}

.select2-container--classic .select2-dropdown--above{
  border-bottom:none
}

.select2-container--classic .select2-dropdown--below{
  border-top:none
}

.select2-container--classic .select2-results>.select2-results__options{
  max-height:200px;
  overflow-y:auto
}

.select2-container--classic .select2-results__option[role=group]{
  padding:0
}

.select2-container--classic .select2-results__option[aria-disabled=true]{
  color:grey
}

.select2-container--classic .select2-results__option--highlighted[aria-selected]{
  background-color:#3875d7;
  color:#fff
}

.select2-container--classic .select2-results__group{
  cursor:default;
  display:block;
  padding:6px
}

.select2-container--classic.select2-container--open .select2-dropdown{
  border-color:#5897fb
}

.select2-container--default.select2-container--focus,.select2-container--default:active,.select2-container--default:focus,.select2-selection.select2-container--focus,.select2-selection:active,.select2-selection:focus{
  outline:0
}

.select2-container--default .select2-selection--single,.select2-selection .select2-selection--single{
  border:1px solid #d2d6de;
  border-radius:0;
  padding:6px 12px;
  height:34px
}

.select2-container--default.select2-container--open{
  border-color:#3c8dbc
}

.select2-dropdown{
  border:1px solid #d2d6de;
  border-radius:0
}

.select2-container--default .select2-results__option--highlighted[aria-selected]{
  background-color:#3c8dbc;
  color:#fff
}

.select2-results__option{
  padding:6px 12px;
  -moz-user-select:none;
       user-select:none;
  -webkit-user-select:none
}

.select2-container .select2-selection--single .select2-selection__rendered{
  padding-left:0;
  padding-right:0;
  height:auto;
  margin-top:-4px
}

.select2-container[dir=rtl] .select2-selection--single .select2-selection__rendered{
  padding-right:6px;
  padding-left:20px
}

.select2-container--default .select2-selection--single .select2-selection__arrow{
  height:28px;
  right:3px
}

.select2-container--default .select2-selection--single .select2-selection__arrow b{
  margin-top:0
}

.select2-dropdown .select2-search__field,.select2-search--inline .select2-search__field{
  border:1px solid #d2d6de
}

.select2-dropdown .select2-search__field:focus,.select2-search--inline .select2-search__field:focus{
  outline:0
}

.select2-container--default .select2-search--dropdown .select2-search__field,.select2-container--default.select2-container--focus .select2-selection--multiple{
  border-color:#3c8dbc!important
}

.select2-container--default .select2-results__option[aria-disabled=true]{
  color:#999
}

.select2-container--default .select2-results__option[aria-selected=true]{
  background-color:#ddd
}

.select2-container--default .select2-results__option[aria-selected=true],.select2-container--default .select2-results__option[aria-selected=true]:hover{
  color:#444
}

.select2-container--default .select2-selection--multiple{
  border:1px solid #d2d6de;
  border-radius:0
}

.select2-container--default .select2-selection--multiple:focus{
  border-color:#3c8dbc
}

.select2-container--default.select2-container--focus .select2-selection--multiple{
  border-color:#d2d6de
}

.select2-container--default .select2-selection--multiple .select2-selection__choice{
  background-color:#3c8dbc;
  border-color:#367fa9;
  padding:1px 10px;
  color:#fff
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove{
  margin-right:5px;
  color:rgba(255,255,255,.7)
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover{
  color:#fff
}

.select2-container .select2-selection--single .select2-selection__rendered{
  padding-right:10px
}

/* ============================================================
   Design tokens — SINGLE SOURCE OF TRUTH.
   Change a colour/shadow here → whole app updates (light + dark).
   Tailwind utilities (bg-surface, text-t2, border-bd…) point here.
   ============================================================ */

/* The page itself, under everything.
 *
 * The shell is exactly one viewport tall and paints its own ground, so nothing had ever asked
 * what colour the page behind it is — and the answer was the browser's white. Anywhere the
 * shell does not cover, that white showed: a full-page screenshot, an overscroll bounce, a
 * short shell on a tall window. In dark mode it was white under a dark app.
 */

html{
  background:var(--bg)
}

/*
 * The page behind the shell.
 *
 * There was a scroll lock here — overflow:hidden on the body, on the theory that the shell owns
 * the viewport and the column beside the rail owns the scrollbar. On a window where the shell
 * ends up taller than the visible area that lock removed the only way to reach the rest of it:
 * the bottom of the app could not be scrolled to at all. A page you cannot reach is worse than
 * one that scrolls oddly, so the lock is gone. The background stays — it is what keeps any
 * uncovered area the page's own colour rather than white.
 */

body.app-ui{
  min-height:100%;
  background:var(--bg);
  color:var(--text)
}

/*
 * Only the real shell — the one the layout marks h-screen.
 *
 * .app-shell is on two elements: the shell itself, and an empty .app-dialog-layer that dialogs
 * are moved into. Sized without that :not(), the layer took a viewport of its own and the
 * document became two screens tall — one of app, then one of nothing to scroll into.
 *
 * It asks for the viewport but never more than the box it is in: growing past the window is
 * what put half the app out of reach.
 */

/* The guest shell is a document, not an app screen.
 *
 * A shared job sheet or invoice is a page a customer scrolls: it is several times a viewport
 * long and there is no <main> inside it to scroll instead. Capped at 100dvh it stopped at the
 * fold — the header and the address, then nothing — with no scrollbar to reach the rest,
 * because the document was exactly as tall as the shell and the shell had ended. */

body.app-ui .app-shell:not(.app-dialog-layer):not(.guest-shell){
  position:relative;
  height:100dvh;
  max-height:100%
}

/* The shell is exactly one viewport tall and everything scrolls inside <main>, so the
   document itself must never scroll. It did on the job sheet form: Tagify hangs its
   suggestion menu off <body>, outside the shell, and an absolutely positioned box out
   there still counts toward the document's scroll height. On a short laptop screen the
   menu reached past the bottom of the window, the page grew a scrollbar, and the next
   click scrolled the whole shell up — which is the strip of empty background under the
   app. Clipping the body keeps the shell pinned; menus that run out of room flip to
   [placement=top] on their own. Only the shell layout is clipped — the auth, install and
   guest pages are plain scrolling documents and keep their scrollbar. */

body.app-ui.app-shell-body{
  overflow:clip
}

/* Clipping stops the document scrolling. It does not stop iOS moving it.
 *
 * Safari pans the page — a translation, not a scroll position — to lift a focused field clear
 * of the keyboard, and it saves that offset with the tab. Reopening the browser restores it, so
 * a screen that is exactly one viewport tall came back with its top hundred pixels above the
 * window and a band of bare background under it: the nav sliced in half, the page apparently
 * "scrolled" with nothing to scroll back. Nothing in script can put it back either, because
 * with the body clipped there is no scroll position to correct.
 *
 * A fixed body has nothing to translate, so the keyboard shifts only the visual viewport and
 * iOS restores that by itself. Screen only: printing needs a document that flows past the
 * bottom of one window. */

@media screen {
  html:has(> body.app-ui.app-shell-body){
    height:100%
  }

  body.app-ui.app-shell-body{
    position:fixed;
    top:0;
    right:0;
    bottom:0;
    left:0;
    height:100%;
    overscroll-behavior:none
  }
}

/* The shell carries Tailwind's .overflow-hidden, and an overflow:hidden box is still
   scrollable by script — which is how the app slid up while the document stayed put.
   Focusing a control scrolls its nearest scrollable ancestors, and the visually hidden
   radios inside toggle groups are position:absolute, so their containing block is this
   shell rather than the box they were written in. The browser scrolled the shell to bring
   one into view, taking the topbar and sidebar with it and leaving background underneath.
   overflow:clip cannot be scrolled at all, by script or by focus, so the shell stays put
   and <main> remains the only thing that moves. */

body.app-ui .app-shell:not(.app-dialog-layer){
  overflow:clip
}

/* And the column inside it, for the same reason — this is the box that was actually moving.
 *
 * .shell-column holds the topbar, the module bar and the scroller. It carries Tailwind's
 * `overflow-hidden`, which hides what overflows but leaves the box scrollable by script: a
 * .focus() on any control inside <main> — a select2 opening, a field dressed on load, a widget
 * taking the caret — makes the browser scroll every scrollable ancestor of that control, and
 * this column is one of them. It scrolled by the height of the topbar and the module bar, which
 * left them off the top of the screen and a band of bare background under a short page, with
 * the document itself untouched: window scroll 0, shell top 0, nothing to put back. clip cannot
 * be scrolled at all. */

body.app-ui .app-shell .shell-column{
  overflow:clip
}

/* And its rows are declared, rather than left to what the children ask for.
 *
 * As a flex column, every child states its own height and <main> takes the rest — which holds
 * only as long as nothing inside <main> insists on being taller than the space it was given.
 * When something does, the column overflows; and a column that overflows inside a box that
 * clips can put its first row above the top edge, where it is not scrolled off screen but cut
 * off. The topbar and the module bar are then simply not drawn, with the page starting where
 * they should have been and their height left as bare background at the bottom — which is the
 * fault, and why nothing that reset a scroll position ever moved it.
 *
 * So the column is nailed down: it packs from the top and never centres (centring is what puts
 * overflow above the top edge rather than below the bottom one), every row but the scroller
 * takes exactly its own height and refuses to grow or shrink, and the scroller alone absorbs
 * the rest with a floor of zero — so nothing it contains can push the bars out of the box.
 *
 * Written without naming the rows, because the module bar renders nothing at all on screens
 * that have no sections — the dashboard is one — so the column has four children there and
 * five elsewhere. */

body.app-ui .app-shell .shell-column{
  justify-content:flex-start;
  align-items:stretch
}

body.app-ui .app-shell .shell-column > *{
  flex:none;
  min-height:0
}

body.app-ui .app-shell .shell-column > #scrollable-container{
  flex:1 1 0%;
  min-height:0
}

/* A phone is a scrolling document, not a fixed frame.
 *
 * The desktop shell is exactly one viewport tall: the rail, the topbar and the module bar hold
 * still and <main> scrolls inside them. That model needs the viewport height to be a fact, and
 * on a phone it is not one — the browser's bars slide, a restored tab is laid out against a
 * viewport that has not settled, and a row computed too tall lands above the top edge, where
 * `overflow:clip` does not draw it. Nothing on screen says so: no scrollbar, no offset, every
 * measurement zero, the header simply absent and its height left as background at the bottom.
 *
 * So the phone stops making that bet. The page flows: topbar, module bar and content in one
 * column, the document itself scrolls, and nothing is sized to a viewport height or clipped
 * against one. There is no arrangement of bars, restores or rotations that can leave a row
 * outside the box, because there is no box — the whole layout is always drawn, which is what a
 * phone should have had from the start.
 *
 * The topbar sticks to the top of that scroll instead of being pinned by the frame, so it is
 * still there at the bottom of a long table. The rail is already position:fixed and off-canvas
 * at this width, so the column is the only thing in flow. Above 900px nothing changes. */

@media (max-width:900px){
  body.app-ui.app-shell-body{
    position:static;
    height:auto;
    min-height:100%;
    overflow:visible;
    overscroll-behavior:auto
  }

  body.app-ui .app-shell:not(.app-dialog-layer){
    height:auto;
    min-height:100dvh;
    max-height:none;
    overflow:visible
  }

  body.app-ui .app-shell .shell-column{
    overflow:visible
  }

  body.app-ui .app-shell .shell-column > #scrollable-container{
    flex:1 1 auto;
    height:auto;
    min-height:0;
    overflow:visible
  }

  /* The header is an ordinary row at the top of the page. Not fixed, not sticky.
   *
   * Both of those are laid out against the window rather than the document, and on a phone the
   * window's top edge is where the browser's address bar lives while it is still expanded — so
   * a pinned header was drawn underneath Safari's chrome and only appeared once a scroll shrank
   * it. It was never missing; it was covered.
   *
   * A row in normal flow cannot be covered: a scrolling document starts below those bars. It
   * scrolls away with the page, which is what a phone does, and comes back when the page is
   * scrolled back — no script, no measuring, nothing that can fight the person scrolling. */

  body.app-ui .app-shell .topbar{
    position:relative
  }

  /* The rail slides out over the page. */

  body.app-ui .app-shell>.sidebar{
    z-index:1060
  }

  /* Sticky needs something to sit on. The dashboard's bar is transparent on purpose — it lets
     the page's wash run to the top of the screen — which is right where it is, and wrong the
     moment the page scrolls under it and the greeting reads through the icons. It keeps the
     wash's own colour rather than the app's surface, so nothing changes at rest. */

  body.app-ui.is-dashboard .app-shell .topbar{
    background:color-mix(in srgb,var(--brand-weak) 70%,var(--bg))
  }
}

/* position:relative above is not decoration. Something inside the page is absolutely
   positioned with no positioned ancestor, so it anchored to the document itself: invisible,
   clipped by the shell's overflow, and still stretching the page to twice its height — which
   is the empty screen you could scroll into. Anchored to the shell it is clipped for real.

   The dialog layer holds nothing until a dialog is moved into it, and must never take space. */

body.app-ui .app-shell.app-dialog-layer{
  height:auto;
  min-height:0
}

/* "Converted from lead" on a contact row: a fact about where this customer came from, so it
   reads as a quiet chip rather than a coloured dot with nothing in it. */

body.app-ui .contact-converted-chip{
  display:inline-flex;
  align-items:center;
  gap:4px;
  margin-top:3px;
  padding:2px 8px;
  border-radius:999px;
  background:var(--blue-weak);
  color:var(--blue);
  font-size:10.5px;
  font-weight:700;
  white-space:nowrap
}

body.app-ui .contact-converted-chip svg{
  width:12px;
  height:12px;
  flex:none
}

/* An invoice number that is already taken says so under the field, in the field's own colour. */

body.app-ui .form-invoice_no .form-control.is-taken{
  border-color:var(--danger);
  background:var(--danger-weak)
}

body.app-ui .sell-field-hint.is-error{
  color:var(--danger);
  font-weight:700
}

body.app-ui .sell-field-hint.is-ok{
  color:var(--brand-strong);
  font-weight:650
}

/* ---- Send Telegram notification ----
 *
 * The dialog carried its own palette and its icons came from Font Awesome, which this stack
 * does not load — so the icons were empty boxes and the two buttons in the footer, styled with
 * daisyUI classes from the old build, drew as plain text. These give it the product's own
 * shell, controls and tints; the dialog's own layout styles stay where they are.
 */

body.app-ui .tg-dialog{
  width:min(720px,calc(100vw - 28px));
  margin:26px auto
}

body.app-ui .tg-dialog .modal-content{
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:16px;
  background:var(--surface);
  box-shadow:0 24px 70px rgba(16,24,40,.28)
}

body.app-ui .tg-dialog .modal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  border-bottom:1px solid var(--border-2);
  background:var(--surface)
}

body.app-ui .tg-head{
  display:flex;
  min-width:0;
  align-items:center;
  gap:10px
}

body.app-ui .tg-head__icon{
  display:grid;
  width:34px;
  height:34px;
  flex:none;
  place-items:center;
  border-radius:10px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

body.app-ui .tg-dialog .modal-title{
  margin:0;
  color:var(--text);
  font-size:15.5px;
  font-weight:750
}

body.app-ui .tg-dialog .modal-header .close{
  display:grid;
  width:32px;
  height:32px;
  flex:none;
  place-items:center;
  border:0;
  border-radius:9px;
  background:var(--surface-3);
  color:var(--text-2);
  opacity:1;
  text-shadow:none;
  cursor:pointer
}

body.app-ui .tg-dialog .modal-header .close:hover{
  background:var(--danger-weak);
  color:var(--danger)
}

body.app-ui .tg-dialog .modal-body{
  max-height:calc(100vh - 230px);
  padding:16px;
  overflow-y:auto;
  background:var(--surface)
}

/* Every icon in here is an icon, not a picture. */

body.app-ui .tg-dialog .tg-ico{
  width:16px;
  height:16px;
  flex:none
}

body.app-ui .tg-dialog .tg-ico.is-xs{
  width:12px;
  height:12px
}

/* ---- the history list ----
 *
 * It was one line of five coloured pills per row — purple for group, blue for manual, teal for
 * auto, plus info and warning labels — which made a log of five messages read as a paint chart
 * and hid the two things that matter: what was sent, and whether it arrived.
 *
 * One row per notification now: the outcome as a small tinted mark, the template name, one
 * muted line of facts under it, and the time and sender on the right. Colour only where it
 * carries meaning.
 */

body.app-ui .tg-hist{
  display:flex;
  max-height:210px;
  flex-direction:column;
  overflow-y:auto;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface)
}

body.app-ui .tg-hist__row{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:10px 12px;
  border-bottom:1px solid var(--border-2)
}

body.app-ui .tg-hist__row:last-child{
  border-bottom:0
}

body.app-ui .tg-hist__state{
  display:grid;
  width:22px;
  height:22px;
  flex:none;
  place-items:center;
  border-radius:50%
}

body.app-ui .tg-hist__row.is-ok .tg-hist__state{
  background:var(--brand-weak);
  color:var(--brand-strong)
}

body.app-ui .tg-hist__row.is-failed .tg-hist__state{
  background:var(--danger-weak);
  color:var(--danger)
}

body.app-ui .tg-hist__body{
  display:flex;
  min-width:0;
  flex:1;
  flex-direction:column;
  gap:2px
}

body.app-ui .tg-hist__title{
  overflow:hidden;
  color:var(--text);
  font-size:13px;
  font-weight:700;
  text-overflow:ellipsis;
  white-space:nowrap
}

body.app-ui .tg-hist__meta{
  overflow:hidden;
  color:var(--text-3);
  font-size:11.5px;
  text-overflow:ellipsis;
  white-space:nowrap
}

body.app-ui .tg-hist__side{
  display:flex;
  flex:none;
  flex-direction:column;
  align-items:flex-end;
  gap:2px;
  text-align:right
}

body.app-ui .tg-hist__time{
  color:var(--text-2);
  font-size:11.5px;
  font-weight:650;
  white-space:nowrap
}

body.app-ui .tg-hist__by{
  color:var(--text-3);
  font-size:11px;
  white-space:nowrap
}

@media(max-width:620px){
  body.app-ui .tg-hist__row{
    flex-wrap:wrap
  }

  body.app-ui .tg-hist__side{
    width:100%;
    align-items:flex-start;
    padding-left:32px;
    text-align:left
  }
}

/* Sending is the point of the dialog, so it is the filled button and it sits last. */

/* --------------------------------------------------------------------------
   Send Telegram — the plain fields.

   Half this dialog was built in the new language (the recipient card, the two
   channel cards, the chips) and half was left in the old one: bare `form-group`
   + `form-control` + a Bootstrap `well`, which this stack does not style. The
   result read as two dialogs stacked on top of each other. These rules bring
   the second half up to the first; no markup ids move, so nothing the JS binds
   to changes.
   -------------------------------------------------------------------------- */

body.app-ui .tg-dialog .form-group{
  margin:0 0 14px
}

body.app-ui .tg-dialog .form-group:last-child{
  margin-bottom:0
}

/* Field labels only — the channel cards are <label> elements too, and must not
   be caught by this. */

/* Inline-block, not block: the required marker is a sibling of the label, not inside it, so a
   block label pushed the asterisk onto a line of its own. Both carry the same bottom margin
   so the control below still clears them by one gap. */

body.app-ui .tg-dialog .form-group>label{
  display:inline-block;
  margin:0 0 6px;
  color:var(--text-2);
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.01em
}

body.app-ui .tg-dialog .form-group>label+.text-danger{
  display:inline-block;
  margin:0 0 6px 3px;
  color:var(--danger);
  font-size:11.5px;
  font-weight:700;
  line-height:1
}

/* One control height across native selects, inputs and the select2 skin, so a
   row of fields lines up instead of stepping. */

body.app-ui .tg-dialog .form-control,
body.app-ui .tg-dialog .select2-container--default .select2-selection--single{
  box-sizing:border-box;
  width:100%;
  height:40px;
  padding:0 12px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface);
  color:var(--text);
  font:inherit;
  font-size:13.5px;
  line-height:38px
}

body.app-ui .tg-dialog .select2-container--default .select2-selection--single .select2-selection__rendered{
  padding:0;
  color:var(--text);
  line-height:38px
}

body.app-ui .tg-dialog .select2-container--default .select2-selection--single .select2-selection__arrow{
  height:38px
}

body.app-ui .tg-dialog .form-control:focus,
body.app-ui .tg-dialog .select2-container--default.select2-container--open .select2-selection--single{
  border-color:var(--brand);
  box-shadow:0 0 0 3px var(--brand-weak);
  outline:none
}

body.app-ui .tg-dialog .form-control[disabled],
body.app-ui .tg-dialog select[disabled]{
  background:var(--surface-2,#f6f7f8);
  color:var(--text-3);
  cursor:not-allowed
}

/* Two fields that answer one question share a row, and stack on a phone. */

body.app-ui .tg-dialog .tg-grid-2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 12px
}

@media (max-width:560px){
  body.app-ui .tg-dialog .tg-grid-2{
    grid-template-columns:1fr
  }
}

/* The hint under a field: quiet, and the icon on the same baseline as the words
   rather than floating above them. */

body.app-ui .tg-dialog .help-block{
  display:flex;
  align-items:flex-start;
  gap:5px;
  margin:6px 0 0;
  color:var(--text-3);
  font-size:11.5px;
  line-height:1.5
}

body.app-ui .tg-dialog .help-block .tg-ico{
  flex:0 0 auto;
  margin-top:2px
}

/* The preview, which was an unstyled Bootstrap "well" holding the largest empty
   area on the screen. Bordered and readable when it holds a message; quiet and
   short when it is only saying that nothing has been chosen. */

/* Its own scroll, not the dialog's. The body caps at calc(100vh - 230px) and scrolls, and the
   preview is the last thing in it - so a long message was cut by the viewport edge with no
   scrollbar of its own to say there was more. Bounded here, the box always shows that it
   continues. The sizing is repeated inline on the element so it holds even unbuilt. */

body.app-ui .tg-dialog .tg-preview{
  max-height:230px;
  overflow-y:auto;
  padding:11px 13px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface-2,#fafbfb);
  color:var(--text);
  font-size:13px;
  line-height:1.6;
  white-space:pre-wrap
}

/* Quiet when it is only a placeholder - but the same block box either way. Turning it into a
   centred flex container changed how its text laid out, which is not something a class
   meaning "nothing chosen yet" has any business doing. */

body.app-ui .tg-dialog .tg-preview.is-empty{
  border-style:dashed;
  color:var(--text-3);
  font-style:italic
}

/* "Connect this customer to another location's bot" was body text with a link in
   it, at the bottom of the dialog, doing nothing to say it was an action. */

body.app-ui .tg-dialog #connect_another_bot_wrap{
  margin:12px 0 0
}

body.app-ui .tg-dialog #connect_another_bot_wrap a{
  color:var(--brand-strong);
  font-weight:700;
  text-decoration:none
}

body.app-ui .tg-dialog #connect_another_bot_wrap a:hover{
  text-decoration:underline
}

/* The status trail overlay. Not a Bootstrap modal: that toggles `modal-open` on <body>, changes
   overflow, compensates for the scrollbar and inserts a backdrop, and each of those re-lays-out the
   whole document - about 1.1 MB of it on the invoice listing. This touches nothing outside itself,
   so opening and closing costs the same whatever the page behind it weighs. */

.app-shell .repair-trail{
  opacity:0;
  transition:opacity .18s ease
}

.app-shell .repair-trail[hidden]{
  display:none!important
}

.app-shell .repair-trail.is-open{
  opacity:1
}

.app-shell .repair-trail__scrim{
  opacity:0;
  transition:opacity .18s ease
}

.app-shell .repair-trail.is-open .repair-trail__scrim{
  opacity:1
}

.app-shell .repair-trail__dialog{
  width:100%;
  max-width:none;
  margin:0;
  opacity:1;
  visibility:visible;
  transform:translateY(10px) scale(.985);
  transition:transform .18s ease
}

.app-shell .repair-trail.is-open .repair-trail__dialog{
  transform:none
}

.app-shell .repair-trail__card{
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  box-shadow:0 18px 48px rgb(15 23 42 / 0.24)
}

.app-shell .repair-trail__header,.app-shell .repair-trail__footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:15px 18px
}

.app-shell .repair-trail__header{
  border-bottom:1px solid var(--border)
}

.app-shell .repair-trail__title{
  margin:0;
  color:var(--text);
  font-size:16px;
  font-weight:750
}

.app-shell .repair-trail__close{
  display:inline-flex;
  width:32px;
  height:32px;
  flex:0 0 32px;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface);
  color:var(--text-3);
  font-size:22px;
  line-height:1;
  cursor:pointer
}

.app-shell .repair-trail__close:hover{
  border-color:var(--brand);
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .repair-trail__body{
  max-height:calc(88vh - 126px);
  overflow:auto;
  padding:18px
}

.app-shell .repair-trail__footer{
  justify-content:flex-end;
  border-top:1px solid var(--border);
  background:var(--surface-2)
}

@media (prefers-reduced-motion:reduce){
  .app-shell .repair-trail,.app-shell .repair-trail__scrim,.app-shell .repair-trail__dialog{
    transition:none
  }
}

body.app-ui .tg-dialog .modal-footer.tg-foot{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:9px;
  padding:12px 16px;
  border-top:1px solid var(--border-2);
  background:var(--surface)
}

/* Written out in full rather than leaning on .btn-primary: those rules are scoped to
   .app-shell, and this dialog is rendered into a container outside it — which is why both
   buttons drew as bare text in the first place. */

body.app-ui .tg-dialog .tg-foot .btn-ghost,
body.app-ui .tg-dialog .tg-foot .btn-primary{
  display:inline-flex;
  height:40px;
  min-width:104px;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:0 16px;
  border-radius:10px;
  font:inherit;
  font-size:13.5px;
  font-weight:700;
  cursor:pointer
}

body.app-ui .tg-dialog .tg-foot .btn-ghost{
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text-2)
}

body.app-ui .tg-dialog .tg-foot .btn-ghost:hover{
  border-color:var(--brand);
  background:var(--brand-weak);
  color:var(--brand-strong)
}

body.app-ui .tg-dialog .tg-foot .btn-primary{
  border:1px solid var(--brand);
  background:var(--brand);
  color:#fff
}

body.app-ui .tg-dialog .tg-foot .btn-primary:hover{
  background:var(--brand-strong);
  border-color:var(--brand-strong)
}

body.app-ui .tg-dialog .tg-foot .btn-primary:disabled{
  opacity:.6;
  cursor:not-allowed
}

/* The spinner replaces a spinning glyph from a font that is not loaded. */

body.app-ui .tg-spinner{
  display:inline-block;
  width:14px;
  height:14px;
  border:2px solid color-mix(in srgb,var(--brand) 30%,transparent);
  border-top-color:var(--brand);
  border-radius:50%;
  vertical-align:-2px;
  animation:tg-spin .7s linear infinite
}

@keyframes tg-spin{
  to{
    transform:rotate(360deg)
  }
}

/* --------------------------------------------------------------------------
 * Sales order listing extras (rides on sells-page)
 *
 * The list draws itself with the All sales components — the stage board, the
 * filter card, the table card and every cell inside it — so the two pages read
 * as one thing. Only what is genuinely different is written here: three stages
 * instead of four, and the colour each one takes when it is the active filter.
 * -------------------------------------------------------------------------- */

body.app-ui .sells-page.sales-order-page .sells-stage-board{
  grid-template-columns:minmax(240px,1.15fr) repeat(3,minmax(0,1fr))
}

body.app-ui .sells-page.sales-order-page .sells-stage.is-active[data-status="ordered"]{
  background:#eff6ff;
  box-shadow:inset 0 -3px #3b82f6
}

body.app-ui .sells-page.sales-order-page .sells-stage.is-active[data-status="partial"]{
  background:#fff8eb;
  box-shadow:inset 0 -3px #e79a22
}

body.app-ui .sells-page.sales-order-page .sells-stage.is-active[data-status="completed"]{
  background:#eef9f2;
  box-shadow:inset 0 -3px #2e9d58
}

body.app-ui .sells-page.sales-order-page .sells-table-stage table{
  min-width:1180px
}

body.app-ui .sells-page.sales-order-page .sells-summary-strip{
  grid-template-columns:repeat(5,minmax(0,1fr))
}

@media (max-width:1280px){
  body.app-ui .sells-page.sales-order-page .sells-stage-board{
    grid-template-columns:1fr 1fr
  }
}

@media (max-width:640px){
  body.app-ui .sells-page.sales-order-page .sells-stage-board{
    grid-template-columns:1fr 1fr
  }

  body.app-ui .sells-page.sales-order-page .sells-stage-board>.sells-stage-intro{
    grid-column:1 / -1
  }
}

body.app-ui .edit_pso_status_modal .so-status-dialog{
  width:calc(100% - 32px);
  max-width:620px;
  margin:7vh auto
}

body.app-ui .edit_pso_status_modal .modal-content{
  overflow:hidden;
  border:1px solid #dfe6e2;
  border-radius:16px!important;
  background:var(--surface);
  box-shadow:0 24px 70px rgba(17,29,22,.2);
}

body.app-ui .edit_pso_status_modal .so-modal-header,
body.app-ui .edit_pso_status_modal .so-modal-footer{
  position:static!important
}

body.app-ui .edit_pso_status_modal .so-modal-header{
  display:grid;
  grid-template-columns:42px minmax(0,1fr) 36px;
  align-items:center;
  gap:12px;
  padding:16px 18px;
  border-bottom:1px solid #e7ece9;
}

body.app-ui .edit_pso_status_modal .so-modal-header__icon{
  display:flex;
  width:42px;
  height:42px;
  border-radius:11px;
  color:#21894a;
  background:#e8f6ed
}

body.app-ui .edit_pso_status_modal .so-modal-header h4{
  margin:0;
  color:#17201b;
  font-size:18px;
  font-weight:700
}

body.app-ui .edit_pso_status_modal .so-modal-header p{
  margin:3px 0 0;
  color:#8a958f;
  font-size:13px
}

body.app-ui .edit_pso_status_modal .so-modal-close{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border:0;
  border-radius:10px;
  color:#66736c;
  background:#f2f5f3;
}

body.app-ui .edit_pso_status_modal .so-modal-body{
  padding:18px
}

body.app-ui .edit_pso_status_modal .so-modal-label{
  display:block;
  margin-bottom:9px;
  color:#53605a;
  font-size:13px;
  font-weight:700
}

body.app-ui .edit_pso_status_modal .so-status-options{
  display:grid;
  gap:9px
}

body.app-ui .edit_pso_status_modal .so-status-option{
  position:relative;
  display:grid;
  grid-template-columns:40px minmax(0,1fr) 24px;
  align-items:center;
  gap:12px;
  min-height:68px;
  margin:0;
  padding:12px 14px;
  border:1px solid #dfe6e2;
  border-radius:12px;
  background:var(--surface);
  cursor:pointer;
  transition:border-color .18s ease,background-color .18s ease,box-shadow .18s ease;
}

body.app-ui .edit_pso_status_modal .so-status-option input{
  position:absolute;
  opacity:0;
  pointer-events:none
}

body.app-ui .edit_pso_status_modal .so-status-option__icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border-radius:10px
}

body.app-ui .edit_pso_status_modal .so-status-option__copy{
  display:flex;
  flex-direction:column
}

body.app-ui .edit_pso_status_modal .so-status-option__copy strong{
  color:#202823;
  font-size:14px
}

body.app-ui .edit_pso_status_modal .so-status-option__copy small{
  margin-top:3px;
  color:#8a958f;
  font-size:12px;
  font-weight:400
}

body.app-ui .edit_pso_status_modal .so-status-option__check{
  opacity:0
}

body.app-ui .edit_pso_status_modal .so-status-option.is-blue .so-status-option__icon{
  color:#2563eb;
  background:#eaf2ff
}

body.app-ui .edit_pso_status_modal .so-status-option.is-amber .so-status-option__icon{
  color:#c77700;
  background:#fff0d8
}

body.app-ui .edit_pso_status_modal .so-status-option.is-green .so-status-option__icon{
  color:#21894a;
  background:#e4f5eb
}

body.app-ui .edit_pso_status_modal .so-status-option:has(input:checked){
  border-color:#46a76c;
  background:#f4fbf7;
  box-shadow:0 0 0 2px rgba(51,157,91,.1)
}

body.app-ui .edit_pso_status_modal .so-status-option:has(input:checked) .so-status-option__check{
  color:#21894a;
  opacity:1
}

body.app-ui .edit_pso_status_modal .so-modal-footer{
  display:flex;
  justify-content:flex-end;
  gap:9px;
  padding:13px 18px;
  border-top:1px solid #e7ece9;
  background:#fafbfa;
}

body.app-ui .edit_pso_status_modal .so-modal-footer .btn-primary,
body.app-ui .edit_pso_status_modal .so-modal-footer .btn-ghost{
  min-width:108px;
  justify-content:center
}

@media(max-width:767px){
  body.app-ui .edit_pso_status_modal .so-modal-header{
    padding:14px
  }

  body.app-ui .edit_pso_status_modal .so-modal-body{
    padding:14px
  }
}

/* ============================================================
   Reusable components (used 5+ times) — edit once, applies everywhere.
   One-off layout stays as Tailwind utilities in the markup.

   ALL scoped under `.app-shell` (the new layout's permanent root wrapper) so clean
   semantic names (.card, .btn-primary, .nav-item) never collide with
   Bootstrap/AdminLTE still loaded on un-migrated pages — the extra
   ancestor gives higher specificity, so these always win inside .app-shell
   and have zero effect outside it. Keep this neutral scope as the app's
   stable style-isolation boundary after the migration is complete.
   ============================================================ */

/* ============================================================
   Plugin bridge — base styling for third-party widgets now that the
   legacy AdminLTE/Bootstrap bundle is NOT loaded on .app-shell pages.
   Kept OUTSIDE @layer so Tailwind never purges these runtime classes.
   Popups (daterangepicker, toastr, swal) mount on <body>, outside .app-shell,
   so those selectors are global.
   ============================================================ */

/* row / select-all checkboxes */

.app-shell .row-check,.app-shell .user-check{
  accent-color:var(--brand);
  width:16px;
  height:16px;
  cursor:pointer;
  vertical-align:middle
}

/* ---- Bootstrap-ish helpers still emitted by server-side code ---- */

.app-shell .form-control{
  width:100%;
  height:40px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--surface-2);
  padding:0 12px;
  font:inherit;
  font-size:13.5px;
  color:var(--text);
  outline:none;
  transition:border-color .12s,box-shadow .12s,background .12s
}

.app-shell .form-control:focus{
  border-color:var(--brand);
  background:var(--surface);
  box-shadow:0 0 0 3px rgba(21,154,77,.12)
}

.app-shell .form-control.error{
  border-color:var(--danger);
  background:#fff7f7;
  box-shadow:0 0 0 3px rgba(239,68,68,.1)
}

.app-shell label.error{
  display:block;
  margin-top:6px;
  color:var(--danger);
  font-size:12px;
  font-weight:700;
  line-height:1.35
}

.app-shell .password-control{
  position:relative
}

.app-shell .password-control .form-control{
  padding-right:48px
}

.app-shell .password-toggle{
  position:absolute;
  top:50%;
  right:6px;
  z-index:2;
  display:flex;
  width:34px;
  height:34px;
  transform:translateY(-50%);
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:8px;
  background:transparent;
  color:var(--text-3);
  cursor:pointer;
  transition:background .12s,color .12s
}

.app-shell .password-toggle:hover{
  background:var(--surface-3);
  color:var(--text-2)
}

.app-shell .password-toggle:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:1px
}

.app-shell .password-toggle svg{
  width:18px;
  height:18px;
  pointer-events:none
}

.app-shell .date-control{
  position:relative
}

.app-shell .date-control-input{
  padding-right:46px;
  cursor:pointer
}

.app-shell .date-control-trigger{
  position:absolute;
  top:50%;
  right:6px;
  z-index:2;
  display:flex;
  width:34px;
  height:34px;
  transform:translateY(-50%);
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:8px;
  background:transparent;
  color:var(--text-3);
  cursor:pointer;
  transition:background .12s,color .12s
}

.app-shell .date-control-trigger:hover{
  background:var(--surface-3);
  color:var(--brand)
}

.app-shell .date-control-trigger:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:1px
}

.app-shell .date-control-trigger svg{
  width:18px;
  height:18px;
  pointer-events:none
}

.app-shell .date-time-control{
  display:flex;
  min-width:0;
  height:42px;
  align-items:stretch;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface);
  overflow:hidden;
  transition:border-color .12s,box-shadow .12s
}

.app-shell .date-time-control:focus-within{
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(21,154,77,.12)
}

.app-shell .date-time-control>.date-control{
  flex:1;
  min-width:0;
  height:100%
}

.app-shell .date-time-control>.date-control>.date-control-input{
  height:100%!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important
}

.app-shell .date-time-control>.date-control>.date-control-trigger:hover{
  background:var(--surface-3)
}

.app-shell .date-time-part{
  display:flex;
  flex:none;
  height:100%;
  align-items:center;
  margin:0;
  padding:0 10px;
  border:0;
  border-left:1px solid var(--border);
  border-radius:0;
  background:var(--surface-2);
  cursor:pointer
}

.app-shell .date-time-part>input{
  width:auto;
  min-width:0;
  height:100%;
  padding:0;
  border:0;
  outline:0;
  background:transparent;
  color:var(--text);
  font:inherit;
  font-size:12.5px;
  font-weight:650;
  font-variant-numeric:tabular-nums;
  box-shadow:none;
  cursor:pointer
}

.app-shell .date-time-part>input::-webkit-calendar-picker-indicator{
  margin:0 0 0 6px;
  padding:0;
  color:var(--text-3);
  cursor:pointer
}

.app-shell .date-time-part>input::-webkit-inner-spin-button,.app-shell .date-time-part>input::-webkit-clear-button{
  display:none;
  -webkit-appearance:none
}

.app-shell .date-control-clear{
  display:grid;
  width:38px;
  flex:0 0 38px;
  place-items:center;
  border:0;
  border-left:1px solid var(--border);
  background:var(--surface);
  color:var(--text-3);
  cursor:pointer;
  transition:background .12s,color .12s
}

.app-shell .date-control-clear:hover{
  background:var(--danger-weak);
  color:var(--danger)
}

.app-shell .date-control-clear:focus-visible{
  position:relative;
  z-index:3;
  outline:2px solid var(--brand);
  outline-offset:-3px
}

.app-shell .date-control-clear svg{
  width:16px;
  height:16px;
  pointer-events:none
}

/* A date on its own clears from inside the field.

   The rules above dress the clear button for the date-and-time control, where it is a cell of its
   own beside the two halves and earns its divider and its own background. Borrowed by a plain date
   field it painted a paler slab over the right end of the box, divider and all, and read as
   something sitting outside the field rather than part of it. Here it is the calendar button's
   twin, one icon along. */

.app-shell .date-control.has-clear .date-control-input{
  padding-right:74px!important
}

.app-shell .date-control.has-clear .date-control-trigger{
  right:38px
}

.app-shell .date-control.has-clear .date-control-clear{
  position:absolute;
  top:50%;
  right:6px;
  width:30px;
  height:30px;
  flex:none;
  transform:translateY(-50%);
  border:0;
  border-radius:8px;
  background:transparent
}

.app-shell .date-control.has-clear .date-control-clear:hover{
  background:var(--danger-weak);
  color:var(--danger)
}

.app-shell .date-range-control{
  position:relative
}

.app-shell .date-range-control-input{
  padding-right:46px;
  cursor:pointer
}

.app-shell .date-range-control-trigger{
  position:absolute;
  top:50%;
  right:6px;
  z-index:2;
  display:flex;
  width:34px;
  height:34px;
  transform:translateY(-50%);
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:8px;
  background:transparent;
  color:var(--text-3);
  cursor:pointer;
  transition:background .12s,color .12s
}

.app-shell .date-range-control:hover .date-range-control-trigger,.app-shell .date-range-control.is-open .date-range-control-trigger{
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .date-range-control.is-open .date-range-control-input{
  border-color:var(--brand);
  background:var(--surface);
  box-shadow:0 0 0 3px rgba(21,154,77,.1)
}

.app-shell .date-range-control-trigger:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:1px
}

.app-shell .date-range-control-trigger svg{
  width:17px;
  height:17px;
  pointer-events:none
}

.app-shell textarea.form-control{
  height:auto;
  padding:10px 12px
}

.app-shell .form-group{
  margin-bottom:14px
}

.app-shell .row{
  display:flex;
  flex-wrap:wrap;
  margin-left:-8px;
  margin-right:-8px
}

.app-shell [class*="col-md-"],.app-shell [class*="col-sm-"],.app-shell [class*="col-xs-"],.app-shell [class*="col-lg-"],.app-shell [class*="col-xl-"]{
  width:100%;
  min-height:1px;
  padding-left:8px;
  padding-right:8px
}

/* The Bootstrap grid the legacy screens are laid out on. Every step is written out:
   a missing one silently falls back to the full-width base rule, which is how a
   col-md-8 chart beside a col-md-4 panel ended up stacked. */

@media (min-width:640px){
  .app-shell .col-sm-1{
    width:8.333333%
  }

  .app-shell .col-sm-2{
    width:16.666667%
  }

  .app-shell .col-sm-3{
    width:25%
  }

  .app-shell .col-sm-4{
    width:33.333333%
  }

  .app-shell .col-sm-5{
    width:41.666667%
  }

  .app-shell .col-sm-6{
    width:50%
  }

  .app-shell .col-sm-7{
    width:58.333333%
  }

  .app-shell .col-sm-8{
    width:66.666667%
  }

  .app-shell .col-sm-9{
    width:75%
  }

  .app-shell .col-sm-10{
    width:83.333333%
  }

  .app-shell .col-sm-11{
    width:91.666667%
  }

  .app-shell .col-sm-12{
    width:100%
  }
}

@media (min-width:768px){
  .app-shell .col-md-1{
    width:8.333333%
  }

  .app-shell .col-md-2{
    width:16.666667%
  }

  .app-shell .col-md-3{
    width:25%
  }

  .app-shell .col-md-4{
    width:33.333333%
  }

  .app-shell .col-md-5{
    width:41.666667%
  }

  .app-shell .col-md-6{
    width:50%
  }

  .app-shell .col-md-7{
    width:58.333333%
  }

  .app-shell .col-md-8{
    width:66.666667%
  }

  .app-shell .col-md-9{
    width:75%
  }

  .app-shell .col-md-10{
    width:83.333333%
  }

  .app-shell .col-md-11{
    width:91.666667%
  }

  .app-shell .col-md-12{
    width:100%
  }
}

@media (min-width:1024px){
  .app-shell .col-lg-1{
    width:8.333333%
  }

  .app-shell .col-lg-2{
    width:16.666667%
  }

  .app-shell .col-lg-3{
    width:25%
  }

  .app-shell .col-lg-4{
    width:33.333333%
  }

  .app-shell .col-lg-5{
    width:41.666667%
  }

  .app-shell .col-lg-6{
    width:50%
  }

  .app-shell .col-lg-7{
    width:58.333333%
  }

  .app-shell .col-lg-8{
    width:66.666667%
  }

  .app-shell .col-lg-9{
    width:75%
  }

  .app-shell .col-lg-10{
    width:83.333333%
  }

  .app-shell .col-lg-11{
    width:91.666667%
  }

  .app-shell .col-lg-12{
    width:100%
  }
}

.app-shell .clearfix{
  display:none
}

/* Scoped to the body, not the shell: modules append dialogs after .app-shell closes,
   and inside those a .hide element stayed visible — both halves of a two-state
   dialog showed at once. */

body.app-ui .hide{
  display:none!important
}

.app-shell .input-group{
  display:flex;
  width:100%;
  align-items:stretch
}

.app-shell .input-group .form-control{
  flex:1;
  min-width:0;
  border-top-right-radius:0;
  border-bottom-right-radius:0
}

.app-shell .input-group .select2-container{
  flex:1;
  min-width:0
}

.app-shell .input-group .input-group-addon + .select2-container .select2-selection{
  border-top-left-radius:0;
  border-bottom-left-radius:0
}

.app-shell .input-group-addon,.app-shell .input-group-btn{
  display:flex;
  align-items:center
}

.app-shell .input-group-addon{
  height:40px;
  padding:0 12px;
  border:1px solid var(--border);
  border-left:0;
  background:var(--surface-3);
  color:var(--text-2);
  font-size:13px;
  border-top-right-radius:10px;
  border-bottom-right-radius:10px
}

.app-shell .input-group>.input-group-addon:first-child{
  border-left:1px solid var(--border);
  border-right:0;
  border-radius:10px 0 0 10px
}

.app-shell .input-group>.input-group-addon:first-child+.form-control{
  border-top-left-radius:0;
  border-bottom-left-radius:0
}

.app-shell .input-group-btn .btn{
  height:40px;
  border-top-left-radius:0;
  border-bottom-left-radius:0;
  border-left:0;
  white-space:nowrap
}

.app-shell .checkbox label{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--text-2);
  font-size:13.5px;
  font-weight:500;
  cursor:pointer
}

.app-shell .checkbox input[type="checkbox"],.app-shell input[type="checkbox"].input-icheck{
  width:19px;
  height:19px;
  border-radius:6px;
  border:1px solid var(--border);
  background:var(--surface-2);
  color:var(--brand);
  cursor:pointer
}

.app-shell .checkbox input[type="checkbox"]:checked,.app-shell input[type="checkbox"].input-icheck:checked{
  border-color:var(--brand);
  background-color:var(--brand)
}

.app-shell .icheckbox_square-blue,
.app-shell .iradio_square-blue{
  width:20px;
  height:20px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:none;
  vertical-align:middle;
  border:1.5px solid var(--border);
  background:var(--surface-2);
  cursor:pointer;
  transition:background .12s,border-color .12s,box-shadow .12s;
  position:relative
}

.app-shell .icheckbox_square-blue{
  border-radius:6px
}

.app-shell .iradio_square-blue{
  border-radius:999px
}

.app-shell .icheckbox_square-blue.hover,
.app-shell .iradio_square-blue.hover{
  border-color:var(--brand)
}

.app-shell .icheckbox_square-blue.checked,
.app-shell .iradio_square-blue.checked{
  border-color:var(--brand);
  background:var(--brand);
  color:#fff
}

.app-shell .icheckbox_square-blue.checked:after{
  content:"";
  width:10px;
  height:6px;
  border-left:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(-45deg);
  margin-top:-2px
}

.app-shell .iradio_square-blue.checked:after{
  content:"";
  width:8px;
  height:8px;
  border-radius:999px;
  background:currentColor
}

.app-shell .icheckbox_square-blue.disabled,
.app-shell .iradio_square-blue.disabled{
  opacity:.55;
  cursor:not-allowed
}

.app-shell .icheckbox_square-blue input,
.app-shell .iradio_square-blue input{
  cursor:inherit
}

.app-shell .help-block{
  display:block;
  margin-top:6px;
  color:var(--text-3);
  font-size:12px;
  line-height:1.45
}

.app-shell .pin-panel{
  max-width:430px;
  padding:14px;
  border:1px solid var(--border);
  border-radius:13px;
  background:linear-gradient(180deg,var(--surface) 0%,var(--surface-2) 100%);
  box-shadow:var(--shadow-sm)
}

.app-shell .pin-panel-badge{
  display:inline-flex;
  align-items:center;
  height:24px;
  padding:0 9px;
  border-radius:999px;
  background:var(--brand-weak);
  color:var(--brand-strong);
  font-size:11.5px;
  font-weight:800;
  white-space:nowrap
}

.app-shell .pin-grid{
  display:grid;
  grid-template-columns:repeat(6,42px);
  gap:8px;
  margin-top:12px
}

.app-shell .pin-box{
  width:42px;
  height:44px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface);
  color:var(--text);
  font:inherit;
  font-size:18px;
  font-weight:800;
  text-align:center;
  outline:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75);
  transition:border-color .12s,box-shadow .12s,background .12s
}

.app-shell .pin-box:focus{
  border-color:var(--brand);
  background:var(--surface);
  box-shadow:0 0 0 3px rgba(21,154,77,.12)
}

.app-shell .pin-box.error{
  border-color:var(--danger);
  box-shadow:0 0 0 3px rgba(239,68,68,.1)
}

.app-shell .service_staff_pin_div label.error{
  display:block;
  margin-top:8px;
  color:var(--danger);
  font-size:12px;
  font-weight:700
}

@media (max-width:520px){
  .app-shell .pin-grid{
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:6px
  }

  .app-shell .pin-box{
    width:100%;
    height:42px
  }
}

.app-shell .text-muted{
  color:var(--text-3)
}

.app-shell .text-success{
  color:var(--brand-strong)
}

.app-shell .text-danger{
  color:var(--danger)
}

.app-shell .text-center{
  text-align:center
}

.app-shell .pull-right{
  float:right
}

.app-shell hr{
  border:0;
  border-top:1px solid var(--border);
  margin:16px 0
}

.app-shell .btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  height:36px;
  padding:0 14px;
  border-radius:9px;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text-2);
  font:inherit;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  text-decoration:none
}

.app-shell .btn:hover{
  background:var(--surface-3);
  color:var(--text)
}

.app-shell .btn-primary,.app-shell .btn.btn-primary{
  background:var(--brand);
  border-color:var(--brand);
  color:#fff
}

.app-shell .btn-primary:hover{
  background:var(--brand-strong)
}

.app-shell .btn-danger{
  background:var(--danger);
  border-color:var(--danger);
  color:#fff;
  box-shadow:none
}

.app-shell .btn-danger:hover{
  background:color-mix(in srgb,var(--danger) 84%,#000)
}

/* Row scale. The action column of a DataTable holds two or three of these, and a button
   built for a form footer is half the height of the row it would sit in. */

.app-shell .btn-sm{
  height:30px;
  padding:0 11px;
  border-radius:8px;
  font-size:12.5px;
  gap:6px;
  box-shadow:none
}

/* The same buttons outside .app-shell.

   The admin screens wrap their content in .app-shell, but the standalone shells — sign-in,
   the installer, the repair-status lookup, the contact portal — have no such wrapper; they
   only carry `app-ui` on the body. The component rules above are scoped to .app-shell, so
   without this a button on those pages renders as unstyled text. */

body.app-ui .btn-primary{
  height:42px;
  padding:0 18px;
  border-radius:11px;
  border:none;
  background:var(--brand);
  color:#fff;
  font:inherit;
  font-weight:600;
  font-size:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  cursor:pointer;
  text-decoration:none
}

body.app-ui .btn-primary:hover{
  background:var(--brand-strong)
}

body.app-ui .btn-ghost{
  height:42px;
  padding:0 18px;
  border-radius:11px;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text-2);
  font:inherit;
  font-weight:600;
  font-size:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  cursor:pointer;
  text-decoration:none
}

body.app-ui .btn-ghost:hover{
  background:var(--surface-3);
  color:var(--text)
}

body.app-ui .btn-danger{
  background:var(--danger);
  border-color:var(--danger);
  color:#fff;
  box-shadow:none
}

body.app-ui .btn-sm{
  height:30px;
  padding:0 11px;
  border-radius:8px;
  font-size:12.5px;
  gap:6px;
  box-shadow:none
}

/* Two pieces the pricing pages used daisyUI for: the "popular" tag on a package card, and
   the monthly/annual switch. The switch is a real checkbox — the page's JS reads .checked —
   so it is styled rather than replaced by a button. */

body.app-ui .chip-brand{
  display:inline-flex;
  align-items:center;
  padding:4px 12px;
  border-radius:999px;
  background:var(--brand);
  color:#fff;
  font-size:12px;
  font-weight:700;
  line-height:1
}

body.app-ui .ui-switch{
  -moz-appearance:none;
       appearance:none;
  -webkit-appearance:none;
  position:relative;
  width:42px;
  height:24px;
  flex:none;
  border:none;
  border-radius:20px;
  background:rgba(255,255,255,.45);
  cursor:pointer;
  transition:background .18s
}

body.app-ui .ui-switch:checked{
  background:var(--brand)
}

body.app-ui .ui-switch::after{
  content:"";
  position:absolute;
  top:3px;
  left:3px;
  width:18px;
  height:18px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.25);
  transition:left .18s
}

body.app-ui .ui-switch:checked::after{
  left:21px
}

/* Half of these are anchors, and an anchor keeps its underline and link colour otherwise. */

.app-shell a.btn-primary,.app-shell a.btn-ghost,.app-shell a.btn{
  text-decoration:none
}

.app-shell a.btn-primary:hover,.app-shell a.btn-ghost:hover{
  text-decoration:none
}

.app-shell .btn-group{
  display:inline-flex;
  position:relative
}

.app-shell .dropdown-toggle{
  cursor:pointer
}

.app-shell .dropdown-toggle .caret{
  display:inline-block;
  width:0;
  height:0;
  margin-left:6px;
  border-top:4px solid;
  border-right:4px solid transparent;
  border-left:4px solid transparent
}

/* Bootstrap-3 dropdown: hidden until parent gets .open (toggled by vendor JS) */

.app-shell .dropdown-menu{
  display:none;
  position:absolute;
  right:0;
  top:100%;
  z-index:1000;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:11px;
  box-shadow:var(--shadow-md);
  padding:6px;
  min-width:180px;
  list-style:none;
  margin:4px 0 0;
  text-align:left
}

.app-shell .open>.dropdown-menu,.app-shell .btn-group.open>.dropdown-menu,.app-shell .dropdown.open>.dropdown-menu,.app-shell .show>.dropdown-menu{
  display:block
}

/* The Columns menu is a dropdown-menu DataTables hangs off the body, so it never sits under an
   .open ancestor and the rule above kept it hidden — the button built the panel and hid it in the
   same breath. It is its own thing: shown, panelled, and scrollable when a table has more columns
   than fit the screen. */

ul.dt-button-collection.dropdown-menu,div.dt-button-collection{
  display:block;
  position:absolute;
  z-index:2002;
  max-height:60vh;
  overflow-y:auto;
  min-width:220px;
  margin:4px 0 0;
  padding:6px;
  border:1px solid var(--border);
  border-radius:11px;
  background:var(--surface);
  box-shadow:0 16px 38px -16px rgba(16,32,24,.42);
  list-style:none
}

/* The Bootstrap integration in vendor.js retags collection buttons from <a> to <li>, so the row to
   dress is the li's anchor on some builds and the button itself on others. */

.dt-button-collection .dt-button{
  display:block;
  margin:0;
  list-style:none
}

.dt-button-collection .dt-button>a,.dt-button-collection a.dt-button,.dt-button-collection button.dt-button{
  display:flex;
  align-items:center;
  gap:9px;
  width:100%;
  padding:6px 9px;
  border:0;
  border-radius:7px;
  background:transparent;
  color:var(--text-2);
  font-size:12.5px;
  font-weight:600;
  line-height:1.35;
  text-align:left;
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer
}

/* Nearly every column is on, so filling each showing row with colour made the menu one block of
   green with the few hidden columns punched out of it. The state belongs in a checkbox at the head
   of the row; the row itself stays quiet and only answers the pointer. */

.dt-button-collection .dt-button>a::before,.dt-button-collection a.dt-button::before,.dt-button-collection button.dt-button::before{
  content:'\2713';
  display:inline-flex;
  flex:0 0 15px;
  align-items:center;
  justify-content:center;
  width:15px;
  height:15px;
  border:1px solid var(--border);
  border-radius:4px;
  background:var(--surface);
  color:transparent;
  font-size:10px;
  font-weight:800;
  line-height:1
}

.dt-button-collection .dt-button:hover>a,.dt-button-collection a.dt-button:hover,.dt-button-collection button.dt-button:hover{
  background:var(--surface-2);
  color:var(--text)
}

.dt-button-collection .dt-button.active>a,.dt-button-collection a.dt-button.active,.dt-button-collection button.dt-button.active{
  color:var(--text);
  font-weight:700
}

.dt-button-collection .dt-button.active>a::before,.dt-button-collection a.dt-button.active::before,.dt-button-collection button.dt-button.active::before{
  border-color:var(--brand);
  background:var(--brand);
  color:#fff
}

div.dt-button-background{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:2001
}

.app-shell .dropdown-menu>li>a,.app-shell .dropdown-menu>li>button,.app-shell .dropdown-menu li a{
  display:block;
  width:100%;
  text-align:left;
  padding:8px 12px;
  border-radius:8px;
  color:var(--text-2);
  font-size:13px;
  text-decoration:none;
  background:none;
  border:none;
  cursor:pointer
}

.app-shell .dropdown-menu>li>a:hover,.app-shell .dropdown-menu li a:hover{
  background:var(--surface-3);
  color:var(--text)
}

.app-shell .dropdown-menu .divider{
  height:1px;
  margin:5px 0;
  background:var(--border-2)
}

.app-shell .label,.app-shell .badge-pill{
  display:inline-flex;
  align-items:center;
  padding:3px 9px;
  border-radius:8px;
  font-size:11.5px;
  font-weight:600
}

.app-shell .label-success{
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .label-danger{
  background:var(--danger-weak);
  color:var(--danger)
}

.app-shell .bg-gray{
  background:var(--surface-3);
  color:var(--text-2)
}

.app-shell .nav-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:0;
  padding:0;
  list-style:none;
  border-bottom:1px solid var(--border)
}

.app-shell .nav-tabs>li{
  margin:0
}

.app-shell .nav-tabs>li>a{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:12px 14px;
  border-radius:10px 10px 0 0;
  color:var(--text-2);
  font-size:13px;
  font-weight:700;
  text-decoration:none
}

.app-shell .nav-tabs>li.active>a,.app-shell .nav-tabs>li>a:hover{
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .tab-content{
  padding:18px 0 0
}

.app-shell .tab-pane{
  display:none
}

.app-shell .tab-pane.active{
  display:block
}

.app-shell .list-group{
  margin:16px 0 0;
  padding:0;
  list-style:none;
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden
}

.app-shell .list-group-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:11px 13px;
  border-bottom:1px solid var(--border-2);
  color:var(--text-2);
  font-size:13px
}

.app-shell .list-group-item:last-child{
  border-bottom:0
}

.app-shell .profile-user-img{
  width:104px;
  height:104px;
  border-radius:24px;
  -o-object-fit:cover;
     object-fit:cover;
  border:4px solid var(--surface);
  box-shadow:var(--shadow-md);
  margin:0 auto
}

.app-shell .profile-username{
  margin:14px 0 4px;
  text-align:center;
  color:var(--text);
  font-size:20px;
  font-weight:800
}

/* shared page rhythm for every migrated screen */

.app-shell .page-shell{
  width:100%;
  max-width:1500px;
  margin-left:auto;
  margin-right:auto;
  padding:16px 16px 26px;
  display:flex;
  flex-direction:column;
  gap:14px
}

/* The 16px gutter was written for a monitor and never came down. On a 376-pixel screen it spends
   32 pixels — an eleventh of the width — on empty margin either side of every card on every
   screen, which reads as the page being narrower than the phone. The dashboard had already cut
   its own; this is the same cut for the rest of them. */

/* One breakpoint, one answer. This was written at 700px and then written again at 767.98px with
   different numbers — the later one won, so the gutter the comment above describes was never the
   gutter the page drew. */

@media (max-width:767.98px){
  .app-shell .page-shell{
    padding:11px 10px 20px;
    gap:11px
  }
}

/* A phone is 390 pixels wide and this stack was spending about a hundred of them on chrome: the
   page gutter, then a card's border and padding, then a legacy grid's gutters inside it, then a
   second card's border and padding around the table. Every level is defensible on a desktop and
   none of them is on a phone, where the outer card already fills the screen and no longer reads
   as a container at all.
   The frames are dropped rather than the paddings shrunk — 14px is the smallest a thumb wants,
   and a card inside another card has nothing to be separated from. The outermost keeps its frame
   so sections still read apart; the ones inside go full width. */

@media (max-width:767.98px){
  .app-shell :is(.box,.card,.workspace-card,.data-table-card,.filter-card) :is(.box,.card,.workspace-card,.data-table-card,.filter-card){
    border-left:0;
    border-right:0;
    border-radius:0;
    box-shadow:none;
    margin-left:0;
    margin-right:0
  }

  /* One gutter, once. The page already insets the card from the screen edge and the card that
     holds a tabbed report insets its pane again — the same 12 and 14 pixels twice over, on the
     narrowest screen there is. The inner one goes; what sits in the pane keeps its own padding,
     so nothing ends up against the edge. */

  .app-shell .report-tabbed-card-padded .tab-content>.tab-pane{
    padding-left:0;
    padding-right:0
  }

  /* The legacy grid's gutters, which sit inside all of that and buy nothing once the columns
     have stacked. */

  .app-shell .content .row{
    margin-left:0;
    margin-right:0
  }

  .app-shell .content [class*=col-]{
    padding-left:0;
    padding-right:0
  }

  /* The scroll arrows hang 14px outside the table's body so they clear the rows. The card clips
     what leaves it, so on a narrow screen the right-hand one was cut in half at the card's edge. */

  .app-shell .box>.box-body.table-scroll-host>.table-scroll-arrows{
    left:0;
    right:0
  }
}

/* Wide variant: drops the centred 1500px cap so the page uses the whole content area on
   a large monitor. The side gutter stays — running cards right up to the edge was tried
   and reads as broken. Opt in per screen with <x-page class="... is-wide">. */

.app-shell .page-shell.is-wide{
  max-width:none
}

/* user create/edit form canvas */

.app-shell .user-form-page{
  max-width:1040px;
  padding-bottom:60px
}

.app-shell .user-form-page .h1{
  font-size:24px;
  line-height:1.2
}

.app-shell .user-form-page .crumb{
  margin-bottom:4px
}

.app-shell .user-form-page .card{
  border-radius:14px;
  box-shadow:var(--shadow-sm)
}

.app-shell .user-form-page .sec-head{
  padding:18px 22px
}

.app-shell .user-form-page .sec-head + div{
  padding:22px
}

.app-shell .user-form-page .sec-ico{
  width:36px;
  height:36px;
  border-radius:10px
}

.app-shell .user-form-page .flabel{
  font-size:12.5px;
  margin-bottom:7px
}

.app-shell .user-form-page .form-control,
.app-shell .user-form-page .select2-container--default .select2-selection--single{
  height:42px
}

.app-shell .user-form-page textarea.form-control{
  min-height:76px
}

.app-shell .user-form-page .input-group-addon,
.app-shell .user-form-page .input-group-btn .btn{
  height:42px
}

.app-shell .user-form-page .help-block{
  margin-top:7px;
  max-width:560px
}

.app-shell .user-form-actions,
.app-shell .form-page-actions{
  position:sticky;
  bottom:0;
  z-index:20;
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:4px;
  padding:14px 0;
  background:linear-gradient(to top,var(--bg) 72%,rgba(238,241,239,0))
}

.app-shell .user-form-actions .btn-ghost,
.app-shell .user-form-actions .btn-primary,
.app-shell .form-page-actions .btn-ghost,
.app-shell .form-page-actions .btn-primary{
  height:44px;
  min-width:92px;
  padding:0 20px
}

.app-shell .user-form-actions .btn-primary,
.app-shell .form-page-actions .btn-primary{
  min-width:104px
}

.app-shell .expense-form-actions .btn-ghost,
.app-shell .expense-form-actions .btn-primary{
  justify-content:center
}

.app-shell .form-submit-default,
.app-shell .form-submit-progress{
  align-items:center;
  justify-content:center;
  gap:8px
}

.app-shell .form-submit-default{
  display:inline-flex
}

.app-shell .form-submit-progress{
  display:none
}

.app-shell .form-submit-button.is-loading .form-submit-default{
  display:none
}

.app-shell .form-submit-button.is-loading .form-submit-progress{
  display:inline-flex
}

.app-shell .form-submit-button:disabled{
  cursor:wait;
  opacity:.78;
  box-shadow:none;
  pointer-events:none
}

/* Held back, rather than busy. A save waiting on a blank required field is not working on
   anything, so it says not-allowed instead of wait — and it keeps its pointer events, or the
   hover text explaining why it cannot be pressed would never appear. */

.app-shell [data-require-complete-submit].is-incomplete:disabled{
  cursor:not-allowed;
  opacity:.55;
  box-shadow:none;
  pointer-events:auto
}

/* A busy control must stay readable on light buttons too: the default spinner is white,
   which disappears on btn-ghost and other outline buttons. */

.app-shell .btn-ghost.is-loading .form-submit-spinner,
.app-shell .act.is-loading .form-submit-spinner,
.app-shell .btn-default.is-loading .form-submit-spinner,
.app-shell .form-submit-button.is-loading:not(.btn-primary):not(.tw-dw-btn-primary) .form-submit-spinner{
  border-color:color-mix(in srgb,var(--brand) 26%,transparent);
  border-top-color:var(--brand-strong)
}

.app-shell .form-submit-button.is-loading{
  position:relative
}

/* While a form is working its fields are locked out, so the whole card reads as busy. */

.app-shell form[data-form-busy]{
  position:relative
}

.app-shell form[data-form-busy]:after{
  content:"";
  position:absolute;
  inset:0;
  z-index:5;
  border-radius:inherit;
  background:color-mix(in srgb,var(--surface) 42%,transparent);
  cursor:wait
}

.app-shell .form-submit-spinner{
  width:15px;
  height:15px;
  flex:none;
  border:2px solid rgba(255,255,255,.45);
  border-top-color:#fff;
  border-radius:50%;
  animation:note-submit-spin .7s linear infinite
}

/* roles list + permission editor */

.app-shell .roles-page .table-responsive{
  overflow:visible
}

.app-shell .roles-page .dataTables_wrapper{
  overflow:visible;
  padding:0
}

.app-shell .roles-table-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:-8px -8px 0;
  padding:14px 16px;
  border-bottom:1px solid var(--border-2);
  background:var(--surface)
}

.app-shell .role-list-search{
  position:relative;
  width:min(100%,380px)
}

.app-shell .role-list-search>svg{
  position:absolute;
  left:12px;
  top:50%;
  z-index:1;
  color:var(--text-3);
  transform:translateY(-50%);
  pointer-events:none
}

.app-shell .role-list-search .finput{
  height:40px;
  padding-left:37px;
  background:var(--surface-2)
}

.app-shell .role-page-size{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0;
  color:var(--text-3);
  font-size:12px;
  font-weight:700
}

.app-shell .role-page-size .finput{
  width:76px;
  height:40px;
  padding-right:27px;
  background:var(--surface-2)
}

.app-shell .roles-table thead{
  background:var(--surface-2)
}

.app-shell .roles-table tbody tr{
  transition:background .12s
}

.app-shell .roles-table tbody tr:hover{
  background:color-mix(in srgb,var(--brand-weak) 42%,var(--surface))
}

.app-shell .roles-table tbody td{
  height:64px;
  padding:11px 16px;
  border-bottom:1px solid var(--border-2);
  vertical-align:middle
}

.app-shell .roles-table tbody td:first-child{
  font-weight:700;
  color:var(--text)
}

.app-shell .roles-table tbody td:last-child{
  text-align:right;
  white-space:nowrap
}

.app-shell .role-name-cell{
  display:flex;
  align-items:center;
  gap:11px
}

.app-shell .role-row-icon{
  display:inline-flex;
  width:34px;
  height:34px;
  flex:none;
  align-items:center;
  justify-content:center;
  border-radius:9px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .role-name-text{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .roles-table tbody td:last-child>a,
.app-shell .roles-table tbody td:last-child>button{
  display:inline-flex;
  height:34px;
  align-items:center;
  justify-content:center;
  gap:6px;
  margin-left:6px;
  padding:0 12px;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface);
  color:var(--text-2);
  font:inherit;
  font-size:12.5px;
  font-weight:700;
  cursor:pointer;
  transition:background .12s,border-color .12s,color .12s,box-shadow .12s
}

.app-shell .roles-table tbody td:last-child>a:hover{
  border-color:var(--brand);
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .roles-table tbody td:last-child>button{
  border-color:color-mix(in srgb,var(--danger) 48%,var(--border));
  color:var(--danger)
}

.app-shell .roles-table tbody td:last-child>button:hover{
  border-color:var(--danger);
  background:var(--danger-weak)
}

.app-shell .roles-table tbody td:last-child .glyphicon{
  display:none
}

.app-shell .roles-table .role-action-edit svg,
.app-shell .roles-table .role-action-delete svg{
  width:14px;
  height:14px;
  flex:none
}

.app-shell .roles-table .role-action-edit svg{
  color:var(--brand-strong)
}

.app-shell .roles-table-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:58px;
  padding:10px 14px
}

.app-shell .roles-table-footer .dataTables_info,
.app-shell .roles-table-footer .dataTables_paginate{
  padding:0
}

.app-shell .roles-table--cards{
  display:block;
  width:100%!important;
  border:0
}

.app-shell .roles-table--cards thead{
  display:none
}

.app-shell .roles-table--cards tbody{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  padding:16px;
  background:var(--surface)
}

.app-shell .roles-table--cards tbody tr{
  display:flex;
  min-width:0;
  min-height:164px;
  flex-direction:column;
  border:1px solid var(--border);
  border-radius:11px;
  background:var(--surface);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
  transition:border-color .12s,box-shadow .12s,transform .12s
}

.app-shell .roles-table--cards tbody tr:hover{
  border-color:color-mix(in srgb,var(--brand) 32%,var(--border));
  background:var(--surface);
  box-shadow:var(--shadow-md);
  transform:translateY(-1px)
}

.app-shell .roles-table--cards tbody td{
  display:flex;
  width:100%!important;
  height:auto;
  border:0
}

.app-shell .roles-table--cards tbody td:first-child{
  flex:0 0 auto;
  padding:16px 16px 10px
}

.app-shell .roles-table--cards tbody td:nth-child(2){
  flex:1;
  padding:0 12px 12px
}

.app-shell .roles-table--cards tbody td:last-child{
  min-height:50px;
  align-items:center;
  justify-content:flex-end;
  padding:8px 10px;
  border-top:1px solid var(--border-2);
  background:var(--surface)
}

.app-shell .roles-table--cards tbody td:last-child>a,
.app-shell .roles-table--cards tbody td:last-child>button{
  height:32px;
  margin-left:6px;
  padding:0 10px;
  font-size:11.5px
}

.app-shell .roles-table--cards tbody tr:has(td.dataTables_empty){
  grid-column:1/-1;
  min-height:170px;
  align-items:center;
  justify-content:center
}

.app-shell .roles-table--cards tbody td.dataTables_empty{
  align-items:center;
  justify-content:center;
  padding:28px;
  color:var(--text-3)
}

.app-shell .role-members-trigger{
  display:grid;
  width:100%;
  min-height:54px;
  grid-template-columns:auto minmax(0,1fr) 18px;
  align-items:center;
  gap:11px;
  padding:9px 10px;
  border:1px solid transparent;
  border-radius:8px;
  background:var(--surface);
  color:var(--text-2);
  font:inherit;
  text-align:left;
  cursor:pointer;
  transition:border-color .12s,background .12s,box-shadow .12s
}

.app-shell .role-members-trigger:hover{
  border-color:color-mix(in srgb,var(--brand) 28%,var(--border));
  background:color-mix(in srgb,var(--brand-weak) 42%,var(--surface));
  box-shadow:0 4px 12px -10px rgba(16,32,24,.45)
}

.app-shell .role-members-trigger:focus-visible{
  outline:0;
  border-color:var(--brand);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 12%,transparent)
}

.app-shell .role-avatar-stack{
  display:flex;
  align-items:center;
  padding-left:7px
}

.app-shell .role-member-avatar{
  position:relative;
  display:inline-flex;
  width:30px;
  height:30px;
  align-items:center;
  justify-content:center;
  margin-left:-7px;
  overflow:hidden;
  border:2px solid var(--surface);
  border-radius:50%;
  background:var(--member-color,var(--brand));
  color:#fff;
  font-size:9px;
  font-weight:800;
  letter-spacing:0;
  box-shadow:0 1px 3px rgba(16,32,24,.12)
}

.app-shell .role-members-trigger:hover .role-member-avatar{
  border-color:var(--brand-weak)
}

.app-shell .role-member-avatar img{
  width:100%;
  height:100%;
  -o-object-fit:cover;
     object-fit:cover
}

.app-shell .role-member-avatar-empty{
  background:var(--surface);
  color:var(--text-3)
}

.app-shell .role-member-avatar-more{
  z-index:4;
  background:var(--text-2);
  font-size:9px
}

.app-shell .role-members-summary{
  display:flex;
  min-width:0;
  flex-direction:column;
  gap:1px
}

.app-shell .role-members-summary strong{
  color:var(--text);
  font-size:12px;
  line-height:1.25
}

.app-shell .role-members-summary>span{
  overflow:hidden;
  color:var(--text-3);
  font-size:10.5px;
  line-height:1.25;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .role-members-chevron{
  width:16px;
  height:16px;
  color:var(--text-3);
  transition:color .12s,transform .12s
}

.app-shell .role-members-trigger:hover .role-members-chevron{
  color:var(--brand-strong);
  transform:translateX(2px)
}

.app-shell .role-members-dialog{
  width:min(760px,100%)
}

.app-shell .role-members-modal-content .modal-header{
  padding:16px 18px
}

.app-shell .role-members-modal-heading{
  display:flex;
  min-width:0;
  align-items:center;
  gap:11px
}

.app-shell .role-members-modal-heading p{
  margin:2px 0 0;
  color:var(--text-3);
  font-size:11.5px
}

.app-shell .role-members-modal-content .modal-body{
  max-height:min(64vh,620px);
  padding:18px;
  overflow-y:auto;
  background:var(--surface-2)
}

.app-shell .role-members-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px
}

.app-shell .role-member-card{
  min-width:0;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface);
  box-shadow:var(--shadow-sm);
  overflow:hidden
}

.app-shell .role-member-card-main{
  display:grid;
  grid-template-columns:44px minmax(0,1fr) auto;
  align-items:center;
  gap:11px;
  padding:13px
}

.app-shell .role-member-profile-avatar{
  display:flex;
  width:44px;
  height:44px;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border:2px solid var(--surface);
  border-radius:50%;
  color:#fff;
  font-size:12px;
  font-weight:800;
  letter-spacing:0;
  box-shadow:0 0 0 1px var(--border)
}

.app-shell .role-member-profile-avatar img{
  width:100%;
  height:100%;
  -o-object-fit:cover;
     object-fit:cover
}

.app-shell .role-member-identity{
  display:flex;
  min-width:0;
  flex-direction:column;
  gap:2px
}

.app-shell .role-member-identity strong{
  overflow:hidden;
  color:var(--text);
  font-size:12.5px;
  line-height:1.35;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .role-member-identity span{
  overflow:hidden;
  color:var(--text-3);
  font-size:11px;
  line-height:1.3;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .role-member-status{
  display:inline-flex;
  align-items:center;
  padding:3px 7px;
  border-radius:999px;
  background:var(--danger-weak);
  color:var(--danger);
  font-size:9.5px;
  font-weight:750;
  white-space:nowrap
}

.app-shell .role-member-status.is-active{
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .role-member-details{
  display:grid;
  grid-template-columns:1fr;
  gap:6px;
  padding:10px 13px;
  border-top:1px solid var(--border-2);
  background:var(--surface-2)
}

.app-shell .role-member-details>span{
  display:flex;
  min-width:0;
  align-items:center;
  gap:7px;
  color:var(--text-2);
  font-size:10.5px
}

.app-shell .role-member-details svg{
  flex:none;
  color:var(--text-3)
}

.app-shell .role-member-details>span>span{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .role-members-empty{
  grid-column:1/-1;
  display:flex;
  min-height:210px;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:7px;
  color:var(--text-3);
  text-align:center
}

.app-shell .role-members-empty>svg{
  width:38px;
  height:38px;
  padding:9px;
  border-radius:10px;
  background:var(--surface-3);
  color:var(--brand-strong)
}

.app-shell .role-members-empty strong{
  color:var(--text);
  font-size:13px
}

.app-shell .role-members-empty span{
  font-size:11.5px
}

.app-shell .role-members-modal-content .modal-footer{
  justify-content:flex-end;
  padding:12px 18px
}

@media (max-width:1100px){
  .app-shell .roles-table--cards tbody{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}

@media (max-width:760px){
  .app-shell .role-members-list{
    grid-template-columns:1fr
  }
}

@media (max-width:640px){
  .app-shell .roles-table-toolbar{
    align-items:stretch;
    flex-direction:column
  }

  .app-shell .role-list-search{
    width:100%
  }

  .app-shell .role-page-size{
    justify-content:space-between
  }

  .app-shell .roles-table-footer{
    align-items:flex-start;
    flex-direction:column
  }

  .app-shell .roles-table--cards tbody{
    grid-template-columns:1fr;
    padding:10px
  }

  .app-shell .role-members-modal-content .modal-body{
    padding:12px
  }
}

.app-shell .role-form-page{
  max-width:1320px;
  padding-bottom:60px
}

.app-shell .role-form-page .h1{
  font-size:24px;
  line-height:1.2
}

.app-shell .role-form-page .crumb{
  margin-bottom:4px
}

.app-shell .role-form-page .card{
  border-radius:14px;
  box-shadow:var(--shadow-sm)
}

.app-shell .role-form-page .sec-head{
  padding:18px 22px
}

.app-shell .role-form-page .sec-ico{
  width:36px;
  height:36px;
  border-radius:10px
}

.app-shell .role-form-page .flabel{
  font-size:12.5px;
  margin-bottom:7px
}

.app-shell .role-form-page .form-control{
  height:42px
}

.app-shell .role-permissions-body{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:14px;
  background:var(--surface-2)
}

.app-shell .role-permissions-body>hr{
  display:none
}

.app-shell .role-permissions-body>.row{
  display:grid;
  grid-template-columns:minmax(190px,230px) minmax(0,1fr);
  grid-template-rows:auto auto;
  gap:8px 18px;
  margin:0;
  padding:16px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface)
}

.app-shell .role-permissions-body>.row>[class*="col-md-"]{
  width:auto;
  padding:0
}

.app-shell .role-permissions-body>.row>.col-md-1{
  grid-column:1;
  grid-row:1
}

.app-shell .role-permissions-body>.row>.col-md-2{
  grid-column:1;
  grid-row:2
}

.app-shell .role-permissions-body>.row>.col-md-3{
  grid-column:1;
  grid-row:1/span 2
}

.app-shell .role-permissions-body>.row>.col-md-9{
  grid-column:2;
  grid-row:1/span 2;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px
}

.app-shell .role-permissions-body h4{
  margin:2px 0 0;
  color:var(--text);
  font-size:14px;
  font-weight:800;
  line-height:1.35
}

.app-shell .role-permissions-body .col-md-2 .checkbox label{
  display:inline-flex;
  min-height:34px;
  padding:6px 10px;
  border-color:transparent;
  background:var(--brand-weak);
  color:var(--brand-strong);
  font-size:12px;
  font-weight:800
}

.app-shell .role-permissions-body .col-md-9>.col-md-12{
  width:auto;
  padding:0
}

.app-shell .role-permissions-body .checkbox{
  min-width:0;
  margin:0
}

.app-shell .role-permissions-body .checkbox label{
  display:flex;
  min-height:40px;
  align-items:center;
  gap:9px;
  margin:0;
  padding:9px 11px;
  border:1px solid var(--border-2);
  border-radius:9px;
  background:var(--surface-2);
  color:var(--text-2);
  font-size:12.5px;
  font-weight:600;
  line-height:1.35;
  cursor:pointer;
  transition:background .12s,border-color .12s,color .12s
}

.app-shell .role-permissions-body .checkbox label:hover{
  border-color:var(--brand);
  background:var(--brand-weak);
  color:var(--text)
}

.app-shell .role-permissions-body .checkbox:has(.checked) label,
.app-shell .role-permissions-body .checkbox:has(input:checked) label{
  border-color:color-mix(in srgb,var(--brand) 35%,var(--border));
  background:var(--brand-weak);
  color:var(--brand-ink)
}

.app-shell .role-permissions-body .checkbox .icheckbox_square-blue,
.app-shell .role-permissions-body .checkbox .iradio_square-blue{
  align-self:flex-start;
  margin-top:0
}

.app-shell .role-form-actions{
  position:sticky;
  bottom:0;
  z-index:20;
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:4px;
  padding:14px 0;
  background:linear-gradient(to top,var(--bg) 72%,rgba(238,241,239,0))
}

.app-shell .role-form-actions .btn-ghost,
.app-shell .role-form-actions .btn-primary{
  height:44px;
  min-width:96px;
  padding:0 20px
}

.app-shell .role-form-actions .btn-primary{
  min-width:132px
}

@media (max-width:900px){
  .app-shell .role-permissions-body>.row{
    grid-template-columns:1fr;
    grid-template-rows:auto;
    gap:10px
  }

  .app-shell .role-permissions-body>.row>.col-md-1,
  .app-shell .role-permissions-body>.row>.col-md-2,
  .app-shell .role-permissions-body>.row>.col-md-3,
  .app-shell .role-permissions-body>.row>.col-md-9{
    grid-column:1;
    grid-row:auto
  }
}

@media (max-width:640px){
  .app-shell .role-permissions-body{
    padding:10px
  }

  .app-shell .role-permissions-body>.row{
    padding:13px
  }

  .app-shell .role-permissions-body>.row>.col-md-9{
    grid-template-columns:1fr
  }

  .app-shell .role-form-actions .btn-ghost,
  .app-shell .role-form-actions .btn-primary{
    flex:1;
    justify-content:center
  }
}

/* sales commission agents */

.app-shell .commission-agents-table{
  width:100%!important;
  min-width:940px;
  table-layout:fixed
}

.app-shell .commission-agents-table thead{
  background:var(--surface-2)
}

.app-shell .commission-agents-table .commission-name-column{
  width:27%
}

.app-shell .commission-agents-table .commission-contact-column{
  width:24%
}

.app-shell .commission-agents-table .commission-address-column{
  width:29%
}

.app-shell .commission-agents-table .commission-percent-column{
  width:12%
}

.app-shell .commission-agents-table .commission-action-column{
  width:92px
}

.app-shell .commission-agents-table tbody tr,
.app-shell .commission-agents-table tbody tr.odd,
.app-shell .commission-agents-table tbody tr.even{
  background:var(--surface);
  transition:background .12s
}

.app-shell .commission-agents-table tbody tr:hover{
  background:color-mix(in srgb,var(--brand-weak) 42%,var(--surface))
}

.app-shell .commission-agents-table tbody td{
  padding:11px 16px;
  border-bottom:1px solid var(--border-2);
  color:var(--text-2);
  font-size:12.5px;
  line-height:1.45;
  vertical-align:middle;
  overflow-wrap:anywhere
}

.app-shell .commission-agents-table tbody td:empty::before{
  content:'\2014';
  color:var(--text-3)
}

.app-shell .commission-agents-table tbody td:first-child{
  color:var(--text);
  overflow-wrap:normal
}

.app-shell .commission-agents-table tbody td:nth-child(4){
  white-space:nowrap
}

.app-shell .commission-agents-table tbody td:last-child{
  text-align:right;
  white-space:nowrap
}

.app-shell .commission-agent-identity{
  display:flex;
  min-width:0;
  align-items:center;
  gap:11px
}

.app-shell .commission-agent-name{
  overflow:hidden;
  color:var(--text);
  font-weight:750;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .commission-agent-type{
  margin-top:2px;
  color:var(--text-3);
  font-size:11.5px;
  font-weight:500
}

.app-shell .commission-contact>div:first-child{
  overflow:hidden;
  color:var(--text-2);
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .commission-contact>div:last-child{
  margin-top:2px;
  color:var(--text-3);
  font-size:11.5px
}

.app-shell .commission-rate{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 9px;
  border-radius:8px;
  background:var(--surface-3);
  color:var(--text-3);
  font-size:12px;
  font-weight:750
}

.app-shell .commission-rate>span{
  width:6px;
  height:6px;
  border-radius:50%;
  background:currentColor
}

.app-shell .commission-rate.is-active{
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .commission-row-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px
}

.app-shell .table-action-group{
  position:relative
}

.app-shell .table-action-group .act{
  outline:none;
  transition:border-color .15s,background .15s,color .15s,box-shadow .15s
}

.app-shell .table-action-group.open .act{
  border-color:var(--brand);
  background:var(--brand-weak);
  color:var(--brand-strong);
  box-shadow:0 0 0 3px rgba(21,154,77,.1)
}

body.app-ui .table-action-menu{
  top:calc(100% + 6px);
  right:0;
  left:auto;
  z-index:110;
  min-width:154px;
  margin:0;
  padding:6px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface);
  box-shadow:0 16px 38px -16px rgba(16,32,24,.42)
}

body.app-ui .table-action-menu>li>a,body.app-ui .table-action-menu>li>button{
  display:flex;
  width:100%;
  min-height:34px;
  align-items:center;
  padding:8px 10px;
  border:0;
  border-radius:7px;
  background:transparent;
  color:var(--text-2);
  font:inherit;
  font-size:12.5px;
  font-weight:650;
  line-height:1.35;
  text-align:left;
  white-space:nowrap;
  cursor:pointer
}

body.app-ui .table-action-menu>li>a:hover,body.app-ui .table-action-menu>li>button:hover{
  background:var(--brand-weak);
  color:var(--brand-strong)
}

body.app-ui .table-action-menu>li>.table-action-delete{
  color:var(--danger)
}

body.app-ui .table-action-menu>li>.table-action-delete:hover{
  background:var(--danger-weak);
  color:var(--danger)
}

.app-shell .commission-agents-table tbody tr:last-child .table-action-menu{
  top:auto;
  bottom:calc(100% + 6px)
}

.app-shell .commission-agent-dialog{
  width:min(820px,100%)
}

.app-shell .commission-agent-modal-content .modal-header{
  padding:16px 18px
}

.app-shell .commission-modal-heading{
  display:flex;
  min-width:0;
  align-items:center;
  gap:11px
}

.app-shell .commission-modal-heading p{
  margin:2px 0 0;
  color:var(--text-3);
  font-size:11.5px
}

.app-shell .commission-agent-modal-body{
  display:grid;
  grid-template-columns:minmax(0,1fr) 224px;
  padding:0!important
}

.app-shell .commission-agent-details{
  min-width:0;
  padding:22px
}

.app-shell .commission-details-heading{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:18px;
  color:var(--text);
  font-size:12.5px;
  font-weight:800
}

.app-shell .commission-details-heading>span{
  display:inline-flex;
  width:28px;
  height:28px;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  background:var(--blue-weak);
  color:var(--blue)
}

.app-shell .commission-agent-identity-grid{
  display:grid;
  grid-template-columns:130px minmax(0,1fr) minmax(0,1fr);
  gap:16px
}

.app-shell .commission-agent-contact-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:16px;
  margin-top:16px
}

.app-shell .commission-address-field{
  margin-top:16px
}

.app-shell .input-with-icon{
  position:relative
}

.app-shell .input-with-icon>svg{
  position:absolute;
  top:50%;
  left:12px;
  z-index:2;
  width:16px;
  height:16px;
  color:var(--text-3);
  transform:translateY(-50%);
  pointer-events:none
}

.app-shell .input-with-icon>.form-control{
  padding-left:38px
}

.app-shell .input-with-icon:focus-within>svg{
  color:var(--brand)
}

.app-shell .commission-input-with-icon{
  position:relative
}

.app-shell .commission-input-with-icon>svg{
  position:absolute;
  top:50%;
  left:12px;
  z-index:1;
  width:16px;
  height:16px;
  color:var(--text-3);
  transform:translateY(-50%);
  pointer-events:none
}

.app-shell .commission-input-with-icon>.form-control{
  padding-left:38px
}

.app-shell .commission-address-control>svg{
  top:13px;
  transform:none
}

.app-shell .commission-agent-modal-content textarea.form-control{
  height:auto;
  min-height:88px;
  padding:11px 13px;
  line-height:1.5;
  resize:vertical
}

.app-shell .commission-agent-modal-content .commission-address-control textarea.form-control{
  padding-left:38px
}

.app-shell .commission-rate-panel{
  display:flex;
  min-width:0;
  flex-direction:column;
  justify-content:center;
  padding:24px 20px;
  border-left:1px solid var(--border);
  background:var(--surface-2)
}

.app-shell .commission-rate-heading{
  display:flex;
  align-items:center;
  gap:11px;
  margin-bottom:14px
}

.app-shell .commission-rate-icon{
  display:inline-flex;
  width:38px;
  height:38px;
  flex:0 0 38px;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .commission-rate-title{
  margin:0;
  color:var(--text);
  font-size:12px;
  font-weight:800;
  line-height:1.35
}

.app-shell .commission-rate-title .req{
  color:var(--danger)
}

.app-shell .commission-percent-control{
  position:relative
}

.app-shell .commission-percent-control .form-control{
  height:54px;
  padding:0 50px 0 14px;
  border-color:color-mix(in srgb,var(--brand) 45%,var(--border));
  background:var(--surface);
  color:var(--brand-ink);
  font-size:20px;
  font-weight:800;
  font-variant-numeric:tabular-nums
}

.app-shell .commission-percent-control .form-control:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 12%,transparent)
}

.app-shell .commission-percent-control>span{
  position:absolute;
  top:50%;
  right:14px;
  color:var(--brand-strong);
  font-size:15px;
  font-weight:800;
  transform:translateY(-50%);
  pointer-events:none
}

.app-shell .commission-agent-modal-content .modal-footer{
  justify-content:flex-end;
  padding:13px 18px
}

.app-shell .commission-agent-modal-content .modal-footer .btn-ghost,
.app-shell .commission-agent-modal-content .modal-footer .btn-primary{
  height:40px;
  min-width:92px;
  justify-content:center
}

@media (max-width:760px){
  .app-shell .commission-agent-modal-body{
    grid-template-columns:1fr
  }

  .app-shell .commission-agent-details{
    padding:18px
  }

  .app-shell .commission-rate-panel{
    display:grid;
    grid-template-columns:minmax(170px,220px) minmax(0,1fr);
    align-items:center;
    gap:16px;
    padding:18px;
    border-top:1px solid var(--border);
    border-left:0
  }

  .app-shell .commission-rate-heading{
    margin:0
  }
}

@media (max-width:560px){
  .app-shell .commission-agent-identity-grid,
  .app-shell .commission-agent-contact-grid{
    grid-template-columns:1fr
  }

  .app-shell .commission-rate-panel{
    display:block
  }

  .app-shell .commission-rate-heading{
    margin-bottom:14px
  }
}

/* contact create / edit */

.app-shell .modal-dialog.contact-form-dialog{
  width:min(1140px,calc(100% - 32px));
  margin:14px auto
}

.app-shell .modal-content.contact-form-modal-content{
  display:flex;
  height:min(680px,calc(100dvh - 28px));
  max-height:calc(100dvh - 28px);
  flex-direction:column;
  overflow:hidden
}

.app-shell .contact-form-modal-content>form{
  display:flex;
  min-height:0;
  flex:1;
  flex-direction:column
}

.app-shell .modal-header.contact-form-modal-header{
  flex:none;
  padding:15px 18px;
  border-bottom:1px solid var(--border)
}

.app-shell .contact-form-modal-heading{
  display:flex;
  min-width:0;
  align-items:center;
  gap:11px
}

.app-shell .contact-form-modal-heading>div{
  min-width:0
}

.app-shell .contact-form-modal-heading p{
  overflow:hidden;
  margin:2px 0 0;
  color:var(--text-3);
  font-size:11.5px;
  font-weight:600;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .contact-form-modal-header .close svg{
  width:17px;
  height:17px
}

.app-shell .modal-body.contact-form-modal-body{
  min-height:0;
  flex:1;
  padding:0;
  overflow:hidden;
  background:var(--surface)
}

.app-shell .contact-form-layout{
  display:grid;
  min-height:0;
  height:100%;
  grid-template-columns:256px minmax(0,1fr)
}

.app-shell .contact-form-rail{
  display:flex;
  min-height:0;
  flex-direction:column;
  padding:20px 15px;
  border-right:1px solid var(--border);
  background:color-mix(in srgb,var(--surface-2) 76%,var(--brand-weak))
}

.app-shell .contact-form-rail-heading{
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 4px 18px;
  border-bottom:1px solid var(--border)
}

.app-shell .contact-form-rail-heading>div{
  display:flex;
  min-width:0;
  flex-direction:column
}

.app-shell .contact-form-rail-heading strong{
  color:var(--text);
  font-size:13px;
  font-weight:800;
  line-height:1.3
}

.app-shell .contact-form-rail-heading small{
  margin-top:2px;
  color:var(--text-3);
  font-size:10.5px;
  font-weight:550;
  line-height:1.35
}

.app-shell .contact-form-rail-icon{
  display:flex;
  width:34px;
  height:34px;
  flex:none;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .contact-form-rail-label{
  margin:17px 4px 7px;
  color:var(--text-3);
  font-size:10px;
  font-weight:800;
  text-transform:uppercase
}

.app-shell .contact-form-workspace{
  min-width:0;
  overflow-x:hidden;
  overflow-y:auto;
  padding:19px 22px 24px;
  scroll-behavior:smooth
}

.app-shell .contact-form-workspace>.row{
  display:flex;
  flex-wrap:wrap;
  margin:0 -7px
}

.app-shell .contact-form-workspace>.row:not(:has(>.contact-form-panel.active)){
  display:none
}

.app-shell .contact-form-workspace>.row:has(>.contact-form-panel.active){
  min-height:100%
}

.app-shell .contact-form-workspace>.row>[class*="col-"],
.app-shell .contact-form-panel>[class*="col-"],
.app-shell .contact-form-modal-body #more_div>[class*="col-"]{
  min-width:0;
  padding-right:7px;
  padding-left:7px
}

.app-shell .contact-form-panel{
  display:none;
  width:100%;
  flex-wrap:wrap
}

.app-shell .contact-form-panel.active{
  display:flex;
  min-height:100%;
  align-content:flex-start
}

.app-shell .contact-form-modal-body .col-md-12{
  width:100%
}

.app-shell .contact-form-modal-body .col-md-8{
  width:66.666667%
}

.app-shell .contact-form-modal-body .col-md-6{
  width:50%
}

.app-shell .contact-form-modal-body .col-md-4{
  width:33.333333%
}

.app-shell .contact-form-modal-body .col-md-3{
  width:25%
}

.app-shell .contact-form-modal-body .col-md-offset-2{
  margin-left:16.666667%
}

.app-shell .contact-form-modal-body .clearfix{
  width:100%;
  height:0
}

.app-shell .contact-form-modal-body .form-group{
  min-width:0;
  margin:0 0 15px
}

.app-shell .contact-form-modal-body .form-group>label,
.app-shell .contact-form-modal-body .multi-input>label{
  display:block;
  margin:0 0 6px;
  color:var(--text-2);
  font-size:12px;
  font-weight:700;
  line-height:1.35
}

.app-shell .contact-form-modal-body .form-group>label>small{
  font-weight:500
}

.app-shell .contact-form-modal-body .form-control{
  height:42px;
  border-color:var(--border);
  border-radius:10px;
  background:var(--surface-2);
  font-size:13px
}

.app-shell .contact-form-modal-body .form-control:focus{
  border-color:var(--brand);
  background:var(--surface);
  box-shadow:0 0 0 3px rgba(21,154,77,.1)
}

.app-shell .contact-form-modal-body .input-group{
  display:flex;
  width:100%;
  align-items:stretch
}

.app-shell .contact-form-modal-body .input-group-addon{
  display:none!important
}

.app-shell .contact-form-modal-body .input-group:not(:has(.input-group-btn))>.form-control{
  border-radius:10px
}

.app-shell .contact-form-modal-body .input-group:has(.input-group-btn)>.form-control{
  border-radius:10px 0 0 10px
}

.app-shell .contact-form-modal-body .input-group-btn{
  display:flex
}

.app-shell .contact-form-modal-body .input-group-btn>.btn{
  height:42px;
  padding:0 13px;
  border:1px solid var(--border);
  border-left:0;
  border-radius:0 10px 10px 0;
  background:var(--surface);
  color:var(--text-2);
  font:inherit;
  font-size:12px;
  font-weight:700;
  white-space:nowrap
}

.app-shell .contact-form-modal-body .input-group-btn>.btn:hover{
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .contact-form-modal-body .select2-container--default .select2-selection--single{
  height:42px
}

.app-shell .contact-form-modal-body .select2-container--default .select2-selection--single .select2-selection__rendered{
  line-height:40px
}

.app-shell .contact-form-modal-body .help-block,
.app-shell .contact-form-modal-body .contact-inline-hint{
  display:block;
  margin:5px 0 0;
  color:var(--text-3)!important;
  font-size:10.5px!important;
  font-weight:500;
  line-height:1.45
}

.app-shell .contact-telegram-link-control{
  position:relative;
  display:flex;
  min-width:0;
  align-items:center
}

.app-shell .contact-telegram-link-control .form-control{
  padding-right:104px;
  padding-left:40px
}

.app-shell .contact-telegram-link-icon{
  position:absolute;
  left:12px;
  z-index:2;
  display:flex;
  width:18px;
  height:18px;
  align-items:center;
  justify-content:center;
  color:#229ed9;
  pointer-events:none
}

.app-shell .contact-telegram-link-open{
  position:absolute;
  right:6px;
  z-index:2;
  display:inline-flex;
  height:30px;
  align-items:center;
  gap:5px;
  padding:0 9px;
  border:1px solid rgba(34,158,217,.2);
  border-radius:7px;
  background:rgba(34,158,217,.08);
  color:#1677a7;
  font-size:10.5px;
  font-weight:800;
  text-decoration:none;
  transition:background .14s,border-color .14s,color .14s
}

.app-shell .contact-telegram-link-open:hover{
  border-color:rgba(34,158,217,.34);
  background:rgba(34,158,217,.14);
  color:#0f648e;
  text-decoration:none
}

.app-shell .contact-telegram-link-open[href=""],
.app-shell .contact-telegram-link-open:not([href]){
  display:none
}

.app-shell .contact-telegram-link-hint{
  display:block;
  margin:5px 0 0;
  color:var(--text-3);
  font-size:10.5px;
  font-weight:500;
  line-height:1.45
}

.app-shell .contact-telegram-result{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  margin:6px 0 0
}

.app-shell .contact-telegram-verify-pill{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:4px 9px;
  border-radius:999px;
  font-size:10.5px;
  font-weight:750
}

.app-shell .contact-telegram-verify-pill>span{
  display:grid;
  width:16px;
  height:16px;
  place-items:center;
  border-radius:50%;
  background:color-mix(in srgb,currentColor 11%,transparent);
  font-size:10px
}

.app-shell .contact-telegram-verify-pill.is-success{
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .contact-telegram-verify-pill.is-error{
  background:var(--danger-weak);
  color:var(--danger)
}

.app-shell .contact-telegram-result-note{
  color:var(--text-3);
  font-size:9.5px;
  font-weight:600
}

.app-shell #verify_telegram_group{
  display:inline-flex;
  align-items:center;
  gap:6px
}

.app-shell #verify_telegram_group.is-loading{
  cursor:wait;
  opacity:.65
}

.app-shell .contact-source-select+.select2-container .select2-selection--single{
  background:var(--surface-2)
}

.app-shell .contact-form-modal-body label.error{
  display:block;
  margin:5px 0 0;
  color:var(--danger);
  font-size:11px;
  font-weight:650
}

.app-shell .contact-form-modal-body .form-control.error{
  border-color:var(--danger);
  background:var(--danger-weak)
}

.app-shell .contact-form-section-title{
  display:flex;
  align-items:center;
  gap:10px;
  margin:4px 0 16px;
  padding:0 0 12px;
  border-bottom:1px solid var(--border);
  color:var(--text);
  scroll-margin-top:18px
}

.app-shell .contact-form-section-title:not(#contact-basic-section){
  margin-top:11px
}

.app-shell .contact-form-section-title>span:last-child{
  display:flex;
  min-width:0;
  flex-direction:column
}

.app-shell .contact-form-section-title strong{
  font-size:13px;
  font-weight:800;
  line-height:1.3
}

.app-shell .contact-form-section-title small{
  margin-top:2px;
  color:var(--text-3);
  font-size:10.5px;
  font-weight:550;
  line-height:1.35
}

.app-shell .contact-form-section-icon{
  display:flex;
  width:34px;
  height:34px;
  flex:none;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .contact-basic-classification-grid{
  display:grid;
  width:100%;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0 14px;
  padding:0 7px
}

.app-shell .contact-basic-identity-grid{
  display:grid;
  width:100%;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:0 14px;
  margin-top:1px;
  padding:16px 7px 0;
  border-top:1px solid var(--border-2)
}

.app-shell .contact-basic-identity-grid .contact-prefix-field{
  grid-column:span 2
}

.app-shell .contact-basic-identity-grid .contact-first-name-field{
  grid-column:span 4
}

.app-shell .contact-basic-identity-grid .contact-last-name-field,
.app-shell .contact-basic-identity-grid .contact-dob-field{
  grid-column:span 3
}

.app-shell .contact-kind-toggle-wrap{
  display:block;
  width:100%;
  margin:0;
  padding:0!important
}

.app-shell .contact-kind-toggle{
  display:grid;
  width:100%;
  grid-template-columns:1fr 1fr;
  align-items:center;
  padding:3px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface)
}

.app-shell .contact-kind-toggle .btn{
  position:relative;
  display:inline-flex;
  height:34px;
  min-width:0;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:0 8px;
  border:0;
  border-radius:7px;
  background:transparent;
  color:var(--text-2);
  font:inherit;
  font-size:11.5px;
  font-weight:700;
  box-shadow:none;
  cursor:pointer
}

.app-shell .contact-kind-toggle .btn:before{
  width:14px;
  height:14px;
  border:1.5px solid var(--text-3);
  border-radius:50%;
  background:var(--surface);
  content:""
}

.app-shell .contact-kind-toggle .btn.active{
  background:var(--surface);
  color:var(--brand-strong);
  box-shadow:var(--shadow-sm)
}

.app-shell .contact-kind-toggle .btn.active:before{
  border:4px solid var(--brand)
}

.app-shell .contact-kind-toggle input[type="radio"]{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  opacity:0;
  pointer-events:none
}

.app-shell .contact-form-rail-nav{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-top:18px
}

.app-shell .contact-form-rail-nav a,
.app-shell .contact-form-rail-nav button{
  display:flex;
  width:100%;
  min-height:52px;
  align-items:center;
  gap:9px;
  padding:8px 9px;
  border:1px solid transparent;
  border-radius:10px;
  background:transparent;
  color:var(--text-2);
  font:inherit;
  font-size:11.5px;
  font-weight:700;
  text-align:left;
  text-decoration:none;
  cursor:pointer;
  transition:border-color .15s,background .15s,color .15s,box-shadow .15s
}

.app-shell .contact-form-rail-nav a:hover,
.app-shell .contact-form-rail-nav button:hover,
.app-shell .contact-form-rail-nav a.active,
.app-shell .contact-form-rail-nav button.active{
  border-color:color-mix(in srgb,var(--brand) 18%,var(--border));
  background:var(--brand-weak);
  color:var(--brand-strong);
  box-shadow:0 1px 2px rgba(16,32,24,.04)
}

.app-shell .contact-form-step-index{
  display:grid;
  width:27px;
  height:27px;
  flex:0 0 27px;
  place-items:center;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface);
  color:var(--text-3);
  font-size:10.5px;
  font-weight:850
}

.app-shell .contact-form-step-copy{
  display:flex;
  min-width:0;
  flex:1;
  flex-direction:column
}

.app-shell .contact-form-step-copy strong{
  color:inherit;
  font-size:11.5px;
  font-weight:800;
  line-height:1.25
}

.app-shell .contact-form-step-copy small{
  overflow:hidden;
  margin-top:2px;
  color:var(--text-3);
  font-size:9.5px;
  font-weight:550;
  line-height:1.25;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .contact-form-step-state{
  flex:none;
  padding:3px 6px;
  border-radius:999px;
  background:var(--surface-3);
  color:var(--text-3);
  font-size:8.5px;
  font-weight:850;
  line-height:1.2;
  text-transform:uppercase
}

.app-shell .contact-form-rail-nav button.active .contact-form-step-index{
  border-color:color-mix(in srgb,var(--brand) 24%,var(--border));
  background:var(--surface);
  color:var(--brand-strong)
}

.app-shell .contact-form-rail-nav button.is-incomplete .contact-form-step-state{
  background:var(--warn-weak);
  color:#a85c00
}

.app-shell .contact-form-rail-nav button.is-complete .contact-form-step-index{
  border-color:color-mix(in srgb,var(--brand) 26%,var(--border));
  background:var(--brand);
  color:#fff
}

.app-shell .contact-form-rail-nav button.is-complete .contact-form-step-state{
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .contact-form-rail-nav button.has-error{
  border-color:color-mix(in srgb,var(--danger) 30%,var(--border));
  background:var(--danger-weak)
}

.app-shell .contact-form-rail-nav button.has-error .contact-form-step-state{
  background:var(--danger);
  color:#fff
}

.app-shell .contact-form-rail-nav>.contact-person-nav-button{
  min-height:44px
}

.app-shell .contact-form-rail-nav>.contact-person-nav-button>svg{
  width:27px;
  height:27px;
  padding:6px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface)
}

.app-shell .contact-form-modal-body .more_btn{
  display:flex;
  width:100%;
  height:42px;
  align-items:center;
  justify-content:space-between;
  margin:4px 0 0;
  padding:0 14px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface-2);
  color:var(--text-2);
  font:inherit;
  font-size:12.5px;
  font-weight:750;
  cursor:pointer
}

.app-shell .contact-form-modal-body .more_btn:hover{
  border-color:var(--brand);
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .contact-form-modal-body .contact-form-rail-step{
  min-height:52px;
  justify-content:flex-start;
  margin:0;
  padding:8px 9px;
  font-size:11.5px
}

.app-shell .contact-form-modal-body .contact-form-advanced-toggle{
  display:none
}

.app-shell .contact-form-modal-body #more_div:not(.hide){
  display:flex;
  width:100%;
  flex-wrap:wrap;
  margin:16px 0 0;
  padding:18px 0 0;
  border-top:1px solid var(--border)
}

.app-shell .contact-form-modal-body #more_div hr{
  margin:3px 0 16px;
  border:0;
  border-top:1px solid var(--border-2)
}

.app-shell .contact-form-subsection{
  display:flex;
  align-items:center;
  gap:9px;
  margin:3px 0 13px;
  padding:8px 10px;
  border-radius:9px;
  background:var(--surface-2)
}

.app-shell .contact-form-subsection>span{
  display:grid;
  width:28px;
  height:28px;
  flex:none;
  place-items:center;
  border-radius:8px;
  background:var(--surface);
  color:var(--brand-strong);
  box-shadow:var(--shadow-sm)
}

.app-shell .contact-form-subsection strong,.app-shell .contact-form-subsection small{
  display:block
}

.app-shell .contact-form-subsection strong{
  color:var(--text-2);
  font-size:11.5px;
  font-weight:800
}

.app-shell .contact-form-subsection small{
  margin-top:1px;
  color:var(--text-3);
  font-size:9.5px;
  font-weight:550
}

.app-shell .contact-form-modal-body .multi-input{
  display:flex;
  flex-wrap:wrap
}

.app-shell .contact-form-modal-body .multi-input>label{
  width:100%
}

.app-shell .contact-form-modal-body .multi-input>.form-control{
  min-width:0;
  flex:1
}

.app-shell .contact-form-modal-body .multi-input>.width-40{
  flex:0 0 40%;
  border-radius:10px 0 0 10px
}

.app-shell .contact-form-modal-body .multi-input>.width-60{
  flex:0 0 60%;
  border-left:0;
  border-radius:0 10px 10px 0
}

.app-shell .contact-form-modal-body .form-check{
  display:flex;
  align-items:center;
  gap:9px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface-2)
}

.app-shell .contact-form-modal-body .form-check-input{
  width:18px;
  height:18px;
  margin:0;
  accent-color:var(--brand)
}

.app-shell .contact-form-modal-body .form-check-label{
  margin:0;
  color:var(--text-2);
  font-size:12px;
  font-weight:700
}

.app-shell .modal-footer.contact-form-modal-footer{
  display:flex;
  flex:none;
  align-items:center;
  justify-content:flex-end;
  gap:9px;
  padding:11px 18px;
  border-top:1px solid var(--border);
  background:var(--surface)
}

.app-shell .contact-form-progress{
  display:flex;
  min-width:0;
  align-items:center;
  gap:9px;
  margin-right:auto;
  text-align:left
}

.app-shell .contact-form-progress>span{
  display:grid;
  width:34px;
  height:34px;
  flex:0 0 34px;
  place-items:center;
  border-radius:9px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .contact-form-progress strong,.app-shell .contact-form-progress small{
  display:block
}

.app-shell .contact-form-progress strong{
  color:var(--text-2);
  font-size:11.5px;
  font-weight:800
}

.app-shell .contact-form-progress small{
  margin-top:2px;
  color:var(--text-3);
  font-size:9.5px;
  font-weight:550
}

.app-shell .contact-form-modal-footer .btn-ghost,
.app-shell .contact-form-modal-footer .btn-primary{
  height:40px;
  min-width:96px;
  justify-content:center
}

.app-shell .contact-form-modal-footer .btn-primary{
  min-width:118px
}

.app-shell .contact-form-modal-footer .form-submit-button.is-form-incomplete{
  box-shadow:0 3px 9px -4px rgba(21,154,77,.42)
}

.app-shell .contact-form-panel-nav{
  display:flex;
  width:100%;
  align-self:flex-end;
  align-items:center;
  justify-content:space-between;
  gap:9px;
  margin-top:auto;
  padding:17px 7px 0;
  border-top:1px solid var(--border-2)
}

.app-shell .contact-form-panel-nav .btn-ghost,.app-shell .contact-form-panel-nav .btn-primary{
  height:38px;
  padding:0 13px;
  border-radius:9px;
  font-size:11.5px
}

.app-shell .contact-panel-nav-spacer{
  display:block
}

.app-shell .contact-panel-nav-finish{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--brand-strong);
  font-size:11px;
  font-weight:750
}

.app-shell .contact-panel-nav-finish:before{
  content:"✓";
  display:grid;
  width:22px;
  height:22px;
  place-items:center;
  border-radius:7px;
  background:var(--brand-weak);
  font-size:11px
}

.app-shell .contact-form-modal-body[data-contact-kind="lead"] .contact_type_div .form-control{
  border-style:dashed;
  background:color-mix(in srgb,var(--brand-weak) 35%,var(--surface-2));
  color:var(--brand-strong);
  font-weight:750
}

.app-shell .contact-form-modal-body[data-contact-kind="lead"] [data-contact-section="links"].active{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 14px
}

.app-shell .contact-form-modal-body[data-contact-kind="lead"] [data-contact-section="links"]>.col-md-12,
.app-shell .contact-form-modal-body[data-contact-kind="lead"] [data-contact-section="links"]>.contact-form-panel-nav,
.app-shell .contact-form-modal-body[data-contact-kind="lead"] .contact-lead-owner-field,
.app-shell .contact-form-modal-body[data-contact-kind="lead"] .contact-lead-chat-field{
  width:auto;
  grid-column:1/-1
}

.app-shell .contact-form-modal-body[data-contact-kind="lead"] [data-contact-section="links"]>[class*="col-"]{
  width:auto
}

.app-shell .contact-form-modal-body[data-contact-kind="lead"] .contact-lead-source-field{
  grid-column:1;
  grid-row:2
}

.app-shell .contact-form-modal-body[data-contact-kind="lead"] .contact-lead-stage-field{
  grid-column:2;
  grid-row:2
}

.app-shell .contact-form-modal-body[data-contact-kind="lead"] .contact-lead-owner-field{
  grid-row:3
}

.app-shell .contact-form-modal-body[data-contact-kind="lead"] .contact-lead-map-field{
  grid-column:1;
  grid-row:4;
  padding-top:15px;
  border-top:1px solid var(--border-2)
}

.app-shell .contact-form-modal-body[data-contact-kind="lead"] .contact-lead-telegram-field{
  grid-column:2;
  grid-row:4;
  padding-top:15px;
  border-top:1px solid var(--border-2)
}

.app-shell .contact-form-modal-body[data-contact-kind="lead"] .contact-lead-chat-field{
  grid-row:5
}

.app-shell .contact-form-modal-body[data-contact-kind="lead"] [data-contact-section="links"]>.contact-form-panel-nav{
  grid-row:6
}

.app-shell .contact-form-workspace>.contact-person-nav-button{
  display:none
}

.app-shell .contact-persons-panel{
  align-content:flex-start
}

.app-shell .contact-persons-intro{
  display:flex;
  align-items:center;
  gap:11px;
  margin:0 0 15px;
  padding:12px 14px;
  border:1px solid rgba(21,154,77,.16);
  border-radius:8px;
  background:var(--brand-weak);
  color:var(--text)
}

.app-shell .contact-persons-intro>span:nth-child(2){
  display:flex;
  min-width:0;
  flex:1;
  flex-direction:column
}

.app-shell .contact-persons-intro strong{
  font-size:12.5px;
  font-weight:800;
  line-height:1.35
}

.app-shell .contact-persons-intro small{
  margin-top:2px;
  color:var(--text-2);
  font-size:10.5px;
  font-weight:550;
  line-height:1.4
}

.app-shell .contact-persons-intro-icon{
  display:flex;
  width:34px;
  height:34px;
  flex:none;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  background:var(--surface);
  color:var(--brand-strong);
  box-shadow:var(--shadow-sm)
}

.app-shell .contact-persons-limit{
  flex:none;
  padding:5px 9px;
  border:1px solid rgba(21,154,77,.18);
  border-radius:999px;
  background:var(--surface);
  color:var(--brand-strong);
  font-size:10px;
  font-weight:800
}

.app-shell .contact-person-list{
  display:flex;
  width:100%;
  flex-direction:column;
  gap:10px;
  padding:0 7px
}

.app-shell .contact-person-card{
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface);
  transition:border-color .15s,box-shadow .15s
}

.app-shell .contact-person-card:has(.contact-person-card-toggle.is-open){
  border-color:rgba(21,154,77,.42);
  box-shadow:0 0 0 3px rgba(21,154,77,.07)
}

.app-shell .contact-form-modal-body .more_btn.contact-person-card-toggle{
  height:62px;
  margin:0;
  padding:0 14px;
  border:0;
  border-radius:0;
  background:var(--surface);
  color:var(--text);
  text-align:left
}

.app-shell .contact-form-modal-body .more_btn.contact-person-card-toggle:hover{
  background:#fbfcfb;
  color:var(--text)
}

.app-shell .contact-form-modal-body .more_btn.contact-person-card-toggle:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:-2px
}

.app-shell .contact-person-card-identity{
  display:flex;
  min-width:0;
  align-items:center;
  gap:11px
}

.app-shell .contact-person-card-identity>span:last-child{
  display:flex;
  min-width:0;
  flex-direction:column
}

.app-shell .contact-person-card-identity strong{
  overflow:hidden;
  color:var(--text);
  font-size:12.5px;
  font-weight:800;
  line-height:1.35;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .contact-person-card-identity small{
  overflow:hidden;
  margin-top:2px;
  color:var(--text-3);
  font-size:10.5px;
  font-weight:550;
  line-height:1.35;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .contact-person-number{
  display:flex;
  width:32px;
  height:32px;
  flex:none;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  background:var(--surface-3);
  color:var(--text-2);
  font-size:11px;
  font-weight:850
}

.app-shell .contact-person-card-toggle.is-open .contact-person-number{
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .contact-person-card-action{
  display:flex;
  flex:none;
  align-items:center;
  gap:9px;
  margin-left:12px
}

.app-shell .contact-person-card-state{
  padding:4px 8px;
  border-radius:999px;
  background:var(--surface-3);
  color:var(--text-3);
  font-size:9.5px;
  font-weight:800;
  text-transform:uppercase
}

.app-shell .contact-person-card-state.is-added{
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .contact-person-card-action svg{
  color:var(--text-3);
  transition:transform .16s,color .16s
}

.app-shell .contact-person-card-toggle.is-open .contact-person-card-action svg{
  transform:rotate(180deg);
  color:var(--brand)
}

.app-shell .contact-person-card-body{
  padding:17px 14px 3px;
  border-top:1px solid var(--border);
  background:var(--surface)
}

.app-shell .contact-person-card-body>.row{
  margin-right:-7px;
  margin-left:-7px
}

.app-shell .contact-person-card-body>.row>[class*="col-"]{
  padding-right:7px;
  padding-left:7px
}

.app-shell .contact-person-card-body .checkbox{
  display:flex;
  min-height:42px;
  align-items:center;
  padding:0 12px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface-2)
}

.app-shell .contact-person-card-body .checkbox label{
  margin:0;
  font-size:12px;
  font-weight:700
}

.app-shell .contact-person-login-fields{
  margin-top:2px;
  padding-top:16px;
  border-top:1px dashed var(--border)
}

@media (max-width:920px){
  .app-shell .modal-dialog.contact-form-dialog{
    width:min(100% - 20px,780px);
    margin:10px auto
  }

  .app-shell .modal-content.contact-form-modal-content{
    height:calc(100dvh - 20px);
    max-height:calc(100dvh - 20px)
  }

  /* A grid track's minimum is its content, so the rail — 180px of heading beside 260px of
     toggle — could hold the layout wider than the dialog it sits in, and the right-hand side of
     every field was clipped by the body's overflow. */

  .app-shell .contact-form-layout,
  .app-shell .contact-form-rail,
  .app-shell .contact-form-rail-nav{
    min-width:0
  }

  .app-shell .contact-form-layout{
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto minmax(0,1fr)
  }

  .app-shell .contact-form-rail{
    display:grid;
    grid-template-columns:minmax(180px,1fr) minmax(260px,auto);
    align-items:center;
    gap:12px 18px;
    padding:13px 16px;
    border-right:0;
    border-bottom:1px solid var(--border)
  }

  .app-shell .contact-form-rail-heading{
    padding:0;
    border:0
  }

  .app-shell .contact-form-rail-label{
    display:none
  }

  .app-shell .contact-kind-toggle-wrap{
    justify-self:end
  }

  .app-shell .contact-form-rail-nav{
    grid-column:1/-1;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:5px;
    margin:0
  }

  .app-shell .contact-form-rail-nav a,
  .app-shell .contact-form-rail-nav button{
    justify-content:flex-start;
    padding:7px;
    text-align:left
  }

  .app-shell .contact-form-step-state{
    display:none
  }

  .app-shell .contact-form-workspace{
    padding:18px
  }

  .app-shell .contact-persons-intro{
    align-items:flex-start
  }

  .app-shell .contact-basic-classification-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

  .app-shell .contact-form-modal-body .col-md-8,
  .app-shell .contact-form-modal-body .col-md-6,
  .app-shell .contact-form-modal-body .col-md-4,
  .app-shell .contact-form-modal-body .col-md-3{
    width:50%
  }

  .app-shell .contact-form-modal-body .col-md-offset-2{
    margin-left:0
  }
}

@media (max-width:560px){
  .app-shell .contact-form-rail{
    display:flex;
    padding:12px
  }

  .app-shell .contact-form-rail-heading{
    width:100%
  }

  .app-shell .contact-kind-toggle-wrap{
    width:100%
  }

  .app-shell .contact-form-rail-nav{
    display:flex;
    width:100%;
    flex-direction:row;
    overflow-x:auto;
    margin-top:0;
    padding-bottom:2px
  }

  .app-shell .contact-form-rail-nav a,
  .app-shell .contact-form-rail-nav button{
    width:auto;
    min-width:-moz-max-content;
    min-width:max-content
  }

  .app-shell .contact-form-step-copy{
    min-width:108px
  }

  .app-shell .contact-basic-classification-grid,
  .app-shell .contact-basic-identity-grid{
    grid-template-columns:1fr
  }

  .app-shell .contact-basic-identity-grid .contact-prefix-field,
  .app-shell .contact-basic-identity-grid .contact-first-name-field,
  .app-shell .contact-basic-identity-grid .contact-last-name-field,
  .app-shell .contact-basic-identity-grid .contact-dob-field{
    grid-column:auto
  }

  .app-shell .contact-persons-intro{
    flex-wrap:wrap
  }

  .app-shell .contact-persons-limit{
    margin-left:45px
  }

  .app-shell .contact-person-card-action .contact-person-card-state{
    display:none
  }

  .app-shell .contact-person-card-body{
    padding:15px 10px 1px
  }

  .app-shell .contact-form-modal-body .col-md-8,
  .app-shell .contact-form-modal-body .col-md-6,
  .app-shell .contact-form-modal-body .col-md-4,
  .app-shell .contact-form-modal-body .col-md-3{
    width:100%
  }

  .app-shell .contact-kind-toggle .btn{
    flex:1;
    justify-content:center
  }

  .app-shell .contact-form-modal-body[data-contact-kind="lead"] [data-contact-section="links"].active{
    grid-template-columns:1fr
  }

  .app-shell .contact-form-modal-body[data-contact-kind="lead"] .contact-lead-source-field,
  .app-shell .contact-form-modal-body[data-contact-kind="lead"] .contact-lead-stage-field,
  .app-shell .contact-form-modal-body[data-contact-kind="lead"] .contact-lead-owner-field,
  .app-shell .contact-form-modal-body[data-contact-kind="lead"] .contact-lead-map-field,
  .app-shell .contact-form-modal-body[data-contact-kind="lead"] .contact-lead-telegram-field,
  .app-shell .contact-form-modal-body[data-contact-kind="lead"] .contact-lead-chat-field,
  .app-shell .contact-form-modal-body[data-contact-kind="lead"] [data-contact-section="links"]>.contact-form-panel-nav{
    grid-column:1;
    grid-row:auto
  }

  .app-shell .contact-form-modal-body[data-contact-kind="lead"] .contact-lead-map-field{
    margin-top:4px
  }

  .app-shell .contact-form-modal-body[data-contact-kind="lead"] .contact-lead-telegram-field{
    padding-top:0;
    border-top:0
  }

  /*
   * The footer could not hold its own row.
   *
   * "2 required fields remaining" pushed the buttons right with margin-right:auto while both of
   * them still carried desktop minimums — 96px and 118px — so on a phone the line came to more
   * than the dialog: the text wrapped under itself and Save was cut off by the edge. The count
   * takes a line of its own above two buttons that share the width.
   */

  .app-shell .modal-footer.contact-form-modal-footer{
    flex-wrap:wrap;
    gap:8px;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom))
  }

  .app-shell .contact-form-progress{
    order:-1;
    width:100%;
    margin:0;
    gap:0
  }

  .app-shell .contact-form-progress>span{
    display:none
  }

  .app-shell .contact-form-progress small{
    display:none
  }

  .app-shell .contact-form-progress strong{
    overflow:hidden;
    font-size:11px;
    text-overflow:ellipsis;
    white-space:nowrap
  }

  .app-shell .contact-form-modal-footer .btn-ghost,
  .app-shell .contact-form-modal-footer .btn-primary{
    flex:1 1 0;
    min-width:0;
    height:40px;
    padding:0 10px;
    font-size:12.5px
  }

  .app-shell .modal-dialog.contact-form-dialog{
    width:calc(100% - 4px);
    margin:2px auto
  }

  .app-shell .modal-content.contact-form-modal-content{
    height:calc(100dvh - 28px);
    max-height:calc(100dvh - 28px);
    border-radius:13px
  }

  /* The form is one scale smaller here, like the rest of the phone screens: a 42px control with a
     12px label 6px above it and 15px under every field reads as a desktop form zoomed in. */

  .app-shell .modal-header.contact-form-modal-header{
    padding:12px
  }

  .app-shell .contact-form-modal-heading{
    gap:9px
  }

  .app-shell .contact-form-modal-heading .sec-ico{
    width:30px;
    height:30px
  }

  .app-shell .contact-form-modal-header .modal-title{
    font-size:14.5px
  }

  .app-shell .contact-form-workspace{
    padding:14px 12px 18px
  }

  .app-shell .contact-form-modal-body .form-group{
    margin-bottom:11px
  }

  .app-shell .contact-form-modal-body .form-group>label,
  .app-shell .contact-form-modal-body .multi-input>label{
    margin-bottom:4px;
    font-size:11.5px
  }

  .app-shell .contact-form-modal-body .form-control,
  .app-shell .contact-form-modal-body .input-group-btn>.btn,
  .app-shell .contact-form-modal-body .select2-container--default .select2-selection--single,
  .app-shell .contact-form-modal-body .more_btn{
    height:40px
  }

  .app-shell .contact-form-modal-body .select2-container--default .select2-selection--single .select2-selection__rendered{
    line-height:38px
  }

  .app-shell .contact-form-section-title{
    margin:2px 0 13px;
    padding-bottom:10px
  }

  .app-shell .contact-form-section-icon{
    width:30px;
    height:30px
  }

  .app-shell .contact-form-rail-icon{
    width:30px;
    height:30px
  }

  .app-shell .contact-form-rail-heading{
    padding-bottom:0
  }

  .app-shell .contact-form-rail-nav a,
  .app-shell .contact-form-rail-nav button{
    min-height:44px
  }

  .app-shell .contact-form-panel-nav{
    padding-top:14px
  }
}

/* my profile settings */

.app-shell .profile-settings-page{
  max-width:1180px;
  padding-bottom:60px
}

.app-shell .profile-settings-page #edit_user_profile_form{
  display:flex;
  flex-direction:column;
  gap:16px
}

.app-shell .profile-settings-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 300px;
  gap:16px;
  align-items:stretch
}

.app-shell .profile-settings-grid>.card{
  height:100%
}

.app-shell .profile-photo-editor{
  display:flex;
  min-height:220px;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center
}

.app-shell .profile-photo-preview-wrap{
  position:relative;
  width:112px;
  height:112px
}

.app-shell .profile-photo-preview{
  width:112px;
  height:112px;
  border:4px solid var(--surface);
  border-radius:28px;
  background:var(--surface-3);
  -o-object-fit:cover;
     object-fit:cover;
  box-shadow:var(--shadow-md)
}

.app-shell .profile-photo-camera{
  position:absolute;
  right:-3px;
  bottom:5px;
  display:flex;
  width:32px;
  height:32px;
  align-items:center;
  justify-content:center;
  border:3px solid var(--surface);
  border-radius:10px;
  background:var(--brand);
  color:#fff;
  box-shadow:var(--shadow-sm)
}

.app-shell .profile-photo-camera svg{
  width:15px;
  height:15px
}

.app-shell .profile-photo-choose{
  display:inline-flex;
  height:38px;
  align-items:center;
  gap:7px;
  margin-top:16px;
  padding:0 14px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface-2);
  color:var(--text-2);
  font-size:12.5px;
  font-weight:700;
  cursor:pointer;
  transition:background .12s,border-color .12s,color .12s
}

.app-shell .profile-photo-choose:hover{
  border-color:var(--brand);
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .profile-photo-choose svg{
  width:16px;
  height:16px
}

.app-shell .profile-photo-help{
  margin:9px 0 0;
  color:var(--text-3);
  font-size:11px
}

.app-shell .profile-photo-filename{
  max-width:230px;
  margin:6px 0 0;
  color:var(--brand-strong);
  font-size:11.5px;
  font-weight:700;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}

/* The button belongs to the three cards above it, so it is drawn as their footer rather than
   floating over the page the way the old sticky bar did. */

.app-shell .profile-settings-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 18px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface)
}

.app-shell .profile-settings-actions .btn-primary{
  min-width:132px;
  justify-content:center
}

.app-shell .profile-settings-hint{
  min-width:0;
  color:var(--text-3);
  font-size:11.5px;
  font-weight:600
}

.app-shell .profile-password-actions{
  display:flex;
  justify-content:flex-end;
  margin-top:18px
}

.app-shell .profile-password-actions .btn-primary{
  min-width:132px;
  justify-content:center
}

@media (max-width:899.98px){
  .app-shell .profile-settings-grid{
    grid-template-columns:1fr
  }

  .app-shell .profile-photo-editor{
    min-height:190px
  }
}

/* user detail */

.app-shell .user-detail-page{
  max-width:1320px
}

.app-shell .user-detail-grid{
  display:grid;
  grid-template-columns:286px minmax(0,1fr);
  gap:18px;
  align-items:start
}

.app-shell .user-profile-card{
  position:sticky;
  top:18px;
  overflow:hidden
}

.app-shell .user-profile-accent{
  height:72px;
  background:var(--brand-weak);
  border-bottom:1px solid rgba(21,154,77,.12)
}

.app-shell .user-profile-body{
  padding:0 20px 22px
}

.app-shell .user-profile-avatar-wrap{
  position:relative;
  width:100px;
  height:100px;
  margin:-48px auto 0
}

.app-shell .user-profile-avatar{
  width:100px;
  height:100px;
  border:4px solid var(--surface);
  border-radius:24px;
  background:var(--surface-3);
  -o-object-fit:cover;
     object-fit:cover;
  box-shadow:var(--shadow-md)
}

.app-shell .user-profile-presence{
  position:absolute;
  right:1px;
  bottom:5px;
  width:18px;
  height:18px;
  border:4px solid var(--surface);
  border-radius:50%
}

.app-shell .user-profile-presence.is-active{
  background:var(--brand)
}

.app-shell .user-profile-presence.is-inactive{
  background:var(--danger)
}

.app-shell .user-profile-heading{
  margin-top:14px;
  text-align:center
}

.app-shell .user-profile-heading h2{
  margin:0;
  color:var(--text);
  font-size:19px;
  font-weight:800;
  line-height:1.3;
  overflow-wrap:anywhere
}

.app-shell .user-role-badge{
  display:inline-flex;
  align-items:center;
  gap:5px;
  max-width:100%;
  margin-top:8px;
  padding:5px 9px;
  border-radius:8px;
  background:var(--blue-weak);
  color:var(--blue);
  font-size:11.5px;
  font-weight:700;
  line-height:1.2
}

.app-shell .user-profile-status{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  margin:16px 0;
  padding:9px 12px;
  border-radius:10px;
  font-size:12.5px;
  font-weight:700
}

.app-shell .user-profile-status.is-active{
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .user-profile-status.is-inactive{
  background:var(--danger-weak);
  color:var(--danger)
}

.app-shell .user-profile-status .status-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:currentColor
}

.app-shell .user-profile-meta{
  display:flex;
  flex-direction:column;
  margin:0;
  padding:0;
  border-top:1px solid var(--border-2)
}

.app-shell .user-profile-meta-row{
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  gap:10px;
  align-items:center;
  padding:12px 0;
  border-bottom:1px solid var(--border-2)
}

.app-shell .user-profile-meta-row:last-child{
  border-bottom:0
}

.app-shell .user-profile-meta-icon{
  display:flex;
  width:32px;
  height:32px;
  align-items:center;
  justify-content:center;
  border-radius:9px;
  background:var(--surface-3);
  color:var(--text-2)
}

.app-shell .user-profile-meta-icon svg{
  width:16px;
  height:16px
}

.app-shell .user-profile-meta-row dt{
  color:var(--text-3);
  font-size:10.5px;
  font-weight:700;
  text-transform:uppercase
}

.app-shell .user-profile-meta-row dd{
  margin:2px 0 0;
  color:var(--text);
  font-size:12.5px;
  font-weight:650;
  line-height:1.4;
  overflow-wrap:anywhere
}

.app-shell .user-detail-panel{
  min-width:0
}

.app-shell .user-detail-tabs{
  display:flex;
  align-items:center;
  gap:4px;
  min-height:62px;
  padding:10px 14px;
  border-bottom:1px solid var(--border);
  overflow-x:auto
}

.app-shell .user-detail-tab{
  position:relative;
  display:inline-flex;
  flex:none;
  align-items:center;
  gap:7px;
  height:40px;
  padding:0 13px;
  border:0;
  border-radius:9px;
  background:transparent;
  color:var(--text-2);
  font:inherit;
  font-size:12.5px;
  font-weight:700;
  cursor:pointer;
  transition:background .12s,color .12s
}

.app-shell .user-detail-tab svg{
  width:16px;
  height:16px
}

.app-shell .user-detail-tab:hover{
  background:var(--surface-3);
  color:var(--text)
}

.app-shell .user-detail-tab.is-active{
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .user-detail-tab-count{
  display:inline-flex;
  min-width:20px;
  height:20px;
  align-items:center;
  justify-content:center;
  padding:0 6px;
  border-radius:10px;
  background:var(--surface);
  color:inherit;
  font-size:10.5px
}

.app-shell .user-detail-pane{
  min-width:0
}

.app-shell .user-detail-pane[hidden]{
  display:none!important
}

.app-shell .user-detail-summary{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border-bottom:1px solid var(--border)
}

.app-shell .user-detail-summary-item{
  min-width:0;
  padding:17px 18px;
  border-right:1px solid var(--border-2)
}

.app-shell .user-detail-summary-item:last-child{
  border-right:0
}

.app-shell .user-detail-summary-item span{
  display:block;
  color:var(--text-3);
  font-size:10.5px;
  font-weight:700;
  text-transform:uppercase
}

.app-shell .user-detail-summary-item strong{
  display:block;
  margin-top:5px;
  color:var(--text);
  font-size:13.5px;
  font-weight:800;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}

.app-shell .detail-section{
  border-bottom:1px solid var(--border)
}

.app-shell .detail-section:last-child{
  border-bottom:0
}

.app-shell .detail-section-head{
  display:flex;
  align-items:center;
  gap:11px;
  padding:18px 20px 0
}

.app-shell .detail-section-icon{
  display:flex;
  width:34px;
  height:34px;
  flex:none;
  align-items:center;
  justify-content:center;
  border-radius:9px
}

.app-shell .detail-section-title{
  margin:0;
  color:var(--text);
  font-size:14px;
  font-weight:800;
  line-height:1.3
}

.app-shell .detail-section-subtitle{
  margin:2px 0 0;
  color:var(--text-3);
  font-size:11.5px;
  line-height:1.35
}

.app-shell .detail-section-body{
  padding:16px 20px 20px
}

.app-shell .detail-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;
  border:1px solid var(--border);
  border-radius:11px;
  overflow:hidden;
  background:var(--surface)
}

.app-shell .detail-grid-identity{
  grid-template-columns:repeat(2,minmax(0,1fr))
}

.app-shell .detail-item{
  min-width:0;
  min-height:72px;
  padding:13px 15px;
  border-right:1px solid var(--border-2);
  border-bottom:1px solid var(--border-2);
  background:var(--surface)
}

.app-shell .detail-item:nth-child(3n){
  border-right:0
}

.app-shell .detail-grid-identity .detail-item:nth-child(3n){
  border-right:1px solid var(--border-2)
}

.app-shell .detail-grid-identity .detail-item:nth-child(2n){
  border-right:0
}

.app-shell .detail-item-label{
  color:var(--text-3);
  font-size:10.5px;
  font-weight:700;
  line-height:1.3;
  text-transform:uppercase
}

.app-shell .detail-item-value{
  margin:6px 0 0;
  color:var(--text);
  font-size:13px;
  font-weight:650;
  line-height:1.45;
  overflow-wrap:anywhere;
  white-space:pre-line
}

.app-shell .detail-item-address{
  min-height:92px;
  background:var(--surface-2)
}

.app-shell .user-detail-empty{
  display:flex;
  min-height:260px;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  color:var(--text-3);
  font-size:13px;
  font-weight:600
}

.app-shell .user-detail-empty svg{
  width:28px;
  height:28px
}

.app-shell .user-switcher{
  width:270px
}

/* Legacy server/AJAX fragments rendered inside the new user detail surface. */

.app-shell .user-detail-pane>.table-responsive,
.app-shell .user-detail-pane .document_note_body{
  padding:18px
}

.app-shell .user-detail-pane .table-responsive{
  width:100%;
  overflow-x:auto
}

.app-shell .user-detail-pane table{
  width:100%;
  border-collapse:collapse;
  background:var(--surface);
  font-size:12.5px
}

.app-shell .user-detail-pane table th{
  padding:11px 12px;
  border-bottom:1px solid var(--border);
  color:var(--text-3);
  font-size:10.5px;
  font-weight:750;
  text-align:left;
  text-transform:uppercase;
  white-space:nowrap
}

.app-shell .user-detail-pane table td{
  padding:12px;
  border-bottom:1px solid var(--border-2);
  color:var(--text-2);
  vertical-align:top
}

.app-shell .user-detail-pane table tr:last-child td{
  border-bottom:0
}

.app-shell .user-detail-pane table tbody tr:hover{
  background:var(--surface-2)
}

/* This listing used to have a look of its own — its own heading, its own table shell and a
   two column grid for the footer — while every other listing in the app shares one. It uses
   the shared card and table now, so only the few things particular to it remain. */

.app-shell .user-documents{
  min-width:0
}

.app-shell .user-documents .project-tab-head{
  margin-bottom:13px
}

.app-shell .user-documents table.dataTable tbody tr:last-child .dropdown-menu{
  top:auto;
  bottom:calc(100% + 5px)
}

@media (max-width:899.98px){
}

@media (max-width:520px){
  .app-shell .user-detail-pane .document_note_body{
    padding:14px
  }
}

/* Bootstrap modal bridge for document and note dialogs on clean-slate pages. */

/* The side gutters are stated !important because Bootstrap writes over them from JS.
   Modal.adjustDialog() puts `padding-left: <scrollbarWidth>` on this element inline whenever the
   overlay is taller than the window — and on a phone, or any system drawing overlay scrollbars,
   that width is 0. Only the left was cancelled, so the dialog sat flush against the left edge with
   the stylesheet's gutter still showing down the right. The overlay does its own scrolling, so
   there is no scrollbar here to compensate for. */

body.app-ui .modal{
  position:fixed;
  inset:0;
  z-index:1050;
  display:none;
  overflow-x:hidden;
  overflow-y:auto;
  padding:18px 8px;
  padding-left:8px!important;
  padding-right:8px!important;
  background:rgba(13,18,16,.46)
}

body.app-ui .modal:focus{
  outline:none
}

body.app-ui .modal.fade{
  opacity:0;
  transition:opacity .18s ease
}

body.app-ui .modal.in{
  display:block;
  opacity:1
}

body.app-ui .modal-dialog{
  position:relative;
  width:min(760px,100%);
  margin:24px auto;
  opacity:0;
  transform:translateY(7px);
  transition:opacity .18s ease,transform .18s ease
}

body.app-ui .modal.in .modal-dialog{
  opacity:1;
  transform:none
}

body.app-ui .modal-content{
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  box-shadow:0 24px 60px -24px rgba(0,0,0,.45)
}

body.app-ui .modal-header,body.app-ui .modal-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:16px 18px;
  border-color:var(--border)
}

body.app-ui .modal-header{
  border-bottom:1px solid var(--border)
}

body.app-ui .modal-footer{
  border-top:1px solid var(--border)
}

body.app-ui .modal-title{
  margin:0;
  color:var(--text);
  font-size:16px;
  font-weight:800
}

body.app-ui .modal-body{
  padding:18px;
  color:var(--text-2)
}

body.app-ui .modal .close{
  display:flex;
  width:32px;
  height:32px;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:8px;
  background:var(--surface-3);
  color:var(--text-2);
  font-size:22px;
  cursor:pointer
}

body.app-ui .modal-backdrop{
  position:fixed;
  inset:0;
  z-index:1040;
  background:#0d1210;
  opacity:.42
}

/* Document note editor modal and its legacy plugin surfaces. */

/* Matched against body so it outweighs the generic body.app-ui .modal-dialog width above it. */

body.app-ui .note-modal-dialog{
  width:min(820px,100%);
  margin:12px auto
}

.app-shell .note-modal-content{
  display:flex;
  max-height:calc(100vh - 56px);
  flex-direction:column
}

.app-shell .note-editor-form{
  display:block
}

.app-shell .note-modal-content .modal-header{
  flex:none;
  padding:16px 18px
}

.app-shell .note-modal-heading{
  display:flex;
  min-width:0;
  align-items:center;
  gap:11px
}

.app-shell .note-modal-icon{
  display:flex;
  width:36px;
  height:36px;
  flex:none;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .note-modal-icon svg{
  width:18px;
  height:18px
}

.app-shell .note-modal-kicker{
  display:block;
  margin-top:2px;
  color:var(--text-3);
  font-size:11px;
  font-weight:600
}

.app-shell .note-modal-content .close svg{
  width:17px;
  height:17px
}

.app-shell .note-modal-content .modal-body{
  display:flex;
  min-height:0;
  flex:1;
  flex-direction:column;
  gap:17px;
  padding:18px;
  overflow-y:auto
}

.app-shell .note-form-field{
  min-width:0
}

.app-shell .note-form-label{
  display:block;
  margin:0 0 7px;
  color:var(--text-2);
  font-size:12.5px;
  font-weight:700
}

.app-shell .note-form-label span{
  color:var(--danger)
}

.app-shell .note-modal-content .form-control{
  width:100%;
  height:42px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface-2);
  padding:0 13px;
  color:var(--text);
  font:inherit;
  font-size:13.5px;
  outline:none;
  box-shadow:none
}

.app-shell .note-modal-content .form-control:focus{
  border-color:var(--brand);
  background:var(--surface);
  box-shadow:0 0 0 3px rgba(21,154,77,.1)
}

.app-shell .note-modal-content textarea.form-control{
  min-height:220px;
  padding:12px;
  resize:vertical
}

.app-shell .note-modal-content label.error{
  display:block;
  margin:6px 0 0;
  color:var(--danger);
  font-size:11.5px;
  font-weight:600
}

.app-shell .note-modal-content .form-control.error{
  border-color:var(--danger);
  background:var(--danger-weak)
}

.app-shell .note-description-field .mce-tinymce,
.app-shell .note-description-field .tox-tinymce{
  overflow:hidden!important;
  border:1px solid var(--border)!important;
  border-radius:11px!important;
  box-shadow:none!important
}

.app-shell .note-description-field .mce-panel,
.app-shell .note-description-field .tox .tox-menubar,
.app-shell .note-description-field .tox .tox-toolbar,
.app-shell .note-description-field .tox .tox-toolbar__primary,
.app-shell .note-description-field .tox .tox-toolbar-overlord{
  border-color:var(--border)!important;
  background:var(--surface-2)!important
}

.app-shell .note-description-field .mce-toolbar-grp{
  padding:5px!important;
  border-color:var(--border)!important;
  background:var(--surface-2)!important
}

.app-shell .note-description-field .mce-edit-area{
  border-color:var(--border)!important
}

.app-shell .note-description-field .mce-edit-area iframe{
  min-height:210px!important;
  background:var(--surface)!important
}

.app-shell .note-description-field .tox .tox-edit-area__iframe{
  min-height:210px;
  background:var(--surface)
}

.app-shell .note-description-field .mce-statusbar,
.app-shell .note-description-field .tox .tox-statusbar{
  border-color:var(--border)!important;
  background:var(--surface-2)!important
}

.app-shell .note-dropzone{
  display:flex;
  min-height:106px;
  align-items:center;
  justify-content:center;
  padding:16px;
  border:1.5px dashed var(--border)!important;
  border-radius:11px;
  background:var(--surface-2);
  color:var(--text-2);
  cursor:pointer;
  transition:border-color .12s,background .12s
}

.app-shell .note-dropzone:hover,.app-shell .note-dropzone.dz-drag-hover{
  border-color:var(--brand)!important;
  background:var(--brand-weak)
}

.app-shell .note-dropzone .dz-message{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin:0;
  text-align:left
}

.app-shell .note-upload-icon{
  display:flex;
  width:42px;
  height:42px;
  flex:none;
  align-items:center;
  justify-content:center;
  border-radius:11px;
  background:var(--surface);
  color:var(--brand-strong);
  box-shadow:var(--shadow-sm)
}

.app-shell .note-upload-icon svg{
  width:20px;
  height:20px
}

.app-shell .note-dropzone .dz-message strong{
  display:block;
  color:var(--text);
  font-size:13px;
  font-weight:800
}

.app-shell .note-dropzone .dz-message small{
  display:block;
  margin-top:3px;
  color:var(--text-3);
  font-size:11px
}

.app-shell .note-dropzone.dz-started{
  display:block;
  min-height:0;
  padding:10px;
  background:var(--surface-2)
}

.app-shell .note-dropzone.dz-started:hover{
  background:var(--surface-2)
}

.app-shell .note-dropzone.dz-started .dz-message{
  display:none
}

.app-shell .note-dropzone .dz-preview{
  position:relative;
  display:grid;
  grid-template-columns:48px minmax(0,1fr) 28px 30px;
  gap:10px;
  align-items:center;
  width:100%;
  min-height:66px;
  margin:0 0 8px;
  padding:8px 10px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface);
  cursor:default
}

.app-shell .note-dropzone .dz-preview:last-child{
  margin-bottom:0
}

.app-shell .note-dropzone .dz-preview .dz-image{
  position:static!important;
  display:block!important;
  grid-column:1;
  width:48px!important;
  height:48px!important;
  overflow:hidden;
  border:0!important;
  border-radius:8px!important;
  background:var(--surface-3)!important;
  z-index:auto!important
}

.app-shell .note-dropzone .dz-preview .dz-image img{
  display:block;
  width:100%;
  height:100%;
  -o-object-fit:cover;
     object-fit:cover;
  transform:none!important;
  filter:none!important
}

.app-shell .note-dropzone .dz-preview .dz-details{
  position:static!important;
  display:flex;
  grid-column:2;
  grid-row:1;
  min-width:0!important;
  max-width:none!important;
  flex-direction:column;
  padding:0!important;
  color:var(--text)!important;
  font-size:12px!important;
  line-height:1.35!important;
  text-align:left!important;
  opacity:1!important;
  z-index:auto!important
}

.app-shell .note-dropzone .dz-preview .dz-filename{
  order:-1;
  min-width:0;
  overflow:hidden;
  color:var(--text);
  font-size:12.5px;
  font-weight:700;
  white-space:nowrap;
  text-overflow:ellipsis
}

.app-shell .note-dropzone .dz-preview .dz-filename span,
.app-shell .note-dropzone .dz-preview .dz-size span{
  padding:0!important;
  border:0!important;
  background:transparent!important
}

.app-shell .note-dropzone .dz-preview .dz-size{
  margin:3px 0 0!important;
  color:var(--text-3);
  font-size:11px!important
}

.app-shell .note-dropzone .dz-preview .dz-progress{
  position:absolute!important;
  left:68px!important;
  right:88px!important;
  bottom:9px!important;
  top:auto!important;
  width:auto!important;
  height:3px!important;
  margin:0!important;
  overflow:hidden;
  border-radius:3px;
  background:var(--surface-3);
  opacity:1;
  pointer-events:none;
  z-index:2
}

.app-shell .note-dropzone .dz-preview .dz-progress .dz-upload{
  position:absolute;
  inset:0 auto 0 0;
  background:var(--brand);
  transition:width .25s ease
}

.app-shell .note-dropzone .dz-preview.dz-complete .dz-progress{
  opacity:0
}

.app-shell .note-dropzone .dz-preview .dz-success-mark,
.app-shell .note-dropzone .dz-preview .dz-error-mark{
  position:static!important;
  display:none!important;
  grid-column:3;
  grid-row:1;
  width:28px;
  height:28px;
  margin:0!important;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  pointer-events:none;
  opacity:1!important;
  z-index:auto!important;
  animation:none!important
}

.app-shell .note-dropzone .dz-preview.dz-success .dz-success-mark{
  display:flex!important;
  background:var(--brand-weak)
}

.app-shell .note-dropzone .dz-preview.dz-error .dz-error-mark{
  display:flex!important;
  background:var(--danger-weak)
}

.app-shell .note-dropzone .dz-preview .dz-success-mark svg,
.app-shell .note-dropzone .dz-preview .dz-error-mark svg{
  display:block;
  width:22px!important;
  height:22px!important
}

.app-shell .note-dropzone .dz-preview:not(.dz-error) .dz-error-message{
  display:none!important
}

.app-shell .note-dropzone .dz-preview.dz-error .dz-error-message{
  position:static!important;
  display:block!important;
  grid-column:2/5;
  grid-row:2;
  width:auto!important;
  margin:0;
  padding:0!important;
  border:0;
  border-radius:0;
  background:transparent!important;
  color:var(--danger);
  font-size:11px;
  font-weight:600;
  line-height:1.4;
  opacity:1!important;
  pointer-events:auto;
  z-index:auto!important
}

.app-shell .note-dropzone .dz-preview .dz-error-message:after{
  display:none!important
}

.app-shell .note-dropzone .dz-preview .dz-remove{
  display:flex!important;
  grid-column:4;
  grid-row:1;
  width:28px;
  height:28px;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface-2);
  color:var(--text-3);
  font-size:0!important;
  font-weight:700;
  text-align:center;
  text-decoration:none!important;
  cursor:pointer
}

.app-shell .note-dropzone .dz-preview .dz-remove:before{
  content:'\00d7';
  font-size:19px;
  font-weight:500;
  line-height:1
}

.app-shell .note-dropzone .dz-preview .dz-remove:hover{
  border-color:var(--danger);
  background:var(--danger-weak);
  color:var(--danger)
}

.app-shell .note-private-control{
  display:grid;
  grid-template-columns:20px 34px minmax(0,1fr);
  gap:10px;
  align-items:center;
  padding:12px 13px;
  border:1px solid var(--border);
  border-radius:11px;
  background:var(--surface-2);
  cursor:pointer
}

.app-shell .note-private-control:hover{
  border-color:var(--text-3);
  background:var(--surface-3)
}

.app-shell .note-private-control input[type="checkbox"]{
  width:19px;
  height:19px;
  margin:0;
  accent-color:var(--brand);
  cursor:pointer
}

.app-shell .note-private-icon{
  display:flex;
  width:32px;
  height:32px;
  align-items:center;
  justify-content:center;
  border-radius:9px;
  background:var(--surface);
  color:var(--text-2)
}

.app-shell .note-private-icon svg{
  width:15px;
  height:15px
}

.app-shell .note-private-copy{
  min-width:0
}

.app-shell .note-private-copy strong{
  display:block;
  color:var(--text);
  font-size:12.5px;
  font-weight:800
}

.app-shell .note-private-copy small{
  display:block;
  margin-top:2px;
  color:var(--text-3);
  font-size:11px;
  line-height:1.4
}

.app-shell .note-modal-content .modal-footer{
  flex:none;
  justify-content:flex-end;
  padding:13px 18px
}

.app-shell .note-modal-content .modal-footer .btn-ghost,
.app-shell .note-modal-content .modal-footer .btn-primary{
  height:40px;
  min-width:92px;
  justify-content:center
}

.app-shell .note-modal-content .modal-footer .btn-primary svg{
  width:16px;
  height:16px
}

.app-shell .note-submit-default,.app-shell .note-submit-progress{
  align-items:center;
  justify-content:center;
  gap:8px
}

.app-shell .note-submit-default{
  display:inline-flex
}

.app-shell .note-submit-progress{
  display:none
}

.app-shell .note-submit-button.is-loading .note-submit-default{
  display:none
}

.app-shell .note-submit-button.is-loading .note-submit-progress{
  display:inline-flex
}

.app-shell .note-submit-button:disabled{
  cursor:wait;
  opacity:.78;
  box-shadow:none
}

.app-shell .note-modal-content [data-dismiss="modal"]:disabled{
  cursor:not-allowed;
  opacity:.5
}

.app-shell .note-submit-spinner{
  width:15px;
  height:15px;
  border:2px solid rgba(255,255,255,.45);
  border-top-color:#fff;
  border-radius:50%;
  animation:note-submit-spin .7s linear infinite
}

@keyframes note-submit-spin{
  to{
    transform:rotate(360deg)
  }
}

/* Read-only document and note viewer. */

.app-shell .note-view-dialog{
  width:min(680px,100%);
  margin:12px auto
}

.app-shell .note-view-content{
  display:flex;
  max-height:calc(100vh - 56px);
  flex-direction:column
}

.app-shell .note-view-content .modal-header{
  flex:none;
  padding:16px 18px
}

.app-shell .note-view-title{
  max-width:520px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis
}

.app-shell .note-view-content .close svg{
  width:17px;
  height:17px
}

.app-shell .note-view-content .modal-body{
  min-height:150px;
  padding:20px;
  overflow-y:auto
}

.app-shell .note-view-description{
  color:var(--text);
  font-size:13.5px;
  line-height:1.7;
  overflow-wrap:anywhere
}

.app-shell .note-view-description>:first-child{
  margin-top:0
}

.app-shell .note-view-description>:last-child{
  margin-bottom:0
}

.app-shell .note-view-empty{
  display:flex;
  min-height:90px;
  align-items:center;
  justify-content:center;
  color:var(--text-3)
}

.app-shell .note-view-attachments{
  margin-top:20px;
  padding-top:17px;
  border-top:1px solid var(--border)
}

.app-shell .note-view-section-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px
}

.app-shell .note-view-section-heading>div{
  display:flex;
  align-items:center;
  gap:7px
}

.app-shell .note-view-section-heading h5{
  margin:0;
  color:var(--text);
  font-size:12.5px;
  font-weight:800
}

.app-shell .note-view-section-heading span{
  display:inline-flex;
  min-width:20px;
  height:20px;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  background:var(--surface-3);
  color:var(--text-2);
  font-size:10px;
  font-weight:800
}

.app-shell .note-view-file-list{
  display:grid;
  gap:8px
}

.app-shell .note-view-file-list br{
  display:none
}

.app-shell .note-view-file{
  display:grid;
  grid-template-columns:34px minmax(0,1fr) 30px;
  gap:10px;
  align-items:center;
  min-height:50px;
  padding:7px 9px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface-2);
  color:var(--text)!important;
  transition:border-color .15s,background .15s,box-shadow .15s
}

.app-shell .note-view-file:hover{
  border-color:rgba(21,154,77,.36);
  background:var(--brand-weak);
  box-shadow:var(--shadow-sm)
}

.app-shell .note-view-file-icon,.app-shell .note-view-download{
  display:flex;
  align-items:center;
  justify-content:center
}

.app-shell .note-view-file-icon{
  width:34px;
  height:34px;
  border-radius:8px;
  background:var(--surface);
  color:var(--brand-strong)
}

.app-shell .note-view-file-icon svg{
  width:16px;
  height:16px
}

.app-shell .note-view-file-name{
  min-width:0;
  overflow:hidden;
  font-size:12.5px;
  font-weight:700;
  white-space:nowrap;
  text-overflow:ellipsis
}

.app-shell .note-view-download{
  width:30px;
  height:30px;
  border-radius:8px;
  color:var(--text-3)
}

.app-shell .note-view-download svg{
  width:15px;
  height:15px
}

.app-shell .note-view-file:hover .note-view-download{
  background:var(--surface);
  color:var(--brand-strong)
}

.app-shell .note-view-content .modal-footer{
  flex:none;
  padding:12px 18px
}

.app-shell .note-view-meta{
  display:flex;
  min-width:0;
  align-items:center;
  gap:16px;
  color:var(--text-3);
  font-size:11.5px
}

.app-shell .note-view-meta span{
  display:inline-flex;
  min-width:0;
  align-items:center;
  gap:6px
}

.app-shell .note-view-meta svg{
  width:14px;
  height:14px;
  flex:none
}

.app-shell .note-view-content .modal-footer .btn-ghost{
  height:38px;
  min-width:82px;
  justify-content:center
}

.app-shell .note-view-loading-content{
  display:flex;
  min-height:180px;
  align-items:center;
  justify-content:center
}

.app-shell .note-view-loading-state{
  display:flex;
  align-items:center;
  flex-direction:column;
  gap:12px;
  color:var(--text-2);
  font-size:12.5px
}

.app-shell .note-view-loading-state strong{
  font-weight:700
}

.app-shell .note-view-loading-spinner{
  width:28px;
  height:28px;
  border:3px solid var(--brand-weak);
  border-top-color:var(--brand);
  border-radius:50%;
  animation:note-submit-spin .7s linear infinite
}

.app-shell .modal.in .note-view-dialog.note-view-enter{
  opacity:0;
  transform:translateY(5px)
}

.app-shell .modal.in .note-view-dialog.note-view-enter.is-visible{
  opacity:1;
  transform:none
}

@media (max-width:767.98px){
  .app-shell .note-modal-dialog{
    margin:0 auto
  }

  .app-shell .note-modal-content{
    max-height:calc(100vh - 32px)
  }

  .app-shell .note-modal-content .modal-body{
    padding:16px
  }

  .app-shell .note-description-field .mce-edit-area iframe,
  .app-shell .note-description-field .tox .tox-edit-area__iframe{
    min-height:180px!important
  }

  .app-shell .note-view-dialog{
    margin:0 auto
  }

  .app-shell .note-view-content{
    max-height:calc(100vh - 32px)
  }

  .app-shell .note-view-content .modal-footer{
    align-items:stretch;
    flex-direction:column
  }

  .app-shell .note-view-meta{
    align-items:flex-start;
    flex-direction:column;
    gap:5px
  }

  .app-shell .note-view-content .modal-footer .btn-ghost{
    width:100%
  }
}

/* Auto messages — the per-contact schedule dialog.
 *
 * It used to carry its own stylesheet: teal bot cards, slate greys and a palette of flat action
 * colours picked one at a time. Nothing in it came from the design system, so a dialog that is
 * mostly status — running, paused, sent, failed — spoke a different colour language to the rest
 * of the app. Everything here is drawn from the tokens instead, which is what makes an ACTIVE
 * badge and a paid invoice the same green. */

.app-shell .am-modal-dialog{
  width:min(940px,100%);
  margin:12px auto
}

.app-shell .am-modal-content{
  display:flex;
  max-height:calc(100vh - 56px);
  flex-direction:column
}

.app-shell .am-modal-content .modal-header{
  flex:none;
  padding:15px 18px
}

.app-shell .am-modal-heading{
  display:flex;
  min-width:0;
  align-items:center;
  gap:11px
}

.app-shell .am-modal-icon{
  display:flex;
  width:36px;
  height:36px;
  flex:none;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .am-modal-icon svg{
  width:18px;
  height:18px
}

.app-shell .am-modal-kicker{
  display:block;
  margin-top:2px;
  color:var(--text-3);
  font-size:11px;
  font-weight:600
}

.app-shell .am-modal-content .close svg{
  width:17px;
  height:17px
}

.app-shell .am-modal-content .modal-body{
  display:flex;
  min-height:0;
  flex:1;
  flex-direction:column;
  gap:16px;
  padding:18px;
  overflow-y:auto;
  background:var(--surface-2)
}

/* Each section keeps its own height; the body scrolls for the rest.

   As flex items they were free to shrink, and a panel that clips its overflow — the start-a-plan
   card does — resolves its automatic minimum height to nought, so it had nothing to hold it open.
   Once the dialog held more than fitted, that card was squeezed: its bottom padding went first and
   the Start button under the fields went with it, leaving a card that looked as though it ended at
   the date row. */

.app-shell .am-modal-content .modal-body>*{
  flex:none
}

.app-shell .am-modal-content .modal-footer{
  flex:none;
  justify-content:flex-end;
  padding:12px 18px
}

.app-shell .am-modal-content .modal-footer .btn-ghost{
  height:38px;
  min-width:88px;
  justify-content:center
}

/* Opt-out switch */

.app-shell .am-optout{
  display:grid;
  grid-template-columns:20px 34px minmax(0,1fr);
  gap:11px;
  align-items:center;
  margin:0;
  padding:12px 13px;
  border:1px solid var(--border);
  border-radius:11px;
  background:var(--surface);
  cursor:pointer
}

.app-shell .am-optout:hover{
  border-color:var(--text-3);
  background:var(--surface-3)
}

.app-shell .am-optout input[type="checkbox"]{
  width:19px;
  height:19px;
  margin:0;
  accent-color:var(--danger);
  cursor:pointer
}

.app-shell .am-optout-icon{
  display:flex;
  width:34px;
  height:34px;
  align-items:center;
  justify-content:center;
  border-radius:9px;
  background:var(--surface-3);
  color:var(--text-3)
}

.app-shell .am-optout-icon svg{
  width:16px;
  height:16px
}

.app-shell .am-optout:has(input:checked) .am-optout-icon{
  background:var(--danger-weak);
  color:var(--danger)
}

.app-shell .am-optout-copy{
  min-width:0
}

.app-shell .am-optout-copy strong{
  display:block;
  color:var(--text);
  font-size:12.5px;
  font-weight:750
}

.app-shell .am-optout-copy small{
  display:block;
  margin-top:2px;
  color:var(--text-3);
  font-size:10.5px;
  line-height:1.45
}

/* Start-a-plan panel */

.app-shell .am-panel{
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface)
}

.app-shell .am-panel-head{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-bottom:1px solid var(--border-2);
  background:var(--surface-2)
}

.app-shell .am-panel-icon{
  display:flex;
  width:32px;
  height:32px;
  flex:none;
  align-items:center;
  justify-content:center;
  border-radius:9px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .am-panel-icon svg{
  width:16px;
  height:16px
}

.app-shell .am-panel-head strong{
  display:block;
  color:var(--text);
  font-size:12.5px;
  font-weight:780
}

.app-shell .am-panel-head small{
  display:block;
  margin-top:2px;
  color:var(--text-3);
  font-size:10.5px
}

.app-shell .am-panel-body{
  padding:14px
}

.app-shell .am-start-grid{
  display:grid;
  grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) minmax(0,.8fr) minmax(0,1fr);
  gap:11px
}

.app-shell .am-field{
  min-width:0
}

.app-shell .am-label{
  display:flex;
  align-items:center;
  gap:6px;
  margin:0 0 6px;
  color:var(--text-2);
  font-size:11px;
  font-weight:700
}

.app-shell .am-label svg{
  width:13px;
  height:13px;
  color:var(--text-3)
}

.app-shell .am-hint{
  margin:8px 0 0;
  color:var(--text-3);
  font-size:10.5px;
  line-height:1.5
}

.app-shell .am-bot-note{
  margin-top:10px
}

/* Bot picker cards */

.app-shell .am-bot-pick{
  margin-top:13px
}

.app-shell .am-bot-cards{
  display:flex;
  flex-wrap:wrap;
  gap:8px
}

.app-shell .am-bot-card{
  position:relative;
  display:flex;
  min-width:210px;
  max-width:360px;
  flex:1 1 240px;
  align-items:center;
  gap:9px;
  padding:8px 10px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface);
  cursor:pointer;
  outline:none;
  transition:border-color .15s ease,background .15s ease
}

.app-shell .am-bot-card:hover{
  border-color:color-mix(in srgb,var(--brand) 40%,var(--border));
  background:var(--surface-2)
}

.app-shell .am-bot-card:focus-visible{
  border-color:var(--brand)
}

.app-shell .am-bot-card.is-selected{
  border-color:var(--brand);
  background:var(--brand-weak)
}

.app-shell .am-bot-ico{
  display:flex;
  width:32px;
  height:32px;
  flex:none;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  background:var(--surface-3);
  color:var(--text-3)
}

.app-shell .am-bot-ico svg{
  width:16px;
  height:16px
}

.app-shell .am-bot-card.is-selected .am-bot-ico{
  background:var(--brand);
  color:#fff
}

.app-shell .am-bot-meta{
  display:flex;
  min-width:0;
  flex-direction:column;
  line-height:1.3
}

.app-shell .am-bot-name{
  color:var(--text);
  font-size:11.5px;
  font-weight:750;
  word-break:break-word
}

.app-shell .am-bot-user{
  color:var(--brand-strong);
  font-size:10.5px;
  font-weight:650;
  word-break:break-all
}

.app-shell .am-bot-tag{
  display:inline-flex;
  align-items:center;
  gap:4px;
  margin-top:1px;
  color:var(--text-3);
  font-size:9.5px
}

.app-shell .am-bot-tag svg{
  width:10px;
  height:10px;
  color:var(--brand)
}

.app-shell .am-bot-check{
  margin-left:auto;
  flex:none;
  color:var(--brand);
  opacity:0;
  transform:scale(.6);
  transition:opacity .15s ease,transform .15s ease
}

.app-shell .am-bot-check svg{
  width:16px;
  height:16px
}

.app-shell .am-bot-card.is-selected .am-bot-check{
  opacity:1;
  transform:none
}

/* Inline notice */

.app-shell .am-notice{
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin-top:11px;
  padding:9px 11px;
  border:1px solid color-mix(in srgb,var(--danger) 26%,var(--border));
  border-radius:10px;
  background:var(--danger-weak);
  color:var(--danger);
  font-size:10.8px;
  line-height:1.5
}

.app-shell .am-notice-icon{
  display:flex;
  flex:none;
  align-items:center
}

.app-shell .am-notice-icon svg{
  width:15px;
  height:15px
}

.app-shell .am-notice-action{
  display:inline-flex;
  align-items:center;
  gap:5px;
  margin-top:3px;
  color:var(--danger);
  font-weight:750;
  white-space:nowrap
}

.app-shell .am-notice-action svg{
  width:12px;
  height:12px
}

/* Submit, with the busy state every save in this app shows */

.app-shell .am-submit-button{
  margin-top:13px
}

.app-shell .am-submit-default,.app-shell .am-submit-progress{
  align-items:center;
  justify-content:center;
  gap:8px
}

.app-shell .am-submit-default{
  display:inline-flex
}

.app-shell .am-submit-progress{
  display:none
}

.app-shell .am-submit-button.is-loading .am-submit-default{
  display:none
}

.app-shell .am-submit-button.is-loading .am-submit-progress{
  display:inline-flex
}

.app-shell .am-submit-button:disabled{
  cursor:wait;
  opacity:.78;
  box-shadow:none
}

.app-shell .am-submit-button svg{
  width:15px;
  height:15px
}

/* Section headings */

.app-shell .am-section{
  min-width:0
}

.app-shell .am-section-head{
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:9px
}

.app-shell .am-section-icon{
  display:flex;
  width:26px;
  height:26px;
  flex:none;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  background:var(--surface-3);
  color:var(--text-2)
}

.app-shell .am-section-icon svg{
  width:14px;
  height:14px
}

.app-shell .am-section-head h5{
  margin:0;
  color:var(--text);
  font-size:12px;
  font-weight:800
}

.app-shell .am-count{
  display:inline-flex;
  min-width:20px;
  height:20px;
  align-items:center;
  justify-content:center;
  padding:0 6px;
  border-radius:999px;
  background:var(--surface-3);
  color:var(--text-3);
  font-size:10px;
  font-weight:750
}

.app-shell .am-scroll{
  display:flex;
  flex-direction:column;
  gap:9px;
  max-height:340px;
  padding-right:3px;
  overflow-y:auto
}

.app-shell .am-history-scroll{
  max-height:300px
}

/* Empty states */

.app-shell .am-empty{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:4px;
  padding:24px;
  border:1px dashed var(--border);
  border-radius:11px;
  background:var(--surface);
  color:var(--text-3);
  text-align:center
}

.app-shell .am-empty-icon{
  display:flex;
  width:36px;
  height:36px;
  align-items:center;
  justify-content:center;
  border-radius:11px;
  background:var(--surface-3);
  color:var(--text-3)
}

.app-shell .am-empty-icon svg{
  width:17px;
  height:17px
}

.app-shell .am-empty strong{
  color:var(--text-2);
  font-size:11.5px;
  font-weight:700
}

.app-shell .am-empty-link{
  display:inline-flex;
  align-items:center;
  gap:5px;
  margin-top:4px;
  color:var(--brand-strong);
  font-size:11px;
  font-weight:750
}

.app-shell .am-empty-link svg{
  width:13px;
  height:13px
}

/* One enrolment */

.app-shell .am-schedule{
  padding:13px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface)
}

.app-shell .am-schedule-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px
}

.app-shell .am-schedule-title{
  display:inline-flex;
  min-width:0;
  align-items:center;
  gap:8px
}

.app-shell .am-schedule-title strong{
  color:var(--text);
  font-size:12.5px;
  font-weight:800
}

.app-shell .am-schedule-actions{
  display:inline-flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px
}

.app-shell .am-schedule-loop{
  display:flex;
  align-items:center;
  gap:5px;
  margin:6px 0 0;
  color:var(--brand-strong);
  font-size:10.5px;
  font-weight:650
}

.app-shell .am-schedule-loop svg{
  width:12px;
  height:12px
}

.app-shell .am-schedule-meta{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:4px 14px;
  margin:7px 0 0;
  color:var(--text-3);
  font-size:10.5px
}

.app-shell .am-schedule-meta>svg{
  width:13px;
  height:13px;
  flex:none
}

.app-shell .am-schedule-meta strong{
  color:var(--text-2);
  font-weight:750
}

.app-shell .am-schedule-target{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
  margin-top:8px
}

.app-shell .am-target-label{
  color:var(--text-3);
  font-size:9px;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase
}

.app-shell .am-via{
  display:inline-flex;
  align-items:center;
  gap:4px;
  color:var(--text-3);
  font-size:10px
}

.app-shell .am-via svg{
  width:11px;
  height:11px
}

/* Status badge and chips share one size so a row of them stays on one baseline */

.app-shell .am-statebadge{
  display:inline-flex;
  height:20px;
  align-items:center;
  padding:0 9px;
  border-radius:6px;
  font-size:9.5px;
  font-weight:800;
  letter-spacing:.04em
}

.app-shell .am-statebadge.st-active{
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .am-statebadge.st-paused{
  background:var(--warn-weak);
  color:var(--warn)
}

.app-shell .am-statebadge.st-completed{
  background:var(--blue-weak);
  color:var(--blue)
}

.app-shell .am-statebadge.st-stopped{
  background:var(--surface-3);
  color:var(--text-3)
}

.app-shell .am-chip{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:3px 9px;
  border-radius:999px;
  font-size:10.5px;
  font-weight:700
}

.app-shell .am-chip svg{
  width:11px;
  height:11px;
  flex:none
}

.app-shell .am-chip-sm{
  padding:2px 7px;
  font-size:9.5px
}

.app-shell .am-chip-sm svg{
  width:10px;
  height:10px
}

.app-shell .am-chip-group{
  background:var(--violet-weak);
  color:var(--violet)
}

.app-shell .am-chip-personal{
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .am-chip-danger{
  background:var(--danger-weak);
  color:var(--danger)
}

.app-shell .am-chip-auto{
  background:var(--teal-weak);
  color:var(--teal)
}

.app-shell .am-chip-manual{
  background:var(--blue-weak);
  color:var(--blue)
}

/* Action buttons — one size, colour carries the meaning */

.app-shell .am-actbtn{
  display:inline-flex;
  height:26px;
  align-items:center;
  gap:5px;
  padding:0 10px;
  border:1px solid transparent;
  border-radius:7px;
  font-size:10.5px;
  font-weight:750;
  line-height:1;
  white-space:nowrap;
  cursor:pointer;
  transition:.14s ease
}

.app-shell .am-actbtn svg{
  width:12px;
  height:12px
}

.app-shell .am-actbtn:hover{
  filter:brightness(.97)
}

.app-shell .am-actbtn:disabled,.app-shell .am-actbtn.is-busy{
  opacity:.6;
  cursor:wait
}

.app-shell .am-actbtn.is-pause{
  border-color:color-mix(in srgb,var(--warn) 30%,var(--border));
  background:var(--warn-weak);
  color:var(--warn)
}

.app-shell .am-actbtn.is-resume,.app-shell .am-actbtn.is-send{
  border-color:transparent;
  background:var(--brand);
  color:#fff
}

.app-shell .am-actbtn.is-stop{
  border-color:var(--border);
  background:var(--surface-3);
  color:var(--text-2)
}

.app-shell .am-actbtn.is-delete{
  border-color:color-mix(in srgb,var(--danger) 28%,var(--border));
  background:var(--danger-weak);
  color:var(--danger)
}

.app-shell .am-actbtn.is-skip{
  border-color:var(--border);
  background:var(--surface);
  color:var(--text-3)
}

/* Timeline */

.app-shell .am-timeline{
  display:flex;
  flex-direction:column;
  margin:11px 0 0;
  padding:0;
  border:1px solid var(--border-2);
  border-radius:10px;
  list-style:none;
  overflow:hidden
}

.app-shell .am-step{
  display:grid;
  grid-template-columns:22px 78px minmax(0,1fr) auto auto;
  gap:4px 10px;
  align-items:center;
  padding:9px 11px;
  background:var(--surface)
}

.app-shell .am-step+.am-step{
  border-top:1px solid var(--border-2)
}

.app-shell .am-step-marker{
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--text-3)
}

.app-shell .am-step-marker svg{
  width:14px;
  height:14px
}

.app-shell .am-step.is-sent .am-step-marker{
  color:var(--brand)
}

.app-shell .am-step.is-next{
  background:var(--brand-weak)
}

.app-shell .am-step.is-next .am-step-marker{
  color:var(--brand-strong)
}

.app-shell .am-step-when{
  color:var(--text-3);
  font-size:10px;
  font-weight:700
}

.app-shell .am-step-body{
  min-width:0
}

.app-shell .am-step-headline{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px
}

.app-shell .am-step-headline strong{
  color:var(--text);
  font-size:11px;
  font-weight:750
}

.app-shell .am-step-repeat{
  display:inline-flex;
  color:var(--text-3)
}

.app-shell .am-step-repeat svg{
  width:11px;
  height:11px
}

.app-shell .am-lang{
  padding:1px 6px;
  border:1px solid var(--border);
  border-radius:5px;
  color:var(--text-3);
  font-size:9px;
  font-weight:750;
  letter-spacing:.03em
}

.app-shell .am-step-date{
  color:var(--text-3);
  font-size:10px;
  white-space:nowrap
}

.app-shell .am-step-actions{
  display:inline-flex;
  align-items:center;
  gap:6px
}

.app-shell .am-step-actions:empty{
  display:none
}

/* Preview toggle carries both icons and shows one — see the modal script */

.app-shell .am-preview-toggle{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:0;
  border:0;
  background:none;
  color:var(--brand-strong);
  font-size:10px;
  font-weight:700;
  cursor:pointer
}

.app-shell .am-preview-toggle svg{
  width:12px;
  height:12px
}

.app-shell .am-preview-toggle .am-preview-hide{
  display:none
}

.app-shell .am-preview-toggle.is-open .am-preview-show{
  display:none
}

.app-shell .am-preview-toggle.is-open .am-preview-hide{
  display:inline-flex
}

.app-shell .am-preview{
  max-height:170px;
  margin-top:6px;
  padding:8px 10px;
  border:1px solid var(--border-2);
  border-radius:8px;
  background:var(--surface-2);
  color:var(--text-2);
  font-size:10.5px;
  line-height:1.55;
  white-space:pre-wrap;
  overflow:auto
}

.app-shell .am-preview-empty{
  display:flex;
  align-items:center;
  gap:6px;
  border-color:color-mix(in srgb,var(--warn) 30%,var(--border));
  background:var(--warn-weak);
  color:var(--warn);
  white-space:normal
}

.app-shell .am-preview-empty svg{
  width:13px;
  height:13px;
  flex:none
}

/* Send history */

.app-shell .am-history-row{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  padding:9px 11px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface)
}

.app-shell .am-history-status{
  display:flex;
  flex:none;
  align-items:center
}

.app-shell .am-history-status svg{
  width:15px;
  height:15px
}

.app-shell .am-history-status.is-success{
  color:var(--brand)
}

.app-shell .am-history-status.is-failed{
  color:var(--danger)
}

.app-shell .am-history-status.is-pending{
  color:var(--text-3)
}

.app-shell .am-history-template{
  min-width:0;
  color:var(--text);
  font-size:11px;
  font-weight:750
}

.app-shell .am-history-when{
  margin-left:auto;
  color:var(--text-3);
  font-size:10px;
  white-space:nowrap
}

.app-shell .am-history-by{
  display:inline-flex;
  align-items:center;
  gap:4px;
  color:var(--text-3);
  font-size:10px
}

.app-shell .am-history-by svg{
  width:11px;
  height:11px
}

.app-shell .am-history-error{
  display:flex;
  flex-basis:100%;
  align-items:center;
  gap:5px;
  color:var(--danger);
  font-size:10px
}

.app-shell .am-history-error svg{
  width:12px;
  height:12px;
  flex:none
}

@media (max-width:767.98px){
  .app-shell .am-modal-dialog{
    margin:0 auto
  }

  .app-shell .am-modal-content{
    max-height:calc(100vh - 32px)
  }

  .app-shell .am-modal-content .modal-body{
    gap:13px;
    padding:14px
  }

  .app-shell .am-start-grid{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)
  }

  .app-shell .am-field-plan{
    grid-column:1/-1
  }

  .app-shell .am-step{
    grid-template-columns:22px minmax(0,1fr);
    gap:5px 9px
  }

  .app-shell .am-step-when{
    grid-column:2
  }

  .app-shell .am-step-body,.app-shell .am-step-date,.app-shell .am-step-actions{
    grid-column:2
  }

  .app-shell .am-history-when{
    margin-left:0
  }
}

@media (max-width:1199.98px){
  .app-shell .detail-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

  .app-shell .detail-item:nth-child(3n){
    border-right:1px solid var(--border-2)
  }

  .app-shell .detail-item:nth-child(2n){
    border-right:0
  }
}

@media (max-width:1023.98px){
  .app-shell .user-detail-grid{
    grid-template-columns:1fr
  }

  .app-shell .user-profile-card{
    position:static
  }

  .app-shell .user-profile-body{
    display:grid;
    grid-template-columns:120px minmax(0,1fr);
    -moz-column-gap:18px;
         column-gap:18px;
    align-items:center;
    padding:20px
  }

  .app-shell .user-profile-accent{
    display:none
  }

  .app-shell .user-profile-avatar-wrap{
    grid-row:1/4;
    width:96px;
    height:96px;
    margin:0 auto
  }

  .app-shell .user-profile-avatar{
    width:96px;
    height:96px
  }

  .app-shell .user-profile-heading{
    text-align:left;
    margin:0
  }

  .app-shell .user-profile-status{
    justify-content:flex-start;
    margin:10px 0 0;
    width:-moz-max-content;
    width:max-content
  }

  .app-shell .user-profile-meta{
    grid-column:1/-1;
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    margin-top:16px
  }

  .app-shell .user-profile-meta-row{
    border-top:1px solid var(--border-2);
    border-bottom:0;
    padding:14px 10px 0
  }
}

@media (max-width:767.98px){
  .app-shell .user-switcher{
    width:min(100%,260px)
  }

  .app-shell .user-detail-summary{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

  .app-shell .user-detail-summary-item:nth-child(2){
    border-right:0
  }

  .app-shell .user-detail-summary-item:nth-child(-n+2){
    border-bottom:1px solid var(--border-2)
  }

  .app-shell .detail-grid,.app-shell .detail-grid-identity{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

  .app-shell .user-profile-meta{
    grid-template-columns:1fr
  }

  .app-shell .user-profile-meta-row{
    padding:12px 0;
    border-top:0;
    border-bottom:1px solid var(--border-2)
  }
}

@media (max-width:520px){
  .app-shell .user-profile-body{
    display:flex;
    flex-direction:column;
    padding:20px
  }

  .app-shell .user-profile-heading{
    margin-top:12px;
    text-align:center
  }

  .app-shell .user-profile-status{
    justify-content:center
  }

  .app-shell .user-profile-meta{
    display:flex;
    width:100%
  }

  .app-shell .user-detail-tabs{
    padding:8px
  }

  .app-shell .user-detail-tab{
    padding:0 10px
  }

  .app-shell .user-detail-summary{
    grid-template-columns:1fr
  }

  .app-shell .user-detail-summary-item{
    border-right:0;
    border-bottom:1px solid var(--border-2)
  }

  .app-shell .detail-grid,.app-shell .detail-grid-identity{
    grid-template-columns:1fr
  }

  .app-shell .detail-item,.app-shell .detail-item:nth-child(n){
    border-right:0
  }

  .app-shell .detail-section-head{
    padding:16px 16px 0
  }

  .app-shell .detail-section-body{
    padding:14px 16px 18px
  }
}

/* Customer groups */

.app-shell .customer-groups-list-card{
  overflow:hidden
}

.app-shell .customer-groups-table--cards{
  display:block;
  width:100%!important;
  border:0
}

.app-shell .customer-groups-table--cards thead{
  display:none
}

.app-shell .customer-groups-table--cards tbody{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  padding:16px;
  background:var(--surface)
}

.app-shell .customer-groups-table--cards tbody tr{
  display:grid;
  min-width:0;
  min-height:208px;
  grid-template-columns:1fr 1fr;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface);
  box-shadow:var(--shadow-sm);
  transition:border-color .15s,box-shadow .15s,transform .15s
}

.app-shell .customer-groups-table--cards tbody tr:hover{
  border-color:color-mix(in srgb,var(--brand) 28%,var(--border));
  background:var(--surface);
  box-shadow:0 10px 24px -20px rgba(16,32,24,.42);
  transform:translateY(-1px)
}

.app-shell .customer-groups-table--cards tbody td{
  display:flex;
  width:100%!important;
  height:auto;
  padding:0;
  border:0
}

.app-shell .customer-groups-table--cards tbody td:first-child{
  grid-column:1/-1;
  padding:15px 16px 13px
}

.app-shell .customer-groups-table--cards tbody td:nth-child(2){
  grid-column:1/-1;
  padding:0 12px 12px
}

.app-shell .customer-groups-table--cards tbody td:nth-child(3){
  grid-column:1/-1;
  min-width:0;
  padding:11px 12px;
  border-top:1px solid var(--border-2)
}

.app-shell .customer-groups-table--cards tbody td:nth-child(4){
  display:none
}

.app-shell .customer-groups-table--cards tbody td:last-child{
  grid-column:1/-1;
  min-height:48px;
  align-items:center;
  justify-content:flex-end;
  padding:7px 10px;
  border-top:1px solid var(--border-2);
  background:var(--surface)
}

.app-shell .customer-groups-table--cards tbody tr:has(td.dataTables_empty){
  grid-column:1/-1;
  min-height:180px;
  align-items:center;
  justify-content:center
}

.app-shell .customer-groups-table--cards tbody td.dataTables_empty{
  align-items:center;
  justify-content:center;
  padding:28px;
  color:var(--text-3)
}

.app-shell .customer-group-identity{
  display:flex;
  min-width:0;
  align-items:center;
  gap:11px
}

.app-shell .customer-group-icon{
  display:inline-flex;
  width:34px;
  height:34px;
  flex:none;
  align-items:center;
  justify-content:center;
  border-radius:9px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .customer-group-icon svg{
  width:17px;
  height:17px
}

.app-shell .customer-group-identity>div{
  min-width:0
}

.app-shell .customer-group-identity strong{
  display:block;
  overflow:hidden;
  color:var(--text);
  font-size:13.5px;
  font-weight:750;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .customer-group-identity small{
  display:block;
  margin-top:2px;
  color:var(--text-3);
  font-size:11px;
  font-weight:500
}

.app-shell .customer-group-customers-trigger{
  display:flex;
  width:100%;
  min-height:58px;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:10px 12px;
  border:1px solid var(--border-2);
  border-radius:9px;
  background:var(--surface);
  color:var(--text);
  font:inherit;
  text-align:left;
  cursor:pointer;
  transition:border-color .15s,background .15s,box-shadow .15s
}

.app-shell .customer-group-customers-trigger:hover,.app-shell .customer-group-customers-trigger:focus-visible{
  border-color:color-mix(in srgb,var(--brand) 38%,var(--border));
  background:var(--brand-weak);
  box-shadow:0 0 0 3px rgba(21,154,77,.07);
  outline:none
}

.app-shell .customer-group-count-copy{
  display:flex;
  min-width:0;
  flex-direction:column
}

.app-shell .customer-group-count-copy strong{
  color:var(--text);
  font-size:23px;
  font-weight:800;
  line-height:1.05
}

.app-shell .customer-group-count-copy small{
  margin-top:3px;
  color:var(--text-3);
  font-size:10.5px;
  font-weight:650
}

.app-shell .customer-group-view-copy{
  display:inline-flex;
  align-items:center;
  gap:4px;
  color:var(--brand-strong);
  font-size:11.5px;
  font-weight:750;
  white-space:nowrap
}

.app-shell .customer-group-view-copy svg{
  width:15px;
  height:15px;
  transition:transform .15s
}

.app-shell .customer-group-customers-trigger:hover .customer-group-view-copy svg{
  transform:translateX(2px)
}

.app-shell .customer-group-pricing-method{
  display:grid;
  width:100%;
  min-width:0;
  grid-template-columns:34px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  padding:9px 10px;
  border-radius:9px;
  background:var(--surface-2)
}

.app-shell .customer-group-pricing-icon{
  display:inline-flex;
  width:34px;
  height:34px;
  align-items:center;
  justify-content:center;
  border-radius:8px
}

.app-shell .customer-group-pricing-icon svg{
  width:16px;
  height:16px
}

.app-shell .customer-group-pricing-method.is-percentage .customer-group-pricing-icon{
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .customer-group-pricing-method.is-price-group .customer-group-pricing-icon{
  background:var(--blue-weak);
  color:var(--blue)
}

.app-shell .customer-group-pricing-copy{
  display:flex;
  min-width:0;
  flex-direction:column;
  gap:1px
}

.app-shell .customer-group-pricing-copy small{
  color:var(--text-3);
  font-size:9.5px;
  font-weight:700;
  letter-spacing:.2px;
  line-height:1.25;
  text-transform:uppercase
}

.app-shell .customer-group-pricing-copy strong{
  overflow:hidden;
  color:var(--text);
  font-size:11.5px;
  font-weight:750;
  line-height:1.35;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .customer-group-pricing-value{
  display:inline-flex;
  min-height:27px;
  max-width:145px;
  align-items:center;
  padding:0 9px;
  border-radius:7px;
  font-size:11.5px;
  font-weight:800;
  line-height:1.2;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .customer-group-pricing-method.is-percentage .customer-group-pricing-value{
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .customer-group-pricing-method.is-price-group .customer-group-pricing-value{
  background:var(--blue-weak);
  color:var(--blue)
}

.app-shell .customer-group-empty{
  color:var(--text-3)
}

.app-shell .customer-group-row-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px
}

.app-shell .customer-group-row-actions .act{
  display:inline-flex;
  width:34px;
  height:34px;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface);
  color:var(--text-2);
  cursor:pointer;
  transition:border-color .15s,background .15s,color .15s
}

.app-shell .customer-group-row-actions .act svg{
  width:15px;
  height:15px
}

.app-shell .customer-group-row-actions .act:hover{
  border-color:rgba(21,154,77,.35);
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .customer-group-row-actions .customer-group-delete-action{
  border-color:rgba(239,68,68,.24);
  color:var(--danger)
}

.app-shell .customer-group-row-actions .customer-group-delete-action:hover{
  border-color:rgba(239,68,68,.42);
  background:var(--danger-weak);
  color:var(--danger)
}

.app-shell .customer-group-customers-dialog{
  width:min(780px,calc(100vw - 32px));
  max-width:780px
}

.app-shell .customer-group-customers-modal-content{
  display:flex;
  max-height:calc(100vh - 48px);
  flex-direction:column;
  overflow:hidden
}

.app-shell .customer-group-customers-modal-content .modal-header{
  display:flex;
  flex:none;
  align-items:center;
  justify-content:space-between;
  padding:15px 18px
}

.app-shell .customer-group-customers-heading{
  display:flex;
  min-width:0;
  align-items:center;
  gap:11px
}

.app-shell .customer-group-customers-heading>span{
  display:inline-flex;
  width:38px;
  height:38px;
  flex:none;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .customer-group-customers-heading>div{
  min-width:0
}

.app-shell .customer-group-customers-heading h4{
  overflow:hidden;
  margin:0;
  color:var(--text);
  font-size:16px;
  font-weight:800;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .customer-group-customers-heading p{
  margin:2px 0 0;
  color:var(--text-3);
  font-size:11.5px
}

.app-shell .customer-group-customers-modal-content .modal-body{
  min-height:0;
  padding:0!important;
  overflow-y:auto;
  background:var(--surface)
}

.app-shell .customer-group-customers-modal-content .table-toolbar{
  position:sticky;
  top:0;
  z-index:4;
  padding:12px 16px;
  background:var(--surface)
}

.app-shell .customer-group-customers-modal-content .table-toolbar-search{
  width:min(100%,420px)
}

.app-shell .customer-group-customers-stage{
  min-height:230px
}

.app-shell .customer-group-customers-stage>.dataTables_wrapper{
  padding:0
}

.app-shell .customer-directory-columns{
  display:grid;
  grid-template-columns:minmax(220px,1.45fr) minmax(130px,.7fr) minmax(170px,1fr);
  gap:18px;
  margin:0 16px;
  padding:10px 14px;
  border-bottom:1px solid var(--border);
  background:var(--surface-2);
  color:var(--text-3);
  font-size:10px;
  font-weight:750;
  letter-spacing:.35px;
  text-transform:uppercase
}

.app-shell .customer-group-customers-table{
  display:block;
  width:100%!important;
  border:0
}

.app-shell .customer-group-customers-table thead{
  display:none
}

.app-shell .customer-group-customers-table tbody{
  display:block;
  padding:0 16px
}

.app-shell .customer-group-customers-table tbody tr{
  display:block;
  min-width:0;
  background:transparent!important
}

.app-shell .customer-group-customers-table tbody td{
  display:block;
  width:100%!important;
  padding:0;
  border:0
}

.app-shell .customer-group-customers-table tbody td.dataTables_empty{
  padding:52px 16px;
  color:var(--text-3);
  text-align:center
}

.app-shell .customer-directory-card{
  position:relative;
  display:grid;
  min-width:0;
  min-height:56px;
  grid-template-columns:minmax(220px,1.45fr) minmax(130px,.7fr) minmax(170px,1fr);
  align-items:center;
  gap:18px;
  padding:8px 14px;
  border-bottom:1px solid var(--border-2);
  background:var(--surface);
  transition:background .15s
}

.app-shell .customer-group-customers-table tbody tr:last-child .customer-directory-card{
  border-bottom:0
}

.app-shell .customer-directory-card:hover{
  background:var(--surface-2)
}

.app-shell .customer-directory-identity,.app-shell .customer-directory-id,.app-shell .customer-directory-mobile{
  display:block;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .customer-directory-identity strong{
  color:var(--text);
  font-size:12.5px;
  font-weight:800
}

.app-shell .customer-directory-id{
  color:var(--text-3);
  font-size:11px;
  font-weight:650;
  letter-spacing:.15px
}

.app-shell .customer-directory-mobile{
  color:var(--text-2);
  font-size:11.5px;
  font-variant-numeric:tabular-nums
}

.app-shell .customer-group-customers-modal-content .data-table-footer{
  min-height:54px;
  padding:9px 16px;
  border-radius:0;
  background:var(--surface-2)
}

.app-shell .customer-group-customers-modal-content .modal-footer{
  display:flex;
  flex:none;
  justify-content:flex-end;
  padding:12px 18px
}

.app-shell .customer-group-dialog{
  width:min(820px,calc(100vw - 32px));
  max-width:820px
}

.app-shell .customer-group-modal-content{
  display:flex;
  max-height:calc(100vh - 48px);
  flex-direction:column
}

.app-shell .customer-group-modal-content .modal-header{
  display:flex;
  flex:none;
  align-items:center;
  justify-content:space-between;
  padding:16px 18px
}

.app-shell .customer-group-modal-heading{
  display:flex;
  min-width:0;
  align-items:center;
  gap:11px
}

.app-shell .customer-group-modal-heading>span{
  display:inline-flex;
  width:38px;
  height:38px;
  flex:none;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .customer-group-modal-heading strong{
  display:block;
  color:var(--text);
  font-size:16px;
  font-weight:800
}

.app-shell .customer-group-modal-heading p{
  margin:2px 0 0;
  color:var(--text-3);
  font-size:11.5px
}

.app-shell .customer-group-modal-body{
  display:grid;
  min-height:0;
  grid-template-columns:minmax(0,1fr) 310px;
  padding:0!important;
  overflow-y:auto
}

.app-shell .customer-group-details{
  padding:24px
}

.app-shell .customer-group-section-heading,.app-shell .customer-group-rule-heading{
  display:flex;
  align-items:center;
  gap:10px;
  padding-bottom:14px;
  border-bottom:1px solid var(--border-2)
}

.app-shell .customer-group-section-heading>span,.app-shell .customer-group-rule-icon{
  display:inline-flex;
  width:34px;
  height:34px;
  flex:none;
  align-items:center;
  justify-content:center;
  border-radius:9px;
  background:var(--blue-weak);
  color:var(--blue)
}

.app-shell .customer-group-section-heading strong,.app-shell .customer-group-rule-heading strong{
  display:block;
  color:var(--text);
  font-size:13px;
  font-weight:800
}

.app-shell .customer-group-section-heading small,.app-shell .customer-group-rule-heading small{
  display:block;
  margin-top:2px;
  color:var(--text-3);
  font-size:10.5px;
  line-height:1.35
}

.app-shell .customer-group-details>.field{
  margin-top:17px
}

.app-shell .customer-group-type-field{
  min-width:0;
  margin:18px 0 0;
  padding:0;
  border:0
}

.app-shell .customer-group-type-field>.flabel{
  margin-bottom:7px;
  padding:0
}

.app-shell .customer-group-mode-options{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px
}

.app-shell .customer-group-mode-option{
  position:relative;
  display:block;
  min-width:0;
  margin:0;
  cursor:pointer
}

.app-shell .customer-group-mode-option>input{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none
}

.app-shell .customer-group-mode-copy{
  display:flex;
  min-height:68px;
  align-items:center;
  gap:10px;
  padding:10px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface);
  transition:border-color .15s,background .15s,box-shadow .15s
}

.app-shell .customer-group-mode-icon{
  display:inline-flex;
  width:32px;
  height:32px;
  flex:none;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  background:var(--surface-2);
  color:var(--text-3);
  transition:background .15s,color .15s
}

.app-shell .customer-group-mode-copy>span:last-child{
  min-width:0
}

.app-shell .customer-group-mode-copy strong,.app-shell .customer-group-mode-copy small{
  display:block;
  line-height:1.3
}

.app-shell .customer-group-mode-copy strong{
  overflow:hidden;
  color:var(--text-2);
  font-size:11.5px;
  font-weight:750;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .customer-group-mode-copy small{
  margin-top:2px;
  color:var(--text-3);
  font-size:9.5px
}

.app-shell .customer-group-mode-option:hover .customer-group-mode-copy{
  border-color:rgba(21,154,77,.34);
  background:var(--surface-2)
}

.app-shell .customer-group-mode-option>input:focus-visible+.customer-group-mode-copy{
  outline:2px solid var(--brand);
  outline-offset:2px
}

.app-shell .customer-group-mode-option>input:checked+.customer-group-mode-copy{
  border-color:rgba(21,154,77,.48);
  background:var(--brand-weak);
  box-shadow:inset 0 0 0 1px rgba(21,154,77,.08)
}

.app-shell .customer-group-mode-option>input:checked+.customer-group-mode-copy .customer-group-mode-icon{
  background:var(--surface);
  color:var(--brand-strong)
}

.app-shell .customer-group-mode-option>input:checked+.customer-group-mode-copy strong{
  color:var(--brand-strong)
}

.app-shell .customer-group-rule-panel{
  padding:24px;
  border-left:1px solid var(--border);
  background:var(--surface)
}

.app-shell .customer-group-rule-icon{
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .customer-group-rule-panel>.percentage-field,.app-shell .customer-group-rule-panel>.selling_price_group-field{
  margin-top:18px
}

.app-shell .customer-group-percent-control{
  position:relative
}

.app-shell .customer-group-percent-control .form-control{
  height:54px;
  padding-right:48px;
  border-color:rgba(21,154,77,.36);
  background:var(--surface);
  color:var(--brand-strong);
  font-size:20px;
  font-weight:800
}

.app-shell .customer-group-percent-control .form-control:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(21,154,77,.1)
}

.app-shell .customer-group-percent-control>span{
  position:absolute;
  top:50%;
  right:16px;
  color:var(--brand-strong);
  font-size:18px;
  font-weight:800;
  transform:translateY(-50%)
}

.app-shell .customer-group-rule-panel p{
  margin:10px 0 0;
  color:var(--text-3);
  font-size:10.5px;
  line-height:1.55
}

.app-shell .customer-group-modal-content .modal-footer{
  display:flex;
  flex:none;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  padding:13px 18px
}

.app-shell .customer-group-modal-content .modal-footer .btn-ghost,.app-shell .customer-group-modal-content .modal-footer .btn-primary{
  min-width:92px;
  justify-content:center
}

@media (max-width:1100px){
  .app-shell .customer-groups-table--cards tbody{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}

@media (max-width:680px){
  .app-shell .customer-groups-table--cards tbody{
    grid-template-columns:1fr;
    padding:10px
  }

  .app-shell .customer-group-customers-dialog{
    width:calc(100vw - 20px);
    margin:10px auto
  }

  .app-shell .customer-group-customers-modal-content{
    max-height:calc(100vh - 20px)
  }

  .app-shell .customer-directory-columns{
    display:none
  }

  .app-shell .customer-group-customers-table tbody{
    padding:0 10px
  }

  .app-shell .customer-group-customers-modal-content .table-toolbar{
    align-items:stretch;
    flex-direction:column
  }

  .app-shell .customer-group-customers-modal-content .table-toolbar-actions{
    justify-content:flex-end
  }

  .app-shell .customer-directory-card{
    min-height:64px;
    grid-template-columns:minmax(0,1fr) minmax(120px,.8fr);
    gap:5px 12px;
    padding:10px 6px
  }

  .app-shell .customer-directory-identity{
    grid-column:1/-1
  }

  .app-shell .customer-group-dialog{
    width:calc(100vw - 20px);
    margin:10px auto
  }

  .app-shell .customer-group-modal-content{
    max-height:calc(100vh - 20px)
  }

  .app-shell .customer-group-modal-body{
    grid-template-columns:1fr
  }

  .app-shell .customer-group-details,.app-shell .customer-group-rule-panel{
    padding:18px
  }

  .app-shell .customer-group-rule-panel{
    border-top:1px solid var(--border);
    border-left:0
  }

  .app-shell .customer-group-mode-options{
    grid-template-columns:1fr
  }
}

/* DataTables Buttons (CSV / Excel / Print / Columns / PDF) */

.app-shell .dt-buttons{
  display:inline-flex;
  flex-wrap:wrap;
  gap:6px;
  margin:8px 10px
}

.app-shell .dt-button,.app-shell .dt-buttons .dt-button{
  height:34px;
  padding:0 12px;
  border-radius:9px;
  border:1px solid var(--border);
  background:var(--surface-2);
  color:var(--text-2)!important;
  font-size:12.5px;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  cursor:pointer
}

.app-shell .dt-button:hover{
  background:var(--surface-3);
  color:var(--text)!important;
  border-color:var(--text-3)
}

/* One row of controls, one height.

   Print, CSV, Excel, PDF, Columns and the rows-per-page select sit on one line, and seven places in
   this file had an opinion about how tall they are: the toolbar's own rules in @layer components,
   the DataTables Buttons block above, a copy near the end of the file, and one per screen that
   wanted its toolbar a little larger. Unlayered beats layered whatever the specificity, ties are
   broken by whichever is written later, and the buttons and the select never matched the same rule
   — so which of them won was decided separately for each, and on some screens they disagreed by a
   couple of pixels.

   The height is now one number, read from the toolbar itself. A screen that wants a different one
   sets the variable on its own toolbar rather than restating the height on each control, so the
   two cannot be given different answers. The !important is what stops the older copies, further
   down the file, from picking the argument back up. */

.app-shell .table-toolbar{
  --table-toolbar-control-h:34px
}

/* The button group's own margin, for the same reason: DataTables Buttons is given 8px/10px of it
   above, unlayered, and the toolbar's reset sits in a layer and loses. That margin is what held the
   group away from the rows-per-page select. Spacing on this row is the toolbar's gap, nothing
   else. */

.app-shell .table-toolbar .table-export-holder .dt-buttons{
  margin:0!important
}

.app-shell .table-toolbar .table-export-holder .dt-button,
.app-shell .table-toolbar .table-export-holder .table-export-button,
.app-shell .table-toolbar .table-export-holder>a,
.app-shell .table-toolbar .table-export-holder>button,
.app-shell .table-toolbar .table-export-holder .dt-buttons>a,
.app-shell .table-toolbar .table-export-holder .dt-buttons>button,
.app-shell .table-toolbar .table-page-size .finput{
  height:var(--table-toolbar-control-h)!important;
  min-height:var(--table-toolbar-control-h)!important;
}

/* ============================================ the export buttons, on a phone
 *
 * Print, CSV, Excel, PDF and Columns are built for a desktop toolbar: 34px tall, 11.5px labels,
 * 14px icons. Five of those do not cross a 390-pixel screen, so every listing in the application
 * wrapped them onto two or three lines of their own or pushed them off the edge of the card.
 *
 * They take an equal share of one row instead. `flex: 1 1 0` sizes each from the share rather than
 * from its label, so PDF and Columns come out the same width and the row reads as one control.
 * `min-width: 0` is what lets a share be narrower than the label inside it — without it each
 * button holds its own min-content and the row overflows the page again.
 *
 * Declared straight after the rule above, unlayered and at the same specificity, because that rule
 * names `.dt-buttons > a` — four classes and an element — and anything written at (0,4,0) loses to
 * it however late it comes and however many !importants it carries. */

@media (max-width:700px){
  /*
   * Rows-per-page belongs beside the search: the two of them say what the table is showing, and
   * the exports are a different kind of thing that reads better as its own strip underneath.
   *
   * The whole toolbar becomes the grid, with named rows, because the select cannot leave the
   * wrapper its markup puts it in by any other means — `display: contents` on that wrapper takes
   * the box away and lets its children take part in this grid directly.
   *
   * A grid rather than a flex row for a second reason: the export strip can outgrow its share,
   * and an overflowing flex item is laid over the item after it. A grid track cannot be
   * encroached on. Rows with nothing in them collapse, so a toolbar with no filters and no
   * action slot is still just the two rows it needs.
   *
   * Written `body.app-ui .app-shell` — (0,3,1) — rather than `.app-shell` — (0,2,0). Individual
   * screens give their own toolbars a desktop grid at three classes, and at (0,2,0) this lost to
   * every one of them: the dashboard's cards kept stacking their controls into a column and
   * rows-per-page stayed on a row of its own. A phone layout has to outrank the desktop one it
   * replaces, not merely come after it.
   */

  body.app-ui .app-shell .table-toolbar{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:
      "search   pagesize"
      "filters  filters"
      "exports  exports"
      "buttons  buttons";
    align-items:center;
    gap:8px;
  }

  body.app-ui .app-shell .table-toolbar>.table-toolbar-search{
    grid-area:search;
    width:100%
  }

  body.app-ui .app-shell .table-toolbar>.table-toolbar-filters{
    grid-area:filters;
    min-width:0
  }

  body.app-ui .app-shell .table-toolbar>.table-toolbar-actions{
    display:contents
  }

  body.app-ui .app-shell .table-toolbar .table-page-size{
    grid-area:pagesize
  }

  body.app-ui .app-shell .table-toolbar .table-toolbar-buttons{
    grid-area:buttons;
    min-width:0
  }

  /* Built to the search field's 36px rather than to the 26px export buttons it used to stand
     among — matching whatever is actually beside it is what makes the row read as one thing. */

  .app-shell .table-toolbar .table-page-size .select2-container--default .select2-selection--single{
    height:36px;
    border-radius:10px
  }

  .app-shell .table-toolbar .table-page-size .select2-container--default .select2-selection--single .select2-selection__rendered{
    line-height:36px
  }

  .app-shell .table-toolbar .table-page-size .select2-container--default .select2-selection--single .select2-selection__arrow{
    height:36px
  }

  .app-shell .table-toolbar .table-page-size .finput{
    height:36px!important;
    min-height:36px!important
  }

  .app-shell .table-toolbar .table-export-holder{
    grid-area:exports;
    width:100%
  }

  .app-shell .table-toolbar .table-export-holder .dt-buttons{
    display:flex;
    width:100%;
    flex-wrap:nowrap;
    gap:3px
  }

  .app-shell .table-toolbar .table-export-holder .dt-button,
  .app-shell .table-toolbar .table-export-holder .table-export-button,
  .app-shell .table-toolbar .table-export-holder>a,
  .app-shell .table-toolbar .table-export-holder>button,
  .app-shell .table-toolbar .table-export-holder .dt-buttons>a,
  .app-shell .table-toolbar .table-export-holder .dt-buttons>button{
    height:26px!important;
    min-height:26px!important;
    padding:0 4px!important;
    border-radius:7px!important;
    gap:3px!important;
    font-size:9.5px!important;
    flex:1 1 0;
    min-width:0;
    justify-content:center;
    overflow:hidden;
  }

  /* The label is a span of its own and takes its size from the rule above, so the button's own
     font-size never reaches it. It may be trimmed under pressure. */

  .app-shell .table-toolbar .table-export-holder .dt-button span,
  .app-shell .table-toolbar .table-export-holder .dt-buttons>a>span,
  .app-shell .table-toolbar .table-export-holder .dt-buttons>button>span{
    min-width:0;
    overflow:hidden;
    font-size:9.5px!important;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  /* The icon is the part that must survive a squeeze — a label clipped short is still readable,
     an icon squashed to eight pixels wide is a smudge. */

  .app-shell .table-toolbar .table-export-holder .dt-button svg,
  .app-shell .table-toolbar .table-export-holder .dt-buttons>a>svg,
  .app-shell .table-toolbar .table-export-holder .dt-buttons>button>svg{
    width:11px!important;
    height:11px!important;
    flex:0 0 auto;
  }
}

/* ---- DataTables ---- */

.app-shell .dataTables_wrapper{
  position:relative;
  padding:2px 6px 8px
}

.app-shell .dataTables_wrapper .dataTables_length,
.app-shell .dataTables_wrapper .dataTables_filter{
  margin:0;
  font-size:13px;
  color:var(--text-2)
}

.app-shell .dataTables_filter label{
  display:inline-flex;
  align-items:center;
  font-size:0;
  margin:0
}

.app-shell .dataTables_filter input{
  margin:0;
  min-width:280px;
  max-width:100%;
  height:38px;
  font-size:13.5px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface-2);
  padding:0 12px;
  color:var(--text);
  outline:none
}

.app-shell .dataTables_filter input:focus{
  border-color:var(--brand);
  background:var(--surface)
}

/* 34, the height of the export buttons it stands beside. It was 36 here and 34 further down
   the file — one control with two answers, and the taller one is what the browser drew until the
   later rule was written. */

.app-shell .dataTables_length select{
  height:34px;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface-2);
  padding:0 10px;
  color:var(--text);
  outline:none;
  margin:0 6px
}

.app-shell table.dataTable{
  width:100%!important;
  border-collapse:collapse;
  margin:0
}

/* With scrollX, DataTables computes a width wider than the container and scrolls it.
   Forcing 100% instead crammed twenty-two columns into the viewport, squeezing narrow
   ones until their headings wrapped one letter per line. */

.app-shell .dataTables_scroll table.dataTable,.app-shell .dataTables_scrollHead table,.app-shell .dataTables_scrollBody table{
  width:auto!important;
  min-width:100%
}

.app-shell .dataTables_scrollBody{
  overflow-x:auto
}

.app-shell .dataTables_scrollHead{
  overflow:hidden
}

/* Give the columns that were being squeezed enough room to render on one line. */

.app-shell .dataTables_scroll table.dataTable th,.app-shell .dataTables_scroll table.dataTable td{
  white-space:nowrap
}

.app-shell .dataTables_scroll table.dataTable td.wrap-cell,.app-shell .dataTables_scroll table.dataTable td .wrap-cell{
  white-space:normal
}

/* A column holding an action control must not collapse below its content. */

.app-shell table.dataTable td .repair-invoice-row-actions,.app-shell table.dataTable td .btn-group{
  white-space:nowrap
}

/*
 * The heading cells, wherever DataTables has put them.
 *
 * In scrolling mode the heading is moved into a table of its own: a shallow clone taken before
 * DataTables adds its classes, with its id stripped off it —
 *   a = $(table.cloneNode(false)); a.removeAttr('id').append($(table).children('thead'))
 * — so it answers to neither `table.dataTable` nor the listing's id, and a rule written for either
 * reaches the rows and leaves the heading undressed. The product and contact listings each carry a
 * hand-written copy of this rule for that reason; said here once, every listing has it.
 */

.app-shell table.dataTable thead th,.app-shell table.dataTable thead td,
.app-shell .dataTables_scrollHead table thead th,.app-shell .dataTables_scrollHead table thead td{
  text-align:left;
  padding:9px 14px;
  font-size:11px;
  font-weight:700;
  letter-spacing:.3px;
  text-transform:uppercase;
  color:var(--text-3);
  border-bottom:1px solid var(--border);
  cursor:pointer;
  white-space:nowrap
}

/* The column headings stay put while the rows scroll.

   Said once, for every listing in the product: a table long enough to scroll is a table whose
   headings you need at the bottom of it as much as at the top. The cells are given a background
   because a transparent heading lets the rows travel through it.

   Two cases are already handled and must be left alone: a DataTable with scrolling switched on
   keeps its headings in a table of their own, and the copy it holds in the scrolling body is a
   width measurement that would otherwise pin itself over the first row. */

.app-shell table.dataTable>thead>tr>th,
.app-shell table.dataTable>thead>tr>td{
  position:sticky;
  top:var(--table-sticky-offset,0px);
  z-index:3;
  background-color:var(--surface-2)
}

/* A sortable heading is given position:relative further up, so the sort carets have something to
   hang off. That beat the sticky above it, and only on the sortable columns — so a single heading
   row came apart, the sortable half staying with the rows while the rest held at the top. Sticky
   is a containing block too; the carets do not need relative. */

.app-shell table.dataTable>thead>tr>th.sorting,
.app-shell table.dataTable>thead>tr>th.sorting_asc,
.app-shell table.dataTable>thead>tr>th.sorting_desc{
  position:sticky
}

/* Inside a scrolling table, no cell pins on its own. There are two head rows in that mode — the
   real one in .dataTables_scrollHead, which the wrapper pins as a block, and a collapsed copy in
   the body that exists to hold the column widths. Pinning cells inside an already-pinned head is
   what left the heading half-drawn, with only the first column showing.

   And the offset is dropped along with the position it belonged to. Left behind, it applies to the
   relative cells just as readily — pushing the whole heading the height of the toolbar down, out
   through the bottom of a head box that is only as tall as one row and clips what leaves it. The
   heading was not missing on those listings. It had been shoved out of its own box. */

.app-shell .dataTables_scroll table.dataTable>thead>tr>th,
.app-shell .dataTables_scroll table.dataTable>thead>tr>td,
.app-shell .dataTables_scroll table.dataTable>thead>tr>th.sorting,
.app-shell .dataTables_scroll table.dataTable>thead>tr>th.sorting_asc,
.app-shell .dataTables_scroll table.dataTable>thead>tr>th.sorting_desc{
  position:relative;
  top:auto
}

/* A table scrolling sideways inside a wrapper cannot pin its heading: the wrapper is the box the
   heading would pin to, and that box never scrolls down — so the heading settles an offset below
   its top and sits there with a band of rows above it. Better to sit normally and scroll away with
   the table. The shell marks these, because which box holds the overflow is a runtime question.

   `top` has to go with the position it was written for. Turning sticky into relative and leaving
   the offset behind does not release the heading — it shifts it bodily down the page by the height
   of the toolbar above it, onto the first row, leaving an empty band where the heading belongs. */

.app-shell table.dataTable.table-heading-unpinned>thead>tr>th,
.app-shell table.dataTable.table-heading-unpinned>thead>tr>td,
.app-shell table.dataTable.table-heading-unpinned>thead>tr>th.sorting,
.app-shell table.dataTable.table-heading-unpinned>thead>tr>th.sorting_asc,
.app-shell table.dataTable.table-heading-unpinned>thead>tr>th.sorting_desc{
  position:relative;
  top:auto
}

/* A table too wide for its card scrolls sideways inside it, and DataTables puts the headings in a
   table of their own above the scrolling body. That head is what pins as the page scrolls — the
   copy inside the body is a width measurement, handled above. */

/* The card clips its contents, and overflow:hidden makes an element a scroll container — so the
   heading row below pinned itself to a card that never scrolls, which looks like nothing
   happening. overflow:clip clips exactly the same way without becoming one, so the heading
   resolves against the window instead. Only cards holding a scrolling table are switched: for the
   rest, hidden and clip are indistinguishable, and hidden is the better-supported of the two. */

.app-shell .card:has(.dataTables_scroll),
.app-shell .data-table-card:has(.dataTables_scroll),
.app-shell .data-table-content:has(.dataTables_scroll),
.app-shell .product-table-stage:has(.dataTables_scroll),
.app-shell .sales-order-list-card:has(.dataTables_scroll),
.app-shell .customer-groups-list-card:has(.dataTables_scroll){
  overflow:clip
}

/* A wrapper that scrolls sideways is a scroll container, and a sticky child pins to that box
   rather than to the window — so the headings below would hold still against a box that never
   scrolls vertically, which looks like nothing happening at all. A DataTable in scrolling mode
   does its own horizontal scrolling inside .dataTables_scrollBody, so the wrapper around it has no
   scrolling left to do and can step out of the way. */

.app-shell .table-responsive:has(.dataTables_scroll),
.app-shell .profile-module-table-wrap:has(.dataTables_scroll){
  overflow:visible
}

/* The toolbar holds with the headings, as one block.

   Pinned on its own, the column headings stopped at the top of the listing while the search box
   and the export buttons slid away above them — and rows travelled under a half-visible toolbar.
   The two belong together: they are the head of the listing.

   The headings then start below the toolbar rather than at the top of the scrollport, which is
   what --table-sticky-offset carries. Toolbars are not all the same height, so the shell measures
   each one rather than a number being guessed here. */

.app-shell .table-toolbar.is-sticky-toolbar,.app-shell .datatable-header.is-sticky-toolbar{
  position:sticky;
  top:0;
  z-index:6;
  background:var(--surface)
}

/* !important, which is not decoration here: DataTables writes position:relative onto this element
   as an inline style, and an inline style outranks any stylesheet rule. Without it the heading is
   told to stick and simply does not. */

.app-shell .dataTables_scroll .dataTables_scrollHead{
  position:sticky!important;
  top:var(--table-sticky-offset,0px);
  z-index:4;
  background:var(--surface)
}

/* Once it has left the top of its table it is floating over rows, so it casts a shadow to say so.
   Sticky elements cannot be detected in CSS alone; the shell adds the class as the page scrolls. */

.app-shell .dataTables_scroll .dataTables_scrollHead.is-pinned{
  box-shadow:0 10px 18px -14px rgba(16,32,24,.55)
}

/* Reaching the columns that do not fit.

   The scrollbar sits under the last row, so on a long listing the only way sideways was to scroll
   the page to the bottom, drag, and come back up — and nothing said the columns were there at all.
   An arrow rides the edge the table can still travel towards, over a fade that makes the cut look
   deliberate. Both are drawn only when there is somewhere to go, so a table that fits shows
   neither. */

.app-shell .table-scroll-frame{
  position:relative
}

/* When the scrolling box is a plain wrapper rather than DataTables' own, the arrows hang inside it
   — so they must not travel with the columns they move. */

.app-shell [data-table-scroller].table-scroll-frame>.table-scroll-arrows{
  position:sticky;
  left:0;
  right:0
}

.app-shell .table-scroll-frame::before,
.app-shell .table-scroll-frame::after{
  position:absolute;
  top:0;
  bottom:0;
  z-index:3;
  width:38px;
  opacity:0;
  content:'';
  pointer-events:none;
  transition:opacity .18s ease
}

.app-shell .table-scroll-frame::before{
  left:0;
  background:linear-gradient(90deg,color-mix(in srgb,var(--surface) 92%,transparent),transparent)
}

.app-shell .table-scroll-frame::after{
  right:0;
  background:linear-gradient(270deg,color-mix(in srgb,var(--surface) 92%,transparent),transparent)
}

.app-shell .table-scroll-frame.has-scroll-start::before,
.app-shell .table-scroll-frame.has-scroll-end::after{
  opacity:1
}

/* The arrows hang from a layer of their own, pinned just under the column headings. Centred in the
   frame they sat halfway down the table, which on a long listing is off the bottom of the screen —
   the control for reaching the far columns was itself out of reach. The layer has no height, so it
   takes nothing from the rows. */

/* Where the frame is the scroller, the layer sits on the box around it — see layouts/master.
   That box is only as wide as what can be seen, so an arrow at its right edge is at the edge of
   the card rather than at the end of the columns. */

.app-shell .table-scroll-host{
  position:relative
}

.app-shell .table-scroll-host>.table-scroll-arrows{
  position:absolute;
  top:calc(var(--table-frame-top,0px) + var(--table-head-height,0px));
  right:0;
  left:0;
  height:0;
  pointer-events:none
}

/* The layer is placed against the box's padding box, and on a listing that box has been pulled
   out over its own padding — so the arrow was left a padding's width in from the card's edge
   while the table beside it reached the edge. It follows the table out. */

.app-shell .box>.box-body.table-scroll-host>.table-scroll-arrows{
  left:-14px;
  right:-14px
}

.app-shell .table-scroll-host>.table-scroll-arrows>.table-scroll-arrow{
  pointer-events:auto
}

/* The layer the arrows hang from, pinned just under the column headings.

   It used to add the toolbar's height to that. The toolbar is outside the frame — the frame's own
   scrollport begins below it — so adding it counted the same distance twice and the arrows came to
   rest above the headings, half of each one over the top edge of the card and clipped by it. Only
   the headings are inside the frame, so only the headings are measured. */

.app-shell .table-scroll-arrows{
  position:sticky;
  top:var(--table-head-height,0px);
  z-index:5;
  height:0
}

.app-shell .table-scroll-arrow{
  position:absolute;
  top:10px;
  z-index:5;
  display:grid;
  width:30px;
  height:30px;
  place-items:center;
  padding:0;
  border:1px solid var(--border);
  border-radius:50%;
  background:var(--surface);
  color:var(--text-2);
  box-shadow:0 6px 16px -6px rgba(16,32,24,.35);
  cursor:pointer;
  transition:background .16s ease,color .16s ease,border-color .16s ease
}

.app-shell .table-scroll-arrow:hover{
  border-color:color-mix(in srgb,var(--brand) 45%,var(--border));
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .table-scroll-arrow:focus-visible{
  outline:2px solid color-mix(in srgb,var(--brand) 40%,transparent);
  outline-offset:2px
}

.app-shell .table-scroll-arrow.is-start{
  left:8px
}

.app-shell .table-scroll-arrow.is-end{
  right:8px
}

/* The chevron is drawn rather than typed: a glyph this size is at the mercy of whichever font
   carries it, which is how the sort marks first came out as specks. */

.app-shell .table-scroll-arrow>span{
  width:8px;
  height:8px;
  border-top:2px solid currentColor;
  border-right:2px solid currentColor
}

.app-shell .table-scroll-arrow.is-end>span{
  transform:translateX(-2px) rotate(45deg)
}

.app-shell .table-scroll-arrow.is-start>span{
  transform:translateX(2px) rotate(-135deg)
}

.app-shell .table-scroll-arrow[hidden]{
  display:none
}

.app-shell table.dataTable tbody td{
  padding:10px 14px;
  border-top:1px solid var(--border-2);
  color:var(--text-2);
  font-size:12.5px;
  line-height:1.45;
  vertical-align:middle
}

/* Cells wrap at spaces only. Breaking inside words shredded dates into "16-06-202 6"
   and place names into "NIKA FOOD&D RINK"; with scrollX sizing the table properly there
   is no need to break mid-word to fit. */

.app-shell table.dataTable tbody td{
  overflow-wrap:normal;
  word-break:normal
}

/* Values that should never be split across lines. */

.app-shell table.dataTable tbody td .status-chip,
.app-shell table.dataTable tbody td .display_currency,
.app-shell table.dataTable tbody td .repair-invoice-row-actions{
  white-space:nowrap
}

/* Banded rows: with a dozen columns the eye loses the row it is reading. */

.app-shell table.dataTable tbody tr:nth-child(even)>td{
  background:color-mix(in srgb,var(--surface-2) 55%,var(--surface))
}

.app-shell table.dataTable tbody tr:hover>td{
  background:var(--surface-2)
}

.app-shell .dataTables_info{
  padding:12px 16px;
  color:var(--text-3);
  font-size:12.5px
}

.app-shell .dataTables_paginate{
  padding:10px 16px;
  text-align:right
}

.app-shell .dataTables_paginate .pagination{
  display:inline-flex;
  align-items:center;
  gap:5px;
  margin:0;
  padding:0
}

.app-shell .dataTables_paginate>.paginate_button,
.app-shell .dataTables_paginate>span>.paginate_button,
.app-shell .dataTables_paginate .pagination>.paginate_button>a,
.app-shell .dataTables_paginate .pagination>.page-item>.page-link{
  display:inline-flex;
  min-width:36px;
  height:36px;
  align-items:center;
  justify-content:center;
  margin:0;
  padding:0 10px;
  border:1px solid var(--border)!important;
  border-radius:9px!important;
  background:var(--surface)!important;
  color:var(--text-2)!important;
  font-size:12.5px;
  font-weight:650;
  line-height:1;
  box-shadow:none!important;
  cursor:pointer
}

.app-shell .dataTables_paginate>span>.paginate_button.current,
.app-shell .dataTables_paginate>.paginate_button.current,
.app-shell .dataTables_paginate .pagination>.paginate_button.active>a,
.app-shell .dataTables_paginate .pagination>.page-item.active>.page-link{
  border-color:var(--brand)!important;
  background:var(--brand)!important;
  color:#fff!important
}

.app-shell .dataTables_paginate>.paginate_button.disabled,
.app-shell .dataTables_paginate .pagination>.paginate_button.disabled>a,
.app-shell .dataTables_paginate .pagination>.page-item.disabled>.page-link{
  opacity:.45;
  cursor:not-allowed
}

.app-shell .dataTables_paginate>.paginate_button:hover:not(.current):not(.disabled),
.app-shell .dataTables_paginate>span>.paginate_button:hover:not(.current),
.app-shell .dataTables_paginate .pagination>.paginate_button:not(.active):not(.disabled)>a:hover,
.app-shell .dataTables_paginate .pagination>.page-item:not(.active):not(.disabled)>.page-link:hover{
  border-color:var(--text-3)!important;
  background:var(--surface-3)!important;
  color:var(--text)!important
}

.app-shell .data-table-card .dataTables_processing{
  display:none!important
}

/* ...and with it hidden, a fetching table showed nothing at all — the stock report drew a tall
   empty white box for as long as the query ran and read as a broken page. The card veils and
   spins over its own table while it is busy; everything above the table stays usable. */

.app-shell .data-table-card.is-loading .dataTables_wrapper{
  position:relative
}

.app-shell .data-table-card.is-loading .dataTables_wrapper::after{
  content:"";
  position:absolute;
  z-index:5;
  inset:0;
  border-radius:inherit;
  background:color-mix(in srgb,var(--surface) 68%,transparent)
}

.app-shell .data-table-card.is-loading .dataTables_wrapper::before{
  content:"";
  position:absolute;
  z-index:6;
  top:96px;
  left:50%;
  width:28px;
  height:28px;
  margin-left:-14px;
  border:2.5px solid color-mix(in srgb,var(--brand) 24%,transparent);
  border-top-color:var(--brand);
  border-radius:50%;
  animation:tg-spin .7s linear infinite
}

@media (prefers-reduced-motion:reduce){
  .app-shell .data-table-card.is-loading .dataTables_wrapper::before{
    animation-duration:2.4s
  }
}

/* Inset to the sides and the bottom only: the top is set when it is shown, to wherever the
   column headings end — see the processing handler in layouts/master. Covering the headings and
   the toolbar too made every filter look like the page reloading. */

.app-shell .data-table-processing{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  z-index:80;
  display:flex;
  min-height:150px;
  align-items:center;
  justify-content:center;
  border-radius:0 0 var(--data-table-radius) var(--data-table-radius);
  background:var(--surface);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .16s ease,visibility .16s ease
}

.app-shell .data-table-is-processing .data-table-processing{
  opacity:1;
  visibility:visible;
  pointer-events:auto
}

.app-shell .data-table-processing-state{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--text-2)
}

.app-shell .data-table-processing-spinner{
  width:22px;
  height:22px;
  flex:none;
  border:2.5px solid var(--brand-weak);
  border-top-color:var(--brand);
  border-radius:50%;
  animation:note-submit-spin .7s linear infinite
}

.app-shell .data-table-processing-label{
  font-size:13px;
  font-weight:700;
  letter-spacing:0
}

[data-theme="dark"] .app-shell .data-table-processing{
  background:var(--surface)
}

@media (prefers-reduced-motion:reduce){
  .app-shell .data-table-processing{
    transition:none
  }

  .app-shell .data-table-processing-spinner{
    animation-duration:1.2s
  }
}

/* Print Labels product finder (jQuery UI autocomplete) */

.app-shell .label-product-search-panel{
  position:relative;
  z-index:20
}

.app-shell .label-product-search-control{
  transition:filter .15s ease
}

.app-shell .label-product-search-panel.is-search-open .label-product-search-control{
  filter:drop-shadow(0 8px 14px rgba(16,32,24,.08))
}

.app-shell .label-product-search-control .ui-autocomplete-input{
  height:44px;
  border-radius:11px;
  background:var(--surface-2);
  transition:border-color .15s,background .15s,box-shadow .15s
}

.app-shell .label-product-search-control .ui-autocomplete-input:focus{
  border-color:var(--brand);
  background:var(--surface);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 12%,transparent)
}

.app-shell .label-product-search-control:has(.ui-autocomplete-loading):after{
  position:absolute;
  top:50%;
  right:13px;
  width:16px;
  height:16px;
  margin-top:-8px;
  border:2px solid var(--brand-weak);
  border-top-color:var(--brand);
  border-radius:50%;
  content:"";
  animation:note-submit-spin .7s linear infinite
}

.app-shell .label-product-search-help{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:5px;
  margin-top:7px;
  color:var(--text-3);
  font-size:9.5px;
  font-weight:600
}

.app-shell .label-product-search-help>span:first-child{
  display:flex;
  align-items:center;
  gap:5px;
  margin-right:auto
}

.app-shell .label-product-search-help>span:first-child svg{
  color:var(--info)
}

.app-shell .label-product-search-help kbd{
  display:inline-flex;
  min-width:22px;
  height:20px;
  align-items:center;
  justify-content:center;
  padding:0 5px;
  border:1px solid var(--border);
  border-bottom-width:2px;
  border-radius:5px;
  background:var(--surface);
  color:var(--text-2);
  font:inherit;
  font-size:8.5px;
  font-weight:800;
  box-shadow:var(--shadow-sm)
}

body.app-ui .label-product-autocomplete.ui-autocomplete{
  box-sizing:border-box;
  max-height:310px;
  margin:6px 0 0!important;
  padding:6px!important;
  overflow-x:hidden;
  overflow-y:auto;
  border:1px solid color-mix(in srgb,var(--brand) 34%,var(--border))!important;
  border-radius:12px;
  background:var(--surface)!important;
  color:var(--text);
  box-shadow:0 22px 48px -20px rgba(16,32,24,.42),0 8px 18px -12px rgba(21,154,77,.3);
  font-family:'Plus Jakarta Sans','Noto Sans Khmer',system-ui,sans-serif;
  font-size:12px;
  z-index:100000!important
}

body.app-ui .label-product-autocomplete .ui-menu-item{
  margin:0 0 3px;
  padding:0;
  border:0;
  background:transparent;
  list-style:none
}

body.app-ui .label-product-autocomplete .ui-menu-item:last-child{
  margin-bottom:0
}

body.app-ui .label-product-autocomplete .ui-menu-item-wrapper{
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:9px;
  background:transparent!important;
  color:inherit!important
}

body.app-ui .label-product-autocomplete .ui-menu-item-wrapper.ui-state-active{
  margin:0!important;
  border:0!important;
  background:transparent!important;
  color:inherit!important
}

body.app-ui .label-product-search-result{
  display:grid;
  min-width:0;
  grid-template-columns:38px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  min-height:54px;
  padding:7px 9px;
  border:1px solid transparent;
  border-radius:9px;
  background:var(--surface);
  transition:border-color .12s,background .12s,box-shadow .12s
}

body.app-ui .label-product-autocomplete .ui-menu-item-wrapper:hover .label-product-search-result,body.app-ui .label-product-autocomplete .ui-state-active .label-product-search-result{
  border-color:color-mix(in srgb,var(--brand) 25%,var(--border));
  background:var(--brand-weak);
  box-shadow:inset 3px 0 0 var(--brand)
}

body.app-ui .label-product-search-result-icon{
  display:inline-flex;
  width:36px;
  height:36px;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface-2)
}

body.app-ui .label-product-search-result-icon:before{
  width:18px;
  height:17px;
  background:repeating-linear-gradient(90deg,var(--brand-strong) 0 1px,transparent 1px 3px,var(--brand-strong) 3px 5px,transparent 5px 7px);
  content:""
}

body.app-ui .label-product-search-result-copy{
  display:block;
  min-width:0
}

body.app-ui .label-product-search-result-copy strong,body.app-ui .label-product-search-result-copy small{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

body.app-ui .label-product-search-result-copy strong{
  color:var(--text);
  font-size:12px;
  font-weight:750;
  line-height:1.35
}

body.app-ui .label-product-search-result-copy small{
  margin-top:3px;
  color:var(--text-3);
  font-size:9.5px;
  font-weight:650;
  letter-spacing:.1px
}

body.app-ui .label-product-search-result-action{
  display:inline-flex;
  height:26px;
  align-items:center;
  padding:0 9px;
  border:1px solid color-mix(in srgb,var(--brand) 24%,var(--border));
  border-radius:7px;
  background:var(--surface);
  color:var(--brand-strong);
  font-size:9.5px;
  font-weight:800
}

body.app-ui .label-product-autocomplete .ui-state-active .label-product-search-result-action{
  border-color:var(--brand);
  background:var(--brand);
  color:#fff
}

@media (max-width:640px){
  .app-shell .label-product-search-help{
    align-items:flex-start;
    flex-wrap:wrap;
    justify-content:flex-start
  }

  .app-shell .label-product-search-help>span:first-child{
    width:100%;
    margin-right:0
  }

  .app-shell .label-product-search-help kbd,.app-shell .label-product-search-help kbd+span{
    display:none
  }

  body.app-ui .label-product-search-result{
    grid-template-columns:34px minmax(0,1fr)
  }

  body.app-ui .label-product-search-result-icon{
    width:32px;
    height:32px
  }

  body.app-ui .label-product-search-result-action{
    display:none
  }
}

/* ---- select2 (v4) ---- */

/* hide the original <select> once select2 mounts (rule used to live in vendor.css) */

.select2-hidden-accessible{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0 0 0 0)!important;
  white-space:nowrap!important;
  border:0!important
}

.app-shell .select-field{
  position:relative
}

.app-shell select.select2-hidden-accessible+.select2-container{
  width:100%!important
}

.app-shell .select2-container--default .select2-selection--single{
  position:relative;
  height:42px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface-2);
  display:flex;
  align-items:center;
  cursor:pointer
}

.app-shell .select2-container--default .select2-selection--single .select2-selection__rendered{
  width:100%;
  overflow:hidden;
  line-height:40px;
  padding:0 44px 0 13px;
  color:var(--text);
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .select2-container--default .select2-selection--single .select2-selection__placeholder{
  color:var(--text-3)
}

.app-shell .select2-container--default .select2-selection--single .select2-selection__arrow{
  position:absolute;
  top:0;
  right:8px;
  display:flex;
  width:30px;
  height:40px;
  align-items:center;
  justify-content:center;
  pointer-events:none
}

.app-shell .select2-container--default .select2-selection--single .select2-selection__arrow b{
  display:block;
  width:7px;
  height:7px;
  margin-top:-4px;
  border:0;
  border-right:1.7px solid var(--text-3);
  border-bottom:1.7px solid var(--text-3);
  transform:rotate(45deg);
  transition:margin .15s ease,transform .15s ease,border-color .15s ease
}

.app-shell .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b{
  margin-top:4px;
  border-color:var(--brand-strong);
  transform:rotate(225deg)
}

.app-shell .select-field-native:after{
  position:absolute;
  top:50%;
  right:15px;
  width:7px;
  height:7px;
  margin-top:-5px;
  border-right:1.7px solid var(--text-3);
  border-bottom:1.7px solid var(--text-3);
  content:"";
  pointer-events:none;
  transform:rotate(45deg);
  transition:transform .15s ease
}

.app-shell .select-field-native:focus-within:after{
  border-color:var(--brand-strong);
  transform:rotate(225deg)
}

.app-shell .select-field-native>select{
  padding-right:42px!important;
  background-image:none!important;
  -webkit-appearance:none;
     -moz-appearance:none;
          appearance:none;
  cursor:pointer
}

/* A native field wearing a panel instead.
   On a phone the plain selects inside a marked form become select2, because the browser draws a
   native list wherever it likes there. The panel's box has to be the field's box and no more: the
   wrapper already carries the border, the radius and the chevron, so select2's own copies of all
   three would double them.

   Sized by min-height, never by height:100%. A percentage height resolves against the wrapper,
   and where the wrapper's own height is auto that percentage is zero — the selection collapsed to
   nothing, its text with it, while the arrow inside it is positioned absolutely and went on being
   drawn. What that leaves on the screen is an empty box with a chevron in it. */

.app-shell .select-field-native .select2-container--default .select2-selection--single{
  min-height:38px;
  height:auto;
  align-self:stretch;
  display:flex;
  align-items:center;
  border:0;
  border-radius:inherit;
  background:transparent
}

.app-shell .select-field-native .select2-container--default .select2-selection--single .select2-selection__rendered{
  padding:0 42px 0 13px;
  font-size:13px;
  line-height:1.3;
  color:var(--text)
}

.app-shell .select-field-native .select2-container--default .select2-selection--single .select2-selection__placeholder{
  color:var(--text-3)
}

.app-shell .select-field-native:has(.select2-container):after{
  display:none
}

.app-shell .select-field-native .select2-container{
  display:block;
  width:100%!important
}

/* Inside the joined pay-term control the field is 40px tall and its text the smaller one the
   native select was given there. */

.app-shell .purchase-payment-term-control>.select-field .select2-container--default .select2-selection--single{
  min-height:40px
}

.app-shell .purchase-payment-term-control>.select-field .select2-container--default .select2-selection--single .select2-selection__rendered{
  padding:0 30px 0 12px;
  color:var(--text-2);
  font-size:12.5px;
  font-weight:650
}

.native-select-panel .select2-results__option{
  padding:10px 13px;
  font-size:13px
}

/* A native select that neither select2 nor a .select-field-native wrapper dresses had no
   chevron at all, so it read as a text box that happened to contain a word — the payment
   method beside the payment account, which is a select2 and does have one. Drawn on the
   control itself because these selects are written bare, with no wrapper to hang an :after
   on. Left alone: multiple and sized selects, which are lists rather than dropdowns, and
   anything the wrapper above already handles, which wins on !important.

   A stroked chevron rather than a filled triangle, to match the caret select2 and
   .select-field-native draw from rotated borders. The colour is written into the SVG because
   a data URI cannot read a custom property, so each theme states its own. */

.app-shell select.form-control:not([multiple]):not([size]),
.app-shell select.finput:not([multiple]):not([size]){
  padding-right:32px;
  -moz-appearance:none;
       appearance:none;
  -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%238b968e' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-position:calc(100% - 11px) 50%;
  background-size:11px 11px;
  background-repeat:no-repeat;
  cursor:pointer
}

.app-shell select.form-control:not([multiple]):not([size]):focus,
.app-shell select.finput:not([multiple]):not([size]):focus{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230e7a3c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")
}

[data-theme="dark"] .app-shell select.form-control:not([multiple]):not([size]),
[data-theme="dark"] .app-shell select.finput:not([multiple]):not([size]){
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2369756d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")
}

[data-theme="dark"] .app-shell select.form-control:not([multiple]):not([size]):focus,
[data-theme="dark"] .app-shell select.finput:not([multiple]):not([size]):focus{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2337cc74' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")
}

.app-shell .select2-container--default.select2-container--focus .select2-selection--single,
.app-shell .select2-container--open .select2-selection--single{
  border-color:var(--brand);
  background:var(--surface)
}

.app-shell .select2-container--open .select2-selection--single{
  border-bottom-color:transparent;
  border-bottom-left-radius:0;
  border-bottom-right-radius:0;
  box-shadow:0 0 0 3px rgba(21,154,77,.12)
}

.app-shell .select2-container--default .select2-selection--multiple{
  min-height:42px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface-2);
  display:flex;
  align-items:flex-start;
  padding:5px 8px;
  cursor:text
}

.app-shell .select2-container--default.select2-container--focus .select2-selection--multiple,
.app-shell .select2-container--open .select2-selection--multiple{
  border-color:var(--brand);
  background:var(--surface);
  box-shadow:0 0 0 3px rgba(21,154,77,.12),0 10px 24px -18px rgba(16,32,24,.45)
}

.app-shell .select2-container--open .select2-selection--multiple{
  border-bottom-color:transparent;
  border-bottom-left-radius:0;
  border-bottom-right-radius:0;
  box-shadow:0 0 0 3px rgba(21,154,77,.12)
}

.app-shell .select2-container--default .select2-selection--multiple .select2-selection__rendered{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:5px;
  width:100%;
  padding:0;
  margin:0;
  list-style:none
}

.app-shell .select2-container--default .select2-selection--multiple .select2-selection__choice{
  display:inline-flex;
  align-items:center;
  gap:6px;
  max-width:100%;
  height:28px;
  margin:0;
  padding:0 9px;
  border:0;
  border-radius:8px;
  background:var(--brand);
  color:#fff;
  font-size:12.5px;
  font-weight:700;
  line-height:1;
  white-space:nowrap
}

.app-shell .select2-container--default .select2-selection--multiple .select2-selection__choice__remove{
  position:static;
  margin:0;
  color:#fff;
  font-size:15px;
  font-weight:800;
  line-height:1;
  opacity:.85;
  border:0;
  background:transparent
}

.app-shell .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover{
  opacity:1;
  color:#fff
}

.app-shell .select2-container--default .select2-selection--multiple .select2-search--inline{
  display:flex;
  align-items:center;
  min-width:120px;
  flex:1;
  margin:0
}

.app-shell .select2-container--default .select2-selection--multiple .select2-search__field{
  height:28px!important;
  min-width:120px;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  color:var(--text);
  font:inherit;
  font-size:13.5px;
  outline:0!important;
  box-shadow:none!important
}

.app-shell .select2-container--default .select2-selection--multiple .select2-search__field::-moz-placeholder{
  color:var(--text-3)
}

.app-shell .select2-container--default .select2-selection--multiple .select2-search__field::placeholder{
  color:var(--text-3)
}

.select2-dropdown,
.select2-container--open .select2-dropdown{
  overflow:hidden;
  box-sizing:border-box;
  background:var(--surface,#fff)!important;
  background-color:var(--surface,#fff)!important;
  border:2px solid rgba(21,154,77,.58)!important;
  border-radius:12px;
  outline:4px solid rgba(21,154,77,.12)!important;
  box-shadow:0 20px 44px -18px rgba(16,32,24,.45),0 8px 18px -10px rgba(21,154,77,.48)!important;
  color:var(--text,var(--text));
  z-index:9999
}

.select2-dropdown--below{
  margin-top:-2px
}

.select2-dropdown--above{
  margin-bottom:-2px
}

.select2-container--default .select2-results{
  background:var(--surface,#fff)!important;
  background-color:var(--surface,#fff)!important
}

.select2-container--default .select2-results>.select2-results__options{
  max-height:238px;
  overflow-y:auto;
  padding:6px;
  background:var(--surface,#fff)!important;
  background-color:var(--surface,#fff)!important
}

.select2-container--default .select2-results__option{
  min-height:36px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:9px;
  background:var(--surface,#fff)!important;
  background-color:var(--surface,#fff)!important;
  font-size:13.5px;
  font-weight:600;
  line-height:1.35;
  color:var(--text-2,var(--text-2));
  cursor:pointer
}

.select2-container--default .select2-results__option[role=group]{
  display:block;
  min-height:0;
  margin:3px 0;
  padding:0;
  border-radius:0;
  background:transparent!important;
  background-color:transparent!important;
  cursor:default
}

.select2-container--default .select2-results__option[role=group]:hover{
  background:transparent!important;
  background-color:transparent!important;
  color:inherit
}

.select2-container--default .select2-results__group{
  display:block;
  padding:7px 10px 5px;
  color:var(--text-3,#87928c);
  font-size:10px;
  font-weight:800;
  letter-spacing:.045em;
  line-height:1.25;
  text-transform:uppercase
}

.select2-container--default .select2-results__option[role=group]>.select2-results__options{
  display:block;
  margin:0;
  padding:0
}

.select2-container--default .select2-results__option[role=group] .select2-results__option{
  width:100%;
  margin:0;
  padding:8px 10px 8px 14px
}

.select2-container--default .select2-results__option:hover{
  background:var(--surface-3,var(--surface-3))!important;
  background-color:var(--surface-3,var(--surface-3))!important;
  color:var(--text,var(--text))
}

.select2-container--default .select2-results__option[aria-selected=true]{
  background:var(--brand-weak,#e6f5ec)!important;
  background-color:var(--brand-weak,#e6f5ec)!important;
  color:var(--brand-ink,#0b5a2c);
  font-weight:800
}

.select2-container--default .select2-results__option[aria-selected=true]:before{
  content:"";
  width:14px;
  height:14px;
  border-radius:5px;
  background:var(--brand);
  flex:none;
  box-shadow:inset 0 0 0 3px var(--brand)
}

.select2-container--default .select2-results__option--highlighted[aria-selected]{
  background:var(--brand,#159a4d)!important;
  background-color:var(--brand,#159a4d)!important;
  color:#fff
}

.select2-container--default .select2-results__option--highlighted[aria-selected=true]:before{
  background:var(--surface);
  box-shadow:inset 0 0 0 3px #fff
}

.select2-container--default .select2-results__message{
  color:var(--text-3);
  font-weight:600
}

.select2-search--dropdown{
  position:relative;
  box-sizing:border-box;
  width:100%;
  padding:10px 10px 8px!important;
  background:var(--surface)!important;
  border-bottom:1px solid rgba(222,229,224,.85)
}

.select2-search--dropdown:before,
.select2-search--dropdown:after{
  display:none
}

.select2-search--dropdown .select2-search__field{
  display:block;
  box-sizing:border-box!important;
  width:100%!important;
  height:38px;
  margin:0!important;
  border:1px solid rgba(218,226,222,.95)!important;
  border-radius:10px;
  background:#f7faf8!important;
  color:var(--text);
  padding:0 12px!important;
  outline:0!important;
  box-shadow:none!important;
  font:inherit;
  font-size:13.5px;
  font-weight:600
}

.select2-search--dropdown .select2-search__field::-moz-placeholder{
  color:var(--text-3);
  font-weight:500
}

.select2-search--dropdown .select2-search__field::placeholder{
  color:var(--text-3);
  font-weight:500
}

.select2-search--dropdown .select2-search__field:focus{
  border-color:rgba(21,154,77,.42)!important;
  background:var(--surface)!important;
  box-shadow:0 0 0 2px rgba(21,154,77,.08)!important
}

.select2-dropdown-panel{
  border-color:rgba(21,154,77,.65)!important;
  outline:4px solid rgba(21,154,77,.14)!important;
  box-shadow:0 20px 44px -18px rgba(16,32,24,.45),0 8px 18px -10px rgba(21,154,77,.50)!important
}

body.app-ui .select2-container--open .select2-dropdown.select2-dropdown-panel{
  box-sizing:border-box;
  background:var(--surface)!important;
  border:2px solid rgba(21,154,77,.65)!important;
  border-radius:12px!important;
  outline:4px solid rgba(21,154,77,.14)!important;
  box-shadow:0 18px 38px -16px rgba(16,32,24,.42),0 8px 18px -10px rgba(21,154,77,.52)!important;
  overflow:hidden!important
}

body.app-ui .select2-dropdown.select2-dropdown-panel .select2-results{
  width:100%;
  background:var(--surface)!important;
  overflow:hidden
}

body.app-ui .select2-dropdown.select2-dropdown-panel .select2-results__options{
  background:var(--surface)!important;
  padding:7px!important
}

body.app-ui .select2-container--open.select2-dropdown-open{
  box-sizing:border-box;
  background:var(--surface)!important;
  border:2px solid rgba(21,154,77,.64)!important;
  border-radius:12px!important;
  box-shadow:0 0 0 4px rgba(21,154,77,.13),0 22px 42px -18px rgba(16,32,24,.46),0 9px 18px -12px rgba(21,154,77,.52)!important;
  overflow:hidden!important;
  z-index:100000!important
}

body.app-ui .select2-container--open.select2-dropdown-open .select2-dropdown{
  position:static!important;
  box-sizing:border-box;
  background:var(--surface)!important;
  border:0!important;
  border-radius:0 0 10px 10px!important;
  outline:0!important;
  box-shadow:none!important;
  overflow:hidden!important
}

body.app-ui .select2-container--open.select2-dropdown-open .select2-results{
  border:0!important;
  box-shadow:none!important
}

body.app-ui .select2-container--open.select2-dropdown-open .select2-results__options{
  background:var(--surface)!important;
  padding:7px!important
}

body.app-ui .select2-container--open.select2-dropdown-open .select2-search--dropdown{
  padding:10px 10px 8px!important
}

body.app-ui .select2-container--open.select2-dropdown-open-single .select2-dropdown{
  padding-top:0!important
}

body.app-ui .select2-container--open.select2-dropdown-open-single .select2-search--dropdown{
  padding:0 0 8px!important;
  background:var(--surface)!important;
  border-bottom:0
}

body.app-ui .select2-container--open.select2-dropdown-open-single .select2-search__field{
  display:block!important;
  width:calc(100% - 28px)!important;
  height:32px!important;
  margin:8px auto 0!important;
  border:0!important;
  border-radius:8px!important;
  background:#f5f8f6!important;
  padding:0 12px!important;
  box-shadow:inset 0 0 0 1px rgba(226,233,229,.95)!important;
  font-weight:500!important
}

body.app-ui .select2-container--open.select2-dropdown-open-single .select2-search__field:focus{
  background:var(--surface)!important;
  box-shadow:inset 0 0 0 1px rgba(21,154,77,.32),0 0 0 2px rgba(21,154,77,.07)!important
}

body.app-ui .select2-container--open.select2-dropdown-open-single .select2-results__options{
  padding:4px 6px 7px!important
}

body.app-ui .select2-container--open.select2-dropdown-open-single .select2-results__option{
  min-height:34px;
  padding:8px 10px!important;
  border-radius:8px;
  font-weight:600
}

body.app-ui .select2-container--open.select2-dropdown-open-single .select2-results__option:before{
  display:none!important
}

body.app-ui .select2-container--open.select2-dropdown-open-single .select2-results__option[aria-selected=true]{
  background:var(--brand-weak,#e6f5ec)!important;
  color:var(--brand-ink,#0b5a2c)!important
}

body.app-ui .select2-container--open.select2-dropdown-open-single .select2-results__option--highlighted[aria-selected]{
  background:var(--brand,#159a4d)!important;
  color:#fff!important
}

/* Compact multi-select: a one-line control that says how many, and a row of removable tags
 * under it that says who.
 *
 * It used to collapse the whole selection into "first name +N more", which told a user how many
 * people were on a follow-up but never which — and removing one meant opening the panel and
 * looking for a name that had never been shown. The control keeps its fixed height, so a follow-up
 * assigned to a whole team cannot push the rest of the dialog around; the tags sit under it where
 * they can wrap freely, each with its own remove button. */

.app-shell .select-field-compact-multiple .select2-selection--multiple{
  position:relative;
  height:42px;
  min-height:42px;
  align-items:center;
  padding:0 42px 0 13px;
  overflow:hidden;
  cursor:pointer
}

.app-shell .select-field-compact-multiple .select2-selection--multiple:after{
  content:"";
  position:absolute;
  top:50%;
  right:15px;
  width:7px;
  height:7px;
  margin-top:-5px;
  border-right:1.5px solid var(--text-3);
  border-bottom:1.5px solid var(--text-3);
  transform:rotate(45deg);
  transition:transform .15s ease
}

.app-shell .select-field-compact-multiple .select2-container--open .select2-selection--multiple:after{
  margin-top:-1px;
  transform:rotate(225deg)
}

.app-shell .select-field-compact-multiple .select2-selection--multiple .select2-selection__rendered{
  position:absolute;
  inset:0;
  display:block;
  overflow:hidden
}

.app-shell .select-field-compact-multiple .select2-selection--multiple .select2-selection__choice{
  display:none!important
}

.app-shell .select-field-compact-multiple .select2-selection--multiple .select2-search--inline{
  position:absolute;
  inset:0;
  z-index:2;
  display:block;
  min-width:0;
  margin:0;
  opacity:0
}

.app-shell .select-field-compact-multiple .select2-selection--multiple .select2-search__field{
  width:100%!important;
  height:40px!important;
  min-width:0;
  margin:0!important;
  cursor:pointer
}

.app-shell .select2-compact-summary{
  position:absolute;
  inset:0 42px 0 13px;
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  pointer-events:none
}

.app-shell .select2-compact-summary-label{
  min-width:0;
  overflow:hidden;
  color:var(--text);
  font-size:13.5px;
  font-weight:600;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .select2-compact-summary.is-placeholder .select2-compact-summary-label{
  color:var(--text-3);
  font-weight:500
}

/* The tags. Drawn by the page rather than by select2, whose own choices this control hides. */

.app-shell .select2-compact-chips{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:8px
}

.app-shell .select2-compact-chips.is-empty{
  display:none
}

.app-shell .select2-compact-chip{
  display:inline-flex;
  max-width:100%;
  align-items:center;
  gap:4px;
  padding:4px 5px 4px 11px;
  border:1px solid color-mix(in srgb,var(--brand) 26%,var(--border));
  border-radius:999px;
  background:var(--brand-weak);
  color:var(--brand-ink);
  font-size:11.5px;
  font-weight:750;
  line-height:1.5
}

.app-shell .select2-compact-chip>span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .select2-compact-chip-remove{
  display:inline-grid;
  width:18px;
  height:18px;
  flex:none;
  place-items:center;
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent;
  color:var(--brand-ink);
  font-family:inherit;
  font-size:14px;
  font-weight:800;
  line-height:1;
  opacity:.6;
  cursor:pointer;
  transition:background .12s ease,color .12s ease,opacity .12s ease
}

.app-shell .select2-compact-chip-remove:hover,.app-shell .select2-compact-chip-remove:focus-visible{
  background:var(--danger-weak);
  color:var(--danger);
  opacity:1;
  outline:none
}

.select2-compact-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:8px 10px;
  border-bottom:1px solid var(--border,#dfe5e1);
  background:var(--surface-2,var(--surface-2))
}

.select2-compact-actions-end{
  display:flex;
  align-items:center;
  gap:8px
}

.select2-compact-action{
  height:30px;
  padding:0 10px;
  border:1px solid var(--border,#dfe5e1);
  border-radius:7px;
  background:var(--surface,#fff);
  color:var(--text-2,var(--text-2));
  font:inherit;
  font-size:12px;
  font-weight:750;
  cursor:pointer;
  transition:border-color .12s ease,background .12s ease,color .12s ease
}

.select2-compact-action:hover{
  border-color:rgba(21,154,77,.35);
  background:var(--brand-weak,#e6f5ec);
  color:var(--brand-ink,#0b5a2c)
}

/* Done is the way out of a panel that deliberately stays open while people are picked. */

.select2-compact-action.is-done{
  min-width:66px;
  border-color:var(--brand,#159a4d);
  background:var(--brand,#159a4d);
  color:#fff
}

.select2-compact-action.is-done:hover{
  border-color:var(--brand-strong,#0f7d3d);
  background:var(--brand-strong,#0f7d3d);
  color:#fff
}

/* In the open panel, selected and merely hovered read as two shades of the same green and could
   not be told apart. A checkbox says which is which. */

.select2-compact-dropdown .select2-results__option{
  position:relative;
  padding-right:38px!important
}

.select2-compact-dropdown .select2-results__option:before{
  display:none!important
}

.select2-compact-dropdown .select2-results__option:after{
  content:"";
  position:absolute;
  top:50%;
  right:12px;
  display:grid;
  width:17px;
  height:17px;
  place-items:center;
  margin-top:-8.5px;
  border:1px solid var(--border,#cad5ce);
  border-radius:5px;
  background:var(--surface,#fff);
  color:#fff;
  font-size:11px;
  font-weight:900;
  line-height:1
}

.select2-compact-dropdown .select2-results__option[aria-selected=true]:after{
  border-color:var(--brand,#159a4d);
  background:var(--brand,#159a4d);
  content:"\2713"
}

/* The reference number on a stock history line opens the document it names. It read as plain
   text before, so nothing said it could be opened. */

.app-shell .stock-history-ref{
  display:inline-flex;
  align-items:center;
  gap:5px;
  color:var(--brand-strong);
  font-size:12.5px;
  font-weight:750;
  text-decoration:none
}

.app-shell .stock-history-ref>span{
  text-decoration:underline;
  text-decoration-color:color-mix(in srgb,var(--brand) 35%,transparent);
  text-underline-offset:2px
}

.app-shell .stock-history-ref svg{
  flex:none;
  opacity:.55
}

.app-shell .stock-history-ref:hover,.app-shell .stock-history-ref:focus-visible{
  color:var(--brand-ink);
  outline:none
}

.app-shell .stock-history-ref:hover>span{
  text-decoration-color:currentColor
}

.app-shell .stock-history-ref:hover svg{
  opacity:1
}

/* ---- bootstrap-datepicker (popup is appended to body) ---- */

body.app-ui .datepicker.datepicker-dropdown{
  position:absolute;
  z-index:100000!important;
  width:286px;
  padding:10px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface);
  box-shadow:0 18px 42px -16px rgba(16,32,24,.34),0 5px 14px -8px rgba(16,32,24,.2);
  color:var(--text);
  font-family:'Plus Jakarta Sans','Noto Sans Khmer',system-ui,sans-serif;
  font-size:13px;
  direction:ltr
}

body.app-ui .datepicker.datepicker-dropdown:before,
body.app-ui .datepicker.datepicker-dropdown:after{
  display:none
}

body.app-ui .datepicker table{
  width:100%;
  margin:0;
  border-collapse:separate;
  border-spacing:2px;
  -webkit-user-select:none;
     -moz-user-select:none;
          user-select:none
}

body.app-ui .datepicker td,
body.app-ui .datepicker th{
  height:34px;
  padding:0;
  border:0;
  border-radius:8px;
  text-align:center;
  vertical-align:middle
}

body.app-ui .datepicker th{
  font-size:12px;
  font-weight:700;
  color:var(--text-2)
}

body.app-ui .datepicker .datepicker-switch,
body.app-ui .datepicker .prev,
body.app-ui .datepicker .next,
body.app-ui .datepicker tfoot th{
  cursor:pointer;
  transition:background .12s,color .12s
}

body.app-ui .datepicker .datepicker-switch:hover,
body.app-ui .datepicker .prev:hover,
body.app-ui .datepicker .next:hover,
body.app-ui .datepicker tfoot th:hover{
  background:var(--surface-3);
  color:var(--brand-strong)
}

/* A month arrow the calendar has switched off.
   `updateNavArrows()` marks it `.disabled` once the view reaches a start or end limit, and the
   follow-up form sets a start limit of today — so « is genuinely unavailable while the current
   month is showing. Nothing styled that state, so a deliberately dead arrow looked exactly like a
   working one, hover highlight and all, and read as a bug. */

body.app-ui .datepicker .prev.disabled,
body.app-ui .datepicker .next.disabled{
  color:var(--border);
  cursor:not-allowed;
  opacity:.5
}

body.app-ui .datepicker .prev.disabled:hover,
body.app-ui .datepicker .next.disabled:hover{
  background:transparent;
  color:var(--border)
}

body.app-ui .datepicker table tr td.day{
  cursor:pointer;
  transition:background .12s,color .12s
}

body.app-ui .datepicker table tr td.day:hover,
body.app-ui .datepicker table tr td.day.focused{
  background:var(--surface-3);
  color:var(--text)
}

body.app-ui .datepicker table tr td.old,
body.app-ui .datepicker table tr td.new{
  color:var(--text-3)
}

body.app-ui .datepicker table tr td.today{
  background:var(--brand-weak);
  color:var(--brand-ink);
  font-weight:800
}

body.app-ui .datepicker table tr td.active,
body.app-ui .datepicker table tr td.active:hover,
body.app-ui .datepicker table tr td.selected,
body.app-ui .datepicker table tr td.selected:hover{
  background:var(--brand)!important;
  color:#fff!important;
  font-weight:800;
  text-shadow:none
}

body.app-ui .datepicker table tr td.disabled,
body.app-ui .datepicker table tr td.disabled:hover{
  background:transparent;
  color:var(--border);
  cursor:not-allowed
}

body.app-ui .datepicker table tr td span{
  display:inline-flex;
  float:left;
  width:23%;
  height:46px;
  margin:1%;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  cursor:pointer;
  transition:background .12s,color .12s
}

body.app-ui .datepicker table tr td span:hover,
body.app-ui .datepicker table tr td span.focused{
  background:var(--surface-3)
}

body.app-ui .datepicker table tr td span.active,
body.app-ui .datepicker table tr td span.active:hover{
  background:var(--brand)!important;
  color:#fff!important;
  font-weight:800;
  text-shadow:none
}

body.app-ui .datepicker table tr td span.old,
body.app-ui .datepicker table tr td span.new{
  color:var(--text-3)
}

/* ---- daterangepicker clean-slate bridge (popup mounts on body) ---- */

body.app-ui .daterangepicker{
  position:absolute;
  z-index:3001;
  display:none;
  width:278px;
  max-width:calc(100vw - 24px);
  margin-top:8px;
  padding:0;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface);
  box-shadow:0 22px 52px -22px rgba(16,32,24,.46),0 8px 18px -12px rgba(16,32,24,.22);
  color:var(--text);
  font-family:Plus Jakarta Sans,Noto Sans Khmer,system-ui,sans-serif;
  font-size:12px;
  line-height:1.35
}

body.app-ui .daterangepicker:after,body.app-ui .daterangepicker:before{
  display:none
}

body.app-ui .daterangepicker .ranges{
  float:none;
  margin:0;
  padding:7px;
  text-align:left
}

body.app-ui .daterangepicker .ranges ul{
  width:100%;
  margin:0;
  padding:0;
  list-style:none
}

body.app-ui .daterangepicker .ranges li{
  margin:1px 0;
  padding:8px 10px;
  border-radius:8px;
  color:var(--text-2);
  font-size:11.5px;
  font-weight:650;
  cursor:pointer;
  transition:background .12s,color .12s
}

body.app-ui .daterangepicker .ranges li:hover{
  background:var(--surface-3);
  color:var(--text)
}

body.app-ui .daterangepicker .ranges li.active{
  background:var(--brand-weak);
  color:var(--brand-strong);
  font-weight:800
}

body.app-ui .daterangepicker .drp-calendar{
  display:none;
  max-width:270px
}

body.app-ui .daterangepicker.show-calendar .drp-calendar{
  display:block
}

body.app-ui .daterangepicker .drp-calendar.left{
  padding:12px 4px 12px 12px
}

body.app-ui .daterangepicker .drp-calendar.right{
  padding:12px 12px 12px 4px
}

body.app-ui .daterangepicker .calendar-table{
  padding:0;
  border:0;
  border-radius:0;
  background:var(--surface)
}

body.app-ui .daterangepicker .calendar-table table{
  width:100%;
  margin:0;
  border-spacing:2px;
  border-collapse:separate
}

body.app-ui .daterangepicker .calendar-table th,body.app-ui .daterangepicker .calendar-table td{
  width:32px;
  min-width:32px;
  height:31px;
  padding:0;
  border:0;
  border-radius:7px;
  font-size:11.5px;
  line-height:31px;
  text-align:center;
  vertical-align:middle;
  white-space:nowrap;
  cursor:pointer
}

body.app-ui .daterangepicker .calendar-table th{
  color:var(--text-2);
  font-weight:750
}

body.app-ui .daterangepicker .calendar-table th.month{
  width:auto;
  color:var(--text);
  font-size:12.5px;
  font-weight:800
}

body.app-ui .daterangepicker .calendar-table .next span,body.app-ui .daterangepicker .calendar-table .prev span{
  display:inline-block;
  width:7px;
  height:7px;
  padding:0;
  border:solid var(--text-2);
  border-width:0 2px 2px 0;
  border-radius:0
}

body.app-ui .daterangepicker .calendar-table .next span{
  transform:rotate(-45deg)
}

body.app-ui .daterangepicker .calendar-table .prev span{
  transform:rotate(135deg)
}

body.app-ui .daterangepicker td.available:hover,body.app-ui .daterangepicker th.available:hover{
  background:var(--surface-3);
  color:var(--text)
}

body.app-ui .daterangepicker td.off,body.app-ui .daterangepicker td.off.in-range,body.app-ui .daterangepicker td.off.start-date,body.app-ui .daterangepicker td.off.end-date{
  background:transparent;
  color:var(--text-3);
  opacity:.58
}

body.app-ui .daterangepicker td.in-range{
  border-radius:5px;
  background:var(--brand-weak);
  color:var(--brand-ink)
}

body.app-ui .daterangepicker td.active,body.app-ui .daterangepicker td.active:hover{
  background:var(--brand);
  color:#fff;
  font-weight:800
}

body.app-ui .daterangepicker td.disabled,body.app-ui .daterangepicker option.disabled{
  color:var(--text-3);
  cursor:not-allowed;
  text-decoration:line-through
}

body.app-ui .daterangepicker .drp-buttons{
  display:none;
  clear:both;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  padding:11px 12px;
  border-top:1px solid var(--border);
  background:var(--surface-2);
  text-align:right
}

body.app-ui .daterangepicker.show-calendar .drp-buttons{
  display:flex
}

body.app-ui .daterangepicker .drp-selected{
  margin-right:auto;
  color:var(--text-3);
  font-size:11px;
  font-weight:600
}

body.app-ui .daterangepicker .drp-buttons .btn{
  height:34px;
  margin:0;
  padding:0 12px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface);
  color:var(--text-2);
  font:inherit;
  font-size:11.5px;
  font-weight:750;
  cursor:pointer
}

body.app-ui .daterangepicker .drp-buttons .btn:hover{
  background:var(--surface-3);
  color:var(--text)
}

body.app-ui .daterangepicker .drp-buttons .applyBtn{
  border-color:var(--brand);
  background:var(--brand);
  color:#fff
}

body.app-ui .daterangepicker .drp-buttons .applyBtn:hover{
  background:var(--brand-strong);
  color:#fff
}

body.app-ui .daterangepicker.auto-apply .drp-buttons{
  display:none
}

@media (min-width:564px){
  body.app-ui .daterangepicker{
    width:auto;
    direction:ltr;
    text-align:left
  }

  body.app-ui .daterangepicker .ranges,body.app-ui .daterangepicker .drp-calendar{
    float:left
  }

  body.app-ui .daterangepicker .ranges{
    width:148px;
    padding:10px 7px
  }

  body.app-ui .daterangepicker .ranges ul{
    width:100%
  }

  body.app-ui .daterangepicker .drp-calendar.left{
    clear:left
  }

  body.app-ui .daterangepicker.show-ranges .drp-calendar.left{
    border-left:1px solid var(--border)
  }
}

@media (min-width:730px){
  body.app-ui .daterangepicker .drp-calendar.left{
    clear:none
  }
}

@media (max-width:729.98px){
  body.app-ui .daterangepicker{
    max-height:calc(100vh - 24px);
    overflow-y:auto
  }

  body.app-ui .daterangepicker .drp-calendar{
    max-width:none
  }

  body.app-ui .daterangepicker .drp-calendar.left,body.app-ui .daterangepicker .drp-calendar.right{
    padding:10px 12px
  }

  body.app-ui .daterangepicker .drp-buttons{
    position:sticky;
    bottom:0
  }

  body.app-ui .daterangepicker .drp-selected{
    display:none
  }
}

/* ---- toastr (popup on body) ---- */

#toast-container{
  position:fixed;
  z-index:999999;
  pointer-events:none
}

#toast-container.toast-top-right{
  top:78px;
  right:18px
}

#toast-container>div{
  position:relative;
  pointer-events:auto;
  overflow:hidden;
  width:min(360px,calc(100vw - 32px));
  min-height:52px;
  margin:0 0 10px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:11px;
  box-shadow:0 18px 40px -20px rgba(16,32,24,.48),var(--shadow-md);
  opacity:1;
  padding:14px 40px 14px 48px;
  color:#fff;
  font-family:'Plus Jakarta Sans','Noto Sans Khmer',system-ui,sans-serif;
  font-size:13.5px;
  font-weight:600;
  line-height:1.45;
  background-position:16px center;
  background-repeat:no-repeat;
  background-size:20px;
  transform:translateZ(0)
}

#toast-container>div:before{
  position:absolute;
  top:14px;
  left:15px;
  display:flex;
  width:23px;
  height:23px;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:rgba(255,255,255,.18);
  color:#fff;
  font-size:13px;
  font-weight:800;
  line-height:1
}

#toast-container>.toast-success:before{
  content:'\2713'
}

#toast-container>.toast-error:before{
  content:'!'
}

#toast-container>.toast-warning:before{
  content:'!'
}

#toast-container>.toast-info:before{
  content:'i'
}

#toast-container .toast-message{
  overflow-wrap:anywhere
}

#toast-container .toast-close-button{
  position:absolute;
  top:8px;
  right:10px;
  border:0;
  background:transparent;
  color:#fff;
  font-size:18px;
  line-height:1;
  opacity:.8
}

#toast-container .toast-progress{
  position:absolute;
  right:0;
  bottom:0;
  left:0;
  height:3px;
  background:rgba(0,0,0,.2)
}

#toast-container>.toast-success{
  background:var(--brand)
}

#toast-container>.toast-error{
  background:var(--danger)
}

#toast-container>.toast-info{
  background:var(--blue)
}

#toast-container>.toast-warning{
  background:var(--warn)
}

@media (max-width:640px){
  #toast-container.toast-top-right{
    top:74px;
    right:12px;
    left:12px
  }

  #toast-container>div{
    width:100%
  }
}

/* ---- SweetAlert 2 (delete confirmation) ---- */

body.app-ui .swal-overlay{
  z-index:2050;
  background:rgba(17,26,21,.4)
}

body.app-ui .swal-modal.confirm-dialog{
  width:min(380px,calc(100vw - 32px));
  margin:16px;
  border:1px solid rgba(255,255,255,.72);
  border-radius:12px;
  background:rgba(255,255,255,.88);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 26px 64px -28px rgba(15,23,19,.64);
  backdrop-filter:blur(18px) saturate(135%);
  font-family:inherit
}

body.app-ui .swal-overlay--show-modal .swal-modal.confirm-dialog{
  animation:none;
  transform:none;
  will-change:auto
}

body.app-ui .confirm-dialog .swal-icon{
  width:48px;
  height:48px;
  margin:22px auto 12px;
  border-width:2px
}

body.app-ui .confirm-dialog .swal-icon--warning{
  display:flex;
  align-items:center;
  justify-content:center;
  border-color:rgba(217,119,6,.4);
  background:var(--warn-weak)
}

body.app-ui .confirm-dialog .swal-icon--warning:before{
  content:"!";
  color:var(--warn);
  font-size:27px;
  font-weight:700;
  line-height:1
}

body.app-ui .confirm-dialog .swal-icon--warning__body,
body.app-ui .confirm-dialog .swal-icon--warning__dot{
  display:none
}

body.app-ui .confirm-dialog .swal-title{
  padding:0 22px;
  color:var(--text);
  font-size:18px;
  font-weight:800;
  line-height:1.35;
  letter-spacing:0
}

body.app-ui .confirm-dialog .swal-text{
  display:block;
  max-width:320px;
  margin:6px auto 0;
  padding:0 20px;
  color:var(--text-2);
  font-size:12.5px;
  line-height:1.5;
  text-align:center
}

body.app-ui .confirm-dialog .swal-footer{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:20px;
  padding:12px 16px;
  border-top:1px solid rgba(228,233,230,.82);
  border-radius:0 0 12px 12px;
  background:rgba(247,249,248,.72);
  text-align:right
}

body.app-ui .confirm-dialog .swal-button-container{
  margin:0
}

body.app-ui .confirm-dialog .swal-button{
  min-width:82px;
  height:38px;
  margin:0;
  padding:0 15px;
  border:1px solid transparent;
  border-radius:8px;
  font-family:inherit;
  font-size:12.5px;
  font-weight:700;
  line-height:36px;
  box-shadow:none;
  transition:border-color .15s,background .15s,box-shadow .15s,opacity .15s
}

body.app-ui .confirm-dialog .swal-button--cancel{
  border-color:var(--border);
  background:var(--surface);
  color:var(--text-2)
}

body.app-ui .confirm-dialog .swal-button--cancel:hover{
  border-color:var(--text-3);
  background:var(--surface-3);
  color:var(--text)
}

body.app-ui .confirm-dialog .swal-button--confirm{
  border-color:var(--danger);
  background:var(--danger);
  color:#fff
}

body.app-ui .confirm-dialog .swal-button--confirm:hover{
  border-color:#c93030;
  background:#c93030
}

body.app-ui .confirm-dialog[data-confirm-tone="brand"] .swal-icon--warning{
  border-color:rgba(21,154,77,.36);
  background:var(--brand-weak)
}

body.app-ui .confirm-dialog[data-confirm-tone="brand"] .swal-icon--warning:before{
  color:var(--brand)
}

body.app-ui .confirm-dialog[data-confirm-tone="brand"] .swal-button--confirm{
  border-color:var(--brand);
  background:var(--brand)
}

body.app-ui .confirm-dialog[data-confirm-tone="brand"] .swal-button--confirm:hover{
  border-color:var(--brand-strong);
  background:var(--brand-strong)
}

body.app-ui .confirm-dialog .swal-button:focus{
  outline:none;
  box-shadow:0 0 0 3px rgba(21,154,77,.18)
}

body.app-ui .confirm-dialog .swal-button--loading{
  position:relative;
  color:transparent!important;
  opacity:.78;
  pointer-events:none
}

body.app-ui .confirm-dialog .swal-button--loading:after{
  position:absolute;
  top:50%;
  left:50%;
  width:16px;
  height:16px;
  margin:-8px 0 0 -8px;
  border:2px solid rgba(255,255,255,.45);
  border-top-color:#fff;
  border-radius:50%;
  content:"";
  animation:note-submit-spin .7s linear infinite
}

body.app-ui .swal-modal.blocked-action-dialog{
  display:inline-block;
  width:min(410px,calc(100vw - 28px));
  overflow:hidden;
  text-align:center;
  vertical-align:middle
}

body.app-ui .blocked-action-dialog .swal-icon{
  width:44px;
  height:44px;
  margin:20px auto 10px
}

body.app-ui .blocked-action-dialog .swal-icon--warning:before{
  font-size:24px
}

body.app-ui .blocked-action-dialog .swal-title{
  margin:0;
  padding:0 20px;
  font-size:17px;
  text-align:center
}

body.app-ui .blocked-action-dialog .swal-text{
  display:block;
  max-width:none;
  margin:9px 18px 18px;
  padding:11px 12px;
  border:1px solid color-mix(in srgb,var(--warn) 18%,var(--border));
  border-radius:9px;
  background:color-mix(in srgb,var(--warn-weak) 62%,var(--surface));
  color:var(--text-2);
  font-size:11.5px;
  line-height:1.55;
  text-align:left;
  white-space:pre-line
}

body.app-ui .blocked-action-dialog .swal-footer{
  width:100%;
  margin:0;
  padding:11px 14px
}

body.app-ui .blocked-action-dialog .swal-button--confirm{
  border-color:var(--brand);
  background:var(--brand);
  color:#fff
}

body.app-ui .blocked-action-dialog .swal-button--confirm:hover{
  border-color:var(--brand-strong);
  background:var(--brand-strong)
}

[data-theme="dark"] body.app-ui .swal-modal.confirm-dialog,
body.app-ui[data-theme="dark"] .swal-modal.confirm-dialog{
  border-color:rgba(255,255,255,.12);
  background:rgba(21,28,24,.88);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 26px 64px -28px rgba(0,0,0,.8)
}

[data-theme="dark"] body.app-ui .confirm-dialog .swal-footer,
body.app-ui[data-theme="dark"] .confirm-dialog .swal-footer{
  border-top-color:rgba(255,255,255,.08);
  background:rgba(26,34,29,.76)
}

@media (max-width:480px){
  body.app-ui .confirm-dialog .swal-footer{
    display:grid;
    grid-template-columns:1fr 1fr
  }

  body.app-ui .confirm-dialog .swal-button{
    width:100%
  }

  body.app-ui .blocked-action-dialog .swal-icon{
    width:40px;
    height:40px
  }

  body.app-ui .blocked-action-dialog .swal-title{
    font-size:16px
  }

  body.app-ui .blocked-action-dialog .swal-text{
    margin-right:14px;
    margin-left:14px
  }

  body.app-ui .blocked-action-dialog .swal-footer{
    display:flex
  }

  body.app-ui .blocked-action-dialog .swal-button{
    width:auto;
    min-width:88px
  }
}

/* ---- auto message plans ---- */

.app-shell .auto-messages-page,.app-shell .auto-message-builder-page{
  padding-bottom:34px
}

.app-shell .auto-message-alert{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 16px;
  padding:12px 14px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface);
  color:var(--text-2);
  font-size:13px;
  font-weight:650
}

.app-shell .auto-message-alert.alert-success{
  border-color:rgba(21,154,77,.22);
  background:var(--brand-weak);
  color:var(--brand-ink)
}

.app-shell .auto-message-alert.alert-danger{
  border-color:rgba(229,72,77,.25);
  background:var(--danger-weak);
  color:var(--danger)
}

.app-shell .auto-message-stats{
  margin-bottom:16px
}

/* Import contacts */

.app-shell .import-contacts-page{
  max-width:1320px;
  padding-bottom:32px
}

.app-shell .import-products-page{
  max-width:1320px;
  padding-bottom:32px
}

.app-shell .import-products-page>.import-contacts-alert{
  margin-bottom:16px
}

.app-shell .import-products-workspace{
  margin-bottom:16px
}

.app-shell .import-products-guide-tools{
  display:flex;
  min-width:0;
  align-items:center;
  justify-content:flex-end;
  gap:10px
}

.app-shell .import-products-guide-search{
  position:relative;
  display:block;
  width:min(270px,32vw)
}

.app-shell .import-products-guide-search>svg{
  position:absolute;
  top:50%;
  left:11px;
  color:var(--text-3);
  transform:translateY(-50%);
  pointer-events:none
}

.app-shell .import-products-guide-search>input{
  width:100%;
  height:36px;
  padding:0 12px 0 35px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface-2);
  color:var(--text);
  font:inherit;
  font-size:11.5px;
  outline:none
}

.app-shell .import-products-guide-search>input:focus{
  border-color:var(--brand);
  background:var(--surface);
  box-shadow:0 0 0 3px rgba(21,154,77,.09)
}

.app-shell .import-products-guide .import-contacts-guide-legend .is-conditional{
  background:var(--warn-weak);
  color:var(--warn)
}

.app-shell .import-products-table-wrap{
  max-height:700px
}

.app-shell .import-products-table th:first-child{
  width:86px
}

.app-shell .import-products-table th:nth-child(2){
  width:37%
}

.app-shell .import-products-guide-empty{
  display:flex;
  min-height:140px;
  align-items:center;
  justify-content:center;
  gap:8px;
  color:var(--text-3);
  font-size:12px;
  font-weight:650
}

.app-shell .import-products-guide-empty[hidden]{
  display:none!important
}

.app-shell .import-products-file-error{
  grid-column:1/-1;
  padding:8px 10px;
  border:1px solid rgba(229,72,77,.24);
  border-radius:7px;
  background:var(--danger-weak);
  color:var(--danger);
  font-size:10.5px;
  font-weight:650;
  line-height:1.4
}

.app-shell .import-products-file-error[hidden]{
  display:none!important
}

.app-shell .import-contacts-alert{
  display:grid;
  grid-template-columns:38px minmax(0,1fr);
  gap:11px;
  align-items:start;
  padding:13px 15px;
  border:1px solid rgba(229,72,77,.3);
  border-radius:8px;
  background:var(--danger-weak);
  color:var(--danger)
}

.app-shell .import-contacts-alert-icon{
  display:inline-flex;
  width:36px;
  height:36px;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  background:var(--surface)
}

.app-shell .import-contacts-alert strong{
  display:block;
  margin:1px 0 3px;
  font-size:12.5px;
  font-weight:800
}

.app-shell .import-contacts-alert p{
  margin:0;
  color:var(--text-2);
  font-size:12px;
  line-height:1.45
}

.app-shell .import-contacts-workspace,.app-shell .import-contacts-guide{
  overflow:hidden
}

.app-shell .import-contacts-workspace-head{
  display:flex;
  align-items:center;
  gap:11px;
  padding:15px 18px;
  border-bottom:1px solid var(--border)
}

.app-shell .import-contacts-workspace-head h2,.app-shell .import-contacts-guide-head h2{
  margin:0;
  color:var(--text);
  font-size:14px;
  font-weight:800;
  line-height:1.35
}

.app-shell .import-contacts-workspace-head p,.app-shell .import-contacts-guide-head p{
  margin:2px 0 0;
  color:var(--text-3);
  font-size:11.5px;
  line-height:1.4
}

.app-shell .import-contacts-workspace-body{
  background:var(--surface)
}

.app-shell .import-contacts-form{
  display:grid;
  grid-template-columns:minmax(210px,.65fr) minmax(0,1.35fr);
  align-items:stretch
}

.app-shell .import-contacts-step-label{
  display:flex;
  min-width:0;
  align-items:center;
  gap:11px;
  padding:18px;
  border-right:1px solid var(--border);
  border-bottom:1px solid var(--border)
}

.app-shell .import-contacts-step-label>span{
  display:inline-flex;
  width:28px;
  height:28px;
  flex:none;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:var(--brand-weak);
  color:var(--brand-strong);
  font-size:11.5px;
  font-weight:850
}

.app-shell .import-contacts-step-label strong,.app-shell .import-contacts-step-label small{
  display:block
}

.app-shell .import-contacts-step-label strong{
  color:var(--text);
  font-size:12.5px;
  font-weight:800;
  line-height:1.35
}

.app-shell .import-contacts-step-label small{
  margin-top:2px;
  color:var(--text-3);
  font-size:10.5px;
  line-height:1.35
}

.app-shell .import-contacts-template-action{
  display:grid;
  min-width:0;
  grid-template-columns:40px minmax(0,1fr) 20px;
  align-items:center;
  gap:12px;
  margin:14px;
  padding:12px 14px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface-2);
  color:var(--text-2);
  text-decoration:none;
  transition:border-color .15s,background .15s,box-shadow .15s
}

.app-shell .import-contacts-template-action:hover{
  border-color:rgba(21,154,77,.36);
  background:var(--brand-weak);
  color:var(--brand-strong);
  box-shadow:0 8px 20px -18px rgba(16,32,24,.5)
}

.app-shell .import-contacts-template-action>span:first-child{
  display:inline-flex;
  width:40px;
  height:40px;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface);
  color:var(--brand)
}

.app-shell .import-contacts-template-action strong,.app-shell .import-contacts-template-action small{
  display:block
}

.app-shell .import-contacts-template-action strong{
  overflow:hidden;
  color:var(--text);
  font-size:12.5px;
  font-weight:800;
  line-height:1.35;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .import-contacts-template-action small{
  margin-top:3px;
  color:var(--text-3);
  font-size:10.5px;
  line-height:1.35
}

.app-shell .import-contacts-template-action>svg{
  color:var(--brand)
}

.app-shell .import-contacts-dropzone{
  position:relative;
  display:grid;
  min-width:0;
  min-height:90px;
  grid-template-columns:42px minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  margin:14px;
  padding:14px;
  border:1px dashed var(--border);
  border-radius:8px;
  background:var(--surface-2);
  cursor:pointer;
  transition:border-color .15s,background .15s,box-shadow .15s
}

.app-shell .import-contacts-dropzone:hover,.app-shell .import-contacts-dropzone.is-dragging{
  border-color:var(--brand);
  background:var(--brand-weak);
  box-shadow:0 0 0 3px rgba(21,154,77,.09)
}

.app-shell .import-contacts-dropzone.has-file{
  border-style:solid;
  border-color:rgba(21,154,77,.42);
  background:var(--brand-weak)
}

.app-shell .import-contacts-file-input{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  opacity:0;
  pointer-events:none
}

.app-shell .import-contacts-file-icon{
  display:inline-flex;
  width:42px;
  height:42px;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface);
  color:var(--brand)
}

.app-shell .import-contacts-file-copy{
  display:block;
  min-width:0
}

.app-shell .import-contacts-file-copy[hidden],.app-shell .import-contacts-browse[hidden],.app-shell .import-contacts-file-clear[hidden]{
  display:none!important
}

.app-shell .import-contacts-file-copy strong,.app-shell .import-contacts-file-copy small{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .import-contacts-file-copy strong{
  color:var(--text);
  font-size:12.5px;
  font-weight:800;
  line-height:1.35
}

.app-shell .import-contacts-file-copy small{
  margin-top:3px;
  color:var(--text-3);
  font-size:10.5px;
  line-height:1.35
}

.app-shell .import-contacts-browse{
  display:inline-flex;
  height:34px;
  align-items:center;
  justify-content:center;
  padding:0 12px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface);
  color:var(--text-2);
  font-size:11.5px;
  font-weight:750
}

.app-shell .import-contacts-file-clear{
  display:inline-flex;
  width:34px;
  height:34px;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(229,72,77,.28);
  border-radius:8px;
  background:var(--surface);
  color:var(--danger);
  cursor:pointer
}

.app-shell .import-contacts-file-clear:hover{
  border-color:var(--danger);
  background:var(--danger-weak)
}

.app-shell .import-contacts-form-footer{
  grid-column:1/-1;
  display:flex;
  min-height:66px;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:11px 14px 11px 18px;
  background:var(--surface-2)
}

.app-shell .import-contacts-format-note{
  display:flex;
  min-width:0;
  align-items:center;
  gap:8px;
  color:var(--text-3);
  font-size:10.5px;
  line-height:1.4
}

.app-shell .import-contacts-format-note svg{
  flex:none;
  color:var(--info)
}

.app-shell .import-contacts-form-footer .btn-primary{
  min-width:126px;
  height:42px
}

.app-shell .import-contacts-form-footer .btn-primary:disabled{
  cursor:not-allowed;
  opacity:.5;
  box-shadow:none
}

.app-shell .import-contacts-guide-head{
  display:flex;
  min-height:68px;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 18px;
  border-bottom:1px solid var(--border)
}

.app-shell .import-contacts-guide-heading{
  display:flex;
  min-width:0;
  align-items:center;
  gap:11px
}

.app-shell .import-contacts-guide-legend{
  display:flex;
  align-items:center;
  gap:7px;
  flex-wrap:wrap
}

.app-shell .import-contacts-guide-legend span,.app-shell .import-contacts-column-name span{
  display:inline-flex;
  align-items:center;
  padding:3px 7px;
  border-radius:999px;
  background:var(--surface-3);
  color:var(--text-3);
  font-size:9.5px;
  font-weight:750;
  line-height:1.25;
  white-space:nowrap
}

.app-shell .import-contacts-guide-legend .is-required,.app-shell .import-contacts-column-name .is-required{
  background:var(--danger-weak);
  color:var(--danger)
}

.app-shell .import-contacts-column-name .is-conditional{
  background:var(--warn-weak);
  color:var(--warn)
}

.app-shell .import-contacts-table-wrap{
  max-height:650px;
  overflow:auto;
  background:var(--surface)
}

.app-shell .import-contacts-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  table-layout:fixed
}

.app-shell .import-contacts-table thead{
  position:sticky;
  top:0;
  z-index:2
}

.app-shell .import-contacts-table th{
  padding:11px 14px;
  border-bottom:1px solid var(--border);
  background:var(--surface-2);
  color:var(--text-3);
  font-size:10px;
  font-weight:800;
  letter-spacing:.35px;
  text-align:left;
  text-transform:uppercase;
  white-space:nowrap
}

.app-shell .import-contacts-table th:first-child{
  width:105px
}

.app-shell .import-contacts-table th:nth-child(2){
  width:42%
}

.app-shell .import-contacts-table td{
  padding:10px 14px;
  border-bottom:1px solid var(--border-2);
  color:var(--text-2);
  font-size:11.5px;
  line-height:1.4;
  vertical-align:middle
}

.app-shell .import-contacts-table tbody tr:last-child td{
  border-bottom:0
}

.app-shell .import-contacts-table tbody tr:hover td{
  background:color-mix(in srgb,var(--brand-weak) 35%,var(--surface))
}

.app-shell .import-contacts-column-number{
  display:inline-flex;
  width:28px;
  height:28px;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  background:var(--surface-3);
  color:var(--text-2);
  font-size:10.5px;
  font-weight:800
}

.app-shell .import-contacts-column-name{
  display:flex;
  min-width:0;
  align-items:center;
  justify-content:space-between;
  gap:10px
}

.app-shell .import-contacts-column-name strong{
  overflow:hidden;
  color:var(--text);
  font-size:11.5px;
  font-weight:750;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .import-contacts-instruction{
  color:var(--text-3)!important
}

.app-shell .import-contacts-instruction strong{
  color:var(--text-2);
  font-weight:750
}

@media (max-width:760px){
  .app-shell .import-products-guide-head{
    align-items:stretch
  }

  .app-shell .import-products-guide-tools{
    align-items:stretch;
    flex-direction:column
  }

  .app-shell .import-products-guide-search{
    width:100%
  }

  .app-shell .import-contacts-form{
    grid-template-columns:1fr
  }

  .app-shell .import-contacts-step-label{
    padding:14px 14px 8px;
    border-right:0;
    border-bottom:0
  }

  .app-shell .import-contacts-template-action,.app-shell .import-contacts-dropzone{
    margin-top:6px
  }

  .app-shell .import-contacts-form-footer{
    align-items:stretch;
    flex-direction:column
  }

  .app-shell .import-contacts-form-footer .btn-primary{
    width:100%;
    justify-content:center
  }

  .app-shell .import-contacts-guide-head{
    align-items:flex-start;
    flex-direction:column
  }

  .app-shell .import-contacts-table{
    min-width:720px
  }
}

@media (max-width:479.98px){
  .app-shell .import-contacts-dropzone{
    grid-template-columns:38px minmax(0,1fr);
    min-height:104px
  }

  .app-shell .import-contacts-file-icon{
    width:38px;
    height:38px
  }

  .app-shell .import-contacts-browse,.app-shell .import-contacts-file-clear{
    grid-column:1/-1;
    width:100%
  }
}

/* Import opening stock */

.app-shell .opening-stock-import-page{
  max-width:1320px;
  padding-bottom:34px
}

.app-shell .opening-stock-import-alert,.app-shell .opening-stock-import-notice{
  display:grid;
  grid-template-columns:38px minmax(0,1fr);
  gap:11px;
  align-items:start;
  margin-bottom:14px;
  padding:13px 15px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface);
  color:var(--text-2)
}

.app-shell .opening-stock-import-alert{
  border-color:rgba(229,72,77,.28);
  background:var(--danger-weak)
}

.app-shell .opening-stock-import-notice{
  border-color:color-mix(in srgb,var(--info) 25%,var(--border));
  background:var(--info-weak)
}

.app-shell .opening-stock-import-alert>span,.app-shell .opening-stock-import-notice>span{
  display:inline-flex;
  width:36px;
  height:36px;
  align-items:center;
  justify-content:center;
  border-radius:9px;
  background:var(--surface)
}

.app-shell .opening-stock-import-alert>span{
  color:var(--danger)
}

.app-shell .opening-stock-import-notice>span{
  color:var(--info)
}

.app-shell .opening-stock-import-alert strong,.app-shell .opening-stock-import-notice strong{
  display:block;
  margin:1px 0 3px;
  color:var(--text);
  font-size:12.5px;
  font-weight:800
}

.app-shell .opening-stock-import-alert p,.app-shell .opening-stock-import-notice p{
  margin:0;
  color:var(--text-2);
  font-size:11.5px;
  line-height:1.5
}

.app-shell .opening-stock-import-workspace,.app-shell .opening-stock-field-guide{
  overflow:hidden
}

.app-shell .opening-stock-import-workspace{
  margin-bottom:16px
}

.app-shell .opening-stock-import-head{
  display:flex;
  align-items:center;
  gap:11px;
  padding:15px 18px;
  border-bottom:1px solid var(--border)
}

.app-shell .opening-stock-import-head h2,.app-shell .opening-stock-field-guide-head h2{
  margin:0;
  color:var(--text);
  font-size:14px;
  font-weight:800;
  line-height:1.35
}

.app-shell .opening-stock-import-head p,.app-shell .opening-stock-field-guide-head p{
  margin:2px 0 0;
  color:var(--text-3);
  font-size:11.5px;
  line-height:1.4
}

.app-shell .opening-stock-import-flow{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  background:var(--surface)
}

.app-shell .opening-stock-import-step{
  min-width:0;
  padding:18px
}

.app-shell .opening-stock-import-step.is-template{
  border-right:1px solid var(--border);
  background:var(--surface-2)
}

.app-shell .opening-stock-import-step-title{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:14px
}

.app-shell .opening-stock-import-step-title>span{
  display:inline-flex;
  width:28px;
  height:28px;
  flex:none;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:var(--brand-weak);
  color:var(--brand-strong);
  font-size:11.5px;
  font-weight:850
}

.app-shell .opening-stock-import-step-title strong,.app-shell .opening-stock-import-step-title small{
  display:block
}

.app-shell .opening-stock-import-step-title strong{
  color:var(--text);
  font-size:12.5px;
  font-weight:800
}

.app-shell .opening-stock-import-step-title small{
  margin-top:2px;
  color:var(--text-3);
  font-size:10.5px;
  line-height:1.35
}

.app-shell .opening-stock-template-file{
  display:grid;
  grid-template-columns:46px minmax(0,1fr) 20px;
  align-items:center;
  gap:12px;
  padding:15px;
  border:1px solid var(--border);
  border-radius:11px;
  background:var(--surface);
  color:var(--text-2);
  text-decoration:none;
  box-shadow:var(--shadow-sm);
  transition:border-color .15s,box-shadow .15s,transform .15s
}

.app-shell .opening-stock-template-file:hover{
  border-color:color-mix(in srgb,var(--brand) 36%,var(--border));
  box-shadow:var(--shadow-md);
  transform:translateY(-1px)
}

.app-shell .opening-stock-template-file>span:first-child{
  display:inline-flex;
  width:46px;
  height:46px;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .opening-stock-template-file strong,.app-shell .opening-stock-template-file small{
  display:block
}

.app-shell .opening-stock-template-file strong{
  color:var(--text);
  font-size:13px;
  font-weight:800
}

.app-shell .opening-stock-template-file small{
  margin-top:3px;
  color:var(--text-3);
  font-size:10.5px
}

.app-shell .opening-stock-template-file>svg{
  color:var(--brand)
}

.app-shell .opening-stock-template-facts{
  display:flex;
  align-items:center;
  gap:7px;
  margin-top:12px;
  flex-wrap:wrap
}

.app-shell .opening-stock-template-facts span{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:5px 8px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--surface);
  color:var(--text-3);
  font-size:9.5px;
  font-weight:700
}

.app-shell .opening-stock-import-form{
  display:block
}

.app-shell .opening-stock-import-dropzone{
  position:relative;
  display:grid;
  min-height:112px;
  grid-template-columns:44px minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  padding:15px;
  border:1px dashed var(--border);
  border-radius:11px;
  background:var(--surface-2);
  cursor:pointer;
  transition:border-color .15s,background .15s,box-shadow .15s
}

.app-shell .opening-stock-import-dropzone:hover,.app-shell .opening-stock-import-dropzone.is-dragging{
  border-color:var(--brand);
  background:var(--brand-weak);
  box-shadow:0 0 0 3px rgba(21,154,77,.09)
}

.app-shell .opening-stock-import-dropzone.has-file{
  border-style:solid;
  border-color:color-mix(in srgb,var(--brand) 42%,var(--border));
  background:var(--brand-weak)
}

.app-shell .opening-stock-import-dropzone>input{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  opacity:0;
  pointer-events:none
}

.app-shell .opening-stock-import-file-icon{
  display:inline-flex;
  width:44px;
  height:44px;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface);
  color:var(--brand)
}

.app-shell .opening-stock-import-file-copy{
  display:block;
  min-width:0
}

.app-shell .opening-stock-import-file-copy[hidden],.app-shell .opening-stock-import-browse[hidden],.app-shell .opening-stock-import-clear[hidden],.app-shell .opening-stock-import-file-error[hidden]{
  display:none!important
}

.app-shell .opening-stock-import-file-copy strong,.app-shell .opening-stock-import-file-copy small{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .opening-stock-import-file-copy strong{
  color:var(--text);
  font-size:12.5px;
  font-weight:800
}

.app-shell .opening-stock-import-file-copy small{
  margin-top:3px;
  color:var(--text-3);
  font-size:10.5px
}

.app-shell .opening-stock-import-browse{
  display:inline-flex;
  height:34px;
  align-items:center;
  justify-content:center;
  padding:0 12px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface);
  color:var(--text-2);
  font-size:11.5px;
  font-weight:750
}

.app-shell .opening-stock-import-clear{
  display:inline-flex;
  width:34px;
  height:34px;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(229,72,77,.28);
  border-radius:8px;
  background:var(--surface);
  color:var(--danger);
  cursor:pointer
}

.app-shell .opening-stock-import-file-error{
  grid-column:1/-1;
  padding:8px 10px;
  border:1px solid rgba(229,72,77,.24);
  border-radius:7px;
  background:var(--danger-weak);
  color:var(--danger);
  font-size:10.5px;
  font-weight:650
}

.app-shell .opening-stock-import-submit-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-top:12px
}

.app-shell .opening-stock-import-submit-row>span{
  display:flex;
  min-width:0;
  align-items:center;
  gap:7px;
  color:var(--text-3);
  font-size:10.5px;
  line-height:1.4
}

.app-shell .opening-stock-import-submit-row>span svg{
  flex:none;
  color:var(--info)
}

.app-shell .opening-stock-import-submit-row .btn-primary{
  min-width:132px
}

.app-shell .opening-stock-import-submit-row .btn-primary:disabled{
  cursor:not-allowed;
  opacity:.5;
  box-shadow:none
}

.app-shell .opening-stock-field-guide-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 18px;
  border-bottom:1px solid var(--border)
}

.app-shell .opening-stock-field-guide-head>div:first-child{
  display:flex;
  align-items:center;
  gap:11px
}

.app-shell .opening-stock-field-legend{
  display:flex;
  align-items:center;
  gap:7px
}

.app-shell .opening-stock-field-legend span,.app-shell .opening-stock-field-requirement{
  display:inline-flex;
  padding:3px 7px;
  border-radius:999px;
  background:var(--surface-3);
  color:var(--text-3);
  font-size:9.5px;
  font-weight:750
}

.app-shell .opening-stock-field-legend .is-required,.app-shell .opening-stock-field-requirement.is-required{
  background:var(--danger-weak);
  color:var(--danger)
}

.app-shell .opening-stock-field-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  padding:14px;
  background:var(--surface-2)
}

.app-shell .opening-stock-field-card{
  min-width:0;
  padding:14px;
  border:1px solid var(--border);
  border-radius:11px;
  background:var(--surface);
  box-shadow:var(--shadow-sm);
  transition:border-color .15s,box-shadow .15s,transform .15s
}

.app-shell .opening-stock-field-card:hover{
  border-color:color-mix(in srgb,var(--brand) 28%,var(--border));
  box-shadow:var(--shadow-md);
  transform:translateY(-1px)
}

.app-shell .opening-stock-field-card-top{
  display:grid;
  grid-template-columns:26px 34px minmax(0,1fr);
  align-items:center;
  gap:8px
}

.app-shell .opening-stock-field-number{
  display:inline-flex;
  width:26px;
  height:26px;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  background:var(--surface-3);
  color:var(--text-3);
  font-size:10px;
  font-weight:850
}

.app-shell .opening-stock-field-icon{
  display:inline-flex;
  width:34px;
  height:34px;
  align-items:center;
  justify-content:center;
  border-radius:9px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .opening-stock-field-requirement{
  justify-self:end
}

.app-shell .opening-stock-field-card h3{
  margin:11px 0 4px;
  color:var(--text);
  font-size:12.5px;
  font-weight:800
}

.app-shell .opening-stock-field-card p{
  margin:0;
  color:var(--text-3);
  font-size:10.5px;
  line-height:1.5
}

@media (max-width:900px){
  .app-shell .opening-stock-import-flow{
    grid-template-columns:1fr
  }

  .app-shell .opening-stock-import-step.is-template{
    border-right:0;
    border-bottom:1px solid var(--border)
  }

  .app-shell .opening-stock-field-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}

@media (max-width:580px){
  .app-shell .opening-stock-import-step{
    padding:14px
  }

  .app-shell .opening-stock-import-submit-row{
    align-items:stretch;
    flex-direction:column
  }

  .app-shell .opening-stock-import-submit-row .btn-primary{
    width:100%;
    justify-content:center
  }

  .app-shell .opening-stock-field-guide-head{
    align-items:flex-start;
    flex-direction:column
  }

  .app-shell .opening-stock-field-grid{
    grid-template-columns:1fr
  }

  .app-shell .opening-stock-import-dropzone{
    grid-template-columns:40px minmax(0,1fr)
  }

  .app-shell .opening-stock-import-browse,.app-shell .opening-stock-import-clear{
    grid-column:1/-1;
    width:100%
  }
}

/* Selling price groups */

.app-shell .selling-price-groups-page{
  padding-bottom:34px
}

.app-shell .price-group-purpose-strip{
  display:grid;
  grid-template-columns:40px minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  margin-bottom:16px;
  padding:13px 15px;
  border:1px solid color-mix(in srgb,var(--brand) 18%,var(--border));
  border-radius:12px;
  background:color-mix(in srgb,var(--brand-weak) 55%,var(--surface));
  box-shadow:var(--shadow-sm)
}

.app-shell .price-group-purpose-icon{
  display:inline-flex;
  width:40px;
  height:40px;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  background:var(--surface);
  color:var(--brand-strong)
}

.app-shell .price-group-purpose-strip strong{
  display:block;
  color:var(--text);
  font-size:12.5px;
  font-weight:800
}

.app-shell .price-group-purpose-strip p{
  margin:3px 0 0;
  color:var(--text-3);
  font-size:10.5px;
  line-height:1.4
}

.app-shell .price-group-purpose-tags{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:7px;
  flex-wrap:wrap
}

.app-shell .price-group-purpose-tags span{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:5px 8px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--surface);
  color:var(--text-2);
  font-size:9.5px;
  font-weight:700
}

.app-shell .selling-price-groups-card .data-table-content{
  background:var(--surface-2)
}

.app-shell .selling-price-groups-card .selling-price-group-grid-wrap{
  padding:14px
}

.app-shell .selling-price-groups-card table.dataTable{
  display:block!important;
  width:100%!important;
  border:0!important;
  background:transparent!important
}

.app-shell .selling-price-groups-card table.dataTable thead{
  display:none
}

.app-shell .selling-price-groups-card table.dataTable tbody{
  display:grid;
  width:100%;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px
}

.app-shell .selling-price-groups-card table.dataTable tbody tr{
  display:grid!important;
  min-width:0;
  grid-template-rows:auto minmax(70px,1fr) auto;
  border:1px solid var(--border)!important;
  border-radius:13px;
  background:var(--surface)!important;
  box-shadow:var(--shadow-sm);
  overflow:hidden;
  transition:border-color .16s,box-shadow .16s,transform .16s
}

.app-shell .selling-price-groups-card table.dataTable tbody tr:hover{
  border-color:color-mix(in srgb,var(--brand) 30%,var(--border))!important;
  box-shadow:var(--shadow-md);
  transform:translateY(-1px)
}

.app-shell .selling-price-groups-card table.dataTable tbody td{
  display:block!important;
  min-width:0;
  height:auto!important;
  border:0!important;
  background:transparent!important
}

.app-shell .selling-price-groups-card table.dataTable tbody td:nth-child(1){
  padding:15px 15px 12px
}

.app-shell .selling-price-groups-card table.dataTable tbody td:nth-child(2){
  padding:12px 15px;
  color:var(--text-3);
  font-size:11px;
  line-height:1.5;
  border-top:1px solid var(--border-2)!important
}

.app-shell .selling-price-groups-card table.dataTable tbody td:nth-child(3){
  padding:10px 12px;
  border-top:1px solid var(--border-2)!important;
  background:var(--surface-2)!important
}

.app-shell .price-group-identity{
  display:flex;
  min-width:0;
  align-items:center;
  gap:11px
}

.app-shell .price-group-icon{
  display:inline-flex;
  width:40px;
  height:40px;
  flex:none;
  align-items:center;
  justify-content:center;
  border:1px solid color-mix(in srgb,var(--brand) 20%,var(--border));
  border-radius:10px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .price-group-heading{
  display:flex;
  min-width:0;
  flex-direction:column;
  align-items:flex-start;
  gap:5px
}

.app-shell .price-group-heading>strong{
  overflow:hidden;
  max-width:100%;
  color:var(--text);
  font-size:13.5px;
  font-weight:800;
  line-height:1.2;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .price-group-status{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:3px 7px;
  border-radius:999px;
  font-size:9px;
  font-weight:750;
  line-height:1
}

.app-shell .price-group-status i{
  width:5px;
  height:5px;
  border-radius:50%;
  background:currentColor
}

.app-shell .price-group-status.is-active{
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .price-group-status.is-inactive{
  background:var(--surface-3);
  color:var(--text-3)
}

.app-shell .price-group-actions{
  display:flex;
  align-items:center;
  gap:6px
}

.app-shell .price-group-actions .act{
  flex:none;
  background:var(--surface)
}

.app-shell .price-group-state-action{
  display:inline-flex;
  height:32px;
  align-items:center;
  justify-content:center;
  gap:6px;
  margin-left:auto;
  padding:0 10px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface);
  font:inherit;
  font-size:10px;
  font-weight:750;
  cursor:pointer
}

.app-shell .price-group-state-action.is-activate{
  border-color:color-mix(in srgb,var(--brand) 28%,var(--border));
  color:var(--brand-strong)
}

.app-shell .price-group-state-action.is-deactivate{
  border-color:color-mix(in srgb,var(--danger) 24%,var(--border));
  color:var(--danger)
}

.app-shell .price-group-state-action:hover{
  background:var(--surface-3)
}

.app-shell .selling-price-groups-card td.dataTables_empty{
  grid-column:1/-1;
  min-height:170px!important;
  padding:62px 20px!important;
  text-align:center;
  color:var(--text-3)
}

.app-shell .price-group-modal-dialog{
  width:min(590px,calc(100% - 24px));
  max-width:none
}

.app-shell .price-group-modal-content{
  overflow:hidden
}

.app-shell .price-group-modal-heading{
  display:flex;
  min-width:0;
  align-items:center;
  gap:11px
}

.app-shell .price-group-modal-heading p{
  overflow:hidden;
  margin:2px 0 0;
  color:var(--text-3);
  font-size:10.5px;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .price-group-modal-body{
  display:grid;
  gap:16px;
  padding:20px;
  background:var(--surface-2)
}

.app-shell .price-group-modal-body textarea.form-control{
  min-height:112px;
  resize:vertical
}

@media (max-width:1100px){
  .app-shell .selling-price-groups-card table.dataTable tbody{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}

@media (max-width:760px){
  .app-shell .price-group-purpose-strip{
    grid-template-columns:40px minmax(0,1fr)
  }

  .app-shell .price-group-purpose-tags{
    grid-column:1/-1;
    justify-content:flex-start
  }

  .app-shell .selling-price-groups-card table.dataTable tbody{
    grid-template-columns:1fr
  }
}

@media (max-width:480px){
  .app-shell .selling-price-groups-card .selling-price-group-grid-wrap{
    padding:10px
  }

  .app-shell .price-group-state-action span{
    display:none
  }

  .app-shell .price-group-state-action{
    width:32px;
    padding:0
  }
}

/* Units and category taxonomies */

.app-shell .units-page,.app-shell .taxonomies-page{
  padding-bottom:34px
}

.app-shell .units-table tbody td,.app-shell .taxonomy-table tbody td{
  vertical-align:middle
}

/* Device models: a checklist can hold a dozen points, which printed as one string made a
   row six lines tall. */

.app-shell .repair-checklist-cell{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  max-width:460px
}

.app-shell .repair-checklist-chip{
  display:inline-flex;
  max-width:210px;
  padding:3px 8px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--surface-2);
  color:var(--text-2);
  font-size:11px;
  font-weight:650;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}

.app-shell .repair-checklist-more{
  display:inline-flex;
  align-items:center;
  padding:3px 8px;
  border-radius:999px;
  background:var(--brand-weak);
  color:var(--brand-strong);
  font-size:11px;
  font-weight:800
}

.app-shell .repair-settings-row-actions .act.is-danger{
  border-color:color-mix(in srgb,var(--danger) 26%,var(--border));
  color:var(--danger)
}

.app-shell .repair-settings-row-actions .act.is-danger:hover{
  border-color:var(--danger);
  background:var(--danger-weak);
  color:var(--danger)
}

.app-shell .repair-settings-filter-row{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:12px;
  margin:0 0 13px
}

.app-shell .repair-settings-filter-row>[class*="col-"]{
  width:auto;
  padding:0
}

/* Settings forms: the markup is Bootstrap rows and columns, which this stack does not lay
   out, so every field stretched the full page width. Map the column classes onto a grid. */

.app-shell .repair-settings-form .row,.app-shell .settings-form .row{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:14px;
  margin:0 0 4px
}

.app-shell .repair-settings-form .row>[class*="col-"],.app-shell .settings-form .row>[class*="col-"]{
  width:auto;
  min-width:0;
  padding:0;
  float:none;
  grid-column:span 12
}

.app-shell .repair-settings-form .row>[class*="col-md-2"],.app-shell .repair-settings-form .row>[class*="col-sm-2"],.app-shell .settings-form .row>[class*="col-md-2"],.app-shell .settings-form .row>[class*="col-sm-2"]{
  grid-column:span 2
}

.app-shell .repair-settings-form .row>[class*="col-md-3"],.app-shell .repair-settings-form .row>[class*="col-sm-3"],.app-shell .settings-form .row>[class*="col-md-3"],.app-shell .settings-form .row>[class*="col-sm-3"]{
  grid-column:span 3
}

.app-shell .repair-settings-form .row>[class*="col-md-4"],.app-shell .repair-settings-form .row>[class*="col-sm-4"],.app-shell .settings-form .row>[class*="col-md-4"],.app-shell .settings-form .row>[class*="col-sm-4"]{
  grid-column:span 4
}

.app-shell .repair-settings-form .row>[class*="col-md-6"],.app-shell .repair-settings-form .row>[class*="col-sm-6"],.app-shell .settings-form .row>[class*="col-md-6"],.app-shell .settings-form .row>[class*="col-sm-6"]{
  grid-column:span 6
}

.app-shell .repair-settings-form .row>[class*="col-md-8"],.app-shell .repair-settings-form .row>[class*="col-sm-8"],.app-shell .settings-form .row>[class*="col-md-8"],.app-shell .settings-form .row>[class*="col-sm-8"]{
  grid-column:span 8
}

.app-shell .repair-settings-form .form-group,.app-shell .settings-form .form-group{
  margin:0 0 4px
}

/* Label and its help marker share a line; the marker used to sit on its own row. */

.app-shell .repair-settings-form .form-group>label,.app-shell .settings-form .form-group>label{
  display:inline-block;
  margin:0 5px 6px 0;
  color:var(--text-2);
  font-size:12.5px;
  font-weight:750
}

.app-shell .repair-settings-form .form-group>label+i.fa-info-circle,.app-shell .settings-form .form-group>label+i.fa-info-circle{
  margin:0 0 6px
}

.app-shell .repair-settings-form .help-block,.app-shell .repair-settings-form .form-group>small,.app-shell .settings-form .help-block,.app-shell .settings-form .form-group>small{
  display:block;
  margin:5px 0 0;
  color:var(--text-3);
  font-size:11.5px;
  line-height:1.5
}

.app-shell .repair-settings-form textarea.form-control,.app-shell .settings-form textarea.form-control{
  min-height:104px
}

.app-shell .repair-settings-form hr,.app-shell .settings-form hr{
  margin:16px 0;
  border:0;
  border-top:1px solid var(--border-2)
}

.app-shell .repair-settings-form-actions,.app-shell .settings-form-actions{
  display:flex;
  justify-content:flex-end;
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid var(--border-2)
}

.app-shell .repair-settings-fieldset,.app-shell .settings-fieldset{
  padding:16px 0 2px;
  border-top:1px solid var(--border-2)
}

.app-shell .repair-settings-fieldset:first-of-type,.app-shell .settings-fieldset:first-of-type{
  padding-top:2px;
  border-top:0
}

.app-shell .repair-settings-fieldset>header,.app-shell .settings-fieldset>header{
  display:flex;
  gap:10px;
  align-items:flex-start;
  margin-bottom:12px
}

.app-shell .repair-settings-fieldset>header h3,.app-shell .settings-fieldset>header h3{
  margin:0;
  color:var(--text);
  font-size:14px;
  font-weight:800;
  letter-spacing:-.01em
}

.app-shell .repair-settings-fieldset>header p,.app-shell .settings-fieldset>header p{
  margin:2px 0 0;
  color:var(--text-3);
  font-size:12px;
  line-height:1.5
}

/* Number fields showed browser spinners on some rows and not others. */

.app-shell .repair-settings-form input[type=number],.app-shell .settings-form input[type=number]{
  -moz-appearance:textfield;
  -webkit-appearance:textfield;
          appearance:textfield
}

.app-shell .repair-settings-form input[type=number]::-webkit-outer-spin-button,
.app-shell .repair-settings-form input[type=number]::-webkit-inner-spin-button,.app-shell .settings-form input[type=number]::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0
}

/* Live preview under the product configuration textarea (was an inline \3c style> with hard-coded greys). */

.app-shell .pc-settings-preview{
  margin-top:8px;
  max-height:320px;
  overflow-y:auto;
  padding:10px 12px;
  border:1px solid var(--border-2);
  border-radius:10px;
  background:var(--surface-2)
}

.app-shell .pc-settings-preview .pc-head{
  margin-bottom:6px;
  color:var(--text-3);
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em
}

.app-shell .pc-settings-preview .pc-item{
  padding:7px 0;
  border-bottom:1px dashed var(--border-2)
}

.app-shell .pc-settings-preview .pc-item:last-child{
  border-bottom:0
}

.app-shell .pc-settings-preview .pc-item-title{
  color:var(--text);
  font-size:12.5px;
  font-weight:800
}

.app-shell .pc-settings-preview .pc-sec-h{
  margin:5px 0 2px;
  padding-left:8px;
  border-left:3px solid var(--brand);
  color:var(--text-2);
  font-size:12px;
  font-weight:700
}

.app-shell .pc-settings-preview .pc-item-steps{
  margin:2px 0 3px;
  padding-left:20px;
  color:var(--text-2);
  font-size:12px
}

.app-shell .pc-settings-preview .pc-item-steps li{
  margin:2px 0
}

@media(max-width:1100px){
  .app-shell .repair-settings-form .row>[class*="col-md-3"],.app-shell .repair-settings-form .row>[class*="col-sm-3"],.app-shell .settings-form .row>[class*="col-md-3"],.app-shell .settings-form .row>[class*="col-sm-3"]{
    grid-column:span 4
  }
}

@media(max-width:760px){
  .app-shell .repair-settings-form .row>[class*="col-"],.app-shell .settings-form .row>[class*="col-"]{
    grid-column:span 12
  }
}

.app-shell .unit-identity,.app-shell .taxonomy-identity{
  display:flex;
  min-width:0;
  align-items:center;
  gap:10px
}

.app-shell .unit-identity>span,.app-shell .taxonomy-identity>span{
  display:inline-flex;
  width:34px;
  height:34px;
  flex:none;
  align-items:center;
  justify-content:center;
  border-radius:9px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .unit-identity>div{
  display:flex;
  min-width:0;
  flex-direction:column;
  gap:3px
}

.app-shell .unit-identity strong,.app-shell .taxonomy-identity strong{
  overflow:hidden;
  color:var(--text);
  font-size:12.5px;
  font-weight:750;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .unit-identity small{
  color:var(--text-3);
  font-size:9.5px
}

.app-shell .unit-short-code,.app-shell .taxonomy-code{
  display:inline-flex;
  padding:4px 8px;
  border:1px solid var(--border);
  border-radius:7px;
  background:var(--surface-2);
  color:var(--text-2);
  font-size:10.5px;
  font-weight:750
}

.app-shell .unit-decimal-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 8px;
  border-radius:999px;
  font-size:10px;
  font-weight:750
}

.app-shell .unit-decimal-badge i{
  width:6px;
  height:6px;
  border-radius:50%;
  background:currentColor
}

.app-shell .unit-decimal-badge.is-allowed{
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .unit-decimal-badge.is-whole{
  background:var(--surface-3);
  color:var(--text-3)
}

.app-shell .unit-row-actions,.app-shell .taxonomy-row-actions{
  justify-content:flex-end
}

.app-shell .taxonomy-identity.is-child{
  padding-left:20px
}

.app-shell .taxonomy-identity.is-child>span{
  background:var(--surface-3);
  color:var(--text-3)
}

.app-shell .taxonomy-identity small{
  margin-left:auto;
  padding:3px 7px;
  border-radius:999px;
  background:var(--info-weak);
  color:var(--info);
  font-size:9px;
  font-weight:750
}

/* One slot per template on a follow-up category: the message it sends to open a case, and the one
   it sends about a single task. Both states are the same control opening the same dialog, so they
   are one button and not a chip with a second button beside it — that pair wrapped onto a second
   line the moment a template name ran long, which is most of them.
   Linked and empty are told apart by shape before colour: a filled slot with a solid border and a
   real name, against a dashed outline with a plus. A column of dashed slots reads as work still to
   do at a glance, which is the question this screen is actually asked. */

.app-shell .taxonomy-template-slot{
  display:inline-flex;
  max-width:100%;
  height:30px;
  align-items:center;
  gap:7px;
  padding:0 11px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--surface);
  font:inherit;
  font-size:10.5px;
  font-weight:750;
  cursor:pointer;
  transition:background .12s ease,border-color .12s ease,color .12s ease
}

.app-shell .taxonomy-template-slot>svg{
  flex:none;
  width:14px;
  height:14px;
  stroke-width:2.1
}

/* The name is the only part that may run long, so it is the only part allowed to truncate — the
   icons stay put and the slot never wraps. The full name is on the button's title. */

.app-shell .taxonomy-template-slot>span{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .taxonomy-template-slot.is-linked{
  border-color:color-mix(in srgb,var(--telegram) 32%,var(--border));
  background:var(--telegram-weak);
  color:var(--telegram-strong)
}

.app-shell .taxonomy-template-slot.is-linked:hover{
  border-color:var(--telegram);
  background:var(--telegram);
  color:#fff
}

/* The pencil only says the name is editable; it fades up on hover rather than competing with it. */

.app-shell .taxonomy-template-slot__edit{
  flex:none;
  width:12px;
  height:12px;
  margin-left:1px;
  opacity:.5;
  stroke-width:2.1
}

.app-shell .taxonomy-template-slot.is-linked:hover .taxonomy-template-slot__edit{
  opacity:1
}

.app-shell .taxonomy-template-slot.is-empty{
  border-style:dashed;
  border-color:var(--border);
  background:transparent;
  color:var(--text-3);
  font-weight:700
}

.app-shell .taxonomy-template-slot.is-empty:hover{
  border-style:solid;
  border-color:var(--telegram);
  background:var(--telegram-weak);
  color:var(--telegram-strong)
}

.app-shell .taxonomies-page[data-taxonomy-type="product"] .category-catalogue-guide{
  display:grid;
  grid-template-columns:42px minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
  padding:13px 15px;
  border:1px solid color-mix(in srgb,var(--brand) 18%,var(--border));
  border-radius:12px;
  background:linear-gradient(110deg,color-mix(in srgb,var(--brand-weak) 62%,var(--surface)) 0%,var(--surface) 74%);
  box-shadow:var(--shadow-sm)
}

.app-shell .category-catalogue-guide-icon{
  display:inline-flex;
  width:42px;
  height:42px;
  align-items:center;
  justify-content:center;
  border-radius:11px;
  background:var(--surface);
  color:var(--brand-strong);
  box-shadow:var(--shadow-sm)
}

.app-shell .category-catalogue-guide strong{
  display:block;
  color:var(--text);
  font-size:12.5px;
  font-weight:800
}

.app-shell .category-catalogue-guide p{
  margin:3px 0 0;
  color:var(--text-3);
  font-size:10.5px;
  line-height:1.45
}

.app-shell .category-catalogue-legend{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:7px;
  flex-wrap:wrap
}

.app-shell .category-catalogue-legend span{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 8px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--surface);
  color:var(--text-2);
  font-size:9.5px;
  font-weight:750
}

.app-shell .category-catalogue-legend i{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--brand)
}

.app-shell .category-catalogue-legend .is-child i{
  background:var(--info)
}

.app-shell .taxonomies-page[data-taxonomy-type="product"] .taxonomies-list-card .data-table-content{
  background:var(--surface-2)
}

.app-shell .taxonomies-page[data-taxonomy-type="product"] .taxonomy-grid-wrap{
  padding:14px;
  overflow:visible
}

.app-shell .taxonomies-page[data-taxonomy-type="product"] table.dataTable.taxonomy-table{
  display:block!important;
  width:100%!important;
  border:0!important;
  background:transparent!important
}

.app-shell .taxonomies-page[data-taxonomy-type="product"] table.dataTable.taxonomy-table thead{
  display:none
}

.app-shell .taxonomies-page[data-taxonomy-type="product"] table.dataTable.taxonomy-table tbody{
  display:grid;
  width:100%;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px
}

.app-shell .taxonomies-page[data-taxonomy-type="product"] table.dataTable.taxonomy-table tbody tr{
  display:grid!important;
  min-width:0;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"identity code" "description description" "actions actions";
  align-content:start;
  border:1px solid var(--border)!important;
  border-radius:13px;
  background:var(--surface)!important;
  box-shadow:var(--shadow-sm);
  overflow:hidden;
  transition:border-color .16s,box-shadow .16s,transform .16s
}

.app-shell .taxonomies-page[data-taxonomy-type="product"] table.dataTable.taxonomy-table tbody tr:hover{
  border-color:color-mix(in srgb,var(--brand) 30%,var(--border))!important;
  box-shadow:var(--shadow-md);
  transform:translateY(-1px)
}

.app-shell .taxonomies-page[data-taxonomy-type="product"] table.dataTable.taxonomy-table tbody td{
  display:block!important;
  min-width:0;
  height:auto!important;
  border:0!important;
  background:transparent!important
}

.app-shell .taxonomies-page[data-taxonomy-type="product"] table.dataTable.taxonomy-table tbody td:nth-child(1){
  grid-area:identity;
  padding:15px 8px 12px 15px
}

.app-shell .taxonomies-page[data-taxonomy-type="product"] table.dataTable.taxonomy-table tbody td:nth-child(2){
  grid-area:code;
  padding:15px 15px 12px 8px;
  text-align:right
}

.app-shell .taxonomies-page[data-taxonomy-type="product"] table.dataTable.taxonomy-table tbody td:nth-child(3){
  grid-area:description;
  min-height:72px;
  padding:11px 15px 14px;
  border-top:1px solid var(--border-2)!important;
  color:var(--text-3);
  font-size:10.5px;
  line-height:1.5
}

.app-shell .taxonomies-page[data-taxonomy-type="product"] table.dataTable.taxonomy-table tbody td:nth-child(3):before{
  display:block;
  margin-bottom:5px;
  color:var(--text-3);
  font-size:8.5px;
  font-weight:850;
  letter-spacing:.55px;
  text-transform:uppercase;
  content:"Description"
}

.app-shell .taxonomies-page[data-taxonomy-type="product"] table.dataTable.taxonomy-table tbody td:nth-child(4){
  grid-area:actions;
  padding:9px 11px;
  border-top:1px solid var(--border-2)!important;
  background:var(--surface-2)!important
}

.app-shell .taxonomies-page[data-taxonomy-type="product"] .taxonomy-identity{
  display:grid;
  grid-template-columns:40px minmax(0,1fr);
  grid-template-areas:"icon title" "icon level";
  align-items:start;
  -moz-column-gap:10px;
       column-gap:10px;
  row-gap:3px
}

.app-shell .taxonomies-page[data-taxonomy-type="product"] .taxonomy-identity.is-child{
  padding-left:0
}

.app-shell .taxonomies-page[data-taxonomy-type="product"] .taxonomy-identity>span{
  grid-area:icon;
  width:40px;
  height:40px;
  border:1px solid color-mix(in srgb,var(--brand) 18%,var(--border));
  border-radius:11px
}

.app-shell .taxonomies-page[data-taxonomy-type="product"] .taxonomy-identity.is-child>span{
  border-color:color-mix(in srgb,var(--info) 18%,var(--border));
  background:var(--info-weak);
  color:var(--info)
}

.app-shell .taxonomies-page[data-taxonomy-type="product"] .taxonomy-identity strong{
  grid-area:title;
  min-width:0;
  padding-top:1px;
  font-size:13.5px;
  white-space:normal
}

.app-shell .taxonomies-page[data-taxonomy-type="product"] .taxonomy-identity small{
  grid-area:level;
  justify-self:start;
  margin:0;
  padding:3px 7px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .taxonomies-page[data-taxonomy-type="product"] .taxonomy-identity.is-child small{
  background:var(--info-weak);
  color:var(--info)
}

.app-shell .taxonomies-page[data-taxonomy-type="product"] .taxonomy-code{
  background:var(--surface);
  font-size:9.5px
}

.app-shell .taxonomies-page[data-taxonomy-type="product"] .taxonomy-row-actions{
  min-height:32px
}

.app-shell .taxonomies-page[data-taxonomy-type="product"] td.dataTables_empty{
  grid-column:1/-1;
  min-height:170px!important;
  padding:62px 20px!important;
  text-align:center;
  color:var(--text-3)
}

.app-shell .taxonomies-page[data-taxonomy-type="product"] table.dataTable.taxonomy-table tbody tr:has(td.dataTables_empty){
  grid-column:1/-1
}

@media (max-width:1100px){
  .app-shell .taxonomies-page[data-taxonomy-type="product"] table.dataTable.taxonomy-table tbody{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}

@media (max-width:720px){
  .app-shell .taxonomies-page[data-taxonomy-type="product"] .category-catalogue-guide{
    grid-template-columns:42px minmax(0,1fr)
  }

  .app-shell .category-catalogue-legend{
    grid-column:1/-1;
    justify-content:flex-start
  }

  .app-shell .taxonomies-page[data-taxonomy-type="product"] table.dataTable.taxonomy-table tbody{
    grid-template-columns:1fr
  }
}

@media (max-width:480px){
  .app-shell .taxonomies-page[data-taxonomy-type="product"] .taxonomy-grid-wrap{
    padding:10px
  }

  .app-shell .taxonomies-page[data-taxonomy-type="product"] table.dataTable.taxonomy-table tbody{
    gap:10px
  }
}

/* Brand directory */

.app-shell .brands-page,.app-shell .warranties-page{
  padding-bottom:34px
}

.app-shell .brand-directory-guide,.app-shell .warranty-coverage-guide{
  display:grid;
  grid-template-columns:42px minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
  padding:13px 15px;
  border:1px solid color-mix(in srgb,var(--brand) 18%,var(--border));
  border-radius:12px;
  background:linear-gradient(110deg,color-mix(in srgb,var(--brand-weak) 62%,var(--surface)) 0%,var(--surface) 74%);
  box-shadow:var(--shadow-sm)
}

.app-shell .brand-directory-guide-icon,.app-shell .warranty-coverage-guide-icon{
  display:inline-flex;
  width:42px;
  height:42px;
  align-items:center;
  justify-content:center;
  border-radius:11px;
  background:var(--surface);
  color:var(--brand-strong);
  box-shadow:var(--shadow-sm)
}

.app-shell .brand-directory-guide strong,.app-shell .warranty-coverage-guide strong{
  display:block;
  color:var(--text);
  font-size:12.5px;
  font-weight:800
}

.app-shell .brand-directory-guide p,.app-shell .warranty-coverage-guide p{
  margin:3px 0 0;
  color:var(--text-3);
  font-size:10.5px;
  line-height:1.45
}

.app-shell .brand-directory-tags{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:7px;
  flex-wrap:wrap
}

.app-shell .brand-directory-tags span{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 8px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--surface);
  color:var(--text-2);
  font-size:9.5px;
  font-weight:750
}

.app-shell .brand-catalogue-card .data-table-content,.app-shell .warranty-catalogue-card .data-table-content{
  background:var(--surface-2)
}

.app-shell .brand-card-grid-wrap,.app-shell .warranty-card-grid-wrap{
  padding:14px;
  overflow:visible
}

.app-shell table.dataTable.brand-catalogue-table,.app-shell table.dataTable.warranty-catalogue-table{
  display:block!important;
  width:100%!important;
  border:0!important;
  background:transparent!important
}

.app-shell table.dataTable.brand-catalogue-table thead,.app-shell table.dataTable.warranty-catalogue-table thead{
  display:none
}

.app-shell table.dataTable.brand-catalogue-table tbody,.app-shell table.dataTable.warranty-catalogue-table tbody{
  display:grid;
  width:100%;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px
}

.app-shell table.dataTable.brand-catalogue-table tbody tr,.app-shell table.dataTable.warranty-catalogue-table tbody tr{
  display:grid!important;
  min-width:0;
  border:1px solid var(--border)!important;
  border-radius:13px;
  background:var(--surface)!important;
  box-shadow:var(--shadow-sm);
  overflow:hidden;
  transition:border-color .16s,box-shadow .16s,transform .16s
}

.app-shell table.dataTable.brand-catalogue-table tbody tr{
  grid-template-rows:auto minmax(76px,1fr) auto
}

.app-shell table.dataTable.warranty-catalogue-table tbody tr{
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-areas:"identity duration" "description description" "actions actions"
}

.app-shell table.dataTable.brand-catalogue-table tbody tr:hover,.app-shell table.dataTable.warranty-catalogue-table tbody tr:hover{
  border-color:color-mix(in srgb,var(--brand) 30%,var(--border))!important;
  box-shadow:var(--shadow-md);
  transform:translateY(-1px)
}

.app-shell table.dataTable.brand-catalogue-table tbody td,.app-shell table.dataTable.warranty-catalogue-table tbody td{
  display:block!important;
  min-width:0;
  height:auto!important;
  border:0!important;
  background:transparent!important
}

.app-shell table.dataTable.brand-catalogue-table tbody td:nth-child(1){
  padding:15px 15px 12px
}

.app-shell table.dataTable.brand-catalogue-table tbody td:nth-child(2){
  padding:11px 15px 14px;
  border-top:1px solid var(--border-2)!important;
  color:var(--text-3);
  font-size:10.5px;
  line-height:1.5
}

.app-shell table.dataTable.brand-catalogue-table tbody td:nth-child(2):before,.app-shell table.dataTable.warranty-catalogue-table tbody td:nth-child(2):before{
  display:block;
  margin-bottom:5px;
  color:var(--text-3);
  font-size:8.5px;
  font-weight:850;
  letter-spacing:.55px;
  text-transform:uppercase;
  content:"Description"
}

.app-shell table.dataTable.brand-catalogue-table tbody td:nth-child(3){
  padding:9px 11px;
  border-top:1px solid var(--border-2)!important;
  background:var(--surface-2)!important
}

.app-shell .brand-card-identity,.app-shell .warranty-card-identity{
  display:flex;
  min-width:0;
  align-items:center;
  gap:11px
}

.app-shell .brand-card-identity>span,.app-shell .warranty-card-identity>span{
  display:inline-flex;
  width:42px;
  height:42px;
  flex:none;
  align-items:center;
  justify-content:center;
  border:1px solid color-mix(in srgb,var(--brand) 18%,var(--border));
  border-radius:11px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .brand-card-identity>div,.app-shell .warranty-card-identity>div{
  min-width:0
}

.app-shell .brand-card-identity strong,.app-shell .brand-card-identity small,.app-shell .warranty-card-identity strong,.app-shell .warranty-card-identity small{
  display:block
}

.app-shell .brand-card-identity strong,.app-shell .warranty-card-identity strong{
  overflow:hidden;
  color:var(--text);
  font-size:13.5px;
  font-weight:800;
  line-height:1.3;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .brand-card-identity small,.app-shell .warranty-card-identity small{
  margin-top:3px;
  color:var(--text-3);
  font-size:9.5px;
  font-weight:650
}

.app-shell .brand-row-actions,.app-shell .warranty-row-actions{
  min-height:32px
}

.app-shell .brand-catalogue-card td.dataTables_empty,.app-shell .warranty-catalogue-card td.dataTables_empty{
  grid-column:1/-1;
  min-height:170px!important;
  padding:62px 20px!important;
  text-align:center;
  color:var(--text-3)
}

.app-shell .brand-catalogue-card tbody tr:has(td.dataTables_empty),.app-shell .warranty-catalogue-card tbody tr:has(td.dataTables_empty){
  grid-column:1/-1
}

/* Warranty coverage cards */

.app-shell .warranty-coverage-guide{
  border-color:color-mix(in srgb,var(--info) 20%,var(--border));
  background:linear-gradient(110deg,color-mix(in srgb,var(--info-weak) 62%,var(--surface)) 0%,var(--surface) 74%)
}

.app-shell .warranty-coverage-guide-icon{
  color:var(--info)
}

.app-shell .warranty-coverage-scale{
  display:grid;
  width:170px;
  grid-template-columns:repeat(3,1fr);
  align-items:center;
  gap:4px
}

.app-shell .warranty-coverage-scale i{
  height:5px;
  border-radius:999px;
  background:var(--info-weak)
}

.app-shell .warranty-coverage-scale i:nth-child(2){
  background:color-mix(in srgb,var(--info) 45%,var(--info-weak))
}

.app-shell .warranty-coverage-scale i:nth-child(3){
  background:var(--info)
}

.app-shell .warranty-coverage-scale span{
  grid-column:1/-1;
  margin-top:3px;
  color:var(--text-3);
  font-size:8.5px;
  font-weight:750;
  text-align:right;
  text-transform:uppercase;
  letter-spacing:.45px
}

.app-shell table.dataTable.warranty-catalogue-table tbody td:nth-child(1){
  grid-area:identity;
  padding:15px 8px 12px 15px
}

.app-shell table.dataTable.warranty-catalogue-table tbody td:nth-child(2){
  grid-area:description;
  min-height:72px;
  padding:11px 15px 14px;
  border-top:1px solid var(--border-2)!important;
  color:var(--text-3);
  font-size:10.5px;
  line-height:1.5
}

.app-shell table.dataTable.warranty-catalogue-table tbody td:nth-child(3){
  grid-area:duration;
  padding:15px 15px 12px 8px
}

.app-shell table.dataTable.warranty-catalogue-table tbody td:nth-child(4){
  grid-area:actions;
  padding:9px 11px;
  border-top:1px solid var(--border-2)!important;
  background:var(--surface-2)!important
}

.app-shell .warranty-card-identity>span{
  border-color:color-mix(in srgb,var(--info) 18%,var(--border));
  background:var(--info-weak);
  color:var(--info)
}

.app-shell .warranty-duration{
  display:flex;
  align-items:baseline;
  justify-content:flex-end;
  gap:4px;
  padding:6px 9px;
  border:1px solid color-mix(in srgb,var(--info) 18%,var(--border));
  border-radius:9px;
  background:var(--info-weak);
  color:var(--info)
}

.app-shell .warranty-duration strong{
  font-size:16px;
  font-weight:850;
  line-height:1
}

.app-shell .warranty-duration span{
  font-size:9px;
  font-weight:750;
  text-transform:uppercase
}

/* Quick product workspace */

.app-shell .quick-product-modal-dialog{
  width:min(1080px,calc(100% - 24px));
  max-width:none;
  margin:14px auto
}

.app-shell .quick-product-modal-content{
  display:block;
  height:auto;
  max-height:none;
  overflow:hidden
}

.app-shell .quick-product-modal-content>form{
  display:block;
  overflow:visible
}

.app-shell .quick-product-modal-header{
  min-height:88px;
  flex:none;
  padding:16px 20px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--brand-weak) 62%,var(--surface)) 0%,var(--surface) 72%)
}

.app-shell .quick-product-modal-heading{
  display:flex;
  min-width:0;
  align-items:center;
  gap:12px
}

.app-shell .quick-product-modal-icon{
  display:inline-flex;
  width:46px;
  height:46px;
  flex:none;
  align-items:center;
  justify-content:center;
  border:1px solid color-mix(in srgb,var(--brand) 20%,var(--border));
  border-radius:12px;
  background:var(--surface);
  color:var(--brand-strong);
  box-shadow:var(--shadow-sm)
}

.app-shell .quick-product-modal-eyebrow{
  display:block;
  margin-bottom:3px;
  color:var(--brand-strong);
  font-size:9px;
  font-weight:850;
  letter-spacing:.7px;
  text-transform:uppercase
}

.app-shell .quick-product-modal-heading .modal-title{
  color:var(--text);
  font-size:18px;
  font-weight:850;
  letter-spacing:-.25px
}

.app-shell .quick-product-modal-heading p{
  margin:3px 0 0;
  color:var(--text-3);
  font-size:10.5px;
  line-height:1.4
}

.app-shell .quick-product-modal-body{
  display:grid;
  gap:14px;
  overflow:visible;
  padding:15px;
  background:var(--surface-2)
}

.app-shell .quick-product-section{
  min-width:0;
  overflow:visible;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

.app-shell .quick-product-section-head{
  display:grid;
  grid-template-columns:30px 36px minmax(0,1fr);
  align-items:center;
  gap:9px;
  padding:11px 14px;
  border-bottom:1px solid var(--border-2);
  border-radius:12px 12px 0 0;
  background:var(--surface-2)
}

.app-shell .quick-product-section-step{
  display:inline-flex;
  width:30px;
  height:22px;
  align-items:center;
  justify-content:center;
  border-radius:7px;
  background:var(--surface);
  color:var(--text-3);
  font-size:9px;
  font-weight:850;
  letter-spacing:.4px
}

.app-shell .quick-product-section-icon{
  display:inline-flex;
  width:34px;
  height:34px;
  align-items:center;
  justify-content:center;
  border-radius:9px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .quick-product-section-icon.is-blue{
  background:var(--blue-weak);
  color:var(--blue)
}

.app-shell .quick-product-section-icon.is-violet{
  background:var(--violet-weak);
  color:var(--violet)
}

.app-shell .quick-product-section-icon.is-warn{
  background:var(--warn-weak);
  color:var(--warn)
}

.app-shell .quick-product-section-head h5{
  margin:0;
  color:var(--text);
  font-size:12.5px;
  font-weight:850
}

.app-shell .quick-product-section-head p{
  margin:2px 0 0;
  color:var(--text-3);
  font-size:10px;
  line-height:1.35
}

.app-shell .quick-product-grid{
  display:grid;
  min-width:0;
  gap:14px;
  padding:15px
}

.app-shell .quick-product-grid-3{
  grid-template-columns:repeat(3,minmax(0,1fr))
}

.app-shell .quick-product-grid-2{
  grid-template-columns:repeat(2,minmax(0,1fr));
  padding:14px
}

.app-shell .quick-product-field{
  min-width:0
}

.app-shell .quick-product-field-wide{
  grid-column:span 2
}

.app-shell .quick-product-field>label,.app-shell .quick-product-label-row>label{
  display:block;
  margin:0 0 6px;
  color:var(--text-2);
  font-size:11px;
  font-weight:750
}

.app-shell .quick-product-label-row{
  display:flex;
  min-height:22px;
  align-items:flex-start;
  gap:5px
}

.app-shell .quick-product-label-row>label{
  margin-bottom:6px
}

.app-shell .quick-product-field .form-control,.app-shell .quick-product-field .select2-container{
  width:100%!important
}

.app-shell .quick-product-field .select2-container .select2-selection{
  min-height:42px
}

.app-shell .quick-product-field .select2-container--default .select2-selection--multiple{
  padding:3px 8px
}

.app-shell .quick-product-split-control{
  display:grid;
  grid-template-columns:minmax(90px,.8fr) minmax(120px,1.2fr)
}

.app-shell .quick-product-split-control>.form-control:first-child{
  border-radius:8px 0 0 8px
}

.app-shell .quick-product-split-control>.select2-container .select2-selection{
  border-left:0;
  border-radius:0 8px 8px 0
}

.app-shell .quick-product-toggle{
  display:flex;
  min-height:72px;
  align-items:flex-start;
  gap:10px;
  padding:12px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface-2);
  cursor:pointer
}

.app-shell .quick-product-toggle .icheckbox_square-blue{
  margin-top:1px;
  flex:none
}

.app-shell .quick-product-toggle>span{
  min-width:0
}

.app-shell .quick-product-toggle strong,.app-shell .quick-product-toggle small{
  display:block
}

.app-shell .quick-product-toggle strong{
  color:var(--text);
  font-size:11.5px;
  font-weight:800;
  line-height:1.35
}

.app-shell .quick-product-toggle small{
  margin-top:4px;
  color:var(--text-3);
  font-size:9.5px;
  line-height:1.4
}

.app-shell .quick-product-content-grid{
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(280px,.55fr);
  gap:14px;
  padding:15px
}

.app-shell .quick-product-description-field textarea{
  min-height:150px;
  resize:vertical
}

.app-shell .quick-product-description-field .tox-tinymce{
  height:210px!important;
  max-height:210px;
  border-color:var(--border);
  border-radius:9px
}

.app-shell .quick-product-description-field .tox-edit-area iframe{
  height:145px!important
}

.app-shell .quick-product-advanced{
  align-self:start;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface)
}

.app-shell .quick-product-advanced summary{
  display:flex;
  min-height:44px;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:0 12px;
  color:var(--text-2);
  font-size:11px;
  font-weight:800;
  list-style:none;
  cursor:pointer
}

.app-shell .quick-product-advanced summary::-webkit-details-marker{
  display:none
}

.app-shell .quick-product-advanced summary>span{
  display:flex;
  align-items:center;
  gap:8px
}

.app-shell .quick-product-advanced[open] summary{
  border-bottom:1px solid var(--border-2);
  background:var(--surface-2)
}

.app-shell .quick-product-advanced[open] summary>svg{
  transform:rotate(180deg)
}

.app-shell .quick-product-advanced .quick-product-grid{
  grid-template-columns:1fr
}

.app-shell .quick-product-pricing-body{
  padding:15px
}

.app-shell .quick-product-pricing .add-product-price-table>div{
  grid-template-columns:repeat(3,minmax(0,1fr))
}

.app-shell .quick-product-pricing .add-product-price-table section{
  padding:14px
}

.app-shell .quick-product-pricing .add-product-price-table section>div:first-child{
  min-height:60px
}

.app-shell .quick-product-opening-stock{
  padding:15px
}

.app-shell .quick-product-modal-footer{
  position:static;
  min-height:64px;
  padding:10px 15px;
  border-top:1px solid var(--border-2);
  background:var(--surface)
}

.app-shell .quick-product-modal-footer>p{
  display:flex;
  align-items:center;
  gap:7px;
  margin:0;
  color:var(--text-3);
  font-size:9.5px
}

.app-shell .quick-product-modal-footer>p svg{
  color:var(--blue)
}

.app-shell .quick-product-modal-footer>div{
  display:flex;
  align-items:center;
  gap:8px
}

.app-shell .quick-product-modal-footer .btn-primary,.app-shell .quick-product-modal-footer .btn-ghost{
  min-width:98px;
  justify-content:center
}

.app-shell .quick_add_product_modal .select2-dropdown{
  border-color:color-mix(in srgb,var(--brand) 36%,var(--border));
  border-radius:9px;
  box-shadow:0 16px 32px -16px rgba(16,32,24,.4)
}

.app-shell .quick_add_product_modal .select2-search--dropdown{
  padding:8px
}

.app-shell .quick_add_product_modal .select2-search__field{
  height:38px;
  border-color:var(--border)!important;
  border-radius:7px
}

@media (max-width:900px){
  .app-shell .quick-product-grid-3{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

  .app-shell .quick-product-content-grid{
    grid-template-columns:1fr
  }

  .app-shell .quick-product-pricing .add-product-price-table>div{
    grid-template-columns:1fr
  }

  .app-shell .quick-product-pricing .add-product-price-table section{
    border-bottom:1px solid var(--border-2)
  }
}

@media (max-width:620px){
  .app-shell .quick-product-modal-dialog{
    width:calc(100% - 12px);
    margin:6px auto
  }

  .app-shell .quick-product-modal-content{
    height:auto;
    max-height:none
  }

  .app-shell .quick-product-modal-header{
    min-height:76px;
    padding:12px 14px
  }

  .app-shell .quick-product-modal-icon{
    width:40px;
    height:40px
  }

  .app-shell .quick-product-modal-heading p,.app-shell .quick-product-modal-eyebrow{
    display:none
  }

  .app-shell .quick-product-modal-heading .modal-title{
    font-size:16px
  }

  .app-shell .quick-product-modal-body{
    gap:10px;
    padding:10px
  }

  .app-shell .quick-product-section-head{
    grid-template-columns:28px 34px minmax(0,1fr);
    padding:10px
  }

  .app-shell .quick-product-grid-3,.app-shell .quick-product-grid-2{
    grid-template-columns:1fr
  }

  .app-shell .quick-product-field-wide{
    grid-column:span 1
  }

  .app-shell .quick-product-grid,.app-shell .quick-product-content-grid,.app-shell .quick-product-pricing-body{
    gap:12px;
    padding:12px
  }

  .app-shell .quick-product-modal-footer>p{
    display:none
  }

  .app-shell .quick-product-modal-footer{
    justify-content:stretch
  }

  .app-shell .quick-product-modal-footer>div{
    width:100%
  }

  .app-shell .quick-product-modal-footer .btn-primary,.app-shell .quick-product-modal-footer .btn-ghost{
    flex:1
  }
}

/* Brand and warranty form workspaces */

.app-shell .brand-modal-dialog,.app-shell .warranty-modal-dialog{
  width:min(680px,calc(100% - 24px));
  max-width:none
}

.app-shell .brand-modal-content,.app-shell .warranty-modal-content{
  overflow:hidden
}

.app-shell .brand-modal-header,.app-shell .warranty-modal-header{
  min-height:94px;
  padding:18px 20px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--brand-weak) 62%,var(--surface)) 0%,var(--surface) 72%)
}

.app-shell .warranty-modal-header{
  background:linear-gradient(135deg,color-mix(in srgb,var(--info-weak) 62%,var(--surface)) 0%,var(--surface) 72%)
}

.app-shell .brand-modal-heading,.app-shell .warranty-modal-heading{
  display:flex;
  min-width:0;
  align-items:center;
  gap:12px
}

.app-shell .brand-modal-icon,.app-shell .warranty-modal-icon{
  display:inline-flex;
  width:46px;
  height:46px;
  flex:none;
  align-items:center;
  justify-content:center;
  border:1px solid color-mix(in srgb,var(--brand) 20%,var(--border));
  border-radius:12px;
  background:var(--surface);
  color:var(--brand-strong);
  box-shadow:var(--shadow-sm)
}

.app-shell .brand-modal-icon.is-edit{
  color:var(--info)
}

.app-shell .warranty-modal-icon{
  border-color:color-mix(in srgb,var(--info) 20%,var(--border));
  color:var(--info)
}

.app-shell .brand-modal-eyebrow,.app-shell .warranty-modal-eyebrow{
  display:block;
  margin-bottom:3px;
  color:var(--brand-strong);
  font-size:8.5px;
  font-weight:850;
  letter-spacing:.65px;
  text-transform:uppercase
}

.app-shell .warranty-modal-eyebrow{
  color:var(--info)
}

.app-shell .brand-modal-heading p,.app-shell .warranty-modal-heading p{
  margin:3px 0 0;
  color:var(--text-3);
  font-size:10.5px;
  line-height:1.4
}

.app-shell .brand-modal-body,.app-shell .warranty-modal-body{
  display:grid;
  gap:13px;
  padding:15px;
  background:var(--surface-2)
}

.app-shell .brand-form-section,.app-shell .warranty-form-section,.app-shell .warranty-period-section{
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

.app-shell .brand-form-section-head,.app-shell .warranty-form-section-head,.app-shell .warranty-period-heading{
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 13px;
  border-bottom:1px solid var(--border-2);
  background:var(--surface-2)
}

.app-shell .brand-form-section-head>span,.app-shell .warranty-form-section-head>span,.app-shell .warranty-period-heading>span{
  display:inline-flex;
  width:34px;
  height:34px;
  flex:none;
  align-items:center;
  justify-content:center;
  border-radius:9px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .warranty-form-section-head>span,.app-shell .warranty-period-heading>span{
  background:var(--info-weak);
  color:var(--info)
}

.app-shell .brand-form-section-head strong,.app-shell .warranty-form-section-head strong,.app-shell .warranty-period-heading strong{
  display:block;
  color:var(--text);
  font-size:11.5px;
  font-weight:800
}

.app-shell .brand-form-section-head p,.app-shell .warranty-form-section-head p,.app-shell .warranty-period-heading p{
  margin:2px 0 0;
  color:var(--text-3);
  font-size:9.5px
}

.app-shell .brand-form-fields,.app-shell .warranty-form-fields{
  display:grid;
  gap:14px;
  padding:14px
}

.app-shell .brand-form-fields textarea.form-control,.app-shell .warranty-form-fields textarea.form-control{
  min-height:92px;
  resize:vertical
}

.app-shell .brand-repair-option{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:12px 13px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface);
  cursor:pointer
}

.app-shell .brand-repair-option strong,.app-shell .brand-repair-option small{
  display:block
}

.app-shell .brand-repair-option strong{
  color:var(--text);
  font-size:11.5px;
  font-weight:800
}

.app-shell .brand-repair-option small{
  margin-top:2px;
  color:var(--text-3);
  font-size:9.5px;
  line-height:1.4
}

.app-shell .warranty-period-fields{
  display:grid;
  grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);
  gap:12px;
  padding:14px
}

.app-shell .brand-modal-footer,.app-shell .warranty-modal-footer{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  padding:12px 15px
}

@media (max-width:1100px){
  .app-shell table.dataTable.brand-catalogue-table tbody,.app-shell table.dataTable.warranty-catalogue-table tbody{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}

@media (max-width:720px){
  .app-shell .brand-directory-guide,.app-shell .warranty-coverage-guide{
    grid-template-columns:42px minmax(0,1fr)
  }

  .app-shell .brand-directory-tags,.app-shell .warranty-coverage-scale{
    grid-column:1/-1;
    justify-content:flex-start
  }

  .app-shell table.dataTable.brand-catalogue-table tbody,.app-shell table.dataTable.warranty-catalogue-table tbody{
    grid-template-columns:1fr
  }
}

@media (max-width:480px){
  .app-shell .brand-card-grid-wrap,.app-shell .warranty-card-grid-wrap{
    padding:10px
  }

  .app-shell .warranty-period-fields{
    grid-template-columns:1fr
  }
}

.app-shell .taxonomy-modal-dialog{
  width:min(780px,calc(100% - 24px));
  max-width:none
}

.app-shell .taxonomy-modal-content{
  overflow:hidden
}

.app-shell .taxonomy-modal-heading{
  display:flex;
  min-width:0;
  align-items:center;
  gap:11px
}

.app-shell .taxonomy-modal-heading p{
  margin:2px 0 0;
  color:var(--text-3);
  font-size:10.5px
}

.app-shell .taxonomy-modal-body{
  display:grid;
  gap:16px;
  padding:20px;
  background:var(--surface-2)
}

.app-shell .taxonomy-modal-body textarea.form-control{
  min-height:105px;
  resize:vertical
}

.app-shell .taxonomy-parent-toggle{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:12px;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface);
  cursor:pointer
}

.app-shell .taxonomy-parent-toggle input{
  width:18px;
  height:18px;
  margin-top:1px
}

.app-shell .taxonomy-parent-toggle strong,.app-shell .taxonomy-parent-toggle small{
  display:block
}

.app-shell .taxonomy-parent-toggle strong{
  color:var(--text);
  font-size:11.5px;
  font-weight:750
}

.app-shell .taxonomy-parent-toggle small{
  margin-top:2px;
  color:var(--text-3);
  font-size:10px
}

.app-shell .taxonomy-builder-header{
  position:relative;
  min-height:104px;
  padding:20px 22px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--brand-weak) 58%,var(--surface)) 0%,var(--surface) 68%)
}

.app-shell .taxonomy-builder-header:after{
  position:absolute;
  right:70px;
  bottom:0;
  width:130px;
  height:74px;
  background:radial-gradient(circle at center,color-mix(in srgb,var(--brand) 10%,transparent) 0 2px,transparent 3px);
  background-size:12px 12px;
  content:"";
  opacity:.6;
  pointer-events:none
}

.app-shell .taxonomy-modal-heading{
  position:relative;
  z-index:1
}

.app-shell .taxonomy-modal-hero-icon{
  display:inline-flex;
  width:48px;
  height:48px;
  flex:none;
  align-items:center;
  justify-content:center;
  border:1px solid color-mix(in srgb,var(--brand) 20%,var(--border));
  border-radius:13px;
  background:var(--brand-weak);
  color:var(--brand-strong);
  box-shadow:var(--shadow-sm)
}

.app-shell .taxonomy-modal-hero-icon.is-edit{
  border-color:color-mix(in srgb,var(--info) 24%,var(--border));
  background:var(--info-weak);
  color:var(--info)
}

.app-shell .taxonomy-modal-eyebrow{
  display:block;
  margin-bottom:3px;
  color:var(--brand-strong);
  font-size:9px;
  font-weight:850;
  letter-spacing:.65px;
  text-transform:uppercase
}

.app-shell .taxonomy-builder-header .modal-title{
  font-size:18px;
  letter-spacing:-.2px
}

.app-shell .taxonomy-builder-header .taxonomy-modal-heading p{
  max-width:510px;
  margin-top:4px;
  font-size:11px;
  line-height:1.45;
  white-space:normal
}

.app-shell .taxonomy-builder-body{
  display:grid;
  gap:14px;
  padding:16px;
  background:var(--surface-2)
}

.app-shell .taxonomy-builder-section{
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

.app-shell .taxonomy-builder-section-head{
  display:grid;
  grid-template-columns:30px 36px minmax(0,1fr);
  align-items:center;
  gap:9px;
  padding:12px 14px;
  border-bottom:1px solid var(--border-2);
  background:var(--surface-2)
}

.app-shell .taxonomy-builder-step{
  display:inline-flex;
  width:30px;
  height:22px;
  align-items:center;
  justify-content:center;
  border-radius:7px;
  background:var(--surface);
  color:var(--text-3);
  font-size:9px;
  font-weight:850;
  letter-spacing:.4px
}

.app-shell .taxonomy-builder-section-icon{
  display:inline-flex;
  width:34px;
  height:34px;
  align-items:center;
  justify-content:center;
  border-radius:9px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .taxonomy-builder-section-head h5{
  margin:0;
  color:var(--text);
  font-size:12.5px;
  font-weight:800
}

.app-shell .taxonomy-builder-section-head p{
  margin:2px 0 0;
  color:var(--text-3);
  font-size:10px;
  line-height:1.35
}

.app-shell .taxonomy-details-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:15px;
  padding:15px
}

.app-shell .taxonomy-description-field{
  grid-column:1/-1
}

.app-shell .taxonomy-field-hint{
  margin:5px 0 0;
  color:var(--text-3);
  font-size:9.5px;
  line-height:1.4
}

.app-shell .taxonomy-details-grid textarea.form-control{
  min-height:90px
}

.app-shell .taxonomy-level-input{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  opacity:0;
  pointer-events:none
}

.app-shell .taxonomy-level-options{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  padding:14px 14px 10px
}

.app-shell .taxonomy-level-option{
  display:grid;
  min-width:0;
  grid-template-columns:38px minmax(0,1fr) 22px;
  align-items:center;
  gap:10px;
  padding:11px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface);
  color:var(--text-2);
  font:inherit;
  text-align:left;
  cursor:pointer;
  transition:border-color .15s,background .15s,box-shadow .15s
}

.app-shell .taxonomy-level-option>span:first-child{
  display:inline-flex;
  width:38px;
  height:38px;
  align-items:center;
  justify-content:center;
  border-radius:9px;
  background:var(--surface-3);
  color:var(--text-3)
}

.app-shell .taxonomy-level-option strong,.app-shell .taxonomy-level-option small{
  display:block
}

.app-shell .taxonomy-level-option strong{
  color:var(--text);
  font-size:11.5px;
  font-weight:800
}

.app-shell .taxonomy-level-option small{
  margin-top:2px;
  color:var(--text-3);
  font-size:9.5px;
  line-height:1.35
}

.app-shell .taxonomy-level-option>i{
  display:none;
  width:20px;
  height:20px;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:var(--brand);
  color:#fff
}

.app-shell .taxonomy-level-option.is-active{
  border-color:color-mix(in srgb,var(--brand) 46%,var(--border));
  background:var(--brand-weak);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 9%,transparent)
}

.app-shell .taxonomy-level-option.is-active>span:first-child{
  background:var(--surface);
  color:var(--brand-strong)
}

.app-shell .taxonomy-level-option.is-active>i{
  display:inline-flex
}

.app-shell .taxonomy-parent-picker{
  position:relative;
  margin:0 14px 14px;
  padding:13px 13px 13px 44px;
  border:1px solid color-mix(in srgb,var(--brand) 24%,var(--border));
  border-radius:10px;
  background:color-mix(in srgb,var(--brand-weak) 42%,var(--surface))
}

.app-shell .taxonomy-parent-connector{
  position:absolute;
  top:0;
  bottom:0;
  left:19px;
  width:13px;
  border-bottom:2px solid color-mix(in srgb,var(--brand) 34%,var(--border));
  border-left:2px solid color-mix(in srgb,var(--brand) 34%,var(--border));
  transform:translateY(-50%)
}

.app-shell .taxonomy-builder-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:12px 16px
}

.app-shell .taxonomy-builder-footer>span{
  display:flex;
  align-items:center;
  gap:7px;
  color:var(--text-3);
  font-size:9.5px
}

.app-shell .taxonomy-builder-footer>span svg{
  color:var(--info)
}

.app-shell .taxonomy-builder-footer>div{
  display:flex;
  align-items:center;
  gap:8px
}

/*
 * The category builder on a phone.
 *
 * The save button carries the taxonomy's own name — "Create Category name", "Create Brand" — so
 * how long the label is depends on what is being created. Two equal columns gave it about 150px,
 * its label wrapped to three lines, and .btn-primary is 42px tall and no taller: the words were
 * drawn outside the button they belonged to. The columns are sized to what is in them now, and a
 * label that still wraps makes its button taller instead of spilling out of it.
 *
 * The rest is the same scale as the other phone forms: a hero header written at 104px tall with a
 * 48px icon, 20px of body padding and 15px between fields is a desktop dialog shrunk to fit.
 */

@media (max-width:620px){
  .app-shell .taxonomy-modal-dialog{
    width:calc(100% - 4px);
    margin:6px auto
  }

  .app-shell .taxonomy-builder-header{
    min-height:0;
    padding:13px
  }

  .app-shell .taxonomy-builder-header:after{
    display:none
  }

  .app-shell .taxonomy-modal-heading{
    gap:9px
  }

  .app-shell .taxonomy-modal-hero-icon{
    width:38px;
    height:38px;
    border-radius:11px
  }

  .app-shell .taxonomy-modal-hero-icon svg{
    width:17px;
    height:17px
  }

  .app-shell .taxonomy-builder-header .modal-title{
    font-size:15.5px
  }

  .app-shell .taxonomy-builder-body{
    gap:10px;
    padding:11px
  }

  .app-shell .taxonomy-builder-section-head{
    grid-template-columns:26px 30px minmax(0,1fr);
    gap:8px;
    padding:10px 11px
  }

  .app-shell .taxonomy-builder-step{
    width:26px
  }

  .app-shell .taxonomy-builder-section-icon{
    width:30px;
    height:30px
  }

  .app-shell .taxonomy-builder-section-icon svg{
    width:16px;
    height:16px
  }

  .app-shell .taxonomy-details-grid,.app-shell .taxonomy-level-options{
    grid-template-columns:1fr
  }

  .app-shell .taxonomy-details-grid{
    gap:10px;
    padding:11px
  }

  .app-shell .taxonomy-details-grid textarea.form-control{
    min-height:72px
  }

  .app-shell .taxonomy-modal-body textarea.form-control{
    min-height:72px
  }

  .app-shell .taxonomy-level-options{
    gap:8px;
    padding:11px 11px 8px
  }

  .app-shell .taxonomy-level-option{
    padding:10px
  }

  .app-shell .taxonomy-parent-picker{
    margin:0 11px 11px
  }

  .app-shell .taxonomy-builder-footer{
    align-items:stretch;
    flex-direction:column;
    gap:9px;
    padding:10px 11px calc(10px + env(safe-area-inset-bottom))
  }

  /* Close is one word; the other button's width is whatever its own label needs. */

  .app-shell .taxonomy-builder-footer>div{
    display:grid;
    grid-template-columns:minmax(84px,auto) minmax(0,1fr);
    gap:8px
  }

  .app-shell .taxonomy-builder-footer .btn-ghost,
  .app-shell .taxonomy-builder-footer .btn-primary{
    width:100%;
    height:auto;
    min-height:42px;
    padding:8px 12px;
    justify-content:center;
    line-height:1.25;
    white-space:normal;
    text-align:center
  }

  .app-shell .taxonomy-builder-footer .form-submit-default{
    flex-wrap:wrap
  }
}

/* Purchase requisitions: request pipeline */

.app-shell .purchase-requisition-page,.app-shell .purchase-requisition-create-page{
  padding-bottom:34px
}

.app-shell .pr-workflow-guide{
  display:grid;
  grid-template-columns:minmax(230px,.62fr) minmax(540px,1.38fr);
  align-items:stretch;
  gap:0;
  margin-bottom:14px;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

.app-shell .pr-workflow-intro{
  position:relative;
  display:flex;
  min-width:0;
  align-items:center;
  gap:12px;
  padding:16px 18px;
  border-right:1px solid var(--border);
  background:linear-gradient(130deg,color-mix(in srgb,var(--brand-weak) 72%,var(--surface)) 0%,var(--surface) 100%)
}

.app-shell .pr-workflow-intro:before{
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  width:4px;
  background:var(--brand);
  content:""
}

.app-shell .pr-workflow-intro>span{
  display:inline-flex;
  width:44px;
  height:44px;
  flex:none;
  align-items:center;
  justify-content:center;
  border:1px solid color-mix(in srgb,var(--brand) 18%,var(--border));
  border-radius:12px;
  background:var(--surface);
  color:var(--brand-strong);
  box-shadow:var(--shadow-sm)
}

.app-shell .pr-workflow-intro>div{
  min-width:0
}

.app-shell .pr-workflow-intro small{
  display:block;
  margin-bottom:3px;
  color:var(--brand-strong);
  font-size:8px;
  font-weight:850;
  letter-spacing:.12em
}

.app-shell .pr-workflow-intro strong{
  display:block;
  color:var(--text);
  font-size:12.5px;
  font-weight:850
}

.app-shell .pr-workflow-intro p{
  margin:3px 0 0;
  color:var(--text-3);
  font-size:9.5px;
  line-height:1.4
}

.app-shell .pr-workflow-clear{
  position:absolute;
  right:10px;
  bottom:7px;
  padding:2px 6px;
  border:0;
  background:transparent;
  color:var(--brand-strong);
  font:inherit;
  font-size:8.5px;
  font-weight:800;
  cursor:pointer
}

.app-shell .pr-workflow-clear:hover{
  text-decoration:underline
}

.app-shell .pr-workflow-steps{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  padding:10px;
  background:var(--surface-2)
}

.app-shell .pr-workflow-steps>button{
  position:relative;
  display:flex;
  min-width:0;
  align-items:center;
  gap:10px;
  padding:11px 12px;
  border:1px solid var(--border);
  border-radius:11px;
  background:var(--surface);
  color:var(--text-2);
  font:inherit;
  text-align:left;
  cursor:pointer;
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease,background .18s ease
}

.app-shell .pr-workflow-steps>button:hover{
  border-color:color-mix(in srgb,var(--brand) 30%,var(--border));
  box-shadow:var(--shadow-sm);
  transform:translateY(-1px)
}

.app-shell .pr-workflow-steps>button:focus-visible{
  outline:2px solid color-mix(in srgb,var(--brand) 60%,transparent);
  outline-offset:2px
}

.app-shell .pr-workflow-steps i{
  display:inline-flex;
  width:30px;
  height:30px;
  flex:none;
  align-items:center;
  justify-content:center;
  border-radius:9px;
  background:var(--surface-3);
  font-size:9px;
  font-style:normal;
  font-weight:900;
  letter-spacing:.04em;
  transition:background .18s ease,color .18s ease
}

.app-shell .pr-workflow-steps span,.app-shell .pr-workflow-steps b,.app-shell .pr-workflow-steps small{
  display:block;
  min-width:0
}

.app-shell .pr-workflow-steps b{
  color:var(--text);
  font-size:10.5px;
  font-weight:800
}

.app-shell .pr-workflow-steps small{
  margin-top:2px;
  overflow:hidden;
  color:var(--text-3);
  font-size:8.5px;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .pr-workflow-steps .is-ordered i{
  background:#e8f1ff;
  color:#2563eb
}

.app-shell .pr-workflow-steps .is-partial i{
  background:#fff3dc;
  color:#c56a05
}

.app-shell .pr-workflow-steps .is-completed i{
  background:#e5f7ed;
  color:#168447
}

.app-shell .pr-workflow-steps>button.is-active:after{
  position:absolute;
  top:9px;
  right:9px;
  width:6px;
  height:6px;
  border-radius:50%;
  background:currentColor;
  box-shadow:0 0 0 3px color-mix(in srgb,currentColor 12%,transparent);
  content:""
}

.app-shell .pr-workflow-steps>button.is-ordered.is-active{
  border-color:#9fc0ff;
  background:#f2f6ff;
  color:#2563eb;
  box-shadow:0 0 0 3px rgba(37,99,235,.07)
}

.app-shell .pr-workflow-steps>button.is-partial.is-active{
  border-color:#edc67d;
  background:#fff9ed;
  color:#b76305;
  box-shadow:0 0 0 3px rgba(197,106,5,.07)
}

.app-shell .pr-workflow-steps>button.is-completed.is-active{
  border-color:#91d5ae;
  background:#f0faf4;
  color:#168447;
  box-shadow:0 0 0 3px rgba(22,132,71,.07)
}

.app-shell .pr-workflow-steps>button.is-ordered.is-active i{
  background:#2563eb;
  color:#fff
}

.app-shell .pr-workflow-steps>button.is-partial.is-active i{
  background:#c56a05;
  color:#fff
}

.app-shell .pr-workflow-steps>button.is-completed.is-active i{
  background:#168447;
  color:#fff
}

.app-shell .pr-filter-card{
  margin-bottom:14px;
  overflow:visible;
  border:1px solid var(--border);
  border-radius:13px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

.app-shell .pr-filter-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:11px 14px;
  border-bottom:1px solid var(--border-2);
  background:var(--surface-2);
  border-radius:13px 13px 0 0
}

.app-shell .pr-filter-head>div{
  display:flex;
  align-items:center;
  gap:9px
}

.app-shell .pr-filter-head>div>span{
  display:inline-flex;
  width:34px;
  height:34px;
  align-items:center;
  justify-content:center;
  border-radius:9px;
  background:var(--info-weak);
  color:var(--info)
}

.app-shell .pr-filter-head strong,.app-shell .pr-filter-head p{
  display:block
}

.app-shell .pr-filter-head strong{
  color:var(--text);
  font-size:11.5px;
  font-weight:800
}

.app-shell .pr-filter-head p{
  margin:2px 0 0;
  color:var(--text-3);
  font-size:9.5px
}

.app-shell .pr-filter-reset{
  display:inline-flex;
  height:32px;
  align-items:center;
  gap:6px;
  padding:0 9px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface);
  color:var(--text-2);
  font:inherit;
  font-size:10px;
  font-weight:750;
  cursor:pointer
}

.app-shell .pr-filter-reset:hover{
  border-color:var(--text-3);
  background:var(--surface-3);
  color:var(--text)
}

.app-shell .pr-filter-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  padding:14px
}

.app-shell .pr-date-control{
  position:relative
}

.app-shell .pr-date-control>svg{
  position:absolute;
  top:50%;
  left:12px;
  z-index:2;
  color:var(--text-3);
  transform:translateY(-50%);
  pointer-events:none
}

.app-shell .pr-date-control .form-control{
  padding-left:37px
}

.app-shell .purchase-requisition-list-card{
  border:1px solid var(--border)
}

.app-shell .pr-table-wrap{
  min-width:0
}

.app-shell .purchase-requisition-table{
  min-width:1040px
}

.app-shell .purchase-requisition-table tbody td{
  vertical-align:middle
}

.app-shell .pr-reference{
  display:flex;
  min-width:0;
  align-items:center;
  gap:9px
}

.app-shell .pr-reference>span{
  display:inline-flex;
  width:34px;
  height:34px;
  flex:none;
  align-items:center;
  justify-content:center;
  border-radius:9px;
  background:var(--info-weak);
  color:var(--info)
}

.app-shell .pr-reference strong,.app-shell .pr-reference small{
  display:block
}

.app-shell .pr-reference strong{
  color:var(--text);
  font-size:11.5px;
  font-weight:800
}

.app-shell .pr-reference small{
  margin-top:2px;
  color:var(--text-3);
  font-size:9px
}

.app-shell .pr-created{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0
}

.app-shell .pr-created-name{
  color:var(--text);
  font-size:11.5px;
  font-weight:800
}

.app-shell .pr-created-at{
  color:var(--text-3);
  font-size:9px;
  white-space:nowrap
}

.app-shell .pr-status-badge{
  display:inline-flex;
  min-width:82px;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:6px 10px;
  border:1px solid currentColor;
  border-radius:999px;
  font-size:9.5px;
  font-style:normal;
  font-weight:850;
  line-height:1;
  white-space:nowrap
}

.app-shell .pr-status-badge:before{
  width:7px;
  height:7px;
  border:2px solid currentColor;
  border-radius:50%;
  background:transparent;
  content:""
}

.app-shell .pr-status-badge.is-ordered{
  border-color:#bfd5ff;
  background:#edf4ff;
  color:#245fc5
}

.app-shell .pr-status-badge.is-partial{
  border-color:#f2d39b;
  background:#fff6e6;
  color:#a85c08
}

.app-shell .pr-status-badge.is-completed{
  border-color:#afe0c5;
  background:#eaf8f0;
  color:#167442
}

.app-shell .pr-status-badge.is-completed:before{
  border-color:#168447;
  background:#168447;
  box-shadow:inset 0 0 0 1px #eaf8f0
}

.app-shell .pr-row-actions{
  justify-content:flex-end
}

.app-shell .purchase-requisition-list-card td.dataTables_empty{
  height:180px!important;
  text-align:center;
  color:var(--text-3)
}

@media (max-width:1050px){
  .app-shell .pr-workflow-guide{
    grid-template-columns:1fr
  }

  .app-shell .pr-workflow-intro{
    border-right:0;
    border-bottom:1px solid var(--border)
  }
}

@media (max-width:680px){
  .app-shell .pr-workflow-steps{
    grid-template-columns:1fr
  }

  .app-shell .pr-workflow-steps small{
    white-space:normal
  }

  .app-shell .pr-workflow-intro{
    padding-right:62px
  }
}

/* Requisition builder */

.app-shell .pr-create-grid{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr);
  gap:14px;
  margin-bottom:14px
}

.app-shell .pr-create-grid>.card{
  margin:0
}

.app-shell .pr-discovery-fields{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px
}

.app-shell .pr-show-products{
  display:grid;
  width:100%;
  grid-template-columns:40px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  margin-top:14px;
  padding:10px 12px;
  border:1px solid color-mix(in srgb,var(--brand) 26%,var(--border));
  border-radius:10px;
  background:var(--brand-weak);
  color:var(--brand-strong);
  font:inherit;
  text-align:left;
  cursor:pointer;
  transition:border-color .15s,background .15s,box-shadow .15s
}

.app-shell .pr-show-products:hover{
  border-color:var(--brand);
  background:color-mix(in srgb,var(--brand-weak) 70%,var(--surface));
  box-shadow:0 8px 20px -16px rgba(21,154,77,.55)
}

.app-shell .pr-show-products:disabled{
  cursor:wait;
  opacity:.65
}

.app-shell .pr-show-products-icon{
  display:inline-flex;
  width:40px;
  height:40px;
  align-items:center;
  justify-content:center;
  border-radius:9px;
  background:var(--surface)
}

.app-shell .pr-show-products strong,.app-shell .pr-show-products small{
  display:block
}

.app-shell .pr-show-products strong{
  font-size:11.5px;
  font-weight:800
}

.app-shell .pr-show-products small{
  margin-top:2px;
  color:var(--text-3);
  font-size:9.5px
}

.app-shell .pr-show-products.is-loading .pr-show-products-icon svg{
  animation:note-submit-spin .8s linear infinite
}

.app-shell .pr-request-detail-fields{
  display:grid;
  gap:13px
}

.app-shell .pr-field-help{
  display:flex;
  align-items:center;
  gap:5px;
  margin:5px 0 0;
  color:var(--text-3);
  font-size:9px
}

.app-shell .pr-field-help svg{
  color:var(--brand)
}

.app-shell .pr-request-note{
  display:flex;
  align-items:flex-start;
  gap:7px;
  margin-top:13px;
  padding:9px 10px;
  border:1px solid color-mix(in srgb,var(--info) 18%,var(--border));
  border-radius:8px;
  background:var(--info-weak);
  color:var(--text-2);
  font-size:9.5px;
  line-height:1.4
}

.app-shell .pr-request-note svg{
  flex:none;
  color:var(--info)
}

.app-shell .pr-request-items-card{
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:13px;
  background:var(--surface);
  box-shadow:var(--shadow-md)
}

.app-shell .pr-request-items-head,.app-shell .pr-request-items-head>div{
  display:flex;
  align-items:center
}

.app-shell .pr-request-items-head{
  justify-content:space-between;
  gap:12px;
  padding:13px 15px;
  border-bottom:1px solid var(--border);
  background:var(--surface-2)
}

.app-shell .pr-request-items-head>div{
  gap:10px
}

.app-shell .pr-request-items-head>div>span{
  display:inline-flex;
  width:38px;
  height:38px;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .pr-request-items-head strong,.app-shell .pr-request-items-head p{
  display:block
}

.app-shell .pr-request-items-head strong{
  color:var(--text);
  font-size:12px;
  font-weight:800
}

.app-shell .pr-request-items-head p{
  margin:2px 0 0;
  color:var(--text-3);
  font-size:9.5px
}

.app-shell .pr-product-count{
  display:inline-flex;
  padding:5px 9px;
  border-radius:999px;
  background:var(--surface);
  color:var(--text-2);
  font-size:9.5px;
  font-weight:800
}

.app-shell .pr-products-empty{
  display:flex;
  min-height:220px;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:30px;
  text-align:center
}

.app-shell .pr-products-empty[hidden]{
  display:none
}

.app-shell .pr-products-empty>span{
  display:inline-flex;
  width:52px;
  height:52px;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  background:var(--surface-3);
  color:var(--text-3)
}

.app-shell .pr-products-empty strong{
  margin-top:12px;
  color:var(--text);
  font-size:12.5px;
  font-weight:800
}

.app-shell .pr-products-empty p{
  max-width:430px;
  margin:5px 0 0;
  color:var(--text-3);
  font-size:10.5px;
  line-height:1.5
}

.app-shell .pr-products-table-wrap[hidden]{
  display:none
}

.app-shell .pr-products-table tbody td{
  padding:12px 14px;
  vertical-align:middle
}

.app-shell .pr-product-identity{
  display:flex;
  min-width:0;
  align-items:flex-start;
  gap:10px
}

.app-shell .pr-product-identity>span{
  display:inline-flex;
  width:38px;
  height:38px;
  flex:none;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .pr-product-identity strong,.app-shell .pr-product-identity small,.app-shell .pr-product-identity em{
  display:block
}

.app-shell .pr-product-identity strong{
  color:var(--text);
  font-size:11.5px;
  font-weight:800
}

.app-shell .pr-product-identity small{
  margin-top:2px;
  color:var(--text-3);
  font-size:9.5px
}

.app-shell .pr-product-identity em{
  display:flex;
  align-items:center;
  gap:5px;
  margin-top:6px;
  color:var(--info);
  font-size:9px;
  font-style:normal;
  font-weight:700
}

.app-shell .pr-alert-quantity{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:5px 8px;
  border-radius:8px;
  background:var(--warn-weak);
  color:var(--warn);
  font-size:9.5px;
  font-weight:750;
  white-space:nowrap
}

.app-shell .pr-quantity-stack{
  display:grid;
  gap:7px
}

.app-shell .pr-quantity-stack label>span:first-child{
  display:block;
  margin-bottom:4px;
  color:var(--text-3);
  font-size:8.5px;
  font-weight:750
}

.app-shell .pr-quantity-control{
  display:flex;
  width:190px;
  align-items:stretch
}

.app-shell .pr-quantity-control .form-control{
  height:36px;
  border-radius:8px 0 0 8px
}

.app-shell .pr-quantity-control b{
  display:inline-flex;
  min-width:46px;
  align-items:center;
  justify-content:center;
  padding:0 8px;
  border:1px solid var(--border);
  border-left:0;
  border-radius:0 8px 8px 0;
  background:var(--surface-2);
  color:var(--text-2);
  font-size:9px;
  font-weight:800
}

.bootstrap-datetimepicker-widget.dropdown-menu{
  z-index:100000!important
}

/* The calendar is a .dropdown-menu, and the house rule for those pins them to the right edge of
   their container at top:100%. That is right for a row-action menu and wrong for a calendar the
   shell places by hand against its field, so the corner it was pinned to is released here. Its
   width is its own — the generic rule's minimum would stretch it. */

.app-shell .bootstrap-datetimepicker-widget.dropdown-menu{
  top:auto;
  right:auto;
  bottom:auto;
  left:auto;
  width:auto;
  margin:0
}

/* Requisition detail */

.app-shell .pr-detail-modal-dialog{
  width:min(940px,calc(100% - 24px));
  max-width:none
}

.app-shell .pr-detail-modal-content{
  overflow:hidden
}

.app-shell .pr-detail-modal-header{
  min-height:96px;
  padding:18px 20px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--info-weak) 62%,var(--surface)) 0%,var(--surface) 72%)
}

.app-shell .pr-detail-heading{
  display:flex;
  min-width:0;
  align-items:center;
  gap:12px
}

.app-shell .pr-detail-heading>span{
  display:inline-flex;
  width:48px;
  height:48px;
  flex:none;
  align-items:center;
  justify-content:center;
  border:1px solid color-mix(in srgb,var(--info) 20%,var(--border));
  border-radius:13px;
  background:var(--surface);
  color:var(--info);
  box-shadow:var(--shadow-sm)
}

.app-shell .pr-detail-heading small{
  display:block;
  color:var(--info);
  font-size:8.5px;
  font-weight:850;
  letter-spacing:.6px;
  text-transform:uppercase
}

.app-shell .pr-detail-heading h4{
  margin-top:2px
}

.app-shell .pr-detail-heading p{
  margin:3px 0 0;
  color:var(--text-3);
  font-size:10.5px;
  font-weight:700
}

.app-shell .pr-detail-modal-body{
  display:grid;
  gap:14px;
  padding:15px;
  background:var(--surface-2)
}

.app-shell .pr-detail-summary{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:9px
}

.app-shell .pr-detail-summary>div{
  display:grid;
  min-width:0;
  grid-template-columns:30px minmax(0,1fr);
  grid-template-areas:"icon label" "icon value";
  -moz-column-gap:8px;
       column-gap:8px;
  padding:10px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface)
}

.app-shell .pr-detail-summary>div>span{
  grid-area:icon;
  display:inline-flex;
  width:30px;
  height:30px;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  background:var(--surface-3);
  color:var(--text-3)
}

.app-shell .pr-detail-summary small{
  grid-area:label;
  color:var(--text-3);
  font-size:8.5px;
  font-weight:700
}

.app-shell .pr-detail-summary strong{
  grid-area:value;
  overflow:hidden;
  margin-top:2px;
  color:var(--text);
  font-size:10.5px;
  font-weight:800;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .pr-detail-lines{
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:11px;
  background:var(--surface)
}

.app-shell .pr-detail-lines-head,.app-shell .pr-detail-lines-head>div{
  display:flex;
  align-items:center
}

.app-shell .pr-detail-lines-head{
  padding:11px 13px;
  border-bottom:1px solid var(--border);
  background:var(--surface)
}

.app-shell .pr-detail-lines-head>div{
  gap:9px
}

.app-shell .pr-detail-lines-head>div>span{
  display:inline-flex;
  width:34px;
  height:34px;
  align-items:center;
  justify-content:center;
  border-radius:9px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .pr-detail-lines-head strong,.app-shell .pr-detail-lines-head p{
  display:block
}

.app-shell .pr-detail-lines-head strong{
  color:var(--text);
  font-size:11.5px;
  font-weight:800
}

.app-shell .pr-detail-lines-head p{
  margin:2px 0 0;
  color:var(--text-3);
  font-size:9px
}

.app-shell .pr-detail-lines tbody td{
  padding:11px 13px;
  vertical-align:middle
}

.app-shell .pr-detail-product{
  display:flex;
  min-width:0;
  align-items:center;
  gap:9px
}

.app-shell .pr-detail-product>span{
  display:inline-flex;
  width:34px;
  height:34px;
  flex:none;
  align-items:center;
  justify-content:center;
  border-radius:9px;
  background:var(--surface-3);
  color:var(--text-3)
}

.app-shell .pr-detail-product strong,.app-shell .pr-detail-product small{
  display:block
}

.app-shell .pr-detail-product strong{
  color:var(--text);
  font-size:10.5px;
  font-weight:800
}

.app-shell .pr-detail-product small{
  margin-top:2px;
  color:var(--text-3);
  font-size:9px
}

.app-shell .pr-detail-quantity,.app-shell .pr-remaining-quantity{
  color:var(--text);
  font-size:11px;
  font-weight:800;
  white-space:nowrap
}

.app-shell .pr-detail-quantity small,.app-shell .pr-remaining-quantity small{
  color:var(--text-3);
  font-size:9px;
  font-weight:700
}

.app-shell .pr-detail-secondary{
  display:block;
  margin-top:4px;
  color:var(--text-3);
  font-size:9px
}

.app-shell .pr-remaining-quantity{
  display:inline-flex;
  padding:5px 8px;
  border-radius:8px;
  background:var(--warn-weak);
  color:var(--warn)
}

.app-shell .pr-remaining-quantity.is-complete{
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .pr-detail-modal-footer{
  display:flex;
  justify-content:flex-end;
  padding:11px 15px
}

@media (max-width:1100px){
  .app-shell .pr-filter-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

  .app-shell .pr-create-grid{
    grid-template-columns:1fr
  }

  .app-shell .pr-detail-summary{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}

@media (max-width:760px){
  .app-shell .pr-workflow-guide{
    grid-template-columns:1fr
  }

  .app-shell .pr-workflow-steps{
    overflow-x:auto;
    padding-bottom:2px
  }

  .app-shell .pr-discovery-fields{
    grid-template-columns:1fr
  }
}

@media (max-width:560px){
  .app-shell .pr-filter-grid,.app-shell .pr-detail-summary{
    grid-template-columns:1fr
  }

  .app-shell .pr-filter-head{
    align-items:flex-start
  }

  .app-shell .pr-filter-head p{
    display:none
  }

  .app-shell .pr-workflow-steps>svg{
    display:none
  }

  .app-shell .pr-workflow-steps{
    flex-wrap:wrap
  }
}

/* Purchase orders: procurement workspace */

.app-shell .purchase-order-page{
  padding-bottom:34px
}

.app-shell .po-stage-board{
  display:grid;
  grid-template-columns:minmax(230px,.62fr) minmax(540px,1.38fr);
  margin-bottom:14px;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

.app-shell .po-stage-intro{
  position:relative;
  display:flex;
  min-width:0;
  align-items:center;
  gap:12px;
  padding:16px 18px;
  border-right:1px solid var(--border);
  background:linear-gradient(132deg,color-mix(in srgb,var(--info-weak) 76%,var(--surface)) 0%,var(--surface) 100%)
}

.app-shell .po-stage-intro:before{
  position:absolute;
  inset:0 auto 0 0;
  width:4px;
  background:var(--info);
  content:""
}

.app-shell .po-stage-intro>span{
  display:inline-flex;
  width:44px;
  height:44px;
  flex:none;
  align-items:center;
  justify-content:center;
  border:1px solid color-mix(in srgb,var(--info) 22%,var(--border));
  border-radius:12px;
  background:var(--surface);
  color:var(--info);
  box-shadow:var(--shadow-sm)
}

.app-shell .po-stage-intro>div{
  min-width:0
}

.app-shell .po-stage-intro small{
  display:block;
  margin-bottom:3px;
  color:var(--info);
  font-size:8px;
  font-weight:850;
  letter-spacing:.12em
}

.app-shell .po-stage-intro strong{
  display:block;
  color:var(--text);
  font-size:12.5px;
  font-weight:850
}

.app-shell .po-stage-intro p{
  margin:3px 0 0;
  color:var(--text-3);
  font-size:9.5px;
  line-height:1.4
}

.app-shell .po-stage-clear{
  position:absolute;
  right:10px;
  bottom:7px;
  padding:2px 6px;
  border:0;
  background:transparent;
  color:var(--info);
  font:inherit;
  font-size:8.5px;
  font-weight:800;
  cursor:pointer
}

.app-shell .po-stage-clear:hover{
  text-decoration:underline
}

.app-shell .po-stage-options{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  padding:10px;
  background:var(--surface-2)
}

.app-shell .po-stage-options>button{
  position:relative;
  display:flex;
  min-width:0;
  align-items:center;
  gap:10px;
  padding:11px 12px;
  border:1px solid var(--border);
  border-radius:11px;
  background:var(--surface);
  color:var(--text-2);
  font:inherit;
  text-align:left;
  cursor:pointer;
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease,background .18s ease
}

.app-shell .po-stage-options>button:hover{
  box-shadow:var(--shadow-sm);
  transform:translateY(-1px)
}

.app-shell .po-stage-options>button:focus-visible{
  outline:2px solid color-mix(in srgb,var(--info) 60%,transparent);
  outline-offset:2px
}

.app-shell .po-stage-options i{
  display:inline-flex;
  width:30px;
  height:30px;
  flex:none;
  align-items:center;
  justify-content:center;
  border-radius:9px;
  font-size:9px;
  font-style:normal;
  font-weight:900;
  letter-spacing:.04em
}

.app-shell .po-stage-options span,.app-shell .po-stage-options b,.app-shell .po-stage-options small{
  display:block;
  min-width:0
}

.app-shell .po-stage-options b{
  color:var(--text);
  font-size:10.5px;
  font-weight:800
}

.app-shell .po-stage-options small{
  margin-top:2px;
  overflow:hidden;
  color:var(--text-3);
  font-size:8.5px;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .po-stage-options .is-ordered i{
  background:#e8f1ff;
  color:#2563eb
}

.app-shell .po-stage-options .is-partial i{
  background:#fff3dc;
  color:#c56a05
}

.app-shell .po-stage-options .is-completed i{
  background:#e5f7ed;
  color:#168447
}

.app-shell .po-stage-options>button.is-active:after{
  position:absolute;
  top:9px;
  right:9px;
  width:6px;
  height:6px;
  border-radius:50%;
  background:currentColor;
  box-shadow:0 0 0 3px color-mix(in srgb,currentColor 12%,transparent);
  content:""
}

.app-shell .po-stage-options>button.is-ordered.is-active{
  border-color:#9fc0ff;
  background:#f2f6ff;
  color:#2563eb;
  box-shadow:0 0 0 3px rgba(37,99,235,.07)
}

.app-shell .po-stage-options>button.is-partial.is-active{
  border-color:#edc67d;
  background:#fff9ed;
  color:#b76305;
  box-shadow:0 0 0 3px rgba(197,106,5,.07)
}

.app-shell .po-stage-options>button.is-completed.is-active{
  border-color:#91d5ae;
  background:#f0faf4;
  color:#168447;
  box-shadow:0 0 0 3px rgba(22,132,71,.07)
}

.app-shell .po-stage-options>button.is-ordered.is-active i{
  background:#2563eb;
  color:#fff
}

.app-shell .po-stage-options>button.is-partial.is-active i{
  background:#c56a05;
  color:#fff
}

.app-shell .po-stage-options>button.is-completed.is-active i{
  background:#168447;
  color:#fff
}

.app-shell .po-filter-card{
  margin-bottom:14px;
  overflow:visible;
  border:1px solid var(--border);
  border-radius:13px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

.app-shell .po-filter-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:11px 14px;
  border-bottom:1px solid var(--border-2);
  border-radius:13px 13px 0 0;
  background:var(--surface-2)
}

.app-shell .po-filter-head>div{
  display:flex;
  align-items:center;
  gap:9px
}

.app-shell .po-filter-head>div>span{
  display:inline-flex;
  width:34px;
  height:34px;
  align-items:center;
  justify-content:center;
  border-radius:9px;
  background:var(--info-weak);
  color:var(--info)
}

.app-shell .po-filter-head strong{
  display:block;
  color:var(--text);
  font-size:11.5px;
  font-weight:800
}

.app-shell .po-filter-head p{
  margin:2px 0 0;
  color:var(--text-3);
  font-size:9.5px
}

.app-shell .po-filter-reset{
  display:inline-flex;
  height:32px;
  align-items:center;
  gap:6px;
  padding:0 9px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface);
  color:var(--text-2);
  font:inherit;
  font-size:10px;
  font-weight:750;
  cursor:pointer
}

.app-shell .po-filter-reset:hover{
  border-color:var(--text-3);
  background:var(--surface-3);
  color:var(--text)
}

.app-shell .po-filter-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  padding:14px
}

.app-shell .po-date-control{
  position:relative
}

.app-shell .po-date-control>svg{
  position:absolute;
  top:50%;
  left:12px;
  z-index:2;
  color:var(--text-3);
  transform:translateY(-50%);
  pointer-events:none
}

.app-shell .po-date-control .form-control{
  padding-left:37px
}

.app-shell .purchase-order-list-card{
  border:1px solid var(--border)
}

.app-shell .po-table-wrap{
  min-width:0;
  background:var(--surface)
}

.app-shell .purchase-order-table{
  min-width:1180px;
  table-layout:auto
}

.app-shell .purchase-order-table thead th{
  height:48px;
  padding:0 14px!important;
  background:color-mix(in srgb,var(--surface-2) 86%,var(--surface));
  color:var(--text-3);
  font-size:9px;
  font-weight:850;
  letter-spacing:.055em;
  line-height:1.25;
  text-transform:uppercase;
  vertical-align:middle
}

.app-shell .purchase-order-table tbody tr{
  transition:background-color .14s ease,box-shadow .14s ease
}

.app-shell .purchase-order-table tbody tr:nth-child(even){
  background:color-mix(in srgb,var(--surface-2) 46%,var(--surface))
}

.app-shell .purchase-order-table tbody tr:hover{
  background:color-mix(in srgb,var(--brand-weak) 33%,var(--surface));
  box-shadow:inset 3px 0 0 color-mix(in srgb,var(--brand) 60%,transparent)
}

.app-shell .purchase-order-table tbody td{
  height:82px;
  padding:12px 14px!important;
  border-color:var(--border-2)!important;
  color:var(--text-2);
  font-size:11px;
  line-height:1.4;
  vertical-align:middle
}

/* Floors, not fixed widths: with table-layout:auto each column keeps at least this width but grows
   to fit its content (supplier names, locations) rather than wrapping or clipping. The table
   overflows into its own horizontal scroll. */

.app-shell .purchase-order-table th:nth-child(1),.app-shell .purchase-order-table td:nth-child(1){
  min-width:175px
}

.app-shell .purchase-order-table th:nth-child(2),.app-shell .purchase-order-table td:nth-child(2){
  min-width:150px
}

.app-shell .purchase-order-table th:nth-child(3),.app-shell .purchase-order-table td:nth-child(3){
  min-width:220px
}

.app-shell .purchase-order-table th:nth-child(4),.app-shell .purchase-order-table td:nth-child(4){
  min-width:250px
}

.app-shell .purchase-order-table th:nth-child(5),.app-shell .purchase-order-table td:nth-child(5){
  min-width:190px
}

.app-shell .purchase-order-table th:nth-child(6),.app-shell .purchase-order-table td:nth-child(6){
  min-width:180px
}

.app-shell .purchase-order-table th:nth-child(7),.app-shell .purchase-order-table td:nth-child(7){
  min-width:128px
}

.app-shell .po-reference,.app-shell .po-supplier{
  display:flex;
  min-width:0;
  align-items:center;
  gap:9px
}

.app-shell .po-reference>span,.app-shell .po-supplier>span{
  display:inline-flex;
  width:38px;
  height:38px;
  flex:none;
  align-items:center;
  justify-content:center;
  border-radius:10px
}

.app-shell .po-reference>span{
  background:var(--info-weak);
  color:var(--info)
}

.app-shell .po-supplier>span{
  background:var(--surface-3);
  color:var(--text-2)
}

.app-shell .po-reference strong,.app-shell .po-reference small,.app-shell .po-supplier strong,.app-shell .po-supplier small{
  display:block
}

.app-shell .po-reference strong,.app-shell .po-supplier strong{
  max-width:205px;
  overflow:hidden;
  color:var(--text);
  font-size:11.5px;
  font-weight:850;
  line-height:1.35;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .po-reference small,.app-shell .po-supplier small{
  max-width:205px;
  margin-top:3px;
  overflow:hidden;
  color:var(--text-3);
  font-size:9px;
  font-weight:650;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .po-date-stack strong,.app-shell .po-date-stack small{
  display:block;
  white-space:nowrap
}

.app-shell .po-date-stack strong{
  color:var(--text);
  font-size:11.5px;
  font-weight:800
}

.app-shell .po-date-stack small{
  margin-top:4px;
  color:var(--text-3);
  font-size:8.5px;
  font-weight:700;
  text-transform:uppercase
}

.app-shell .po-supplier-context{
  display:grid;
  min-width:0;
  gap:7px
}

.app-shell .po-location-context{
  display:flex;
  min-width:0;
  align-items:center;
  gap:6px;
  padding-left:47px;
  color:var(--text-3)
}

.app-shell .po-location-context>span{
  width:6px;
  height:6px;
  flex:none;
  border:2px solid var(--brand);
  border-radius:50%;
  background:var(--surface)
}

.app-shell .po-location-context>b{
  overflow:hidden;
  font-size:9px;
  font-weight:750;
  text-overflow:ellipsis;
  white-space:nowrap
}

/* Supplier & location shows the full value on one line: the shared truncation above keeps the Order
   column's reference clipped, but the supplier name, its subtitle and the location size to their
   content — the column auto-fits and the table scrolls horizontally rather than wrapping or cutting. */

.app-shell .po-supplier strong,.app-shell .po-supplier small{
  max-width:none;
  overflow:visible;
  white-space:nowrap;
  text-overflow:clip
}

.app-shell .po-location-context>b{
  overflow:visible;
  white-space:nowrap;
  text-overflow:clip
}

/* Without this the flex/grid `min-width:0` on the supplier blocks lets the cell report a ~0
   min-content width, so table-layout:auto never widens the column and the nowrap name overflowed
   into the Fulfilment column. Sizing to content makes the column grow and the table scroll. */

.app-shell .po-supplier-context,.app-shell .po-supplier{
  min-width:-moz-max-content;
  min-width:max-content
}

.app-shell .po-fulfilment{
  display:grid;
  gap:8px
}

.app-shell .po-fulfilment-primary{
  display:flex;
  align-items:center;
  gap:7px
}

.app-shell .po-fulfilment-shipping{
  display:flex;
  min-width:0;
  align-items:center;
  gap:7px
}

.app-shell .po-fulfilment-shipping>small{
  color:var(--text-3);
  font-size:8px;
  font-weight:750;
  letter-spacing:.04em;
  text-transform:uppercase
}

.app-shell .po-owner{
  display:block;
  min-width:0
}

.app-shell .po-owner strong,.app-shell .po-owner small{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis
}

.app-shell .po-owner strong{
  color:var(--text);
  font-size:10.5px;
  font-weight:800;
  white-space:nowrap
}

.app-shell .po-owner small{
  margin-top:3px;
  color:var(--text-3);
  font-size:8.5px;
  line-height:1.35;
  white-space:nowrap
}

.app-shell .po-status-badge{
  display:inline-flex;
  min-width:82px;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:6px 9px;
  border:1px solid currentColor;
  border-radius:999px;
  font:inherit;
  font-size:9.5px;
  font-weight:850;
  line-height:1;
  white-space:nowrap
}

.app-shell button.po-status-badge{
  cursor:pointer
}

.app-shell button.po-status-badge:hover{
  filter:saturate(1.12);
  box-shadow:var(--shadow-sm)
}

.app-shell .po-status-badge:before{
  width:7px;
  height:7px;
  border:2px solid currentColor;
  border-radius:50%;
  content:""
}

.app-shell .po-status-badge.is-ordered{
  border-color:#bfd5ff;
  background:#edf4ff;
  color:#245fc5
}

.app-shell .po-status-badge.is-partial{
  border-color:#f2d39b;
  background:#fff6e6;
  color:#a85c08
}

.app-shell .po-status-badge.is-completed{
  border-color:#afe0c5;
  background:#eaf8f0;
  color:#167442
}

.app-shell .po-status-badge.is-completed:before{
  background:#168447;
  box-shadow:inset 0 0 0 1px #eaf8f0
}

.app-shell .po-remaining{
  display:inline-flex;
  min-width:58px;
  flex-direction:column;
  padding:6px 8px;
  border-radius:8px;
  font-size:10.5px;
  font-weight:850;
  line-height:1
}

.app-shell .po-remaining small{
  margin-top:3px;
  font-size:7.5px;
  font-weight:750;
  text-transform:uppercase
}

.app-shell .po-remaining.is-open{
  background:var(--warn-weak);
  color:var(--warn)
}

.app-shell .po-remaining.is-clear{
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .po-shipping-link:hover{
  text-decoration:none
}

.app-shell .po-shipping-badge{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:5px 8px;
  border-radius:999px;
  background:var(--surface-3);
  color:var(--text-2);
  font-size:8.5px;
  font-weight:800;
  white-space:nowrap
}

.app-shell .po-shipping-badge:before{
  width:5px;
  height:5px;
  border-radius:50%;
  background:currentColor;
  content:""
}

.app-shell .po-shipping-badge.is-ordered{
  background:#fff6e6;
  color:#a85c08
}

.app-shell .po-shipping-badge.is-packed{
  background:#edf4ff;
  color:#245fc5
}

.app-shell .po-shipping-badge.is-shipped{
  background:#eef0f7;
  color:#3b4c7a
}

.app-shell .po-shipping-badge.is-delivered{
  background:#eaf8f0;
  color:#167442
}

.app-shell .po-shipping-badge.is-cancelled{
  background:var(--danger-weak);
  color:var(--danger)
}

.app-shell .po-notes{
  display:-webkit-box;
  max-width:170px;
  overflow:hidden;
  color:var(--text-2);
  font-size:9.5px;
  line-height:1.55;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2
}

.app-shell .po-muted-value{
  color:var(--text-3)
}

.app-shell .po-row-actions{
  justify-content:flex-end
}

.app-shell .po-row-actions .act{
  width:34px;
  height:34px;
  border-radius:9px
}

.app-shell .po-row-actions .po-edit-action{
  border-color:color-mix(in srgb,var(--brand) 30%,var(--border));
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .po-row-actions .po-edit-action:hover{
  border-color:var(--brand);
  background:var(--brand);
  color:#fff;
  box-shadow:0 5px 12px -7px color-mix(in srgb,var(--brand) 70%,transparent)
}

.app-shell .po-action-menu{
  min-width:210px
}

.app-shell .po-action-menu .table-action-icon{
  width:17px;
  height:17px;
  margin-right:1px;
  color:var(--text-3);
  stroke-width:1.8
}

.app-shell .po-action-menu>li>a:hover .table-action-icon{
  color:currentColor
}

.app-shell .po-action-menu>li>.table-action-delete .table-action-icon{
  color:var(--danger)
}

.app-shell .purchase-order-list-card td.dataTables_empty{
  height:180px!important;
  text-align:center;
  color:var(--text-3)
}

.app-shell .po-status-modal-dialog{
  width:min(560px,calc(100% - 24px));
  max-width:none
}

.app-shell .po-status-modal-content{
  overflow:hidden
}

.app-shell .po-status-modal-heading{
  display:flex;
  min-width:0;
  align-items:center;
  gap:10px
}

.app-shell .po-status-modal-heading>span{
  display:inline-flex;
  width:38px;
  height:38px;
  flex:none;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  background:var(--info-weak);
  color:var(--info)
}

.app-shell .po-status-modal-heading h4,.app-shell .po-status-modal-heading p{
  margin:0
}

.app-shell .po-status-modal-heading p{
  margin-top:2px;
  color:var(--text-3);
  font-size:9.5px
}

.app-shell .po-status-modal-body{
  padding:16px;
  background:var(--surface-2)
}

.app-shell .po-status-field-label{
  display:block;
  margin-bottom:7px;
  color:var(--text-2);
  font-size:10px;
  font-weight:800
}

.app-shell .po-status-choice-grid{
  display:grid;
  gap:8px
}

.app-shell .po-status-choice{
  position:relative;
  display:grid;
  grid-template-columns:30px minmax(0,1fr) 20px;
  align-items:center;
  gap:10px;
  margin:0;
  padding:11px 12px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface);
  cursor:pointer;
  transition:border-color .16s ease,background .16s ease,box-shadow .16s ease
}

.app-shell .po-status-choice:hover{
  border-color:var(--text-3);
  box-shadow:var(--shadow-sm)
}

.app-shell .po-status-choice input{
  position:absolute;
  opacity:0;
  pointer-events:none
}

.app-shell .po-status-choice>i{
  display:inline-flex;
  width:30px;
  height:30px;
  border-radius:9px;
  background:var(--surface-3)
}

.app-shell .po-status-choice strong,.app-shell .po-status-choice small{
  display:block
}

.app-shell .po-status-choice strong{
  color:var(--text);
  font-size:10.5px;
  font-weight:850
}

.app-shell .po-status-choice small{
  margin-top:2px;
  color:var(--text-3);
  font-size:8.5px
}

.app-shell .po-status-choice>svg{
  display:none;
  color:currentColor
}

.app-shell .po-status-choice.is-ordered>i{
  background:#e8f1ff
}

.app-shell .po-status-choice.is-partial>i{
  background:#fff3dc
}

.app-shell .po-status-choice.is-completed>i{
  background:#e5f7ed
}

.app-shell .po-order-form{
  display:grid;
  gap:14px
}

.app-shell .po-form-card{
  margin:0!important;
  overflow:visible;
  border:1px solid var(--border)!important;
  border-radius:13px!important;
  background:var(--surface)!important;
  box-shadow:var(--shadow-sm)!important;
  transform:none!important
}

.app-shell .po-form-card:hover{
  box-shadow:var(--shadow-sm)!important;
  transform:none!important
}

.app-shell .po-form-card>.tw-p-2{
  padding:0!important
}

.app-shell .po-form-card .box-header{
  display:flex;
  min-height:58px;
  align-items:center;
  margin:0!important;
  padding:12px 16px!important;
  border-bottom:1px solid var(--border-2);
  border-radius:13px 13px 0 0;
  background:linear-gradient(100deg,var(--surface-2),var(--surface))
}

.app-shell .po-form-card .box-title{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0!important;
  color:var(--text);
  font-size:12px!important;
  font-weight:850!important
}

.app-shell .po-form-card .box-title:before{
  display:inline-flex;
  width:32px;
  height:32px;
  align-items:center;
  justify-content:center;
  border:1px solid color-mix(in srgb,var(--info) 18%,var(--border));
  border-radius:9px;
  background:var(--info-weak);
  color:var(--info);
  font-size:8.5px;
  font-weight:900;
  letter-spacing:.04em;
  content:"01"
}

.app-shell .po-products-card .box-title:before{
  content:"02"
}

.app-shell .po-delivery-card .box-title:before{
  content:"03"
}

.app-shell .po-notes-card .box-title:before{
  content:"04"
}

.app-shell .po-form-card .tw-flow-root{
  padding:16px
}

.app-shell .po-form-card .tw-py-2{
  padding:0!important
}

.app-shell .po-form-card .form-group{
  margin:0
}

.app-shell .po-form-card .form-group>label{
  display:block;
  margin-bottom:6px;
  color:var(--text-2);
  font-size:10.5px;
  font-weight:750
}

.app-shell .po-form-card .form-control{
  height:42px;
  border-radius:9px;
  background:var(--surface-2)
}

.app-shell .po-form-card textarea.form-control{
  height:auto
}

.app-shell .po-form-card .input-group-addon{
  min-width:38px;
  border-color:var(--border);
  background:var(--surface-2);
  color:var(--text-3)
}

.app-shell .po-form-card .input-group-btn>.btn{
  height:42px;
  border-color:var(--border);
  border-radius:0 9px 9px 0;
  background:var(--surface);
  color:var(--brand)
}

.app-shell .po-input-with-icon{
  position:relative
}

.app-shell .po-input-with-icon>svg{
  position:absolute;
  top:50%;
  left:13px;
  z-index:2;
  color:var(--text-3);
  transform:translateY(-50%);
  pointer-events:none
}

.app-shell .po-input-with-icon>.form-control{
  padding-left:40px
}

.app-shell .po-order-details-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
  margin:0!important
}

.app-shell .po-order-details-grid>.po-field{
  width:auto!important;
  min-width:0;
  float:none!important;
  margin:0!important;
  padding:0!important
}

.app-shell .po-order-details-grid>.po-field-supplier{
  grid-column:span 2
}

.app-shell .po-order-details-grid>.po-field-address{
  grid-column:span 2
}

/* The picker is one field among the others, at the height of the inputs beside it — it ran two
   columns wide with a title repeating the label above it. Same treatment as every other picker. */

.app-shell .po-order-details-grid>.po-field-document{
  grid-column:auto;
  min-width:0
}

/* Which requisitions an order answers is part of the order: on the row with the rest of it, rather
   than alone under a rule that made it look like a separate step. */

.app-shell .po-order-details-grid>.po-field-requisition{
  grid-column:auto;
  min-width:0
}

.app-shell .po-field-address>strong{
  display:block;
  margin:0 0 6px;
  color:var(--text-2);
  font-size:10.5px;
  font-weight:750
}

.app-shell .po-order-details-card #supplier_address_div{
  min-height:42px;
  margin-top:0;
  padding:9px 11px;
  border:1px dashed color-mix(in srgb,var(--info) 20%,var(--border));
  border-radius:9px;
  background:color-mix(in srgb,var(--info-weak) 35%,var(--surface));
  color:var(--text-2);
  font-size:9.5px;
  line-height:1.45
}

.app-shell .po-order-details-card .help-block{
  margin:5px 0 0;
  font-size:8.5px;
  line-height:1.4
}

.app-shell .po-field-pay-term .multi-input{
  display:flex;
  flex-wrap:wrap
}

.app-shell .po-field-pay-term .multi-input>label{
  flex:1 0 90%;
  margin-bottom:6px;
  color:var(--text-2);
  font-size:10.5px;
  font-weight:750
}

.app-shell .po-field-pay-term .multi-input>br{
  display:none
}

.app-shell .po-field-pay-term .multi-input>.form-control{
  width:50%!important;
  float:none!important;
  border-radius:9px 0 0 9px
}

.app-shell .po-field-pay-term .multi-input>.form-control+select.form-control{
  border-left:0;
  border-radius:0 9px 9px 0
}

.app-shell .po-field-document .file-input{
  width:100%
}

.app-shell .po-field-document .file-input .input-group{
  display:flex;
  width:100%;
  align-items:stretch
}

.app-shell .po-field-document .file-caption{
  min-width:0;
  flex:1
}

.app-shell .po-field-document .file-caption,.app-shell .po-field-document .file-caption-name{
  height:42px;
  border-color:var(--border);
  background:var(--surface-2)
}

.app-shell .po-field-document .fileinput-remove-button,.app-shell .po-field-document .btn-file{
  height:42px;
  padding:0 13px;
  border-color:var(--border);
  background:var(--surface);
  color:var(--text-2);
  font-size:9.5px;
  font-weight:800
}

.app-shell .po-field-document .btn-file{
  border-radius:0 9px 9px 0;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .po-field-document .fileinput-remove-button{
  border-radius:0
}

.app-shell .po-products-card>.tw-p-2{
  overflow:visible
}

.app-shell .po-product-search-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
  gap:10px;
  margin:0 0 14px!important;
  padding:10px;
  border:1px solid color-mix(in srgb,var(--info) 15%,var(--border));
  border-radius:11px;
  background:color-mix(in srgb,var(--info-weak) 30%,var(--surface))
}

.app-shell .po-product-search-row>.po-product-search,.app-shell .po-product-search-row>.po-product-quick-add{
  width:auto!important;
  float:none!important;
  margin:0!important;
  padding:0!important
}

.app-shell #purchase-product-search-panel{
  position:relative;
  z-index:32
}

.app-shell #purchase-product-search-panel.is-search-open .po-product-search-control{
  filter:drop-shadow(0 8px 14px rgba(16,32,24,.08))
}

.app-shell .po-product-search-control{
  position:relative
}

.app-shell .po-product-search-control>svg{
  position:absolute;
  top:50%;
  left:13px;
  z-index:2;
  color:var(--text-3);
  transform:translateY(-50%);
  pointer-events:none
}

.app-shell .po-product-search-control:has(.ui-autocomplete-loading):after{
  position:absolute;
  top:50%;
  right:13px;
  width:16px;
  height:16px;
  margin-top:-8px;
  border:2px solid var(--brand-weak);
  border-top-color:var(--brand);
  border-radius:50%;
  content:"";
  animation:note-submit-spin .7s linear infinite
}

.app-shell .po-products-card #search_product{
  height:44px;
  padding-left:40px;
  border-color:var(--border);
  background:var(--surface)
}

.app-shell .po-products-card #search_product:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 10%,transparent)
}

.app-shell .po-products-card .btn-link{
  display:inline-flex;
  height:44px;
  align-items:center;
  gap:6px;
  padding:0 12px;
  border:1px solid color-mix(in srgb,var(--brand) 20%,var(--border));
  border-radius:9px;
  background:var(--surface);
  color:var(--brand-strong);
  font-size:9.5px;
  font-weight:800;
  text-decoration:none;
  white-space:nowrap
}

.app-shell .po-products-card .btn-link:hover{
  border-color:var(--brand);
  background:var(--brand-weak)
}

.app-shell .po-product-search-row .form-group{
  margin:0
}

body.app-ui .po-product-autocomplete.ui-autocomplete{
  box-sizing:border-box;
  max-height:310px;
  margin:6px 0 0!important;
  padding:6px!important;
  overflow-x:hidden;
  overflow-y:auto;
  border:1px solid color-mix(in srgb,var(--brand) 34%,var(--border))!important;
  border-radius:12px;
  background:var(--surface)!important;
  color:var(--text);
  box-shadow:0 22px 48px -20px rgba(16,32,24,.42),0 8px 18px -12px rgba(21,154,77,.3);
  font-family:'Plus Jakarta Sans','Noto Sans Khmer',system-ui,sans-serif;
  font-size:12px;
  z-index:100000!important
}

/* The Add Sale suggestions. The label and purchase screens each dress their own dropdown; this one
   was left with jQuery UI's defaults, which is why the same list looked like a different control.
   Rows are built by pos.js with one shape each — name, SKU, then price and stock. */

body.app-ui .sell-product-autocomplete.ui-autocomplete{
  box-sizing:border-box;
  max-height:310px;
  margin:6px 0 0!important;
  padding:6px!important;
  overflow-x:hidden;
  overflow-y:auto;
  border:1px solid color-mix(in srgb,var(--brand) 34%,var(--border))!important;
  border-radius:12px;
  background:var(--surface)!important;
  color:var(--text);
  box-shadow:0 22px 48px -20px rgba(16,32,24,.42),0 8px 18px -12px rgba(21,154,77,.3);
  font-family:'Plus Jakarta Sans','Noto Sans Khmer',system-ui,sans-serif;
  font-size:12px;
  z-index:100000!important
}

body.app-ui .sell-product-autocomplete.ui-autocomplete .ui-menu-item{
  list-style:none
}

body.app-ui .sell-product-autocomplete.ui-autocomplete .ui-menu-item>div{
  border:0;
  border-radius:9px;
  background:transparent
}

body.app-ui .sell-product-autocomplete.ui-autocomplete .ui-menu-item>div.ui-state-active,body.app-ui .sell-product-autocomplete.ui-autocomplete .ui-menu-item>div:hover{
  margin:0;
  border:0;
  background:var(--brand-weak)
}

/* A product with nothing left is shown so staff know it exists, and dimmed so it is not mistaken
   for one they can put on the sale. */

body.app-ui .sell-product-autocomplete.ui-autocomplete .ui-state-disabled{
  opacity:1
}

body.app-ui .sell-product-autocomplete.ui-autocomplete .ui-state-disabled>div{
  background:transparent;
  cursor:not-allowed
}

body.app-ui .po-product-autocomplete .ui-menu-item{
  margin:0 0 3px;
  padding:0;
  border:0;
  background:transparent;
  list-style:none
}

body.app-ui .po-product-autocomplete .ui-menu-item:last-child{
  margin-bottom:0
}

body.app-ui .po-product-autocomplete .ui-menu-item-wrapper,body.app-ui .po-product-autocomplete .ui-menu-item-wrapper.ui-state-active{
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:9px;
  background:transparent!important;
  color:inherit!important
}

body.app-ui .po-product-search-result{
  display:grid;
  min-width:0;
  grid-template-columns:38px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  min-height:54px;
  padding:7px 9px;
  border:1px solid transparent;
  border-radius:9px;
  background:var(--surface);
  transition:border-color .12s,background .12s,box-shadow .12s
}

body.app-ui .po-product-autocomplete .ui-menu-item-wrapper:hover .po-product-search-result,body.app-ui .po-product-autocomplete .ui-state-active .po-product-search-result{
  border-color:color-mix(in srgb,var(--brand) 25%,var(--border));
  background:var(--brand-weak);
  box-shadow:inset 3px 0 0 var(--brand)
}

body.app-ui .po-product-search-result-icon{
  display:inline-flex;
  width:36px;
  height:36px;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface-2)
}

body.app-ui .po-product-search-result-icon:before{
  width:18px;
  height:18px;
  border:1.5px solid var(--brand-strong);
  border-radius:5px;
  background:linear-gradient(135deg,transparent 42%,color-mix(in srgb,var(--brand) 18%,transparent) 43%);
  content:"";
  box-shadow:inset 0 0 0 3px var(--surface-2)
}

body.app-ui .po-product-search-result-copy{
  display:block;
  min-width:0
}

body.app-ui .po-product-search-result-copy strong,body.app-ui .po-product-search-result-copy small{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

body.app-ui .po-product-search-result-copy strong{
  color:var(--text);
  font-size:12px;
  font-weight:750;
  line-height:1.35
}

body.app-ui .po-product-search-result-copy small{
  margin-top:3px;
  color:var(--text-3);
  font-size:9.5px;
  font-weight:650;
  letter-spacing:.1px
}

body.app-ui .po-product-search-result-action{
  display:inline-flex;
  height:26px;
  align-items:center;
  padding:0 9px;
  border:1px solid color-mix(in srgb,var(--brand) 24%,var(--border));
  border-radius:7px;
  background:var(--surface);
  color:var(--brand-strong);
  font-size:9.5px;
  font-weight:800
}

body.app-ui .po-product-autocomplete .ui-state-active .po-product-search-result-action{
  border-color:var(--brand);
  background:var(--brand);
  color:#fff
}

.app-shell .po-products-card .table-responsive{
  margin-top:4px;
  overflow:auto;
  border:1px solid var(--border);
  border-radius:10px
}

.app-shell .po-products-card #purchase_entry_table{
  min-width:1120px;
  margin:0;
  border:0!important
}

.app-shell .po-products-card #purchase_entry_table thead th{
  padding:10px 9px!important;
  border-color:var(--border-2)!important;
  background:var(--surface-2)!important;
  color:var(--text-3)!important;
  font-size:8px!important;
  font-weight:850!important;
  letter-spacing:.035em;
  text-transform:uppercase
}

.app-shell .po-products-card #purchase_entry_table tbody td{
  padding:9px!important;
  border-color:var(--border-2)!important;
  vertical-align:middle
}

.app-shell .po-products-card hr{
  display:none
}

.app-shell .po-products-card .pull-right.col-md-5{
  margin-top:10px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface-2)
}

.app-shell .po-products-card .pull-right.col-md-5 table{
  width:100%
}

.app-shell .po-products-card .pull-right.col-md-5 th,.app-shell .po-products-card .pull-right.col-md-5 td{
  padding:4px;
  color:var(--text-2);
  font-size:10px
}

.app-shell .po-delivery-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  margin:0!important
}

.app-shell .po-delivery-grid>[class*=col-]{
  width:auto!important;
  min-width:0;
  float:none!important;
  margin:0!important;
  padding:0!important
}

.app-shell .po-delivery-grid>.clearfix{
  display:none!important
}

.app-shell .po-delivery-card textarea,.app-shell .po-notes-card textarea{
  min-height:94px;
  resize:vertical
}

.app-shell .po-delivery-card #toggle_additional_expense{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:8px 11px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface-2);
  color:var(--text-2);
  font-size:9.5px;
  font-weight:800
}

.app-shell .po-delivery-card #additional_expenses_div{
  margin-top:10px;
  padding:10px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface-2)
}

.app-shell .po-delivery-card #additional_expenses_div table{
  margin:0
}

.app-shell .po-delivery-card #additional_expenses_div th{
  color:var(--text-3);
  font-size:8.5px;
  text-transform:uppercase
}

.app-shell .po-delivery-card .col-md-4.col-md-offset-8{
  display:flex;
  min-height:48px;
  align-items:center;
  justify-content:space-between;
  margin-top:12px;
  padding:10px 13px;
  border-radius:10px;
  background:linear-gradient(110deg,var(--info-weak),var(--surface));
  color:var(--text-2)
}

.app-shell .po-delivery-card #grand_total{
  color:var(--info);
  font-size:16px;
  font-weight:900
}

.app-shell .po-notes-card table{
  width:100%;
  margin:0
}

.app-shell .po-form-submit-bar{
  position:fixed;
  right:18px;
  bottom:12px;
  z-index:50;
  width:auto;
  margin:0!important;
  padding:8px;
  border:1px solid var(--border);
  border-radius:12px;
  background:color-mix(in srgb,var(--surface) 92%,transparent);
  box-shadow:0 14px 36px -16px rgba(18,32,24,.42);
  backdrop-filter:blur(12px)
}

.app-shell .po-form-submit-bar>div{
  display:flex;
  align-items:center;
  gap:8px;
  padding:0!important
}

.app-shell .po-form-submit-bar .btn-primary,.app-shell .po-form-submit-bar .btn-ghost{
  min-width:96px;
  justify-content:center
}

.app-shell .po-detail-modal-dialog{
  width:min(1240px,calc(100% - 28px));
  max-width:none;
  margin:24px auto
}

.app-shell .po-detail-modal-content{
  display:flex;
  max-height:calc(100vh - 48px);
  flex-direction:column;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:15px;
  background:var(--surface);
  box-shadow:0 28px 80px -28px rgba(17,31,23,.55)
}

.app-shell .po-detail-header{
  display:flex;
  min-height:78px;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:14px 18px;
  border-bottom:1px solid var(--border);
  background:linear-gradient(120deg,var(--brand-weak),var(--surface) 38%)
}

.app-shell .po-detail-heading{
  display:flex;
  min-width:0;
  align-items:center;
  gap:12px
}

.app-shell .po-detail-heading-icon{
  display:inline-flex;
  width:42px;
  height:42px;
  flex:none;
  align-items:center;
  justify-content:center;
  border-radius:11px;
  background:var(--surface);
  color:var(--brand-strong);
  box-shadow:var(--shadow-sm)
}

.app-shell .po-detail-eyebrow{
  margin-bottom:2px;
  color:var(--brand-strong);
  font-size:9px;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase
}

.app-shell .po-detail-title-row{
  display:flex;
  align-items:center;
  gap:9px
}

.app-shell .po-detail-title-row h2{
  margin:0;
  color:var(--text);
  font-size:19px;
  font-weight:850;
  letter-spacing:-.025em
}

.app-shell .po-detail-reference{
  display:inline-flex;
  min-height:25px;
  align-items:center;
  padding:3px 8px;
  border:1px solid var(--border);
  border-radius:7px;
  background:var(--surface);
  color:var(--text-2);
  font-size:11.5px;
  font-weight:750
}

.app-shell .po-detail-header-actions{
  display:flex;
  align-items:center;
  gap:9px
}

.app-shell .po-modal-status{
  display:inline-flex;
  min-height:28px;
  align-items:center;
  gap:6px;
  padding:4px 9px;
  border:1px solid;
  border-radius:999px;
  font-size:10.5px;
  font-weight:800
}

.app-shell .po-modal-status:before{
  width:6px;
  height:6px;
  border-radius:50%;
  background:currentColor;
  content:""
}

.app-shell .po-modal-status.is-ordered{
  border-color:#b9d1ff;
  background:#eaf2ff;
  color:#2563d9
}

.app-shell .po-modal-status.is-partial{
  border-color:#f4d29c;
  background:#fff4df;
  color:#b86a08
}

.app-shell .po-modal-status.is-completed{
  border-color:#b8dec8;
  background:#eaf7ef;
  color:#23834a
}

.app-shell .po-detail-close{
  display:inline-flex;
  width:36px;
  height:36px;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface);
  color:var(--text-2);
  transition:.16s ease
}

.app-shell .po-detail-close:hover{
  border-color:var(--danger);
  background:var(--danger-weak);
  color:var(--danger)
}

.app-shell .po-detail-body{
  min-height:0;
  flex:1;
  overflow-y:auto;
  padding:16px;
  background:var(--surface-2)
}

.app-shell .po-detail-overview{
  display:grid;
  grid-template-columns:1.15fr 1.15fr .9fr;
  gap:12px
}

.app-shell .po-detail-context-card{
  display:grid;
  grid-template-columns:38px minmax(0,1fr);
  gap:11px;
  min-height:142px;
  padding:14px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

.app-shell .po-detail-context-icon{
  display:inline-flex;
  width:38px;
  height:38px;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .po-detail-context-card.is-delivery .po-detail-context-icon{
  background:var(--blue-weak);
  color:var(--blue)
}

.app-shell .po-detail-context-card.is-schedule .po-detail-context-icon{
  background:var(--warn-weak);
  color:var(--warn)
}

.app-shell .po-detail-context-copy{
  min-width:0
}

.app-shell .po-detail-card-label{
  display:block;
  margin-bottom:4px;
  color:var(--text-3);
  font-size:9px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase
}

.app-shell .po-detail-context-copy>strong{
  display:block;
  color:var(--text);
  font-size:13.5px;
  font-weight:850;
  line-height:1.35
}

.app-shell .po-detail-context-copy>p{
  display:-webkit-box;
  overflow:hidden;
  margin:4px 0 8px;
  color:var(--text-2);
  font-size:11px;
  line-height:1.5;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2
}

.app-shell .po-detail-inline-meta{
  display:flex;
  flex-wrap:wrap;
  gap:5px 10px;
  color:var(--text-3);
  font-size:9.5px
}

.app-shell .po-detail-inline-meta span{
  display:inline-flex;
  min-width:0;
  align-items:center;
  gap:4px
}

.app-shell .po-detail-schedule-list{
  display:grid;
  gap:7px;
  margin:1px 0 0
}

.app-shell .po-detail-schedule-list>div{
  display:flex;
  align-items:start;
  justify-content:space-between;
  gap:12px;
  padding-bottom:6px;
  border-bottom:1px solid var(--border-2)
}

.app-shell .po-detail-schedule-list>div:last-child{
  padding-bottom:0;
  border-bottom:0
}

.app-shell .po-detail-schedule-list dt{
  color:var(--text-3);
  font-size:9.5px
}

.app-shell .po-detail-schedule-list dd{
  margin:0;
  color:var(--text);
  font-size:10px;
  font-weight:750;
  text-align:right
}

.app-shell .po-detail-section{
  overflow:hidden;
  margin-top:14px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

.app-shell .po-detail-section-head{
  display:flex;
  min-height:58px;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 13px;
  border-bottom:1px solid var(--border-2);
  background:var(--surface)
}

.app-shell .po-detail-section-head>div{
  display:flex;
  min-width:0;
  align-items:center;
  gap:10px
}

.app-shell .po-detail-section-icon{
  display:inline-flex;
  width:34px;
  height:34px;
  flex:none;
  align-items:center;
  justify-content:center;
  border-radius:9px;
  background:var(--surface-2);
  color:var(--text-2)
}

.app-shell .po-detail-section-head h3,.app-shell .po-detail-section-head p{
  margin:0
}

.app-shell .po-detail-section-head h3{
  color:var(--text);
  font-size:13px;
  font-weight:850
}

.app-shell .po-detail-section-head p{
  margin-top:2px;
  color:var(--text-3);
  font-size:9.5px
}

.app-shell .po-detail-count{
  display:inline-flex;
  min-height:25px;
  align-items:center;
  padding:3px 8px;
  border:1px solid var(--border);
  border-radius:7px;
  background:var(--surface-2);
  color:var(--text-2);
  font-size:9.5px;
  font-weight:750
}

.app-shell .po-detail-table-wrap{
  overflow-x:auto
}

.app-shell .po-detail-lines-table{
  width:100%;
  min-width:850px;
  border-collapse:collapse;
  table-layout:fixed
}

.app-shell .po-detail-lines-table th{
  padding:9px 11px;
  border-bottom:1px solid var(--border-2);
  background:var(--surface-2);
  color:var(--text-3);
  font-size:8px;
  font-weight:850;
  letter-spacing:.035em;
  text-align:left;
  text-transform:uppercase
}

.app-shell .po-detail-lines-table td{
  padding:11px;
  border-bottom:1px solid var(--border-2);
  color:var(--text-2);
  font-size:10.5px;
  vertical-align:middle
}

.app-shell .po-detail-lines-table tbody tr:last-child td{
  border-bottom:0
}

.app-shell .po-detail-lines-table tbody tr:hover{
  background:color-mix(in srgb,var(--brand-weak) 32%,var(--surface))
}

.app-shell .po-detail-lines-table .po-detail-product-column{
  width:34%
}

.app-shell .po-detail-lines-table .is-number{
  text-align:right;
  font-variant-numeric:tabular-nums
}

.app-shell .po-detail-lines-table td.is-number>strong,.app-shell .po-detail-lines-table td.is-number>small{
  display:block
}

.app-shell .po-detail-lines-table td.is-number>small{
  margin-top:2px;
  color:var(--text-3);
  font-size:8px
}

.app-shell .po-detail-product{
  display:grid;
  grid-template-columns:42px minmax(0,1fr);
  align-items:center;
  gap:9px;
  text-align:left
}

.app-shell .po-detail-product-media{
  display:inline-flex;
  width:42px;
  height:42px;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .po-detail-product-media img{
  width:100%;
  height:100%;
  -o-object-fit:cover;
     object-fit:cover
}

.app-shell .po-detail-product-copy{
  min-width:0
}

.app-shell .po-detail-product-copy strong{
  display:block;
  color:var(--text);
  font-size:11px;
  font-weight:800;
  line-height:1.35
}

.app-shell .po-detail-product-copy small{
  display:block;
  margin-top:2px;
  color:var(--text-3);
  font-size:8.5px
}

.app-shell .po-detail-sku{
  display:inline-flex;
  margin-top:5px;
  padding:2px 5px;
  border:1px solid var(--border);
  border-radius:5px;
  background:var(--surface-2);
  color:var(--text-2);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:8px
}

.app-shell .po-detail-remaining{
  display:inline-flex;
  min-height:24px;
  align-items:center;
  padding:3px 7px;
  border-radius:7px;
  font-size:9px;
  font-weight:800
}

.app-shell .po-detail-remaining.has-remaining{
  background:var(--warn-weak);
  color:#ad6507
}

.app-shell .po-detail-remaining.is-complete{
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .po-detail-line-total{
  color:var(--brand-strong)!important;
  font-weight:850
}

.app-shell .po-detail-lower-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 310px;
  gap:14px;
  align-items:start
}

.app-shell .po-detail-lower-main{
  min-width:0
}

.app-shell .po-detail-note-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  padding:12px
}

.app-shell .po-detail-note-grid article{
  min-height:78px;
  padding:10px;
  border:1px solid var(--border-2);
  border-radius:9px;
  background:var(--surface-2)
}

.app-shell .po-detail-note-grid span{
  display:block;
  margin-bottom:5px;
  color:var(--text-3);
  font-size:9px;
  font-weight:800;
  text-transform:uppercase
}

.app-shell .po-detail-note-grid p{
  margin:0;
  color:var(--text-2);
  font-size:10.5px;
  line-height:1.5;
  white-space:pre-line
}

.app-shell .po-detail-timeline{
  display:grid;
  padding:4px 13px 10px
}

.app-shell .po-detail-timeline-item{
  position:relative;
  display:grid;
  grid-template-columns:12px minmax(0,1fr);
  gap:8px;
  padding:9px 0
}

.app-shell .po-detail-timeline-item:not(:last-child):before{
  position:absolute;
  top:21px;
  bottom:-9px;
  left:4px;
  width:1px;
  background:var(--border);
  content:""
}

.app-shell .po-detail-timeline-dot{
  position:relative;
  z-index:1;
  width:9px;
  height:9px;
  margin-top:4px;
  border:2px solid var(--surface);
  border-radius:50%;
  background:var(--brand);
  box-shadow:0 0 0 1px var(--brand)
}

.app-shell .po-detail-timeline-item strong{
  color:var(--text);
  font-size:10.5px;
  font-weight:800
}

.app-shell .po-detail-timeline-item p{
  margin:2px 0 0;
  color:var(--text-3);
  font-size:9px
}

.app-shell .po-detail-timeline-item small{
  display:block;
  margin-top:4px;
  color:var(--text-2);
  font-size:9px
}

.app-shell .po-detail-summary-card{
  position:sticky;
  top:0;
  overflow:hidden;
  margin-top:14px;
  border:1px solid color-mix(in srgb,var(--brand) 24%,var(--border));
  border-radius:12px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

.app-shell .po-detail-summary-head{
  display:flex;
  align-items:center;
  gap:9px;
  padding:12px;
  border-bottom:1px solid var(--border);
  background:var(--brand-weak)
}

.app-shell .po-detail-summary-head>span{
  display:inline-flex;
  width:32px;
  height:32px;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  background:var(--surface);
  color:var(--brand-strong)
}

.app-shell .po-detail-summary-head strong,.app-shell .po-detail-summary-head small{
  display:block
}

.app-shell .po-detail-summary-head strong{
  color:var(--text);
  font-size:12px;
  font-weight:850
}

.app-shell .po-detail-summary-head small{
  margin-top:1px;
  color:var(--text-3);
  font-size:8.5px
}

.app-shell .po-detail-summary-list{
  display:grid;
  margin:0;
  padding:7px 12px
}

.app-shell .po-detail-summary-list>div{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  padding:7px 0;
  border-bottom:1px solid var(--border-2)
}

.app-shell .po-detail-summary-list>div:last-child{
  border-bottom:0
}

.app-shell .po-detail-summary-list dt{
  color:var(--text-2);
  font-size:9.5px
}

.app-shell .po-detail-summary-list dd{
  margin:0;
  color:var(--text);
  font-size:10px;
  font-weight:750;
  font-variant-numeric:tabular-nums
}

.app-shell .po-detail-grand-total{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:12px;
  padding:12px;
  border-top:1px solid #bfe0cb;
  background:#eaf7ef;
  color:#1e7740
}

.app-shell .po-detail-grand-total span{
  font-size:10px;
  font-weight:800
}

.app-shell .po-detail-grand-total strong{
  font-size:17px;
  font-weight:900;
  letter-spacing:-.02em
}

.app-shell .po-detail-document-link{
  display:grid;
  grid-template-columns:18px minmax(0,1fr) 18px;
  align-items:center;
  gap:8px;
  margin:10px;
  padding:9px;
  border:1px solid var(--border);
  border-radius:8px;
  color:var(--text-2);
  font-size:9.5px;
  font-weight:750
}

.app-shell .po-detail-document-link:hover{
  border-color:var(--brand);
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .po-detail-modal-footer{
  display:flex;
  min-height:62px;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 15px;
  border-top:1px solid var(--border);
  background:var(--surface)
}

.app-shell .po-detail-modal-footer>div{
  display:flex;
  align-items:center;
  gap:8px
}

.app-shell .po-detail-modal-footer .btn-primary,.app-shell .po-detail-modal-footer .btn-ghost{
  min-width:92px;
  justify-content:center
}

.app-shell .po-detail-footer-reference{
  color:var(--text-3);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:9.5px;
  font-weight:700
}

@media (max-width:1080px){
  .app-shell .po-stage-board{
    grid-template-columns:1fr
  }

  .app-shell .po-stage-intro{
    border-right:0;
    border-bottom:1px solid var(--border)
  }

  .app-shell .po-filter-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}

@media (max-width:900px){
  .app-shell .po-detail-overview{
    grid-template-columns:1fr 1fr
  }

  .app-shell .po-detail-context-card.is-schedule{
    grid-column:1/-1;
    min-height:auto
  }

  .app-shell .po-detail-lower-grid{
    grid-template-columns:1fr
  }

  .app-shell .po-detail-summary-card{
    position:static
  }
}

@media (max-width:680px){
  .app-shell .po-stage-options,.app-shell .po-filter-grid{
    grid-template-columns:1fr
  }

  .app-shell .po-stage-options small{
    white-space:normal
  }

  .app-shell .po-stage-intro{
    padding-right:62px
  }

  .app-shell .po-filter-head p{
    display:none
  }

  .app-shell .po-form-submit-bar{
    right:10px;
    bottom:10px;
    left:10px
  }

  .app-shell .po-form-submit-bar>div{
    justify-content:stretch
  }

  .app-shell .po-form-submit-bar .btn-primary,.app-shell .po-form-submit-bar .btn-ghost{
    flex:1
  }

  .app-shell .po-detail-modal-dialog{
    width:calc(100% - 12px);
    margin:6px auto
  }

  .app-shell .po-detail-modal-content{
    max-height:calc(100vh - 12px);
    border-radius:12px
  }

  .app-shell .po-detail-header{
    padding:11px
  }

  .app-shell .po-detail-heading-icon{
    width:36px;
    height:36px
  }

  .app-shell .po-detail-title-row{
    display:block
  }

  .app-shell .po-detail-title-row h2{
    font-size:16px
  }

  .app-shell .po-detail-reference{
    min-height:auto;
    margin-top:2px;
    padding:0;
    border:0;
    background:transparent
  }

  .app-shell .po-modal-status{
    display:none
  }

  .app-shell .po-detail-body{
    padding:10px
  }

  .app-shell .po-detail-overview,.app-shell .po-detail-note-grid{
    grid-template-columns:1fr
  }

  .app-shell .po-detail-context-card.is-schedule{
    grid-column:auto
  }

  .app-shell .po-detail-context-card{
    min-height:auto
  }

  .app-shell .po-detail-section-head p{
    display:none
  }

  .app-shell .po-detail-modal-footer{
    padding:9px
  }

  .app-shell .po-detail-footer-reference{
    display:none
  }

  .app-shell .po-detail-modal-footer>div{
    width:100%
  }

  .app-shell .po-detail-modal-footer .btn-primary,.app-shell .po-detail-modal-footer .btn-ghost{
    flex:1
  }
}

/* Shipping fulfilment editor shared by purchase orders and sales. */

.app-shell .shipping-edit-modal-dialog{
  width:min(920px,calc(100% - 24px));
  max-width:none;
  margin:24px auto
}

.app-shell .shipping-edit-modal-dialog>form{
  display:block
}

.app-shell .shipping-edit-modal-content{
  display:flex;
  max-height:calc(100vh - 48px);
  flex-direction:column;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:15px;
  background:var(--surface);
  box-shadow:0 28px 80px -28px rgba(17,31,23,.55)
}

.app-shell .shipping-edit-header{
  display:flex;
  min-height:76px;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 17px;
  border-bottom:1px solid var(--border);
  background:linear-gradient(120deg,var(--blue-weak),var(--surface) 46%)
}

.app-shell .shipping-edit-heading{
  display:flex;
  min-width:0;
  align-items:center;
  gap:11px
}

.app-shell .shipping-edit-heading-icon{
  display:inline-flex;
  width:42px;
  height:42px;
  flex:none;
  align-items:center;
  justify-content:center;
  border-radius:11px;
  background:var(--surface);
  color:var(--blue);
  box-shadow:var(--shadow-sm)
}

.app-shell .shipping-edit-eyebrow{
  margin-bottom:2px;
  color:var(--blue);
  font-size:8.5px;
  font-weight:850;
  letter-spacing:.1em;
  text-transform:uppercase
}

.app-shell .shipping-edit-title-row{
  display:flex;
  align-items:center;
  gap:8px
}

.app-shell .shipping-edit-title-row h2{
  margin:0;
  color:var(--text);
  font-size:18px;
  font-weight:850;
  letter-spacing:-.02em
}

.app-shell .shipping-edit-title-row span{
  display:inline-flex;
  min-height:24px;
  align-items:center;
  padding:3px 7px;
  border:1px solid var(--border);
  border-radius:7px;
  background:var(--surface);
  color:var(--text-2);
  font-size:10px;
  font-weight:750
}

.app-shell .shipping-edit-close{
  display:inline-flex;
  width:36px;
  height:36px;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface);
  color:var(--text-2);
  transition:.15s ease
}

.app-shell .shipping-edit-close:hover{
  border-color:var(--danger);
  background:var(--danger-weak);
  color:var(--danger)
}

.app-shell .shipping-edit-body{
  min-height:0;
  flex:1;
  overflow-y:auto;
  padding:14px;
  background:var(--surface-2)
}

.app-shell .shipping-edit-section{
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

.app-shell .shipping-edit-section.is-plan,.app-shell .shipping-edit-section.is-custom{
  position:relative;
  z-index:2;
  overflow:visible
}

.app-shell .shipping-edit-section+.shipping-edit-section{
  margin-top:12px
}

.app-shell .shipping-edit-section-head{
  display:grid;
  grid-template-columns:34px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  min-height:58px;
  padding:10px 12px;
  border-bottom:1px solid var(--border-2);
  background:var(--surface)
}

.app-shell .shipping-edit-section-head>span:first-child{
  display:inline-flex;
  width:34px;
  height:34px;
  align-items:center;
  justify-content:center;
  border-radius:9px;
  background:var(--blue-weak);
  color:var(--blue)
}

.app-shell .shipping-edit-section-head h3,.app-shell .shipping-edit-section-head p{
  margin:0
}

.app-shell .shipping-edit-section-head h3{
  color:var(--text);
  font-size:12.5px;
  font-weight:850
}

.app-shell .shipping-edit-section-head p{
  margin-top:2px;
  color:var(--text-3);
  font-size:9.5px
}

.app-shell .shipping-edit-plan-grid{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:12px;
  padding:13px
}

.app-shell .shipping-edit-plan-grid>.is-wide{
  grid-column:span 3
}

.app-shell .shipping-edit-plan-grid>.shipping-edit-field:not(.is-wide){
  grid-column:span 2
}

.app-shell .shipping-edit-field{
  min-width:0;
  margin:0
}

.app-shell .shipping-edit-field>label{
  display:block;
  margin:0 0 6px;
  color:var(--text-2);
  font-size:10.5px;
  font-weight:750
}

.app-shell .shipping-edit-field .form-control,.app-shell .shipping-edit-section-body>.form-control,.app-shell .shipping-edit-custom-grid .form-control{
  display:block;
  width:100%;
  height:42px;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface-2);
  padding:0 11px;
  color:var(--text);
  font:inherit;
  font-size:12px;
  outline:none;
  box-shadow:none;
  transition:border-color .15s,background .15s,box-shadow .15s
}

.app-shell .shipping-edit-field textarea.form-control,.app-shell .shipping-edit-section-body>textarea.form-control{
  height:auto;
  min-height:98px;
  padding:10px 11px;
  line-height:1.5;
  resize:vertical
}

.app-shell .shipping-edit-field .form-control:focus,.app-shell .shipping-edit-section-body>.form-control:focus,.app-shell .shipping-edit-custom-grid .form-control:focus{
  border-color:var(--brand);
  background:var(--surface);
  box-shadow:0 0 0 3px rgba(21,154,77,.1)
}

.app-shell .shipping-edit-control{
  position:relative
}

.app-shell .shipping-edit-control>svg{
  position:absolute;
  z-index:2;
  left:11px;
  top:50%;
  color:var(--text-3);
  pointer-events:none;
  transform:translateY(-50%)
}

.app-shell .shipping-edit-control.has-icon>.form-control{
  padding-left:35px
}

.app-shell .shipping-edit-control.has-top-icon>svg{
  top:12px;
  transform:none
}

.app-shell .shipping-edit-control.has-top-icon>textarea.form-control{
  padding-left:35px
}

.app-shell .shipping-edit-control .select2-container{
  width:100%!important
}

.app-shell .shipping-edit-control.has-icon .select2-container .select2-selection--single{
  padding-left:32px!important
}

body.app-ui .shipping-edit-select-dropdown{
  z-index:100100!important;
  overflow:hidden!important;
  border-color:color-mix(in srgb,var(--brand) 44%,var(--border))!important;
  border-radius:10px!important;
  box-shadow:0 18px 38px -16px rgba(16,32,24,.42)!important
}

body.app-ui .shipping-edit-select-dropdown .select2-search--dropdown{
  padding:8px!important
}

body.app-ui .shipping-edit-select-dropdown .select2-search__field{
  height:36px!important;
  border-color:var(--border)!important;
  border-radius:8px!important;
  background:var(--surface-2)!important
}

body.app-ui .shipping-edit-select-dropdown .select2-results__options{
  max-height:210px!important;
  padding:5px!important
}

.app-shell .shipping-edit-custom-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  padding:13px
}

.app-shell .shipping-edit-support-grid{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:12px;
  margin-top:12px
}

.app-shell .shipping-edit-support-grid>.shipping-edit-section{
  margin-top:0
}

.app-shell .shipping-edit-section-body{
  padding:12px
}

.app-shell .shipping-edit-dropzone{
  display:flex;
  min-height:112px;
  align-items:center;
  justify-content:center;
  padding:14px;
  border:1.5px dashed var(--border)!important;
  border-radius:10px;
  background:var(--surface-2);
  color:var(--text-2);
  cursor:pointer;
  transition:border-color .15s,background .15s,box-shadow .15s
}

.app-shell .shipping-edit-dropzone:hover,.app-shell .shipping-edit-dropzone.dz-drag-hover{
  border-color:var(--brand)!important;
  background:var(--brand-weak);
  box-shadow:0 0 0 3px rgba(21,154,77,.08)
}

.app-shell .shipping-edit-dropzone .dz-message{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin:0;
  text-align:left
}

.app-shell .shipping-edit-dropzone .dz-message>span{
  display:inline-flex;
  width:38px;
  height:38px;
  align-items:center;
  justify-content:center;
  border-radius:9px;
  background:var(--surface);
  color:var(--brand-strong);
  box-shadow:var(--shadow-sm)
}

.app-shell .shipping-edit-dropzone .dz-message strong,.app-shell .shipping-edit-dropzone .dz-message small{
  display:block
}

.app-shell .shipping-edit-dropzone .dz-message strong{
  color:var(--text);
  font-size:11px;
  font-weight:800
}

.app-shell .shipping-edit-dropzone .dz-message small{
  margin-top:2px;
  color:var(--text-3);
  font-size:8.5px
}

.app-shell .shipping-edit-dropzone.dz-started{
  display:block;
  min-height:0;
  padding:9px
}

.app-shell .shipping-edit-dropzone.dz-started .dz-message{
  display:none
}

.app-shell .shipping-edit-dropzone .dz-preview{
  position:relative;
  display:grid;
  grid-template-columns:42px minmax(0,1fr) 26px 28px;
  gap:9px;
  align-items:center;
  width:100%;
  min-height:58px;
  margin:0 0 7px;
  padding:7px 9px;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface)
}

.app-shell .shipping-edit-dropzone .dz-preview:last-child{
  margin-bottom:0
}

.app-shell .shipping-edit-dropzone .dz-preview .dz-image{
  position:static!important;
  display:block!important;
  grid-column:1;
  width:42px!important;
  height:42px!important;
  overflow:hidden;
  border:0!important;
  border-radius:7px!important;
  background:var(--surface-3)!important;
  z-index:auto!important
}

.app-shell .shipping-edit-dropzone .dz-preview .dz-image img{
  width:100%;
  height:100%;
  -o-object-fit:cover;
     object-fit:cover;
  filter:none!important;
  transform:none!important
}

.app-shell .shipping-edit-dropzone .dz-preview .dz-details{
  position:static!important;
  display:flex;
  grid-column:2;
  grid-row:1;
  min-width:0!important;
  max-width:none!important;
  flex-direction:column;
  padding:0!important;
  color:var(--text)!important;
  text-align:left!important;
  opacity:1!important
}

.app-shell .shipping-edit-dropzone .dz-preview .dz-filename{
  order:-1;
  overflow:hidden;
  color:var(--text);
  font-size:10.5px;
  font-weight:750;
  white-space:nowrap;
  text-overflow:ellipsis
}

.app-shell .shipping-edit-dropzone .dz-preview .dz-size{
  margin:2px 0 0!important;
  color:var(--text-3);
  font-size:9px!important
}

.app-shell .shipping-edit-dropzone .dz-preview .dz-filename span,.app-shell .shipping-edit-dropzone .dz-preview .dz-size span{
  padding:0!important;
  border:0!important;
  background:transparent!important
}

.app-shell .shipping-edit-dropzone .dz-preview .dz-progress{
  position:absolute!important;
  right:78px!important;
  bottom:7px!important;
  left:60px!important;
  top:auto!important;
  width:auto!important;
  height:3px!important;
  margin:0!important;
  overflow:hidden;
  border-radius:3px;
  background:var(--surface-3);
  opacity:1
}

.app-shell .shipping-edit-dropzone .dz-preview .dz-progress .dz-upload{
  position:absolute;
  inset:0 auto 0 0;
  background:var(--brand)
}

.app-shell .shipping-edit-dropzone .dz-preview.dz-complete .dz-progress{
  opacity:0
}

.app-shell .shipping-edit-dropzone .dz-preview .dz-success-mark,.app-shell .shipping-edit-dropzone .dz-preview .dz-error-mark{
  position:static!important;
  display:none!important;
  grid-column:3;
  grid-row:1;
  width:26px;
  height:26px;
  margin:0!important;
  align-items:center;
  justify-content:center;
  opacity:1!important
}

.app-shell .shipping-edit-dropzone .dz-preview.dz-success .dz-success-mark{
  display:flex!important
}

.app-shell .shipping-edit-dropzone .dz-preview.dz-error .dz-error-mark{
  display:flex!important
}

.app-shell .shipping-edit-dropzone .dz-preview .dz-success-mark svg,.app-shell .shipping-edit-dropzone .dz-preview .dz-error-mark svg{
  width:20px!important;
  height:20px!important
}

.app-shell .shipping-edit-dropzone .dz-preview .dz-error-message{
  display:none!important
}

.app-shell .shipping-edit-dropzone .dz-preview .dz-remove{
  display:flex!important;
  grid-column:4;
  grid-row:1;
  width:28px;
  height:28px;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border);
  border-radius:7px;
  background:var(--surface-2);
  color:var(--text-3);
  font-size:0!important;
  text-decoration:none!important
}

.app-shell .shipping-edit-dropzone .dz-preview .dz-remove:before{
  content:'\00d7';
  font-size:18px
}

.app-shell .shipping-edit-dropzone .dz-preview .dz-remove:hover{
  border-color:var(--danger);
  background:var(--danger-weak);
  color:var(--danger)
}

.app-shell .shipping-edit-section-count{
  display:inline-flex!important;
  width:auto!important;
  height:24px!important;
  padding:2px 7px;
  border:1px solid var(--border);
  border-radius:7px!important;
  background:var(--surface-2)!important;
  color:var(--text-2)!important;
  font-size:9px;
  font-weight:800
}

.app-shell .shipping-edit-file-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
  padding:12px
}

.app-shell .shipping-edit-file{
  display:grid;
  grid-template-columns:40px minmax(0,1fr) auto;
  align-items:center;
  gap:9px;
  min-width:0;
  padding:8px;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface-2)
}

.app-shell .shipping-edit-file-preview{
  display:inline-flex;
  width:40px;
  height:40px;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border-radius:8px;
  background:var(--surface);
  color:var(--brand-strong)
}

.app-shell .shipping-edit-file-preview img{
  width:100%;
  height:100%;
  -o-object-fit:cover;
     object-fit:cover
}

.app-shell .shipping-edit-file>div:nth-child(2){
  min-width:0
}

.app-shell .shipping-edit-file strong,.app-shell .shipping-edit-file small{
  display:block;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis
}

.app-shell .shipping-edit-file strong{
  color:var(--text);
  font-size:10.5px;
  font-weight:750
}

.app-shell .shipping-edit-file small{
  margin-top:2px;
  color:var(--text-3);
  font-size:8.5px
}

.app-shell .shipping-edit-file-actions{
  display:flex;
  gap:5px
}

.app-shell .shipping-edit-file-actions a,.app-shell .shipping-edit-file-actions button{
  display:inline-flex;
  width:30px;
  height:30px;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface);
  color:var(--text-2)
}

.app-shell .shipping-edit-file-actions a:hover{
  border-color:var(--brand);
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .shipping-edit-file-actions button:hover{
  border-color:var(--danger);
  background:var(--danger-weak);
  color:var(--danger)
}

.app-shell .shipping-edit-timeline{
  display:grid;
  padding:4px 13px 10px
}

.app-shell .shipping-edit-timeline-item{
  position:relative;
  display:grid;
  grid-template-columns:12px minmax(0,1fr);
  gap:8px;
  padding:9px 0
}

.app-shell .shipping-edit-timeline-item:not(:last-child):before{
  position:absolute;
  top:21px;
  bottom:-9px;
  left:4px;
  width:1px;
  background:var(--border);
  content:""
}

.app-shell .shipping-edit-timeline-item>span{
  position:relative;
  z-index:1;
  width:9px;
  height:9px;
  margin-top:4px;
  border:2px solid var(--surface);
  border-radius:50%;
  background:var(--blue);
  box-shadow:0 0 0 1px var(--blue)
}

.app-shell .shipping-edit-timeline-item strong{
  color:var(--text);
  font-size:10.5px;
  font-weight:800
}

.app-shell .shipping-edit-timeline-item p{
  margin:2px 0 0;
  color:var(--text-3);
  font-size:9px
}

.app-shell .shipping-edit-timeline-item small{
  display:block;
  margin-top:4px;
  color:var(--text-2);
  font-size:9px
}

.app-shell .shipping-edit-footer{
  display:flex;
  min-height:64px;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 14px;
  border-top:1px solid var(--border);
  background:var(--surface)
}

.app-shell .shipping-edit-footer>span{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--text-3);
  font-size:9px
}

.app-shell .shipping-edit-footer>div{
  display:flex;
  align-items:center;
  gap:8px
}

.app-shell .shipping-edit-footer .btn-primary,.app-shell .shipping-edit-footer .btn-ghost{
  min-width:96px;
  justify-content:center
}

@media (max-width:720px){
  .app-shell .shipping-edit-modal-dialog{
    width:calc(100% - 12px);
    margin:6px auto
  }

  .app-shell .shipping-edit-modal-content{
    max-height:calc(100vh - 12px);
    border-radius:12px
  }

  .app-shell .shipping-edit-header{
    padding:11px
  }

  .app-shell .shipping-edit-heading-icon{
    width:36px;
    height:36px
  }

  .app-shell .shipping-edit-title-row{
    display:block
  }

  .app-shell .shipping-edit-title-row h2{
    font-size:16px
  }

  .app-shell .shipping-edit-title-row span{
    min-height:auto;
    margin-top:2px;
    padding:0;
    border:0;
    background:transparent
  }

  .app-shell .shipping-edit-body{
    padding:10px
  }

  .app-shell .shipping-edit-plan-grid,.app-shell .shipping-edit-custom-grid,.app-shell .shipping-edit-support-grid,.app-shell .shipping-edit-file-list{
    grid-template-columns:1fr
  }

  .app-shell .shipping-edit-plan-grid>.is-wide,.app-shell .shipping-edit-plan-grid>.shipping-edit-field:not(.is-wide){
    grid-column:span 1
  }

  .app-shell .shipping-edit-section-head p{
    display:none
  }

  .app-shell .shipping-edit-footer{
    padding:9px
  }

  .app-shell .shipping-edit-footer>span{
    display:none
  }

  .app-shell .shipping-edit-footer>div{
    width:100%
  }

  .app-shell .shipping-edit-footer .btn-primary,.app-shell .shipping-edit-footer .btn-ghost{
    flex:1
  }
}

@media (max-width:1100px){
  .app-shell .po-order-details-grid,.app-shell .po-delivery-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}

@media (max-width:680px){
  .app-shell .po-order-details-grid,.app-shell .po-delivery-grid{
    grid-template-columns:1fr
  }

  .app-shell .po-order-details-grid>.po-field-supplier,.app-shell .po-order-details-grid>.po-field-address,.app-shell .po-order-details-grid>.po-field-document,.app-shell .po-order-details-grid>.po-field-requisition{
    grid-column:span 1
  }

  .app-shell .po-product-search-row{
    grid-template-columns:1fr
  }

  .app-shell .po-products-card .btn-ghost{
    width:100%;
    justify-content:center
  }
}

@media (max-width:640px){
  body.app-ui .po-product-search-result{
    grid-template-columns:34px minmax(0,1fr)
  }

  body.app-ui .po-product-search-result-icon{
    width:32px;
    height:32px
  }

  body.app-ui .po-product-search-result-action{
    display:none
  }
}

.app-shell .auto-message-stat{
  min-height:96px
}

.app-shell .auto-message-stat-icon.is-plan{
  background:var(--brand-weak);
  color:var(--brand)
}

.app-shell .auto-message-stat-icon.is-active{
  background:var(--teal-weak);
  color:var(--teal)
}

.app-shell .auto-message-stat-icon.is-message{
  background:var(--info-weak);
  color:var(--info)
}

.app-shell .auto-message-stat-icon.is-customer{
  background:var(--warn-weak);
  color:var(--warn)
}

.app-shell .auto-message-plans-card{
  overflow:hidden
}

.app-shell .auto-message-plans-head{
  border-bottom:1px solid var(--border);
  flex-wrap:wrap
}

/* Telegram Schedule: the schedules that are running but projecting nothing. They send nothing
   until somebody acts, so the panel reads as a warning rather than another list. */

.app-shell .tg-broken{
  border-color:color-mix(in srgb,var(--warn) 40%,var(--border));
  background:color-mix(in srgb,var(--warn) 5%,var(--surface));
  padding:14px 16px;
  margin-bottom:14px
}

.app-shell .tg-broken-head{
  display:flex;
  align-items:flex-start;
  gap:10px
}

.app-shell .tg-broken-icon{
  display:grid;
  width:32px;
  height:32px;
  flex:none;
  place-items:center;
  border-radius:9px;
  background:color-mix(in srgb,var(--warn) 16%,transparent);
  color:var(--warn)
}

.app-shell .tg-broken-head strong{
  display:block;
  color:var(--text);
  font-size:13.5px;
  font-weight:750
}

.app-shell .tg-broken-head small{
  display:block;
  margin-top:2px;
  color:var(--text-3);
  font-size:12px;
  line-height:1.5
}

.app-shell .tg-broken-list{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin:12px 0 0;
  padding:0;
  list-style:none
}

.app-shell .tg-broken-list>li{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  padding:7px 10px;
  border:1px solid var(--border-2);
  border-radius:9px;
  background:var(--surface)
}

.app-shell .tg-broken-contact{
  color:var(--text);
  font-size:12.5px;
  font-weight:750
}

.app-shell .tg-broken-plan{
  color:var(--text-3);
  font-size:12px;
  font-weight:650
}

.app-shell .tg-broken-reason{
  margin-left:auto;
  color:var(--warn);
  font-size:11.5px;
  font-weight:700
}

@media (max-width:640px){
  .app-shell .tg-broken-reason{
    margin-left:0
  }
}

/* The heading block takes the free space and gives it up when the row is tight, so the search
   ends flush with the card's right edge. Left at its natural width the help line ran the whole
   way across and pushed the field into the middle of the row — and past the card's edge. */

.app-shell .auto-message-plans-head>.min-w-0{
  flex:1 1 auto
}

/* The plan search sits in the section head, right of the heading, and filters as it is typed.
   The field itself is the toolbar's search control; only its placing and the clear button and
   spinner it carries are new. */

.app-shell .auto-message-search{
  margin-left:auto;
  flex:0 0 auto;
  width:min(280px,100%)
}

.app-shell .auto-message-search .finput{
  padding-right:58px
}

.app-shell .auto-message-search .finput::-webkit-search-cancel-button{
  display:none
}

.app-shell .auto-message-search-clear{
  position:absolute;
  top:50%;
  right:8px;
  display:grid;
  width:24px;
  height:24px;
  place-items:center;
  padding:0;
  border:0;
  border-radius:7px;
  background:transparent;
  color:var(--text-3);
  transform:translateY(-50%);
  cursor:pointer
}

.app-shell .auto-message-search-clear:hover{
  background:var(--surface-3);
  color:var(--text)
}

.app-shell .auto-message-search-spinner{
  position:absolute;
  top:50%;
  right:36px;
  width:14px;
  height:14px;
  border:2px solid var(--border);
  border-top-color:var(--brand);
  border-radius:50%;
  margin-top:-7px;
  animation:auto-message-search-spin .7s linear infinite
}

@keyframes auto-message-search-spin{
  to{
    transform:rotate(360deg)
  }
}

.app-shell .auto-message-search-count{
  margin:12px 14px 0;
  color:var(--text-3);
  font-size:12px;
  font-weight:650
}

@media (max-width:699.98px){
  .app-shell .auto-message-search{
    width:100%;
    margin-left:0;
    margin-top:10px
  }
}

.app-shell .auto-message-plan-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  padding:14px;
  background:var(--surface)
}

.app-shell .auto-message-plan-card{
  display:flex;
  min-width:0;
  flex-direction:column;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface);
  box-shadow:0 1px 2px rgba(16,32,24,.04);
  transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease
}

.app-shell .auto-message-plan-card:hover{
  border-color:rgba(21,154,77,.3);
  box-shadow:0 10px 26px -22px rgba(16,32,24,.55);
  transform:translateY(-1px)
}

.app-shell .auto-message-plan-card.is-inactive{
  background:var(--surface-2)
}

.app-shell .auto-message-plan-card-head{
  display:grid;
  grid-template-columns:36px minmax(0,1fr) auto;
  gap:10px;
  align-items:start;
  min-height:88px;
  padding:14px;
  border-bottom:1px solid var(--border)
}

.app-shell .auto-message-plan-icon{
  display:inline-flex;
  width:36px;
  height:36px;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .auto-message-plan-card.is-inactive .auto-message-plan-icon{
  background:var(--surface-3);
  color:var(--text-3)
}

.app-shell .auto-message-plan-title{
  min-width:0
}

.app-shell .auto-message-plan-title h3{
  margin:1px 0 4px;
  overflow:hidden;
  color:var(--text);
  font-size:14px;
  font-weight:800;
  line-height:1.35;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .auto-message-plan-title p{
  display:-webkit-box;
  margin:0;
  overflow:hidden;
  color:var(--text-3);
  font-size:11.5px;
  line-height:1.45;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2
}

.app-shell .auto-message-status-toggle{
  position:relative;
  display:inline-flex;
  min-width:66px;
  height:30px;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  padding:0 9px 0 29px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--surface-3);
  color:var(--text-3);
  font:inherit;
  font-size:10.5px;
  font-weight:800;
  cursor:pointer;
  transition:border-color .15s,background .15s,color .15s,opacity .15s
}

.app-shell .auto-message-status-knob{
  position:absolute;
  top:5px;
  left:5px;
  width:18px;
  height:18px;
  border-radius:50%;
  background:var(--surface);
  box-shadow:0 1px 3px rgba(16,32,24,.2);
  transition:left .15s
}

.app-shell .auto-message-status-toggle.is-on{
  justify-content:flex-start;
  padding:0 29px 0 9px;
  border-color:var(--brand);
  background:var(--brand);
  color:#fff
}

.app-shell .auto-message-status-toggle.is-on .auto-message-status-knob{
  left:41px
}

.app-shell .auto-message-status-toggle:focus-visible{
  outline:0;
  box-shadow:0 0 0 3px rgba(21,154,77,.17)
}

.app-shell .auto-message-status-toggle.is-loading{
  opacity:.62;
  cursor:wait
}

.app-shell .auto-message-plan-metrics{
  display:grid;
  grid-template-columns:1fr 1fr;
  flex:1
}

.app-shell .auto-message-plan-metrics>div{
  display:flex;
  min-height:68px;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 14px;
  border-right:1px solid var(--border)
}

.app-shell .auto-message-plan-metrics>div:last-child{
  border-right:0
}

.app-shell .auto-message-plan-metrics span{
  display:flex;
  min-width:0;
  align-items:center;
  gap:6px;
  color:var(--text-3);
  font-size:10.5px;
  font-weight:700;
  line-height:1.35
}

.app-shell .auto-message-plan-metrics strong{
  color:var(--text);
  font-size:19px;
  font-weight:850
}

.app-shell .auto-message-plan-card-actions{
  display:flex;
  justify-content:flex-end;
  gap:7px;
  padding:10px 12px;
  border-top:1px solid var(--border);
  background:var(--surface-2)
}

.app-shell .auto-message-plan-card-actions .btn{
  display:inline-flex;
  height:34px;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:0 11px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface);
  color:var(--text-2);
  font-size:11.5px;
  font-weight:750;
  cursor:pointer
}

.app-shell .auto-message-plan-card-actions .btn:hover{
  border-color:var(--text-3);
  color:var(--text)
}

.app-shell .auto-message-plan-card-actions .auto-message-plan-delete{
  border-color:rgba(229,72,77,.4);
  color:var(--danger)
}

.app-shell .auto-message-plan-card-actions .auto-message-plan-delete:hover{
  border-color:var(--danger);
  background:var(--danger-weak);
  color:var(--danger)
}

.app-shell .auto-message-empty-state{
  grid-column:1/-1;
  display:flex;
  min-height:260px;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  color:var(--text-3);
  text-align:center
}

.app-shell .auto-message-empty-state>span{
  display:inline-flex;
  width:52px;
  height:52px;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  background:var(--brand-weak);
  color:var(--brand)
}

.app-shell .auto-message-empty-state h3{
  margin:0;
  color:var(--text);
  font-size:15px;
  font-weight:800
}

.app-shell .auto-message-plan-form{
  display:grid;
  gap:16px
}

.app-shell .auto-message-plan-fields{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(0,1.2fr) minmax(180px,.6fr);
  gap:14px
}

.app-shell .auto-message-time-control{
  position:relative
}

.app-shell .auto-message-time-control>svg{
  position:absolute;
  top:50%;
  left:13px;
  z-index:1;
  color:var(--text-3);
  transform:translateY(-50%);
  pointer-events:none
}

.app-shell .auto-message-time-control .finput{
  padding-left:39px
}

.app-shell .auto-message-option-row{
  display:flex;
  min-height:58px;
  align-items:center;
  gap:10px;
  margin-top:16px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface-2);
  cursor:pointer;
  transition:border-color .15s,background .15s
}

.app-shell .auto-message-option-row:hover{
  border-color:rgba(21,154,77,.3);
  background:var(--brand-weak)
}

.app-shell .auto-message-option-row>input{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  opacity:0;
  pointer-events:none
}

.app-shell .auto-message-option-icon{
  display:inline-flex;
  width:32px;
  height:32px;
  flex:none;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface);
  color:var(--text-3)
}

.app-shell .auto-message-option-row>input:checked+.auto-message-option-icon{
  border-color:var(--brand);
  background:var(--brand);
  color:#fff
}

.app-shell .auto-message-option-row>input:focus-visible+.auto-message-option-icon{
  box-shadow:0 0 0 3px rgba(21,154,77,.16)
}

.app-shell .auto-message-option-row strong,.app-shell .auto-message-option-row small{
  display:block
}

.app-shell .auto-message-option-row strong{
  color:var(--text);
  font-size:12.5px;
  font-weight:800
}

.app-shell .auto-message-option-row small{
  margin-top:2px;
  color:var(--text-3);
  font-size:10.5px;
  line-height:1.35
}

.app-shell .auto-message-steps-section{
  overflow:hidden
}

.app-shell .auto-message-steps-head{
  display:grid;
  grid-template-columns:36px minmax(0,1fr) auto;
  align-items:center;
  border-bottom:1px solid var(--border)
}

.app-shell .auto-message-add-step{
  display:inline-flex;
  height:36px;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:0 12px;
  border:1px solid var(--brand);
  border-radius:8px;
  background:var(--brand-weak);
  color:var(--brand-strong);
  font-size:11.5px;
  font-weight:800;
  cursor:pointer
}

.app-shell .auto-message-add-step:hover{
  background:var(--brand);
  color:#fff
}

.app-shell .auto-message-steps-body{
  padding:14px;
  background:var(--surface)
}

.app-shell .auto-message-step-list{
  display:grid;
  gap:10px
}

.app-shell .auto-message-step{
  position:relative;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface);
  box-shadow:0 1px 2px rgba(16,32,24,.03)
}

.app-shell .auto-message-step.is-select-open{
  z-index:5;
  border-color:rgba(21,154,77,.26);
  box-shadow:0 8px 24px -20px rgba(16,32,24,.5)
}

.app-shell .auto-message-step-head{
  display:flex;
  gap:9px;
  align-items:center;
  padding:10px 12px;
  border-bottom:1px solid var(--border);
  background:var(--surface-2)
}

.app-shell .auto-message-step-head>.auto-message-step-number,.app-shell .auto-message-step-head>.auto-message-step-lock,.app-shell .auto-message-step-head>.auto-message-step-remove{
  flex:none
}

.app-shell .auto-message-step-head>div{
  min-width:0;
  flex:1
}

.app-shell .auto-message-step-number{
  display:inline-flex;
  width:30px;
  height:30px;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  background:var(--info-weak);
  color:var(--info)
}

.app-shell .auto-message-step-head strong,.app-shell .auto-message-step-head small{
  display:block
}

.app-shell .auto-message-step-head strong{
  color:var(--text);
  font-size:12.5px;
  font-weight:800
}

.app-shell .auto-message-step-head small{
  margin-top:1px;
  color:var(--text-3);
  font-size:10px;
  font-weight:650
}

.app-shell .auto-message-step-remove{
  display:inline-flex;
  width:32px;
  height:32px;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(229,72,77,.3);
  border-radius:8px;
  background:var(--surface);
  color:var(--danger);
  cursor:pointer
}

.app-shell .auto-message-step-remove:hover{
  border-color:var(--danger);
  background:var(--danger-weak)
}

.app-shell .auto-message-step-fields{
  display:grid;
  grid-template-columns:120px minmax(240px,1.5fr) minmax(180px,.8fr) 100px;
  gap:12px;
  align-items:start;
  padding:13px
}

.app-shell .auto-message-control{
  display:grid;
  min-width:0;
  gap:6px;
  color:var(--text-2);
  font-size:11px;
  font-weight:750
}

.app-shell .auto-message-control>span:first-child{
  min-height:15px
}

.app-shell .auto-message-control .finput{
  width:100%;
  height:40px
}

.app-shell .auto-message-native-select{
  cursor:pointer
}

.app-shell .auto-message-days-input{
  position:relative;
  display:block
}

.app-shell .auto-message-days-input input{
  width:100%;
  height:40px;
  padding:0 42px 0 11px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface-2);
  color:var(--text);
  font:inherit;
  font-size:13px;
  outline:0
}

.app-shell .auto-message-days-input small{
  position:absolute;
  top:50%;
  right:10px;
  color:var(--text-3);
  font-size:10px;
  font-style:normal;
  transform:translateY(-50%)
}

.app-shell .auto-message-days-input input:focus{
  border-color:var(--brand);
  background:var(--surface);
  box-shadow:0 0 0 3px rgba(21,154,77,.11)
}

.app-shell .auto-message-template-control{
  position:relative;
  min-width:0
}

.app-shell .auto-message-control .select2-container{
  display:block;
  width:100%!important;
  max-width:100%
}

.app-shell .auto-message-control .select2-container--default .select2-selection--single{
  height:40px;
  border-radius:8px
}

.app-shell .auto-message-control .select2-container--default .select2-selection--single .select2-selection__rendered{
  overflow:hidden;
  padding-right:36px;
  line-height:38px;
  text-overflow:ellipsis;
  white-space:nowrap
}

.auto-message-template-dropdown{
  max-width:calc(100vw - 24px)
}

.app-shell .auto-message-repeat-panel{
  overflow:hidden;
  margin:0 13px 13px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface-2)
}

.app-shell .auto-message-repeat-toggle{
  display:flex;
  min-height:40px;
  align-items:center;
  gap:8px;
  padding:0 10px;
  color:var(--text-2);
  font-size:11px;
  font-weight:750;
  cursor:pointer
}

.app-shell .auto-message-repeat-toggle input{
  width:16px;
  height:16px;
  flex:none;
  margin:0;
  accent-color:var(--brand);
  cursor:pointer
}

.app-shell .auto-message-repeat-toggle>span{
  display:block;
  min-width:0
}

.app-shell .auto-message-repeat-toggle strong,.app-shell .auto-message-repeat-toggle small{
  display:block
}

.app-shell .auto-message-repeat-toggle strong{
  color:var(--text);
  font-size:11.5px;
  font-weight:800;
  line-height:1.3
}

.app-shell .auto-message-repeat-toggle small{
  margin-top:2px;
  color:var(--text-3);
  font-size:10px;
  font-weight:600;
  line-height:1.3
}

.app-shell .auto-message-repeat-fields{
  display:grid;
  grid-template-columns:minmax(0,.7fr) minmax(90px,.7fr) minmax(130px,1fr);
  gap:8px;
  padding:9px;
  border-top:1px solid var(--border);
  background:var(--surface)
}

.app-shell .auto-message-repeat-fields[hidden],.app-shell .auto-message-loop-fields[hidden],.app-shell .auto-message-loop-until[hidden],.app-shell .auto-message-loop-cycles[hidden]{
  display:none!important
}

.app-shell .auto-message-repeat-fields .finput{
  height:36px;
  padding-right:8px;
  padding-left:8px;
  font-size:11.5px
}

.app-shell .auto-message-repeat-fields .auto-message-end-date,.app-shell .auto-message-repeat-fields .auto-message-end-count{
  grid-column:1/-1
}

.app-shell .auto-message-repeat-panel.is-disabled{
  opacity:.5;
  pointer-events:none
}

.app-shell .auto-message-loop-fields{
  display:grid;
  grid-template-columns:140px 160px minmax(190px,1fr) minmax(180px,1fr) minmax(150px,.7fr);
  gap:12px;
  margin-top:12px;
  padding:14px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface-2)
}

.app-shell .auto-message-loop-fields .finput{
  height:40px;
  background:var(--surface)
}

.app-shell .auto-message-plan-form .is-invalid{
  border-color:var(--danger)!important;
  background:var(--danger-weak)!important;
  box-shadow:0 0 0 3px rgba(229,72,77,.1)!important
}

@media (max-width:1279.98px){
  .app-shell .auto-message-plan-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

  .app-shell .auto-message-step-fields{
    grid-template-columns:110px minmax(220px,1.2fr) minmax(160px,.8fr) 90px
  }

  .app-shell .auto-message-repeat-fields{
    grid-template-columns:120px 140px minmax(160px,1fr)
  }

  .app-shell .auto-message-loop-fields{
    grid-template-columns:repeat(3,minmax(0,1fr))
  }
}

@media (max-width:899.98px){
  .app-shell .auto-message-plan-fields{
    grid-template-columns:1fr 1fr
  }

  .app-shell .auto-message-plan-fields>:last-child{
    grid-column:1/-1
  }

  .app-shell .auto-message-loop-fields{
    grid-template-columns:1fr 1fr
  }
}

@media (max-width:699.98px){
  .app-shell .auto-message-stats{
    grid-template-columns:1fr 1fr
  }

  .app-shell .auto-message-plan-grid{
    grid-template-columns:1fr;
    padding:10px
  }

  .app-shell .auto-message-plan-fields{
    grid-template-columns:1fr
  }

  .app-shell .auto-message-plan-fields>:last-child{
    grid-column:auto
  }

  .app-shell .auto-message-steps-head{
    grid-template-columns:36px minmax(0,1fr)
  }

  .app-shell .auto-message-add-step{
    grid-column:1/-1;
    width:100%;
    margin-top:4px
  }

  .app-shell .auto-message-step-fields{
    grid-template-columns:1fr 1fr
  }

  .app-shell .auto-message-step-fields>.auto-message-control:nth-child(2){
    grid-column:1/-1
  }

  .app-shell .auto-message-loop-fields{
    grid-template-columns:1fr
  }

  .app-shell .form-page-actions{
    padding:10px 0
  }

  .app-shell .form-page-actions .btn-ghost,.app-shell .form-page-actions .btn-primary{
    flex:1;
    justify-content:center
  }
}

@media (max-width:479.98px){
  .app-shell .auto-message-stats{
    grid-template-columns:1fr
  }

  .app-shell .auto-message-plan-card-head{
    grid-template-columns:36px minmax(0,1fr)
  }

  .app-shell .auto-message-status-toggle{
    grid-column:1/-1
  }

  .app-shell .auto-message-step-fields{
    grid-template-columns:1fr
  }

  .app-shell .auto-message-step-fields>*{
    grid-column:1!important
  }

  .app-shell .auto-message-repeat-fields{
    grid-template-columns:1fr
  }
}

/* Product detail modal */

/* One scrolling sheet, not a fixed head and foot with a window between them. The panel is read
   top to bottom — identity, locations, specifications, description — and pinning two bars spent
   the height that reading needs. The dialog is as wide as the specification grid wants to be. */

.app-shell .product-detail-dialog{
  width:calc(100% - 48px);
  max-width:1600px;
  margin:24px auto
}

/* overflow:hidden is what holds the header and footer inside the rounded corners — without it
   their square backgrounds sit proud of the sheet. Nothing scrolls inside the dialog any more, so
   it clips corners and nothing else. */

.app-shell .product-detail-modal-content{
  display:block;
  max-height:none;
  overflow:hidden;
  border-radius:12px
}

.app-shell .product-detail-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:16px 18px;
  border-bottom:1px solid var(--border);
  background:var(--surface)
}

.app-shell .product-detail-heading{
  display:flex;
  min-width:0;
  align-items:center;
  gap:11px
}

.app-shell .product-detail-heading-icon{
  display:inline-flex;
  width:38px;
  height:38px;
  flex:none;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  background:var(--brand-weak);
  color:var(--brand)
}

.app-shell .product-detail-title-wrap{
  min-width:0
}

.app-shell .product-detail-title{
  overflow:hidden;
  margin:0;
  color:var(--text);
  font-size:17px;
  font-weight:800;
  line-height:1.3;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .product-detail-subtitle{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  margin-top:3px;
  color:var(--text-3);
  font-size:11.5px
}

.app-shell .product-detail-close{
  flex:none
}

.app-shell .product-detail-body{
  min-height:0;
  overflow:visible;
  padding:0;
  background:var(--surface)
}

.app-shell .product-detail-overview{
  display:grid;
  grid-template-columns:260px minmax(0,1fr);
  border-bottom:1px solid var(--border)
}

.app-shell .product-detail-media{
  padding:18px;
  border-right:1px solid var(--border);
  background:var(--surface-2)
}

.app-shell .product-detail-image-wrap{
  display:flex;
  aspect-ratio:1/1;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface)
}

.app-shell .product-detail-image-wrap img{
  display:block;
  width:100%;
  height:100%;
  -o-object-fit:contain;
     object-fit:contain;
  padding:10px
}

.app-shell .product-detail-image-trigger{
  position:relative;
  width:100%;
  padding:0;
  color:inherit;
  font:inherit;
  cursor:zoom-in;
  -webkit-appearance:none;
     -moz-appearance:none;
          appearance:none
}

.app-shell .product-detail-image-trigger img{
  transition:transform .2s ease
}

.app-shell .product-detail-image-trigger:hover img,.app-shell .product-detail-image-trigger:focus-visible img{
  transform:scale(1.025)
}

.app-shell .product-detail-image-trigger:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:3px
}

.app-shell .product-detail-image-zoom{
  position:absolute;
  right:8px;
  bottom:8px;
  display:inline-flex;
  min-height:30px;
  align-items:center;
  gap:6px;
  padding:5px 9px;
  border:1px solid rgba(255,255,255,.28);
  border-radius:7px;
  background:rgba(17,26,21,.82);
  box-shadow:0 6px 16px rgba(17,26,21,.18);
  color:#fff;
  font-size:10.5px;
  font-weight:750;
  opacity:0;
  transform:translateY(4px);
  transition:opacity .18s ease,transform .18s ease
}

.app-shell .product-detail-image-trigger:hover .product-detail-image-zoom,.app-shell .product-detail-image-trigger:focus-visible .product-detail-image-zoom{
  opacity:1;
  transform:translateY(0)
}

.app-shell .product-detail-badges{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:12px
}

.app-shell .product-detail-badge{
  display:inline-flex;
  min-height:25px;
  align-items:center;
  padding:3px 9px;
  border-radius:999px;
  font-size:10.5px;
  font-weight:750;
  text-transform:capitalize
}

.app-shell .product-detail-badge-primary{
  background:var(--blue-weak);
  color:var(--blue)
}

.app-shell .product-detail-badge-success{
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .product-detail-badge-muted{
  background:var(--surface-3);
  color:var(--text-3)
}

.app-shell .product-detail-summary{
  min-width:0;
  padding:18px
}

.app-shell .product-detail-section{
  padding:18px;
  border-bottom:1px solid var(--border);
  background:var(--surface)
}

.app-shell .product-detail-section-heading{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:14px
}

.app-shell .product-detail-section-icon{
  display:inline-flex;
  width:34px;
  height:34px;
  flex:none;
  align-items:center;
  justify-content:center;
  border-radius:8px
}

.app-shell .product-detail-section-icon-green{
  background:var(--brand-weak);
  color:var(--brand)
}

.app-shell .product-detail-section-icon-blue{
  background:var(--blue-weak);
  color:var(--blue)
}

.app-shell .product-detail-section-icon-orange{
  background:var(--warn-weak);
  color:var(--warn)
}

.app-shell .product-detail-section-icon-teal{
  background:var(--teal-weak);
  color:var(--teal)
}

.app-shell .product-detail-section-icon-purple{
  background:var(--violet-weak);
  color:var(--violet)
}

.app-shell .product-detail-section-heading h5,.app-shell .product-detail-section-heading p{
  margin:0
}

.app-shell .product-detail-section-heading h5{
  color:var(--text);
  font-size:13.5px;
  font-weight:800;
  line-height:1.3
}

.app-shell .product-detail-section-heading p{
  margin-top:2px;
  color:var(--text-3);
  font-size:10.5px;
  line-height:1.35
}

.app-shell .product-detail-key-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  overflow:hidden;
  margin:0 0 14px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface)
}

.app-shell .product-detail-key-item{
  min-width:0;
  padding:11px 12px;
  border-right:1px solid var(--border)
}

.app-shell .product-detail-key-item:last-child{
  border-right:0
}

.app-shell .product-detail-key-item dt,.app-shell .product-detail-spec-grid dt{
  margin:0 0 4px;
  color:var(--text-3);
  font-size:9.5px;
  font-weight:800;
  line-height:1.3;
  text-transform:uppercase
}

.app-shell .product-detail-key-item dd,.app-shell .product-detail-spec-grid dd{
  overflow-wrap:anywhere;
  margin:0;
  color:var(--text);
  font-size:12.5px;
  font-weight:700;
  line-height:1.45
}

.app-shell .product-detail-spec-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;
  margin:0;
  border-top:1px solid var(--border);
  border-left:1px solid var(--border)
}

.app-shell .product-detail-spec-grid>div{
  min-width:0;
  padding:10px 12px;
  border-right:1px solid var(--border);
  border-bottom:1px solid var(--border)
}

.app-shell .product-detail-custom-grid{
  grid-template-columns:repeat(4,minmax(0,1fr))
}

.app-shell .product-detail-location-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px
}

.app-shell .product-detail-location-list{
  display:flex;
  min-width:0;
  flex:1;
  flex-wrap:wrap;
  gap:7px
}

.app-shell .product-detail-location-pill{
  display:inline-flex;
  min-height:30px;
  align-items:center;
  gap:6px;
  padding:5px 9px;
  border:1px solid var(--border);
  border-radius:7px;
  background:var(--surface-2);
  color:var(--text-2);
  font-size:11px;
  font-weight:700
}

.app-shell .product-detail-empty{
  color:var(--text-3);
  font-size:12px
}

.app-shell .product-detail-download{
  display:flex;
  max-width:310px;
  flex:none;
  align-items:center;
  gap:9px;
  padding:8px 10px;
  border:1px solid rgba(21,154,77,.25);
  border-radius:8px;
  background:var(--brand-weak);
  color:var(--brand-strong);
  font-size:11px;
  font-weight:750;
  text-decoration:none
}

.app-shell .product-detail-download:hover{
  border-color:var(--brand);
  background:#d9f2e4;
  color:var(--brand-strong)
}

.app-shell .product-detail-download span{
  min-width:0;
  overflow-wrap:anywhere
}

.app-shell .product-detail-download small{
  display:block;
  margin-bottom:2px;
  color:var(--text-3);
  font-size:9px;
  font-weight:700
}

.app-shell .product-detail-description{
  overflow-wrap:anywhere;
  padding:13px 14px;
  border-left:3px solid var(--brand);
  border-radius:0 7px 7px 0;
  background:var(--surface-2);
  color:var(--text-2);
  font-size:12px;
  line-height:1.65
}

.app-shell .product-detail-description>:first-child{
  margin-top:0
}

.app-shell .product-detail-description>:last-child{
  margin-bottom:0
}

.app-shell .product-detail-table-wrap{
  max-width:100%;
  overflow-x:auto;
  border:1px solid var(--border);
  border-radius:8px
}

.app-shell .product-detail-table{
  width:100%;
  border-collapse:collapse;
  background:var(--surface);
  font-size:11.5px
}

.app-shell .product-detail-table th{
  padding:9px 11px;
  background:var(--surface-2);
  color:var(--text-3);
  font-size:9.5px;
  font-weight:800;
  text-align:left;
  text-transform:uppercase;
  white-space:nowrap
}

.app-shell .product-detail-table td{
  padding:10px 11px;
  border-top:1px solid var(--border);
  color:var(--text-2);
  font-weight:600
}

.app-shell .product-detail-pricing>.row,.app-shell .product-detail-pricing>.row>.col-md-12{
  display:block;
  width:100%;
  margin:0;
  padding:0
}

.app-shell .product-detail-pricing br:first-child{
  display:none
}

.app-shell .product-detail-pricing h4{
  margin:0 0 10px;
  color:var(--text);
  font-size:13px;
  font-weight:800
}

.app-shell .product-detail-pricing .table-responsive{
  max-width:100%;
  overflow-x:auto;
  border:1px solid var(--border);
  border-radius:8px
}

.app-shell .product-detail-pricing table.table{
  width:100%;
  margin:0;
  border:0;
  border-collapse:collapse;
  background:var(--surface);
  font-size:11.5px
}

.app-shell .product-detail-pricing table.table tr{
  background:var(--surface)
}

.app-shell .product-detail-pricing table.table tr:first-child{
  background:var(--surface-2)
}

.app-shell .product-detail-pricing table.table th{
  padding:9px 11px;
  border:0;
  color:var(--text-3);
  font-size:9.5px;
  font-weight:800;
  text-align:left;
  text-transform:uppercase;
  white-space:nowrap
}

.app-shell .product-detail-pricing table.table td{
  padding:10px 11px;
  border:0;
  border-top:1px solid var(--border);
  color:var(--text-2);
  vertical-align:middle
}

.app-shell .product-detail-pricing .img-thumbnail{
  width:42px;
  height:42px;
  border:1px solid var(--border);
  border-radius:6px;
  -o-object-fit:cover;
     object-fit:cover
}

.app-shell .product-detail-pricing .product-group-prices-cell{
  min-width:250px;
  padding:8px!important;
  vertical-align:top!important
}

.app-shell .product-group-price-list{
  display:grid;
  gap:5px
}

.app-shell .product-group-price-item{
  display:flex;
  min-height:31px;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:6px 8px;
  border:1px solid var(--border);
  border-radius:6px;
  background:var(--surface-2)
}

.app-shell .product-group-price-name{
  min-width:0;
  overflow:hidden;
  color:var(--text-2);
  font-size:10.5px;
  font-weight:700;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .product-group-price-value{
  display:inline-flex;
  min-width:62px;
  min-height:21px;
  flex:none;
  align-items:center;
  justify-content:flex-end;
  border-radius:5px;
  color:var(--brand-strong);
  font-size:11px;
  font-weight:800;
  white-space:nowrap
}

.app-shell .product-group-price-empty{
  color:var(--text-3);
  font-weight:650
}

.app-shell .product-detail-stock{
  min-height:34px;
  overflow-x:auto;
  color:var(--text-2);
  font-size:12px
}

body.product-image-lightbox-open{
  overflow:hidden
}

body.app-ui .product-image-lightbox[hidden]{
  display:none!important
}

body.app-ui .product-image-lightbox{
  position:fixed;
  z-index:1120;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(10,16,13,.86);
  opacity:0;
  transition:opacity .18s ease
}

body.app-ui .product-image-lightbox.is-open{
  opacity:1
}

body.app-ui .product-image-lightbox-dialog{
  display:flex;
  width:min(1120px,94vw);
  height:min(860px,92vh);
  flex-direction:column;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.16);
  border-radius:8px;
  background:#101713;
  box-shadow:0 24px 80px rgba(0,0,0,.42);
  transform:scale(.985);
  transition:transform .18s ease
}

body.app-ui .product-image-lightbox.is-open .product-image-lightbox-dialog{
  transform:scale(1)
}

body.app-ui .product-image-lightbox-header{
  display:flex;
  min-height:58px;
  flex:none;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:10px 12px 10px 18px;
  border-bottom:1px solid rgba(255,255,255,.12);
  background:#151e19
}

body.app-ui .product-image-lightbox-header h3,body.app-ui .product-image-lightbox-header p{
  margin:0
}

body.app-ui .product-image-lightbox-header h3{
  color:#fff;
  font-size:13px;
  font-weight:800
}

body.app-ui .product-image-lightbox-header p{
  overflow:hidden;
  max-width:min(760px,70vw);
  margin-top:2px;
  color:rgba(255,255,255,.62);
  font-size:11px;
  text-overflow:ellipsis;
  white-space:nowrap
}

body.app-ui .product-image-lightbox-close{
  display:inline-flex;
  width:36px;
  height:36px;
  flex:none;
  align-items:center;
  justify-content:center;
  padding:0;
  border:1px solid rgba(255,255,255,.14);
  border-radius:8px;
  background:rgba(255,255,255,.08);
  color:#fff;
  cursor:pointer
}

body.app-ui .product-image-lightbox-close:hover{
  border-color:rgba(255,255,255,.28);
  background:rgba(255,255,255,.14);
  color:#fff
}

body.app-ui .product-image-lightbox-close:focus-visible{
  outline:2px solid #fff;
  outline-offset:2px
}

body.app-ui .product-image-lightbox-canvas{
  display:flex;
  min-height:0;
  flex:1;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:#0b100d
}

body.app-ui .product-image-lightbox-canvas img{
  display:block;
  max-width:100%;
  max-height:100%;
  -o-object-fit:contain;
     object-fit:contain;
  filter:drop-shadow(0 12px 30px rgba(0,0,0,.28))
}

@media (max-width:639.98px){
  body.app-ui .product-image-lightbox{
    padding:10px
  }

  body.app-ui .product-image-lightbox-dialog{
    width:100%;
    height:min(760px,94vh)
  }

  body.app-ui .product-image-lightbox-header{
    min-height:54px;
    padding-left:14px
  }

  body.app-ui .product-image-lightbox-canvas{
    padding:10px
  }

  .app-shell .product-detail-image-zoom{
    opacity:1;
    transform:none
  }
}

@media (prefers-reduced-motion:reduce){
  .app-shell .product-detail-image-trigger img,.app-shell .product-detail-image-zoom,body.app-ui .product-image-lightbox,body.app-ui .product-image-lightbox-dialog{
    transition:none
  }
}

.app-shell .product-detail-stock:empty::before{
  display:block;
  width:20px;
  height:20px;
  margin:7px auto;
  border:2px solid var(--border);
  border-top-color:var(--brand);
  border-radius:50%;
  content:"";
  animation:spin .75s linear infinite
}

.app-shell .product-detail-stock>.row,.app-shell .product-detail-stock>.row>.col-md-12{
  display:block;
  width:100%;
  margin:0;
  padding:0
}

.app-shell .product-detail-stock .table-responsive{
  max-width:100%;
  overflow-x:auto;
  border:1px solid var(--border);
  border-radius:8px
}

.app-shell .product-detail-stock table.table{
  width:100%;
  margin:0;
  border:0;
  border-collapse:collapse;
  background:var(--surface);
  font-size:11px
}

.app-shell .product-detail-stock table.table th{
  padding:9px 11px;
  border:0;
  background:var(--surface-2);
  color:var(--text-3);
  font-size:9px;
  font-weight:800;
  text-align:left;
  text-transform:uppercase;
  white-space:nowrap
}

.app-shell .product-detail-stock table.table td{
  padding:10px 11px;
  border:0;
  border-top:1px solid var(--border);
  color:var(--text-2);
  vertical-align:middle;
  white-space:nowrap
}

.app-shell .product-detail-footer{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:9px;
  padding:12px 18px;
  border-top:1px solid var(--border);
  background:var(--surface)
}

.app-shell .product-detail-footer .btn-ghost,.app-shell .product-detail-footer .btn-primary{
  min-width:92px;
  justify-content:center
}

@media (max-width:899.98px){
  .app-shell .product-detail-dialog{
    width:calc(100% - 20px);
    margin:10px auto
  }

  .app-shell .product-detail-modal-content{
    max-height:none
  }

  .app-shell .product-detail-overview{
    grid-template-columns:210px minmax(0,1fr)
  }

  .app-shell .product-detail-key-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

  .app-shell .product-detail-key-item:nth-child(2){
    border-right:0
  }

  .app-shell .product-detail-key-item:nth-child(-n+2){
    border-bottom:1px solid var(--border)
  }

  .app-shell .product-detail-spec-grid,.app-shell .product-detail-custom-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}

@media (max-width:639.98px){
  .app-shell .product-detail-header{
    padding:12px
  }

  .app-shell .product-detail-overview{
    grid-template-columns:1fr
  }

  .app-shell .product-detail-media{
    display:grid;
    grid-template-columns:120px minmax(0,1fr);
    gap:12px;
    border-right:0;
    border-bottom:1px solid var(--border)
  }

  .app-shell .product-detail-badges{
    align-content:start;
    margin-top:0
  }

  .app-shell .product-detail-summary,.app-shell .product-detail-section{
    padding:14px 12px
  }

  .app-shell .product-detail-location-row{
    display:block
  }

  .app-shell .product-detail-download{
    max-width:none;
    margin-top:12px
  }

  .app-shell .product-detail-custom-grid{
    grid-template-columns:1fr
  }

  .app-shell .product-detail-footer{
    padding:10px 12px
  }

  .app-shell .product-detail-footer .btn-ghost,.app-shell .product-detail-footer .btn-primary{
    flex:1
  }
}

@media (max-width:419.98px){
  .app-shell .product-detail-title{
    font-size:14px
  }

  .app-shell .product-detail-heading-icon{
    width:34px;
    height:34px
  }

  .app-shell .product-detail-media{
    grid-template-columns:96px minmax(0,1fr)
  }

  .app-shell .product-detail-key-grid,.app-shell .product-detail-spec-grid{
    grid-template-columns:1fr
  }

  .app-shell .product-detail-key-item{
    border-right:0;
    border-bottom:1px solid var(--border)
  }

  .app-shell .product-detail-key-item:last-child{
    border-bottom:0
  }
}

@media print{
  .product-detail-dialog{
    width:100%!important;
    max-width:none!important;
    margin:0!important
  }

  .product-detail-modal-content{
    display:block!important;
    max-height:none!important;
    overflow:visible!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    background:var(--surface)!important;
    color:var(--text)!important
  }

  .product-detail-modal-content .no-print,.product-detail-footer{
    display:none!important
  }

  .product-detail-header{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:10px!important;
    padding:0 0 10px!important;
    border-bottom:1px solid #dfe5e1!important;
    background:var(--surface)!important
  }

  .product-detail-heading{
    display:flex!important;
    align-items:center!important;
    gap:9px!important
  }

  .product-detail-heading-icon{
    display:inline-flex!important;
    width:30px!important;
    height:30px!important;
    align-items:center!important;
    justify-content:center!important;
    border-radius:6px!important;
    background:#e6f5ec!important;
    color:#159a4d!important
  }

  .product-detail-title{
    margin:0!important;
    color:var(--text)!important;
    font-size:15px!important;
    font-weight:800!important;
    line-height:1.25!important
  }

  .product-detail-subtitle{
    display:flex!important;
    gap:5px!important;
    margin-top:2px!important;
    color:var(--text-2)!important;
    font-size:8.5px!important
  }

  .product-detail-body{
    display:block!important;
    max-height:none!important;
    overflow:visible!important;
    padding:0!important;
    background:var(--surface)!important
  }

  .product-detail-overview{
    display:grid!important;
    grid-template-columns:145px minmax(0,1fr)!important;
    border-bottom:1px solid #dfe5e1!important;
    -moz-column-break-inside:avoid!important;
         break-inside:avoid!important
  }

  .product-detail-media{
    padding:10px!important;
    border-right:1px solid #dfe5e1!important;
    background:var(--surface-2)!important
  }

  .product-detail-image-wrap{
    display:flex!important;
    aspect-ratio:1/1!important;
    align-items:center!important;
    justify-content:center!important;
    overflow:hidden!important;
    border:1px solid #dfe5e1!important;
    border-radius:6px!important;
    background:var(--surface)!important
  }

  .product-detail-image-wrap img{
    display:block!important;
    width:100%!important;
    height:100%!important;
    padding:5px!important;
    -o-object-fit:contain!important;
       object-fit:contain!important
  }

  .product-detail-badges{
    display:flex!important;
    flex-wrap:wrap!important;
    gap:4px!important;
    margin-top:7px!important
  }

  .product-detail-badge{
    display:inline-flex!important;
    min-height:18px!important;
    align-items:center!important;
    padding:2px 6px!important;
    border-radius:10px!important;
    font-size:7.5px!important;
    font-weight:700!important
  }

  .product-detail-summary{
    padding:10px!important
  }

  .product-detail-section{
    padding:10px 0!important;
    border-bottom:1px solid #dfe5e1!important;
    background:var(--surface)!important;
    -moz-column-break-inside:avoid!important;
         break-inside:avoid!important
  }

  .product-detail-pricing{
    -moz-column-break-inside:auto!important;
         break-inside:auto!important
  }

  .product-detail-section-heading{
    display:flex!important;
    align-items:center!important;
    gap:7px!important;
    margin-bottom:8px!important
  }

  .product-detail-section-icon{
    display:inline-flex!important;
    width:25px!important;
    height:25px!important;
    align-items:center!important;
    justify-content:center!important;
    border-radius:5px!important
  }

  .product-detail-section-heading h5{
    margin:0!important;
    color:var(--text)!important;
    font-size:10px!important;
    font-weight:800!important
  }

  .product-detail-section-heading p{
    margin:1px 0 0!important;
    color:var(--text-3)!important;
    font-size:7.5px!important
  }

  .product-detail-key-grid{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    margin:0 0 7px!important;
    overflow:hidden!important;
    border:1px solid #dfe5e1!important;
    border-radius:5px!important
  }

  .product-detail-key-item{
    min-width:0!important;
    padding:6px!important;
    border-right:1px solid #dfe5e1!important
  }

  .product-detail-key-item:last-child{
    border-right:0!important
  }

  .product-detail-key-item dt,.product-detail-spec-grid dt{
    margin:0 0 2px!important;
    color:var(--text-3)!important;
    font-size:6.5px!important;
    font-weight:800!important;
    text-transform:uppercase!important
  }

  .product-detail-key-item dd,.product-detail-spec-grid dd{
    margin:0!important;
    color:var(--text)!important;
    font-size:8.5px!important;
    font-weight:700!important;
    line-height:1.3!important;
    overflow-wrap:anywhere!important
  }

  .product-detail-spec-grid{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    margin:0!important;
    border-top:1px solid #dfe5e1!important;
    border-left:1px solid #dfe5e1!important
  }

  .product-detail-spec-grid>div{
    min-width:0!important;
    padding:5px 6px!important;
    border-right:1px solid #dfe5e1!important;
    border-bottom:1px solid #dfe5e1!important
  }

  .product-detail-location-row{
    display:flex!important;
    align-items:flex-start!important;
    justify-content:space-between!important;
    gap:8px!important
  }

  .product-detail-location-list{
    display:flex!important;
    flex:1!important;
    flex-wrap:wrap!important;
    gap:4px!important
  }

  .product-detail-location-pill{
    display:inline-flex!important;
    min-height:20px!important;
    align-items:center!important;
    gap:4px!important;
    padding:3px 6px!important;
    border:1px solid #dfe5e1!important;
    border-radius:5px!important;
    background:var(--surface-2)!important;
    color:var(--text-2)!important;
    font-size:7.5px!important
  }

  .product-detail-download{
    display:flex!important;
    max-width:230px!important;
    align-items:center!important;
    gap:5px!important;
    padding:4px 6px!important;
    border:1px solid #cde8d8!important;
    border-radius:5px!important;
    background:#e6f5ec!important;
    color:#0e7a3c!important;
    font-size:7.5px!important;
    text-decoration:none!important
  }

  .product-detail-download small{
    display:block!important;
    margin:0!important;
    font-size:6px!important
  }

  .product-detail-description{
    padding:7px 8px!important;
    border-left:2px solid #159a4d!important;
    border-radius:0 4px 4px 0!important;
    background:var(--surface-2)!important;
    color:var(--text-2)!important;
    font-size:8px!important;
    line-height:1.45!important
  }

  .product-detail-table-wrap,.product-detail-pricing .table-responsive,.product-detail-stock .table-responsive{
    overflow:visible!important;
    border:1px solid #dfe5e1!important;
    border-radius:5px!important
  }

  .product-detail-table,.product-detail-pricing table.table,.product-detail-stock table.table{
    width:100%!important;
    border-collapse:collapse!important;
    background:var(--surface)!important;
    font-size:7px!important
  }

  .product-detail-table th,.product-detail-pricing table.table th,.product-detail-stock table.table th{
    padding:4px!important;
    background:var(--surface-2)!important;
    color:var(--text-2)!important;
    font-size:6px!important;
    font-weight:800!important;
    line-height:1.2!important;
    white-space:normal!important
  }

  .product-detail-table td,.product-detail-pricing table.table td,.product-detail-stock table.table td{
    padding:4px!important;
    border-top:1px solid #dfe5e1!important;
    color:var(--text)!important;
    font-size:7px!important;
    line-height:1.25!important;
    white-space:normal!important
  }

  .product-detail-pricing .product-group-prices-cell{
    min-width:150px!important;
    padding:4px!important
  }

  .product-group-price-list{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:2px!important
  }

  .product-group-price-item{
    display:flex!important;
    min-height:18px!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:4px!important;
    padding:2px 4px!important;
    border:1px solid #dfe5e1!important;
    border-radius:3px!important;
    background:var(--surface-2)!important
  }

  .product-group-price-name{
    font-size:6px!important
  }

  .product-group-price-value{
    min-width:auto!important;
    min-height:auto!important;
    font-size:6.5px!important
  }

  .product-detail-pricing .img-thumbnail{
    width:28px!important;
    height:28px!important;
    border-radius:3px!important
  }

  .product-detail-stock{
    min-height:0!important;
    overflow:visible!important
  }
}

/* Sale details — readable invoice modal shared by sales, cash flow and contacts. */

body.app-ui .sale-detail-modal-dialog{
  width:min(1420px,calc(100vw - 32px));
  max-width:none;
  margin:16px auto
}

body.app-ui .sale-detail-modal-content{
  display:block;
  max-height:none;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:16px!important;
  background:var(--surface);
  box-shadow:0 28px 80px -28px rgba(17,31,23,.55)
}

body.app-ui .sale-detail-header,body.app-ui .sale-detail-footer{
  position:static!important;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:13px 18px;
  border-bottom:1px solid var(--border-2);
  background:var(--surface)
}

body.app-ui .sale-detail-heading{
  display:flex;
  align-items:center;
  gap:11px
}

body.app-ui .sale-detail-heading>span{
  display:grid;
  width:40px;
  height:40px;
  flex:none;
  place-items:center;
  border-radius:10px;
  background:var(--brand-weak);
  color:var(--brand)
}

body.app-ui .sale-detail-heading h4{
  margin:0;
  color:var(--text);
  font-size:18px;
  font-weight:850
}

body.app-ui .sale-detail-heading p{
  margin:3px 0 0;
  color:var(--text-3);
  font-size:12px
}

body.app-ui .sale-detail-header .close{
  display:grid;
  width:34px;
  height:34px;
  place-items:center;
  border:0;
  border-radius:9px;
  background:var(--surface-2);
  color:var(--text-2);
  opacity:1
}

body.app-ui .sale-detail-body{
  display:block;
  padding:20px;
  overflow:visible;
  background:var(--surface-2);
  color:var(--text);
  font-size:13px
}

body.app-ui .sale-document-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  padding:3px 3px 17px;
  border-bottom:2px solid var(--text)
}

body.app-ui .sale-document-heading>div:last-child{
  text-align:right
}

body.app-ui .sale-document-heading small,body.app-ui .sale-document-heading span{
  display:block;
  color:var(--text-3);
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.035em
}

body.app-ui .sale-document-heading h2{
  margin:4px 0 2px;
  color:var(--text);
  font-size:26px;
  font-weight:900;
  letter-spacing:-.025em
}

body.app-ui .sale-document-heading strong{
  display:block;
  color:var(--brand);
  font-size:14px;
  font-weight:850
}

body.app-ui .sale-detail-context-grid{
  display:grid;
  grid-template-columns:1fr 1fr 1.12fr;
  gap:12px;
  margin-top:14px
}

body.app-ui .sale-detail-context-card{
  min-width:0;
  padding:15px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface)
}

body.app-ui .sale-detail-card-label{
  display:block;
  margin-bottom:9px;
  color:var(--text-3);
  font-size:10px;
  font-weight:900;
  letter-spacing:.075em;
  text-transform:uppercase
}

body.app-ui .sale-detail-context-card h3{
  margin:0;
  color:var(--text);
  font-size:14px;
  font-weight:850
}

body.app-ui .sale-detail-context-card>p{
  margin:3px 0 0;
  color:var(--text-2);
  font-size:12.5px
}

body.app-ui .sale-detail-context-card address{
  margin:8px 0 0;
  color:var(--text-2);
  font-size:12.5px;
  font-style:normal;
  line-height:1.55;
  overflow-wrap:anywhere
}

body.app-ui .sale-detail-inline-links{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:11px
}

body.app-ui .sale-detail-inline-links a{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:5px 8px;
  border-radius:7px;
  background:var(--brand-weak);
  color:var(--brand);
  font-size:11.5px;
  font-weight:750
}

body.app-ui .sale-detail-meta{
  display:grid;
  gap:8px;
  margin:0
}

body.app-ui .sale-detail-meta>div{
  display:grid;
  grid-template-columns:minmax(105px,.8fr) minmax(0,1.2fr);
  gap:10px;
  align-items:start
}

body.app-ui .sale-detail-meta>div.is-full{
  display:block
}

body.app-ui .sale-detail-meta dt{
  color:var(--text-3);
  font-size:11.5px;
  font-weight:650
}

body.app-ui .sale-detail-meta dd{
  margin:0;
  color:var(--text);
  font-size:12.5px;
  font-weight:750;
  text-align:right;
  overflow-wrap:anywhere
}

body.app-ui .sale-detail-meta .is-full dd{
  margin-top:3px;
  text-align:left;
  font-weight:600;
  line-height:1.45
}

/* The shipping note is typed as lines — code, route, time, seats — and each one is a separate
   fact. The detail panel has the room the table row does not, so they stay on their own lines. */

body.app-ui .sale-detail-meta dd.sale-detail-note{
  white-space:pre-line
}

body.app-ui .sale-detail-chip{
  display:inline-flex;
  align-items:center;
  padding:4px 8px;
  border:1px solid var(--border);
  border-radius:999px;
  font-size:10.5px;
  font-weight:850;
  line-height:1
}

body.app-ui .sale-detail-chip.is-success{
  border-color:#b5dec2;
  background:#eaf8ee;
  color:#238044
}

body.app-ui .sale-detail-chip.is-warning{
  border-color:#efd4a7;
  background:#fff4df;
  color:#aa6107
}

body.app-ui .sale-detail-chip.is-danger{
  border-color:#efc0c0;
  background:#fff0f0;
  color:#c33f3f
}

body.app-ui .sale-detail-chip.is-info{
  border-color:#bdd2f7;
  background:#eef5ff;
  color:#2868c7
}

body.app-ui .sale-detail-media{
  margin-top:11px
}

body.app-ui .sale-detail-supporting{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin-top:12px;
  padding:10px 12px;
  border:1px dashed var(--border);
  border-radius:10px;
  background:var(--surface)
}

body.app-ui .sale-detail-supporting>div{
  display:flex;
  align-items:center;
  gap:7px;
  margin-right:auto;
  color:var(--text)
}

body.app-ui .sale-detail-supporting>span{
  color:var(--text-2);
  font-size:11.5px
}

body.app-ui .sale-detail-section{
  overflow:hidden;
  margin-top:14px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface)
}

body.app-ui .sale-detail-section-head{
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 13px;
  border-bottom:1px solid var(--border-2);
  background:var(--surface-2)
}

body.app-ui .sale-detail-section-head>span{
  display:grid;
  width:34px;
  height:34px;
  flex:none;
  place-items:center;
  border-radius:9px;
  background:var(--brand-weak);
  color:var(--brand)
}

body.app-ui .sale-detail-section-head strong{
  display:block;
  color:var(--text);
  font-size:13.5px;
  font-weight:850
}

body.app-ui .sale-detail-section-head p{
  margin:2px 0 0;
  color:var(--text-3);
  font-size:11.5px
}

body.app-ui .sale-detail-section-head.is-compact{
  border-bottom:0;
  background:transparent
}

body.app-ui .sale-detail-lines-wrap,body.app-ui .sale-detail-table-scroll{
  overflow-x:auto
}

body.app-ui .sale-detail-lines-wrap>.table{
  width:100%!important;
  min-width:920px;
  margin:0;
  table-layout:auto;
  background:var(--surface)!important
}

body.app-ui .sale-detail-lines-wrap>.table>tbody>tr:first-child{
  background:var(--surface-2)!important
}

body.app-ui .sale-detail-lines-wrap>.table th{
  padding:10px 11px!important;
  border-color:var(--border-2)!important;
  color:var(--text-3)!important;
  font-size:10px!important;
  font-weight:850!important;
  letter-spacing:.035em;
  text-transform:uppercase;
  vertical-align:middle!important;
  white-space:nowrap
}

body.app-ui .sale-detail-lines-wrap>.table td{
  padding:12px 11px!important;
  border-color:var(--border-2)!important;
  color:var(--text-2)!important;
  font-size:12.5px!important;
  line-height:1.4;
  vertical-align:middle!important
}

body.app-ui .sale-detail-lines-wrap>.table th:first-child,body.app-ui .sale-detail-lines-wrap>.table td:first-child{
  width:42px;
  text-align:center
}

body.app-ui .sale-detail-lines-wrap>.table th:nth-child(2),body.app-ui .sale-detail-lines-wrap>.table td:nth-child(2){
  width:34%;
  min-width:280px;
  text-align:left;
  white-space:normal;
  overflow-wrap:anywhere
}

body.app-ui .sale-detail-lines-wrap>.table td:nth-child(2){
  color:var(--text)!important;
  font-weight:700
}

body.app-ui .sale-detail-lines-wrap>.table th:nth-child(n+3),body.app-ui .sale-detail-lines-wrap>.table td:nth-child(n+3){
  text-align:right
}

body.app-ui .sale-detail-lines-wrap>.table td:nth-child(n+3){
  white-space:nowrap
}

body.app-ui .sale-detail-lines-wrap>.table td:last-child{
  color:var(--text)!important;
  font-weight:850
}

body.app-ui .sale-detail-financial-grid{
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(330px,.65fr);
  gap:12px;
  align-items:start;
  margin-top:14px
}

body.app-ui .sale-detail-panel,body.app-ui .sale-detail-totals{
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface)
}

body.app-ui .sale-detail-totals{
  padding-top:14px
}

body.app-ui .sale-detail-totals>.sale-detail-card-label{
  padding:0 14px
}

body.app-ui .sale-detail-totals.is-wide{
  grid-column:2
}

body.app-ui .sale-detail-totals dl{
  margin:0
}

body.app-ui .sale-detail-totals dl>div{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:15px;
  align-items:start;
  padding:8px 14px;
  border-top:1px solid var(--border-2)
}

body.app-ui .sale-detail-totals dt{
  color:var(--text-2);
  font-size:12px;
  font-weight:650
}

body.app-ui .sale-detail-totals dd{
  margin:0;
  color:var(--text);
  font-size:12.5px;
  font-weight:800;
  text-align:right;
  font-variant-numeric:tabular-nums
}

body.app-ui .sale-detail-totals dd>span{
  display:block
}

body.app-ui .sale-detail-totals .is-total{
  background:var(--surface-2)
}

body.app-ui .sale-detail-totals .is-total dt,body.app-ui .sale-detail-totals .is-total dd{
  font-size:13.5px;
  font-weight:900
}

body.app-ui .sale-detail-totals .is-remaining{
  background:var(--danger-weak)
}

body.app-ui .sale-detail-totals .is-remaining dt,body.app-ui .sale-detail-totals .is-remaining dd{
  color:var(--danger);
  font-weight:900
}

body.app-ui .sale-detail-totals .is-remaining.is-settled{
  background:var(--brand-weak)
}

body.app-ui .sale-detail-totals .is-remaining.is-settled dt,body.app-ui .sale-detail-totals .is-remaining.is-settled dd{
  color:var(--brand)
}

body.app-ui .sale-detail-sub-table{
  min-width:650px;
  width:100%;
  border-collapse:collapse
}

body.app-ui .sale-detail-sub-table th{
  padding:9px 11px;
  background:var(--surface-2);
  color:var(--text-3);
  font-size:10px;
  font-weight:850;
  text-transform:uppercase
}

body.app-ui .sale-detail-sub-table td{
  padding:11px;
  border-top:1px solid var(--border-2);
  color:var(--text-2);
  font-size:12px;
  vertical-align:middle
}

body.app-ui .sale-detail-empty{
  padding:34px!important;
  color:var(--text-3)!important;
  text-align:center
}

body.app-ui .sale-detail-note-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:14px
}

body.app-ui .sale-detail-note-grid>section{
  min-height:92px;
  padding:14px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface)
}

body.app-ui .sale-detail-note-grid p{
  margin:0;
  color:var(--text-2);
  font-size:12.5px;
  line-height:1.55;
  white-space:pre-line
}

body.app-ui .sale-detail-activity-table{
  overflow-x:auto
}

/* The partial wraps its table in .profile-module-table-wrap, so the old direct-child (>) selectors
   never matched anything — the activities table rendered bare. Address the table by its own class. */

body.app-ui .sale-detail-activity-table .profile-module-table{
  width:100%;
  min-width:640px;
  margin:0
}

body.app-ui .sale-detail-activity-table .profile-module-table>tbody>tr:first-child{
  background:var(--surface-2)
}

body.app-ui .sale-detail-activity-table .profile-module-table>tbody>tr>th{
  padding:9px 12px;
  color:var(--text-3);
  font-size:10px;
  font-weight:850;
  text-transform:uppercase
}

body.app-ui .sale-detail-activity-table .profile-module-table>tbody>tr>td{
  padding:11px 12px;
  border-top:1px solid var(--border-2);
  color:var(--text-2);
  font-size:12px;
  vertical-align:top
}

body.app-ui .sale-detail-activity-table td .table{
  margin:0;
  background:transparent
}

body.app-ui .sale-detail-activity-table td .table th,body.app-ui .sale-detail-activity-table td .table td{
  padding:2px 4px!important;
  border:0!important;
  background:transparent!important;
  font-size:11px!important;
  text-transform:none!important
}

body.app-ui .sale-detail-footer{
  min-height:68px;
  gap:12px;
  border-top:1px solid var(--border-2);
  border-bottom:0
}

body.app-ui .sale-detail-footer>span{
  color:var(--text-3);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12px;
  font-weight:750
}

body.app-ui .sale-detail-footer>div{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:8px
}

body.app-ui .sale-detail-footer .btn-primary,body.app-ui .sale-detail-footer .btn-ghost,body.app-ui .sale-detail-telegram{
  display:inline-flex;
  height:42px;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:0 14px;
  border-radius:10px;
  font-size:12.5px;
  font-weight:800
}

body.app-ui .sale-detail-telegram{
  border:1px solid #229ed9;
  background:#229ed9;
  color:#fff
}

@media(max-width:980px){
  body.app-ui .sale-detail-context-grid{
    grid-template-columns:1fr 1fr
  }

  body.app-ui .sale-detail-context-card:last-child{
    grid-column:1/-1
  }

  body.app-ui .sale-detail-financial-grid{
    grid-template-columns:1fr
  }

  body.app-ui .sale-detail-totals,body.app-ui .sale-detail-totals.is-wide{
    grid-column:auto
  }
}

@media(max-width:680px){
  body.app-ui .sale-detail-modal-dialog{
    width:calc(100vw - 12px);
    margin:6px auto
  }

  body.app-ui .sale-detail-modal-content{
    border-radius:12px!important
  }

  body.app-ui .sale-detail-body{
    padding:12px
  }

  body.app-ui .sale-detail-context-grid,body.app-ui .sale-detail-note-grid{
    grid-template-columns:1fr
  }

  body.app-ui .sale-detail-context-card:last-child{
    grid-column:auto
  }

  body.app-ui .sale-document-heading{
    align-items:flex-start
  }

  body.app-ui .sale-document-heading h2{
    font-size:21px
  }

  body.app-ui .sale-detail-footer{
    padding:10px 12px
  }

  body.app-ui .sale-detail-footer>span{
    display:none
  }

  /* A two-column grid instead of flex:1 wrapping: every button the same width and height, labels
   on one line, and an odd last button (Close) takes the full row instead of hanging half-empty. */

  body.app-ui .sale-detail-footer>div{
    display:grid;
    width:100%;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px
  }

  body.app-ui .sale-detail-footer .btn-primary,body.app-ui .sale-detail-footer .btn-ghost,body.app-ui .sale-detail-telegram{
    padding:0 10px;
    font-size:12px;
    white-space:nowrap
  }

  body.app-ui .sale-detail-footer>div>*:last-child:nth-child(odd){
    grid-column:1/-1
  }

  /* Activities on a phone: not a four-column table squeezed into three words a line, but a feed —
   each entry is "what happened, when, by whom", then its note underneath. The header row goes;
   the layout already names each fact by where it sits. */

  body.app-ui .sale-detail-activity-table .profile-module-table{
    min-width:0
  }

  body.app-ui .sale-detail-activity-table .profile-module-table>tbody>tr:first-child{
    display:none
  }

  body.app-ui .sale-detail-activity-table .profile-module-table>tbody>tr{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"action date" "by by" "note note";
    padding:10px 12px;
    border-top:1px solid var(--border-2);
    gap:2px 10px
  }

  body.app-ui .sale-detail-activity-table .profile-module-table>tbody>tr:nth-child(2){
    border-top:0
  }

  body.app-ui .sale-detail-activity-table .profile-module-table>tbody>tr>td{
    display:block;
    padding:0;
    border:0
  }

  body.app-ui .sale-detail-activity-table .profile-module-table>tbody>tr>td:nth-child(1){
    grid-area:date;
    color:var(--text-3);
    font-size:11px;
    white-space:nowrap
  }

  body.app-ui .sale-detail-activity-table .profile-module-table>tbody>tr>td:nth-child(2){
    grid-area:action;
    color:var(--text);
    font-size:12.5px;
    font-weight:750
  }

  body.app-ui .sale-detail-activity-table .profile-module-table>tbody>tr>td:nth-child(3){
    grid-area:by;
    color:var(--text-3);
    font-size:11.5px
  }

  body.app-ui .sale-detail-activity-table .profile-module-table>tbody>tr>td:nth-child(4){
    grid-area:note;
    margin-top:3px
  }
}

/* ---- legacy runtime targets retained by the application master ---- */

body.app-ui #receipt_section{
  display:none
}

@media print{
  body.app-ui #scrollable-container{
    height:auto!important;
    overflow:visible!important
  }

  body.app-ui #receipt_section{
    display:block
  }

  body.app-ui.printing-receipt{
    height:auto!important;
    overflow:visible!important;
    background:var(--surface)!important
  }

  body.app-ui.printing-receipt .app-shell{
    display:block!important;
    height:auto!important;
    overflow:visible!important;
    background:var(--surface)!important
  }

  body.app-ui.printing-receipt .app-shell>.sidebar,
  body.app-ui.printing-receipt .app-shell>.sidebar-backdrop,
  body.app-ui.printing-receipt .app-shell>.flex-1>.topbar,
  body.app-ui.printing-receipt .app-shell>.flex-1>#app,
  body.app-ui.printing-receipt .app-shell>.flex-1>#scrollable-container,
  body.app-ui.printing-receipt .app-shell>.view_modal{
    display:none!important
  }

  body.app-ui.printing-receipt>:not(.app-shell){
    display:none!important
  }

  body.app-ui.printing-receipt .app-shell>.flex-1{
    display:block!important;
    width:100%!important;
    height:auto!important;
    overflow:visible!important
  }

  body.app-ui.printing-receipt #receipt_section{
    display:block!important;
    width:100%!important;
    margin:0!important;
    padding:0!important;
    background:var(--surface)!important
  }
}

/* Shared rich-form bridge for jQuery widgets that cannot be styled in Blade. */

.app-shell .form-workspace .help-block{
  margin:6px 0 0;
  color:var(--text-3);
  font-size:11.5px;
  line-height:1.45
}

.app-shell .form-workspace .mce-tinymce,
.app-shell .form-workspace .tox-tinymce{
  overflow:hidden!important;
  border:1px solid var(--border)!important;
  border-radius:10px!important;
  box-shadow:none!important
}

.app-shell .form-workspace .mce-edit-area iframe{
  height:150px!important;
  min-height:150px!important
}

.app-shell .form-workspace .tox-tinymce{
  height:194px!important
}

.app-shell .form-workspace .rich-text-field .mce-edit-area iframe{
  min-height:180px!important;
  max-height:none!important
}

.app-shell .form-workspace .rich-text-field .mce-tinymce,
.app-shell .form-workspace .rich-text-field .tox-tinymce{
  min-height:224px!important;
  max-height:none!important
}

.app-shell .form-workspace .upload-field input[type=file]{
  display:block;
  width:100%;
  min-height:42px;
  padding:7px;
  border:1px dashed var(--border);
  border-radius:9px;
  background:var(--surface);
  color:var(--text-2);
  font-size:12px;
  cursor:pointer
}

.app-shell .form-workspace .upload-field input[type=file]::file-selector-button{
  margin:-2px 9px -2px -2px;
  padding:7px 11px;
  border:1px solid var(--border);
  border-radius:7px;
  background:var(--surface-2);
  color:var(--text-2);
  font:inherit;
  font-weight:700;
  cursor:pointer
}

.app-shell .form-workspace .upload-field .file-input{
  width:100%;
  min-width:0
}

.app-shell .form-workspace .upload-field .file-preview{
  position:relative;
  display:flex;
  min-height:132px;
  align-items:center;
  justify-content:center;
  margin:0 0 9px;
  padding:12px;
  overflow:hidden;
  border:1px dashed var(--border);
  border-radius:9px;
  background:var(--surface)
}

.app-shell .form-workspace .upload-field .file-preview .file-drop-zone{
  width:100%;
  margin:0;
  padding:0;
  border:0
}

.app-shell .form-workspace .upload-field .file-drop-zone-title{
  padding:22px;
  color:var(--text-3);
  font-size:12px
}

.app-shell .form-workspace .upload-field .file-preview-frame{
  display:flex!important;
  max-width:100%;
  align-items:center;
  gap:12px;
  margin:0!important;
  padding:0!important;
  border:0!important;
  box-shadow:none!important
}

.app-shell .form-workspace .upload-field .file-preview-image{
  width:96px!important;
  height:96px!important;
  -o-object-fit:cover;
     object-fit:cover;
  border-radius:8px
}

.app-shell .form-workspace .upload-field .file-thumbnail-footer{
  min-width:0;
  text-align:left
}

.app-shell .form-workspace .upload-field .file-footer-caption{
  max-width:220px;
  color:var(--text-2);
  font-size:12px;
  white-space:normal
}

.app-shell .form-workspace .upload-field .file-caption-main{
  display:flex;
  width:100%;
  align-items:stretch;
  gap:8px
}

.app-shell .form-workspace .upload-field .file-caption{
  display:flex;
  min-width:0;
  min-height:42px;
  flex:1;
  align-items:center;
  padding:0 12px;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface)
}

.app-shell .form-workspace .upload-field .file-caption-name{
  width:100%;
  overflow:hidden;
  border:0!important;
  background:transparent!important;
  color:var(--text-3);
  font-size:12px;
  text-overflow:ellipsis;
  white-space:nowrap;
  box-shadow:none!important
}

.app-shell .form-workspace .upload-field .file-caption-icon{
  margin-right:7px;
  color:var(--text-3)
}

.app-shell .form-workspace .upload-field .file-input .input-group-btn{
  display:flex!important;
  width:auto!important;
  gap:8px
}

.app-shell .form-workspace .upload-field .file-input .input-group-btn .btn{
  display:inline-flex!important;
  width:auto!important;
  min-width:90px!important;
  min-height:42px;
  align-items:center;
  justify-content:center;
  padding:0 13px!important;
  border:1px solid var(--border)!important;
  border-radius:9px!important;
  background:var(--surface)!important;
  color:var(--text-2)!important;
  font-size:12px;
  font-weight:700;
  box-shadow:none!important
}

.app-shell .form-workspace .upload-field .file-input .btn-file{
  background:var(--brand-weak)!important;
  color:var(--brand-strong)!important
}

.app-shell .form-workspace .upload-field .file-input .fileinput-upload{
  display:none!important
}

.app-shell .form-workspace .media-upload-grid .file-preview{
  min-height:176px;
  background:var(--surface-2)
}

.app-shell .form-workspace .media-upload-grid .file-preview-image{
  width:128px!important;
  height:128px!important;
  -o-object-fit:contain;
     object-fit:contain;
  background:var(--surface)
}

.app-shell .form-workspace .media-image-uploader .file-preview{
  min-height:190px;
  margin-bottom:12px;
  padding:16px;
  border-color:var(--brand);
  background:var(--brand-weak);
  cursor:pointer
}

.app-shell .form-workspace .media-image-uploader .file-preview-thumbnails{
  width:100%;
  min-width:0
}

.app-shell .form-workspace .media-image-uploader .file-preview-frame{
  display:grid!important;
  width:100%!important;
  grid-template-columns:128px minmax(0,1fr);
  align-items:center!important;
  gap:14px!important;
  overflow:hidden!important
}

.app-shell .form-workspace .media-image-uploader .kv-file-content{
  width:128px!important;
  height:128px!important;
  overflow:hidden;
  border-radius:8px;
  background:var(--surface)
}

.app-shell .form-workspace .media-image-uploader .file-thumbnail-footer{
  width:100%!important;
  height:auto!important;
  min-width:0!important;
  overflow:hidden!important
}

.app-shell .form-workspace .media-image-uploader .file-footer-caption{
  width:100%!important;
  max-width:100%!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important
}

.app-shell .form-workspace .media-image-uploader .file-actions,
.app-shell .form-workspace .media-image-uploader .file-footer-buttons,
.app-shell .form-workspace .media-image-uploader .file-upload-indicator,
.app-shell .form-workspace .media-image-uploader .file-drag-handle{
  display:none!important
}

.app-shell .form-workspace .media-image-uploader .file-preview .close,
.app-shell .form-workspace .media-image-uploader .file-preview .kv-file-remove{
  display:none!important
}

.app-shell .form-workspace .media-image-uploader .file-drop-zone-title{
  display:flex;
  min-height:150px;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:24px;
  color:var(--text-2);
  text-align:center
}

.app-shell .form-workspace .media-image-uploader .media-upload-empty-title{
  font-size:13px;
  font-weight:700;
  color:var(--text-1)
}

.app-shell .form-workspace .media-image-uploader .media-upload-empty-copy{
  font-size:11.5px;
  color:var(--text-3)
}

.app-shell .form-workspace .media-image-uploader .file-caption-main{
  justify-content:flex-end
}

.app-shell .form-workspace .media-image-uploader .file-input .input-group-btn{
  width:100%!important;
  justify-content:flex-end
}

.app-shell .form-workspace .media-image-uploader .file-input .input-group-btn .btn{
  min-width:0!important;
  white-space:nowrap
}

.app-shell .form-workspace .media-image-uploader .file-input .btn-file{
  position:relative!important;
  min-width:132px!important;
  overflow:hidden!important;
  background:var(--brand)!important;
  color:#fff!important;
  border-color:var(--brand)!important
}

.app-shell .form-workspace .media-image-uploader .btn-file input[type=file]{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  padding:0!important;
  opacity:0!important;
  cursor:pointer!important
}

.app-shell .form-workspace .media-image-uploader .fileinput-remove{
  color:var(--danger)!important;
  border-color:var(--danger)!important;
  background:var(--danger-weak)!important
}

.app-shell .form-workspace .media-image-uploader .fileinput-cancel{
  display:none!important
}

.app-shell .form-workspace .media-image-uploader .file-input-new .fileinput-remove,
.app-shell .form-workspace .media-image-uploader .file-input-new .fileinput-cancel{
  display:none!important
}

.app-shell .form-workspace .document-uploader input[type=file]{
  background:var(--surface-2)
}

@media (max-width:1279px){
  .app-shell .form-workspace .rich-text-field .mce-edit-area iframe{
    max-height:420px!important
  }

  .app-shell .form-workspace .rich-text-field .mce-tinymce,
  .app-shell .form-workspace .rich-text-field .tox-tinymce{
    max-height:464px!important
  }
}

/* Purchase order form refinement: shared-control language and clear procurement flow. */

.app-shell .po-field-supplier .select2-container{
  min-width:0;
  flex:1
}

.app-shell .po-field-supplier .select2-selection__placeholder{
  font-weight:500
}

.app-shell .po-input-with-icon>.po-date-input{
  cursor:pointer;
  font-variant-numeric:tabular-nums
}

.app-shell .po-input-with-icon>.po-date-input[readonly]{
  background:var(--surface-2);
  color:var(--text)
}

.app-shell .po-input-with-icon:focus-within>svg{
  color:var(--brand)
}

.app-shell .po-field-pay-term .multi-input>.form-control{
  width:44%!important
}

.app-shell .po-field-pay-term .multi-input>.select2-container{
  width:56%!important;
  min-width:0
}

.app-shell .po-field-pay-term .multi-input>.select2-container .select2-selection{
  border-left:0;
  border-radius:0 9px 9px 0
}

/*
 * The input is hidden inside its own picker, not somewhere else on the page.
 *
 * It is taken out of the flow to hide it, and without a positioned wrapper an absolute box is laid
 * out against whatever distant ancestor happens to be positioned — so the control the label points
 * at was physically sitting somewhere else entirely. Clicking Browse focuses it, the browser scrolls
 * the thing it has focused into view, and the page jumped to an empty region: the form looked
 * deleted and there was nothing below to scroll back through. The wrapper anchors it.
 */

.app-shell .file-upload{
  position:relative;
  min-width:0
}

.app-shell .file-upload .file-upload-input{
  position:absolute!important;
  top:0!important;
  left:0!important;
  width:1px!important;
  height:1px!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  border:0!important;
  opacity:0!important;
  pointer-events:none
}

.app-shell .file-upload-picker{
  display:grid;
  min-height:62px;
  grid-template-columns:34px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  margin:0!important;
  padding:9px 10px;
  border:1px dashed var(--border);
  border-radius:10px;
  background:var(--surface-2);
  cursor:pointer;
  transition:border-color .16s ease,background .16s ease,box-shadow .16s ease
}

.app-shell .file-upload-picker:hover{
  border-color:color-mix(in srgb,var(--brand) 48%,var(--border));
  background:var(--brand-weak)
}

.app-shell .file-upload.has-file .file-upload-picker{
  border-style:solid;
  border-color:color-mix(in srgb,var(--brand) 40%,var(--border));
  background:var(--brand-weak)
}

.app-shell .file-upload-icon{
  display:inline-flex;
  width:34px;
  height:34px;
  align-items:center;
  justify-content:center;
  border-radius:9px;
  background:var(--surface);
  color:var(--brand-strong);
  box-shadow:var(--shadow-sm)
}

.app-shell .file-upload-copy{
  display:block;
  min-width:0
}

.app-shell .file-upload-copy strong,.app-shell .file-upload-copy small{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .file-upload-copy strong{
  color:var(--text);
  font-size:10.5px;
  font-weight:800
}

.app-shell .file-upload-copy small{
  margin-top:2px;
  color:var(--text-3);
  font-size:9px;
  font-weight:500
}

.app-shell .file-upload.has-file .file-upload-copy small{
  color:var(--brand-strong);
  font-weight:700
}

/* With no title above it, the file name is the line — it is read, not skimmed past under a
   heading, so it carries the weight the heading had. */

.app-shell .file-upload-copy:not(:has(strong)) small{
  margin-top:0;
  color:var(--text-2);
  font-size:11px;
  font-weight:650
}

/* The compact picker: a document field that sits on a row of ordinary inputs.

   Written once for the four places that want it rather than four times over. At full size the
   picker is a drop zone the form is built around; on a row of fields it has to be a field — the
   height of the inputs beside it, with type to match. The heading inside it is quieter than the
   field's own label, because the label already says what the field is; the line that matters is
   which file is chosen. */

.app-shell .sell-details-grid>.sell-field-document .file-upload-picker,
.app-shell .sell-shipping-grid>.sell-shipping-documents .file-upload-picker,
.app-shell .purchase-field-document .file-upload-picker,
.app-shell .po-field-document .file-upload-picker{
  display:grid;
  width:100%;
  min-height:42px;
  padding:5px 8px;
  grid-template-columns:26px minmax(0,1fr) auto;
  gap:8px;
  border-radius:9px
}

.app-shell .sell-details-grid>.sell-field-document .file-upload-icon,
.app-shell .sell-shipping-grid>.sell-shipping-documents .file-upload-icon,
.app-shell .purchase-field-document .file-upload-icon,
.app-shell .po-field-document .file-upload-icon{
  width:26px;
  height:26px;
  border-radius:7px
}

.app-shell .sell-details-grid>.sell-field-document .file-upload-icon svg,
.app-shell .sell-shipping-grid>.sell-shipping-documents .file-upload-icon svg,
.app-shell .purchase-field-document .file-upload-icon svg,
.app-shell .po-field-document .file-upload-icon svg{
  width:14px;
  height:14px
}

.app-shell .sell-details-grid>.sell-field-document .file-upload-action,
.app-shell .sell-shipping-grid>.sell-shipping-documents .file-upload-action,
.app-shell .purchase-field-document .file-upload-action,
.app-shell .po-field-document .file-upload-action{
  min-height:24px;
  padding:0 8px;
  font-size:9px
}

.app-shell .sell-details-grid>.sell-field-document .file-upload-copy strong,
.app-shell .sell-shipping-grid>.sell-shipping-documents .file-upload-copy strong,
.app-shell .purchase-field-document .file-upload-copy strong,
.app-shell .po-field-document .file-upload-copy strong{
  color:var(--text-2);
  font-size:10px;
  font-weight:700
}

.app-shell .sell-details-grid>.sell-field-document .file-upload-copy small,
.app-shell .sell-shipping-grid>.sell-shipping-documents .file-upload-copy small,
.app-shell .purchase-field-document .file-upload-copy small,
.app-shell .po-field-document .file-upload-copy small{
  margin-top:1px;
  font-size:9.5px
}

.app-shell .file-upload-action{
  display:inline-flex;
  min-height:32px;
  align-items:center;
  padding:0 10px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface);
  color:var(--text-2);
  font-size:9.5px;
  font-weight:800;
  white-space:nowrap
}

.app-shell .file-upload-help{
  margin:5px 0 0;
  color:var(--text-3);
  font-size:8.5px;
  line-height:1.4
}

.app-shell .po-products-guidance{
  display:flex;
  align-items:flex-start;
  gap:9px;
  margin-bottom:10px;
  padding:9px 11px;
  border-left:3px solid var(--info);
  border-radius:0 9px 9px 0;
  background:color-mix(in srgb,var(--info-weak) 58%,var(--surface));
  color:var(--info)
}

.app-shell .po-products-guidance>svg{
  flex:none;
  margin-top:1px
}

.app-shell .po-products-guidance span,.app-shell .po-products-guidance strong,.app-shell .po-products-guidance small{
  display:block
}

.app-shell .po-products-guidance strong{
  font-size:10.5px;
  font-weight:850
}

.app-shell .po-products-guidance small{
  margin-top:1px;
  color:var(--text-3);
  font-size:9px;
  line-height:1.4
}

.app-shell .po-products-table-shell{
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:11px;
  background:var(--surface)
}

.app-shell .po-products-table-shell .table-responsive{
  margin:0;
  border:0;
  border-radius:0
}

.app-shell .po-products-empty-state{
  display:flex;
  min-height:122px;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:18px;
  color:var(--text-3);
  text-align:center
}

.app-shell .po-products-empty-state.hidden{
  display:none!important
}

.app-shell .po-products-empty-state>span{
  display:inline-flex;
  width:38px;
  height:38px;
  align-items:center;
  justify-content:center;
  margin-bottom:7px;
  border-radius:10px;
  background:var(--info-weak);
  color:var(--info)
}

.app-shell .po-products-empty-state strong{
  color:var(--text-2);
  font-size:11px;
  font-weight:800
}

.app-shell .po-products-empty-state small{
  max-width:360px;
  margin-top:3px;
  font-size:9.5px;
  line-height:1.45
}

.app-shell .po-products-card #purchase_entry_table tbody td:first-child{
  color:var(--text-3);
  font-weight:800
}

.app-shell .po-products-card #purchase_entry_table tbody td:nth-child(2){
  min-width:210px;
  color:var(--text);
  font-weight:700;
  text-align:left
}

.app-shell .po-products-card #purchase_entry_table tbody .form-control{
  height:36px;
  min-width:84px;
  border-radius:8px;
  background:var(--surface)
}

.app-shell .po-products-card #purchase_entry_table tbody .input-group-addon{
  height:36px;
  min-width:34px;
  padding:0 8px
}

.app-shell .po-products-card #purchase_entry_table tbody .remove_purchase_entry_row{
  display:inline-flex;
  width:32px;
  height:32px;
  align-items:center;
  justify-content:center;
  padding:0;
  border:1px solid color-mix(in srgb,var(--danger) 25%,var(--border));
  border-radius:8px;
  background:var(--danger-weak);
  color:var(--danger)
}

.app-shell .po-products-summary{
  display:flex;
  justify-content:flex-end;
  margin-top:10px
}

.app-shell .po-products-summary table{
  width:min(100%,420px);
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface-2);
  border-collapse:separate;
  border-spacing:0
}

.app-shell .po-products-summary th,.app-shell .po-products-summary td{
  padding:7px 12px;
  color:var(--text-2);
  font-size:10px
}

.app-shell .po-products-summary th{
  font-weight:700;
  text-align:left
}

.app-shell .po-products-summary td{
  font-weight:800;
  text-align:right;
  font-variant-numeric:tabular-nums
}

.app-shell .po-products-summary tr+tr>*{
  border-top:1px solid var(--border-2)
}

.app-shell .po-products-summary tr:last-child td{
  color:var(--brand-strong);
  font-size:12px
}

.app-shell .po-money-input{
  display:grid;
  grid-template-columns:auto minmax(0,1fr)
}

.app-shell .po-money-input>span{
  display:inline-flex;
  min-width:42px;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border);
  border-right:0;
  border-radius:9px 0 0 9px;
  background:var(--surface-3);
  color:var(--text-2);
  font-size:10px;
  font-weight:850
}

.app-shell .po-money-input>.form-control{
  border-radius:0 9px 9px 0
}

.app-shell .po-field-help{
  margin:5px 0 0;
  color:var(--text-3);
  font-size:8.5px;
  line-height:1.4
}

.app-shell .po-shipping-documents-field .media-table{
  margin-top:9px
}

.app-shell .po-expenses-workspace{
  margin-top:16px;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:11px;
  background:var(--surface)
}

.app-shell .po-expenses-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:11px 12px;
  background:var(--surface-2)
}

.app-shell .po-expenses-head>div{
  display:flex;
  min-width:0;
  align-items:center;
  gap:9px
}

.app-shell .po-expenses-head>div>span{
  display:inline-flex;
  width:34px;
  height:34px;
  flex:none;
  align-items:center;
  justify-content:center;
  border-radius:9px;
  background:var(--warn-weak);
  color:var(--warn)
}

.app-shell .po-expenses-head p,.app-shell .po-expenses-head strong,.app-shell .po-expenses-head small{
  display:block;
  margin:0
}

.app-shell .po-expenses-head strong{
  color:var(--text);
  font-size:10.5px;
  font-weight:850
}

.app-shell .po-expenses-head small{
  margin-top:2px;
  color:var(--text-3);
  font-size:9px
}

.app-shell .po-expense-toggle{
  min-height:36px;
  padding:0 11px;
  font-size:9.5px
}

.app-shell .po-expense-toggle[aria-expanded=true]{
  border-color:color-mix(in srgb,var(--brand) 34%,var(--border));
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .po-expense-chevron{
  transition:transform .16s ease
}

.app-shell .po-expense-toggle[aria-expanded=true] .po-expense-chevron{
  transform:rotate(180deg)
}

.app-shell .po-delivery-card #additional_expenses_div{
  margin:0;
  padding:12px;
  border:0;
  border-top:1px solid var(--border);
  border-radius:0;
  background:var(--surface)
}

.app-shell .po-delivery-card #additional_expenses_div table{
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:9px;
  border-collapse:separate;
  border-spacing:0
}

.app-shell .po-delivery-card #additional_expenses_div th{
  padding:8px 10px;
  background:var(--surface-2)
}

.app-shell .po-delivery-card #additional_expenses_div td{
  padding:7px;
  border-top:1px solid var(--border-2)
}

.app-shell .po-delivery-card #additional_expenses_div td+td{
  border-left:1px solid var(--border-2)
}

.app-shell .po-delivery-card #additional_expenses_div .form-control{
  height:36px;
  background:var(--surface)
}

.app-shell .po-order-total-card{
  display:flex;
  justify-content:flex-end;
  margin-top:12px
}

.app-shell .po-order-total-card>div{
  display:flex;
  width:min(100%,420px);
  min-height:62px;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:10px 14px;
  border:1px solid color-mix(in srgb,var(--brand) 22%,var(--border));
  border-radius:11px;
  background:linear-gradient(110deg,var(--brand-weak),var(--surface))
}

.app-shell .po-order-total-card span,.app-shell .po-order-total-card small,.app-shell .po-order-total-card b{
  display:block
}

.app-shell .po-order-total-card small{
  color:var(--text-3);
  font-size:8.5px;
  font-weight:600
}

.app-shell .po-order-total-card b{
  margin-top:2px;
  color:var(--text-2);
  font-size:10.5px;
  font-weight:800
}

.app-shell .po-order-total-card #grand_total{
  color:var(--brand-strong);
  font-size:18px;
  font-weight:900;
  font-variant-numeric:tabular-nums
}

.app-shell .po-form-submit-bar{
  position:sticky!important;
  right:auto!important;
  bottom:0!important;
  left:auto!important;
  z-index:30!important;
  width:100%!important;
  margin-top:4px!important;
  padding:14px 0!important;
  border:0!important;
  border-radius:0!important;
  background:linear-gradient(to top,var(--bg) 72%,color-mix(in srgb,var(--bg) 0%,transparent))!important;
  box-shadow:none!important;
  backdrop-filter:none!important
}

.app-shell .po-form-submit-bar>div{
  display:flex;
  width:100%;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  padding:0!important
}

.app-shell .po-form-submit-bar .btn-ghost,.app-shell .po-form-submit-bar .btn-primary{
  height:44px;
  min-width:112px;
  padding:0 20px
}

.app-shell .po-form-submit-bar .btn-primary{
  min-width:148px
}

@media (max-width:680px){
  .app-shell .file-upload-picker{
    grid-template-columns:34px minmax(0,1fr)
  }

  .app-shell .file-upload-action{
    grid-column:1/-1;
    justify-content:center
  }

  .app-shell .po-products-summary,.app-shell .po-order-total-card{
    display:block
  }

  .app-shell .po-products-summary table,.app-shell .po-order-total-card>div{
    width:100%
  }

  .app-shell .po-expenses-head{
    align-items:stretch;
    flex-direction:column
  }

  .app-shell .date-time-control{
    grid-template-columns:minmax(0,1fr) 102px
  }
}

/* Purchase Order hierarchy pass: readable procurement blocks, not a flat field grid. */

.app-shell .po-form-card>.sec-head{
  min-height:72px;
  padding:15px 20px
}

.app-shell .po-form-card>.sec-head .sec-ico{
  width:40px;
  height:40px
}

.app-shell .po-form-card>.sec-head .font-bold{
  font-size:15px;
  line-height:1.35
}

.app-shell .po-form-card>.sec-head .text-xs{
  margin-top:2px;
  font-size:11.5px;
  line-height:1.4
}

.app-shell .po-form-card>.p-5,.app-shell .po-form-card>.lg\:p-6{
  padding:20px!important
}

.app-shell .po-form-card .form-group>label,.app-shell .po-field-address>strong{
  margin-bottom:7px;
  font-size:12.5px;
  font-weight:750;
  line-height:1.35
}

.app-shell .po-form-card .form-control{
  height:44px;
  font-size:13.5px
}

.app-shell .po-form-card textarea.form-control{
  font-size:13.5px;
  line-height:1.5
}

.app-shell .po-order-details-card #supplier_address_div{
  min-height:44px;
  padding:11px 13px;
  font-size:11.5px
}

.app-shell .po-order-details-card .help-block,.app-shell .file-upload-help,.app-shell .po-field-help{
  font-size:10.5px;
  line-height:1.45
}

/* Scoped to this card, as the rules around it are. Unscoped, they set the type for every document
   picker in the product from inside the purchase-order block — which is why the compact pickers
   came out with a heading larger than the field label above them. */

.app-shell .po-form-card .file-upload-copy strong{
  font-size:12px
}

.app-shell .po-form-card .file-upload-copy small{
  font-size:10.5px
}

.app-shell .po-form-card .file-upload-action{
  font-size:11px
}

.app-shell .po-details-group-heading{
  display:flex;
  grid-column:1/-1;
  min-height:58px;
  align-items:center;
  gap:11px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:11px;
  background:var(--surface-2)
}

.app-shell .po-details-group-heading>span{
  display:inline-flex;
  width:36px;
  height:36px;
  flex:none;
  align-items:center;
  justify-content:center;
  border-radius:9px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .po-details-group-heading.is-commercial{
  margin-top:2px
}

.app-shell .po-details-group-heading.is-commercial>span{
  background:var(--info-weak);
  color:var(--info)
}

.app-shell .po-details-group-heading strong,.app-shell .po-details-group-heading small{
  display:block
}

.app-shell .po-details-group-heading strong{
  color:var(--text);
  font-size:13.5px;
  font-weight:850;
  line-height:1.35
}

.app-shell .po-details-group-heading small{
  margin-top:2px;
  color:var(--text-3);
  font-size:11.5px;
  line-height:1.45
}

.app-shell .po-workspace-block{
  overflow:visible;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

.app-shell .po-workspace-block+.po-workspace-block{
  margin-top:16px
}

.app-shell .po-workspace-block-head{
  display:grid;
  grid-template-columns:38px minmax(0,1fr) auto;
  align-items:center;
  gap:11px;
  min-height:62px;
  padding:11px 14px;
  border-bottom:1px solid var(--border-2);
  border-radius:12px 12px 0 0;
  background:var(--surface-2)
}

.app-shell .po-workspace-block-head>span{
  display:inline-flex;
  width:38px;
  height:38px;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  background:var(--info-weak);
  color:var(--info)
}

.app-shell .po-workspace-block-head strong,.app-shell .po-workspace-block-head small{
  display:block
}

.app-shell .po-workspace-block-head strong{
  color:var(--text);
  font-size:14px;
  font-weight:850
}

.app-shell .po-workspace-block-head small{
  margin-top:2px;
  color:var(--text-3);
  font-size:11.5px;
  line-height:1.4
}

.app-shell .po-workspace-block-head>b{
  display:inline-flex;
  min-height:28px;
  align-items:center;
  padding:0 9px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface);
  color:var(--text-3);
  font-size:10.5px;
  font-weight:850;
  white-space:nowrap
}

.app-shell .po-workspace-block-body{
  padding:14px
}

.app-shell .po-product-builder .po-product-search-row{
  margin:0!important;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent
}

.app-shell .po-products-card{
  position:relative;
  isolation:isolate
}

.app-shell .po-product-builder .po-workspace-block-body{
  position:relative;
  min-height:76px
}

.app-shell .po-product-search-content{
  transition:opacity .18s ease,filter .18s ease
}

.app-shell .po-location-gate{
  position:absolute;
  z-index:50;
  inset:0;
  display:none;
  place-items:center;
  padding:18px;
  border-radius:13px;
  background:rgba(255,255,255,.76);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px)
}

.app-shell .po-products-card.requires-location .po-location-gate{
  display:grid
}

.app-shell .po-products-card.requires-location{
  -webkit-user-select:none;
     -moz-user-select:none;
          user-select:none
}

.app-shell .po-location-gate strong{
  display:inline-flex;
  min-height:42px;
  align-items:center;
  justify-content:center;
  padding:9px 16px;
  border:1px solid #fdba74;
  border-radius:9px;
  background:rgba(255,247,237,.96);
  box-shadow:0 10px 24px -18px rgba(194,65,12,.6);
  color:#c2410c;
  font-size:13px;
  font-weight:850;
  line-height:1.4;
  text-align:center
}

.app-shell .po-product-builder .po-workspace-block-head>span{
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .po-product-builder .po-workspace-block-head>b{
  border-color:color-mix(in srgb,var(--brand) 24%,var(--border));
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .po-products-card #search_product{
  height:48px;
  font-size:14px
}

.app-shell .po-product-search-row .btn-ghost{
  height:48px;
  padding:0 17px;
  font-size:12.5px
}

.app-shell .po-order-lines-workspace .po-workspace-block-body{
  padding:0
}

.app-shell .po-order-lines-workspace .po-products-table-shell{
  border:0;
  border-radius:0;
  background:var(--surface)
}

.app-shell .po-order-lines-workspace .po-products-summary{
  margin:0;
  padding:14px;
  border-top:1px solid var(--border-2);
  background:var(--surface-2)
}

.app-shell .po-order-lines-workspace .po-products-summary table{
  background:var(--surface)
}

.app-shell .po-products-card #purchase_entry_table thead th{
  padding:12px 10px!important;
  font-size:10.5px!important;
  line-height:1.35!important
}

.app-shell .po-products-card #purchase_entry_table tbody td{
  padding:11px 10px!important;
  font-size:12.5px;
  line-height:1.45
}

.app-shell .po-products-empty-state{
  min-height:150px
}

.app-shell .po-products-empty-state>span{
  width:44px;
  height:44px
}

.app-shell .po-products-empty-state strong{
  font-size:13px
}

.app-shell .po-products-empty-state small{
  margin-top:4px;
  font-size:11px
}

.app-shell .po-products-summary th,.app-shell .po-products-summary td{
  padding:9px 13px;
  font-size:11.5px
}

.app-shell .po-products-summary tr:last-child td{
  font-size:14px
}

.app-shell .po-delivery-grid{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(300px,.92fr);
  align-items:start;
  -moz-column-gap:16px;
       column-gap:16px;
  row-gap:14px;
  padding:0
}

.app-shell .po-delivery-group-heading,.app-shell .po-delivery-custom-heading{
  display:flex;
  min-height:58px;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:11px;
  background:var(--surface-2)
}

.app-shell .po-delivery-group-heading>span,.app-shell .po-delivery-custom-heading>span{
  display:inline-flex;
  width:36px;
  height:36px;
  flex:none;
  align-items:center;
  justify-content:center;
  border-radius:9px;
  background:var(--teal-weak);
  color:var(--teal)
}

.app-shell .po-delivery-group-heading strong,.app-shell .po-delivery-group-heading small,.app-shell .po-delivery-custom-heading strong,.app-shell .po-delivery-custom-heading small{
  display:block
}

.app-shell .po-delivery-group-heading strong,.app-shell .po-delivery-custom-heading strong{
  color:var(--text);
  font-size:13.5px;
  font-weight:850
}

.app-shell .po-delivery-group-heading small,.app-shell .po-delivery-custom-heading small{
  margin-top:2px;
  color:var(--text-3);
  font-size:11.5px;
  line-height:1.4
}

.app-shell .po-delivery-group-heading.is-plan{
  grid-row:1;
  grid-column:1/3
}

.app-shell .po-delivery-group-heading.is-cost{
  grid-row:1;
  grid-column:3;
  border-color:color-mix(in srgb,var(--warn) 18%,var(--border));
  background:color-mix(in srgb,var(--warn-weak) 34%,var(--surface-2))
}

.app-shell .po-delivery-group-heading.is-cost>span{
  background:var(--warn-weak);
  color:var(--warn)
}

.app-shell .po-shipping-details-field{
  grid-row:2;
  grid-column:1
}

.app-shell .po-shipping-address-field{
  grid-row:2;
  grid-column:2
}

.app-shell .po-shipping-charge-field{
  grid-row:2;
  grid-column:3;
  align-self:start;
  padding:0!important;
  border:0;
  border-radius:0;
  background:transparent
}

.app-shell .po-shipping-status-field{
  grid-row:3;
  grid-column:1
}

.app-shell .po-delivered-to-field{
  grid-row:3;
  grid-column:2
}

.app-shell .po-shipping-documents-field{
  grid-row:3;
  grid-column:3;
  align-self:start
}

.app-shell .po-delivery-custom-heading{
  grid-row:4;
  grid-column:1/-1;
  margin-top:2px
}

.app-shell .po-delivery-custom-heading>span{
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .po-delivery-card textarea{
  min-height:108px;
  padding:12px 13px
}

.app-shell .po-delivery-card .po-shipping-charge-field .po-money-input{
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface-2)
}

.app-shell .po-delivery-card .po-shipping-charge-field .po-money-input>span{
  border:0;
  border-right:1px solid var(--border)
}

.app-shell .po-delivery-card .po-shipping-charge-field .po-money-input>.form-control{
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important
}

.app-shell .po-delivery-card .po-shipping-charge-field .po-money-input:focus-within{
  border-color:var(--brand);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 10%,transparent)
}

.app-shell .po-delivery-card .po-shipping-documents-field .file-upload-picker{
  min-height:66px
}

.app-shell .po-delivery-card .po-expenses-workspace{
  margin-top:20px
}

.app-shell .po-money-input>span{
  min-width:46px;
  font-size:12px
}

.app-shell .po-expenses-head strong{
  font-size:12.5px
}

.app-shell .po-expenses-head small{
  font-size:10.5px
}

.app-shell .po-expense-toggle{
  font-size:11.5px
}

.app-shell .po-order-total-card small{
  font-size:10px
}

.app-shell .po-order-total-card b{
  font-size:12px
}

.app-shell .po-order-total-card #grand_total{
  font-size:20px
}

@media (max-width:1100px){
  .app-shell .po-delivery-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

  .app-shell .po-delivery-group-heading,.app-shell .po-delivery-custom-heading,.app-shell .po-shipping-details-field,.app-shell .po-shipping-address-field,.app-shell .po-shipping-charge-field,.app-shell .po-shipping-status-field,.app-shell .po-delivered-to-field,.app-shell .po-shipping-documents-field{
    grid-row:auto;
    grid-column:auto
  }

  .app-shell .po-delivery-group-heading.is-plan,.app-shell .po-delivery-custom-heading{
    grid-column:1/-1
  }

  .app-shell .po-delivery-group-heading.is-cost{
    display:none
  }
}

@media (max-width:680px){
  .app-shell .po-form-card>.sec-head{
    padding:13px 15px
  }

  .app-shell .po-form-card>.p-5,.app-shell .po-form-card>.lg\:p-6{
    padding:13px!important
  }

  .app-shell .po-workspace-block-head{
    grid-template-columns:36px minmax(0,1fr);
    padding:10px 11px
  }

  .app-shell .po-workspace-block-head>b{
    grid-column:2;
    justify-self:start
  }

  .app-shell .po-workspace-block-body{
    padding:10px
  }

  .app-shell .po-location-gate{
    padding:12px
  }

  .app-shell .po-location-gate strong{
    width:100%;
    font-size:12px
  }

  .app-shell .po-delivery-grid{
    grid-template-columns:1fr
  }

  .app-shell .po-delivery-group-heading.is-plan,.app-shell .po-delivery-custom-heading{
    grid-column:auto
  }
}

/* Purchase Order line editor: a readable buying worksheet instead of raw table cells. */

.app-shell .po-order-lines-workspace .table-responsive{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  overflow-x:auto;
  border:0!important;
  border-radius:0!important
}

.app-shell .po-order-lines-workspace #purchase_entry_table{
  width:100%!important;
  min-width:1080px;
  margin:0;
  border:0!important;
  table-layout:fixed;
  background:var(--surface)
}

.app-shell .po-order-lines-workspace #purchase_entry_table th,.app-shell .po-order-lines-workspace #purchase_entry_table td{
  border-right:0!important;
  border-left:0!important
}

.app-shell .po-order-lines-workspace #purchase_entry_table thead th{
  height:48px;
  border-top:0!important;
  border-bottom:1px solid var(--border)!important;
  background:var(--surface-2)!important;
  color:var(--text-3);
  font-weight:850!important;
  letter-spacing:.02em;
  text-align:center;
  vertical-align:middle
}

.app-shell .po-order-lines-workspace #purchase_entry_table thead .po-line-product-heading{
  text-align:left
}

.app-shell .po-order-lines-workspace #purchase_entry_table thead .po-line-index,.app-shell .po-order-lines-workspace #purchase_entry_table tbody .po-line-index{
  width:42px;
  text-align:center
}

.app-shell .po-order-lines-workspace #purchase_entry_table thead .po-line-product-heading{
  width:auto
}

.app-shell .po-order-lines-workspace #purchase_entry_table thead th:nth-child(3){
  width:150px
}

.app-shell .po-order-lines-workspace #purchase_entry_table thead th:nth-child(4),.app-shell .po-order-lines-workspace #purchase_entry_table thead th:nth-child(5),.app-shell .po-order-lines-workspace #purchase_entry_table thead th:nth-child(6){
  width:145px
}

.app-shell .po-order-lines-workspace #purchase_entry_table thead th:nth-last-child(2){
  width:104px
}

.app-shell .po-order-lines-workspace #purchase_entry_table .po-line-action-heading,.app-shell .po-order-lines-workspace #purchase_entry_table .po-line-remove-cell{
  width:72px;
  text-align:center
}

.app-shell .po-order-lines-workspace #purchase_entry_table tbody tr{
  background:var(--surface)!important;
  transition:background .15s ease,box-shadow .15s ease
}

.app-shell .po-order-lines-workspace #purchase_entry_table tbody tr:hover{
  background:color-mix(in srgb,var(--brand-weak) 24%,var(--surface))!important;
  box-shadow:inset 3px 0 0 color-mix(in srgb,var(--brand) 55%,transparent)
}

.app-shell .po-order-lines-workspace #purchase_entry_table tbody td{
  height:92px;
  border-top:0!important;
  border-bottom:1px solid var(--border-2)!important;
  color:var(--text-2);
  vertical-align:middle
}

.app-shell .po-order-lines-workspace #purchase_entry_table tbody tr:last-child td{
  border-bottom:0!important
}

.app-shell .po-order-lines-workspace .po-line-index .sr_number{
  display:inline-flex;
  width:25px;
  height:25px;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface-2);
  color:var(--text-3);
  font-size:10.5px;
  font-weight:850
}

.app-shell .po-line-product-cell{
  text-align:left!important
}

.app-shell .po-line-product{
  display:grid;
  grid-template-columns:38px minmax(0,1fr);
  align-items:start;
  gap:11px
}

.app-shell .po-line-product-icon{
  display:inline-flex;
  width:38px;
  height:38px;
  align-items:center;
  justify-content:center;
  border:1px solid color-mix(in srgb,var(--brand) 18%,var(--border));
  border-radius:10px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .po-line-product-copy{
  min-width:0;
  padding-top:1px
}

.app-shell .po-line-product-copy>strong{
  display:block;
  overflow-wrap:anywhere;
  color:var(--text);
  font-size:13px;
  font-weight:800;
  line-height:1.45
}

.app-shell .po-line-product-meta{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px;
  margin-top:6px;
  color:var(--text-3);
  font-size:10.5px;
  font-weight:650
}

.app-shell .po-line-sku{
  display:inline-flex;
  min-height:22px;
  align-items:center;
  padding:2px 7px;
  border:1px solid var(--border);
  border-radius:6px;
  background:var(--surface-2);
  color:var(--text-2);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:9.5px;
  font-weight:750
}

.app-shell .po-line-variation{
  display:block;
  margin-top:5px;
  color:var(--text-3);
  font-size:10.5px;
  line-height:1.4
}

.app-shell .po-order-lines-workspace #purchase_entry_table .form-control{
  height:40px;
  padding:8px 11px;
  border-color:var(--border);
  border-radius:8px;
  background:var(--surface);
  font-size:12.5px;
  box-shadow:none
}

.app-shell .po-order-lines-workspace #purchase_entry_table .form-control:hover{
  border-color:var(--text-3)
}

.app-shell .po-order-lines-workspace #purchase_entry_table .form-control:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 10%,transparent)
}

.app-shell .po-line-quantity-cell .purchase_quantity,.app-shell .po-line-money-cell .form-control,.app-shell .po-line-discount-cell .form-control{
  text-align:right;
  font-variant-numeric:tabular-nums
}

.app-shell .po-line-quantity-cell .sub_unit{
  margin-top:6px;
  background:var(--surface-2)!important;
  color:var(--text-2);
  font-weight:700
}

.app-shell .po-line-quantity-cell>br:first-of-type{
  display:none
}

.app-shell .po-line-discount-cell{
  position:relative
}

.app-shell .po-line-discount-cell:after{
  position:absolute;
  top:50%;
  right:19px;
  color:var(--text-3);
  font-size:11px;
  font-weight:800;
  content:"%";
  transform:translateY(-50%);
  pointer-events:none
}

.app-shell .po-line-discount-cell .form-control{
  padding-right:29px!important
}

.app-shell .po-line-total-cell{
  color:var(--brand-strong)!important;
  font-size:13.5px!important;
  font-weight:850!important;
  font-variant-numeric:tabular-nums;
  text-align:right!important;
  white-space:nowrap
}

.app-shell .po-line-action-heading span{
  font-size:9.5px
}

.app-shell .po-line-remove{
  display:inline-flex;
  width:36px;
  height:36px;
  align-items:center;
  justify-content:center;
  padding:0;
  border:1px solid color-mix(in srgb,var(--danger) 25%,var(--border));
  border-radius:9px;
  background:var(--danger-weak);
  color:var(--danger);
  cursor:pointer;
  transition:border-color .15s ease,background .15s ease,transform .15s ease
}

.app-shell .po-line-remove:hover{
  border-color:var(--danger);
  background:color-mix(in srgb,var(--danger-weak) 72%,#fff);
  transform:translateY(-1px)
}

.app-shell .po-line-remove:focus-visible{
  outline:2px solid var(--danger);
  outline-offset:2px
}

.app-shell .po-order-lines-workspace .po-products-summary table{
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:10px;
  box-shadow:var(--shadow-sm)
}

.app-shell .po-order-lines-workspace .po-products-summary tr:last-child{
  background:var(--brand-weak)
}

.app-shell .po-order-lines-workspace .po-products-summary tr:last-child th,.app-shell .po-order-lines-workspace .po-products-summary tr:last-child td{
  color:var(--brand-strong);
  font-weight:850
}

/* Purchase Order payment terms: one semantic duration control, not two legacy inputs. */

.app-shell .po-payment-term-control{
  display:grid;
  height:44px;
  grid-template-columns:42px minmax(76px,.8fr) minmax(108px,1.2fr);
  align-items:stretch;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface-2);
  transition:border-color .15s ease,box-shadow .15s ease
}

.app-shell .po-payment-term-control:hover{
  border-color:var(--text-3)
}

.app-shell .po-payment-term-control:focus-within{
  border-color:var(--brand);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 10%,transparent)
}

.app-shell .po-payment-term-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-right:1px solid var(--border-2);
  color:var(--text-3)
}

.app-shell .po-payment-term-control:focus-within .po-payment-term-icon{
  color:var(--brand-strong)
}

.app-shell .po-payment-term-control>.po-payment-term-value{
  width:100%!important;
  height:42px!important;
  padding:0 11px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important
}

.app-shell .po-payment-term-control>.select-field{
  min-width:0;
  border-left:1px solid var(--border-2);
  background:var(--surface)
}

.app-shell .po-payment-term-control>.select-field>select.po-payment-term-unit{
  width:100%!important;
  height:42px!important;
  padding:0 32px 0 12px!important;
  border:0!important;
  border-radius:0!important;
  outline:0;
  background-color:transparent!important;
  color:var(--text-2);
  font-size:13px;
  font-weight:650;
  box-shadow:none!important;
  cursor:pointer
}

.app-shell .po-field-pay-term .po-field-help{
  margin-top:6px
}

@media (max-width:680px){
  .app-shell .po-order-lines-workspace #purchase_entry_table{
    min-width:980px
  }

  .app-shell .po-line-product{
    grid-template-columns:32px minmax(0,1fr);
    gap:8px
  }

  .app-shell .po-line-product-icon{
    width:32px;
    height:32px
  }
}

/* Notification composer: channel-first messaging without the legacy empty accordion. */

body.app-ui .notification-composer-dialog{
  width:min(860px,calc(100vw - 28px));
  max-width:860px;
  margin:28px auto
}

body.app-ui .notification-composer{
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:15px;
  background:var(--surface);
  box-shadow:0 28px 70px -28px rgba(13,28,20,.55)
}

body.app-ui .notification-composer form{
  display:flex;
  max-height:calc(100vh - 56px);
  flex-direction:column
}

body.app-ui .notification-composer-header{
  display:flex;
  min-height:74px;
  align-items:center;
  justify-content:space-between;
  padding:15px 18px;
  border-bottom:1px solid var(--border-2);
  background:var(--surface)
}

body.app-ui .notification-composer-heading{
  display:flex;
  min-width:0;
  align-items:center;
  gap:11px;
  text-align:left
}

body.app-ui .notification-composer-icon{
  display:inline-flex;
  width:40px;
  height:40px;
  flex:0 0 40px;
  align-items:center;
  justify-content:center;
  border-radius:11px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

body.app-ui .notification-composer-heading h4{
  margin:0;
  color:var(--text);
  font-size:16px;
  font-weight:850;
  line-height:1.35
}

body.app-ui .notification-composer-heading p{
  margin:2px 0 0;
  color:var(--text-3);
  font-size:11.5px;
  line-height:1.4
}

body.app-ui .notification-composer-close{
  position:static;
  display:inline-flex;
  width:34px;
  height:34px;
  align-items:center;
  justify-content:center;
  margin:0;
  padding:0;
  border:1px solid transparent;
  border-radius:9px;
  background:var(--surface-2);
  color:var(--text-2);
  font-size:0;
  opacity:1
}

body.app-ui .notification-composer-close:hover{
  border-color:var(--border);
  background:var(--surface);
  color:var(--text)
}

body.app-ui .notification-composer-body{
  min-height:0;
  padding:16px 18px 20px;
  overflow-y:auto;
  background:color-mix(in srgb,var(--surface-2) 38%,var(--surface))
}

body.app-ui .notification-tag-helper{
  margin-bottom:14px;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:11px;
  background:var(--surface)
}

body.app-ui .notification-tag-helper summary{
  position:relative;
  display:grid;
  min-height:54px;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  padding:9px 42px 9px 12px;
  cursor:pointer;
  list-style:none
}

body.app-ui .notification-tag-helper summary::-webkit-details-marker{
  display:none
}

body.app-ui .notification-tag-helper summary>span{
  display:flex;
  align-items:center;
  gap:7px;
  color:var(--text-2);
  font-size:12px;
  font-weight:800
}

body.app-ui .notification-tag-helper summary>small{
  grid-column:1;
  color:var(--text-3);
  font-size:10.5px;
  line-height:1.35
}

body.app-ui .notification-tag-chevron{
  position:absolute;
  top:50%;
  right:14px;
  color:var(--text-3);
  transition:transform .18s ease;
  transform:translateY(-50%)
}

body.app-ui .notification-tag-helper[open] .notification-tag-chevron{
  transform:translateY(-50%) rotate(180deg)
}

body.app-ui .notification-tag-list{
  display:flex;
  max-height:126px;
  align-items:flex-start;
  flex-wrap:wrap;
  gap:6px;
  padding:10px 12px 12px;
  overflow-y:auto;
  border-top:1px solid var(--border-2);
  background:var(--surface-2)
}

body.app-ui .notification-tag-list code{
  display:inline-flex;
  padding:4px 7px;
  border:1px solid var(--border);
  border-radius:6px;
  background:var(--surface);
  color:var(--brand-strong);
  font-size:10.5px;
  font-weight:700;
  line-height:1.2;
  white-space:normal
}

body.app-ui .notification-channel-picker{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin-bottom:14px
}

body.app-ui .notification-channel{
  position:relative;
  display:grid;
  min-height:65px;
  grid-template-columns:36px minmax(0,1fr) 20px;
  align-items:center;
  gap:9px;
  padding:9px 10px;
  border:1px solid var(--border);
  border-radius:11px;
  background:var(--surface);
  cursor:pointer;
  transition:border-color .15s ease,background .15s ease,box-shadow .15s ease
}

body.app-ui .notification-channel:hover{
  border-color:color-mix(in srgb,var(--brand) 36%,var(--border))
}

body.app-ui .notification-channel.is-active{
  border-color:color-mix(in srgb,var(--brand) 45%,var(--border));
  background:color-mix(in srgb,var(--brand-weak) 42%,var(--surface));
  box-shadow:0 0 0 2px color-mix(in srgb,var(--brand) 6%,transparent)
}

body.app-ui .notification-channel-icon{
  display:inline-flex;
  width:36px;
  height:36px;
  align-items:center;
  justify-content:center;
  border-radius:9px;
  background:var(--surface-2);
  color:var(--text-3)
}

body.app-ui .notification-channel.is-active .notification-channel-icon.is-email{
  background:var(--blue-weak);
  color:var(--blue)
}

body.app-ui .notification-channel.is-active .notification-channel-icon.is-sms{
  background:var(--warn-weak);
  color:var(--warn)
}

body.app-ui .notification-channel.is-active .notification-channel-icon.is-whatsapp{
  background:var(--brand-weak);
  color:var(--brand-strong)
}

body.app-ui .notification-channel>span:nth-of-type(2){
  min-width:0
}

body.app-ui .notification-channel strong,body.app-ui .notification-channel small{
  display:block
}

body.app-ui .notification-channel strong{
  color:var(--text);
  font-size:11.5px;
  font-weight:800;
  line-height:1.35
}

body.app-ui .notification-channel small{
  margin-top:2px;
  color:var(--text-3);
  font-size:9.5px;
  line-height:1.3
}

body.app-ui .notification-channel>i{
  display:inline-flex;
  width:18px;
  height:18px;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border);
  border-radius:50%;
  background:var(--surface);
  color:transparent
}

body.app-ui .notification-channel.is-active>i{
  border-color:var(--brand);
  background:var(--brand);
  color:#fff
}

body.app-ui .notification-compose-section{
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface)
}

body.app-ui .notification-compose-section+.notification-compose-section{
  margin-top:12px
}

body.app-ui .notification-section-heading{
  display:flex;
  align-items:center;
  gap:9px;
  padding:11px 13px;
  border-bottom:1px solid var(--border-2);
  background:var(--surface-2)
}

body.app-ui .notification-section-heading>span{
  display:inline-flex;
  width:32px;
  height:32px;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

body.app-ui .notification-section-heading strong,body.app-ui .notification-section-heading small{
  display:block
}

body.app-ui .notification-section-heading strong{
  color:var(--text);
  font-size:12.5px;
  font-weight:850
}

body.app-ui .notification-section-heading small{
  margin-top:1px;
  color:var(--text-3);
  font-size:10.5px
}

body.app-ui .notification-form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  padding:13px
}

body.app-ui .notification-compose-section.is-mobile>.form-group{
  margin:13px
}

body.app-ui .notification-compose-section .form-group{
  position:relative;
  margin-bottom:0
}

body.app-ui .notification-compose-section label,body.app-ui .notification-ledger-format label{
  display:block;
  margin-bottom:6px;
  color:var(--text-2);
  font-size:11.5px;
  font-weight:750
}

body.app-ui .notification-field-wide{
  grid-column:1/-1
}

body.app-ui .notification-field-hint{
  position:absolute;
  top:0;
  right:0;
  color:var(--text-3);
  font-size:9.5px
}

body.app-ui .notification-compose-section .form-control,body.app-ui .notification-ledger-format .form-control{
  width:100%;
  height:42px;
  padding:9px 11px;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface-2);
  color:var(--text);
  font-size:12.5px;
  box-shadow:none
}

body.app-ui .notification-compose-section .form-control:focus,body.app-ui .notification-ledger-format .form-control:focus{
  border-color:var(--brand);
  background:var(--surface);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 10%,transparent)
}

body.app-ui .notification-message-field textarea.form-control{
  height:auto;
  min-height:112px;
  resize:vertical;
  line-height:1.55
}

body.app-ui .notification-message-field .tox-tinymce{
  border:1px solid var(--border)!important;
  border-radius:9px!important;
  box-shadow:none!important
}

body.app-ui .notification-attachment-option{
  display:flex!important;
  align-items:center;
  gap:8px;
  margin:0 13px 13px!important;
  padding:9px 10px;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface-2);
  cursor:pointer
}

body.app-ui .notification-attachment-option span{
  display:flex;
  align-items:center;
  gap:6px
}

body.app-ui .notification-inline-note{
  margin:0 13px 13px;
  color:var(--text-3);
  font-size:10.5px
}

body.app-ui .notification-ledger-format{
  margin-bottom:14px;
  padding:12px;
  border:1px solid var(--border);
  border-radius:11px;
  background:var(--surface)
}

body.app-ui .notification-composer-footer{
  display:flex;
  min-height:66px;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin:0;
  padding:11px 18px;
  border-top:1px solid var(--border-2);
  background:var(--surface);
  text-align:left
}

body.app-ui .notification-send-summary{
  display:flex;
  align-items:center;
  gap:6px;
  color:var(--text-3);
  font-size:10.5px
}

body.app-ui .notification-composer-footer>div{
  display:flex;
  align-items:center;
  gap:8px
}

body.app-ui .notification-composer-footer .btn-ghost,body.app-ui .notification-composer-footer .btn-primary{
  display:inline-flex;
  height:40px;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:0 15px;
  border-radius:9px;
  font-size:12px;
  font-weight:800
}

body.app-ui .notification-composer-footer .btn-ghost{
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text-2)
}

body.app-ui .notification-composer-footer .btn-primary{
  border:1px solid var(--brand);
  background:var(--brand);
  color:#fff;
  box-shadow:0 8px 18px -10px color-mix(in srgb,var(--brand) 75%,transparent)
}

body.app-ui .notification-composer-footer .btn-primary:disabled{
  cursor:wait;
  opacity:.65
}

@media (max-width:680px){
  body.app-ui .notification-composer-dialog{
    width:calc(100vw - 16px);
    margin:8px auto
  }

  body.app-ui .notification-composer form{
    max-height:calc(100vh - 16px)
  }

  body.app-ui .notification-composer-header{
    min-height:66px;
    padding:12px
  }

  body.app-ui .notification-composer-body{
    padding:12px
  }

  body.app-ui .notification-channel-picker{
    grid-template-columns:1fr
  }

  body.app-ui .notification-channel{
    min-height:58px
  }

  body.app-ui .notification-form-grid{
    grid-template-columns:1fr;
    padding:11px
  }

  body.app-ui .notification-field-wide{
    grid-column:auto
  }

  body.app-ui .notification-field-hint{
    position:static;
    display:block;
    margin:-3px 0 6px
  }

  body.app-ui .notification-composer-footer{
    padding:10px 12px
  }

  body.app-ui .notification-send-summary{
    display:none
  }

  body.app-ui .notification-composer-footer>div{
    width:100%
  }

  body.app-ui .notification-composer-footer button{
    flex:1
  }
}

/* Purchases: an operational receiving ledger with financial context. */

.app-shell .purchase-ledger-page{
  max-width:1600px
}

.app-shell .purchase-control-board{
  display:grid;
  grid-template-columns:310px minmax(0,1fr);
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:13px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

.app-shell .purchase-control-intro{
  position:relative;
  display:grid;
  min-height:98px;
  grid-template-columns:40px minmax(0,1fr);
  align-items:center;
  gap:10px;
  padding:14px 16px;
  border-right:1px solid var(--border-2)
}

.app-shell .purchase-control-intro>span{
  display:inline-flex;
  width:40px;
  height:40px;
  align-items:center;
  justify-content:center;
  border-radius:11px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .purchase-control-intro small,.app-shell .purchase-control-intro strong,.app-shell .purchase-control-intro p{
  display:block
}

.app-shell .purchase-control-intro small{
  color:var(--text-3);
  font-size:8px;
  font-weight:900;
  letter-spacing:.11em
}

.app-shell .purchase-control-intro strong{
  margin-top:2px;
  color:var(--text);
  font-size:12px;
  font-weight:850
}

.app-shell .purchase-control-intro p{
  margin:2px 0 0;
  color:var(--text-3);
  font-size:9.5px;
  line-height:1.35
}

.app-shell .purchase-board-clear{
  position:absolute;
  right:10px;
  bottom:8px;
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:3px 6px;
  border:0;
  background:transparent;
  color:var(--brand-strong);
  font-size:9px;
  font-weight:800
}

.app-shell .purchase-control-groups{
  display:grid;
  grid-template-columns:minmax(480px,1.35fr) minmax(310px,.8fr);
  gap:12px;
  padding:10px
}

.app-shell .purchase-state-group,.app-shell .purchase-payment-group{
  position:relative;
  display:grid;
  align-items:stretch;
  gap:7px;
  padding-top:15px
}

.app-shell .purchase-state-group{
  grid-template-columns:repeat(3,minmax(0,1fr))
}

.app-shell .purchase-payment-group{
  grid-template-columns:repeat(2,minmax(0,1fr))
}

.app-shell .purchase-state-group>small,.app-shell .purchase-payment-group>small{
  position:absolute;
  top:0;
  left:2px;
  color:var(--text-3);
  font-size:7.5px;
  font-weight:900;
  letter-spacing:.1em
}

.app-shell .purchase-state-group>button{
  display:grid;
  min-height:58px;
  grid-template-columns:30px minmax(0,1fr);
  align-items:center;
  gap:8px;
  padding:7px 9px;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface-2);
  text-align:left;
  transition:border-color .15s ease,background .15s ease,box-shadow .15s ease
}

.app-shell .purchase-state-group>button i{
  display:inline-flex;
  width:30px;
  height:30px;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  background:var(--surface);
  color:var(--text-3)
}

.app-shell .purchase-state-group>button b,.app-shell .purchase-state-group>button small{
  display:block
}

.app-shell .purchase-state-group>button b{
  color:var(--text-2);
  font-size:10.5px;
  font-weight:850
}

.app-shell .purchase-state-group>button small{
  margin-top:1px;
  color:var(--text-3);
  font-size:8.5px
}

.app-shell .purchase-state-group>button:hover{
  border-color:color-mix(in srgb,var(--brand) 32%,var(--border));
  background:var(--surface)
}

.app-shell .purchase-state-group>button.is-active{
  border-color:color-mix(in srgb,var(--brand) 42%,var(--border));
  background:color-mix(in srgb,var(--brand-weak) 46%,var(--surface));
  box-shadow:0 0 0 2px color-mix(in srgb,var(--brand) 6%,transparent)
}

.app-shell .purchase-state-group>button.is-active i{
  background:var(--brand);
  color:#fff
}

.app-shell .purchase-state-group>button.is-active b{
  color:var(--brand-strong)
}

.app-shell .purchase-payment-group>button{
  display:flex;
  min-height:26px;
  align-items:center;
  gap:6px;
  padding:4px 8px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface-2);
  color:var(--text-2);
  font-size:9.5px;
  font-weight:800;
  text-align:left
}

.app-shell .purchase-payment-group>button span{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--text-3)
}

.app-shell .purchase-payment-group>button.is-paid span{
  background:var(--brand)
}

.app-shell .purchase-payment-group>button.is-due span,.app-shell .purchase-payment-group>button.is-overdue span{
  background:var(--danger)
}

.app-shell .purchase-payment-group>button.is-partial span{
  background:var(--warn)
}

.app-shell .purchase-payment-group>button:hover,.app-shell .purchase-payment-group>button.is-active{
  border-color:color-mix(in srgb,var(--brand) 38%,var(--border));
  background:var(--surface)
}

.app-shell .purchase-payment-group>button.is-active{
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--brand) 24%,transparent);
  color:var(--text)
}

.app-shell .purchase-filter-card{
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:13px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

.app-shell .purchase-filter-head{
  display:flex;
  min-height:54px;
  align-items:center;
  justify-content:space-between;
  padding:9px 13px;
  border-bottom:1px solid var(--border-2);
  background:var(--surface-2)
}

.app-shell .purchase-filter-head>div{
  display:flex;
  align-items:center;
  gap:9px
}

.app-shell .purchase-filter-head>div>span{
  display:inline-flex;
  width:30px;
  height:30px;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  background:var(--surface);
  color:var(--text-2)
}

.app-shell .purchase-filter-head strong,.app-shell .purchase-filter-head p{
  display:block
}

.app-shell .purchase-filter-head strong{
  color:var(--text);
  font-size:11.5px;
  font-weight:850
}

.app-shell .purchase-filter-head p{
  margin:1px 0 0;
  color:var(--text-3);
  font-size:9.5px
}

.app-shell .purchase-filter-reset{
  display:inline-flex;
  height:31px;
  align-items:center;
  gap:5px;
  padding:0 9px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface);
  color:var(--text-2);
  font-size:9.5px;
  font-weight:750
}

.app-shell .purchase-filter-reset:hover{
  border-color:var(--text-3);
  color:var(--text)
}

.app-shell .purchase-filter-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:11px;
  padding:12px 13px 14px
}

.app-shell .purchase-filter-grid .field{
  min-width:0
}

.app-shell .purchase-filter-grid .form-control,.app-shell .purchase-filter-grid .select2-selection{
  height:40px!important;
  border-color:var(--border)!important;
  border-radius:9px!important;
  background:var(--surface-2)!important;
  box-shadow:none!important
}

.app-shell .purchase-filter-grid .select2-selection__rendered{
  line-height:38px!important
}

.app-shell .purchase-date-control{
  position:relative
}

.app-shell .purchase-date-control>svg{
  position:absolute;
  z-index:2;
  top:50%;
  left:11px;
  color:var(--text-3);
  transform:translateY(-50%);
  pointer-events:none
}

.app-shell .purchase-date-control .form-control{
  padding-left:35px!important
}

.app-shell .purchase-ledger-card{
  overflow:visible
}

.app-shell .purchase-ledger-table-wrap{
  overflow-x:auto
}

/* Auto layout with min-width floors, not fixed widths: at a narrow viewport fixed widths forced
   nowrap content (the receiving badge, the grand total, Khmer supplier names) to overflow its cell
   and overlap the next column. Each column now grows to fit its content and the table scrolls. */

.app-shell .purchase-ledger-table{
  width:100%!important;
  min-width:1160px;
  table-layout:auto
}

.app-shell .purchase-ledger-table thead th:nth-child(1){
  min-width:165px
}

.app-shell .purchase-ledger-table thead th:nth-child(2){
  min-width:130px
}

.app-shell .purchase-ledger-table thead th:nth-child(3){
  min-width:220px
}

.app-shell .purchase-ledger-table thead th:nth-child(4){
  min-width:130px
}

.app-shell .purchase-ledger-table thead th:nth-child(5){
  min-width:230px
}

.app-shell .purchase-ledger-table thead th:nth-child(6){
  min-width:170px
}

.app-shell .purchase-ledger-table thead th:nth-child(7){
  min-width:150px
}

.app-shell .purchase-ledger-table thead th:nth-child(8){
  min-width:112px;
  text-align:right
}

.app-shell .purchase-ledger-table tbody tr{
  background:var(--surface)!important;
  transition:background .15s ease,box-shadow .15s ease
}

.app-shell .purchase-ledger-table tbody tr:hover{
  background:color-mix(in srgb,var(--brand-weak) 20%,var(--surface))!important;
  box-shadow:inset 3px 0 0 color-mix(in srgb,var(--brand) 58%,transparent)
}

.app-shell .purchase-ledger-table tbody td{
  height:68px;
  padding:10px 12px!important;
  border-bottom:1px solid var(--border-2)!important;
  color:var(--text-2);
  font-size:13px;
  vertical-align:middle!important
}

.app-shell .purchase-ledger-table tbody td:last-child{
  text-align:right
}

.app-shell .purchase-reference{
  display:grid;
  grid-template-columns:28px minmax(0,1fr);
  align-items:start;
  gap:8px
}

.app-shell .purchase-reference>span{
  display:inline-flex;
  width:28px;
  height:28px;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .purchase-reference strong,.app-shell .purchase-reference small{
  display:block
}

.app-shell .purchase-reference strong{
  overflow-wrap:normal;
  white-space:nowrap;
  color:var(--text);
  font-size:13.5px;
  font-weight:800;
  line-height:1.35
}

.app-shell .purchase-reference small{
  margin-top:2px;
  color:var(--text-3);
  font-size:11px
}

.app-shell .purchase-return-flag{
  display:inline-flex!important;
  width:-moz-max-content;
  width:max-content;
  align-items:center;
  gap:3px;
  padding:2px 5px;
  border-radius:5px;
  background:var(--danger-weak);
  color:var(--danger)!important;
  font-weight:800
}

.app-shell .purchase-date-stack strong,.app-shell .purchase-date-stack small{
  display:block
}

.app-shell .purchase-date-stack strong{
  white-space:nowrap;
  color:var(--text-2);
  font-size:13px;
  font-weight:700;
  line-height:1.4
}

.app-shell .purchase-date-stack small{
  margin-top:3px;
  color:var(--text-3);
  font-size:10.5px;
  text-transform:uppercase
}

.app-shell .purchase-supplier{
  display:grid;
  grid-template-columns:32px minmax(0,1fr);
  align-items:start;
  gap:9px
}

.app-shell .purchase-supplier>span{
  display:inline-flex;
  width:32px;
  height:32px;
  align-items:center;
  justify-content:center;
  border-radius:9px;
  background:var(--surface-2);
  color:var(--text-3)
}

.app-shell .purchase-supplier strong,.app-shell .purchase-supplier small{
  display:block
}

.app-shell .purchase-supplier strong{
  overflow-wrap:anywhere;
  color:var(--text);
  font-size:13.5px;
  font-weight:700;
  line-height:1.4
}

.app-shell .purchase-supplier small{
  margin-top:2px;
  color:var(--text-3);
  font-size:11px
}

.app-shell .purchase-supplier .telegram-row-indicator{
  margin-top:5px
}

.app-shell .purchase-location-context{
  display:flex;
  align-items:center;
  gap:5px;
  margin:6px 0 0 41px;
  color:var(--text-3)
}

.app-shell .purchase-location-context span{
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--brand)
}

.app-shell .purchase-location-context b{
  overflow:hidden;
  font-size:11px;
  font-weight:700;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .purchase-receiving-badge{
  display:inline-flex;
  min-height:29px;
  align-items:center;
  gap:5px;
  padding:4px 10px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--surface-2);
  color:var(--text-2);
  font-size:11.5px;
  font-weight:800;
  white-space:nowrap
}

.app-shell button.purchase-receiving-badge{
  cursor:pointer
}

.app-shell .purchase-receiving-badge>span{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--text-3)
}

.app-shell .purchase-receiving-badge.is-received{
  border-color:color-mix(in srgb,var(--brand) 28%,var(--border));
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .purchase-receiving-badge.is-received>span{
  background:var(--brand)
}

.app-shell .purchase-receiving-badge.is-pending{
  border-color:color-mix(in srgb,var(--warn) 30%,var(--border));
  background:var(--warn-weak);
  color:color-mix(in srgb,var(--warn) 75%,#4b3600)
}

.app-shell .purchase-receiving-badge.is-pending>span{
  background:var(--warn)
}

.app-shell .purchase-receiving-badge.is-ordered{
  border-color:color-mix(in srgb,var(--blue) 28%,var(--border));
  background:var(--blue-weak);
  color:var(--blue)
}

.app-shell .purchase-receiving-badge.is-ordered>span{
  background:var(--blue)
}

.app-shell .purchase-financials{
  display:grid;
  grid-template-columns:minmax(78px,.75fr) minmax(0,1.25fr);
  align-items:start;
  gap:10px
}

.app-shell .purchase-financials>div:first-child>small{
  display:block;
  margin-bottom:3px;
  color:var(--text-3);
  font-size:10px;
  font-weight:700;
  text-transform:uppercase
}

.app-shell .purchase-financials .final_total{
  color:var(--text);
  font-size:16.5px;
  font-weight:800;
  font-variant-numeric:tabular-nums
}

.app-shell .purchase-financial-status{
  display:flex;
  min-width:0;
  flex-direction:column;
  align-items:flex-start;
  gap:6px
}

.app-shell .purchase-financial-status .payment-status-label .label{
  display:inline-flex;
  min-height:25px;
  align-items:center;
  padding:3px 9px;
  border:0;
  border-radius:999px;
  font-size:11.5px;
  font-weight:800
}

.app-shell .purchase-due-breakdown{
  display:flex;
  flex-direction:column;
  gap:6px
}

.app-shell .purchase-due-breakdown>span{
  display:flex;
  min-width:0;
  flex-direction:column
}

.app-shell .purchase-due-breakdown small{
  color:var(--text-3);
  font-size:9.5px;
  text-transform:uppercase
}

.app-shell .purchase-due-breakdown b{
  color:var(--text);
  font-size:13.5px;
  font-weight:800;
  font-variant-numeric:tabular-nums
}

.app-shell .purchase-owner{
  display:block;
  min-width:0
}

.app-shell .purchase-owner strong,.app-shell .purchase-owner small{
  display:block
}

.app-shell .purchase-owner strong{
  white-space:nowrap;
  color:var(--text);
  font-size:12.5px;
  font-weight:700;
  line-height:1.35
}

.app-shell .purchase-owner small{
  margin-top:2px;
  color:var(--text-3);
  font-size:10.5px;
  line-height:1.35
}

.app-shell .purchase-ledger-table tbody td:nth-child(7){
  max-width:150px;
  overflow:hidden;
  color:var(--text-3);
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .purchase-row-actions{
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px
}

.app-shell .purchase-row-actions .purchase-edit-action{
  border-color:color-mix(in srgb,var(--brand) 26%,var(--border));
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .purchase-action-menu{
  min-width:205px;
  padding:6px
}

.app-shell .purchase-action-menu>li>a{
  display:flex;
  align-items:center;
  gap:9px;
  padding:8px 9px;
  border-radius:7px;
  color:var(--text-2);
  font-size:12.5px;
  font-weight:700
}

.app-shell .purchase-action-menu>li>a:hover{
  background:var(--surface-2);
  color:var(--text)
}

.app-shell .purchase-action-menu .table-action-icon{
  width:15px;
  height:15px;
  flex:0 0 15px;
  color:var(--text-3)
}

.app-shell .purchase-action-menu .table-action-delete{
  color:var(--danger)
}

.app-shell .purchase-ledger-summary{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;
  padding:10px 12px;
  border-top:1px solid var(--border-2);
  background:var(--surface-2)
}

.app-shell .purchase-ledger-summary>div{
  display:grid;
  min-height:58px;
  grid-template-columns:32px minmax(0,1fr) auto;
  align-items:center;
  gap:9px;
  padding:8px 10px;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface)
}

.app-shell .purchase-ledger-summary>div>span{
  display:inline-flex;
  width:32px;
  height:32px;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .purchase-ledger-summary p,.app-shell .purchase-ledger-summary small{
  display:block;
  margin:0
}

.app-shell .purchase-ledger-summary p{
  color:var(--text-2);
  font-size:11.5px;
  font-weight:800
}

.app-shell .purchase-ledger-summary small{
  margin-top:2px;
  color:var(--text-3);
  font-size:9px;
  font-weight:650;
  line-height:1.35
}

.app-shell .purchase-ledger-summary strong{
  color:var(--text);
  font-size:15px;
  font-weight:900;
  font-variant-numeric:tabular-nums;
  text-align:right
}

.app-shell .purchase-ledger-summary .footer_status_count .label,.app-shell .purchase-ledger-summary .footer_payment_status_count .label{
  display:inline-flex;
  margin:2px 2px 0 0;
  padding:2px 4px;
  border:0;
  border-radius:4px;
  font-size:8.5px
}

@media (max-width:1100px){
  .app-shell .purchase-control-board{
    grid-template-columns:1fr
  }

  .app-shell .purchase-control-intro{
    min-height:76px;
    border-right:0;
    border-bottom:1px solid var(--border-2)
  }

  .app-shell .purchase-control-groups{
    grid-template-columns:1fr
  }

  .app-shell .purchase-filter-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}

@media (max-width:680px){
  .app-shell .purchase-control-groups{
    padding:9px
  }

  .app-shell .purchase-state-group{
    grid-template-columns:1fr
  }

  .app-shell .purchase-payment-group{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

  .app-shell .purchase-filter-grid{
    grid-template-columns:1fr;
    padding:11px
  }

  .app-shell .purchase-ledger-summary{
    grid-template-columns:1fr
  }
}

/* Add purchase: a receiving workspace ordered around the operator's decisions. */

.app-shell .purchase-create-page{
  max-width:1480px
}

.app-shell .purchase-form-progress{
  position:sticky;
  top:0;
  z-index:24;
  display:grid;
  grid-template-columns:auto minmax(30px,1fr) auto minmax(30px,1fr) auto minmax(30px,1fr) auto;
  align-items:center;
  gap:8px;
  margin-bottom:14px;
  padding:10px 14px;
  border:1px solid var(--border);
  border-radius:11px;
  background:color-mix(in srgb,var(--surface) 96%,transparent);
  box-shadow:var(--shadow-sm);
  backdrop-filter:blur(12px)
}

.app-shell .purchase-form-progress button{
  display:flex;
  min-width:0;
  align-items:center;
  gap:7px;
  padding:0;
  border:0;
  border-radius:8px;
  outline:0!important;
  background:transparent;
  color:var(--text-3);
  font:inherit;
  font-size:9.5px;
  text-align:left;
  cursor:pointer;
  transition:color .18s ease,box-shadow .18s ease
}

.app-shell .purchase-form-progress button:hover{
  color:var(--text-2)
}

.app-shell .purchase-form-progress button:focus-visible{
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 10%,transparent)
}

.app-shell .purchase-form-progress i{
  display:inline-flex;
  width:24px;
  height:24px;
  flex:0 0 24px;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  background:var(--surface-3);
  font-size:9px;
  font-style:normal;
  font-weight:850;
  transition:background .18s ease,color .18s ease,box-shadow .18s ease
}

.app-shell .purchase-form-progress b{
  font-weight:750;
  white-space:nowrap
}

.app-shell .purchase-form-progress button.is-active{
  color:var(--brand-strong)
}

.app-shell .purchase-form-progress button.is-active i{
  background:var(--brand);
  color:#fff;
  box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 10%,transparent)
}

.app-shell .purchase-form-progress button.is-complete{
  color:var(--brand-strong)
}

.app-shell .purchase-form-progress button.is-complete i{
  background:var(--brand-weak);
  color:var(--brand-strong);
  font-size:0
}

.app-shell .purchase-form-progress button.is-complete i:after{
  font-size:12px;
  font-weight:900;
  content:"✓"
}

.app-shell .purchase-form-progress em{
  display:block;
  height:2px;
  border-radius:999px;
  background:var(--border);
  transition:background .22s ease,box-shadow .22s ease
}

.app-shell .purchase-form-progress em.is-complete{
  background:var(--brand);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--brand) 7%,transparent)
}

.app-shell .purchase-create-card{
  scroll-margin-top:76px
}

.app-shell .purchase-create-card>.sec-head{
  min-height:66px;
  padding:12px 16px
}

.app-shell .purchase-create-card>.sec-body{
  padding:16px
}

.app-shell .purchase-create-form .form-group{
  margin:0
}

.app-shell .purchase-create-form label{
  display:inline-block;
  margin:0 0 6px;
  color:var(--text-2);
  font-size:11.5px;
  font-weight:750
}

.app-shell .purchase-create-form .form-control,.app-shell .purchase-create-form .select2-container .select2-selection,.app-shell .purchase-create-form .select-field__trigger{
  height:42px!important;
  border:1px solid var(--border)!important;
  border-radius:9px!important;
  background:var(--surface-2)!important;
  color:var(--text)!important;
  font-size:12px!important;
  box-shadow:none!important
}

.app-shell .purchase-create-form textarea.form-control{
  height:auto!important;
  min-height:92px;
  padding:10px 11px;
  line-height:1.5;
  resize:vertical
}

.app-shell .purchase-create-form .form-control:focus{
  border-color:var(--brand)!important;
  background:var(--surface)!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 10%,transparent)!important
}

.app-shell .purchase-create-form .select2-selection__rendered{
  padding-left:11px!important;
  line-height:40px!important
}

.app-shell .purchase-create-form .select2-selection__arrow{
  height:40px!important
}

.app-shell .purchase-details-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px
}

.app-shell .purchase-details-grid>[class*=col-],.app-shell .purchase-optional-grid>[class*=col-],.app-shell .purchase-shipping-custom-grid>[class*=col-]{
  width:auto;
  min-width:0;
  padding:0;
  float:none
}

/* Supplier is a field like the rest of the row. It held two columns so an address panel could sit
   beside it; the panel reads better under the field it belongs to, and the row gains a column. */

.app-shell .purchase-details-grid>div:first-child{
  grid-column:auto;
  min-width:0
}

/* The document picker is one field among the others, at the height of the inputs beside it. It ran
   three columns wide and 88px tall, which made an attachment the largest thing on the row and left
   the Browse button wrapped under its own label. Same treatment as the sale form's picker. */

.app-shell .purchase-details-grid>.purchase-field-document{
  grid-column:auto;
  min-width:0
}

/* Which orders are being received against is part of the receipt, so it sits beside the document
   rather than behind the Additional fields disclosure, where it had to be known about to be found. */

.app-shell .purchase-details-grid>.purchase-field-order-link{
  margin:0;
  min-width:0
}

.app-shell .purchase-supplier-control{
  display:grid;
  grid-template-columns:minmax(0,1fr) 42px;
  gap:8px
}

/* The add button beside the party field, on both forms.
   This was written for the purchase form's .add_new_supplier only, and the sale form's button is
   .add_new_customer — same place, same job, no rule. It drew as a bare plus glyph beside a framed
   select: nothing said it could be pressed. */

.app-shell .purchase-supplier-control .add_new_supplier,
.app-shell .purchase-supplier-control .add_new_customer{
  display:inline-flex;
  width:42px;
  height:42px;
  align-items:center;
  justify-content:center;
  padding:0;
  border:1px solid color-mix(in srgb,var(--brand) 30%,var(--border));
  border-radius:9px;
  background:var(--brand-weak);
  color:var(--brand-strong);
  cursor:pointer;
  transition:border-color .15s,background .15s,color .15s,box-shadow .15s
}

.app-shell .purchase-supplier-control .add_new_supplier:hover,
.app-shell .purchase-supplier-control .add_new_customer:hover{
  border-color:var(--brand);
  background:var(--brand);
  color:#fff
}

.app-shell .purchase-supplier-control .add_new_supplier:focus-visible,
.app-shell .purchase-supplier-control .add_new_customer:focus-visible{
  outline:none;
  border-color:var(--brand);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 18%,transparent)
}

.app-shell .purchase-supplier-control .add_new_supplier:active,
.app-shell .purchase-supplier-control .add_new_customer:active{
  transform:translateY(1px)
}

.app-shell .purchase-supplier-control .add_new_supplier svg,
.app-shell .purchase-supplier-control .add_new_customer svg{
  width:17px;
  height:17px
}

/* Address sits on the label's line as a control, the same shape the sale form's customer Details
   takes — a field's own affordances belong with its label, not below its input. */

.app-shell .purchase-supplier-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:8px
}

.app-shell .purchase-supplier-head>label{
  margin:0
}

.app-shell .purchase-supplier-toggle{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:0;
  border:0;
  background:none;
  color:var(--text-3);
  font-size:10.5px;
  font-weight:750;
  cursor:pointer
}

.app-shell .purchase-supplier-toggle:hover{
  color:var(--brand-strong)
}

.app-shell .purchase-supplier-toggle svg{
  transition:transform .16s ease
}

.app-shell .purchase-supplier-toggle[aria-expanded="true"]{
  color:var(--brand-strong)
}

.app-shell .purchase-supplier-toggle[aria-expanded="true"] svg{
  transform:rotate(180deg)
}

/* An element carrying the hidden attribute stays hidden whatever else is said about it. The
   address panel set display:block for its own layout, which out-ranked the browser's rule for
   [hidden] — so it never shut, and the control that toggles the attribute looked broken. */

.app-shell [data-field-disclosure]+*[hidden],
.app-shell .purchase-supplier-address[hidden],
.app-shell .sell-customer-details[hidden]{
  display:none!important
}

/* Opened, it grows downward inside the supplier's own column, so the fields beside it stay put. */

.app-shell .purchase-supplier-address{
  margin-top:8px;
  padding:10px 12px;
  border:1px dashed var(--border);
  border-radius:8px;
  background:var(--surface-2);
  color:var(--text-2);
  font-size:11.5px;
  line-height:1.45
}

.app-shell .purchase-supplier-address strong{
  display:block;
  margin-bottom:3px;
  color:var(--text-3);
  font-size:9.5px;
  font-weight:800;
  letter-spacing:.03em;
  text-transform:uppercase
}

.app-shell .purchase-payment-term-control{
  display:grid;
  grid-template-columns:40px minmax(0,1fr) minmax(118px,.7fr);
  align-items:stretch;
  height:42px;
  overflow:visible
}

.app-shell .purchase-payment-term-control>span{
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border);
  border-right:0;
  border-radius:9px 0 0 9px;
  background:var(--surface);
  color:var(--text-3)
}

.app-shell .purchase-payment-term-control>.form-control{
  height:100%!important;
  margin:0!important;
  border-radius:0!important
}

.app-shell .purchase-payment-term-control>.select-field{
  min-width:0;
  position:relative;
  border:1px solid var(--border);
  border-left:0;
  border-radius:0 9px 9px 0;
  background:var(--surface)
}

.app-shell .purchase-payment-term-control>.select-field>select{
  width:100%!important;
  height:40px!important;
  padding:0 30px 0 12px!important;
  border:0!important;
  border-radius:0 9px 9px 0!important;
  outline:0;
  background-color:transparent!important;
  color:var(--text-2);
  font-size:12.5px;
  font-weight:650;
  box-shadow:none!important;
  cursor:pointer
}

.app-shell .purchase-optional-details{
  margin-top:14px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface-2)
}

.app-shell .purchase-optional-details summary{
  display:flex;
  min-height:48px;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:9px 12px;
  cursor:pointer;
  list-style:none
}

.app-shell .purchase-optional-details summary span{
  display:flex;
  align-items:center;
  gap:7px;
  color:var(--text-2);
  font-size:10.5px;
  font-weight:800
}

.app-shell .purchase-optional-details summary small{
  margin-left:auto;
  color:var(--text-3);
  font-size:9px
}

.app-shell .purchase-optional-details[open] summary{
  border-bottom:1px solid var(--border-2)
}

.app-shell .purchase-optional-grid,.app-shell .purchase-shipping-custom-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  padding:12px
}

.app-shell .purchase-product-search-block,.app-shell .purchase-lines-block,.app-shell .purchase-pricing-workspace,.app-shell .purchase-notes-workspace,.app-shell .purchase-delivery-workspace,.app-shell .purchase-payment-workspace{
  border:1px solid var(--border);
  border-radius:11px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

.app-shell .purchase-product-search-block{
  position:relative;
  z-index:5;
  margin-bottom:12px;
  overflow:visible
}

.app-shell .purchase-block-head,.app-shell .purchase-subsection-head{
  display:flex;
  min-height:54px;
  align-items:center;
  gap:9px;
  padding:9px 12px;
  border-bottom:1px solid var(--border-2);
  background:var(--surface-2)
}

.app-shell .purchase-block-head>span,.app-shell .purchase-subsection-head>span{
  display:inline-flex;
  width:32px;
  height:32px;
  flex:0 0 32px;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .purchase-block-head strong,.app-shell .purchase-block-head small,.app-shell .purchase-subsection-head strong,.app-shell .purchase-subsection-head small{
  display:block
}

.app-shell .purchase-block-head strong,.app-shell .purchase-subsection-head strong{
  color:var(--text);
  font-size:11px;
  font-weight:850
}

.app-shell .purchase-block-head small,.app-shell .purchase-subsection-head small{
  margin-top:2px;
  color:var(--text-3);
  font-size:9px
}

.app-shell .purchase-block-head>b{
  margin-left:auto;
  padding:4px 7px;
  border:1px solid color-mix(in srgb,var(--brand) 25%,var(--border));
  border-radius:7px;
  background:var(--brand-weak);
  color:var(--brand-strong);
  font-size:8.5px
}

.app-shell .purchase-product-search-row{
  position:relative;
  display:grid;
  grid-template-columns:minmax(340px,1fr) auto auto;
  gap:8px;
  padding:11px
}

.app-shell .purchase-search-control{
  position:relative
}

.app-shell .purchase-search-control>svg{
  position:absolute;
  z-index:2;
  top:13px;
  left:12px;
  color:var(--text-3)
}

.app-shell .purchase-search-control .form-control{
  padding-left:38px!important
}

.app-shell .purchase-product-search-row .btn-ghost{
  display:inline-flex;
  height:42px;
  align-items:center;
  gap:6px;
  padding:0 12px;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface);
  color:var(--text-2);
  font-size:10px;
  font-weight:800;
  white-space:nowrap
}

.app-shell .purchase-product-search-row .ui-autocomplete{
  top:59px!important;
  left:11px!important;
  width:calc(100% - 22px)!important;
  max-height:300px;
  overflow-y:auto
}

.app-shell .purchase-lines-block{
  overflow:hidden
}

.app-shell .purchase-lines-shell{
  position:relative;
  min-height:180px
}

.app-shell .purchase-lines-shell .table-responsive{
  margin:0;
  border:0
}

.app-shell .purchase-lines-shell.has-products{
  min-height:0
}

.app-shell .purchase-lines-block #purchase_entry_table{
  min-width:1700px;
  margin:0;
  table-layout:fixed
}

.app-shell .purchase-lines-block #purchase_entry_table thead th{
  height:48px;
  padding:8px!important;
  border-bottom:1px solid var(--border)!important;
  background:var(--surface-2);
  color:var(--text-3);
  font-size:8px;
  font-weight:850;
  line-height:1.3;
  text-align:center;
  text-transform:uppercase;
  vertical-align:middle
}

.app-shell .purchase-lines-block #purchase_entry_table thead th:nth-child(1){
  width:48px
}

.app-shell .purchase-lines-block #purchase_entry_table thead th:nth-child(2){
  width:270px
}

.app-shell .purchase-lines-block #purchase_entry_table thead th:last-child{
  width:72px
}

.app-shell .purchase-lines-block #purchase_entry_table tbody td{
  padding:10px 7px!important;
  border-bottom:1px solid var(--border-2)!important;
  color:var(--text-2);
  font-size:10px;
  vertical-align:middle!important
}

.app-shell .purchase-lines-block #purchase_entry_table tbody tr:hover{
  background:color-mix(in srgb,var(--brand-weak) 24%,var(--surface))
}

.app-shell .purchase-lines-block #purchase_entry_table .form-control{
  min-width:92px;
  height:36px!important;
  padding:6px 8px;
  font-size:10.5px!important
}

.app-shell .purchase-lines-block .po-line-product{
  min-width:245px
}

.app-shell .purchase-lines-block .po-line-product-copy strong{
  font-size:10.5px
}

.app-shell .purchase-lines-block .po-line-product-meta{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  margin-top:5px;
  color:var(--text-3);
  font-size:8.5px
}

.app-shell .purchase-lines-block .po-line-sku{
  padding:2px 5px;
  border-radius:4px;
  background:var(--surface-2);
  font-family:ui-monospace,monospace
}

.app-shell .purchase-products-empty{
  position:absolute;
  inset:49px 0 0;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  color:var(--text-3);
  text-align:center
}

.app-shell .purchase-products-empty span{
  display:flex;
  width:38px;
  height:38px;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  background:var(--surface-2)
}

.app-shell .purchase-products-empty strong{
  margin-top:8px;
  color:var(--text-2);
  font-size:11px
}

.app-shell .purchase-products-empty small{
  margin-top:3px;
  font-size:9px
}

.app-shell .purchase-products-empty.hide{
  display:none!important
}

.app-shell .purchase-products-summary{
  display:flex;
  justify-content:flex-end;
  padding:10px 12px;
  border-top:1px solid var(--border-2);
  background:var(--surface-2)
}

.app-shell .purchase-products-summary table{
  width:380px;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface);
  border-collapse:separate
}

.app-shell .purchase-products-summary th,.app-shell .purchase-products-summary td{
  padding:8px 10px!important;
  border:0!important;
  font-size:10px
}

.app-shell .purchase-products-summary tr:last-child{
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .purchase-cost-layout{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr);
  gap:12px;
  margin-bottom:12px
}

.app-shell .purchase-pricing-workspace,.app-shell .purchase-notes-workspace,.app-shell .purchase-delivery-workspace{
  overflow:hidden
}

.app-shell .purchase-pricing-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:11px;
  padding:12px
}

.app-shell .purchase-calculated-value{
  display:flex;
  min-height:45px;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:9px 11px;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface-2);
  color:var(--text-3);
  font-size:9.5px
}

.app-shell .purchase-calculated-value strong{
  color:var(--text);
  font-size:12px
}

.app-shell .purchase-notes-workspace .form-group{
  padding:12px
}

.app-shell .purchase-delivery-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  padding:12px
}

.app-shell .purchase-shipping-charge-field{
  padding:11px;
  border:1px solid color-mix(in srgb,var(--warn) 28%,var(--border));
  border-radius:10px;
  background:color-mix(in srgb,var(--warn-weak) 50%,var(--surface))
}

.app-shell .purchase-money-input{
  display:grid;
  grid-template-columns:38px minmax(0,1fr)
}

.app-shell .purchase-money-input>span{
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border);
  border-right:0;
  border-radius:9px 0 0 9px;
  background:var(--surface);
  font-weight:850
}

.app-shell .purchase-money-input .form-control{
  border-radius:0 9px 9px 0!important
}

.app-shell .purchase-shipping-charge-field small{
  display:block;
  margin-top:5px;
  color:var(--text-3);
  font-size:8.5px
}

.app-shell .purchase-shipping-custom-grid{
  padding-top:0
}

.app-shell .purchase-expenses-workspace{
  margin:0 12px 12px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface-2)
}

.app-shell .purchase-expenses-head{
  display:flex;
  min-height:54px;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:9px 11px
}

.app-shell .purchase-expenses-head>div{
  display:flex;
  align-items:center;
  gap:9px
}

.app-shell .purchase-expenses-head>div>span{
  display:flex;
  width:32px;
  height:32px;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  background:var(--warn-weak);
  color:var(--warn)
}

.app-shell .purchase-expenses-head p,.app-shell .purchase-expenses-head strong,.app-shell .purchase-expenses-head small{
  display:block;
  margin:0
}

.app-shell .purchase-expenses-head strong{
  font-size:10.5px
}

.app-shell .purchase-expenses-head small{
  margin-top:2px;
  color:var(--text-3);
  font-size:8.5px
}

.app-shell .purchase-expenses-head .btn-ghost{
  display:flex;
  height:34px;
  align-items:center;
  gap:5px;
  padding:0 9px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface);
  font-size:9px;
  font-weight:800
}

.app-shell #additional_expenses_div{
  padding:0 11px 11px
}

.app-shell #additional_expenses_div table{
  margin:0
}

.app-shell #additional_expenses_div th{
  color:var(--text-3);
  font-size:8px;
  text-transform:uppercase
}

.app-shell .purchase-total-card{
  display:flex;
  justify-content:flex-end;
  padding:0 12px 12px
}

.app-shell .purchase-total-card>div{
  display:grid;
  width:min(100%,420px);
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:16px;
  padding:12px 14px;
  border:1px solid color-mix(in srgb,var(--brand) 35%,var(--border));
  border-radius:10px;
  background:var(--brand-weak)
}

.app-shell .purchase-total-card span small,.app-shell .purchase-total-card span b{
  display:block
}

.app-shell .purchase-total-card small{
  color:var(--text-3);
  font-size:8.5px
}

.app-shell .purchase-total-card b{
  margin-top:2px;
  color:var(--text-2);
  font-size:10.5px
}

.app-shell .purchase-total-card>div>strong{
  color:var(--brand-strong);
  font-size:18px;
  font-weight:900
}

.app-shell .purchase-payment-workspace{
  padding:12px
}

.app-shell .purchase-payment-balance{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:12px;
  padding:9px 10px;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface-2)
}

.app-shell .purchase-payment-balance>span{
  display:flex;
  width:32px;
  height:32px;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  background:var(--warn-weak);
  color:var(--warn)
}

.app-shell .purchase-payment-balance p,.app-shell .purchase-payment-balance small,.app-shell .purchase-payment-balance strong{
  display:block;
  margin:0
}

.app-shell .purchase-payment-balance small{
  color:var(--text-3);
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.03em
}

.app-shell .purchase-payment-balance strong{
  color:var(--text);
  font-size:15px;
  font-weight:800
}

.app-shell .purchase-payment-workspace>.row{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin:0
}

.app-shell .purchase-payment-workspace>.row>[class*=col-]{
  width:auto;
  padding:0;
  float:none
}

.app-shell .purchase-payment-workspace .form-group{
  margin:0
}

.app-shell .purchase-payment-workspace .form-group>label{
  display:block;
  margin-bottom:6px;
  color:var(--text-2);
  font-size:11px;
  font-weight:800
}

/* The shared payment partial prefixes each input with a Font Awesome addon, but the
   clean-slate stack has no Font Awesome, so it rendered as an empty box. Drop it and
   give the inputs a normal full-width, fully-rounded control. */

.app-shell .purchase-payment-workspace .input-group-addon{
  display:none!important
}

.app-shell .purchase-payment-workspace .input-group{
  display:flex;
  width:100%
}

.app-shell .purchase-payment-workspace .input-group>.form-control{
  flex:1;
  min-width:0;
  border-radius:10px!important
}

.app-shell .purchase-payment-workspace .input-group .select2-container{
  flex:1;
  min-width:0
}

.app-shell .purchase-payment-workspace .input-group .select2-container .select2-selection{
  border-radius:10px!important
}

.app-shell .purchase-payment-due{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:14px;
  padding:13px 14px;
  border-top:1px solid var(--border-2);
  background:var(--surface-2);
  color:var(--text-2);
  font-size:12px;
  font-weight:700
}

.app-shell .purchase-payment-due strong{
  color:var(--danger);
  font-size:16.5px;
  font-weight:900
}

/* Update-status modal: visual receiving-stage chooser (mirrors the Purchase Order status chooser) */

.app-shell .purchase-status-modal-dialog{
  width:min(540px,calc(100% - 24px));
  max-width:none
}

.app-shell .purchase-status-modal-content{
  overflow:hidden
}

.app-shell .purchase-status-modal-heading{
  display:flex;
  min-width:0;
  align-items:center;
  gap:11px
}

.app-shell .purchase-status-modal-heading>span{
  display:inline-flex;
  width:38px;
  height:38px;
  flex:none;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .purchase-status-modal-heading h4,.app-shell .purchase-status-modal-heading p{
  margin:0
}

.app-shell .purchase-status-modal-heading p{
  margin-top:2px;
  color:var(--text-3);
  font-size:11px
}

.app-shell .purchase-status-modal-body{
  padding:16px;
  background:var(--surface-2)
}

.app-shell .purchase-status-field-label{
  display:block;
  margin-bottom:8px;
  color:var(--text-2);
  font-size:11px;
  font-weight:800
}

.app-shell .purchase-status-choice-grid{
  display:grid;
  gap:9px
}

.app-shell .purchase-status-choice{
  position:relative;
  display:grid;
  grid-template-columns:38px minmax(0,1fr) 20px;
  align-items:center;
  gap:11px;
  margin:0;
  padding:12px 13px;
  border:1px solid var(--border);
  border-radius:11px;
  background:var(--surface);
  cursor:pointer;
  transition:border-color .16s ease,background .16s ease,box-shadow .16s ease
}

.app-shell .purchase-status-choice:hover{
  border-color:var(--text-3);
  box-shadow:var(--shadow-sm)
}

.app-shell .purchase-status-choice input{
  position:absolute;
  opacity:0;
  pointer-events:none
}

.app-shell .purchase-status-choice>i{
  display:inline-flex;
  width:38px;
  height:38px;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  background:var(--surface-3);
  color:var(--text-3)
}

.app-shell .purchase-status-choice strong,.app-shell .purchase-status-choice small{
  display:block
}

.app-shell .purchase-status-choice strong{
  color:var(--text);
  font-size:12.5px;
  font-weight:800
}

.app-shell .purchase-status-choice small{
  margin-top:2px;
  color:var(--text-3);
  font-size:10.5px;
  line-height:1.4
}

.app-shell .purchase-status-choice>svg{
  display:none;
  flex:none;
  color:currentColor
}

.app-shell .purchase-status-choice:has(input:checked)>svg{
  display:block
}

.app-shell .purchase-status-choice:has(input:focus-visible){
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 12%,transparent)
}

.app-shell .purchase-status-choice.is-received>i{
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .purchase-status-choice.is-pending>i{
  background:var(--warn-weak);
  color:color-mix(in srgb,var(--warn) 80%,#4b3600)
}

.app-shell .purchase-status-choice.is-ordered>i{
  background:var(--blue-weak);
  color:var(--blue)
}

.app-shell .purchase-status-choice.is-received:has(input:checked){
  border-color:color-mix(in srgb,var(--brand) 45%,var(--border));
  background:var(--brand-weak);
  color:var(--brand-strong);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 8%,transparent)
}

.app-shell .purchase-status-choice.is-pending:has(input:checked){
  border-color:color-mix(in srgb,var(--warn) 45%,var(--border));
  background:var(--warn-weak);
  color:color-mix(in srgb,var(--warn) 80%,#4b3600);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--warn) 8%,transparent)
}

.app-shell .purchase-status-choice.is-ordered:has(input:checked){
  border-color:color-mix(in srgb,var(--blue) 45%,var(--border));
  background:var(--blue-weak);
  color:var(--blue);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--blue) 8%,transparent)
}

/* Purchase View Detail modal — dedicated detail workspace (replaces the legacy report) */

.app-shell .modal-dialog.purchase-detail-modal-dialog{
  width:min(1560px,calc(100vw - 32px));
  max-width:none;
  margin:16px auto
}

.app-shell .modal-content.purchase-detail-modal-content{
  display:block;
  max-height:none;
  overflow:visible;
  border:1px solid var(--border);
  border-radius:15px;
  background:var(--surface);
  box-shadow:0 28px 80px -28px rgba(17,31,23,.55)
}

.app-shell .purchase-detail-modal-content .purchase-detail-body{
  min-height:auto;
  overflow:visible
}

.app-shell .purchase-detail-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px
}

.app-shell .purchase-detail-heading{
  display:flex;
  min-width:0;
  align-items:center;
  gap:11px
}

.app-shell .purchase-detail-heading>span{
  display:inline-flex;
  width:40px;
  height:40px;
  flex:none;
  align-items:center;
  justify-content:center;
  border-radius:11px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .purchase-detail-heading h4{
  margin:0;
  font-size:16px;
  font-weight:800
}

.app-shell .purchase-detail-heading p{
  margin:2px 0 0;
  color:var(--text-3);
  font-size:11.5px
}

.app-shell .purchase-detail-body{
  min-height:auto;
  padding:18px;
  overflow:visible;
  background:var(--surface-2)
}

.app-shell .purchase-detail-overview{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-bottom:14px
}

.app-shell .purchase-detail-card{
  padding:13px 14px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface)
}

.app-shell .purchase-detail-card-label{
  display:block;
  margin-bottom:8px;
  color:var(--text-3);
  font-size:10px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase
}

.app-shell .purchase-detail-address{
  margin:0;
  color:var(--text-2);
  font-size:12.5px;
  font-style:normal;
  line-height:1.6
}

.app-shell .purchase-detail-address strong{
  display:block;
  color:var(--text);
  font-size:13.5px;
  font-weight:800
}

.app-shell .purchase-detail-doc{
  margin-top:10px
}

.app-shell .purchase-detail-meta{
  display:grid;
  gap:8px;
  margin:0
}

.app-shell .purchase-detail-meta>div{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:10px;
  align-items:baseline
}

.app-shell .purchase-detail-meta-full{
  grid-template-columns:1fr!important
}

.app-shell .purchase-detail-meta dt{
  margin:0;
  color:var(--text-3);
  font-size:11px;
  font-weight:700
}

.app-shell .purchase-detail-meta dd{
  margin:0;
  color:var(--text);
  font-size:12.5px;
  font-weight:650;
  overflow-wrap:anywhere
}

.app-shell .purchase-detail-chip{
  display:inline-flex;
  align-items:center;
  padding:2px 9px;
  border-radius:999px;
  background:var(--surface-3);
  color:var(--text-2);
  font-size:11px;
  font-weight:800
}

.app-shell .purchase-detail-chip.is-received{
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .purchase-detail-chip.is-pending{
  background:var(--warn-weak);
  color:color-mix(in srgb,var(--warn) 80%,#4b3600)
}

.app-shell .purchase-detail-chip.is-ordered{
  background:var(--blue-weak);
  color:var(--blue)
}

.app-shell .purchase-detail-chip.is-pay-paid{
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .purchase-detail-chip.is-pay-due{
  background:var(--danger-weak);
  color:var(--danger)
}

.app-shell .purchase-detail-chip.is-pay-partial{
  background:var(--warn-weak);
  color:color-mix(in srgb,var(--warn) 80%,#4b3600)
}

.app-shell .purchase-detail-section-label{
  margin:0 0 8px;
  color:var(--text-2);
  font-size:12px;
  font-weight:800
}

.app-shell .purchase-detail-lines-wrap{
  overflow-x:auto;
  margin-bottom:16px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface)
}

.app-shell .purchase-detail-line-table{
  width:100%;
  border-collapse:collapse;
  font-size:12px
}

.app-shell .purchase-detail-line-table thead th{
  padding:10px 12px;
  border-bottom:1px solid var(--border);
  background:var(--surface-2);
  color:var(--text-3);
  font-size:10px;
  font-weight:800;
  letter-spacing:.03em;
  text-transform:uppercase;
  white-space:nowrap;
  text-align:left
}

.app-shell .purchase-detail-line-table thead th.text-right,.app-shell .purchase-detail-line-table tbody td.text-right{
  text-align:right
}

.app-shell .purchase-detail-line-table tbody td{
  padding:11px 12px;
  border-bottom:1px solid var(--border-2);
  color:var(--text-2);
  vertical-align:middle
}

.app-shell .purchase-detail-line-table tbody tr:last-child td{
  border-bottom:0
}

.app-shell .purchase-detail-product-cell{
  color:var(--text);
  font-weight:700;
  min-width:150px
}

.app-shell .purchase-detail-product-img{
  max-width:52px;
  max-height:52px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface)
}

.app-shell .purchase-detail-line-total span{
  color:var(--text);
  font-weight:800
}

.app-shell .purchase-detail-financials{
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(320px,.7fr);
  gap:14px;
  margin-bottom:14px;
  align-items:start
}

.app-shell .purchase-detail-sub-table{
  width:100%;
  border-collapse:collapse;
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden;
  background:var(--surface);
  font-size:12px
}

.app-shell .purchase-detail-sub-table thead th{
  padding:9px 12px;
  border-bottom:1px solid var(--border);
  background:var(--surface-2);
  color:var(--text-3);
  font-size:10px;
  font-weight:800;
  letter-spacing:.03em;
  text-transform:uppercase;
  text-align:left
}

.app-shell .purchase-detail-sub-table thead th.text-right{
  text-align:right
}

.app-shell .purchase-detail-sub-table td,.app-shell .purchase-detail-sub-table>tr>th{
  padding:10px 12px;
  border-bottom:1px solid var(--border-2);
  color:var(--text-2);
  vertical-align:top
}

.app-shell .purchase-detail-sub-table>tr>th{
  color:var(--text-3);
  font-weight:700;
  text-align:left;
  white-space:nowrap
}

.app-shell .purchase-detail-sub-table .text-right{
  text-align:right
}

.app-shell .purchase-detail-sub-table tr:last-child td,.app-shell .purchase-detail-sub-table tr:last-child th{
  border-bottom:0
}

.app-shell .purchase-detail-empty{
  color:var(--text-3)!important;
  text-align:center;
  font-style:italic
}

.app-shell .purchase-detail-grand th,.app-shell .purchase-detail-grand td{
  background:var(--brand-weak);
  color:var(--brand-strong)!important;
  font-weight:900;
  font-size:13.5px
}

.app-shell .purchase-detail-note-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-bottom:14px
}

.app-shell .purchase-detail-note{
  padding:12px 14px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface)
}

.app-shell .purchase-detail-note p{
  margin:0;
  color:var(--text-2);
  font-size:12.5px;
  line-height:1.55
}

.app-shell .purchase-detail-activities{
  margin-bottom:14px;
  padding:12px 14px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface)
}

.app-shell .purchase-detail-activities .label{
  display:inline-flex;
  align-items:center;
  padding:2px 7px;
  border-radius:6px;
  font-size:10.5px;
  font-weight:700
}

.app-shell .purchase-detail-barcode{
  display:flex;
  justify-content:center;
  padding:14px 0 4px
}

.app-shell .purchase-detail-barcode img{
  max-width:100%
}

@media (max-width:900px){
  .app-shell .modal-dialog.purchase-detail-modal-dialog{
    width:calc(100vw - 20px);
    margin:10px auto
  }

  .app-shell .purchase-detail-overview,.app-shell .purchase-detail-financials,.app-shell .purchase-detail-note-grid{
    grid-template-columns:1fr
  }
}

.app-shell .purchase-create-submit-bar{
  position:sticky!important;
  right:auto!important;
  bottom:0!important;
  left:auto!important;
  z-index:30!important;
  width:100%!important;
  margin-top:4px!important;
  padding:14px 0!important;
  border:0!important;
  border-radius:0!important;
  background:linear-gradient(to top,var(--bg) 72%,color-mix(in srgb,var(--bg) 0%,transparent))!important;
  box-shadow:none!important;
  backdrop-filter:none!important
}

.app-shell .purchase-create-submit-bar>div{
  display:flex;
  width:100%;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  padding:0!important
}

.app-shell .purchase-create-submit-bar .btn-ghost,.app-shell .purchase-create-submit-bar .btn-primary{
  height:44px;
  min-width:112px;
  padding:0 20px
}

.app-shell .purchase-create-submit-bar .btn-primary{
  min-width:148px
}

@media (max-width:1100px){
  .app-shell .purchase-details-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

  .app-shell .purchase-optional-grid,.app-shell .purchase-shipping-custom-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

  .app-shell .purchase-cost-layout{
    grid-template-columns:1fr
  }

  .app-shell .purchase-payment-workspace>.row{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}

@media (max-width:680px){
  .app-shell .purchase-form-progress{
    grid-template-columns:repeat(4,minmax(0,1fr));
    top:0
  }

  .app-shell .purchase-form-progress em{
    display:none
  }

  .app-shell .purchase-form-progress button{
    justify-content:center;
    padding:0 5px
  }

  .app-shell .purchase-form-progress button b{
    display:none
  }

  .app-shell .purchase-details-grid,.app-shell .purchase-delivery-grid,.app-shell .purchase-pricing-grid,.app-shell .purchase-optional-grid,.app-shell .purchase-shipping-custom-grid,.app-shell .purchase-payment-workspace>.row{
    grid-template-columns:1fr
  }

  .app-shell .purchase-product-search-row{
    grid-template-columns:1fr
  }

  .app-shell .purchase-product-search-row .btn-ghost{
    justify-content:center
  }

  .app-shell .purchase-expenses-head{
    align-items:flex-start;
    flex-direction:column
  }

  .app-shell .purchase-products-summary table{
    width:100%
  }

  .app-shell .purchase-create-submit-bar{
    bottom:6px
  }

  .app-shell .purchase-create-submit-bar>div{
    width:100%
  }

  .app-shell .purchase-create-submit-bar a,.app-shell .purchase-create-submit-bar button{
    flex:1
  }
}

body.app-ui .purchase-import-dialog{
  width:min(920px,calc(100vw - 28px));
  margin:24px auto
}

body.app-ui .purchase-import-modal{
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  box-shadow:0 28px 80px -30px rgba(15,23,42,.5)
}

body.app-ui .purchase-import-header{
  display:flex;
  min-height:70px;
  align-items:center;
  justify-content:space-between;
  padding:12px 16px;
  border-bottom:1px solid var(--border-2)
}

body.app-ui .purchase-import-heading{
  display:flex;
  align-items:center;
  gap:10px
}

body.app-ui .purchase-import-heading>span{
  display:flex;
  width:38px;
  height:38px;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

body.app-ui .purchase-import-heading h4{
  color:var(--text);
  font-size:14px;
  font-weight:850
}

body.app-ui .purchase-import-heading p{
  margin:2px 0 0;
  color:var(--text-3);
  font-size:9.5px
}

body.app-ui .purchase-import-header .close{
  display:flex;
  width:34px;
  height:34px;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface-2);
  color:var(--text-2);
  opacity:1
}

body.app-ui .purchase-import-body{
  display:grid;
  grid-template-columns:minmax(280px,.72fr) minmax(0,1.28fr);
  gap:12px;
  max-height:calc(100vh - 190px);
  padding:14px;
  overflow-y:auto;
  background:var(--surface-2)
}

body.app-ui .purchase-import-upload,body.app-ui .purchase-import-guide{
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:11px;
  background:var(--surface)
}

body.app-ui .purchase-import-section-head{
  display:flex;
  min-height:58px;
  align-items:center;
  gap:9px;
  padding:9px 11px;
  border-bottom:1px solid var(--border-2)
}

body.app-ui .purchase-import-section-head>span{
  display:flex;
  width:32px;
  height:32px;
  flex:0 0 32px;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

body.app-ui .purchase-import-section-head strong,body.app-ui .purchase-import-section-head small{
  display:block
}

body.app-ui .purchase-import-section-head strong{
  color:var(--text);
  font-size:11px;
  font-weight:850
}

body.app-ui .purchase-import-section-head small{
  margin-top:2px;
  color:var(--text-3);
  font-size:8.5px;
  line-height:1.35
}

body.app-ui .purchase-import-upload #import_product_dz{
  min-height:190px;
  margin:12px;
  border:1px dashed color-mix(in srgb,var(--brand) 30%,var(--border));
  border-radius:10px;
  background:var(--surface-2)
}

body.app-ui .purchase-template-download{
  display:flex;
  min-height:40px;
  align-items:center;
  justify-content:center;
  gap:7px;
  margin:0 12px 12px;
  border:1px solid color-mix(in srgb,var(--brand) 28%,var(--border));
  border-radius:9px;
  background:var(--brand-weak);
  color:var(--brand-strong);
  font-size:10px;
  font-weight:800
}

body.app-ui .purchase-import-table-wrap{
  max-height:430px;
  overflow:auto
}

body.app-ui .purchase-import-guide table{
  margin:0
}

body.app-ui .purchase-import-guide th{
  position:sticky;
  z-index:2;
  top:0;
  padding:9px!important;
  background:var(--surface-2);
  color:var(--text-3);
  font-size:8px;
  text-transform:uppercase
}

body.app-ui .purchase-import-guide td{
  padding:9px!important;
  border-top:1px solid var(--border-2)!important;
  color:var(--text-2);
  font-size:9.5px;
  line-height:1.4;
  vertical-align:top
}

body.app-ui .purchase-import-guide td:first-child{
  width:40px;
  color:var(--brand-strong);
  font-weight:850
}

body.app-ui .purchase-import-footer{
  display:flex;
  min-height:66px;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  padding:10px 16px;
  border-top:1px solid var(--border-2)
}

body.app-ui .purchase-import-footer .btn-ghost,body.app-ui .purchase-import-footer .btn-primary{
  display:inline-flex;
  height:40px;
  align-items:center;
  gap:7px;
  padding:0 14px;
  border-radius:9px;
  font-size:10.5px;
  font-weight:850
}

body.app-ui .purchase-import-footer .btn-ghost{
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text-2)
}

body.app-ui .purchase-import-footer .btn-primary{
  border:1px solid var(--brand);
  background:var(--brand);
  color:#fff
}

@media (max-width:680px){
  body.app-ui .purchase-import-dialog{
    width:calc(100vw - 16px);
    margin:8px auto
  }

  body.app-ui .purchase-import-body{
    grid-template-columns:1fr;
    max-height:calc(100vh - 150px)
  }

  body.app-ui .purchase-import-footer>button{
    flex:1
  }
}

/* Purchase payments: one visual language from entry through receipt. */

body.app-ui .payment-entry-dialog{
  width:min(1100px,calc(100vw - 28px));
  max-width:none;
  margin:20px auto
}

body.app-ui .payment-history-dialog{
  width:min(1420px,calc(100vw - 28px));
  max-width:none;
  margin:20px auto
}

body.app-ui .payment-receipt-dialog{
  width:min(920px,calc(100vw - 28px));
  max-width:none;
  margin:24px auto
}

/* The sheet is as tall as what it holds, and the modal behind it scrolls.
   It used to be capped to the viewport with its own scrolling body, which only works while every
   element between the cap and the footer takes part — and the form wraps the header, the body and
   the footer, so the chain was always broken by something with no reason to know about it. On a
   tall screen the content fitted under the cap and it looked fine; anywhere shorter the footer,
   and the Save button with it, was clipped away. Nothing is capped and nothing is pinned now —
   the overflow is hidden only so the header and the footer are cut to the rounded corners rather
   than laying their own square backgrounds over them. */

body.app-ui .payment-entry-modal,body.app-ui .payment-history-modal,body.app-ui .payment-receipt-modal{
  display:block;
  max-height:none;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  box-shadow:0 28px 80px -30px rgba(15,23,42,.52)
}

body.app-ui .payment-entry-header,body.app-ui .payment-history-header,body.app-ui .payment-receipt-header{
  display:flex;
  min-height:72px;
  flex:none;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 16px;
  border-bottom:1px solid var(--border-2);
  background:var(--surface)
}

body.app-ui .payment-modal-heading{
  display:flex;
  min-width:0;
  align-items:center;
  gap:10px
}

body.app-ui .payment-modal-heading>span{
  display:inline-flex;
  width:40px;
  height:40px;
  flex:none;
  align-items:center;
  justify-content:center;
  border-radius:11px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

body.app-ui .payment-modal-heading h4,body.app-ui .payment-modal-heading p{
  margin:0
}

body.app-ui .payment-modal-heading h4{
  color:var(--text);
  font-size:17px;
  font-weight:850
}

body.app-ui .payment-modal-heading p{
  margin-top:3px;
  color:var(--text-3);
  font-size:12px
}

body.app-ui .payment-modal-heading>div>span{
  display:block;
  margin-top:3px!important;
  color:var(--text-3)!important;
  font-size:10px!important;
  font-style:normal!important
}

body.app-ui .payment-entry-header .close,body.app-ui .payment-history-header .close,body.app-ui .payment-receipt-header .close{
  display:flex;
  width:34px;
  height:34px;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface-2);
  color:var(--text-2);
  opacity:1
}

body.app-ui .payment-history-header-actions{
  display:flex;
  align-items:center;
  gap:10px;
  margin-left:auto
}

body.app-ui .payment-receipt-header-actions{
  display:flex;
  align-items:center;
  gap:10px;
  margin-left:auto
}

body.app-ui .payment-receipt-header-reference{
  display:inline-flex;
  height:34px;
  align-items:center;
  gap:5px;
  padding:0 11px;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface-2);
  color:var(--text-2);
  font-size:12px
}

body.app-ui .payment-receipt-header-reference strong{
  color:var(--text);
  font-size:13px;
  font-weight:850
}

body.app-ui .payment-history-reference{
  display:inline-flex;
  height:34px;
  align-items:center;
  gap:5px;
  padding:0 11px;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface-2);
  color:var(--text-2);
  font-size:12px
}

body.app-ui .payment-history-reference strong{
  color:var(--text);
  font-size:13px;
  font-weight:850
}

body.app-ui .payment-history-print-title{
  display:none!important
}

body.app-ui .payment-entry-body,body.app-ui .payment-history-body,body.app-ui .payment-receipt-body{
  padding:18px;
  overflow:visible;
  background:var(--surface-2)
}

body.app-ui .payment-context-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin:0 0 14px;
  align-items:stretch
}

body.app-ui .payment-context-grid>[class*=col-]{
  width:auto;
  padding:0;
  float:none
}

/* Three columns of bare text on the body's own grey, each labelled a different way — the party
   with a trailing colon, the facts with bold run-in labels. One card each, one label style. */

body.app-ui .payment-context-card{
  display:flex;
  min-width:0;
  flex-direction:column;
  padding:13px 15px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface)
}

body.app-ui .payment-context-label{
  display:block;
  margin-bottom:7px;
  color:var(--text-3);
  font-size:9.5px;
  font-weight:850;
  letter-spacing:.07em;
  text-transform:uppercase
}

body.app-ui .payment-context-card>strong{
  color:var(--text);
  font-size:13.5px;
  font-weight:800;
  line-height:1.35;
  overflow-wrap:anywhere
}

body.app-ui .payment-context-card>span{
  margin-top:3px;
  color:var(--text-2);
  font-size:12px;
  line-height:1.5;
  overflow-wrap:anywhere
}

body.app-ui .payment-context-facts dl{
  margin:0
}

body.app-ui .payment-context-facts dl>div{
  display:grid;
  grid-template-columns:minmax(94px,auto) minmax(0,1fr);
  gap:4px 10px;
  padding:4px 0;
  border-top:1px dashed var(--border-2)
}

body.app-ui .payment-context-facts dl>div:first-child{
  padding-top:0;
  border-top:0
}

body.app-ui .payment-context-facts dt{
  color:var(--text-3);
  font-size:11.5px;
  font-weight:650
}

body.app-ui .payment-context-facts dd{
  margin:0;
  color:var(--text);
  font-size:12px;
  font-weight:750;
  overflow-wrap:anywhere
}

body.app-ui .payment-context-card{
  display:flex;
  height:100%!important;
  min-height:100px;
  align-items:flex-start;
  gap:12px;
  margin:0;
  padding:16px;
  border:1px solid var(--border);
  border-radius:12px;
  background:linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--surface-2) 42%,var(--surface)));
  color:var(--text-2);
  font-size:12.5px;
  line-height:1.5;
  box-shadow:0 10px 24px -24px rgba(15,23,42,.7)
}

body.app-ui .payment-context-icon{
  display:inline-flex;
  width:38px;
  height:38px;
  flex:0 0 38px;
  align-items:center;
  justify-content:center;
  border:1px solid color-mix(in srgb,var(--brand) 16%,var(--border));
  border-radius:10px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

body.app-ui .payment-context-icon-blue{
  border-color:color-mix(in srgb,var(--blue) 18%,var(--border));
  background:var(--blue-weak);
  color:var(--blue)
}

body.app-ui .payment-context-copy{
  min-width:0;
  flex:1
}

body.app-ui .payment-context-copy small,body.app-ui .payment-context-copy strong,body.app-ui .payment-context-copy p{
  display:block;
  margin:0
}

body.app-ui .payment-context-copy small{
  color:var(--text-3);
  font-size:10px;
  font-weight:850;
  letter-spacing:.055em;
  text-transform:uppercase
}

body.app-ui .payment-context-copy strong{
  margin-top:5px;
  overflow-wrap:anywhere;
  color:var(--text);
  font-size:14px;
  font-weight:850;
  line-height:1.35
}

body.app-ui .payment-context-copy p{
  margin-top:5px;
  color:var(--text-3);
  font-size:12px;
  line-height:1.45
}

body.app-ui .payment-context-total{
  align-items:center
}

body.app-ui .payment-context-total .display_currency{
  display:block;
  margin-top:5px;
  color:var(--brand-strong);
  font-size:22px;
  font-weight:900;
  line-height:1.15
}

body.app-ui .payment-advance-row{
  margin:0 0 14px;
  padding:11px 13px;
  border:1px solid color-mix(in srgb,var(--blue) 20%,var(--border));
  border-radius:10px;
  background:var(--blue-weak);
  color:var(--blue);
  font-size:12px
}

body.app-ui .payment-advance-row>[class*=col-]{
  width:100%;
  padding:0;
  float:none
}

body.app-ui .payment-entry-fields{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  margin:0;
  padding:18px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface)
}

body.app-ui .payment-entry-fields>[class*=col-]{
  width:auto;
  padding:0;
  float:none
}

body.app-ui .payment-entry-fields>.col-md-12,body.app-ui .payment-entry-fields>.cash_denomination_div,body.app-ui .payment-entry-fields>.clearfix,body.app-ui .payment-entry-section-heading{
  grid-column:1/-1
}

body.app-ui .payment-entry-fields>.clearfix{
  display:none
}

body.app-ui .payment-entry-section-heading{
  display:flex;
  align-items:center;
  gap:10px;
  margin:-2px 0 2px;
  padding-bottom:13px;
  border-bottom:1px solid var(--border-2)
}

body.app-ui .payment-entry-section-heading>span{
  display:inline-flex;
  width:36px;
  height:36px;
  flex:none;
  align-items:center;
  justify-content:center;
  border-radius:9px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

body.app-ui .payment-entry-section-heading strong,body.app-ui .payment-entry-section-heading small{
  display:block
}

body.app-ui .payment-entry-section-heading strong{
  color:var(--text);
  font-size:14px;
  font-weight:850
}

body.app-ui .payment-entry-section-heading small{
  margin-top:2px;
  color:var(--text-3);
  font-size:11.5px;
  line-height:1.45
}

body.app-ui .payment-entry-fields .form-group{
  margin:0
}

body.app-ui .payment-entry-fields label{
  display:block;
  margin:0 0 7px;
  color:var(--text-2);
  font-size:12.5px;
  font-weight:750
}

body.app-ui .payment-entry-fields .input-group{
  display:block;
  width:100%
}

body.app-ui .payment-entry-fields .input-group-addon{
  display:none
}

body.app-ui .payment-entry-fields .form-control,body.app-ui .payment-entry-fields .select2-selection{
  width:100%;
  height:46px!important;
  border:1px solid var(--border)!important;
  border-radius:10px!important;
  background:var(--surface-2)!important;
  color:var(--text)!important;
  font-size:13.5px!important;
  box-shadow:none!important
}

body.app-ui .payment-entry-fields .form-control:focus{
  border-color:var(--brand)!important;
  background:var(--surface)!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 10%,transparent)!important
}

body.app-ui .payment-entry-fields .select-field{
  width:100%
}

body.app-ui .payment-entry-fields .date-time-control{
  height:46px;
  border-color:var(--border);
  border-radius:10px;
  background:var(--surface-2)
}

body.app-ui .payment-entry-fields .date-time-control:focus-within{
  border-color:var(--brand);
  background:var(--surface);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 10%,transparent)
}

body.app-ui .payment-entry-fields .date-time-control .form-control{
  height:44px!important;
  border:0!important;
  background:transparent!important
}

body.app-ui .payment-entry-fields label.date-time-part{
  display:flex;
  width:112px;
  margin:0;
  align-items:center;
  background:transparent
}

body.app-ui .payment-entry-fields .date-time-part input{
  font-size:13px;
  font-weight:700
}

body.app-ui .payment-entry-fields textarea.form-control{
  height:auto!important;
  min-height:108px;
  padding:12px;
  line-height:1.55;
  resize:vertical
}

body.app-ui .payment-entry-fields .select2-selection__rendered{
  padding-left:12px!important;
  line-height:44px!important
}

body.app-ui .payment-entry-fields input[type=file]{
  width:100%;
  font-size:12px
}

body.app-ui .payment-entry-fields .payment-amount-field .form-control{
  color:var(--brand-strong)!important;
  font-size:15px!important;
  font-weight:800
}

/* The picker is a <label>, and `.payment-entry-fields label{display:block}` above outranks the
   `display:grid` it is built on — so it stacked into four rows and stood taller than anything else
   in the form. It restates its own layout, the way the date control above it has to. Sized to sit
   in half a row beside Payment Account: the select is 44px, this is 46 with two lines in it. */

body.app-ui .payment-entry-fields .payment-document-field .file-upload-picker{
  display:grid;
  min-height:46px;
  grid-template-columns:30px minmax(0,1fr) auto;
  align-items:center;
  gap:9px;
  padding:6px 9px
}

body.app-ui .payment-entry-fields .payment-document-field .file-upload-icon{
  width:30px;
  height:30px;
  border-radius:8px
}

body.app-ui .payment-entry-fields .payment-document-field .file-upload-copy strong{
  font-size:11.5px
}

body.app-ui .payment-entry-fields .payment-document-field .file-upload-copy small{
  font-size:10px
}

body.app-ui .payment-entry-fields .payment-document-field .file-upload-action{
  min-height:30px;
  padding:0 11px;
  font-size:10px
}

body.app-ui .payment-entry-fields .payment-document-field .file-upload-help{
  margin-top:5px;
  font-size:9.5px;
  line-height:1.4
}

body.app-ui .payment-entry-fields .help-block{
  margin:6px 0 0;
  color:var(--text-3);
  font-size:11px;
  line-height:1.45
}

body.app-ui .payment-entry-fields .cash_denomination_div{
  padding:11px;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface-2)
}

body.app-ui .payment-history-body address,body.app-ui .payment-receipt-body address{
  margin:5px 0 0;
  color:var(--text-2);
  font-size:12.5px;
  font-style:normal;
  line-height:1.65
}

body.app-ui .payment-history-table-wrap{
  overflow:auto;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface)
}

body.app-ui .payment-history-table{
  width:100%!important;
  min-width:980px;
  margin:0;
  table-layout:auto
}

body.app-ui .payment-history-table thead th{
  padding:12px!important;
  border-bottom:1px solid var(--border)!important;
  background:var(--surface-2);
  color:var(--text-3);
  font-size:10px;
  font-weight:850;
  letter-spacing:.025em;
  text-transform:uppercase;
  white-space:nowrap
}

body.app-ui .payment-history-table tbody td{
  padding:14px 12px!important;
  border-bottom:1px solid var(--border-2)!important;
  color:var(--text-2);
  font-size:12.5px;
  line-height:1.45;
  vertical-align:middle
}

body.app-ui .payment-history-table tbody td .display_currency{
  color:var(--text);
  font-size:13px;
  font-weight:750
}

body.app-ui .payment-row-actions{
  display:flex;
  align-items:center;
  gap:7px;
  white-space:nowrap
}

/* The square icon buttons. These were written against .tw-dw-btn, which nothing in the ledger
   markup carries — the buttons are .btn-ghost and .btn-primary like every other button in the
   application — so none of it applied: they drew as full-size pills, three of them ran past the
   right edge of the table, and the colour that tells edit from delete from view never arrived. */

body.app-ui .payment-row-actions>.btn-ghost,body.app-ui .payment-row-actions>.btn-primary{
  display:inline-flex;
  width:36px;
  min-width:0;
  height:36px;
  flex:none;
  align-items:center;
  justify-content:center;
  gap:0;
  padding:0;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface);
  color:var(--text-2);
  box-shadow:none
}

body.app-ui .payment-row-actions>.edit_payment{
  border-color:color-mix(in srgb,var(--brand) 28%,var(--border));
  color:var(--brand-strong);
  background:var(--brand-weak)
}

body.app-ui .payment-row-actions>.delete_payment{
  border-color:color-mix(in srgb,#dc2626 24%,var(--border));
  color:#dc2626;
  background:#fff7f7
}

body.app-ui .payment-row-actions>.view_payment{
  color:var(--blue);
  background:var(--blue-weak)
}

body.app-ui .payment-row-actions>.btn-ghost:hover,body.app-ui .payment-row-actions>.btn-primary:hover{
  filter:brightness(.97);
  transform:translateY(-1px)
}

/* The note is a paragraph and the actions are four fixed buttons, but an auto table shares the
   width out by content — so the note took the room the buttons needed and the last button was
   clipped by the wrap. The actions column asks for its own content width and no more. */

body.app-ui .payment-history-table thead th:last-child,body.app-ui .payment-history-table td.payment-row-actions{
  width:1%;
  white-space:nowrap
}

body.app-ui .payment-history-ledger-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin:14px 0 10px;
  padding:12px 14px;
  border:1px solid var(--border);
  border-radius:11px;
  background:var(--surface-2)
}

body.app-ui .payment-history-ledger-title{
  display:flex;
  min-width:0;
  align-items:center;
  gap:10px
}

body.app-ui .payment-history-ledger-title>span{
  display:grid;
  width:38px;
  height:38px;
  flex:0 0 38px;
  place-items:center;
  border-radius:9px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

body.app-ui .payment-history-ledger-title strong,body.app-ui .payment-history-ledger-title small{
  display:block
}

body.app-ui .payment-history-ledger-title strong{
  color:var(--text);
  font-size:14px;
  font-weight:850
}

body.app-ui .payment-history-ledger-title small{
  margin-top:2px;
  color:var(--text-3);
  font-size:12px;
  line-height:1.4
}

body.app-ui .payment-history-body .payment-history-add-payment{
  display:inline-flex;
  height:42px;
  min-width:132px;
  flex:none;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:0 16px;
  border:1px solid var(--brand);
  border-radius:10px;
  background:var(--brand);
  color:#fff;
  font-size:13px;
  font-weight:800;
  box-shadow:0 8px 18px -12px color-mix(in srgb,var(--brand) 78%,transparent)
}

body.app-ui .payment-history-body .payment-history-add-payment:hover{
  background:var(--brand-strong);
  color:#fff;
  transform:translateY(-1px)
}

body.app-ui .payment-history-empty{
  display:flex;
  min-height:88px;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  color:var(--text-3)
}

body.app-ui .payment-history-empty>span{
  display:grid;
  width:36px;
  height:36px;
  place-items:center;
  border-radius:9px;
  background:var(--surface-2);
  color:var(--text-3)
}

body.app-ui .payment-history-empty strong{
  margin-top:7px;
  color:var(--text-2);
  font-size:13px
}

body.app-ui .payment-history-empty small{
  margin-top:3px;
  font-size:11.5px
}

@media(max-width:640px){
  body.app-ui .payment-history-ledger-toolbar{
    align-items:stretch;
    flex-direction:column
  }

  body.app-ui .payment-history-body .payment-history-add-payment{
    width:100%
  }
}

body.app-ui .payment-history-body .payment-notification-action{
  display:inline-flex;
  height:38px;
  align-items:center;
  gap:7px;
  padding:0 12px;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface);
  color:var(--text-2);
  font-size:12px;
  font-weight:700
}

body.app-ui .payment-history-body .payment-notification-action:hover{
  border-color:color-mix(in srgb,var(--brand) 32%,var(--border));
  color:var(--brand-strong);
  background:var(--brand-weak)
}

body.app-ui .payment-print-only{
  display:none
}

body.app-ui .payment-receipt-document{
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface);
  color:var(--text);
  padding:22px 24px;
  font-size:13px;
  line-height:1.6
}

body.app-ui .payment-receipt-masthead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
  padding-bottom:14px;
  border-bottom:2px solid var(--text)
}

body.app-ui .payment-receipt-brand strong{
  display:block;
  color:var(--text);
  font-size:15px;
  font-weight:850
}

body.app-ui .payment-receipt-brand p{
  margin:2px 0 0;
  color:var(--text-3);
  font-size:12px
}

body.app-ui .payment-receipt-document-title{
  text-align:right
}

body.app-ui .payment-receipt-document-title strong{
  display:block;
  color:var(--text);
  font-size:15px;
  font-weight:850
}

body.app-ui .payment-receipt-document-title p{
  margin:2px 0 0;
  color:var(--text-3);
  font-size:12px
}

/* The amount used to be a gradient panel with a status pill beside it, which is a lot of
   furniture for one number. It is a line of type, and the figure carries it. */

body.app-ui .payment-receipt-amount{
  display:flex;
  align-items:baseline;
  gap:10px;
  flex-wrap:wrap;
  padding:14px 0;
  border-bottom:1px solid var(--border-2)
}

body.app-ui .payment-receipt-amount span{
  color:var(--text-3);
  font-size:12px
}

body.app-ui .payment-receipt-amount strong{
  color:var(--text);
  font-size:22px;
  font-weight:900;
  font-variant-numeric:tabular-nums
}

body.app-ui .payment-receipt-label{
  display:block;
  margin:0 0 5px;
  color:var(--text-3);
  font-size:10px;
  font-weight:850;
  letter-spacing:.07em;
  text-transform:uppercase
}

body.app-ui .payment-receipt-parties{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:22px;
  padding:14px 0;
  border-bottom:1px solid var(--border-2)
}

body.app-ui .payment-receipt-party strong{
  display:block;
  overflow-wrap:anywhere;
  color:var(--text);
  font-size:13.5px;
  font-weight:800
}

body.app-ui .payment-receipt-party p,body.app-ui .payment-receipt-party address{
  margin:2px 0 0;
  color:var(--text-2);
  font-size:12px;
  font-style:normal;
  line-height:1.5
}

body.app-ui .payment-receipt-details{
  padding:14px 0;
  border-bottom:1px solid var(--border-2)
}

body.app-ui .payment-receipt-facts{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px 22px;
  margin:0
}

body.app-ui .payment-receipt-facts dt{
  color:var(--text-3);
  font-size:11.5px
}

body.app-ui .payment-receipt-facts dd{
  margin:1px 0 0;
  color:var(--text);
  font-size:13px;
  font-weight:700
}

body.app-ui .payment-receipt-note{
  padding:14px 0
}

body.app-ui .payment-receipt-note p{
  margin:0;
  color:var(--text-2);
  font-size:12.5px;
  white-space:pre-line
}

body.app-ui .payment-receipt-attachment{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--brand-strong);
  font-size:12.5px;
  font-weight:700;
  text-decoration:none
}

body.app-ui .payment-receipt-attachment:hover{
  text-decoration:underline
}

body.app-ui .payment-modal-footer{
  display:flex;
  min-height:66px;
  flex:none;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  padding:10px 15px;
  border-top:1px solid var(--border-2);
  background:var(--surface)
}

body.app-ui .payment-modal-footer .btn-ghost,body.app-ui .payment-modal-footer .btn-primary{
  display:inline-flex;
  height:42px;
  min-width:104px;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:0 16px;
  border-radius:9px;
  font-size:12px;
  font-weight:800
}

body.app-ui .payment-modal-footer .btn-ghost{
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text-2)
}

body.app-ui .payment-modal-footer .btn-primary{
  border:1px solid var(--brand);
  background:var(--brand);
  color:#fff;
  box-shadow:0 8px 18px -10px color-mix(in srgb,var(--brand) 76%,transparent)
}

@media (max-width:760px){
  body.app-ui .payment-entry-dialog,body.app-ui .payment-history-dialog,body.app-ui .payment-receipt-dialog{
    width:calc(100vw - 12px);
    margin:6px auto
  }

  body.app-ui .payment-entry-modal,body.app-ui .payment-history-modal,body.app-ui .payment-receipt-modal{
    max-height:none;
    border-radius:11px
  }

  body.app-ui .payment-context-grid,body.app-ui .payment-entry-fields,body.app-ui .payment-receipt-parties,body.app-ui .payment-receipt-facts{
    grid-template-columns:1fr
  }

  body.app-ui .payment-modal-footer>button{
    flex:1
  }

  body.app-ui .payment-entry-fields .date-time-part{
    width:104px
  }

  body.app-ui .payment-receipt-header-reference{
    display:none
  }

  body.app-ui .payment-receipt-body{
    padding:10px
  }

  body.app-ui .payment-receipt-document-title{
    display:none
  }

  body.app-ui .payment-history-reference{
    display:none
  }

  body.app-ui .payment-history-header{
    min-height:66px;
    padding:10px 12px
  }

  body.app-ui .payment-history-body{
    padding:10px
  }
}

@media print{
  .no-print{
    display:none!important
  }

  .payment-print-only{
    display:flex!important
  }

  .payment-receipt-document,.payment-history-print-document{
    width:100%!important;
    max-width:none!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:var(--surface)!important;
    color:#111!important;
    box-shadow:none!important;
    font-size:11px!important;
    line-height:1.5!important
  }

  .payment-receipt-document *,.payment-history-print-document *{
    -webkit-print-color-adjust:exact;
    print-color-adjust:exact
  }

  .payment-receipt-masthead{
    display:flex!important;
    align-items:flex-start!important;
    justify-content:space-between!important;
    padding:0 0 10px!important;
    border-bottom:1px solid #111!important
  }

  .payment-receipt-brand strong,.payment-receipt-document-title strong{
    display:block!important;
    color:#111!important;
    font-size:13px!important;
    font-weight:800!important
  }

  .payment-receipt-brand p,.payment-receipt-document-title p{
    margin:2px 0 0!important;
    color:#59635c!important;
    font-size:10px!important
  }

  .payment-receipt-document-title{
    text-align:right!important
  }

  .payment-receipt-amount{
    display:flex!important;
    align-items:baseline!important;
    gap:9px!important;
    padding:10px 0!important;
    border-bottom:1px solid #d9dedb!important;
    -moz-column-break-inside:avoid;
         break-inside:avoid
  }

  .payment-receipt-amount span{
    color:#59635c!important;
    font-size:10px!important
  }

  .payment-receipt-amount strong{
    color:#111!important;
    font-size:19px!important;
    font-weight:800!important
  }

  .payment-receipt-label{
    display:block!important;
    margin:0 0 4px!important;
    color:#68716b!important;
    font-size:9px!important;
    letter-spacing:.06em!important;
    text-transform:uppercase!important
  }

  .payment-receipt-parties{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:18px!important;
    padding:10px 0!important;
    border-bottom:1px solid #d9dedb!important;
    -moz-column-break-inside:avoid;
         break-inside:avoid
  }

  .payment-receipt-party strong{
    display:block!important;
    color:#111!important;
    font-size:11px!important;
    font-weight:700!important
  }

  .payment-receipt-party p,.payment-receipt-party address{
    margin:2px 0 0!important;
    color:#414a44!important;
    font-size:10px!important;
    line-height:1.4!important
  }

  .payment-receipt-details{
    padding:10px 0!important;
    border-bottom:1px solid #d9dedb!important;
    -moz-column-break-inside:avoid;
         break-inside:avoid
  }

  .payment-receipt-facts{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:9px 18px!important;
    margin:0!important;
    padding:0!important
  }

  .payment-receipt-facts>div{
    padding:0!important;
    border:0!important
  }

  .payment-receipt-facts dt{
    color:#68716b!important;
    font-size:9px!important
  }

  .payment-receipt-facts dd{
    margin:1px 0 0!important;
    color:#111!important;
    font-size:10.5px!important;
    font-weight:700!important
  }

  .payment-receipt-note{
    padding:10px 0 0!important;
    -moz-column-break-inside:avoid;
         break-inside:avoid
  }

  .payment-receipt-note p{
    margin:0!important;
    color:#414a44!important;
    font-size:10px!important
  }

  /* The letterhead: who issued the ledger on the left, what it is and its reference on the
     right, over a rule. The masthead used to be a title and a reference number with nothing
     naming the business, and the business itself sat in a bordered card below — so the card
     goes and the name comes up here where a document's sender belongs. */

  .payment-history-print-masthead{
    display:flex!important;
    align-items:flex-start!important;
    justify-content:space-between!important;
    gap:24px!important;
    margin:0 0 14px!important;
    padding:0 0 11px!important;
    border-bottom:2px solid #17201b!important;
    -moz-column-break-inside:avoid;
         break-inside:avoid
  }

  .payment-print-brand{
    max-width:60%!important
  }

  .payment-print-brand strong{
    display:block!important;
    color:#111!important;
    font-size:15px!important;
    font-weight:800!important;
    letter-spacing:-.01em!important;
    line-height:1.2!important
  }

  .payment-print-brand span{
    display:block!important;
    margin-top:2px!important;
    color:#5c665f!important;
    font-size:8.5px!important;
    line-height:1.45!important
  }

  .payment-print-doc{
    flex:none!important;
    text-align:right!important
  }

  .payment-print-doc small{
    display:block!important;
    color:#647067!important;
    font-size:8px!important;
    font-weight:700!important;
    letter-spacing:.1em!important;
    text-transform:uppercase!important
  }

  .payment-print-doc strong{
    display:block!important;
    margin-top:3px!important;
    color:#111!important;
    font-size:17px!important;
    font-weight:800!important;
    letter-spacing:-.01em!important;
    line-height:1.15!important
  }

  .payment-print-doc span{
    display:block!important;
    margin-top:2px!important;
    color:#5c665f!important;
    font-size:8.5px!important
  }

  .payment-print-doc .payment-print-status{
    display:inline-block!important;
    margin-top:4px!important;
    padding:2px 8px!important;
    border:1px solid #b9c2bc!important;
    border-radius:999px!important;
    color:#252c27!important;
    font-size:8px!important;
    font-weight:700!important;
    text-transform:capitalize!important
  }

  /* The party and the document's own facts, as two columns of text. They printed as three
     bordered cards — furniture the sheet does not need — and the middle one repeated the
     business that now heads the page, so it is not printed at all. */

  .payment-context-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:0 28px!important;
    margin:0 0 12px!important;
    -moz-column-break-inside:avoid;
         break-inside:avoid
  }

  .payment-context-card{
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:none!important
  }

  .payment-context-business{
    display:none!important
  }

  .payment-context-label{
    margin-bottom:3px!important;
    color:#68716b!important;
    font-size:7.5px!important;
    font-weight:700!important;
    letter-spacing:.08em!important;
    text-transform:uppercase!important
  }

  .payment-context-card>strong{
    color:#111!important;
    font-size:10px!important;
    font-weight:700!important
  }

  .payment-context-card>span{
    margin-top:1px!important;
    color:#414a44!important;
    font-size:8.5px!important;
    line-height:1.4!important
  }

  .payment-context-facts dl>div{
    display:grid!important;
    grid-template-columns:minmax(74px,auto) minmax(0,1fr)!important;
    gap:2px 10px!important;
    padding:2px 0!important;
    border-top:0!important
  }

  .payment-context-facts dt{
    color:#68716b!important;
    font-size:8.5px!important
  }

  .payment-context-facts dd{
    margin:0!important;
    color:#111!important;
    font-size:8.5px!important;
    font-weight:700!important
  }

  .payment-history-table-wrap{
    overflow:visible!important;
    border:1px solid #cfd5d1!important;
    border-radius:0!important
  }

  .payment-history-table{
    width:100%!important;
    min-width:0!important;
    margin:0!important;
    border-collapse:collapse!important;
    table-layout:auto!important
  }

  .payment-history-table thead th{
    padding:7px 6px!important;
    border:1px solid #d9dedb!important;
    background:#f1f4f2!important;
    color:#475049!important;
    font-size:7.5px!important;
    text-transform:uppercase!important
  }

  .payment-history-table tbody td{
    padding:7px 6px!important;
    border:1px solid #e1e5e2!important;
    color:#252c27!important;
    font-size:8.5px!important;
    line-height:1.35!important;
    vertical-align:top!important
  }

  .payment-history-table tr{
    -moz-column-break-inside:avoid;
         break-inside:avoid
  }
}

/* Purchase returns: keep availability, entered quantity and refund value easy to compare. */

body.app-ui .purchase-return-context{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:16px 18px;
  border:1px solid var(--border);
  border-radius:13px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

body.app-ui .purchase-return-context__heading,body.app-ui .purchase-return-product,body.app-ui .purchase-return-quantity{
  display:flex;
  align-items:center
}

body.app-ui .purchase-return-context__heading{
  gap:12px
}

body.app-ui .purchase-return-icon,body.app-ui .purchase-return-product__icon{
  display:inline-flex;
  flex:none;
  align-items:center;
  justify-content:center;
  color:var(--brand);
  background:var(--brand-weak);
  border-radius:9px
}

body.app-ui .purchase-return-icon{
  width:40px;
  height:40px
}

body.app-ui .purchase-return-product__icon{
  width:36px;
  height:36px
}

body.app-ui .purchase-return-eyebrow{
  display:block;
  margin-bottom:2px;
  color:var(--text-3);
  font-size:9px;
  font-weight:850;
  letter-spacing:.08em;
  text-transform:uppercase
}

body.app-ui .purchase-return-context__heading strong{
  color:var(--text);
  font-size:14px
}

body.app-ui .purchase-return-context__facts{
  display:grid;
  grid-template-columns:repeat(3,minmax(150px,1fr));
  gap:10px;
  margin:0
}

body.app-ui .purchase-return-context__facts div{
  min-width:0;
  padding:0 18px;
  border-left:1px solid var(--border-2)
}

body.app-ui .purchase-return-context__facts dt{
  color:var(--text-3);
  font-size:9px;
  font-weight:850;
  letter-spacing:.05em;
  text-transform:uppercase
}

body.app-ui .purchase-return-context__facts dd{
  margin:4px 0 0;
  color:var(--text);
  font-size:12px;
  font-weight:750
}

body.app-ui .purchase-return-reference{
  width:min(100%,420px);
  margin-bottom:18px
}

body.app-ui .purchase-return-reference label{
  display:block;
  margin-bottom:6px;
  color:var(--text-2);
  font-size:11px;
  font-weight:750
}

body.app-ui .purchase-return-table-wrap{
  overflow-x:auto;
  border:1px solid var(--border);
  border-radius:11px
}

body.app-ui .purchase-return-table{
  width:100%;
  min-width:1040px;
  border-collapse:collapse
}

body.app-ui .purchase-return-table th{
  padding:11px 13px;
  color:var(--text-3);
  background:var(--surface-2);
  border-bottom:1px solid var(--border);
  font-size:9px;
  font-weight:850;
  letter-spacing:.04em;
  text-transform:uppercase
}

body.app-ui .purchase-return-table td{
  padding:13px;
  color:var(--text-2);
  border-bottom:1px solid var(--border-2);
  font-size:11.5px;
  vertical-align:middle
}

body.app-ui .purchase-return-table tbody tr:last-child td{
  border-bottom:0
}

body.app-ui .purchase-return-table tbody tr:hover td{
  background:color-mix(in srgb,var(--brand-weak) 25%,transparent)
}

body.app-ui .purchase-return-index{
  width:48px;
  text-align:center
}

body.app-ui .purchase-return-index span{
  display:inline-flex;
  width:26px;
  height:26px;
  align-items:center;
  justify-content:center;
  color:var(--text-3);
  background:var(--surface-2);
  border:1px solid var(--border);
  border-radius:7px;
  font-size:10px;
  font-weight:800
}

body.app-ui .purchase-return-product{
  min-width:250px;
  gap:10px
}

body.app-ui .purchase-return-product strong{
  display:block;
  color:var(--text);
  font-size:11.5px
}

body.app-ui .purchase-return-product small{
  display:block;
  margin-top:3px;
  color:var(--text-3);
  font-size:10px
}

body.app-ui .purchase-return-money{
  color:var(--text);
  font-weight:750
}

body.app-ui .purchase-return-available{
  color:var(--brand);
  font-weight:850
}

body.app-ui .purchase-return-unit{
  color:var(--text-3);
  font-size:10px
}

body.app-ui .purchase-return-quantity{
  width:154px;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface-2)
}

body.app-ui .purchase-return-quantity .form-control{
  height:40px!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  background:var(--surface)!important
}

body.app-ui .purchase-return-quantity>span{
  min-width:52px;
  padding:0 10px;
  color:var(--text-2);
  font-size:10px;
  font-weight:750;
  text-align:center
}

body.app-ui .purchase-return-summary{
  width:min(100%,410px);
  margin:16px 0 0 auto;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:11px;
  background:var(--surface-2)
}

body.app-ui .purchase-return-summary>div{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:11px 13px;
  color:var(--text-2);
  border-bottom:1px solid var(--border-2);
  font-size:11px
}

body.app-ui .purchase-return-summary>div:last-child{
  border-bottom:0
}

body.app-ui .purchase-return-summary span small{
  display:block;
  margin-top:2px;
  color:var(--text-3);
  font-weight:400
}

body.app-ui .purchase-return-summary strong{
  color:var(--text);
  font-size:13px
}

body.app-ui .purchase-return-summary__total{
  color:var(--brand)!important;
  background:var(--brand-weak);
  font-weight:800
}

body.app-ui .purchase-return-summary__total strong{
  color:var(--brand);
  font-size:17px
}

@media(max-width:900px){
  body.app-ui .purchase-return-context{
    align-items:flex-start;
    flex-direction:column
  }

  body.app-ui .purchase-return-context__facts{
    width:100%;
    grid-template-columns:1fr
  }

  body.app-ui .purchase-return-context__facts div{
    padding:8px 0;
    border-top:1px solid var(--border-2);
    border-left:0
  }
}

/* Edit purchase draws the same workspace as create; only the saved-line table needs neutralising,
   because its rows come from a partial shared with purchase orders that still carries the old
   bordered/striped table classes. */

.app-shell .purchase-edit-page .purchase-lines-shell #purchase_entry_table{
  border:0!important;
  background:transparent
}

.app-shell .purchase-edit-page .purchase-lines-shell #purchase_entry_table tbody tr{
  background:transparent
}

.app-shell .purchase-edit-page .purchase-lines-shell #purchase_entry_table>thead>tr>th,.app-shell .purchase-edit-page .purchase-lines-shell #purchase_entry_table>tbody>tr>td{
  border-left:0!important;
  border-right:0!important
}

.app-shell .purchase-edit-page .purchase-lines-shell .po-line-product-cell{
  min-width:245px;
  text-align:left
}

/* Purchase returns — reverse-logistics ledger and shared create/edit workspace. */

body.app-ui .purchase-return-overview{
  display:grid;
  grid-template-columns:1.25fr repeat(3,minmax(0,1fr));
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:13px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

body.app-ui .purchase-return-overview-intro,body.app-ui .return-state-card{
  display:flex;
  min-height:82px;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  border:0;
  background:transparent;
  text-align:left
}

body.app-ui .purchase-return-overview-intro{
  border-right:1px solid var(--border-2)
}

body.app-ui .purchase-return-overview-icon,body.app-ui .return-state-icon{
  display:grid;
  width:38px;
  height:38px;
  flex:0 0 38px;
  place-items:center;
  border-radius:10px;
  background:var(--brand-weak);
  color:var(--brand)
}

body.app-ui .purchase-return-overview .eyebrow,body.app-ui .return-total-card .eyebrow{
  display:block;
  margin-bottom:3px;
  color:var(--text-3);
  font-size:8px;
  font-weight:850;
  letter-spacing:.12em
}

body.app-ui .purchase-return-overview strong{
  display:block;
  color:var(--text);
  font-size:12px
}

body.app-ui .purchase-return-overview small{
  display:block;
  margin-top:2px;
  color:var(--text-3);
  font-size:9px
}

body.app-ui .return-state-card{
  cursor:pointer;
  border-right:1px solid var(--border-2);
  transition:.16s ease
}

body.app-ui .return-state-card:last-child{
  border-right:0
}

body.app-ui .return-state-card:hover,body.app-ui .return-state-card.is-active{
  background:var(--surface-2)
}

body.app-ui .return-state-card.is-active{
  box-shadow:inset 0 -2px 0 var(--brand)
}

body.app-ui .tone-red{
  background:var(--danger-weak);
  color:var(--danger)
}

body.app-ui .tone-amber{
  background:var(--warn-weak);
  color:var(--warn)
}

body.app-ui .tone-green{
  background:var(--brand-weak);
  color:var(--brand)
}

body.app-ui .purchase-return-filter-card{
  overflow:hidden;
  padding:0
}

body.app-ui .card-head-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:13px 15px;
  border-bottom:1px solid var(--border-2)
}

body.app-ui .section-heading-inline,body.app-ui .section-heading-inline>div{
  display:flex;
  align-items:center;
  gap:10px
}

body.app-ui .section-heading-inline>div{
  display:block
}

body.app-ui .section-heading-icon{
  display:grid;
  width:30px;
  height:30px;
  place-items:center;
  border-radius:8px;
  background:var(--surface-2);
  color:var(--text-2)
}

body.app-ui .section-heading-inline strong{
  display:block;
  font-size:11px
}

body.app-ui .section-heading-inline small{
  display:block;
  margin-top:1px;
  color:var(--text-3);
  font-size:9px
}

body.app-ui .purchase-return-filter-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  padding:14px 15px
}

body.app-ui .purchase-return-list-card{
  overflow:visible
}

body.app-ui .purchase-return-table-stage{
  position:relative;
  overflow:visible
}

body.app-ui .purchase-return-ledger-table{
  min-width:1080px;
  margin:0
}

body.app-ui .purchase-return-ledger-table td{
  padding:13px 12px!important;
  vertical-align:middle!important
}

body.app-ui .purchase-return-ledger-table td:last-child{
  position:relative;
  overflow:visible
}

body.app-ui .purchase-return-ledger-table td:has(.purchase-return-action-group.open){
  z-index:190
}

body.app-ui .return-reference,body.app-ui .return-supplier{
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0
}

body.app-ui .return-reference-icon,body.app-ui .return-supplier-icon{
  display:grid;
  width:31px;
  height:31px;
  flex:0 0 31px;
  place-items:center;
  border-radius:8px;
  background:var(--brand-weak);
  color:var(--brand)
}

body.app-ui .return-supplier-icon{
  background:var(--surface-2);
  color:var(--text-2)
}

body.app-ui .return-reference strong,body.app-ui .return-supplier strong,body.app-ui .return-date strong{
  display:block;
  color:var(--text);
  font-size:11px
}

body.app-ui .return-reference small,body.app-ui .return-supplier small,body.app-ui .return-date small,body.app-ui .return-refund small{
  display:block;
  margin-top:2px;
  color:var(--text-3);
  font-size:8.5px
}

body.app-ui .return-date{
  white-space:nowrap
}

body.app-ui .return-refund{
  display:grid;
  grid-template-columns:auto auto;
  align-items:center;
  justify-content:start;
  gap:4px 8px
}

body.app-ui .return-refund-total{
  color:var(--text);
  font-size:13px;
  font-weight:850
}

body.app-ui .return-refund-status .payment-status{
  display:inline-flex
}

body.app-ui .return-refund small{
  grid-column:1/-1
}

body.app-ui .return-payment-badge{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:4px 7px;
  border:1px solid color-mix(in srgb,var(--danger) 25%,var(--border));
  border-radius:999px;
  background:var(--danger-weak);
  color:var(--danger);
  font-size:8.5px;
  font-weight:800;
  white-space:nowrap
}

body.app-ui .return-payment-badge.is-partial{
  border-color:color-mix(in srgb,var(--warn) 25%,var(--border));
  background:var(--warn-weak);
  color:var(--warn)
}

body.app-ui .return-payment-badge.is-paid{
  border-color:color-mix(in srgb,var(--brand) 25%,var(--border));
  background:var(--brand-weak);
  color:var(--brand)
}

body.app-ui .return-supplier small{
  display:flex!important;
  align-items:center;
  gap:3px
}

body.app-ui .return-note{
  display:block;
  max-width:180px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

body.app-ui .purchase-return-row-actions{
  display:flex;
  justify-content:flex-end;
  gap:6px;
  white-space:nowrap
}

body.app-ui .purchase-return-action-group{
  z-index:2
}

body.app-ui .purchase-return-action-group.open{
  z-index:200
}

body.app-ui .purchase-return-action-menu{
  right:0;
  left:auto;
  z-index:210;
  min-width:190px
}

body.app-ui .purchase-return-action-menu li>a,body.app-ui .purchase-return-action-menu li>button{
  display:flex;
  width:100%;
  min-height:38px;
  align-items:center;
  gap:10px;
  padding:9px 11px;
  border:0;
  border-radius:7px;
  background:transparent;
  color:var(--text-2);
  font-size:12.5px;
  font-weight:650;
  text-align:left
}

body.app-ui .purchase-return-action-menu .danger-action{
  color:var(--danger)
}

body.app-ui .purchase-return-ledger-summary{
  display:flex;
  justify-content:flex-end;
  gap:1px;
  padding:12px 14px;
  border-top:1px solid var(--border-2);
  background:var(--surface-2)
}

body.app-ui .purchase-return-ledger-summary>div{
  display:flex;
  min-width:150px;
  justify-content:space-between;
  gap:16px;
  padding:8px 11px;
  background:var(--surface);
  font-size:10px
}

body.app-ui .purchase-return-ledger-summary span{
  color:var(--text-3)
}

body.app-ui .purchase-return-ledger-summary strong{
  color:var(--text);
  font-size:11px
}

body.app-ui .purchase-return-steps{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  overflow:hidden;
  padding:6px;
  border:1px solid var(--border);
  border-radius:13px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

body.app-ui .purchase-return-steps>div{
  display:grid;
  grid-template-columns:32px 1fr;
  gap:0 10px;
  align-items:center;
  padding:9px 11px;
  border-radius:9px;
  color:var(--text-3)
}

body.app-ui .purchase-return-steps>div>span{
  display:grid;
  grid-row:1/3;
  width:30px;
  height:30px;
  place-items:center;
  border-radius:8px;
  background:var(--surface-2);
  font-size:9px;
  font-weight:850
}

body.app-ui .purchase-return-steps strong{
  font-size:10px
}

body.app-ui .purchase-return-steps small{
  font-size:8.5px
}

body.app-ui .purchase-return-steps .is-active{
  border:1px solid var(--border);
  background:var(--surface);
  box-shadow:var(--shadow-sm);
  color:var(--text)
}

body.app-ui .purchase-return-steps .is-active>span{
  background:var(--brand);
  color:#fff
}

body.app-ui .purchase-return-steps .is-complete{
  color:var(--brand-strong)
}

body.app-ui .purchase-return-steps .is-complete>span{
  overflow:hidden;
  color:transparent;
  background:var(--brand-weak)
}

body.app-ui .purchase-return-steps .is-complete>span:after{
  content:'✓';
  color:var(--brand);
  font-size:12px;
  font-weight:900
}

body.app-ui .purchase-return-detail-grid{
  display:grid;
  grid-template-columns:1.3fr 1fr .75fr 1.15fr;
  gap:14px
}

body.app-ui .purchase-return-field-document{
  grid-column:3/-1
}

body.app-ui .field-help{
  margin:5px 1px 0;
  color:var(--text-3);
  font-size:9px
}

body.app-ui .return-readonly-field{
  display:grid;
  grid-template-columns:20px 1fr;
  min-height:42px;
  align-items:center;
  padding:8px 11px;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface-2);
  color:var(--text-2);
  font-size:11px;
  font-weight:650
}

body.app-ui .return-readonly-field small{
  grid-column:2;
  color:var(--text-3);
  font-size:8.5px;
  font-weight:400
}

body.app-ui .return-product-search-card,body.app-ui .return-lines-card{
  position:relative;
  overflow:visible;
  border:1px solid var(--border);
  border-radius:11px;
  background:var(--surface)
}

body.app-ui .return-product-search-copy,body.app-ui .return-lines-head{
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 13px;
  border-bottom:1px solid var(--border-2);
  background:var(--surface-2)
}

body.app-ui .return-product-search-icon{
  display:grid;
  width:31px;
  height:31px;
  place-items:center;
  border-radius:8px;
  background:var(--brand-weak);
  color:var(--brand)
}

body.app-ui .return-product-search-copy strong,body.app-ui .return-lines-head strong{
  display:block;
  font-size:11px
}

body.app-ui .return-product-search-copy small,body.app-ui .return-lines-head small{
  display:block;
  margin-top:1px;
  color:var(--text-3);
  font-size:9px
}

.return-line-count{
  margin-left:auto;
  padding:5px 8px;
  border:1px solid var(--border);
  border-radius:7px;
  color:var(--text-2);
  font-size:9px;
  font-weight:750
}

body.app-ui .return-product-search-control{
  position:relative;
  display:flex;
  align-items:center;
  gap:9px;
  padding:11px 13px
}

body.app-ui .return-product-search-control>svg{
  position:absolute;
  left:25px;
  color:var(--text-3)
}

body.app-ui .return-product-search-control .finput{
  height:43px;
  padding-left:37px!important
}

body.app-ui .return-location-lock{
  position:absolute;
  inset:48px 0 0;
  z-index:4;
  display:grid;
  place-items:center;
  border-radius:0 0 11px 11px;
  background:rgba(255,255,255,.84);
  backdrop-filter:blur(5px)
}

body.app-ui .return-location-lock>div{
  display:grid;
  grid-template-columns:26px auto;
  gap:1px 8px;
  align-items:center;
  padding:10px 13px;
  border:1px solid #f0c779;
  border-radius:9px;
  background:#fffaf0;
  color:#9a5a0a;
  box-shadow:var(--shadow-sm)
}

body.app-ui .return-location-lock>div>svg{
  grid-row:1/3
}

body.app-ui .return-location-lock strong{
  font-size:10.5px
}

body.app-ui .return-location-lock small{
  font-size:8.5px
}

body.app-ui .return-lines-card{
  margin-top:14px;
  overflow:hidden
}

body.app-ui .return-lines-head>div{
  display:flex;
  align-items:center;
  gap:10px
}

body.app-ui .purchase-return-product-table{
  min-width:940px;
  margin:0
}

body.app-ui .purchase-return-product-table td{
  padding:12px!important;
  vertical-align:middle!important
}

body.app-ui .return-lines-empty{
  display:flex;
  min-height:150px;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:4px;
  color:var(--text-3)
}

body.app-ui .return-lines-empty strong{
  color:var(--text-2);
  font-size:11px
}

body.app-ui .return-lines-empty small{
  font-size:9px
}

body.app-ui .return-line-product{
  display:flex;
  min-width:240px;
  align-items:center;
  gap:9px
}

body.app-ui .return-line-product-icon{
  display:grid;
  width:32px;
  height:32px;
  flex:0 0 32px;
  place-items:center;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--brand-weak);
  color:var(--brand)
}

body.app-ui .return-line-product strong{
  display:block;
  color:var(--text);
  font-size:10.5px
}

body.app-ui .return-line-product small{
  display:block;
  margin-top:2px;
  color:var(--text-3);
  font-size:8.5px
}

body.app-ui .return-number-control,body.app-ui .return-money-control{
  display:flex;
  overflow:hidden;
  min-width:125px;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface)
}

body.app-ui .return-number-control .finput,body.app-ui .return-money-control .finput{
  height:38px;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important
}

body.app-ui .return-number-control>span,body.app-ui .return-money-control>span{
  display:grid;
  min-width:38px;
  place-items:center;
  border-left:1px solid var(--border-2);
  background:var(--surface-2);
  color:var(--text-2);
  font-size:9px;
  font-weight:750
}

body.app-ui .return-money-control>span{
  order:-1;
  border-right:1px solid var(--border-2);
  border-left:0
}

.return-line-total{
  color:var(--brand);
  font-size:12px
}

body.app-ui .return-review-layout{
  display:grid;
  grid-template-columns:minmax(0,1.7fr) minmax(300px,.7fr);
  gap:18px
}

body.app-ui .return-review-fields{
  display:grid;
  grid-template-columns:minmax(230px,.45fr) 1fr;
  gap:14px
}

body.app-ui .return-review-fields>div:last-child{
  grid-column:1/-1
}

body.app-ui .return-notes{
  min-height:102px!important;
  resize:vertical
}

body.app-ui .return-total-card{
  align-self:stretch;
  padding:15px;
  border:1px solid color-mix(in srgb,var(--brand) 28%,var(--border));
  border-radius:11px;
  background:linear-gradient(145deg,var(--surface),var(--brand-weak))
}

body.app-ui .return-total-card>div{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 0;
  border-bottom:1px solid color-mix(in srgb,var(--brand) 12%,var(--border));
  color:var(--text-2);
  font-size:10px
}

.return-total-card>div strong{
  color:var(--text);
  font-size:11px
}

body.app-ui .return-total-card .return-total-grand{
  border-bottom:0;
  color:var(--brand);
  font-weight:800
}

.return-total-card .return-total-grand strong{
  color:var(--brand);
  font-size:19px
}

body.app-ui .return-supplier-option{
  display:grid;
  grid-template-columns:1fr auto;
  gap:2px 8px;
  padding:3px
}

body.app-ui .return-supplier-option strong{
  font-size:10.5px
}

body.app-ui .return-supplier-option small,body.app-ui .return-supplier-option span{
  color:var(--text-3);
  font-size:8.5px
}

body.app-ui .ui-autocomplete .return-product-result>div{
  display:grid;
  grid-template-columns:30px 1fr auto;
  align-items:center;
  gap:9px;
  padding:7px
}

body.app-ui .return-result-icon{
  display:grid;
  width:28px;
  height:28px;
  place-items:center;
  border-radius:7px;
  background:var(--brand-weak);
  color:var(--brand)
}

body.app-ui .return-product-result strong,body.app-ui .return-product-result small{
  display:block
}

body.app-ui .return-product-result strong{
  font-size:10.5px
}

body.app-ui .return-product-result small,body.app-ui .return-product-result em{
  color:var(--text-3);
  font-size:8.5px;
  font-style:normal
}

body.app-ui .return-product-result.is-disabled{
  opacity:.5;
  pointer-events:none
}

body.app-ui .purchase-return-actions{
  margin-top:0!important
}

body.app-ui .purchase-return-actions>div{
  display:flex;
  width:100%;
  align-items:center;
  justify-content:flex-end;
  gap:10px
}

body.app-ui .purchase-return-actions .btn-ghost,body.app-ui .purchase-return-actions .btn-primary{
  height:44px;
  min-width:112px;
  justify-content:center
}

body.app-ui .purchase-return-actions .btn-primary{
  min-width:148px
}

@media(max-width:1100px){
  body.app-ui .purchase-return-overview{
    grid-template-columns:1fr 1fr
  }

  body.app-ui .purchase-return-overview-intro{
    grid-column:1/-1;
    border-right:0;
    border-bottom:1px solid var(--border-2)
  }

  body.app-ui .purchase-return-filter-grid,body.app-ui .purchase-return-detail-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

  body.app-ui .purchase-return-field-document{
    grid-column:auto
  }

  body.app-ui .return-review-layout{
    grid-template-columns:1fr
  }
}

@media(max-width:1199px){
  body.app-ui .purchase-return-table-stage{
    overflow-x:auto;
    transition:padding-bottom .16s ease
  }

  body.app-ui .purchase-return-table-stage:has(.purchase-return-action-group.open){
    padding-bottom:230px
  }
}

@media(max-width:680px){
  body.app-ui .purchase-return-overview,body.app-ui .purchase-return-filter-grid,body.app-ui .purchase-return-detail-grid,body.app-ui .return-review-fields{
    grid-template-columns:1fr
  }

  body.app-ui .purchase-return-overview-intro{
    grid-column:auto
  }

  body.app-ui .purchase-return-steps{
    grid-template-columns:1fr
  }

  body.app-ui .purchase-return-ledger-summary{
    flex-direction:column
  }

  body.app-ui .purchase-return-ledger-summary>div{
    width:100%
  }
}

body.app-ui .purchase-return-detail-dialog{
  width:min(1320px,calc(100vw - 32px));
  max-width:none;
  margin:16px auto
}

body.app-ui .purchase-return-detail-modal{
  display:block;
  width:100%;
  max-height:none;
  overflow:visible;
  border:0;
  border-radius:14px;
  background:var(--surface);
  box-shadow:0 24px 70px rgba(15,35,25,.25)
}

body.app-ui .purchase-return-detail-header,body.app-ui .purchase-return-detail-footer{
  display:flex;
  width:100%;
  align-items:center;
  justify-content:space-between;
  padding:13px 18px;
  border-bottom:1px solid var(--border-2)
}

body.app-ui .purchase-return-detail-footer{
  min-height:66px;
  gap:12px;
  border-top:1px solid var(--border-2);
  border-bottom:0;
  background:var(--surface)
}

body.app-ui .purchase-return-detail-footer>div{
  display:flex;
  align-items:center;
  gap:9px
}

body.app-ui .purchase-return-detail-footer .btn-ghost,body.app-ui .purchase-return-detail-footer .btn-primary{
  display:inline-flex;
  height:42px;
  min-width:104px;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:0 16px;
  border-radius:10px;
  font-size:13px;
  font-weight:800
}

body.app-ui .purchase-return-detail-footer .btn-ghost{
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text-2)
}

body.app-ui .purchase-return-detail-footer .btn-primary{
  border:1px solid var(--brand);
  background:var(--brand);
  color:#fff;
  box-shadow:0 8px 18px -10px color-mix(in srgb,var(--brand) 76%,transparent)
}

body.app-ui .purchase-return-detail-footer-reference{
  color:var(--text-3);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px;
  font-weight:750
}

body.app-ui .purchase-return-detail-title{
  display:flex;
  align-items:center;
  gap:11px
}

body.app-ui .purchase-return-detail-title>span{
  display:grid;
  width:40px;
  height:40px;
  place-items:center;
  border-radius:10px;
  background:var(--brand-weak);
  color:var(--brand)
}

body.app-ui .purchase-return-detail-title h3{
  margin:0;
  color:var(--text);
  font-size:17px;
  font-weight:850
}

body.app-ui .purchase-return-detail-title p{
  margin:3px 0 0;
  color:var(--text-3);
  font-size:11px
}

body.app-ui .purchase-return-detail-body{
  display:block;
  width:100%;
  min-height:auto;
  padding:20px;
  overflow:visible;
  background:var(--surface-2)
}

body.app-ui .return-document-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  padding:5px 3px 18px;
  border-bottom:2px solid var(--text)
}

body.app-ui .return-document-heading h2{
  margin:3px 0;
  color:var(--text);
  font-size:26px;
  font-weight:850;
  letter-spacing:-.025em
}

body.app-ui .return-document-heading p{
  margin:0;
  color:var(--brand);
  font-size:13px;
  font-weight:800
}

body.app-ui .return-document-heading>div:last-child{
  text-align:right
}

body.app-ui .return-document-heading span,body.app-ui .return-document-heading small{
  display:block;
  color:var(--text-3);
  font-size:10.5px
}

body.app-ui .return-document-heading strong{
  display:block;
  margin:4px 0;
  color:var(--text);
  font-size:14px
}

body.app-ui .return-detail-context-grid{
  display:grid;
  grid-template-columns:1fr 1.18fr 1fr;
  gap:12px;
  margin-top:16px
}

body.app-ui .return-detail-context-grid>section,body.app-ui .return-detail-notes,body.app-ui .return-detail-totals{
  padding:16px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface)
}

body.app-ui .return-detail-context-grid .eyebrow,body.app-ui .return-detail-notes .eyebrow{
  color:var(--text-3);
  font-size:10px;
  font-weight:850;
  letter-spacing:.08em
}

body.app-ui .return-detail-context-grid>section>strong{
  display:block;
  margin:8px 0 4px;
  color:var(--text);
  font-size:14px
}

body.app-ui .return-detail-context-grid p,body.app-ui .return-contact-address{
  margin:0;
  color:var(--text-2);
  font-size:12.5px;
  line-height:1.55
}

body.app-ui .return-detail-context-grid dl{
  margin:7px 0 0
}

body.app-ui .return-detail-context-grid dl>div{
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:6px 0
}

body.app-ui .return-detail-context-grid dt{
  color:var(--text-3);
  font-size:12px;
  font-weight:600
}

body.app-ui .return-detail-context-grid dd{
  margin:0;
  color:var(--text);
  font-size:12px;
  font-weight:800;
  text-align:right
}

.return-detail-status{
  display:inline-flex;
  align-items:center;
  padding:4px 9px;
  border-radius:999px;
  background:var(--warn-weak);
  color:var(--warn);
  font-size:10.5px;
  font-weight:800
}

.return-detail-status.is-paid{
  background:var(--brand-weak);
  color:var(--brand)
}

body.app-ui .return-document-download{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-top:10px;
  color:var(--brand);
  font-size:12px;
  font-weight:800
}

body.app-ui .return-detail-lines,body.app-ui .return-detail-activities{
  overflow:hidden;
  margin-top:14px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface)
}

body.app-ui .return-detail-section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 15px;
  border-bottom:1px solid var(--border-2);
  background:var(--surface-2)
}

body.app-ui .return-detail-section-head>div{
  display:flex;
  align-items:center;
  gap:10px
}

body.app-ui .return-detail-section-head strong,body.app-ui .return-detail-section-head small{
  display:block
}

body.app-ui .return-detail-section-head strong{
  font-size:13px
}

body.app-ui .return-detail-section-head small{
  margin-top:2px;
  color:var(--text-3);
  font-size:10.5px
}

body.app-ui .return-detail-lines .table{
  min-width:760px;
  margin:0
}

body.app-ui .return-detail-lines th{
  padding:11px 14px!important;
  color:var(--text-3);
  font-size:10px;
  font-weight:850;
  letter-spacing:.045em;
  text-transform:uppercase
}

body.app-ui .return-detail-lines td{
  padding:13px 14px!important;
  color:var(--text-2);
  font-size:12.5px;
  vertical-align:middle!important
}

body.app-ui .return-detail-product{
  display:flex;
  align-items:center;
  gap:10px
}

body.app-ui .return-detail-product>span{
  display:grid;
  width:34px;
  height:34px;
  place-items:center;
  border-radius:9px;
  background:var(--brand-weak);
  color:var(--brand)
}

body.app-ui .return-detail-product strong{
  color:var(--text);
  font-size:12.5px
}

body.app-ui .return-detail-empty-row td{
  height:142px!important;
  text-align:center
}

body.app-ui .return-detail-empty-row span{
  display:grid;
  width:40px;
  height:40px;
  margin:0 auto 8px;
  place-items:center;
  border-radius:10px;
  background:var(--surface-2);
  color:var(--text-3)
}

body.app-ui .return-detail-empty-row strong,body.app-ui .return-detail-empty-row small{
  display:block
}

body.app-ui .return-detail-empty-row strong{
  color:var(--text-2);
  font-size:13px
}

body.app-ui .return-detail-empty-row small{
  margin-top:3px;
  color:var(--text-3);
  font-size:11px
}

body.app-ui .return-detail-lower-grid{
  display:grid;
  grid-template-columns:1fr 390px;
  gap:14px;
  margin-top:14px
}

body.app-ui .return-detail-notes p{
  margin:8px 0 0;
  color:var(--text-2);
  font-size:12.5px;
  line-height:1.6
}

body.app-ui .return-detail-totals>div{
  display:flex;
  justify-content:space-between;
  padding:10px 0;
  border-bottom:1px solid var(--border-2);
  color:var(--text-2);
  font-size:12px
}

body.app-ui .return-detail-totals>div:last-child{
  border-bottom:0
}

body.app-ui .return-detail-totals .grand{
  color:var(--brand);
  font-weight:850
}

body.app-ui .return-detail-totals .grand strong{
  font-size:18px
}

body.app-ui .return-detail-activities>.table{
  width:100%;
  margin:0;
  border-collapse:collapse;
  table-layout:fixed
}

body.app-ui .return-detail-activities>.table th,body.app-ui .return-detail-activities>.table td{
  padding:12px 14px!important;
  border:0;
  border-bottom:1px solid var(--border-2);
  vertical-align:top!important;
  text-align:left
}

body.app-ui .return-detail-activities>.table th{
  background:var(--surface);
  color:var(--text-3);
  font-size:10px;
  font-weight:850;
  letter-spacing:.05em;
  text-transform:uppercase
}

body.app-ui .return-detail-activities>.table td{
  color:var(--text-2);
  font-size:12.5px;
  line-height:1.5
}

body.app-ui .return-detail-activities>.table th:nth-child(1),body.app-ui .return-detail-activities>.table td:nth-child(1){
  width:20%
}

body.app-ui .return-detail-activities>.table th:nth-child(2),body.app-ui .return-detail-activities>.table td:nth-child(2){
  width:18%
}

body.app-ui .return-detail-activities>.table th:nth-child(3),body.app-ui .return-detail-activities>.table td:nth-child(3){
  width:22%
}

body.app-ui .return-detail-activities>.table tr:last-child td{
  border-bottom:0
}

@media(max-width:760px){
  body.app-ui .purchase-return-detail-dialog{
    width:calc(100vw - 12px);
    margin:6px auto
  }

  body.app-ui .purchase-return-detail-modal{
    border-radius:12px
  }

  body.app-ui .purchase-return-detail-body{
    padding:12px
  }

  body.app-ui .return-detail-context-grid,body.app-ui .return-detail-lower-grid{
    grid-template-columns:1fr
  }

  body.app-ui .purchase-return-detail-footer{
    padding:10px 12px
  }

  body.app-ui .purchase-return-detail-footer-reference{
    display:none
  }

  body.app-ui .purchase-return-detail-footer>div{
    width:100%
  }

  body.app-ui .purchase-return-detail-footer .btn-ghost,body.app-ui .purchase-return-detail-footer .btn-primary{
    flex:1
  }
}

@media print{
  .return-detail-print{
    padding:0!important;
    background:var(--surface)!important;
    overflow:visible!important
  }

  .return-detail-activities{
    display:none!important
  }
}

/* Stock transfers — inventory movement ledger, form, detail and print workspace */

body.app-ui .stock-transfer-overview{
  display:grid;
  grid-template-columns:1.15fr repeat(3,1fr);
  overflow:hidden;
  margin-top:18px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

body.app-ui .stock-transfer-overview-intro,body.app-ui .transfer-state-card{
  display:flex;
  min-height:82px;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  border:0;
  border-right:1px solid var(--border-2);
  background:transparent;
  text-align:left
}

body.app-ui .stock-transfer-overview-intro>span,body.app-ui .transfer-state-card i{
  display:grid;
  width:42px;
  height:42px;
  flex:0 0 42px;
  place-items:center;
  border-radius:11px;
  background:var(--brand-weak);
  color:var(--brand);
  font-style:normal
}

body.app-ui .stock-transfer-overview-intro small,body.app-ui .stock-transfer-overview-intro strong,body.app-ui .stock-transfer-overview-intro p,body.app-ui .transfer-state-card strong,body.app-ui .transfer-state-card small{
  display:block
}

body.app-ui .stock-transfer-overview-intro>div>small{
  color:var(--text-3);
  font-size:9px;
  font-weight:850;
  letter-spacing:.09em
}

body.app-ui .stock-transfer-overview-intro strong{
  margin-top:2px;
  color:var(--text);
  font-size:13px
}

body.app-ui .stock-transfer-overview-intro p{
  margin:2px 0 0;
  color:var(--text-3);
  font-size:10.5px
}

body.app-ui .stock-transfer-show-all{
  display:none;
  margin-left:auto;
  border:0;
  background:transparent;
  color:var(--brand);
  font-size:10.5px;
  font-weight:750
}

body.app-ui .stock-transfer-overview:has(.transfer-state-card.is-active) .stock-transfer-show-all{
  display:inline-flex;
  align-items:center;
  gap:4px
}

body.app-ui .transfer-state-card:last-child{
  border-right:0
}

body.app-ui .transfer-state-card{
  cursor:pointer;
  transition:background .16s ease,box-shadow .16s ease
}

body.app-ui .transfer-state-card:hover{
  background:var(--surface-2)
}

body.app-ui .transfer-state-card strong{
  color:var(--text);
  font-size:13px
}

body.app-ui .transfer-state-card small{
  margin-top:3px;
  color:var(--text-3);
  font-size:10.5px
}

body.app-ui .transfer-state-card.is-pending i{
  background:var(--danger-weak);
  color:var(--danger)
}

body.app-ui .transfer-state-card.is-transit i{
  background:var(--warn-weak);
  color:var(--warn)
}

body.app-ui .transfer-state-card.is-completed i{
  background:var(--brand-weak);
  color:var(--brand)
}

body.app-ui .transfer-state-card.is-active{
  background:color-mix(in srgb,var(--brand-weak) 55%,var(--surface));
  box-shadow:inset 0 -2px 0 var(--brand)
}

body.app-ui .stock-transfer-filter-card{
  overflow:hidden;
  margin-top:16px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

body.app-ui .stock-transfer-filter-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:13px 15px;
  border-bottom:1px solid var(--border-2)
}

body.app-ui .stock-transfer-filter-head>div{
  display:flex;
  align-items:center;
  gap:10px
}

body.app-ui .stock-transfer-filter-head>div>span{
  display:grid;
  width:32px;
  height:32px;
  place-items:center;
  border-radius:9px;
  background:var(--surface-2);
  color:var(--text-2)
}

body.app-ui .stock-transfer-filter-head strong,body.app-ui .stock-transfer-filter-head p{
  display:block
}

body.app-ui .stock-transfer-filter-head strong{
  font-size:13px
}

body.app-ui .stock-transfer-filter-head p{
  margin:2px 0 0;
  color:var(--text-3);
  font-size:10.5px
}

body.app-ui .stock-transfer-filter-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  padding:15px
}

body.app-ui .stock-transfer-list-card{
  margin-top:16px;
  overflow:visible
}

body.app-ui .stock-transfer-table-stage{
  position:relative;
  overflow:visible
}

body.app-ui .stock-transfer-ledger-table{
  min-width:1060px;
  margin:0
}

body.app-ui .stock-transfer-ledger-table td{
  padding:13px 12px!important;
  vertical-align:middle!important
}

body.app-ui .stock-transfer-ledger-table td:last-child{
  position:relative;
  overflow:visible
}

body.app-ui .stock-transfer-ledger-table td:has(.stock-transfer-action-group.open){
  z-index:190
}

body.app-ui .stock-transfer-reference,body.app-ui .stock-transfer-date{
  display:flex;
  align-items:center;
  gap:9px
}

body.app-ui .stock-transfer-reference-icon{
  display:grid;
  width:32px;
  height:32px;
  flex:0 0 32px;
  place-items:center;
  border-radius:9px;
  background:var(--blue-weak);
  color:var(--blue)
}

body.app-ui .stock-transfer-reference strong,body.app-ui .stock-transfer-date strong{
  display:block;
  color:var(--text);
  font-size:12.5px;
  font-weight:800
}

body.app-ui .stock-transfer-reference small,body.app-ui .stock-transfer-date small{
  display:block;
  margin-top:2px;
  color:var(--text-3);
  font-size:10.5px
}

body.app-ui .stock-transfer-date{
  display:block;
  white-space:nowrap
}

body.app-ui .stock-transfer-route{
  display:grid;
  grid-template-columns:minmax(125px,1fr) 24px minmax(125px,1fr);
  align-items:center;
  gap:8px
}

body.app-ui .stock-transfer-route>span{
  display:grid;
  grid-template-columns:19px 1fr;
  gap:0 5px;
  align-items:center
}

body.app-ui .stock-transfer-route i{
  grid-row:1/3;
  color:var(--text-3)
}

body.app-ui .stock-transfer-route small{
  color:var(--text-3);
  font-size:9px;
  font-weight:800;
  letter-spacing:.06em
}

body.app-ui .stock-transfer-route strong{
  overflow:hidden;
  color:var(--text);
  font-size:12px;
  text-overflow:ellipsis;
  white-space:nowrap
}

body.app-ui .stock-transfer-route>b{
  color:var(--brand)
}

body.app-ui .stock-transfer-when{
  display:block;
  margin-top:2px;
  color:var(--text-3);
  font-size:10.5px;
  white-space:nowrap
}

body.app-ui .stock-transfer-movement{
  display:flex;
  flex-direction:column;
  gap:9px;
  align-items:flex-start
}

body.app-ui .stock-transfer-movement>.stock-transfer-route{
  width:100%
}

body.app-ui .transfer-status-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 9px;
  border:1px solid var(--border);
  border-radius:999px;
  font-size:11px;
  font-weight:800;
  white-space:nowrap
}

body.app-ui .transfer-status-chip.is-pending{
  border-color:color-mix(in srgb,var(--danger) 24%,var(--border));
  background:var(--danger-weak);
  color:var(--danger)
}

body.app-ui .transfer-status-chip.is-in_transit{
  border-color:color-mix(in srgb,var(--warn) 28%,var(--border));
  background:var(--warn-weak);
  color:color-mix(in srgb,var(--warn) 82%,#4b3600)
}

body.app-ui .transfer-status-chip.is-completed{
  border-color:color-mix(in srgb,var(--brand) 25%,var(--border));
  background:var(--brand-weak);
  color:var(--brand-strong)
}

body.app-ui .stock-transfer-financial small,body.app-ui .stock-transfer-financial strong,body.app-ui .stock-transfer-financial span{
  display:block
}

body.app-ui .stock-transfer-financial small{
  color:var(--text-3);
  font-size:9px;
  font-weight:800
}

body.app-ui .stock-transfer-financial strong{
  margin-top:2px;
  color:var(--text);
  font-size:14px
}

body.app-ui .stock-transfer-financial span{
  margin-top:2px;
  color:var(--text-3);
  font-size:10.5px
}

body.app-ui .stock-transfer-note{
  display:block;
  max-width:190px;
  overflow:hidden;
  color:var(--text-2);
  font-size:12px;
  text-overflow:ellipsis;
  white-space:nowrap
}

body.app-ui .stock-transfer-row-actions{
  display:flex;
  justify-content:flex-end;
  gap:6px;
  white-space:nowrap
}

body.app-ui .stock-transfer-action-group.open{
  z-index:200
}

body.app-ui .stock-transfer-action-menu{
  right:0;
  left:auto;
  z-index:210;
  min-width:190px
}

body.app-ui .stock-transfer-action-menu li>a,body.app-ui .stock-transfer-action-menu li>button{
  display:flex;
  width:100%;
  min-height:38px;
  align-items:center;
  gap:10px;
  padding:9px 11px;
  border:0;
  border-radius:7px;
  background:transparent;
  color:var(--text-2);
  font-size:12.5px;
  font-weight:650;
  text-align:left
}

body.app-ui .stock-transfer-action-menu .danger-action{
  color:var(--danger)
}

body.app-ui .stock-transfer-ledger-summary{
  display:flex;
  justify-content:flex-end;
  gap:1px;
  padding:12px 14px;
  border-top:1px solid var(--border-2);
  background:var(--surface-2)
}

body.app-ui .stock-transfer-ledger-summary>div{
  display:flex;
  min-width:190px;
  justify-content:space-between;
  gap:18px;
  padding:9px 12px;
  background:var(--surface);
  font-size:11.5px
}

body.app-ui .stock-transfer-ledger-summary span{
  color:var(--text-3)
}

body.app-ui .stock-transfer-ledger-summary strong{
  color:var(--text);
  font-size:13px
}

body.app-ui .stock-transfer-steps{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  overflow:hidden;
  margin:18px 0 16px;
  padding:6px;
  border:1px solid var(--border);
  border-radius:13px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

body.app-ui .stock-transfer-steps>div{
  display:grid;
  grid-template-columns:34px 1fr;
  gap:0 10px;
  align-items:center;
  padding:9px 11px;
  border-radius:9px;
  color:var(--text-3)
}

body.app-ui .stock-transfer-steps>div>span{
  display:grid;
  grid-row:1/3;
  width:32px;
  height:32px;
  place-items:center;
  border-radius:9px;
  background:var(--surface-2);
  font-size:10px;
  font-weight:850
}

body.app-ui .stock-transfer-steps strong{
  font-size:12px
}

body.app-ui .stock-transfer-steps small{
  font-size:10.5px
}

body.app-ui .stock-transfer-steps .is-active{
  border:1px solid var(--border);
  background:var(--surface);
  box-shadow:var(--shadow-sm);
  color:var(--text)
}

body.app-ui .stock-transfer-steps .is-active>span{
  background:var(--brand);
  color:#fff
}

body.app-ui .stock-transfer-form-page form{
  display:grid;
  gap:16px
}

body.app-ui .stock-transfer-route-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 38px minmax(0,1fr) repeat(3,minmax(180px,.7fr));
  gap:14px;
  align-items:start
}

body.app-ui .stock-transfer-direction{
  display:grid;
  height:42px;
  margin-top:25px;
  place-items:center;
  color:var(--brand)
}

body.app-ui .stock-transfer-route-grid .flabel{
  font-size:12.5px
}

body.app-ui .stock-transfer-product-workspace{
  position:relative;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface)
}

body.app-ui .stock-transfer-search-head{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-bottom:1px solid var(--border-2);
  background:var(--surface-2)
}

body.app-ui .stock-transfer-search-head>span:first-child{
  display:grid;
  width:34px;
  height:34px;
  place-items:center;
  border-radius:9px;
  background:var(--brand-weak);
  color:var(--brand)
}

body.app-ui .stock-transfer-search-head strong,body.app-ui .stock-transfer-search-head small{
  display:block
}

body.app-ui .stock-transfer-search-head strong{
  font-size:13px
}

body.app-ui .stock-transfer-search-head small{
  margin-top:2px;
  color:var(--text-3);
  font-size:10.5px
}

body.app-ui .stock-transfer-line-count{
  margin-left:auto;
  padding:4px 8px;
  border:1px solid color-mix(in srgb,var(--brand) 25%,var(--border));
  border-radius:8px;
  background:var(--brand-weak);
  color:var(--brand-strong);
  font-size:10.5px;
  font-weight:750
}

body.app-ui .stock-transfer-search-control{
  position:relative;
  display:flex;
  align-items:center;
  margin:13px
}

body.app-ui .stock-transfer-search-control>svg{
  position:absolute;
  left:14px;
  z-index:2;
  color:var(--text-3)
}

body.app-ui .stock-transfer-search-control .finput{
  height:44px;
  padding-left:42px;
  font-size:13px
}

body.app-ui .stock-transfer-location-lock{
  position:absolute;
  inset:0;
  z-index:5;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(255,255,255,.78);
  backdrop-filter:blur(4px)
}

body.app-ui .stock-transfer-product-workspace.requires-location .stock-transfer-location-lock{
  display:flex
}

body.app-ui .stock-transfer-location-lock>div{
  display:grid;
  grid-template-columns:24px 1fr;
  gap:2px 10px;
  max-width:430px;
  padding:13px 16px;
  border:1px solid color-mix(in srgb,var(--warn) 42%,var(--border));
  border-radius:11px;
  background:var(--surface);
  color:color-mix(in srgb,var(--warn) 80%,#4b3600);
  box-shadow:0 12px 26px -18px rgba(25,35,28,.4)
}

body.app-ui .stock-transfer-location-lock svg{
  grid-row:1/3
}

body.app-ui .stock-transfer-location-lock strong{
  font-size:13px
}

body.app-ui .stock-transfer-location-lock small{
  color:var(--text-2);
  font-size:11px
}

body.app-ui .stock-transfer-lines-card{
  overflow:hidden;
  margin-top:14px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface)
}

body.app-ui .stock-transfer-lines-head{
  display:flex;
  align-items:center;
  padding:12px 14px;
  border-bottom:1px solid var(--border-2);
  background:var(--surface-2)
}

body.app-ui .stock-transfer-lines-head>div{
  display:flex;
  align-items:center;
  gap:10px
}

body.app-ui .stock-transfer-lines-head strong,body.app-ui .stock-transfer-lines-head small{
  display:block
}

body.app-ui .stock-transfer-lines-head strong{
  font-size:13px
}

body.app-ui .stock-transfer-lines-head small{
  margin-top:2px;
  color:var(--text-3);
  font-size:10.5px
}

body.app-ui .stock-transfer-product-table{
  min-width:900px;
  margin:0
}

body.app-ui .stock-transfer-product-table th{
  padding:11px 12px!important;
  color:var(--text-3);
  font-size:10px!important;
  font-weight:850!important;
  letter-spacing:.04em;
  text-transform:uppercase
}

body.app-ui .stock-transfer-product-table td{
  padding:12px!important;
  font-size:12.5px;
  vertical-align:middle!important
}

body.app-ui .stock-transfer-line-index span{
  display:grid;
  width:27px;
  height:27px;
  place-items:center;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface-2);
  color:var(--text-2);
  font-size:11px;
  font-weight:800
}

body.app-ui .stock-transfer-line-product{
  display:flex;
  min-width:260px;
  align-items:flex-start;
  gap:10px
}

body.app-ui .stock-transfer-line-product>span{
  display:grid;
  width:34px;
  height:34px;
  flex:0 0 34px;
  place-items:center;
  border-radius:9px;
  background:var(--brand-weak);
  color:var(--brand)
}

body.app-ui .stock-transfer-line-product strong,body.app-ui .stock-transfer-line-product small{
  display:block
}

body.app-ui .stock-transfer-line-product strong{
  color:var(--text);
  font-size:12.5px
}

body.app-ui .stock-transfer-line-product small{
  margin-top:2px;
  color:var(--text-3);
  font-size:10.5px
}

body.app-ui .stock-transfer-current-stock{
  color:var(--brand-strong)!important
}

body.app-ui .stock-transfer-line-select{
  height:36px!important;
  margin-top:7px;
  border-radius:8px!important;
  font-size:11.5px!important
}

body.app-ui .stock-transfer-quantity-control{
  display:flex;
  min-width:190px;
  align-items:center
}

body.app-ui .stock-transfer-quantity-control .form-control{
  height:40px;
  border-radius:9px 0 0 9px
}

body.app-ui .stock-transfer-quantity-control .stock-transfer-line-select,body.app-ui .stock-transfer-unit-label{
  height:40px!important;
  min-width:74px;
  margin:0;
  border-left:0;
  border-radius:0 9px 9px 0!important
}

body.app-ui .stock-transfer-unit-label{
  display:flex;
  align-items:center;
  padding:0 11px;
  border:1px solid var(--border);
  background:var(--surface-2);
  color:var(--text-2)
}

body.app-ui .stock-transfer-price-cell .form-control{
  height:40px;
  border-radius:9px;
  text-align:right
}

body.app-ui .stock-transfer-lines-empty{
  display:flex;
  min-height:150px;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  color:var(--text-3)
}

body.app-ui .stock-transfer-lines-empty.hidden{
  display:none
}

body.app-ui .stock-transfer-lines-empty strong{
  margin-top:8px;
  color:var(--text-2);
  font-size:13px
}

body.app-ui .stock-transfer-lines-empty small{
  margin-top:3px;
  font-size:11px
}

body.app-ui .ui-autocomplete .stock-transfer-product-result>div{
  display:grid;
  grid-template-columns:34px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  padding:8px
}

body.app-ui .stock-transfer-result-icon{
  display:grid;
  width:32px;
  height:32px;
  place-items:center;
  border-radius:8px;
  background:var(--brand-weak);
  color:var(--brand)
}

body.app-ui .stock-transfer-product-result strong,body.app-ui .stock-transfer-product-result small{
  display:block
}

body.app-ui .stock-transfer-product-result strong{
  font-size:12px
}

body.app-ui .stock-transfer-product-result small{
  margin-top:2px;
  color:var(--text-3);
  font-size:10.5px
}

body.app-ui .stock-transfer-product-result em{
  color:var(--brand);
  font-size:10.5px;
  font-style:normal;
  font-weight:800
}

body.app-ui .stock-transfer-product-result.is-disabled{
  opacity:.55;
  pointer-events:none
}

body.app-ui .stock-transfer-autocomplete.ui-autocomplete{
  box-sizing:border-box;
  width:min(760px,calc(100vw - 32px))!important;
  max-height:320px;
  margin-top:7px!important;
  padding:7px!important;
  overflow-x:hidden;
  overflow-y:auto;
  border:1px solid color-mix(in srgb,var(--brand) 34%,var(--border))!important;
  border-radius:13px;
  background:var(--surface)!important;
  color:var(--text);
  box-shadow:0 24px 52px -22px rgba(16,32,24,.48),0 9px 22px -14px rgba(21,154,77,.34);
  font-family:'Plus Jakarta Sans','Noto Sans Khmer',system-ui,sans-serif;
  z-index:100000!important
}

body.app-ui .stock-transfer-autocomplete .stock-transfer-product-result{
  margin:0 0 3px;
  border:1px solid transparent;
  border-radius:9px;
  background:var(--surface);
  list-style:none;
  transition:border-color .14s ease,background .14s ease
}

body.app-ui .stock-transfer-autocomplete .stock-transfer-product-result:last-child{
  margin-bottom:0
}

body.app-ui .stock-transfer-autocomplete .stock-transfer-product-result>div{
  min-height:52px;
  padding:8px 10px;
  border-radius:8px
}

body.app-ui .stock-transfer-autocomplete .stock-transfer-product-result:not(.is-disabled):hover,body.app-ui .stock-transfer-autocomplete .stock-transfer-product-result:not(.is-disabled):has(.ui-state-active){
  border-color:color-mix(in srgb,var(--brand) 25%,var(--border));
  background:var(--brand-weak)
}

body.app-ui .stock-transfer-autocomplete .stock-transfer-product-result .ui-state-active{
  margin:0;
  border:0;
  background:transparent;
  color:inherit
}

body.app-ui .stock-transfer-autocomplete .stock-transfer-product-result.is-disabled{
  background:var(--surface-2)
}

body.app-ui .stock-transfer-review-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 380px;
  gap:18px
}

body.app-ui .stock-transfer-review-fields{
  display:grid;
  grid-template-columns:280px 1fr;
  gap:16px
}

body.app-ui .stock-transfer-notes{
  min-height:110px!important;
  resize:vertical
}

body.app-ui .stock-transfer-total-card{
  padding:17px;
  border:1px solid color-mix(in srgb,var(--brand) 30%,var(--border));
  border-radius:12px;
  background:linear-gradient(145deg,var(--surface),var(--brand-weak))
}

body.app-ui .stock-transfer-total-card>.eyebrow{
  display:block;
  margin-bottom:8px;
  color:var(--text-3);
  font-size:10px;
  font-weight:850;
  letter-spacing:.08em
}

body.app-ui .stock-transfer-total-card>div{
  display:flex;
  justify-content:space-between;
  padding:10px 0;
  border-bottom:1px solid color-mix(in srgb,var(--brand) 15%,var(--border-2));
  color:var(--text-2);
  font-size:12px
}

body.app-ui .stock-transfer-total-card>div:last-child{
  border-bottom:0
}

body.app-ui .stock-transfer-total-grand{
  color:var(--brand-strong)!important;
  font-weight:850
}

body.app-ui .stock-transfer-total-grand strong{
  font-size:20px
}

body.app-ui .stock-transfer-form-actions{
  margin-top:0
}

body.app-ui .stock-transfer-form-actions>div{
  display:flex;
  align-items:center;
  gap:10px
}

body.app-ui .stock-transfer-status-dialog{
  width:min(560px,calc(100vw - 24px));
  max-width:none
}

body.app-ui .stock-transfer-status-modal{
  overflow:visible;
  border:0;
  border-radius:14px
}

body.app-ui .stock-transfer-status-header,body.app-ui .stock-transfer-status-header>div{
  display:flex;
  align-items:center;
  gap:10px
}

body.app-ui .stock-transfer-status-header{
  justify-content:space-between
}

body.app-ui .stock-transfer-status-header>div>span{
  display:grid;
  width:38px;
  height:38px;
  place-items:center;
  border-radius:10px;
  background:var(--brand-weak);
  color:var(--brand)
}

body.app-ui .stock-transfer-status-header h4{
  margin:0;
  font-size:17px;
  font-weight:850
}

body.app-ui .stock-transfer-status-header p{
  margin:2px 0 0;
  color:var(--text-3);
  font-size:11px
}

body.app-ui .stock-transfer-status-body{
  padding:18px
}

body.app-ui .stock-transfer-status-label{
  display:block;
  margin-bottom:8px;
  color:var(--text-2);
  font-size:12px;
  font-weight:750
}

body.app-ui .stock-transfer-status-options{
  display:grid;
  gap:9px
}

body.app-ui .stock-transfer-status-choice{
  position:relative;
  display:grid;
  grid-template-columns:40px 1fr 20px;
  align-items:center;
  gap:10px;
  padding:12px;
  border:1px solid var(--border);
  border-radius:11px;
  background:var(--surface);
  cursor:pointer
}

body.app-ui .stock-transfer-status-choice input{
  position:absolute;
  opacity:0
}

body.app-ui .stock-transfer-status-choice>span{
  display:grid;
  width:38px;
  height:38px;
  place-items:center;
  border-radius:10px;
  background:var(--surface-2);
  color:var(--text-2)
}

body.app-ui .stock-transfer-status-choice strong,body.app-ui .stock-transfer-status-choice small{
  display:block
}

body.app-ui .stock-transfer-status-choice strong{
  font-size:13px
}

body.app-ui .stock-transfer-status-choice small{
  margin-top:2px;
  color:var(--text-3);
  font-size:10.5px
}

body.app-ui .stock-transfer-status-choice .choice-check{
  opacity:0
}

body.app-ui .stock-transfer-status-choice:has(input:checked){
  border-color:color-mix(in srgb,var(--brand) 45%,var(--border));
  background:var(--brand-weak);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 8%,transparent)
}

body.app-ui .stock-transfer-status-choice:has(input:checked) .choice-check{
  opacity:1;
  color:var(--brand)
}

body.app-ui .stock-transfer-status-footer{
  display:flex;
  justify-content:flex-end;
  gap:9px
}

body.app-ui .stock-transfer-status-footer .btn-ghost,body.app-ui .stock-transfer-status-footer .btn-primary{
  height:42px;
  min-width:104px;
  font-size:13px
}

body.app-ui .stock-transfer-detail-dialog{
  width:min(1320px,calc(100vw - 32px));
  max-width:none;
  margin:16px auto
}

body.app-ui .stock-transfer-detail-modal{
  display:block;
  max-height:none;
  overflow:visible;
  border:0;
  border-radius:14px;
  background:var(--surface);
  box-shadow:0 24px 70px rgba(15,35,25,.25)
}

body.app-ui .stock-transfer-detail-header,body.app-ui .stock-transfer-detail-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:13px 18px;
  border-bottom:1px solid var(--border-2)
}

body.app-ui .stock-transfer-detail-title{
  display:flex;
  align-items:center;
  gap:11px
}

body.app-ui .stock-transfer-detail-title>span{
  display:grid;
  width:40px;
  height:40px;
  place-items:center;
  border-radius:10px;
  background:var(--blue-weak);
  color:var(--blue)
}

body.app-ui .stock-transfer-detail-title h3{
  margin:0;
  font-size:17px;
  font-weight:850
}

body.app-ui .stock-transfer-detail-title p{
  margin:3px 0 0;
  color:var(--text-3);
  font-size:11px
}

body.app-ui .stock-transfer-detail-body{
  padding:20px;
  overflow:visible;
  background:var(--surface-2)
}

body.app-ui .stock-transfer-detail-footer{
  min-height:66px;
  border-top:1px solid var(--border-2);
  border-bottom:0
}

body.app-ui .stock-transfer-detail-footer>span{
  color:var(--text-3);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px;
  font-weight:750
}

body.app-ui .stock-transfer-detail-footer>div{
  display:flex;
  gap:9px
}

body.app-ui .stock-transfer-detail-footer .btn-ghost,body.app-ui .stock-transfer-detail-footer .btn-primary{
  height:42px;
  min-width:104px;
  font-size:13px
}

body.app-ui .stock-transfer-document-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  padding:5px 3px 18px;
  border-bottom:2px solid var(--text)
}

body.app-ui .stock-transfer-document-heading h2{
  margin:3px 0;
  color:var(--text);
  font-size:26px;
  font-weight:850
}

body.app-ui .stock-transfer-document-heading p{
  margin:0;
  color:var(--brand);
  font-size:13px;
  font-weight:800
}

body.app-ui .stock-transfer-document-heading>div:last-child{
  text-align:right
}

body.app-ui .stock-transfer-document-heading span,body.app-ui .stock-transfer-document-heading small{
  display:block;
  color:var(--text-3);
  font-size:10.5px
}

body.app-ui .stock-transfer-document-heading strong{
  display:block;
  margin:4px 0;
  color:var(--text);
  font-size:14px
}

body.app-ui .stock-transfer-document .eyebrow{
  color:var(--text-3);
  font-size:10px;
  font-weight:850;
  letter-spacing:.08em
}

body.app-ui .stock-transfer-document-context{
  display:grid;
  grid-template-columns:1fr 1fr .9fr;
  gap:12px;
  margin-top:16px
}

body.app-ui .stock-transfer-document-card,body.app-ui .stock-transfer-document-notes,body.app-ui .stock-transfer-document-totals{
  padding:16px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface)
}

body.app-ui .stock-transfer-document-card address{
  margin:8px 0 0;
  color:var(--text-2);
  font-size:12.5px;
  font-style:normal;
  line-height:1.6
}

body.app-ui .stock-transfer-document-card address strong,body.app-ui .stock-transfer-document-card address span{
  display:block
}

body.app-ui .stock-transfer-document-card address strong{
  color:var(--text);
  font-size:14px
}

body.app-ui .stock-transfer-document-card dl{
  margin:7px 0 0
}

body.app-ui .stock-transfer-document-card dl>div{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:6px 0
}

body.app-ui .stock-transfer-document-card dt{
  color:var(--text-3);
  font-size:12px
}

body.app-ui .stock-transfer-document-card dd{
  margin:0;
  color:var(--text);
  font-size:12px;
  font-weight:800;
  text-align:right
}

body.app-ui .stock-transfer-document-lines,body.app-ui .stock-transfer-document-activities{
  overflow:hidden;
  margin-top:14px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface)
}

body.app-ui .stock-transfer-document-section-head{
  display:flex;
  padding:12px 15px;
  border-bottom:1px solid var(--border-2);
  background:var(--surface-2)
}

body.app-ui .stock-transfer-document-section-head>div{
  display:flex;
  align-items:center;
  gap:10px
}

body.app-ui .stock-transfer-document-section-head strong,body.app-ui .stock-transfer-document-section-head small{
  display:block
}

body.app-ui .stock-transfer-document-section-head strong{
  font-size:13px
}

body.app-ui .stock-transfer-document-section-head small{
  margin-top:2px;
  color:var(--text-3);
  font-size:10.5px
}

body.app-ui .stock-transfer-document-lines table{
  width:100%;
  min-width:760px;
  border-collapse:collapse
}

body.app-ui .stock-transfer-document-lines th{
  padding:11px 14px;
  background:var(--surface);
  color:var(--text-3);
  font-size:10px;
  font-weight:850;
  letter-spacing:.045em;
  text-align:left;
  text-transform:uppercase
}

body.app-ui .stock-transfer-document-lines td{
  padding:13px 14px;
  border-top:1px solid var(--border-2);
  color:var(--text-2);
  font-size:12.5px
}

body.app-ui .stock-transfer-document-lines td strong,body.app-ui .stock-transfer-document-lines td small{
  display:block
}

body.app-ui .stock-transfer-document-lines td strong{
  color:var(--text)
}

body.app-ui .stock-transfer-document-lines td small{
  margin-top:2px;
  color:var(--text-3);
  font-size:10.5px
}

body.app-ui .stock-transfer-document-empty{
  height:120px;
  text-align:center
}

body.app-ui .stock-transfer-document-lower{
  display:grid;
  grid-template-columns:1fr 390px;
  gap:14px;
  margin-top:14px
}

body.app-ui .stock-transfer-document-notes p{
  margin:8px 0 0;
  color:var(--text-2);
  font-size:12.5px;
  line-height:1.6
}

body.app-ui .stock-transfer-document-totals>div{
  display:flex;
  justify-content:space-between;
  padding:10px 0;
  border-bottom:1px solid var(--border-2);
  color:var(--text-2);
  font-size:12px
}

body.app-ui .stock-transfer-document-totals>div:last-child{
  border:0;
  color:var(--brand);
  font-weight:850
}

body.app-ui .stock-transfer-document-totals>div:last-child strong{
  font-size:18px
}

body.app-ui .stock-transfer-document-activities .table{
  width:100%;
  margin:0
}

body.app-ui .stock-transfer-document-activities .table th,body.app-ui .stock-transfer-document-activities .table td{
  padding:11px 14px!important;
  font-size:12px;
  vertical-align:top!important
}

body.app-ui .stock-transfer-document-barcode{
  text-align:center;
  padding:18px 0 2px
}

body.app-ui .stock-transfer-document-barcode img{
  max-width:100%
}

body.app-ui .activity-status-label{
  display:inline-flex;
  min-height:25px;
  align-items:center;
  padding:4px 9px!important;
  border:1px solid transparent;
  border-radius:999px!important;
  font-size:11.5px!important;
  font-weight:800;
  line-height:1;
  white-space:nowrap
}

body.app-ui .activity-status-label.is-success{
  border-color:color-mix(in srgb,var(--brand) 25%,var(--border));
  background:var(--brand-weak)!important;
  color:var(--brand-strong)!important
}

body.app-ui .activity-status-label.is-warning{
  border-color:color-mix(in srgb,var(--warn) 28%,var(--border));
  background:var(--warn-weak)!important;
  color:color-mix(in srgb,var(--warn) 82%,#4b3600)!important
}

body.app-ui .activity-status-label.is-danger{
  border-color:color-mix(in srgb,var(--danger) 25%,var(--border));
  background:var(--danger-weak)!important;
  color:var(--danger)!important
}

body.app-ui .activity-status-label.is-info{
  border-color:color-mix(in srgb,var(--blue) 25%,var(--border));
  background:var(--blue-weak)!important;
  color:var(--blue)!important
}

/* Stock transfer readability contract: operational copy stays comfortably legible. */

body.app-ui .stock-transfer-overview-intro>div>small,body.app-ui .stock-transfer-route small,body.app-ui .stock-transfer-financial small,body.app-ui .stock-transfer-document-card>.eyebrow,body.app-ui .stock-transfer-document-notes>.eyebrow{
  font-size:10.5px
}

body.app-ui .stock-transfer-overview-intro strong,body.app-ui .transfer-state-card strong,body.app-ui .stock-transfer-filter-head strong,body.app-ui .stock-transfer-search-head strong,body.app-ui .stock-transfer-lines-head strong,body.app-ui .stock-transfer-line-product strong{
  font-size:14px
}

body.app-ui .stock-transfer-overview-intro p,body.app-ui .transfer-state-card small,body.app-ui .stock-transfer-filter-head p,body.app-ui .stock-transfer-reference small,body.app-ui .stock-transfer-date small,body.app-ui .stock-transfer-search-head small,body.app-ui .stock-transfer-lines-head small,body.app-ui .stock-transfer-line-product small,body.app-ui .stock-transfer-product-result small{
  font-size:12px
}

body.app-ui .stock-transfer-reference strong,body.app-ui .stock-transfer-date strong,body.app-ui .stock-transfer-route strong,body.app-ui .stock-transfer-note,body.app-ui .stock-transfer-product-table td,body.app-ui .stock-transfer-product-result strong{
  font-size:13.5px
}

body.app-ui .stock-transfer-product-table th,body.app-ui .stock-transfer-document-lines th,body.app-ui .stock-transfer-document-activities .table th{
  font-size:11px!important
}

body.app-ui .stock-transfer-status-header p,body.app-ui .stock-transfer-detail-title p,body.app-ui .stock-transfer-document-card address,body.app-ui .stock-transfer-document-card dl,body.app-ui .stock-transfer-document-notes p,body.app-ui .stock-transfer-document-lines td,body.app-ui .stock-transfer-document-activities .table td{
  font-size:13px
}

body.app-ui .stock-transfer-detail-header,body.app-ui .stock-transfer-detail-footer{
  position:static
}

@media(max-width:1199px){
  body.app-ui .stock-transfer-table-stage{
    overflow-x:auto;
    transition:padding-bottom .16s ease
  }

  body.app-ui .stock-transfer-table-stage:has(.stock-transfer-action-group.open){
    padding-bottom:220px
  }

  body.app-ui .stock-transfer-route-grid{
    grid-template-columns:1fr 34px 1fr
  }

  body.app-ui .stock-transfer-route-grid>.field:nth-of-type(n+3){
    grid-column:auto
  }

  body.app-ui .stock-transfer-review-layout{
    grid-template-columns:1fr 340px
  }
}

@media(max-width:900px){
  body.app-ui .stock-transfer-overview{
    grid-template-columns:1fr 1fr
  }

  body.app-ui .stock-transfer-overview-intro{
    grid-column:1/-1;
    border-right:0;
    border-bottom:1px solid var(--border-2)
  }

  body.app-ui .stock-transfer-filter-grid{
    grid-template-columns:1fr
  }

  body.app-ui .stock-transfer-route-grid{
    grid-template-columns:1fr
  }

  body.app-ui .stock-transfer-direction{
    height:auto;
    margin:0;
    transform:rotate(90deg)
  }

  body.app-ui .stock-transfer-review-layout,body.app-ui .stock-transfer-review-fields,body.app-ui .stock-transfer-document-context,body.app-ui .stock-transfer-document-lower{
    grid-template-columns:1fr
  }
}

@media(max-width:680px){
  body.app-ui .stock-transfer-overview,body.app-ui .stock-transfer-steps{
    grid-template-columns:1fr
  }

  body.app-ui .transfer-state-card{
    border-right:0;
    border-bottom:1px solid var(--border-2)
  }

  body.app-ui .stock-transfer-ledger-summary{
    flex-direction:column
  }

  body.app-ui .stock-transfer-ledger-summary>div{
    width:100%
  }

  body.app-ui .stock-transfer-detail-dialog{
    width:calc(100vw - 12px);
    margin:6px auto
  }

  body.app-ui .stock-transfer-detail-body{
    padding:12px
  }

  body.app-ui .stock-transfer-detail-footer>span{
    display:none
  }

  body.app-ui .stock-transfer-detail-footer>div{
    width:100%
  }

  body.app-ui .stock-transfer-detail-footer .btn-ghost,body.app-ui .stock-transfer-detail-footer .btn-primary{
    flex:1
  }
}

/* Stock adjustments */

body.app-ui .stock-adjustment-overview{
  display:grid;
  grid-template-columns:1.2fr repeat(3,1fr);
  overflow:hidden;
  margin-top:18px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

body.app-ui .stock-adjustment-overview-intro,body.app-ui .adjustment-state-card{
  display:flex;
  min-height:88px;
  align-items:center;
  gap:12px;
  padding:15px 17px;
  border:0;
  border-right:1px solid var(--border-2);
  background:transparent;
  text-align:left
}

body.app-ui .stock-adjustment-overview-intro>span,body.app-ui .adjustment-state-card i{
  display:grid;
  width:42px;
  height:42px;
  flex:0 0 42px;
  place-items:center;
  border-radius:11px;
  background:var(--brand-weak);
  color:var(--brand);
  font-style:normal
}

body.app-ui .stock-adjustment-overview-intro small,body.app-ui .stock-adjustment-overview-intro strong,body.app-ui .stock-adjustment-overview-intro p,body.app-ui .adjustment-state-card strong,body.app-ui .adjustment-state-card small{
  display:block
}

body.app-ui .stock-adjustment-overview-intro>div>small{
  color:var(--text-3);
  font-size:10.5px;
  font-weight:850;
  letter-spacing:.09em
}

body.app-ui .stock-adjustment-overview-intro strong,body.app-ui .adjustment-state-card strong{
  margin-top:2px;
  color:var(--text);
  font-size:14px
}

body.app-ui .stock-adjustment-overview-intro p,body.app-ui .adjustment-state-card small{
  margin:3px 0 0;
  color:var(--text-3);
  font-size:12px
}

body.app-ui .stock-adjustment-show-all{
  display:none;
  margin-left:auto;
  border:0;
  background:transparent;
  color:var(--brand);
  font-size:11.5px;
  font-weight:750
}

body.app-ui .stock-adjustment-overview:has(.adjustment-state-card.is-active) .stock-adjustment-show-all{
  display:inline-flex;
  align-items:center;
  gap:4px
}

body.app-ui .adjustment-state-card{
  cursor:pointer;
  transition:background .15s ease,box-shadow .15s ease
}

body.app-ui .adjustment-state-card:hover,body.app-ui .adjustment-state-card.is-active{
  background:var(--surface-2);
  box-shadow:inset 0 -2px var(--brand)
}

body.app-ui .adjustment-state-card.is-abnormal i{
  background:var(--danger-weak);
  color:var(--danger)
}

body.app-ui .adjustment-state-card.is-recovery{
  cursor:default
}

body.app-ui .adjustment-state-card.is-recovery i{
  background:var(--blue-weak);
  color:var(--blue)
}

body.app-ui .stock-adjustment-filter-card{
  overflow:visible;
  margin-top:14px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

body.app-ui .stock-adjustment-filter-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 15px;
  border-bottom:1px solid var(--border-2);
  border-radius:13px 13px 0 0;
  background:var(--surface-2);
  background-clip:padding-box
}

body.app-ui .stock-adjustment-filter-head>div{
  display:flex;
  align-items:center;
  gap:10px
}

body.app-ui .stock-adjustment-filter-head>div>span{
  display:grid;
  width:34px;
  height:34px;
  place-items:center;
  border-radius:9px;
  background:var(--surface);
  color:var(--text-2)
}

body.app-ui .stock-adjustment-filter-head strong{
  display:block;
  font-size:14px
}

body.app-ui .stock-adjustment-filter-head p{
  margin:2px 0 0;
  color:var(--text-3);
  font-size:12px
}

body.app-ui .stock-adjustment-filter-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  padding:14px
}

body.app-ui .stock-adjustment-list-card{
  margin-top:18px
}

body.app-ui .stock-adjustment-table-stage{
  overflow-x:auto;
  overflow-y:visible
}

body.app-ui .stock-adjustment-ledger-table{
  min-width:1120px
}

body.app-ui .stock-adjustment-ledger-table th{
  font-size:11px!important
}

body.app-ui .stock-adjustment-ledger-table td{
  padding:13px 12px!important;
  font-size:13px;
  vertical-align:middle!important
}

body.app-ui .stock-adjustment-reference,body.app-ui .stock-adjustment-location,body.app-ui .stock-adjustment-row-actions{
  display:flex;
  align-items:center;
  gap:9px
}

body.app-ui .stock-adjustment-reference>span{
  display:grid;
  width:34px;
  height:34px;
  flex:0 0 34px;
  place-items:center;
  border-radius:9px;
  background:var(--brand-weak);
  color:var(--brand)
}

body.app-ui .stock-adjustment-reference strong,body.app-ui .stock-adjustment-reference small,body.app-ui .stock-adjustment-recorded-date strong,body.app-ui .stock-adjustment-recorded-date small,body.app-ui .stock-adjustment-financial strong,body.app-ui .stock-adjustment-financial small,body.app-ui .stock-adjustment-financial span{
  display:block
}

body.app-ui .stock-adjustment-reference strong{
  font-size:13px
}

body.app-ui .stock-adjustment-reference small,body.app-ui .stock-adjustment-recorded-date small,body.app-ui .stock-adjustment-financial small{
  margin-top:2px;
  color:var(--text-3);
  font-size:10.5px
}

body.app-ui .stock-adjustment-recorded-date strong,body.app-ui .stock-adjustment-financial strong{
  font-size:13px
}

body.app-ui .stock-adjustment-financial span{
  margin-top:2px;
  color:var(--text-3);
  font-size:11.5px
}

body.app-ui .stock-adjustment-location svg{
  color:var(--text-3)
}

body.app-ui .stock-adjustment-location strong{
  font-size:12.5px
}

body.app-ui .stock-adjustment-owner{
  display:block;
  min-width:0
}

body.app-ui .stock-adjustment-owner strong{
  display:block;
  color:var(--text);
  font-size:12.5px;
  font-weight:700;
  white-space:nowrap
}

body.app-ui .stock-adjustment-owner small{
  display:block;
  margin-top:2px;
  color:var(--text-3);
  font-size:10.5px;
  white-space:nowrap
}

body.app-ui .stock-adjustment-type{
  display:inline-flex;
  align-items:center;
  padding:5px 9px;
  border:1px solid color-mix(in srgb,var(--warn) 25%,var(--border));
  border-radius:999px;
  background:var(--warn-weak);
  color:#9a5b0a;
  font-size:11.5px;
  font-weight:800
}

body.app-ui .stock-adjustment-type.is-abnormal{
  border-color:color-mix(in srgb,var(--danger) 25%,var(--border));
  background:var(--danger-weak);
  color:var(--danger)
}

body.app-ui .stock-adjustment-reason{
  display:block;
  max-width:290px;
  overflow:hidden;
  color:var(--text-2);
  text-overflow:ellipsis;
  white-space:nowrap
}

body.app-ui .stock-adjustment-row-actions{
  justify-content:flex-end
}

body.app-ui .stock-adjustment-action-group.open{
  position:relative;
  z-index:40
}

body.app-ui .stock-adjustment-ledger-summary{
  display:flex;
  justify-content:flex-end;
  border-top:1px solid var(--border-2);
  background:var(--surface-2)
}

body.app-ui .stock-adjustment-ledger-summary>div{
  display:flex;
  min-width:180px;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:12px 15px;
  border-left:1px solid var(--border-2);
  font-size:12px
}

body.app-ui .stock-adjustment-ledger-summary span{
  color:var(--text-3)
}

body.app-ui .stock-adjustment-ledger-summary strong{
  color:var(--text);
  font-size:13.5px
}

body.app-ui .stock-adjustment-ledger-summary>div:last-child strong{
  color:var(--brand)
}

body.app-ui .stock-adjustment-steps{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  overflow:hidden;
  margin:18px 0 16px;
  padding:6px;
  border:1px solid var(--border);
  border-radius:13px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

body.app-ui .stock-adjustment-steps>div{
  display:grid;
  grid-template-columns:36px 1fr;
  gap:0 10px;
  align-items:center;
  padding:10px 12px;
  border-radius:9px;
  color:var(--text-3)
}

body.app-ui .stock-adjustment-steps>div>span{
  display:grid;
  grid-row:1/3;
  width:34px;
  height:34px;
  place-items:center;
  border-radius:9px;
  background:var(--surface-2);
  font-size:11px;
  font-weight:850
}

body.app-ui .stock-adjustment-steps strong{
  font-size:13px
}

body.app-ui .stock-adjustment-steps small{
  font-size:11.5px
}

body.app-ui .stock-adjustment-steps .is-active{
  border:1px solid var(--border);
  background:var(--surface);
  box-shadow:var(--shadow-sm);
  color:var(--text)
}

body.app-ui .stock-adjustment-steps .is-active>span{
  background:var(--brand);
  color:#fff
}

body.app-ui .stock-adjustment-detail-grid{
  display:grid;
  grid-template-columns:1.15fr .8fr 1fr 1fr;
  gap:16px
}

body.app-ui .stock-adjustment-product-gate{
  position:relative
}

body.app-ui .stock-adjustment-product-workspace,body.app-ui .stock-adjustment-lines-card{
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface)
}

body.app-ui .stock-adjustment-search-head,body.app-ui .stock-adjustment-lines-head{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-bottom:1px solid var(--border-2);
  background:var(--surface-2)
}

body.app-ui .stock-adjustment-search-head>span:first-child{
  display:grid;
  width:36px;
  height:36px;
  place-items:center;
  border-radius:9px;
  background:var(--brand-weak);
  color:var(--brand)
}

body.app-ui .stock-adjustment-search-head strong,body.app-ui .stock-adjustment-search-head small,body.app-ui .stock-adjustment-lines-head strong,body.app-ui .stock-adjustment-lines-head small{
  display:block
}

body.app-ui .stock-adjustment-search-head strong,body.app-ui .stock-adjustment-lines-head strong{
  font-size:14px
}

body.app-ui .stock-adjustment-search-head small,body.app-ui .stock-adjustment-lines-head small{
  margin-top:2px;
  color:var(--text-3);
  font-size:12px
}

body.app-ui .stock-adjustment-line-count{
  margin-left:auto;
  padding:5px 9px;
  border:1px solid color-mix(in srgb,var(--brand) 24%,var(--border));
  border-radius:8px;
  background:var(--brand-weak);
  color:var(--brand-strong);
  font-size:11.5px;
  font-weight:750
}

body.app-ui .stock-adjustment-search-control{
  position:relative;
  display:flex;
  align-items:center;
  margin:13px
}

body.app-ui .stock-adjustment-search-control>svg{
  position:absolute;
  left:14px;
  z-index:2;
  color:var(--text-3)
}

body.app-ui .stock-adjustment-search-control .finput{
  height:46px;
  padding-left:42px;
  font-size:13px
}

body.app-ui .stock-adjustment-lines-card{
  margin-top:14px
}

body.app-ui .stock-adjustment-lines-head>div{
  display:flex;
  align-items:center;
  gap:10px
}

body.app-ui .stock-adjustment-product-table{
  min-width:940px;
  margin:0
}

body.app-ui .stock-adjustment-product-table th{
  padding:11px 12px!important;
  color:var(--text-3);
  font-size:11px!important;
  font-weight:850!important;
  letter-spacing:.04em;
  text-transform:uppercase
}

body.app-ui .stock-adjustment-product-table td{
  padding:13px 12px!important;
  font-size:13px;
  vertical-align:middle!important
}

body.app-ui .stock-adjustment-line-index span{
  display:grid;
  width:28px;
  height:28px;
  place-items:center;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface-2);
  font-size:11.5px;
  font-weight:800
}

body.app-ui .stock-adjustment-line-product{
  display:flex;
  min-width:290px;
  align-items:flex-start;
  gap:10px
}

body.app-ui .stock-adjustment-line-product>span{
  display:grid;
  width:36px;
  height:36px;
  flex:0 0 36px;
  place-items:center;
  border-radius:9px;
  background:var(--brand-weak);
  color:var(--brand)
}

body.app-ui .stock-adjustment-line-product strong,body.app-ui .stock-adjustment-line-product small{
  display:block
}

body.app-ui .stock-adjustment-line-product strong{
  font-size:13px
}

body.app-ui .stock-adjustment-line-product small{
  margin-top:3px;
  color:var(--text-3);
  font-size:11.5px
}

body.app-ui .stock-adjustment-lot-field select{
  width:100%;
  height:38px;
  margin-top:8px;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface);
  font-size:12px
}

body.app-ui .stock-adjustment-quantity-control,body.app-ui .stock-adjustment-money-control,body.app-ui .money-control{
  display:flex;
  min-width:170px;
  align-items:center
}

body.app-ui .stock-adjustment-quantity-control .finput,body.app-ui .stock-adjustment-money-control .finput,body.app-ui .money-control .finput{
  height:42px;
  border-radius:9px 0 0 9px;
  text-align:right
}

body.app-ui .stock-adjustment-quantity-control>span,body.app-ui .stock-adjustment-money-control>span,body.app-ui .money-control>span{
  display:flex;
  height:42px;
  min-width:48px;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border);
  border-left:0;
  border-radius:0 9px 9px 0;
  background:var(--surface-2);
  color:var(--text-2);
  font-size:12px;
  font-weight:750
}

body.app-ui .stock-adjustment-lines-empty{
  display:flex;
  min-height:165px;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  color:var(--text-3)
}

body.app-ui .stock-adjustment-lines-empty.hidden{
  display:none
}

body.app-ui .stock-adjustment-lines-empty strong{
  margin-top:9px;
  color:var(--text-2);
  font-size:14px
}

body.app-ui .stock-adjustment-lines-empty small{
  margin-top:4px;
  font-size:12px
}

body.app-ui .stock-adjustment-location-lock{
  position:absolute;
  inset:0;
  z-index:8;
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
  border-radius:12px;
  background:rgba(255,255,255,.83);
  backdrop-filter:blur(4px)
}

body.app-ui .stock-adjustment-product-gate.requires-location .stock-adjustment-location-lock{
  display:flex
}

body.app-ui .stock-adjustment-location-lock>div{
  display:grid;
  grid-template-columns:26px 1fr;
  gap:3px 11px;
  max-width:470px;
  padding:14px 18px;
  border:1px solid color-mix(in srgb,var(--warn) 42%,var(--border));
  border-radius:11px;
  background:var(--surface);
  color:#9a5b0a;
  box-shadow:0 14px 30px -19px rgba(24,34,27,.45)
}

body.app-ui .stock-adjustment-location-lock svg{
  grid-row:1/3
}

body.app-ui .stock-adjustment-location-lock strong{
  font-size:13.5px
}

body.app-ui .stock-adjustment-location-lock small{
  color:var(--text-2);
  font-size:12px
}

body.app-ui .stock-adjustment-review-layout{
  display:grid;
  grid-template-columns:1fr 390px;
  gap:22px
}

body.app-ui .stock-adjustment-review-fields{
  display:grid;
  grid-template-columns:.75fr 1.25fr;
  gap:16px
}

body.app-ui .stock-adjustment-notes{
  min-height:125px;
  resize:vertical
}

body.app-ui .stock-adjustment-total-card{
  align-self:start;
  padding:17px;
  border:1px solid color-mix(in srgb,var(--brand) 28%,var(--border));
  border-radius:12px;
  background:linear-gradient(145deg,#fff,var(--brand-weak))
}

body.app-ui .stock-adjustment-total-card>.eyebrow{
  display:block;
  margin-bottom:7px;
  color:var(--text-3);
  font-size:10.5px;
  font-weight:850;
  letter-spacing:.08em
}

body.app-ui .stock-adjustment-total-card>div{
  display:flex;
  justify-content:space-between;
  padding:10px 0;
  border-bottom:1px solid color-mix(in srgb,var(--brand) 18%,var(--border));
  font-size:12.5px
}

body.app-ui .stock-adjustment-total-card>div:last-child{
  border:0
}

body.app-ui .stock-adjustment-net-impact{
  color:var(--danger);
  font-weight:850
}

body.app-ui .stock-adjustment-net-impact strong{
  font-size:18px
}

body.app-ui .stock-adjustment-form-actions>div{
  display:flex;
  gap:9px
}

body.app-ui .stock-adjustment-autocomplete.ui-autocomplete{
  box-sizing:border-box;
  width:min(760px,calc(100vw - 32px))!important;
  max-height:330px;
  margin-top:7px!important;
  padding:7px!important;
  overflow-y:auto;
  border:1px solid color-mix(in srgb,var(--brand) 34%,var(--border))!important;
  border-radius:13px;
  background:var(--surface)!important;
  box-shadow:0 24px 52px -22px rgba(16,32,24,.48);
  font-family:'Plus Jakarta Sans','Noto Sans Khmer',system-ui,sans-serif;
  z-index:100000!important
}

body.app-ui .stock-adjustment-product-result{
  margin:0 0 3px;
  border:1px solid transparent;
  border-radius:9px;
  background:var(--surface);
  list-style:none
}

body.app-ui .stock-adjustment-product-result>div{
  display:flex;
  min-height:54px;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border-radius:8px
}

body.app-ui .stock-adjustment-product-result:hover,body.app-ui .stock-adjustment-product-result:has(.ui-state-active){
  border-color:color-mix(in srgb,var(--brand) 25%,var(--border));
  background:var(--brand-weak)
}

body.app-ui .stock-adjustment-product-result.is-disabled{
  opacity:.62;
  background:var(--surface-2)
}

body.app-ui .stock-adjustment-product-result .ui-state-active{
  margin:0;
  border:0;
  background:transparent;
  color:inherit
}

body.app-ui .stock-adjustment-result-icon{
  display:grid;
  width:34px;
  height:34px;
  flex:0 0 34px;
  place-items:center;
  border-radius:9px;
  background:var(--brand-weak);
  color:var(--brand)
}

body.app-ui .stock-adjustment-product-result strong,body.app-ui .stock-adjustment-product-result small{
  display:block
}

body.app-ui .stock-adjustment-product-result strong{
  font-size:13px
}

body.app-ui .stock-adjustment-product-result small{
  margin-top:2px;
  color:var(--text-3);
  font-size:11.5px
}

body.app-ui .stock-adjustment-product-result em{
  margin-left:auto;
  color:var(--brand);
  font-size:11px;
  font-style:normal;
  font-weight:800
}

body.app-ui .stock-adjustment-detail-dialog{
  width:min(1320px,calc(100vw - 32px));
  max-width:none;
  margin:16px auto
}

body.app-ui .stock-adjustment-detail-modal{
  display:block;
  max-height:none;
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--border) 78%,transparent);
  border-radius:16px!important;
  background:var(--surface);
  background-clip:padding-box;
  box-shadow:0 24px 70px rgba(15,35,25,.25)
}

body.app-ui .stock-adjustment-detail-header,body.app-ui .stock-adjustment-detail-footer{
  position:static!important;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:13px 18px;
  border-bottom:1px solid var(--border-2);
  background:var(--surface)
}

body.app-ui .stock-adjustment-detail-title{
  display:flex;
  align-items:center;
  gap:11px
}

body.app-ui .stock-adjustment-detail-title>span{
  display:grid;
  width:40px;
  height:40px;
  place-items:center;
  border-radius:10px;
  background:var(--brand-weak);
  color:var(--brand)
}

body.app-ui .stock-adjustment-detail-title h3{
  margin:0;
  font-size:18px;
  font-weight:850
}

body.app-ui .stock-adjustment-detail-title p{
  margin:3px 0 0;
  color:var(--text-3);
  font-size:12px
}

body.app-ui .stock-adjustment-detail-body{
  padding:20px;
  overflow:visible;
  background:var(--surface-2)
}

body.app-ui .stock-adjustment-detail-footer{
  min-height:68px;
  border-top:1px solid var(--border-2);
  border-bottom:0
}

body.app-ui .stock-adjustment-detail-footer>span{
  color:var(--text-3);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12px;
  font-weight:750
}

body.app-ui .stock-adjustment-detail-footer>div{
  display:flex;
  gap:9px
}

body.app-ui .stock-adjustment-detail-footer .btn-ghost,body.app-ui .stock-adjustment-detail-footer .btn-primary{
  height:42px;
  min-width:104px;
  font-size:13px
}

body.app-ui .stock-adjustment-document-heading{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  padding:5px 3px 18px;
  border-bottom:2px solid var(--text)
}

body.app-ui .stock-adjustment-document-heading h2{
  margin:3px 0;
  color:var(--text);
  font-size:27px;
  font-weight:850
}

body.app-ui .stock-adjustment-document-heading p{
  margin:0;
  color:var(--brand);
  font-size:13px;
  font-weight:800
}

body.app-ui .stock-adjustment-document-heading>div:last-child{
  text-align:right
}

body.app-ui .stock-adjustment-document-heading span,body.app-ui .stock-adjustment-document-heading small{
  display:block;
  color:var(--text-3);
  font-size:11.5px
}

body.app-ui .stock-adjustment-document-heading strong{
  display:block;
  margin:4px 0;
  color:var(--text);
  font-size:14px
}

body.app-ui .stock-adjustment-document .eyebrow{
  color:var(--text-3);
  font-size:10.5px;
  font-weight:850;
  letter-spacing:.08em
}

body.app-ui .stock-adjustment-document-context{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:16px
}

body.app-ui .stock-adjustment-document-card,body.app-ui .stock-adjustment-document-notes,body.app-ui .stock-adjustment-document-totals{
  padding:16px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface)
}

body.app-ui .stock-adjustment-document-card address{
  margin:8px 0 0;
  color:var(--text-2);
  font-size:13px;
  font-style:normal;
  line-height:1.65
}

body.app-ui .stock-adjustment-document-card address strong,body.app-ui .stock-adjustment-document-card address span{
  display:block
}

body.app-ui .stock-adjustment-document-card address strong{
  color:var(--text);
  font-size:14px
}

body.app-ui .stock-adjustment-document-card dl{
  margin:7px 0 0
}

body.app-ui .stock-adjustment-document-card dl>div{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:7px 0
}

body.app-ui .stock-adjustment-document-card dt{
  color:var(--text-3);
  font-size:12.5px
}

body.app-ui .stock-adjustment-document-card dd{
  margin:0;
  color:var(--text);
  font-size:12.5px;
  font-weight:800;
  text-align:right
}

body.app-ui .stock-adjustment-document-lines,body.app-ui .stock-adjustment-document-activities{
  overflow:hidden;
  margin-top:14px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface)
}

body.app-ui .stock-adjustment-document-section-head{
  display:flex;
  padding:12px 15px;
  border-bottom:1px solid var(--border-2);
  background:var(--surface-2)
}

body.app-ui .stock-adjustment-document-section-head>div{
  display:flex;
  align-items:center;
  gap:10px
}

body.app-ui .stock-adjustment-document-section-head strong,body.app-ui .stock-adjustment-document-section-head small{
  display:block
}

body.app-ui .stock-adjustment-document-section-head strong{
  font-size:14px
}

body.app-ui .stock-adjustment-document-section-head small{
  margin-top:2px;
  color:var(--text-3);
  font-size:11.5px
}

body.app-ui .stock-adjustment-document-lines table{
  width:100%;
  min-width:760px;
  border-collapse:collapse
}

body.app-ui .stock-adjustment-document-lines th{
  padding:11px 14px;
  background:var(--surface);
  color:var(--text-3);
  font-size:11px;
  font-weight:850;
  letter-spacing:.045em;
  text-align:left;
  text-transform:uppercase
}

body.app-ui .stock-adjustment-document-lines td{
  padding:13px 14px;
  border-top:1px solid var(--border-2);
  color:var(--text-2);
  font-size:13px
}

body.app-ui .stock-adjustment-document-lines td strong,body.app-ui .stock-adjustment-document-lines td small{
  display:block
}

body.app-ui .stock-adjustment-document-lines td strong{
  color:var(--text)
}

body.app-ui .stock-adjustment-document-lines td small{
  margin-top:2px;
  color:var(--text-3);
  font-size:11.5px
}

body.app-ui .stock-adjustment-document-empty{
  height:120px;
  text-align:center
}

body.app-ui .stock-adjustment-document-lower{
  display:grid;
  grid-template-columns:1fr 390px;
  gap:14px;
  margin-top:14px
}

body.app-ui .stock-adjustment-document-notes p{
  margin:8px 0 0;
  color:var(--text-2);
  font-size:13px;
  line-height:1.65
}

body.app-ui .stock-adjustment-document-totals>div{
  display:flex;
  justify-content:space-between;
  padding:10px 0;
  border-bottom:1px solid var(--border-2);
  color:var(--text-2);
  font-size:12.5px
}

body.app-ui .stock-adjustment-document-totals>div:last-child{
  border:0;
  color:var(--danger);
  font-weight:850
}

body.app-ui .stock-adjustment-document-totals>div:last-child strong{
  font-size:18px
}

body.app-ui .stock-adjustment-document-activities .table{
  width:100%;
  margin:0
}

body.app-ui .stock-adjustment-document-activities .table th,body.app-ui .stock-adjustment-document-activities .table td{
  padding:11px 14px!important;
  font-size:12.5px;
  vertical-align:top!important
}

body.app-ui .stock-adjustment-document-barcode{
  text-align:center;
  padding:18px 0 2px
}

body.app-ui .stock-adjustment-document-barcode img{
  max-width:100%
}

@media(max-width:1020px){
  body.app-ui .stock-adjustment-overview{
    grid-template-columns:1fr 1fr
  }

  body.app-ui .stock-adjustment-overview-intro{
    grid-column:1/-1;
    border-bottom:1px solid var(--border-2)
  }

  body.app-ui .stock-adjustment-detail-grid{
    grid-template-columns:1fr 1fr
  }

  body.app-ui .stock-adjustment-review-layout,body.app-ui .stock-adjustment-document-lower{
    grid-template-columns:1fr
  }
}

@media(max-width:720px){
  body.app-ui .stock-adjustment-overview,body.app-ui .stock-adjustment-steps,body.app-ui .stock-adjustment-filter-grid,body.app-ui .stock-adjustment-detail-grid,body.app-ui .stock-adjustment-review-fields,body.app-ui .stock-adjustment-document-context{
    grid-template-columns:1fr
  }

  body.app-ui .adjustment-state-card{
    border-right:0;
    border-bottom:1px solid var(--border-2)
  }

  body.app-ui .stock-adjustment-ledger-summary{
    flex-direction:column
  }

  body.app-ui .stock-adjustment-ledger-summary>div{
    width:100%;
    border-left:0;
    border-top:1px solid var(--border-2)
  }

  body.app-ui .stock-adjustment-detail-dialog{
    width:calc(100vw - 12px);
    margin:6px auto
  }

  body.app-ui .stock-adjustment-detail-body{
    padding:12px
  }

  body.app-ui .stock-adjustment-detail-footer>span{
    display:none
  }

  body.app-ui .stock-adjustment-detail-footer>div{
    width:100%
  }

  body.app-ui .stock-adjustment-detail-footer .btn-ghost,body.app-ui .stock-adjustment-detail-footer .btn-primary{
    flex:1
  }
}

/* Payment accounts */

body.app-ui .payment-accounts-page{
  max-width:1500px;
  padding-bottom:56px
}

body.app-ui .payment-account-link-alert{
  display:grid;
  grid-template-columns:42px 1fr auto;
  gap:12px;
  align-items:center;
  margin:18px 0;
  padding:13px 15px;
  border:1px solid color-mix(in srgb,var(--warn) 35%,var(--border));
  border-radius:12px;
  background:var(--warn-weak);
  box-shadow:var(--shadow-sm)
}

body.app-ui .payment-account-link-alert>span{
  display:grid;
  width:40px;
  height:40px;
  place-items:center;
  border-radius:10px;
  background:var(--surface);
  color:#a76509
}

body.app-ui .payment-account-link-alert strong{
  display:block;
  color:#78450a;
  font-size:14px
}

body.app-ui .payment-account-link-alert p{
  margin:3px 0 0;
  color:var(--text-2);
  font-size:12.5px
}

body.app-ui .payment-account-link-alert a{
  white-space:nowrap
}

body.app-ui .payment-account-shell{
  margin-top:18px;
  border:1px solid var(--border);
  border-radius:15px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

body.app-ui .payment-account-tabs{
  display:flex;
  gap:4px;
  padding:6px;
  border-bottom:1px solid var(--border-2);
  border-radius:15px 15px 0 0;
  background:var(--surface-2)
}

body.app-ui .payment-account-tabs a{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 15px;
  border:1px solid transparent;
  border-radius:9px;
  color:var(--text-2);
  font-size:13.5px;
  font-weight:750;
  text-decoration:none
}

body.app-ui .payment-account-tabs a.active{
  border-color:var(--border);
  background:var(--surface);
  color:var(--text);
  box-shadow:var(--shadow-sm)
}

body.app-ui .payment-account-tabs a.active svg{
  color:var(--brand)
}

body.app-ui .payment-account-shell>.tab-content{
  padding:16px
}

body.app-ui .payment-account-overview{
  display:grid;
  grid-template-columns:1fr auto auto;
  gap:18px;
  align-items:center;
  min-height:84px;
  padding:13px 15px;
  border:1px solid var(--border);
  border-radius:12px;
  background:linear-gradient(100deg,var(--surface),var(--surface-2))
}

body.app-ui .payment-account-overview>div:first-child{
  display:flex;
  align-items:center;
  gap:11px
}

body.app-ui .payment-account-overview>div:first-child>span{
  display:grid;
  width:42px;
  height:42px;
  place-items:center;
  border-radius:11px;
  background:var(--brand-weak);
  color:var(--brand)
}

body.app-ui .payment-account-overview small,body.app-ui .payment-account-overview strong{
  display:block
}

body.app-ui .payment-account-overview small{
  color:var(--text-3);
  font-size:10.5px;
  font-weight:850;
  letter-spacing:.06em
}

body.app-ui .payment-account-overview strong{
  margin-top:2px;
  font-size:15px
}

body.app-ui .payment-account-overview p{
  margin:2px 0 0;
  color:var(--text-3);
  font-size:12px
}

body.app-ui .payment-account-overview>div:nth-child(2){
  min-width:150px;
  padding:0 18px;
  border-left:1px solid var(--border)
}

body.app-ui .payment-account-overview>div:nth-child(2) strong{
  color:var(--brand);
  font-size:18px;
  text-align:right
}

body.app-ui .payment-account-type-overview{
  grid-template-columns:1fr auto
}

body.app-ui .payment-account-filters{
  display:grid;
  grid-template-columns:1fr minmax(400px,540px);
  gap:18px;
  align-items:end;
  margin-top:14px;
  padding:13px 15px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface)
}

body.app-ui .payment-account-filters>div:first-child{
  display:flex;
  align-items:center;
  gap:10px;
  align-self:center
}

body.app-ui .payment-account-filters>div:first-child>span{
  display:grid;
  width:36px;
  height:36px;
  place-items:center;
  border-radius:9px;
  background:var(--surface-2)
}

body.app-ui .payment-account-filters strong{
  display:block;
  font-size:13.5px
}

body.app-ui .payment-account-filters p{
  margin:2px 0 0;
  color:var(--text-3);
  font-size:12px
}

body.app-ui .payment-account-filter-actions{
  display:grid;
  grid-template-columns:minmax(220px,1fr) auto;
  gap:10px;
  align-items:end
}

body.app-ui .payment-account-view-switch{
  display:flex;
  height:42px;
  padding:3px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface-2)
}

body.app-ui .payment-account-view-switch button{
  display:flex;
  align-items:center;
  gap:6px;
  padding:0 10px;
  border:0;
  border-radius:7px;
  background:transparent;
  color:var(--text-3);
  font-size:12px;
  font-weight:750
}

body.app-ui .payment-account-view-switch button.is-active{
  background:var(--surface);
  color:var(--brand);
  box-shadow:var(--shadow-sm)
}

body.app-ui .payment-account-list-card{
  margin-top:14px
}

body.app-ui .payment-account-table-stage{
  overflow-x:auto;
  overflow-y:visible
}

body.app-ui .payment-account-table{
  min-width:1240px
}

body.app-ui .payment-account-table th{
  font-size:10.5px!important
}

body.app-ui .payment-account-table td{
  padding:13px 10px!important;
  color:var(--text-2);
  font-size:12.5px;
  vertical-align:middle!important
}

body.app-ui .payment-account-table td:first-child{
  color:var(--text);
  font-size:13px;
  font-weight:750
}

body.app-ui .payment-account-table .balance{
  color:var(--text);
  font-size:13.5px;
  font-weight:850
}

body.app-ui .payment-account-summary{
  display:flex;
  justify-content:flex-end;
  gap:28px;
  padding:13px 17px;
  border-top:1px solid var(--border-2);
  background:var(--surface-2);
  font-size:12.5px
}

body.app-ui .payment-account-summary strong{
  min-width:110px;
  color:var(--brand);
  font-size:14px;
  text-align:right
}

body.app-ui .payment-account-card-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  padding:16px;
  background:var(--surface-2)
}

body.app-ui .payment-account-card{
  display:flex;
  min-width:0;
  flex-direction:column;
  overflow:visible;
  border:1px solid var(--border);
  border-radius:13px;
  background:var(--surface);
  box-shadow:0 4px 16px rgba(20,45,31,.045);
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease
}

body.app-ui .payment-account-card:hover{
  border-color:color-mix(in srgb,var(--brand) 25%,var(--border));
  box-shadow:0 10px 28px rgba(20,45,31,.09);
  transform:translateY(-1px)
}

body.app-ui .payment-account-card>header{
  display:grid;
  grid-template-columns:42px minmax(0,1fr) auto;
  gap:11px;
  align-items:center;
  padding:15px 15px 12px
}

body.app-ui .payment-account-card-icon{
  display:grid;
  width:42px;
  height:42px;
  place-items:center;
  border-radius:11px;
  background:var(--brand-weak);
  color:var(--brand)
}

body.app-ui .payment-account-card-icon svg{
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-width:1.8
}

body.app-ui .payment-account-card header div{
  min-width:0
}

body.app-ui .payment-account-card header strong,body.app-ui .payment-account-card header div>span{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

body.app-ui .payment-account-card header strong{
  color:var(--text);
  font-size:15px;
  font-weight:850
}

body.app-ui .payment-account-card header div>span{
  margin-top:3px;
  color:var(--text-3);
  font-size:12px
}

body.app-ui .payment-account-type-badge{
  max-width:115px;
  overflow:hidden;
  padding:5px 8px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--surface-2);
  color:var(--text-2);
  font-size:10.5px;
  font-weight:800;
  text-overflow:ellipsis;
  white-space:nowrap
}

body.app-ui .payment-account-card-balance{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin:0 15px;
  padding:13px 14px;
  border-radius:10px;
  background:var(--surface-2)
}

body.app-ui .payment-account-card-balance span{
  color:var(--text-3);
  font-size:12px;
  font-weight:650
}

body.app-ui .payment-account-card-balance strong{
  color:var(--text);
  font-size:21px;
  font-weight:900;
  letter-spacing:-.025em
}

body.app-ui .payment-account-card.is-positive .payment-account-card-balance{
  background:var(--brand-weak)
}

body.app-ui .payment-account-card.is-positive .payment-account-card-balance strong{
  color:var(--brand)
}

body.app-ui .payment-account-card.is-negative .payment-account-card-balance{
  background:var(--danger-weak)
}

body.app-ui .payment-account-card.is-negative .payment-account-card-balance strong{
  color:var(--danger)
}

body.app-ui .payment-account-card dl{
  display:grid;
  gap:0;
  margin:11px 15px 14px
}

body.app-ui .payment-account-card dl>div{
  display:grid;
  grid-template-columns:98px minmax(0,1fr);
  gap:10px;
  padding:7px 0;
  border-bottom:1px solid var(--border-2)
}

body.app-ui .payment-account-card dl>div:last-child{
  border-bottom:0
}

body.app-ui .payment-account-card dt{
  color:var(--text-3);
  font-size:11.5px;
  font-weight:650
}

body.app-ui .payment-account-card dd{
  overflow:hidden;
  margin:0;
  color:var(--text-2);
  font-size:12px;
  font-weight:700;
  text-align:right;
  text-overflow:ellipsis;
  white-space:nowrap
}

body.app-ui .payment-account-card>footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:auto;
  padding:11px 15px;
  border-top:1px solid var(--border-2);
  background:color-mix(in srgb,var(--surface-2) 62%,transparent);
  border-radius:0 0 13px 13px
}

body.app-ui .payment-account-book-link{
  display:flex;
  align-items:center;
  gap:7px;
  color:var(--brand);
  font-size:12.5px;
  font-weight:800;
  text-decoration:none
}

body.app-ui .payment-account-book-link svg{
  width:16px;
  height:16px;
  fill:none;
  stroke:currentColor;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-width:1.8
}

body.app-ui .payment-account-card footer .payment-account-row-actions>a:first-child{
  display:none
}

body.app-ui .payment-account-card-empty{
  grid-column:1/-1;
  padding:58px 20px;
  text-align:center;
  color:var(--text-3)
}

body.app-ui .payment-account-card-empty span{
  display:grid;
  width:46px;
  height:46px;
  margin:0 auto 10px;
  place-items:center;
  border-radius:12px;
  background:var(--surface);
  color:var(--text-3);
  box-shadow:var(--shadow-sm)
}

body.app-ui .payment-account-card-empty svg{
  width:23px;
  height:23px;
  fill:none;
  stroke:currentColor;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-width:1.8
}

body.app-ui .payment-account-card-empty strong{
  display:block;
  color:var(--text);
  font-size:14px
}

body.app-ui .payment-account-card-empty p{
  margin:4px 0 0;
  font-size:12.5px
}

body.app-ui .payment-account-list-card.is-card-view .payment-account-table-stage{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap
}

body.app-ui .payment-account-list-card.is-list-view .payment-account-card-grid{
  display:none
}

body.app-ui .payment-account-row-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:7px;
  white-space:nowrap
}

body.app-ui .payment-account-row-actions .act,body.app-ui .payment-account-type-row .act{
  display:inline-grid;
  width:34px;
  height:34px;
  padding:0;
  place-items:center;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface);
  color:var(--text-2)
}

body.app-ui .payment-account-row-actions .act svg,body.app-ui .payment-account-action-menu svg{
  width:16px;
  height:16px;
  fill:none;
  stroke:currentColor;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-width:2
}

body.app-ui .payment-account-row-actions .act-edit{
  border-color:color-mix(in srgb,var(--brand) 30%,var(--border));
  background:var(--brand-weak);
  color:var(--brand)
}

body.app-ui .payment-account-action-group{
  position:relative
}

body.app-ui .payment-account-action-menu{
  min-width:205px;
  padding:6px;
  border:1px solid var(--border);
  border-radius:11px;
  box-shadow:0 18px 40px -18px rgba(16,30,22,.45)
}

body.app-ui .payment-account-action-menu>a,body.app-ui .payment-account-action-menu>button{
  display:flex;
  width:100%;
  align-items:center;
  gap:10px;
  padding:9px 10px;
  border:0;
  border-radius:7px;
  background:transparent;
  color:var(--text-2);
  font-size:12.5px;
  font-weight:650;
  text-align:left;
  text-decoration:none
}

body.app-ui .payment-account-action-menu>a:hover,body.app-ui .payment-account-action-menu>button:hover{
  background:var(--surface-2)
}

body.app-ui .payment-account-action-menu .is-danger{
  color:var(--danger)
}

body.app-ui .payment-account-menu-divider{
  height:1px;
  margin:5px;
  background:var(--border-2)
}

body.app-ui .payment-account-types-card{
  overflow:hidden;
  margin-top:14px;
  border:1px solid var(--border);
  border-radius:12px
}

body.app-ui .payment-account-types-head{
  display:flex;
  justify-content:space-between;
  padding:13px 16px;
  border-bottom:1px solid var(--border-2);
  background:var(--surface-2)
}

body.app-ui .payment-account-types-head strong{
  font-size:14px
}

body.app-ui .payment-account-types-head span{
  color:var(--text-3);
  font-size:12px
}

body.app-ui .payment-account-type-group+.payment-account-type-group{
  border-top:1px solid var(--border)
}

body.app-ui .payment-account-type-row{
  display:grid;
  grid-template-columns:38px 1fr auto;
  gap:10px;
  align-items:center;
  padding:12px 15px
}

body.app-ui .payment-account-type-row.is-child{
  padding-left:55px;
  border-top:1px solid var(--border-2);
  background:var(--surface-2)
}

body.app-ui .payment-account-type-icon{
  display:grid;
  width:36px;
  height:36px;
  place-items:center;
  border-radius:9px;
  background:var(--brand-weak);
  color:var(--brand)
}

body.app-ui .payment-account-type-row strong,body.app-ui .payment-account-type-row small{
  display:block
}

body.app-ui .payment-account-type-row strong{
  font-size:13.5px
}

body.app-ui .payment-account-type-row small{
  margin-top:2px;
  color:var(--text-3);
  font-size:11.5px
}

body.app-ui .payment-account-type-row form{
  display:flex;
  gap:7px
}

body.app-ui .payment-account-type-row .act-danger{
  color:var(--danger)
}

body.app-ui .payment-account-types-empty{
  padding:55px;
  text-align:center;
  color:var(--text-3)
}

body.app-ui .payment-account-dialog{
  width:min(900px,calc(100vw - 28px));
  max-width:none;
  margin:22px auto
}

body.app-ui .payment-account-dialog-sm{
  width:min(760px,calc(100vw - 28px))
}

body.app-ui .payment-account-type-dialog{
  width:min(600px,calc(100vw - 28px))
}

body.app-ui .payment-account-form-modal{
  overflow:visible;
  border:1px solid var(--border);
  border-radius:18px!important;
  background:var(--surface);
  background-clip:padding-box;
  box-shadow:0 24px 70px rgba(12,28,19,.28);
  isolation:isolate
}

body.app-ui .payment-account-modal-header,body.app-ui .payment-account-modal-footer{
  position:static!important;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 17px;
  border-color:var(--border-2);
  background:var(--surface)
}

body.app-ui .payment-account-modal-header{
  border-radius:17px 17px 0 0
}

body.app-ui .payment-account-modal-footer{
  border-radius:0 0 17px 17px
}

body.app-ui .payment-account-modal-title{
  display:flex;
  align-items:center;
  gap:11px
}

body.app-ui .payment-account-modal-title>span{
  display:grid;
  width:40px;
  height:40px;
  place-items:center;
  border-radius:10px;
  background:var(--brand-weak);
  color:var(--brand)
}

body.app-ui .payment-account-modal-title h3{
  margin:0;
  font-size:18px;
  font-weight:850
}

body.app-ui .payment-account-modal-title p{
  margin:3px 0 0;
  color:var(--text-3);
  font-size:12px
}

body.app-ui .payment-account-modal-body{
  display:grid;
  gap:14px;
  padding:17px;
  background:var(--surface-2)
}

body.app-ui .payment-account-form-section{
  display:grid;
  gap:14px;
  padding:15px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface)
}

body.app-ui .payment-account-form-heading{
  display:flex;
  align-items:center;
  gap:9px;
  padding-bottom:12px;
  border-bottom:1px solid var(--border-2)
}

body.app-ui .payment-account-form-heading>span{
  display:grid;
  width:34px;
  height:34px;
  place-items:center;
  border-radius:9px;
  background:var(--brand-weak);
  color:var(--brand)
}

body.app-ui .payment-account-form-heading>div{
  min-width:0;
  flex:1
}

body.app-ui .payment-account-form-heading strong{
  display:block;
  font-size:14px
}

body.app-ui .payment-account-form-heading p{
  margin:2px 0 0;
  color:var(--text-3);
  font-size:11.5px
}

body.app-ui .payment-account-form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px
}

body.app-ui .payment-account-detail-heading{
  align-items:center
}

body.app-ui .payment-account-add-detail{
  display:inline-flex;
  height:36px;
  align-items:center;
  gap:6px;
  padding:0 11px;
  border:1px solid color-mix(in srgb,var(--brand) 30%,var(--border));
  border-radius:9px;
  background:var(--brand-weak);
  color:var(--brand);
  font-size:12px;
  font-weight:800;
  white-space:nowrap
}

body.app-ui .payment-account-detail-fields{
  display:grid;
  gap:9px
}

body.app-ui .payment-account-detail-row{
  display:grid;
  grid-template-columns:.8fr 1.2fr 38px;
  gap:9px;
  align-items:center
}

body.app-ui .payment-account-remove-detail{
  display:grid;
  width:38px;
  height:38px;
  padding:0;
  place-items:center;
  border:1px solid color-mix(in srgb,var(--danger) 25%,var(--border));
  border-radius:9px;
  background:var(--surface);
  color:var(--danger)
}

body.app-ui .payment-account-remove-detail:hover{
  background:var(--danger-weak)
}

body.app-ui .payment-account-remove-detail svg{
  width:16px;
  height:16px;
  fill:none;
  stroke:currentColor;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-width:2
}

body.app-ui .payment-account-note{
  min-height:96px;
  resize:vertical
}

body.app-ui .payment-account-money{
  display:flex
}

body.app-ui .payment-account-money>span{
  display:grid;
  width:44px;
  place-items:center;
  border:1px solid var(--border);
  border-right:0;
  border-radius:10px 0 0 10px;
  background:var(--surface-2);
  font-weight:750
}

body.app-ui .payment-account-money .finput{
  border-radius:0 10px 10px 0;
  text-align:right
}

body.app-ui .payment-account-modal-footer>span{
  color:var(--text-3);
  font-size:11.5px
}

body.app-ui .payment-account-modal-footer>div{
  display:flex;
  gap:9px
}

body.app-ui .payment-account-modal-footer .btn-ghost,body.app-ui .payment-account-modal-footer .btn-primary{
  min-width:110px;
  height:42px;
  justify-content:center;
  font-size:13px
}

body.app-ui .payment-account-transfer-flow{
  display:grid;
  grid-template-columns:1fr 42px 1fr;
  gap:10px;
  align-items:end
}

body.app-ui .payment-account-transfer-flow>span{
  display:grid;
  height:42px;
  place-items:center;
  color:var(--brand)
}

body.app-ui .payment-account-selected{
  display:flex;
  align-items:center;
  gap:11px;
  padding:13px 15px;
  border:1px solid color-mix(in srgb,var(--brand) 25%,var(--border));
  border-radius:12px;
  background:var(--brand-weak)
}

@media(max-width:1180px){
  body.app-ui .payment-account-card-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}

@media(max-width:900px){
  body.app-ui .payment-account-filters{
    grid-template-columns:1fr
  }

  body.app-ui .payment-account-filter-actions{
    grid-template-columns:1fr auto
  }
}

@media(max-width:760px){
  body.app-ui .payment-account-link-alert,body.app-ui .payment-account-overview,body.app-ui .payment-account-filters,body.app-ui .payment-account-form-grid,body.app-ui .payment-account-transfer-flow{
    grid-template-columns:1fr
  }

  body.app-ui .payment-account-card-grid{
    grid-template-columns:1fr;
    padding:10px
  }

  body.app-ui .payment-account-filter-actions{
    grid-template-columns:1fr
  }

  body.app-ui .payment-account-view-switch{
    width:100%
  }

  body.app-ui .payment-account-view-switch button{
    flex:1;
    justify-content:center
  }

  body.app-ui .payment-account-detail-heading{
    align-items:flex-start;
    flex-wrap:wrap
  }

  body.app-ui .payment-account-add-detail{
    margin-left:43px
  }

  body.app-ui .payment-account-detail-row{
    grid-template-columns:1fr 42px
  }

  body.app-ui .payment-account-detail-row input:first-child{
    grid-column:1/-1
  }

  body.app-ui .payment-account-modal-footer>span{
    display:none
  }

  body.app-ui .payment-account-modal-footer>div{
    width:100%
  }

  body.app-ui .payment-account-modal-footer .btn-ghost,body.app-ui .payment-account-modal-footer .btn-primary{
    flex:1
  }
}

body.app-ui .account-book-page{
  max-width:1500px;
  padding-bottom:56px
}

body.app-ui .account-book-overview{
  display:grid;
  grid-template-columns:1.2fr 1fr 240px;
  gap:1px;
  overflow:hidden;
  margin-top:18px;
  border:1px solid var(--border);
  border-radius:13px;
  background:var(--border-2);
  box-shadow:var(--shadow-sm)
}

body.app-ui .account-book-overview>div{
  min-height:92px;
  padding:16px;
  background:var(--surface)
}

body.app-ui .account-book-identity{
  display:flex;
  align-items:center;
  gap:12px
}

body.app-ui .account-book-identity>span{
  display:grid;
  width:44px;
  height:44px;
  place-items:center;
  border-radius:11px;
  background:var(--brand-weak);
  color:var(--brand)
}

body.app-ui .account-book-overview small,body.app-ui .account-book-overview strong,body.app-ui .account-book-overview p{
  display:block
}

body.app-ui .account-book-overview small{
  color:var(--text-3);
  font-size:10.5px;
  font-weight:850;
  letter-spacing:.06em
}

body.app-ui .account-book-overview strong{
  margin-top:6px;
  font-size:14px
}

body.app-ui .account-book-overview p{
  margin:2px 0 0;
  color:var(--text-3);
  font-size:12px
}

body.app-ui .account-book-balance strong{
  color:var(--brand);
  font-size:21px
}

body.app-ui .account-book-filters{
  display:grid;
  grid-template-columns:1fr 360px 280px;
  gap:14px;
  align-items:end;
  margin-top:14px;
  padding:14px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

body.app-ui .account-book-filters>div:first-child{
  display:flex;
  align-items:center;
  gap:10px;
  align-self:center
}

body.app-ui .account-book-filters>div:first-child>span{
  display:grid;
  width:36px;
  height:36px;
  place-items:center;
  border-radius:9px;
  background:var(--surface-2)
}

body.app-ui .account-book-filters strong{
  display:block;
  font-size:13.5px
}

body.app-ui .account-book-filters p{
  margin:2px 0 0;
  color:var(--text-3);
  font-size:12px
}

body.app-ui .account-book-list-card{
  margin-top:14px
}

body.app-ui .account-book-table-stage{
  overflow-x:auto;
  overflow-y:visible
}

body.app-ui .account-book-table{
  min-width:1320px
}

body.app-ui .account-book-table td{
  padding:13px 11px!important;
  font-size:12.5px;
  vertical-align:middle!important
}

body.app-ui .account-book-table th{
  font-size:10.5px!important
}

body.app-ui .account-book-table .balance{
  font-weight:850
}

body.app-ui .account-book-summary{
  display:flex;
  justify-content:flex-end;
  border-top:1px solid var(--border-2);
  background:var(--surface-2)
}

body.app-ui .account-book-summary>div{
  display:flex;
  min-width:240px;
  justify-content:space-between;
  gap:20px;
  padding:13px 16px;
  border-left:1px solid var(--border-2);
  font-size:12.5px
}

body.app-ui .account-book-summary strong{
  font-size:14px
}

body.app-ui .payment-account-list-card,body.app-ui .account-book-list-card,body.app-ui .payment-account-list-card .data-table-content,body.app-ui .account-book-list-card .data-table-content{
  overflow:visible
}

@media(max-width:900px){
  body.app-ui .account-book-overview,body.app-ui .account-book-filters{
    grid-template-columns:1fr
  }

  body.app-ui .account-book-summary{
    flex-direction:column
  }

  body.app-ui .account-book-summary>div{
    width:100%;
    border-left:0;
    border-top:1px solid var(--border-2)
  }
}

/* Account book readability and transaction actions */

body.app-ui .account-book-overview small{
  font-size:11.5px
}

body.app-ui .account-book-overview strong{
  font-size:15px
}

body.app-ui .account-book-overview p,body.app-ui .account-book-filters p{
  font-size:13px
}

body.app-ui .account-book-table td{
  font-size:13.5px;
  line-height:1.5
}

body.app-ui .account-book-table th{
  font-size:11.5px!important;
  letter-spacing:.035em
}

body.app-ui .account-book-row-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  white-space:nowrap
}

body.app-ui .account-book-row-actions .act{
  display:inline-grid;
  width:34px;
  height:34px;
  padding:0;
  place-items:center;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface);
  color:var(--text-2)
}

body.app-ui .account-book-row-actions .act:hover{
  border-color:color-mix(in srgb,var(--brand) 35%,var(--border));
  background:var(--brand-weak);
  color:var(--brand)
}

body.app-ui .account-book-row-actions .act.edit{
  border-color:color-mix(in srgb,var(--brand) 28%,var(--border));
  background:var(--brand-weak);
  color:var(--brand)
}

body.app-ui .account-book-row-actions .act.danger{
  border-color:color-mix(in srgb,var(--danger) 24%,var(--border));
  color:var(--danger)
}

body.app-ui .account-book-row-actions .act.danger:hover{
  background:var(--danger-weak)
}

body.app-ui .account-book-row-actions svg{
  width:16px;
  height:16px;
  fill:none;
  stroke:currentColor;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-width:2
}

body.app-ui .account-book-no-actions{
  color:var(--text-3)
}

body.app-ui .payment-account-fixed-field{
  display:grid;
  grid-template-columns:36px minmax(0,1fr);
  min-height:42px;
  align-items:center;
  -moz-column-gap:10px;
       column-gap:10px;
  padding:7px 11px;
  border:1px solid color-mix(in srgb,var(--brand) 24%,var(--border));
  border-radius:10px;
  background:var(--brand-weak)
}

body.app-ui .payment-account-fixed-field>span{
  display:grid;
  width:32px;
  height:32px;
  grid-row:1/3;
  place-items:center;
  border-radius:8px;
  background:var(--surface);
  color:var(--brand)
}

body.app-ui .payment-account-fixed-field strong{
  overflow:hidden;
  color:var(--text);
  font-size:13.5px;
  text-overflow:ellipsis;
  white-space:nowrap
}

body.app-ui .payment-account-fixed-field small{
  overflow:hidden;
  color:var(--text-3);
  font-size:11.5px;
  text-overflow:ellipsis;
  white-space:nowrap
}

/* Balance sheet — readable financial-position workspace */

body.app-ui .balance-sheet-page{
  max-width:1500px;
  padding-bottom:64px
}

body.app-ui .balance-sheet-overview{
  display:grid;
  grid-template-columns:minmax(300px,1.45fr) repeat(3,minmax(170px,.7fr));
  gap:1px;
  overflow:hidden;
  margin-top:18px;
  border:1px solid var(--border);
  border-radius:13px;
  background:var(--border-2);
  box-shadow:var(--shadow-sm)
}

body.app-ui .balance-sheet-overview>div{
  min-height:98px;
  padding:16px;
  background:var(--surface)
}

body.app-ui .balance-sheet-overview-intro{
  display:flex;
  align-items:center;
  gap:13px
}

body.app-ui .balance-sheet-overview-intro>span{
  display:grid;
  width:44px;
  height:44px;
  flex:none;
  place-items:center;
  border-radius:11px;
  background:var(--brand-weak);
  color:var(--brand)
}

body.app-ui .balance-sheet-overview small,body.app-ui .balance-sheet-overview strong{
  display:block
}

body.app-ui .balance-sheet-overview small{
  color:var(--text-3);
  font-size:11px;
  font-weight:850;
  letter-spacing:.055em;
  text-transform:uppercase
}

body.app-ui .balance-sheet-overview-intro strong{
  margin-top:3px;
  color:var(--text);
  font-size:15px
}

body.app-ui .balance-sheet-overview-intro p{
  margin:3px 0 0;
  color:var(--text-3);
  font-size:12.5px
}

body.app-ui .balance-sheet-overview-stat{
  display:flex;
  flex-direction:column;
  justify-content:center
}

body.app-ui .balance-sheet-overview-stat strong{
  margin-top:8px;
  color:var(--text);
  font-size:21px;
  font-weight:900;
  letter-spacing:-.025em
}

body.app-ui .balance-sheet-overview-stat.is-assets strong{
  color:var(--brand)
}

body.app-ui .balance-sheet-overview-stat.is-liabilities strong{
  color:#b96809
}

body.app-ui .balance-sheet-overview-stat.is-position{
  background:linear-gradient(145deg,var(--brand-weak),var(--surface))
}

body.app-ui .balance-sheet-filters{
  display:grid;
  grid-template-columns:minmax(280px,1fr) minmax(230px,330px) minmax(220px,280px) auto;
  gap:14px;
  align-items:end;
  margin-top:14px;
  padding:14px 15px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

body.app-ui .balance-sheet-filter-copy{
  display:flex;
  align-items:center;
  gap:10px;
  align-self:center
}

body.app-ui .balance-sheet-filter-copy>span{
  display:grid;
  width:36px;
  height:36px;
  flex:none;
  place-items:center;
  border-radius:9px;
  background:var(--surface-2);
  color:var(--text-2)
}

body.app-ui .balance-sheet-filter-copy strong{
  display:block;
  color:var(--text);
  font-size:14px
}

body.app-ui .balance-sheet-filter-copy p{
  margin:2px 0 0;
  color:var(--text-3);
  font-size:12.5px
}

body.app-ui .balance-sheet-filters .btn-ghost{
  height:42px
}

body.app-ui .balance-sheet-document{
  overflow:hidden;
  margin-top:14px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

body.app-ui .balance-sheet-document [hidden]{
  display:none!important
}

body.app-ui .balance-sheet-document-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
  padding:21px 22px;
  border-bottom:1px solid var(--border-2);
  background:linear-gradient(115deg,var(--surface) 55%,var(--surface-2))
}

body.app-ui .balance-sheet-document-head small{
  color:var(--brand);
  font-size:10.5px;
  font-weight:900;
  letter-spacing:.09em
}

body.app-ui .balance-sheet-document-head h2{
  margin:4px 0 0;
  color:var(--text);
  font-size:20px;
  font-weight:900
}

body.app-ui .balance-sheet-document-head p{
  margin:3px 0 0;
  color:var(--text-3);
  font-size:12.5px
}

body.app-ui .balance-sheet-document-head dl{
  display:grid;
  min-width:300px;
  margin:0;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface)
}

body.app-ui .balance-sheet-document-head dl>div{
  display:grid;
  grid-template-columns:90px minmax(0,1fr);
  gap:14px;
  padding:8px 11px;
  border-bottom:1px solid var(--border-2)
}

body.app-ui .balance-sheet-document-head dl>div:last-child{
  border-bottom:0
}

body.app-ui .balance-sheet-document-head dt{
  color:var(--text-3);
  font-size:11.5px;
  font-weight:650
}

body.app-ui .balance-sheet-document-head dd{
  overflow:hidden;
  margin:0;
  color:var(--text);
  font-size:12.5px;
  font-weight:800;
  text-align:right;
  text-overflow:ellipsis;
  white-space:nowrap
}

body.app-ui .balance-sheet-loading{
  display:grid;
  min-height:360px;
  place-content:center;
  justify-items:center;
  gap:11px;
  color:var(--text-3)
}

body.app-ui .balance-sheet-loading span{
  width:28px;
  height:28px;
  border:3px solid var(--border);
  border-top-color:var(--brand);
  border-radius:50%;
  animation:spin .75s linear infinite
}

body.app-ui .balance-sheet-loading strong{
  font-size:13px
}

body.app-ui .balance-sheet-error{
  display:flex;
  align-items:center;
  gap:12px;
  margin:18px;
  padding:16px;
  border:1px solid color-mix(in srgb,var(--danger) 30%,var(--border));
  border-radius:11px;
  background:var(--danger-weak);
  color:var(--danger)
}

body.app-ui .balance-sheet-error>div{
  min-width:0;
  flex:1
}

body.app-ui .balance-sheet-error strong{
  display:block;
  font-size:13.5px
}

body.app-ui .balance-sheet-error p{
  margin:2px 0 0;
  font-size:12px
}

body.app-ui .balance-sheet-columns{
  display:grid;
  grid-template-columns:1.35fr 1fr;
  gap:16px;
  padding:18px;
  background:var(--surface-2)
}

body.app-ui .balance-sheet-panel{
  display:flex;
  min-width:0;
  flex-direction:column;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface)
}

body.app-ui .balance-sheet-panel>header{
  display:flex;
  align-items:center;
  gap:11px;
  padding:14px 15px;
  border-bottom:1px solid var(--border-2)
}

body.app-ui .balance-sheet-panel>header>span{
  display:grid;
  width:38px;
  height:38px;
  flex:none;
  place-items:center;
  border-radius:10px
}

body.app-ui .balance-sheet-panel.is-assets>header>span{
  background:var(--brand-weak);
  color:var(--brand)
}

body.app-ui .balance-sheet-panel.is-liabilities>header>span{
  background:#fff3df;
  color:#b96809
}

body.app-ui .balance-sheet-panel header small{
  display:block;
  color:var(--text-3);
  font-size:10px;
  font-weight:850;
  letter-spacing:.06em
}

body.app-ui .balance-sheet-panel h3{
  margin:2px 0 0;
  color:var(--text);
  font-size:16px;
  font-weight:900
}

body.app-ui .balance-sheet-line{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:11px 15px;
  border-bottom:1px solid var(--border-2)
}

body.app-ui .balance-sheet-line>div{
  min-width:0
}

body.app-ui .balance-sheet-line strong,body.app-ui .balance-sheet-line small{
  display:block
}

body.app-ui .balance-sheet-line strong{
  overflow-wrap:anywhere;
  color:var(--text-2);
  font-size:13px;
  font-weight:750
}

body.app-ui .balance-sheet-line small{
  margin-top:2px;
  color:var(--text-3);
  font-size:11.5px
}

body.app-ui .balance-sheet-line>span{
  flex:none;
  color:var(--text);
  font-size:13.5px;
  font-weight:850;
  font-variant-numeric:tabular-nums
}

body.app-ui .balance-sheet-line.is-primary{
  padding-top:13px;
  padding-bottom:13px
}

body.app-ui .balance-sheet-line.is-primary strong{
  color:var(--text);
  font-size:13.5px
}

body.app-ui .balance-sheet-group-title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:9px 15px;
  border-bottom:1px solid var(--border-2);
  background:var(--surface-2)
}

body.app-ui .balance-sheet-group-title span{
  color:var(--text-2);
  font-size:11px;
  font-weight:900;
  letter-spacing:.045em;
  text-transform:uppercase
}

body.app-ui .balance-sheet-group-title small{
  color:var(--text-3);
  font-size:11px
}

body.app-ui .balance-sheet-account-empty{
  padding:28px 16px;
  color:var(--text-3);
  font-size:12.5px;
  text-align:center
}

body.app-ui .balance-sheet-panel-empty{
  display:flex;
  align-items:flex-start;
  gap:11px;
  margin:auto 15px;
  padding:14px;
  border:1px dashed var(--border);
  border-radius:10px;
  background:var(--surface-2)
}

body.app-ui .balance-sheet-panel-empty>span{
  display:grid;
  width:34px;
  height:34px;
  flex:none;
  place-items:center;
  border-radius:9px;
  background:var(--surface);
  color:var(--text-3)
}

body.app-ui .balance-sheet-panel-empty strong{
  display:block;
  color:var(--text-2);
  font-size:12.5px
}

body.app-ui .balance-sheet-panel-empty p{
  margin:3px 0 0;
  color:var(--text-3);
  font-size:11.5px;
  line-height:1.45
}

body.app-ui .balance-sheet-panel>footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-top:auto;
  padding:14px 15px;
  border-top:1px solid var(--border);
  background:var(--surface-2)
}

body.app-ui .balance-sheet-panel>footer span{
  color:var(--text-2);
  font-size:13px;
  font-weight:850
}

body.app-ui .balance-sheet-panel>footer strong{
  color:var(--text);
  font-size:17px;
  font-weight:900;
  font-variant-numeric:tabular-nums
}

body.app-ui .balance-sheet-panel.is-assets>footer strong{
  color:var(--brand)
}

body.app-ui .balance-sheet-position{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:15px 20px;
  border-top:1px solid color-mix(in srgb,var(--brand) 25%,var(--border));
  background:var(--brand-weak)
}

body.app-ui .balance-sheet-position>div{
  display:flex;
  align-items:center;
  gap:11px
}

body.app-ui .balance-sheet-position>div>span{
  display:grid;
  width:38px;
  height:38px;
  place-items:center;
  border-radius:10px;
  background:var(--surface);
  color:var(--brand)
}

body.app-ui .balance-sheet-position small,body.app-ui .balance-sheet-position div strong{
  display:block
}

body.app-ui .balance-sheet-position small{
  color:var(--text-3);
  font-size:10px;
  font-weight:850;
  letter-spacing:.06em
}

body.app-ui .balance-sheet-position div strong{
  margin-top:2px;
  color:var(--text);
  font-size:13.5px
}

body.app-ui .balance-sheet-position>strong{
  color:var(--brand);
  font-size:21px;
  font-weight:900
}

body.app-ui .balance-sheet-document.is-negative-position .balance-sheet-position{
  border-color:color-mix(in srgb,var(--danger) 30%,var(--border));
  background:var(--danger-weak)
}

body.app-ui .balance-sheet-document.is-negative-position .balance-sheet-position>strong{
  color:var(--danger)
}

@media(max-width:1100px){
  body.app-ui .balance-sheet-overview{
    grid-template-columns:1fr 1fr
  }

  body.app-ui .balance-sheet-overview-intro{
    grid-column:1/-1
  }

  body.app-ui .balance-sheet-filters{
    grid-template-columns:1fr 1fr
  }

  body.app-ui .balance-sheet-filter-copy{
    grid-column:1/-1
  }

  body.app-ui .balance-sheet-columns{
    grid-template-columns:1fr
  }
}

@media(max-width:680px){
  body.app-ui .balance-sheet-overview,body.app-ui .balance-sheet-filters{
    grid-template-columns:1fr
  }

  body.app-ui .balance-sheet-overview-intro,body.app-ui .balance-sheet-filter-copy{
    grid-column:auto
  }

  body.app-ui .balance-sheet-document-head{
    flex-direction:column
  }

  body.app-ui .balance-sheet-document-head dl{
    width:100%;
    min-width:0
  }

  body.app-ui .balance-sheet-columns{
    padding:10px
  }

  .balance-sheet-position{
    align-items:flex-start!important
  }

  .balance-sheet-position>strong{
    font-size:18px!important
  }
}

@media print{
  .balance-sheet-print-document{
    display:block!important;
    width:100%!important;
    overflow:visible!important;
    border:0!important;
    border-radius:0!important;
    background:var(--surface)!important;
    color:#111!important;
    box-shadow:none!important
  }

  .balance-sheet-print-document *{
    -webkit-print-color-adjust:exact!important;
    print-color-adjust:exact!important
  }

  .balance-sheet-print-document .balance-sheet-document-head{
    padding:0 0 16px!important;
    border-bottom:2px solid #17201b!important;
    background:var(--surface)!important
  }

  .balance-sheet-print-document .balance-sheet-document-head h2{
    font-size:19px!important
  }

  .balance-sheet-print-document .balance-sheet-document-head dl{
    min-width:270px!important
  }

  .balance-sheet-print-document .balance-sheet-columns{
    grid-template-columns:1.35fr 1fr!important;
    gap:12px!important;
    padding:16px 0!important;
    background:var(--surface)!important
  }

  .balance-sheet-print-document .balance-sheet-panel{
    -moz-column-break-inside:avoid;
         break-inside:avoid;
    border-color:#d5ddd7!important
  }

  .balance-sheet-print-document .balance-sheet-line{
    padding:9px 11px!important
  }

  .balance-sheet-print-document .balance-sheet-panel-empty{
    margin:14px 11px!important
  }

  .balance-sheet-print-document .balance-sheet-position{
    -moz-column-break-inside:avoid;
         break-inside:avoid;
    border:1px solid #b8dfc4!important;
    border-radius:9px!important
  }
}

/* Trial balance — readable debit/credit checking workspace. */

body.app-ui .trial-balance-overview{
  display:grid;
  grid-template-columns:minmax(330px,1.35fr) repeat(3,minmax(170px,.75fr));
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

body.app-ui .trial-balance-overview>div{
  min-width:0;
  padding:17px 19px;
  border-right:1px solid var(--border-2)
}

body.app-ui .trial-balance-overview>div:last-child{
  border-right:0
}

body.app-ui .trial-balance-overview-intro{
  display:flex;
  align-items:center;
  gap:13px
}

body.app-ui .trial-balance-overview-intro>span{
  display:grid;
  width:46px;
  height:46px;
  flex:none;
  place-items:center;
  border-radius:12px;
  background:var(--brand-weak);
  color:var(--brand)
}

body.app-ui .trial-balance-overview small,body.app-ui .trial-balance-overview strong{
  display:block
}

body.app-ui .trial-balance-overview small{
  color:var(--text-3);
  font-size:11px;
  font-weight:850;
  letter-spacing:.055em;
  text-transform:uppercase
}

body.app-ui .trial-balance-overview-intro strong{
  margin-top:3px;
  color:var(--text);
  font-size:15px
}

body.app-ui .trial-balance-overview-intro p{
  margin:3px 0 0;
  color:var(--text-3);
  font-size:12.5px
}

body.app-ui .trial-balance-overview-stat{
  display:flex;
  flex-direction:column;
  justify-content:center
}

body.app-ui .trial-balance-overview-stat>strong{
  margin-top:7px;
  color:var(--text);
  font-size:20px;
  font-weight:900;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.02em
}

body.app-ui .trial-balance-overview-stat.is-debit>strong{
  color:var(--blue)
}

body.app-ui .trial-balance-overview-stat.is-credit>strong{
  color:#b96809
}

body.app-ui .trial-balance-overview-stat.is-difference{
  background:linear-gradient(145deg,var(--surface-2),var(--surface))
}

body.app-ui .trial-balance-overview-stat.is-difference>span{
  align-self:flex-start;
  margin-top:5px;
  padding:3px 8px;
  border-radius:999px;
  background:var(--warn-weak);
  color:#a65d08;
  font-size:11px;
  font-weight:800
}

body.app-ui .trial-balance-filters{
  display:grid;
  grid-template-columns:minmax(280px,1fr) minmax(230px,330px) minmax(220px,280px) auto;
  gap:14px;
  align-items:end;
  margin-top:14px;
  padding:14px 15px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

body.app-ui .trial-balance-filter-copy{
  display:flex;
  align-items:center;
  gap:10px;
  align-self:center
}

body.app-ui .trial-balance-filter-copy>span{
  display:grid;
  width:36px;
  height:36px;
  flex:none;
  place-items:center;
  border-radius:9px;
  background:var(--surface-2);
  color:var(--text-2)
}

body.app-ui .trial-balance-filter-copy strong{
  display:block;
  color:var(--text);
  font-size:14px
}

body.app-ui .trial-balance-filter-copy p{
  margin:2px 0 0;
  color:var(--text-3);
  font-size:12.5px
}

body.app-ui .trial-balance-filters .btn-ghost{
  height:42px
}

body.app-ui .trial-balance-document{
  overflow:hidden;
  margin-top:14px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

body.app-ui .trial-balance-document [hidden]{
  display:none!important
}

body.app-ui .trial-balance-document-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
  padding:21px 22px;
  border-bottom:1px solid var(--border-2);
  background:linear-gradient(115deg,var(--surface) 55%,var(--surface-2))
}

body.app-ui .trial-balance-document-head small{
  color:var(--brand);
  font-size:10.5px;
  font-weight:900;
  letter-spacing:.09em
}

body.app-ui .trial-balance-document-head h2{
  margin:4px 0 0;
  color:var(--text);
  font-size:20px;
  font-weight:900
}

body.app-ui .trial-balance-document-head p{
  margin:3px 0 0;
  color:var(--text-3);
  font-size:12.5px
}

body.app-ui .trial-balance-document-head dl{
  display:grid;
  min-width:300px;
  margin:0;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface)
}

body.app-ui .trial-balance-document-head dl>div{
  display:grid;
  grid-template-columns:90px minmax(0,1fr);
  gap:14px;
  padding:8px 11px;
  border-bottom:1px solid var(--border-2)
}

body.app-ui .trial-balance-document-head dl>div:last-child{
  border-bottom:0
}

body.app-ui .trial-balance-document-head dt{
  color:var(--text-3);
  font-size:11.5px;
  font-weight:650
}

body.app-ui .trial-balance-document-head dd{
  overflow:hidden;
  margin:0;
  color:var(--text);
  font-size:12.5px;
  font-weight:800;
  text-align:right;
  text-overflow:ellipsis;
  white-space:nowrap
}

body.app-ui .trial-balance-loading{
  display:grid;
  min-height:360px;
  place-content:center;
  justify-items:center;
  gap:11px;
  color:var(--text-3)
}

body.app-ui .trial-balance-loading span{
  width:28px;
  height:28px;
  border:3px solid var(--border);
  border-top-color:var(--brand);
  border-radius:50%;
  animation:spin .75s linear infinite
}

body.app-ui .trial-balance-loading strong{
  font-size:13px
}

body.app-ui .trial-balance-error{
  display:flex;
  align-items:center;
  gap:12px;
  margin:18px;
  padding:16px;
  border:1px solid color-mix(in srgb,var(--danger) 30%,var(--border));
  border-radius:11px;
  background:var(--danger-weak);
  color:var(--danger)
}

body.app-ui .trial-balance-error>div{
  min-width:0;
  flex:1
}

body.app-ui .trial-balance-error strong{
  display:block;
  font-size:13.5px
}

body.app-ui .trial-balance-error p{
  margin:2px 0 0;
  font-size:12px
}

body.app-ui .trial-balance-guide{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  padding:16px 18px 0;
  background:var(--surface-2)
}

body.app-ui .trial-balance-guide>div{
  display:grid;
  grid-template-columns:36px auto;
  grid-template-rows:auto auto;
  -moz-column-gap:10px;
       column-gap:10px;
  padding:12px 13px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface)
}

body.app-ui .trial-balance-guide span{
  display:grid;
  grid-row:1/3;
  width:36px;
  height:36px;
  place-items:center;
  border-radius:9px
}

body.app-ui .trial-balance-guide span.is-debit{
  background:var(--blue-weak);
  color:var(--blue)
}

body.app-ui .trial-balance-guide span.is-credit{
  background:var(--warn-weak);
  color:#b96809
}

body.app-ui .trial-balance-guide strong{
  color:var(--text);
  font-size:13.5px
}

body.app-ui .trial-balance-guide p{
  margin:2px 0 0;
  color:var(--text-3);
  font-size:12px
}

body.app-ui .trial-balance-table-wrap{
  padding:16px 18px;
  background:var(--surface-2)
}

body.app-ui .trial-balance-table{
  width:100%;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:11px;
  border-collapse:separate;
  border-spacing:0;
  background:var(--surface)
}

body.app-ui .trial-balance-table th,body.app-ui .trial-balance-table td{
  padding:12px 14px;
  border-bottom:1px solid var(--border-2);
  font-size:13px;
  vertical-align:middle
}

body.app-ui .trial-balance-table thead th{
  background:var(--surface-2);
  color:var(--text-3);
  font-size:10.5px;
  font-weight:850;
  letter-spacing:.045em;
  text-transform:uppercase
}

body.app-ui .trial-balance-table th:nth-child(1){
  width:48%
}

body.app-ui .trial-balance-table th:nth-child(2){
  width:18%
}

body.app-ui .trial-balance-table th:nth-child(3),body.app-ui .trial-balance-table th:nth-child(4){
  width:17%
}

body.app-ui .trial-balance-table tbody tr:last-child td{
  border-bottom:1px solid var(--border)
}

body.app-ui .trial-balance-table tbody tr.is-primary{
  background:color-mix(in srgb,var(--surface-2) 55%,var(--surface))
}

body.app-ui .trial-balance-table td>strong{
  display:block;
  color:var(--text);
  font-size:13.5px
}

body.app-ui .trial-balance-table td>small{
  display:block;
  margin-top:2px;
  color:var(--text-3);
  font-size:11.5px
}

body.app-ui .trial-balance-table td.text-right{
  color:var(--text);
  font-weight:800;
  font-variant-numeric:tabular-nums
}

body.app-ui .trial-balance-type{
  display:inline-flex;
  padding:4px 8px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--surface-2);
  color:var(--text-2);
  font-size:11px;
  font-weight:750
}

body.app-ui .trial-balance-table tfoot th,body.app-ui .trial-balance-table tfoot td{
  border-bottom:0;
  background:var(--surface-2);
  color:var(--text);
  font-size:14px;
  font-weight:900
}

body.app-ui .trial-balance-result{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:15px 20px;
  border-top:1px solid color-mix(in srgb,var(--warn) 25%,var(--border));
  background:var(--warn-weak)
}

body.app-ui .trial-balance-result>div{
  display:flex;
  align-items:center;
  gap:11px
}

body.app-ui .trial-balance-result>div>span{
  display:grid;
  width:38px;
  height:38px;
  flex:none;
  place-items:center;
  border-radius:10px;
  background:var(--surface);
  color:var(--warn)
}

body.app-ui .trial-balance-result small,body.app-ui .trial-balance-result div strong{
  display:block
}

body.app-ui .trial-balance-result small{
  color:var(--text-3);
  font-size:10px;
  font-weight:850;
  letter-spacing:.06em
}

body.app-ui .trial-balance-result div strong{
  margin-top:2px;
  color:var(--text);
  font-size:13.5px
}

body.app-ui .trial-balance-result p{
  margin:2px 0 0;
  color:var(--text-2);
  font-size:12px
}

body.app-ui .trial-balance-result>strong{
  color:#a65d08;
  font-size:21px;
  font-weight:900;
  font-variant-numeric:tabular-nums
}

body.app-ui .trial-balance-result.is-balanced{
  border-color:color-mix(in srgb,var(--brand) 25%,var(--border));
  background:var(--brand-weak)
}

body.app-ui .trial-balance-result.is-balanced>div>span,body.app-ui .trial-balance-result.is-balanced>strong{
  color:var(--brand)
}

@media(max-width:1100px){
  body.app-ui .trial-balance-overview{
    grid-template-columns:1fr 1fr
  }

  body.app-ui .trial-balance-overview-intro{
    grid-column:1/-1
  }

  body.app-ui .trial-balance-filters{
    grid-template-columns:1fr 1fr
  }

  body.app-ui .trial-balance-filter-copy{
    grid-column:1/-1
  }
}

@media(max-width:680px){
  body.app-ui .trial-balance-overview,body.app-ui .trial-balance-filters,body.app-ui .trial-balance-guide{
    grid-template-columns:1fr
  }

  body.app-ui .trial-balance-overview-intro,body.app-ui .trial-balance-filter-copy{
    grid-column:auto
  }

  body.app-ui .trial-balance-document-head{
    flex-direction:column
  }

  body.app-ui .trial-balance-document-head dl{
    width:100%;
    min-width:0
  }

  body.app-ui .trial-balance-table-wrap{
    overflow-x:auto;
    padding:10px
  }

  body.app-ui .trial-balance-table{
    min-width:720px
  }
}

@media print{
  .trial-balance-print-document{
    display:block!important;
    width:100%!important;
    overflow:visible!important;
    border:0!important;
    border-radius:0!important;
    background:var(--surface)!important;
    color:#111!important;
    box-shadow:none!important
  }

  .trial-balance-print-document *{
    -webkit-print-color-adjust:exact!important;
    print-color-adjust:exact!important
  }

  .trial-balance-print-document .trial-balance-document-head{
    padding:0 0 16px!important;
    border-bottom:2px solid #17201b!important;
    background:var(--surface)!important
  }

  .trial-balance-print-document .trial-balance-document-head h2{
    font-size:19px!important
  }

  .trial-balance-print-document .trial-balance-document-head dl{
    min-width:270px!important
  }

  .trial-balance-print-document .trial-balance-guide{
    display:none!important
  }

  .trial-balance-print-document .trial-balance-table-wrap{
    padding:16px 0!important;
    background:var(--surface)!important
  }

  .trial-balance-print-document .trial-balance-table{
    -moz-column-break-inside:auto!important;
         break-inside:auto!important
  }

  .trial-balance-print-document .trial-balance-table tr{
    -moz-column-break-inside:avoid!important;
         break-inside:avoid!important
  }

  .trial-balance-print-document .trial-balance-result{
    -moz-column-break-inside:avoid;
         break-inside:avoid;
    border:1px solid #ecd2a9!important;
    border-radius:9px!important
  }

  .trial-balance-print-document .trial-balance-result.is-balanced{
    border-color:#b8dfc4!important
  }
}

/* Cash flow — plain-language money movement ledger. */

body.app-ui .cash-flow-overview{
  display:grid;
  grid-template-columns:minmax(320px,1.35fr) repeat(4,minmax(155px,.72fr));
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

body.app-ui .cash-flow-overview>div{
  min-width:0;
  padding:17px 18px;
  border-right:1px solid var(--border-2)
}

body.app-ui .cash-flow-overview>div:last-child{
  border-right:0
}

body.app-ui .cash-flow-overview-intro{
  display:flex;
  align-items:center;
  gap:13px
}

body.app-ui .cash-flow-overview-intro>span{
  display:grid;
  width:46px;
  height:46px;
  flex:none;
  place-items:center;
  border-radius:12px;
  background:var(--brand-weak);
  color:var(--brand)
}

body.app-ui .cash-flow-overview small,body.app-ui .cash-flow-overview strong,body.app-ui .cash-flow-overview span{
  display:block
}

body.app-ui .cash-flow-overview small{
  color:var(--text-3);
  font-size:11px;
  font-weight:850;
  letter-spacing:.055em;
  text-transform:uppercase
}

body.app-ui .cash-flow-overview-intro strong{
  margin-top:3px;
  color:var(--text);
  font-size:15px
}

body.app-ui .cash-flow-overview-intro p{
  margin:3px 0 0;
  color:var(--text-3);
  font-size:12.5px;
  line-height:1.45
}

body.app-ui .cash-flow-overview-stat{
  display:flex;
  flex-direction:column;
  justify-content:center
}

body.app-ui .cash-flow-overview-stat>strong{
  margin-top:6px;
  color:var(--text);
  font-size:19px;
  font-weight:900;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.02em
}

body.app-ui .cash-flow-overview-stat>span{
  margin-top:3px;
  color:var(--text-3);
  font-size:11.5px
}

body.app-ui .cash-flow-overview-stat.is-in>strong{
  color:var(--brand)
}

body.app-ui .cash-flow-overview-stat.is-out>strong{
  color:#ba6506
}

body.app-ui .cash-flow-overview-stat.is-net{
  background:linear-gradient(145deg,var(--brand-weak),var(--surface))
}

body.app-ui .cash-flow-overview-stat.is-net.is-negative{
  background:linear-gradient(145deg,var(--danger-weak),var(--surface))
}

body.app-ui .cash-flow-overview-stat.is-net.is-negative>strong{
  color:var(--danger)
}

body.app-ui .cash-flow-filters{
  overflow:hidden;
  margin-top:14px;
  border:1px solid var(--border);
  border-radius:13px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

body.app-ui .cash-flow-filter-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:12px 14px;
  border-bottom:1px solid var(--border-2);
  background:var(--surface-2)
}

body.app-ui .cash-flow-filter-head>div{
  display:flex;
  align-items:center;
  gap:10px
}

body.app-ui .cash-flow-filter-head>div>span{
  display:grid;
  width:36px;
  height:36px;
  flex:none;
  place-items:center;
  border-radius:9px;
  background:var(--surface);
  color:var(--text-2)
}

body.app-ui .cash-flow-filter-head strong{
  display:block;
  color:var(--text);
  font-size:14px
}

body.app-ui .cash-flow-filter-head p{
  margin:2px 0 0;
  color:var(--text-3);
  font-size:12.5px
}

body.app-ui .cash-flow-filter-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  padding:14px
}

body.app-ui .cash-flow-report{
  overflow:hidden;
  margin-top:14px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

body.app-ui .cash-flow-report-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
  padding:20px 21px;
  border-bottom:1px solid var(--border-2);
  background:linear-gradient(115deg,var(--surface) 55%,var(--surface-2))
}

body.app-ui .cash-flow-report-head small{
  color:var(--brand);
  font-size:10.5px;
  font-weight:900;
  letter-spacing:.09em
}

body.app-ui .cash-flow-report-head h2{
  margin:4px 0 0;
  color:var(--text);
  font-size:20px;
  font-weight:900
}

body.app-ui .cash-flow-report-head p{
  margin:3px 0 0;
  color:var(--text-3);
  font-size:12.5px
}

body.app-ui .cash-flow-report-head dl{
  display:grid;
  min-width:340px;
  margin:0;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface)
}

body.app-ui .cash-flow-report-head dl>div{
  display:grid;
  grid-template-columns:78px minmax(0,1fr);
  gap:14px;
  padding:7px 11px;
  border-bottom:1px solid var(--border-2)
}

body.app-ui .cash-flow-report-head dl>div:last-child{
  border-bottom:0
}

body.app-ui .cash-flow-report-head dt{
  color:var(--text-3);
  font-size:11.5px;
  font-weight:650
}

body.app-ui .cash-flow-report-head dd{
  overflow:hidden;
  margin:0;
  color:var(--text);
  font-size:12px;
  font-weight:800;
  text-align:right;
  text-overflow:ellipsis;
  white-space:nowrap
}

body.app-ui .cash-flow-list-card{
  margin:0;
  border:0;
  border-radius:0!important;
  box-shadow:none!important
}

body.app-ui .cash-flow-list-card .table-toolbar{
  border-bottom:1px solid var(--border-2)
}

body.app-ui .cash-flow-table-stage{
  overflow-x:auto
}

body.app-ui .cash-flow-table{
  min-width:1120px;
  margin:0!important
}

body.app-ui .cash-flow-table thead th{
  padding:11px 13px!important;
  color:var(--text-3)!important;
  font-size:10.5px!important;
  font-weight:850!important;
  letter-spacing:.045em;
  text-transform:uppercase;
  vertical-align:middle!important
}

body.app-ui .cash-flow-table tbody td{
  padding:13px!important;
  border-color:var(--border-2)!important;
  color:var(--text-2);
  font-size:12.5px!important;
  vertical-align:middle!important
}

body.app-ui .cash-flow-table th:nth-child(1){
  width:13%
}

body.app-ui .cash-flow-table th:nth-child(2){
  width:28%
}

body.app-ui .cash-flow-table th:nth-child(3){
  width:19%
}

body.app-ui .cash-flow-table th:nth-child(n+4){
  width:10%
}

body.app-ui .cash-flow-date strong,body.app-ui .cash-flow-date small,body.app-ui .cash-flow-account strong,body.app-ui .cash-flow-account span,body.app-ui .cash-flow-account small{
  display:block
}

body.app-ui .cash-flow-date strong{
  color:var(--text);
  font-size:12.5px;
  font-weight:800
}

body.app-ui .cash-flow-date small{
  margin-top:3px;
  color:var(--text-3);
  font-size:11px
}

body.app-ui .cash-flow-movement{
  display:flex;
  align-items:flex-start;
  gap:10px;
  line-height:1.45
}

body.app-ui .cash-flow-movement>div{
  min-width:0;
  color:var(--text-2);
  font-size:12.5px;
  overflow-wrap:anywhere
}

body.app-ui .cash-flow-movement b{
  color:var(--text);
  font-weight:800
}

body.app-ui .cash-flow-movement a{
  color:var(--brand);
  font-weight:750
}

body.app-ui .cash-flow-direction{
  display:inline-flex;
  flex:none;
  align-items:center;
  padding:4px 8px;
  border:1px solid var(--border);
  border-radius:999px;
  font-size:10.5px;
  font-weight:850;
  white-space:nowrap
}

body.app-ui .cash-flow-direction.is-credit{
  border-color:color-mix(in srgb,var(--brand) 30%,var(--border));
  background:var(--brand-weak);
  color:var(--brand)
}

body.app-ui .cash-flow-direction.is-debit{
  border-color:color-mix(in srgb,var(--warn) 30%,var(--border));
  background:var(--warn-weak);
  color:#a65d08
}

body.app-ui .cash-flow-account strong{
  color:var(--text);
  font-size:13px;
  font-weight:850
}

body.app-ui .cash-flow-account span{
  margin-top:3px;
  color:var(--text-2);
  font-size:11.5px
}

body.app-ui .cash-flow-account small{
  margin-top:2px;
  color:var(--text-3);
  font-size:10.5px;
  overflow-wrap:anywhere
}

body.app-ui .cash-flow-amount,body.app-ui .cash-flow-balance{
  font-size:13px!important;
  font-weight:800!important;
  font-variant-numeric:tabular-nums;
  white-space:nowrap
}

body.app-ui .cash-flow-amount.is-in{
  color:var(--brand)!important
}

body.app-ui .cash-flow-amount.is-out{
  color:#a65d08!important
}

body.app-ui .cash-flow-balance.is-overall{
  color:var(--text)!important;
  font-weight:900!important
}

body.app-ui .cash-flow-ledger-summary{
  display:flex;
  justify-content:flex-end;
  border-top:1px solid var(--border);
  background:var(--surface-2)
}

body.app-ui .cash-flow-ledger-summary>div{
  display:flex;
  min-width:190px;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:11px 14px;
  border-left:1px solid var(--border-2)
}

body.app-ui .cash-flow-ledger-summary span{
  color:var(--text-3);
  font-size:11.5px;
  font-weight:700
}

body.app-ui .cash-flow-ledger-summary strong{
  color:var(--text);
  font-size:13.5px;
  font-weight:900;
  font-variant-numeric:tabular-nums
}

body.app-ui .cash-flow-ledger-summary .is-in strong{
  color:var(--brand)
}

body.app-ui .cash-flow-ledger-summary .is-out strong{
  color:#a65d08
}

body.app-ui .cash-flow-ledger-summary .is-net{
  background:var(--brand-weak)
}

body.app-ui .cash-flow-ledger-summary .is-net.is-negative{
  background:var(--danger-weak)
}

body.app-ui .cash-flow-ledger-summary .is-net.is-negative strong{
  color:var(--danger)
}

@media(max-width:1200px){
  body.app-ui .cash-flow-overview{
    grid-template-columns:1fr 1fr
  }

  body.app-ui .cash-flow-overview-intro{
    grid-column:1/-1
  }

  body.app-ui .cash-flow-filter-grid{
    grid-template-columns:1fr 1fr
  }
}

@media(max-width:680px){
  body.app-ui .cash-flow-overview,body.app-ui .cash-flow-filter-grid{
    grid-template-columns:1fr
  }

  body.app-ui .cash-flow-overview-intro{
    grid-column:auto
  }

  body.app-ui .cash-flow-report-head{
    flex-direction:column
  }

  body.app-ui .cash-flow-report-head dl{
    width:100%;
    min-width:0
  }

  body.app-ui .cash-flow-ledger-summary{
    display:grid;
    grid-template-columns:1fr 1fr
  }

  body.app-ui .cash-flow-ledger-summary>div{
    min-width:0;
    border-top:1px solid var(--border-2)
  }
}

@media print{
  @page cash-flow-ledger{
    size:A4 landscape;

    margin:10mm
  }

  .cash-flow-print-document{
    display:block!important;
    width:100%!important;
    overflow:visible!important;
    border:0!important;
    border-radius:0!important;
    background:var(--surface)!important;
    color:#111!important;
    box-shadow:none!important;
    page:cash-flow-ledger
  }

  .cash-flow-print-document *{
    -webkit-print-color-adjust:exact!important;
    print-color-adjust:exact!important
  }

  .cash-flow-print-document .cash-flow-report-head{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 330px!important;
    gap:24px!important;
    padding:0 0 14px!important;
    border-bottom:2px solid #17201b!important;
    background:var(--surface)!important
  }

  .cash-flow-print-document .cash-flow-report-head h2{
    font-size:19px!important
  }

  .cash-flow-print-document .cash-flow-report-head dl{
    width:330px!important;
    min-width:0!important
  }

  .cash-flow-print-document .cash-flow-table-stage{
    overflow:visible!important
  }

  .cash-flow-print-document .cash-flow-table{
    min-width:0!important;
    width:100%!important
  }

  .cash-flow-print-document .cash-flow-print-columns .is-date{
    width:12%
  }

  .cash-flow-print-document .cash-flow-print-columns .is-movement{
    width:28%
  }

  .cash-flow-print-document .cash-flow-print-columns .is-account{
    width:18%
  }

  .cash-flow-print-document .cash-flow-print-columns .is-money{
    width:9%
  }

  .cash-flow-print-document .cash-flow-print-columns .is-balance{
    width:12%
  }

  .cash-flow-print-document .cash-flow-table th,.cash-flow-print-document .cash-flow-table td{
    width:auto!important;
    max-width:none!important;
    padding:8px 7px!important;
    font-size:9.5px!important;
    line-height:1.35!important;
    vertical-align:top!important;
    word-break:normal!important;
    overflow-wrap:break-word!important;
    white-space:normal!important
  }

  .cash-flow-print-document .cash-flow-table th:nth-child(n+4),.cash-flow-print-document .cash-flow-table td:nth-child(n+4){
    white-space:nowrap!important
  }

  .cash-flow-print-document .cash-flow-movement{
    display:block!important
  }

  .cash-flow-print-document .cash-flow-movement>div{
    margin-top:5px!important;
    word-break:normal!important;
    overflow-wrap:break-word!important
  }

  .cash-flow-print-document .cash-flow-direction{
    padding:2px 5px!important;
    font-size:8px!important
  }

  .cash-flow-print-document .cash-flow-date small,.cash-flow-print-document .cash-flow-account small{
    display:none!important
  }

  .cash-flow-print-document .cash-flow-ledger-summary{
    -moz-column-break-inside:avoid!important;
         break-inside:avoid!important
  }
}

/* Payment account report — payment reconciliation workspace. */

body.app-ui .payment-report-overview{
  display:grid;
  grid-template-columns:minmax(310px,1.35fr) repeat(4,minmax(145px,.72fr));
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

body.app-ui .payment-report-overview>div{
  min-width:0;
  padding:17px 18px;
  border-right:1px solid var(--border-2)
}

body.app-ui .payment-report-overview>div:last-child{
  border-right:0
}

body.app-ui .payment-report-overview-intro{
  display:flex;
  align-items:center;
  gap:13px
}

body.app-ui .payment-report-overview-intro>span{
  display:grid;
  width:46px;
  height:46px;
  flex:none;
  place-items:center;
  border-radius:12px;
  background:var(--brand-weak);
  color:var(--brand)
}

body.app-ui .payment-report-overview small,body.app-ui .payment-report-overview strong,body.app-ui .payment-report-overview span{
  display:block
}

body.app-ui .payment-report-overview small{
  color:var(--text-3);
  font-size:11px;
  font-weight:850;
  letter-spacing:.055em;
  text-transform:uppercase
}

body.app-ui .payment-report-overview-intro strong{
  margin-top:3px;
  color:var(--text);
  font-size:15px
}

body.app-ui .payment-report-overview-intro p{
  margin:3px 0 0;
  color:var(--text-3);
  font-size:12.5px;
  line-height:1.45
}

body.app-ui .payment-report-overview-stat{
  display:flex;
  flex-direction:column;
  justify-content:center
}

body.app-ui .payment-report-overview-stat>strong{
  margin-top:6px;
  color:var(--text);
  font-size:19px;
  font-weight:900;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.02em
}

body.app-ui .payment-report-overview-stat>span{
  margin-top:3px;
  color:var(--text-3);
  font-size:11.5px
}

body.app-ui .payment-report-overview-stat.is-amount{
  background:linear-gradient(145deg,var(--surface-2),var(--surface))
}

body.app-ui .payment-report-overview-stat.is-linked>strong{
  color:var(--brand)
}

body.app-ui .payment-report-overview-stat.is-unlinked{
  background:linear-gradient(145deg,var(--warn-weak),var(--surface))
}

body.app-ui .payment-report-overview-stat.is-unlinked>strong{
  color:#a65d08
}

body.app-ui .payment-report-filters{
  overflow:hidden;
  margin-top:14px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

body.app-ui .payment-report-filter-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:12px 14px;
  border-bottom:1px solid var(--border-2);
  background:var(--surface-2)
}

body.app-ui .payment-report-filter-head>div{
  display:flex;
  align-items:center;
  gap:10px
}

body.app-ui .payment-report-filter-head>div>span{
  display:grid;
  width:36px;
  height:36px;
  flex:none;
  place-items:center;
  border-radius:9px;
  background:var(--surface);
  color:var(--text-2)
}

body.app-ui .payment-report-filter-head strong{
  display:block;
  color:var(--text);
  font-size:14px
}

body.app-ui .payment-report-filter-head p{
  margin:2px 0 0;
  color:var(--text-3);
  font-size:12.5px
}

body.app-ui .payment-report-filter-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:14px;
  padding:14px
}

body.app-ui .payment-report-ledger{
  overflow:hidden;
  margin-top:14px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

body.app-ui .payment-report-ledger-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:18px 19px;
  border-bottom:1px solid var(--border-2);
  background:linear-gradient(115deg,var(--surface) 55%,var(--surface-2))
}

body.app-ui .payment-report-ledger-heading>div:first-child{
  display:flex;
  align-items:center;
  gap:12px
}

body.app-ui .payment-report-ledger-heading>div:first-child>span{
  display:grid;
  width:43px;
  height:43px;
  flex:none;
  place-items:center;
  border-radius:11px;
  background:var(--brand-weak);
  color:var(--brand)
}

body.app-ui .payment-report-ledger-heading small{
  color:var(--brand);
  font-size:10px;
  font-weight:900;
  letter-spacing:.09em
}

body.app-ui .payment-report-ledger-heading h2{
  margin:2px 0 0;
  color:var(--text);
  font-size:17px;
  font-weight:900
}

body.app-ui .payment-report-ledger-heading p{
  margin:2px 0 0;
  color:var(--text-3);
  font-size:12.5px
}

body.app-ui .payment-report-ledger-key{
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--text-2);
  font-size:11.5px;
  font-weight:750;
  white-space:nowrap
}

body.app-ui .payment-report-ledger-key span{
  display:flex;
  align-items:center;
  gap:6px
}

body.app-ui .payment-report-ledger-key i{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--brand)
}

body.app-ui .payment-report-ledger-key .is-unlinked i{
  background:var(--warn)
}

body.app-ui .payment-report-list-card{
  margin:0;
  border:0;
  border-radius:0!important;
  box-shadow:none!important
}

body.app-ui .payment-report-list-card .table-toolbar{
  border-bottom:1px solid var(--border-2)
}

body.app-ui .payment-report-table-stage{
  overflow-x:auto
}

body.app-ui .payment-report-table{
  min-width:1120px;
  margin:0!important
}

body.app-ui .payment-report-table thead th{
  padding:11px 13px!important;
  color:var(--text-3)!important;
  font-size:10.5px!important;
  font-weight:850!important;
  letter-spacing:.045em;
  text-transform:uppercase;
  vertical-align:middle!important
}

body.app-ui .payment-report-table tbody td{
  padding:13px!important;
  border-color:var(--border-2)!important;
  color:var(--text-2);
  font-size:12.5px!important;
  vertical-align:middle!important
}

body.app-ui .payment-report-table tbody tr:hover{
  background:color-mix(in srgb,var(--brand-weak) 35%,var(--surface))
}

body.app-ui .payment-report-table th:nth-child(1){
  width:16%
}

body.app-ui .payment-report-table th:nth-child(2){
  width:15%
}

body.app-ui .payment-report-table th:nth-child(3){
  width:21%
}

body.app-ui .payment-report-table th:nth-child(4){
  width:15%
}

body.app-ui .payment-report-table th:nth-child(5){
  width:10%
}

body.app-ui .payment-report-table th:nth-child(6){
  width:13%
}

body.app-ui .payment-report-table th:nth-child(7){
  width:10%
}

body.app-ui .payment-report-primary{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0
}

body.app-ui .payment-report-icon{
  display:grid;
  width:34px;
  height:34px;
  flex:none;
  place-items:center;
  border-radius:9px;
  background:var(--brand-weak);
  color:var(--brand)
}

body.app-ui .payment-report-primary strong,body.app-ui .payment-report-primary small,body.app-ui .payment-report-source span,body.app-ui .payment-report-source small,body.app-ui .payment-report-party small,body.app-ui .payment-report-method strong,body.app-ui .payment-report-method small,body.app-ui .payment-report-recorder strong,body.app-ui .payment-report-recorder small{
  display:block
}

body.app-ui .payment-report-primary strong{
  color:var(--text);
  font-size:12.5px;
  font-weight:850;
  overflow-wrap:anywhere
}

body.app-ui .payment-report-primary small,body.app-ui .payment-report-source small,body.app-ui .payment-report-method small,body.app-ui .payment-report-recorder small{
  margin-top:3px;
  color:var(--text-3);
  font-size:11px;
  line-height:1.35
}

body.app-ui .payment-report-source span{
  color:var(--text);
  font-weight:800
}

body.app-ui .payment-report-source em,body.app-ui .payment-report-muted{
  color:var(--text-3);
  font-style:normal;
  font-weight:600
}

body.app-ui .payment-report-source-link{
  display:inline-flex;
  align-items:center;
  padding:5px 8px;
  border:1px solid color-mix(in srgb,var(--brand) 28%,var(--border));
  border-radius:7px;
  background:var(--brand-weak);
  color:var(--brand);
  font-size:11.5px;
  font-weight:800
}

body.app-ui .payment-report-party>div{
  color:var(--text-2);
  font-size:12.5px;
  line-height:1.45
}

body.app-ui .payment-report-party b{
  color:var(--text);
  font-weight:800
}

body.app-ui .payment-report-party small{
  margin-top:5px;
  color:var(--text-3);
  font-size:11px
}

body.app-ui .payment-report-method strong,body.app-ui .payment-report-recorder strong{
  color:var(--text);
  font-size:12.5px;
  font-weight:800
}

body.app-ui .payment-report-amount{
  color:var(--text)!important;
  font-size:13.5px!important;
  font-weight:900!important;
  font-variant-numeric:tabular-nums;
  white-space:nowrap
}

body.app-ui .payment-report-account-cell{
  white-space:nowrap
}

body.app-ui .account-link-badge{
  display:inline-flex;
  max-width:180px;
  align-items:center;
  gap:7px;
  padding:7px 9px;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface);
  font-size:11.5px;
  font-weight:800;
  line-height:1.2
}

body.app-ui .account-link-badge__text{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

body.app-ui .account-link-badge--linked{
  border-color:color-mix(in srgb,var(--brand) 32%,var(--border));
  background:var(--brand-weak);
  color:var(--brand)
}

body.app-ui .account-link-badge--unlinked{
  border-color:color-mix(in srgb,var(--warn) 38%,var(--border));
  background:var(--warn-weak);
  color:#a65d08
}

body.app-ui .payment-report-ledger-summary{
  display:flex;
  justify-content:flex-end;
  border-top:1px solid var(--border);
  background:var(--surface-2)
}

body.app-ui .payment-report-ledger-summary>div{
  display:flex;
  min-width:170px;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:11px 14px;
  border-left:1px solid var(--border-2)
}

body.app-ui .payment-report-ledger-summary span{
  color:var(--text-3);
  font-size:11.5px;
  font-weight:700
}

body.app-ui .payment-report-ledger-summary strong{
  color:var(--text);
  font-size:13.5px;
  font-weight:900;
  font-variant-numeric:tabular-nums
}

body.app-ui .payment-report-ledger-summary .is-warning strong{
  color:#a65d08
}

body.app-ui .payment-report-ledger-summary .is-total{
  background:var(--brand-weak)
}

body.app-ui .payment-report-ledger-summary .is-total strong{
  color:var(--brand)
}

body.app-ui .payment-report-link-dialog{
  width:min(680px,calc(100% - 28px));
  margin:34px auto
}

body.app-ui .payment-report-link-modal{
  overflow:visible;
  border:1px solid var(--border);
  border-radius:18px!important;
  background:var(--surface);
  box-shadow:0 24px 65px rgba(18,32,25,.22)
}

body.app-ui .payment-report-link-header,body.app-ui .payment-report-link-footer{
  position:static!important;
  inset:auto!important;
  z-index:auto!important;
  background:var(--surface)!important
}

body.app-ui .payment-report-link-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:16px 18px;
  border-bottom:1px solid var(--border-2);
  border-radius:18px 18px 0 0
}

body.app-ui .payment-report-link-title{
  display:flex;
  align-items:center;
  gap:11px
}

body.app-ui .payment-report-link-title>span{
  display:grid;
  width:40px;
  height:40px;
  flex:none;
  place-items:center;
  border-radius:10px;
  background:var(--brand-weak);
  color:var(--brand)
}

body.app-ui .payment-report-link-title h4{
  margin:0;
  color:var(--text);
  font-size:17px;
  font-weight:900
}

body.app-ui .payment-report-link-title p{
  margin:2px 0 0;
  color:var(--text-3);
  font-size:12.5px
}

body.app-ui .payment-report-link-body{
  padding:18px
}

body.app-ui .payment-report-link-context{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:12px;
  padding:13px 14px;
  border:1px solid var(--border);
  border-radius:11px;
  background:var(--surface-2)
}

body.app-ui .payment-report-link-context>span{
  display:grid;
  width:38px;
  height:38px;
  place-items:center;
  border-radius:9px;
  background:var(--surface);
  color:var(--brand)
}

body.app-ui .payment-report-link-context small,body.app-ui .payment-report-link-context strong{
  display:block
}

body.app-ui .payment-report-link-context small{
  color:var(--text-3);
  font-size:10px;
  font-weight:850;
  letter-spacing:.06em
}

body.app-ui .payment-report-link-context strong{
  margin-top:2px;
  color:var(--text);
  font-size:13px;
  font-weight:850
}

body.app-ui .payment-report-link-context-amount{
  text-align:right
}

body.app-ui .payment-report-link-context-amount strong{
  color:var(--brand);
  font-size:17px
}

body.app-ui .payment-report-link-section{
  margin-top:14px;
  padding:16px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface)
}

body.app-ui .payment-report-link-section-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
  padding-bottom:13px;
  border-bottom:1px solid var(--border-2)
}

body.app-ui .payment-report-link-section-head>span{
  display:grid;
  width:36px;
  height:36px;
  flex:none;
  place-items:center;
  border-radius:9px;
  background:var(--brand-weak);
  color:var(--brand)
}

body.app-ui .payment-report-link-section-head strong{
  display:block;
  color:var(--text);
  font-size:14px
}

body.app-ui .payment-report-link-section-head p{
  margin:2px 0 0;
  color:var(--text-3);
  font-size:12px
}

body.app-ui .payment-report-link-help{
  display:flex;
  align-items:center;
  gap:7px;
  margin:10px 0 0;
  color:var(--text-3);
  font-size:11.5px;
  line-height:1.45
}

body.app-ui .payment-report-link-footer{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:9px;
  padding:13px 18px;
  border-top:1px solid var(--border-2);
  border-radius:0 0 18px 18px
}

@media(max-width:1250px){
  body.app-ui .payment-report-overview{
    grid-template-columns:1fr 1fr
  }

  body.app-ui .payment-report-overview-intro{
    grid-column:1/-1
  }

  body.app-ui .payment-report-filter-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))
  }
}

@media(max-width:780px){
  body.app-ui .payment-report-filter-grid{
    grid-template-columns:1fr 1fr
  }

  body.app-ui .payment-report-ledger-heading{
    align-items:flex-start;
    flex-direction:column
  }

  body.app-ui .payment-report-ledger-summary{
    display:grid;
    grid-template-columns:1fr 1fr
  }

  body.app-ui .payment-report-ledger-summary>div{
    min-width:0;
    border-top:1px solid var(--border-2)
  }
}

@media(max-width:560px){
  body.app-ui .payment-report-overview,body.app-ui .payment-report-filter-grid{
    grid-template-columns:1fr
  }

  body.app-ui .payment-report-overview-intro{
    grid-column:auto
  }

  body.app-ui .payment-report-filter-head{
    align-items:flex-start
  }

  body.app-ui .payment-report-ledger-key{
    flex-wrap:wrap
  }

  body.app-ui .payment-report-link-context{
    grid-template-columns:auto 1fr
  }

  body.app-ui .payment-report-link-context-amount{
    grid-column:2;
    text-align:left
  }
}

/* Partners workspace */

body.app-ui .partners-page{
  gap:16px
}

body.app-ui .partners-tabs{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(178px,1fr));
  gap:5px;
  padding:5px;
  border:1px solid var(--border);
  border-radius:13px;
  background:var(--surface-2);
  box-shadow:var(--shadow-sm)
}

body.app-ui .partners-tab{
  display:flex;
  min-width:0;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border:1px solid transparent;
  border-radius:9px;
  color:var(--text-2);
  transition:.18s ease
}

body.app-ui .partners-tab:hover{
  background:var(--surface);
  color:var(--text)
}

body.app-ui .partners-tab.is-active{
  border-color:var(--border);
  background:var(--surface);
  box-shadow:0 1px 3px rgba(18,32,25,.08);
  color:var(--text)
}

body.app-ui .partners-tab__icon{
  display:grid;
  width:34px;
  height:34px;
  flex:none;
  place-items:center;
  border-radius:8px;
  background:transparent;
  color:var(--text-3)
}

body.app-ui .partners-tab.is-active .partners-tab__icon{
  background:var(--brand-weak);
  color:var(--brand)
}

body.app-ui .partners-tab__copy{
  min-width:0
}

body.app-ui .partners-tab__copy strong,body.app-ui .partners-tab__copy small{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

body.app-ui .partners-tab__copy strong{
  font-size:13px;
  font-weight:850
}

body.app-ui .partners-tab__copy small{
  margin-top:2px;
  color:var(--text-3);
  font-size:11px
}

body.app-ui .partner-capital-card,body.app-ui .partner-directory-card{
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

body.app-ui .partner-capital-card{
  display:grid;
  grid-template-columns:1.05fr 1.45fr;
  align-items:center
}

body.app-ui .partner-capital-card__intro{
  display:flex;
  align-self:stretch;
  align-items:center;
  gap:13px;
  padding:20px;
  border-right:1px solid var(--border-2);
  background:linear-gradient(135deg,var(--surface),var(--brand-weak))
}

body.app-ui .partner-capital-card__intro>span{
  display:grid;
  width:46px;
  height:46px;
  flex:none;
  place-items:center;
  border-radius:12px;
  background:var(--surface);
  color:var(--brand);
  box-shadow:var(--shadow-sm)
}

body.app-ui .partner-capital-card__intro small{
  color:var(--brand);
  font-size:10px;
  font-weight:900;
  letter-spacing:.09em
}

body.app-ui .partner-capital-card__intro h2{
  margin:3px 0 0;
  color:var(--text);
  font-size:17px;
  font-weight:900
}

body.app-ui .partner-capital-card__intro p{
  max-width:430px;
  margin:3px 0 0;
  color:var(--text-3);
  font-size:12.5px;
  line-height:1.45
}

body.app-ui .partner-capital-form{
  display:grid;
  grid-template-columns:minmax(150px,1fr) minmax(130px,.7fr) auto;
  align-items:end;
  gap:12px;
  padding:17px 18px
}

body.app-ui .partner-capital-save{
  height:42px;
  white-space:nowrap
}

body.app-ui .partner-money-input{
  display:flex;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface-2);
  transition:.18s ease
}

body.app-ui .partner-money-input:focus-within{
  border-color:var(--brand);
  box-shadow:0 0 0 3px var(--brand-weak)
}

body.app-ui .partner-money-input>span{
  display:grid;
  min-width:42px;
  place-items:center;
  border-right:1px solid var(--border);
  color:var(--text-2);
  font-weight:850
}

body.app-ui .partner-money-input .finput{
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  background:var(--surface)!important
}

body.app-ui .partner-capital-stats{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--border-2);
  background:var(--surface-2)
}

body.app-ui .partner-capital-stats>div{
  padding:13px 18px;
  border-right:1px solid var(--border-2)
}

body.app-ui .partner-capital-stats>div:last-child{
  border-right:0
}

body.app-ui .partner-capital-stats span,body.app-ui .partner-capital-stats small{
  display:block;
  color:var(--text-3);
  font-size:11px
}

body.app-ui .partner-capital-stats strong{
  display:block;
  margin:3px 0;
  color:var(--text);
  font-size:16px;
  font-weight:900;
  font-variant-numeric:tabular-nums
}

body.app-ui .partner-directory-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:15px 17px;
  border-bottom:1px solid var(--border-2)
}

body.app-ui .partner-directory-head>div{
  display:flex;
  align-items:center;
  gap:11px
}

.partner-directory-head__icon{
  display:grid;
  width:40px;
  height:40px;
  place-items:center;
  border-radius:10px;
  background:var(--brand-weak);
  color:var(--brand)
}

body.app-ui .partner-directory-head h2{
  margin:0;
  color:var(--text);
  font-size:16px;
  font-weight:900
}

body.app-ui .partner-directory-head p{
  margin:2px 0 0;
  color:var(--text-3);
  font-size:12.5px
}

body.app-ui .partner-search{
  display:flex;
  width:min(380px,42vw);
  height:42px;
  align-items:center;
  gap:9px;
  padding:0 12px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface-2);
  color:var(--text-3)
}

body.app-ui .partner-search:focus-within{
  border-color:var(--brand);
  box-shadow:0 0 0 3px var(--brand-weak);
  background:var(--surface)
}

body.app-ui .partner-search input{
  width:100%;
  border:0;
  outline:0;
  background:transparent;
  color:var(--text);
  font-size:13px
}

body.app-ui .partner-directory-table{
  min-width:900px;
  margin:0!important
}

body.app-ui .partner-directory-table thead th{
  padding:11px 15px!important;
  color:var(--text-3)!important;
  font-size:10.5px!important;
  font-weight:850!important;
  letter-spacing:.045em;
  text-transform:uppercase
}

body.app-ui .partner-directory-table tbody td{
  padding:13px 15px!important;
  border-color:var(--border-2)!important;
  vertical-align:middle!important;
  font-size:12.5px!important
}

body.app-ui .partner-directory-table tbody tr:hover{
  background:color-mix(in srgb,var(--brand-weak) 28%,var(--surface))
}

body.app-ui .partner-identity{
  display:flex;
  align-items:center;
  gap:10px
}

.partner-identity>span{
  display:grid;
  width:36px;
  height:36px;
  flex:none;
  place-items:center;
  border-radius:10px;
  background:var(--brand-weak);
  color:var(--brand);
  font-weight:900
}

body.app-ui .partner-identity strong,body.app-ui .partner-identity small,body.app-ui .partner-contact strong,body.app-ui .partner-contact small,body.app-ui .partner-ownership strong,body.app-ui .partner-ownership small{
  display:block
}

.partner-identity strong,.partner-contact strong,.partner-ownership strong{
  color:var(--text);
  font-weight:850
}

.partner-identity small,.partner-contact small,.partner-ownership small{
  margin-top:3px;
  color:var(--text-3);
  font-size:11px
}

body.app-ui .partner-contact small{
  max-width:230px;
  white-space:normal
}

body.app-ui .partner-money{
  font-variant-numeric:tabular-nums;
  white-space:nowrap
}

body.app-ui .partner-balance{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 9px;
  border:1px solid var(--border);
  border-radius:999px;
  font-size:11.5px;
  font-weight:850;
  white-space:nowrap
}

.partner-balance--credit{
  border-color:color-mix(in srgb,var(--brand) 30%,var(--border));
  background:var(--brand-weak);
  color:var(--brand)
}

.partner-balance--debit{
  border-color:color-mix(in srgb,var(--warn) 34%,var(--border));
  background:var(--warn-weak);
  color:#a65d08
}

.partner-balance--settled{
  background:var(--surface-2);
  color:var(--text-2)
}

body.app-ui .partner-directory-table tfoot td{
  padding:12px 15px;
  border-top:1px solid var(--border);
  background:var(--surface-2);
  color:var(--text-2);
  font-size:12.5px
}

.partner-empty-row td,.partner-no-results td{
  text-align:center!important;
  color:var(--text-3)!important
}

.partner-empty-row svg,.partner-empty-row strong,.partner-empty-row span{
  display:block;
  margin:6px auto
}

body.app-ui .partner-entry-dialog{
  width:min(760px,calc(100% - 28px));
  margin:34px auto
}

body.app-ui .partner-entry-modal{
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:18px!important;
  background:var(--surface);
  box-shadow:0 24px 65px rgba(18,32,25,.22)
}

body.app-ui .partner-entry-header,body.app-ui .partner-entry-footer{
  position:static!important;
  inset:auto!important;
  z-index:auto!important;
  background:var(--surface)!important
}

.partner-entry-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:16px 18px;
  border-bottom:1px solid var(--border-2)
}

.partner-entry-title{
  display:flex;
  align-items:center;
  gap:11px
}

.partner-entry-title>span{
  display:grid;
  width:42px;
  height:42px;
  place-items:center;
  border-radius:11px;
  background:var(--brand-weak);
  color:var(--brand)
}

.partner-entry-title h4{
  margin:0;
  color:var(--text);
  font-size:18px;
  font-weight:900
}

.partner-entry-title p{
  margin:3px 0 0;
  color:var(--text-3);
  font-size:12.5px
}

.partner-entry-body{
  display:grid;
  gap:14px;
  padding:17px;
  background:var(--surface-2)
}

.partner-entry-section{
  padding:16px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface)
}

.partner-entry-section__head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:15px;
  padding-bottom:13px;
  border-bottom:1px solid var(--border-2)
}

.partner-entry-section__head>span{
  display:grid;
  width:35px;
  height:35px;
  place-items:center;
  border-radius:9px;
  background:var(--brand-weak);
  color:var(--brand)
}

.partner-entry-section__head strong{
  display:block;
  color:var(--text);
  font-size:14px
}

.partner-entry-section__head p{
  margin:2px 0 0;
  color:var(--text-3);
  font-size:12px
}

.partner-entry-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px
}

.partner-entry-wide{
  grid-column:1/-1
}

.partner-entry-grid textarea.finput{
  height:auto;
  min-height:82px;
  padding-top:10px;
  resize:vertical
}

.partner-entry-footer{
  display:flex;
  justify-content:flex-end;
  gap:9px;
  padding:13px 18px;
  border-top:1px solid var(--border-2)
}

@media(max-width:1050px){
  body.app-ui .partner-capital-card{
    grid-template-columns:1fr
  }

  body.app-ui .partner-capital-card__intro{
    border-right:0;
    border-bottom:1px solid var(--border-2)
  }
}

@media(max-width:760px){
  body.app-ui .partners-tabs{
    grid-template-columns:1fr 1fr
  }

  body.app-ui .partner-capital-form{
    grid-template-columns:1fr 1fr
  }

  .partner-capital-save{
    grid-column:1/-1
  }

  .partner-directory-head{
    align-items:flex-start!important;
    flex-direction:column
  }

  .partner-search{
    width:100%!important
  }

  .partner-capital-stats{
    grid-template-columns:1fr!important
  }

  .partner-capital-stats>div{
    border-right:0!important;
    border-bottom:1px solid var(--border-2)
  }
}

@media(max-width:540px){
  body.app-ui .partners-tabs,.partner-entry-grid,.partner-capital-form{
    grid-template-columns:1fr!important
  }

  .partner-entry-wide{
    grid-column:auto
  }

  .partners-tab__copy small{
    display:none!important
  }
}

/* Partner payment history */

body.app-ui .partner-payment-overview {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--line);
  box-shadow: var(--shadow-sm);
}

body.app-ui .partner-payment-overview > div {
  position: relative;
  min-height: 118px;
  padding: 22px 24px 20px 82px;
  background: var(--surface);
}

body.app-ui .partner-payment-overview__icon {
  position: absolute;
  left: 24px;
  top: 24px;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 12px;
}

body.app-ui .partner-payment-overview__icon.is-green {
  color: #168647;
  background: #e9f8ef;
}

body.app-ui .partner-payment-overview__icon.is-orange {
  color: #c2690b;
  background: #fff3df;
}

body.app-ui .partner-payment-overview__icon.is-blue {
  color: #2563eb;
  background: #eaf2ff;
}

body.app-ui .partner-payment-overview p {
  margin: 0 0 3px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

body.app-ui .partner-payment-overview strong {
  display: block;
  color: var(--ink);
  font-size: 23px;
  line-height: 1.25;
}

body.app-ui .partner-payment-overview small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
}

body.app-ui .partner-payment-filter,
body.app-ui .partner-payment-ledger {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

body.app-ui .partner-payment-section-head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 68px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: #fbfcfb;
}

body.app-ui .partner-payment-section-head > span:first-child {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 11px;
  color: #27884c;
  background: #e9f7ee;
}

body.app-ui .partner-payment-section-head h2 {
  margin: 0;
  color: var(--ink);
  font-size: 15px;
  font-weight: 700;
}

body.app-ui .partner-payment-section-head p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 12px;
}

body.app-ui .partner-payment-section-head .btn-ghost,
body.app-ui .partner-payment-count {
  margin-left: auto;
}

body.app-ui .partner-payment-count {
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  color: var(--muted);
  background: var(--surface);
  font-size: 12px;
  font-weight: 700;
}

body.app-ui .partner-payment-filter-grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr 1fr;
  gap: 16px;
  padding: 18px;
}

body.app-ui .partner-payment-table {
  min-width: 930px;
  margin: 0;
}

body.app-ui .partner-payment-table td {
  padding: 14px 16px;
  vertical-align: middle;
}

body.app-ui .partner-transaction-amount {
  display: flex;
  align-items: center;
  gap: 10px;
}

body.app-ui .partner-transaction-amount > span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 10px;
}

body.app-ui .partner-transaction-amount.is-deposit > span {
  color: #18864a;
  background: #e9f8ef;
}

body.app-ui .partner-transaction-amount.is-withdrawal > span {
  color: #c2690b;
  background: #fff3df;
}

body.app-ui .partner-transaction-amount strong,
body.app-ui .partner-transaction-amount small {
  display: block;
}

body.app-ui .partner-transaction-amount strong {
  color: var(--ink);
  font-size: 14px;
}

body.app-ui .partner-transaction-amount small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}

body.app-ui .partner-payment-note {
  display: block;
  max-width: 300px;
  color: #566159;
  white-space: normal;
}

body.app-ui .partner-payment-loading,
body.app-ui .partner-payment-empty {
  padding: 54px 20px !important;
  text-align: center;
  color: var(--muted);
}

body.app-ui .partner-payment-empty svg,
body.app-ui .partner-payment-empty strong,
body.app-ui .partner-payment-empty span {
  display: block;
  margin: 0 auto;
}

body.app-ui .partner-payment-empty strong {
  margin-top: 10px;
  color: var(--ink);
  font-size: 14px;
}

body.app-ui .partner-payment-empty span {
  margin-top: 4px;
  font-size: 12px;
}

body.app-ui .partner-payment-dialog {
  width: min(760px, calc(100vw - 32px));
  margin: 38px auto;
}

body.app-ui .partner-payment-modal-card {
  overflow: hidden;
  border: 0;
  border-radius: 18px;
  box-shadow: 0 26px 70px rgba(20, 32, 25, .22);
}

body.app-ui .partner-payment-modal-head,
body.app-ui .partner-payment-modal-footer {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  background: var(--surface);
}

body.app-ui .partner-payment-modal-head {
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}

body.app-ui .partner-payment-modal-head > div {
  display: flex;
  align-items: center;
  gap: 12px;
}

body.app-ui .partner-payment-modal-head > div > span {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 11px;
  color: #198a4b;
  background: #e9f8ef;
}

body.app-ui .partner-payment-modal-head h4 {
  margin: 0;
  color: var(--ink);
  font-size: 18px;
  font-weight: 750;
}

body.app-ui .partner-payment-modal-head p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 13px;
}

body.app-ui .partner-payment-modal-body {
  padding: 20px;
  background: #f7faf8;
}

body.app-ui .partner-payment-form-card {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}

body.app-ui .partner-payment-form-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

body.app-ui .partner-payment-form-head > span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 9px;
  color: #198a4b;
  background: #e9f8ef;
}

body.app-ui .partner-payment-form-head strong {
  display: block;
  color: var(--ink);
  font-size: 14px;
}

body.app-ui .partner-payment-form-head p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 12px;
}

body.app-ui .partner-payment-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

body.app-ui .partner-payment-form-wide {
  grid-column: 1 / -1;
}

body.app-ui .partner-payment-direction-help {
  display: flex;
  gap: 9px;
  padding: 11px 12px;
  margin-top: 16px;
  border-radius: 10px;
  color: #52635a;
  background: #f3f7f4;
  font-size: 12px;
  line-height: 1.5;
}

body.app-ui .partner-payment-direction-help svg {
  flex: 0 0 auto;
  margin-top: 2px;
}

body.app-ui .partner-payment-modal-footer {
  justify-content: flex-end;
  gap: 10px;
  border-top: 1px solid var(--line);
}

@media (max-width: 820px) {
  body.app-ui .partner-payment-overview {
    grid-template-columns: 1fr;
  }

  body.app-ui .partner-payment-filter-grid,
  body.app-ui .partner-payment-form-grid {
    grid-template-columns: 1fr;
  }

  body.app-ui .partner-payment-form-wide {
    grid-column: auto;
  }
}

/* Partners: final account */

.partner-final-page {
  padding-bottom: 3rem;
}

.final-account-overview {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  margin-bottom:1rem;
  overflow:hidden;
  background:var(--surface);
  border:1px solid var(--ui-border,#dde5df);
  border-radius:14px;
  box-shadow:0 5px 16px rgba(15,23,42,.045);
}

.final-account-overview>div {
  min-height:112px;
  padding:1.15rem 1.25rem;
  display:grid;
  grid-template-columns:44px 1fr;
  grid-template-rows:auto auto auto;
  -moz-column-gap:.9rem;
       column-gap:.9rem;
  align-content:center;
  border-right:1px solid #e7ece8;
}

.final-account-overview>div:last-child {
  border-right:0;
}

.final-account-overview__icon {
  grid-row:1/4;
  width:44px;
  height:44px;
  border-radius:12px;
  display:grid;
  place-items:center;
}

.final-account-overview__icon.is-blue {
  color:#2563eb;
  background:#eaf2ff;
}

.final-account-overview__icon.is-green {
  color:#16833e;
  background:#e5f6eb;
}

.final-account-overview__icon.is-orange {
  color:#c86c08;
  background:#fff0dc;
}

.final-account-overview p {
  margin:0;
  color:#667169;
  font-size:.82rem;
  font-weight:650;
}

.final-account-overview strong {
  color:#17201a;
  font-size:1.28rem;
  line-height:1.4;
}

.final-account-overview small {
  color:#94a099;
  font-size:.75rem;
}

.final-account-card {
  margin-bottom:1rem;
  overflow:hidden;
  background:var(--surface);
  border:1px solid #dfe6e1;
  border-radius:14px;
  box-shadow:0 5px 18px rgba(15,23,42,.045);
}

.final-account-section-head {
  min-height:72px;
  display:flex;
  align-items:center;
  gap:.85rem;
  padding:1rem 1.15rem;
  border-bottom:1px solid #e8ece9;
  background:#fbfcfb;
}

.final-account-section-head>span:first-child {
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  border-radius:11px;
  color:#16833e;
  background:#e5f6eb;
}

.final-account-section-head h2 {
  margin:0;
  color:#17201a;
  font-size:1rem;
  font-weight:750;
}

.final-account-section-head p {
  margin:.15rem 0 0;
  color:#89948d;
  font-size:.78rem;
}

.final-account-count {
  margin-left:auto;
  padding:.38rem .65rem;
  border:1px solid #dfe6e1;
  border-radius:9px;
  color:#657168;
  background:var(--surface);
  font-size:.75rem;
  font-weight:700;
}

.final-account-table {
  margin:0!important;
  min-width:850px;
}

.final-account-table th {
  padding:.8rem 1rem!important;
  color:#7d8981!important;
  background:var(--surface-2)!important;
  border-bottom:1px solid #e2e8e3!important;
  font-size:.72rem!important;
  letter-spacing:.025em;
  text-transform:uppercase;
}

.final-account-table td {
  padding:.85rem 1rem!important;
  vertical-align:middle!important;
  color:#59635d;
  border-bottom:1px solid #edf0ee!important;
  font-size:.84rem!important;
}

.final-account-table tbody tr:last-child td {
  border-bottom:0!important;
}

.final-account-table tfoot th {
  color:#27312b!important;
  background:#f4f7f5!important;
  font-size:.8rem!important;
  text-transform:none;
}

.final-period-cell,.final-partner-cell {
  display:flex;
  flex-direction:column;
  gap:.15rem;
}

.final-period-cell strong,.final-partner-cell strong {
  color:#1a231d;
  font-size:.86rem;
}

.final-period-cell strong span {
  color:#98a39c;
  padding:0 .18rem;
}

.final-period-cell small,.final-partner-cell small {
  color:#929d96;
  font-size:.73rem;
}

.final-partner-cell {
  display:grid;
  grid-template-columns:36px 1fr;
}

.final-partner-cell>span {
  grid-row:1/3;
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  color:#16833e;
  background:#e9f6ed;
  border-radius:10px;
}

.final-status,.final-locked {
  display:inline-flex;
  align-items:center;
  gap:.3rem;
  border-radius:999px;
  padding:.28rem .58rem;
  font-size:.72rem;
  font-weight:750;
  white-space:nowrap;
}

.final-status.is-draft {
  color:#a35d05;
  border:1px solid #f1c987;
  background:#fff4df;
}

.final-status.is-distributed,.final-locked {
  color:#187b3b;
  border:1px solid #addbbc;
  background:#e8f7ed;
}

.final-account-table .is-credit {
  color:#16833e;
  font-weight:750;
}

.final-account-table .is-debit {
  color:#c45a34;
  font-weight:750;
}

.final-account-empty {
  height:170px;
  text-align:center!important;
  color:#8b978f!important;
}

.final-account-empty svg {
  display:block;
  margin:0 auto .55rem;
}

.final-account-empty strong,.final-account-empty span {
  display:block;
}

.final-account-empty strong {
  color:#566159;
  margin-bottom:.15rem;
}

.final-account-modal .modal-dialog {
  width:min(760px,calc(100vw - 2rem));
  margin:4vh auto;
}

.final-account-modal .modal-content,.final-account-modal-card {
  overflow:hidden;
  border:0;
  border-radius:16px;
  box-shadow:0 26px 70px rgba(15,23,42,.25);
}

.final-account-modal-head,.final-account-modal-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1rem 1.15rem;
  background:var(--surface);
}

.final-account-modal-head {
  border-bottom:1px solid #e6ebe7;
}

.final-account-modal-head>div {
  display:flex;
  align-items:center;
  gap:.8rem;
}

.final-account-modal-head>div>span {
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border-radius:11px;
  color:#16833e;
  background:#e5f6eb;
}

.final-account-modal-head h4 {
  margin:0;
  color:#17201a;
  font-size:1.05rem;
  font-weight:780;
}

.final-account-modal-head p {
  margin:.15rem 0 0;
  color:#8b968f;
  font-size:.78rem;
}

.final-account-modal-body {
  padding:1.15rem;
  background:#f8faf9;
}

.final-account-modal-footer {
  gap:.65rem;
  justify-content:flex-end;
  border-top:1px solid #e6ebe7;
}

.final-account-form-card {
  padding:1rem;
  background:var(--surface);
  border:1px solid #dfe6e1;
  border-radius:13px;
}

.final-account-form-head {
  display:flex;
  align-items:center;
  gap:.7rem;
  padding-bottom:.9rem;
  margin-bottom:1rem;
  border-bottom:1px solid #edf0ee;
}

.final-account-form-head>span {
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:9px;
  color:#16833e;
  background:#e7f6ec;
}

.final-account-form-head strong {
  display:block;
  color:#202a23;
  font-size:.9rem;
}

.final-account-form-head p {
  margin:.12rem 0 0;
  color:#929c95;
  font-size:.74rem;
}

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

.final-account-form-wide {
  grid-column:1/-1;
}

.final-account-form-grid .field-label {
  font-size:.82rem!important;
}

.final-account-warning {
  display:flex;
  gap:.6rem;
  margin-top:1rem;
  padding:.75rem;
  border:1px solid #b8dbf6;
  border-radius:10px;
  color:#245d89;
  background:#eef7ff;
  font-size:.77rem;
  line-height:1.5;
}

.partner-money-input.is-readonly {
  background:#f1f4f2;
}

@media(max-width:760px){
  .final-account-overview{
    grid-template-columns:1fr
  }

  .final-account-overview>div{
    border-right:0;
    border-bottom:1px solid #e7ece8
  }

  .final-account-overview>div:last-child{
    border-bottom:0
  }

  .final-account-form-grid{
    grid-template-columns:1fr
  }

  .final-account-form-wide{
    grid-column:auto
  }
}

.partner-estimate-page {
  max-width: 1480px;
}

.partner-estimate-summary {
  display:grid;
  grid-template-columns:1.25fr repeat(3,1fr);
  background:var(--surface);
  border:1px solid var(--border, #dfe5e2);
  border-radius:16px;
  box-shadow:0 5px 16px rgba(16,24,20,.05);
  overflow:hidden;
  margin-bottom:16px;
}

.partner-estimate-summary > div {
  padding:20px 22px;
  border-left:1px solid #e6ebe8;
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-width:0;
}

.partner-estimate-summary > div:first-child {
  border-left:0;
}

.partner-estimate-summary small,.partner-share-estimate small {
  color:#87938d;
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
}

.partner-estimate-summary strong {
  color:#17211c;
  font-size:23px;
  line-height:1.25;
  margin-top:5px;
}

.partner-estimate-summary p,.partner-share-estimate p {
  color:#8b9690;
  font-size:13px;
  margin:4px 0 0;
}

.partner-estimate-summary__intro {
  flex-direction:row !important;
  align-items:center;
  gap:14px;
}

.partner-estimate-summary__intro > span,.partner-estimate-card header > span,.partner-share-estimate > div > span {
  width:44px;
  height:44px;
  flex:0 0 44px;
  border-radius:12px;
  display:grid;
  place-items:center;
  color:#179448;
  background:#e7f7ed;
}

.partner-estimate-summary__intro strong {
  font-size:18px;
}

.partner-estimate-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  margin-bottom:16px;
}

.partner-estimate-card {
  background:var(--surface);
  border:1px solid #dfe5e2;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 4px 14px rgba(16,24,20,.04);
}

.partner-estimate-card header {
  display:flex;
  align-items:center;
  gap:12px;
  padding:17px 20px;
  border-bottom:1px solid #e5eae7;
  background:#fafcfb;
}

.partner-estimate-card header > span.is-orange {
  color:#d97706;
  background:#fff2dc;
}

.partner-estimate-card header > span.is-blue {
  color:#2563eb;
  background:#eaf2ff;
}

.partner-estimate-card h2 {
  font-size:16px;
  line-height:1.25;
  margin:0;
  color:#17211c;
}

.partner-estimate-card header p {
  font-size:13px;
  color:#8a9690;
  margin:3px 0 0;
}

.partner-estimate-card dl {
  margin:0;
  padding:5px 20px;
}

.partner-estimate-card dl > div {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  padding:13px 0;
  border-bottom:1px solid #edf0ee;
}

.partner-estimate-card dl > div:last-child {
  border-bottom:0;
}

.partner-estimate-card dt {
  color:#4f5d56;
  font-size:14px;
  font-weight:600;
}

.partner-estimate-card dt small {
  display:block;
  color:#96a09b;
  font-size:12px;
  font-weight:400;
  margin-top:2px;
}

.partner-estimate-card dd {
  color:#17211c;
  font-size:15px;
  font-weight:700;
  margin:0;
  white-space:nowrap;
}

.partner-estimate-card footer {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:15px 20px;
  background:#f5f8f6;
  border-top:1px solid #e1e7e3;
  color:#4f5d56;
  font-weight:600;
}

.partner-estimate-card footer strong {
  color:#17833e;
  font-size:18px;
}

.partner-estimate-card footer strong.is-obligation {
  color:#c36a09;
}

.partner-estimate-inventory {
  margin-bottom:16px;
}

.partner-estimate-inventory__grid {
  display:grid;
  grid-template-columns:1fr 38px 1fr 1.15fr;
  align-items:stretch;
  padding:18px 20px;
  gap:12px;
}

.partner-estimate-inventory__grid > div {
  padding:16px;
  border:1px solid #e1e7e3;
  border-radius:12px;
  background:#fbfcfb;
}

.partner-estimate-inventory__grid > span {
  display:grid;
  place-items:center;
  color:#8a9690;
}

.partner-estimate-inventory__grid small {
  color:#85918b;
  font-size:11px;
  font-weight:700;
  letter-spacing:.06em;
}

.partner-estimate-inventory__grid strong {
  display:block;
  color:#17211c;
  font-size:20px;
  margin:7px 0 3px;
}

.partner-estimate-inventory__grid p {
  color:#8a9690;
  font-size:12px;
  margin:0;
}

.partner-estimate-inventory__grid .is-profit {
  background:#eefaf2;
  border-color:#bce3c9;
}

.partner-estimate-inventory__grid .is-profit strong {
  color:#17833e;
}

.partner-estimate-breakdown .partner-estimate-card dl > div {
  padding:11px 0;
}

.partner-share-estimate {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  padding:18px 20px;
  border:1px solid #bfe2ca;
  background:linear-gradient(100deg,#effaf3,#fff);
  border-radius:16px;
}

.partner-share-estimate > div {
  display:flex;
  align-items:center;
  gap:13px;
}

.partner-share-estimate > div strong {
  display:block;
  color:#17211c;
  font-size:16px;
  margin-top:3px;
}

.partner-share-estimate dl {
  display:flex;
  gap:42px;
  margin:0;
}

.partner-share-estimate dt {
  color:#718078;
  font-size:12px;
}

.partner-share-estimate dd {
  color:#17833e;
  font-size:19px;
  font-weight:700;
  margin:3px 0 0;
  white-space:nowrap;
}

.partner-estimate-note {
  display:flex;
  align-items:center;
  gap:8px;
  color:#75817b;
  font-size:12px;
  margin:12px 3px 0;
}

@media (max-width: 1050px) {
  .partner-estimate-summary {
    grid-template-columns:repeat(2,1fr);
  }

  .partner-estimate-summary > div:nth-child(3) {
    border-top:1px solid #e6ebe8;
    border-left:0;
  }

  .partner-estimate-summary > div:nth-child(4) {
    border-top:1px solid #e6ebe8;
  }

  .partner-estimate-inventory__grid {
    grid-template-columns:1fr 32px 1fr;
  }

  .partner-estimate-inventory__grid .is-profit {
    grid-column:1/-1;
  }

  .partner-share-estimate {
    align-items:flex-start;
    flex-direction:column;
  }
}

@media (max-width: 700px) {
  .partner-estimate-summary,.partner-estimate-grid {
    grid-template-columns:1fr;
  }

  .partner-estimate-summary > div {
    border-left:0;
    border-top:1px solid #e6ebe8;
  }

  .partner-estimate-summary > div:first-child {
    border-top:0;
  }

  .partner-estimate-inventory__grid {
    grid-template-columns:1fr;
  }

  .partner-estimate-inventory__grid > span {
    transform:rotate(90deg);
  }

  .partner-share-estimate dl {
    width:100%;
    justify-content:space-between;
    gap:16px;
  }
}

/* Partners: fixed asset register */

.partner-assets-page{
  max-width:1480px
}

.partner-assets-summary{
  display:grid;
  grid-template-columns:1.35fr repeat(3,minmax(0,1fr));
  margin-bottom:16px;
  overflow:hidden;
  border:1px solid #dfe6e1;
  border-radius:16px;
  background:var(--surface);
  box-shadow:0 5px 16px rgba(15,23,42,.045)
}

.partner-assets-summary>div{
  display:flex;
  min-height:112px;
  flex-direction:column;
  justify-content:center;
  padding:19px 21px;
  border-left:1px solid #e6ebe8
}

.partner-assets-summary>div:first-child{
  border-left:0
}

.partner-assets-summary__intro{
  flex-direction:row!important;
  align-items:center;
  gap:14px
}

.partner-assets-summary__intro>span{
  display:grid;
  width:44px;
  height:44px;
  flex:0 0 44px;
  place-items:center;
  border-radius:12px;
  background:#e6f7ec;
  color:#179448
}

.partner-assets-summary small{
  color:#87938d;
  font-size:11px;
  font-weight:700;
  letter-spacing:.06em
}

.partner-assets-summary strong{
  margin-top:5px;
  color:#17211c;
  font-size:22px;
  line-height:1.25
}

.partner-assets-summary p{
  margin:4px 0 0;
  color:#8b9690;
  font-size:12.5px
}

.partner-assets-summary__intro strong{
  font-size:17px
}

.partner-assets-summary .is-highlight{
  background:linear-gradient(110deg,#effaf3,#fff)
}

.partner-assets-summary .is-highlight strong{
  color:#17833e
}

.partner-assets-card{
  overflow:hidden;
  border:1px solid #dfe6e1;
  border-radius:16px;
  background:var(--surface);
  box-shadow:0 5px 18px rgba(15,23,42,.045)
}

.partner-assets-card .partner-directory-head{
  border-bottom:1px solid #e7ece8
}

.partner-assets-table{
  min-width:1080px;
  margin:0!important
}

.partner-assets-table th{
  padding:12px 14px!important;
  background:var(--surface-2)!important;
  color:#7d8981!important;
  font-size:11px!important;
  letter-spacing:.035em;
  text-transform:uppercase
}

.partner-assets-table td{
  padding:13px 14px!important;
  vertical-align:middle!important;
  border-bottom:1px solid #edf0ee!important;
  color:#59635d;
  font-size:13px!important
}

.partner-assets-table tbody tr:last-child td{
  border-bottom:0!important
}

.partner-asset-identity{
  display:grid;
  grid-template-columns:38px minmax(150px,1fr);
  align-items:center;
  gap:10px
}

.partner-asset-identity>span{
  display:grid;
  width:38px;
  height:38px;
  place-items:center;
  border-radius:10px;
  background:#e8f7ed;
  color:#168b45
}

.partner-asset-identity strong,.partner-asset-location strong,.partner-asset-valuation strong{
  display:block;
  color:#17211c;
  font-size:13px
}

.partner-asset-identity small,.partner-asset-location small,.partner-asset-valuation small{
  display:block;
  margin-top:2px;
  color:#929d96;
  font-size:11.5px
}

.partner-asset-identity small{
  max-width:260px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

.partner-asset-status{
  display:inline-flex;
  align-items:center;
  border:1px solid transparent;
  border-radius:999px;
  padding:4px 9px;
  font-size:11.5px;
  font-weight:750
}

.partner-asset-status.is-active{
  border-color:#addbbc;
  background:#e8f7ed;
  color:#177b3a
}

.partner-asset-status.is-consumed{
  border-color:#f0cc91;
  background:#fff4df;
  color:#a65f05
}

.partner-asset-status.is-sold{
  border-color:#bcd2f7;
  background:#eef4ff;
  color:#2864bd
}

.partner-asset-status.is-missing{
  border-color:#efbcbc;
  background:#fff0f0;
  color:#c84040
}

.partner-assets-empty td,.partner-assets-no-results td{
  height:180px!important;
  text-align:center!important;
  color:#8a9690!important
}

.partner-assets-empty svg{
  display:block;
  margin:0 auto 8px
}

.partner-assets-empty strong,.partner-assets-empty span{
  display:block
}

.partner-assets-empty strong{
  color:#556159;
  margin-bottom:3px
}

.partner-asset-dialog{
  width:min(880px,calc(100% - 28px));
  margin:24px auto
}

.partner-asset-form-body{
  max-height:calc(100vh - 190px);
  overflow-y:auto
}

.partner-asset-value-help{
  display:flex;
  gap:8px;
  margin-top:14px;
  padding:10px 12px;
  border-radius:10px;
  background:#f3f7f4;
  color:#607068;
  font-size:12px;
  line-height:1.45
}

.partner-asset-value-help svg{
  flex:0 0 auto;
  margin-top:1px
}

.partner-rate-input{
  display:flex
}

.partner-rate-input .finput{
  border-radius:9px 0 0 9px!important
}

.partner-rate-input>span{
  display:grid;
  min-width:44px;
  place-items:center;
  border:1px solid #dce4df;
  border-left:0;
  border-radius:0 9px 9px 0;
  background:#f4f7f5;
  color:#617067;
  font-weight:700
}

@media(max-width:900px){
  .partner-assets-summary{
    grid-template-columns:repeat(2,1fr)
  }

  .partner-assets-summary>div:nth-child(3){
    border-top:1px solid #e6ebe8;
    border-left:0
  }

  .partner-assets-summary>div:nth-child(4){
    border-top:1px solid #e6ebe8
  }
}

@media(max-width:600px){
  .partner-assets-summary{
    grid-template-columns:1fr
  }

  .partner-assets-summary>div{
    border-top:1px solid #e6ebe8;
    border-left:0
  }

  .partner-assets-summary>div:first-child{
    border-top:0
  }

  .partner-asset-dialog{
    width:calc(100% - 16px);
    margin:8px auto
  }

  .partner-asset-form-body{
    max-height:none;
    overflow:visible
  }
}

/* Manufacturing */

.manufacturing-page{
  max-width:1480px
}

.manufacturing-nav{
  display:flex;
  align-items:center;
  gap:6px;
  margin-bottom:18px;
  padding:6px;
  border:1px solid #dfe6e2;
  border-radius:14px;
  background:#f4f7f5;
  box-shadow:0 3px 12px rgba(15,23,42,.035)
}

.manufacturing-nav__brand,.manufacturing-nav__item{
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-height:42px;
  padding:0 14px;
  border-radius:10px;
  color:#627068;
  font-size:13.5px;
  font-weight:650;
  text-decoration:none;
  transition:.15s ease
}

.manufacturing-nav__brand{
  color:#243029;
  font-weight:750
}

.manufacturing-nav__item:hover{
  background:var(--surface);
  color:#1f7d40
}

.manufacturing-nav__item.is-active{
  border:1px solid #dce4df;
  background:var(--surface);
  color:#17211c;
  box-shadow:0 2px 6px rgba(15,23,42,.06)
}

.manufacturing-nav__item.is-active svg{
  color:#1b9a4c
}

.manufacturing-overview-card{
  display:flex;
  align-items:center;
  gap:13px;
  margin-bottom:16px;
  padding:17px 18px;
  border:1px solid #dfe6e2;
  border-radius:15px;
  background:var(--surface);
  box-shadow:0 4px 14px rgba(15,23,42,.04)
}

.manufacturing-overview-card>div{
  min-width:0
}

.manufacturing-overview-icon{
  display:grid;
  width:42px;
  height:42px;
  flex:0 0 42px;
  place-items:center;
  border-radius:11px;
  background:#e7f7ed;
  color:#168b44
}

.manufacturing-overview-icon.is-blue{
  background:#eaf2ff;
  color:#2872d8
}

.manufacturing-overview-card strong{
  display:block;
  color:#17211c;
  font-size:16px;
  line-height:1.25
}

.manufacturing-overview-card p{
  margin:3px 0 0;
  color:#87938d;
  font-size:13px
}

.manufacturing-eyebrow{
  display:block;
  margin-bottom:3px;
  color:#208241;
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase
}

.manufacturing-price-action{
  margin-left:auto
}

.manufacturing-price-action:disabled{
  opacity:.5;
  cursor:not-allowed
}

.manufacturing-price-action.has-selection{
  border-color:#a9d6b7;
  background:#eff9f2;
  color:#177d3c
}

.manufacturing-filter-card,.manufacturing-ledger-card{
  margin-bottom:16px
}

.manufacturing-toggle-field{
  display:flex;
  align-items:center;
  gap:11px;
  min-height:44px;
  margin-top:25px;
  padding:9px 12px;
  border:1px solid #dfe6e2;
  border-radius:10px;
  background:var(--surface-2);
  cursor:pointer
}

.manufacturing-toggle-field input{
  width:18px;
  height:18px;
  accent-color:#24964b
}

.manufacturing-toggle-copy strong,.manufacturing-toggle-copy small{
  display:block
}

.manufacturing-toggle-copy strong{
  color:#27322c;
  font-size:13px
}

.manufacturing-toggle-copy small{
  margin-top:1px;
  color:#8b9690;
  font-size:11.5px
}

.manufacturing-table{
  min-width:940px;
  margin:0!important
}

.manufacturing-table th{
  padding:12px 14px!important;
  background:#f6f8f7!important;
  color:#7e8b84!important;
  font-size:11px!important;
  font-weight:750!important;
  letter-spacing:.04em;
  text-transform:uppercase
}

.manufacturing-table td{
  padding:13px 14px!important;
  vertical-align:middle!important;
  border-bottom:1px solid #ebefed!important;
  color:#56625b;
  font-size:13px!important
}

.manufacturing-table tbody tr:hover td{
  background:#fbfdfc
}

.manufacturing-check{
  width:44px
}

.manufacturing-check input,.manufacturing-table .row-select{
  width:17px;
  height:17px;
  accent-color:#24964b
}

.manufacturing-recipe-cell{
  display:flex;
  align-items:center;
  gap:11px
}

.manufacturing-recipe-cell>span{
  display:grid;
  width:38px;
  height:38px;
  flex:0 0 38px;
  place-items:center;
  border-radius:10px;
  background:#e8f7ed;
  color:#198a45
}

.manufacturing-recipe-cell strong,.manufacturing-recipe-cell small{
  display:block
}

.manufacturing-recipe-cell strong{
  color:#17211c;
  font-size:13.5px
}

.manufacturing-recipe-cell small{
  margin-top:2px;
  color:#8e9993;
  font-size:11.5px
}

.manufacturing-row-actions{
  display:flex;
  justify-content:flex-end;
  gap:6px
}

.manufacturing-row-actions .act{
  display:grid;
  width:34px;
  height:34px;
  place-items:center;
  padding:0
}

.manufacturing-modal-dialog{
  width:min(1040px,calc(100% - 28px));
  margin:24px auto
}

.manufacturing-modal{
  overflow:hidden;
  border:0!important;
  border-radius:16px!important;
  background:var(--surface);
  box-shadow:0 24px 70px rgba(15,23,42,.28)
}

.manufacturing-modal__header{
  display:flex;
  align-items:center;
  gap:12px;
  padding:16px 18px;
  border-bottom:1px solid #e6ebe8
}

.manufacturing-modal__header>span{
  display:grid;
  width:40px;
  height:40px;
  place-items:center;
  border-radius:11px;
  background:#e7f7ed;
  color:#168b44
}

.manufacturing-modal__header h3{
  margin:0;
  color:#17211c;
  font-size:18px
}

.manufacturing-modal__header p{
  margin:2px 0 0;
  color:#8b9690;
  font-size:12.5px
}

.manufacturing-modal__header .close{
  display:grid;
  width:34px;
  height:34px;
  margin-left:auto;
  place-items:center;
  border:0;
  border-radius:9px;
  background:#f3f6f4;
  color:#65736b;
  opacity:1
}

.manufacturing-modal__body{
  padding:18px
}

.manufacturing-modal__footer{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  padding:13px 18px;
  border-top:1px solid #e6ebe8;
  background:#fbfcfb
}

.manufacturing-recipe-document{
  padding:2px
}

.manufacturing-document-head{
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:4px 2px 15px;
  border-bottom:2px solid #17211c
}

.manufacturing-document-head h2{
  margin:3px 0;
  color:#17211c;
  font-size:24px
}

.manufacturing-document-head p{
  margin:0;
  color:#168b44;
  font-size:13px;
  font-weight:750
}

.manufacturing-document-meta{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin:15px 0
}

.manufacturing-info-card{
  padding:14px;
  border:1px solid #dfe6e2;
  border-radius:12px;
  background:var(--surface)
}

.manufacturing-info-card small{
  display:block;
  color:#89958e;
  font-size:10px;
  font-weight:750;
  letter-spacing:.05em;
  text-transform:uppercase
}

.manufacturing-info-card strong{
  display:block;
  margin-top:6px;
  color:#17211c;
  font-size:14px
}

.manufacturing-info-card p{
  margin:3px 0 0;
  color:#66736c;
  font-size:12.5px
}

.manufacturing-metric-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin:14px 0
}

.manufacturing-metric{
  padding:13px;
  border:1px solid #dfe6e2;
  border-radius:11px;
  background:#f8faf9
}

.manufacturing-metric span{
  display:block;
  color:#7d8982;
  font-size:11.5px
}

.manufacturing-metric strong{
  display:block;
  margin-top:4px;
  color:#17211c;
  font-size:17px
}

.manufacturing-document-section{
  overflow:hidden;
  margin-top:14px;
  border:1px solid #dfe6e2;
  border-radius:12px
}

.manufacturing-document-section__head{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-bottom:1px solid #e6ebe8;
  background:var(--surface-2)
}

.manufacturing-document-section__head strong,.manufacturing-document-section__head small{
  display:block
}

.manufacturing-document-section__head strong{
  font-size:14px
}

.manufacturing-document-section__head small{
  margin-top:2px;
  color:#8b9690;
  font-size:11.5px
}

.manufacturing-empty{
  display:flex;
  min-height:130px;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  color:#89958e;
  text-align:center
}

.manufacturing-empty strong{
  margin-top:7px;
  color:#56635c;
  font-size:13px
}

.manufacturing-empty small{
  margin-top:3px;
  font-size:11.5px
}

.manufacturing-settings-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px
}

.manufacturing-setting-option{
  display:flex;
  gap:12px;
  padding:15px;
  border:1px solid #dfe6e2;
  border-radius:12px;
  background:#f8faf9;
  cursor:pointer
}

.manufacturing-setting-option input{
  width:18px;
  height:18px;
  flex:0 0 18px;
  accent-color:#24964b
}

.manufacturing-setting-option strong,.manufacturing-setting-option small{
  display:block
}

.manufacturing-setting-option strong{
  color:#253129;
  font-size:13.5px
}

.manufacturing-setting-option small{
  margin-top:3px;
  color:#89958e;
  font-size:12px;
  line-height:1.45
}

.manufacturing-report-summary{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-bottom:16px
}

.manufacturing-report-stat{
  padding:18px;
  border:1px solid #dfe6e2;
  border-radius:14px;
  background:var(--surface)
}

.manufacturing-report-stat span{
  color:#7e8a83;
  font-size:12px;
  font-weight:650
}

.manufacturing-report-stat strong{
  display:block;
  margin-top:7px;
  color:#17211c;
  font-size:24px
}

.manufacturing-report-stat.is-green strong{
  color:#17833e
}

.manufacturing-report-links{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px
}

.manufacturing-report-link{
  display:flex;
  align-items:center;
  gap:10px;
  padding:13px;
  border:1px solid #dfe6e2;
  border-radius:11px;
  background:var(--surface);
  color:#344139;
  font-size:13px;
  font-weight:650;
  text-decoration:none
}

.manufacturing-report-link:hover{
  border-color:#abd7b8;
  background:#f1faf4;
  color:#177e3d
}

.manufacturing-report-print{
  margin-top:16px
}

.manufacturing-version{
  margin-top:12px;
  color:#8a9690;
  font-size:12px
}

@media(max-width:900px){
  .manufacturing-nav{
    overflow-x:auto
  }

  .manufacturing-nav__brand{
    display:none
  }

  .manufacturing-settings-grid,.manufacturing-report-summary{
    grid-template-columns:1fr
  }

  .manufacturing-report-links{
    grid-template-columns:repeat(2,1fr)
  }

  .manufacturing-document-meta,.manufacturing-metric-grid{
    grid-template-columns:1fr
  }

  .manufacturing-overview-card{
    align-items:flex-start;
    flex-wrap:wrap
  }

  .manufacturing-price-action{
    margin-left:55px
  }
}

@media(max-width:600px){
  .manufacturing-nav__item{
    white-space:nowrap
  }

  .manufacturing-report-links{
    grid-template-columns:1fr
  }

  .manufacturing-modal-dialog{
    width:calc(100% - 16px);
    margin:8px auto
  }

  .manufacturing-modal__body{
    padding:13px
  }
}

@media print{
  .manufacturing-nav,.manufacturing-page>.page-header,.manufacturing-filter-card,.manufacturing-report-print,.manufacturing-modal__header,.manufacturing-modal__footer{
    display:none!important
  }

  .manufacturing-recipe-document,.manufacturing-report-document{
    display:block!important
  }

  .manufacturing-document-section,.manufacturing-info-card,.manufacturing-report-stat{
    -moz-column-break-inside:avoid;
         break-inside:avoid;
    box-shadow:none!important
  }
}

/* Manufacturing production workflow */

.manufacturing-production-form-page form{
  display:grid;
  gap:16px;
  padding-bottom:88px
}

.manufacturing-form-steps{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  padding:8px;
  border:1px solid #dfe6e2;
  border-radius:14px;
  background:var(--surface);
  box-shadow:0 3px 12px rgba(15,23,42,.035)
}

.manufacturing-form-steps>div{
  position:relative;
  display:grid;
  grid-template-columns:34px 1fr;
  -moz-column-gap:10px;
       column-gap:10px;
  align-items:center;
  min-height:54px;
  padding:8px 12px;
  border-radius:10px;
  color:#89958e
}

.manufacturing-form-steps>div:not(:last-child):after{
  position:absolute;
  right:-5px;
  top:50%;
  width:10px;
  height:1px;
  background:#dfe6e2;
  content:""
}

.manufacturing-form-steps span{
  display:grid;
  grid-row:span 2;
  width:34px;
  height:34px;
  place-items:center;
  border-radius:10px;
  background:#f2f6f4;
  font-size:12px;
  font-weight:800
}

.manufacturing-form-steps strong{
  color:#17211c;
  font-size:14px;
  line-height:1.25
}

.manufacturing-form-steps small{
  margin-top:2px;
  font-size:12px
}

.manufacturing-form-steps .is-active{
  background:#f0faf4;
  color:#16813d
}

.manufacturing-form-steps .is-active span{
  background:#24964b;
  color:#fff
}

.manufacturing-form-grid{
  display:grid;
  gap:16px
}

.manufacturing-production-detail-grid{
  grid-template-columns:repeat(4,minmax(0,1fr))
}

.manufacturing-document-field{
  grid-column:span 2
}

.manufacturing-quantity-control,.manufacturing-addon-control,.manufacturing-cost-control,.manufacturing-percent-control,.manufacturing-line-quantity{
  display:flex;
  align-items:stretch
}

.manufacturing-quantity-control>.finput,.manufacturing-addon-control>.finput,.manufacturing-line-quantity>.finput,.manufacturing-percent-control>.finput{
  min-width:0;
  border-radius:9px 0 0 9px
}

.manufacturing-quantity-control>span,.manufacturing-addon-control>span,.manufacturing-line-quantity>span,.manufacturing-percent-control>span{
  display:flex;
  min-width:62px;
  align-items:center;
  padding:0 12px;
  border:1px solid #dfe6e2;
  border-left:0;
  border-radius:0 9px 9px 0;
  background:var(--surface-2);
  color:#6c7871;
  font-size:13px;
  font-weight:700
}

.manufacturing-quantity-control select,.manufacturing-line-quantity select{
  min-width:104px;
  border:0;
  background-color:transparent
}

.manufacturing-cost-control{
  gap:8px
}

.manufacturing-cost-control>.finput{
  min-width:0;
  border-radius:9px
}

.manufacturing-cost-control .select2-container,.manufacturing-cost-control>div{
  flex:0 0 150px
}

.manufacturing-ingredient-workspace{
  min-height:170px
}

.manufacturing-recipe-empty{
  display:grid;
  min-height:170px;
  align-content:center;
  justify-items:center;
  padding:28px;
  border:1px dashed #cad6cf;
  border-radius:12px;
  background:linear-gradient(180deg,#fbfdfc,#f7faf8);
  color:#849088;
  text-align:center
}

.manufacturing-recipe-empty svg{
  margin-bottom:9px;
  color:#329a57
}

.manufacturing-recipe-empty strong{
  color:#17211c;
  font-size:15px
}

.manufacturing-recipe-empty small{
  margin-top:5px;
  font-size:13px
}

.manufacturing-ingredient-table-wrap{
  overflow-x:auto;
  border:1px solid #dfe6e2;
  border-radius:12px
}

.manufacturing-ingredient-table{
  width:100%;
  min-width:850px;
  border-collapse:collapse
}

.manufacturing-ingredient-table th{
  padding:12px 14px;
  border-bottom:1px solid #dfe6e2;
  background:#f6f8f7;
  color:#849088;
  font-size:11px;
  font-weight:800;
  letter-spacing:.04em;
  text-align:left;
  text-transform:uppercase
}

.manufacturing-ingredient-table td{
  padding:12px 14px;
  border-bottom:1px solid #edf0ee;
  color:#17211c;
  font-size:13px;
  vertical-align:middle
}

.manufacturing-ingredient-table th:nth-child(n+2),.manufacturing-ingredient-table td:nth-child(n+2){
  text-align:right
}

.manufacturing-ingredient-name{
  display:flex;
  min-width:230px;
  align-items:center;
  gap:9px
}

.manufacturing-ingredient-name>span{
  display:grid;
  width:32px;
  height:32px;
  flex:0 0 32px;
  place-items:center;
  border-radius:9px;
  background:#e9f7ee;
  color:#16813d
}

.manufacturing-ingredient-name strong{
  font-size:13px
}

.manufacturing-ingredient-row .finput{
  height:38px;
  padding:8px 10px;
  font-size:13px;
  text-align:right
}

.manufacturing-line-quantity,.manufacturing-percent-control{
  min-width:150px;
  justify-content:flex-end
}

.manufacturing-line-quantity>span,.manufacturing-percent-control>span{
  min-width:48px
}

.manufacturing-ingredient-table .ingredient_group_row td{
  text-align:left;
  background:#eff9f2;
  color:#217c40
}

.manufacturing-ingredient-total-row td{
  border:0;
  background:#f7faf8
}

.manufacturing-ingredient-total-row td:first-child{
  text-align:right
}

.manufacturing-cost-layout{
  display:grid;
  grid-template-columns:minmax(0,1.6fr) minmax(300px,.6fr);
  align-items:start;
  gap:20px
}

.manufacturing-cost-fields{
  grid-template-columns:repeat(2,minmax(0,1fr))
}

.manufacturing-cost-summary{
  overflow:hidden;
  border:1px solid #b9dcc6;
  border-radius:12px;
  background:#f5fcf7
}

.manufacturing-cost-summary .eyebrow{
  display:block;
  padding:14px 16px 8px;
  color:#2a7943;
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em
}

.manufacturing-cost-summary>div{
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:10px 16px;
  border-top:1px solid #dbece0;
  color:#6d7972;
  font-size:13px
}

.manufacturing-cost-summary>div strong{
  color:#17211c
}

.manufacturing-cost-summary .manufacturing-grand-total{
  padding-block:14px;
  background:#e4f5e9;
  color:#157738;
  font-weight:800
}

.manufacturing-cost-summary .manufacturing-grand-total strong{
  color:#157738;
  font-size:18px
}

.manufacturing-finalize-option{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin:12px;
  padding:12px;
  border:1px solid #d3e8da;
  border-radius:10px;
  background:var(--surface);
  cursor:pointer
}

.manufacturing-finalize-option input{
  margin-top:2px
}

.manufacturing-finalize-option span{
  display:grid;
  gap:3px
}

.manufacturing-finalize-option strong{
  font-size:13px
}

.manufacturing-finalize-option small{
  color:#7b8881;
  font-size:12px
}

.manufacturing-existing-files{
  margin-top:10px
}

.manufacturing-form-actions{
  left:var(--sidebar-width,230px);
  z-index:35
}

@media(max-width:1100px){
  .manufacturing-production-detail-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

  .manufacturing-cost-layout{
    grid-template-columns:1fr
  }
}

@media(max-width:767px){
  .manufacturing-form-steps,.manufacturing-production-detail-grid,.manufacturing-cost-fields{
    grid-template-columns:1fr
  }

  .manufacturing-form-steps>div:not(:last-child):after{
    display:none
  }

  .manufacturing-document-field{
    grid-column:auto
  }

  .manufacturing-form-actions{
    left:0
  }
}

/* Manufacturing recipe editor and production record */

.manufacturing-recipe-editor-page form{
  display:grid;
  gap:16px;
  padding-bottom:88px
}

.manufacturing-recipe-product-banner{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:16px;
  padding:13px 14px;
  border:1px solid #dfe6e2;
  border-radius:12px;
  background:#f7faf8
}

.manufacturing-recipe-product-banner>span{
  display:grid;
  width:40px;
  height:40px;
  flex:none;
  place-items:center;
  border-radius:10px;
  background:#e7f7ed;
  color:#17833f
}

.manufacturing-recipe-product-banner small,.manufacturing-recipe-product-banner strong{
  display:block
}

.manufacturing-recipe-product-banner small{
  color:#849088;
  font-size:11px
}

.manufacturing-recipe-product-banner strong{
  margin-top:2px;
  color:#17211c;
  font-size:14px
}

.manufacturing-recipe-product-banner .btn-ghost{
  margin-left:auto;
  white-space:nowrap
}

.manufacturing-recipe-groups{
  display:grid;
  gap:14px
}

.manufacturing-recipe-group{
  overflow:hidden!important;
  margin:0!important;
  border:1px solid #dfe6e2!important;
  border-radius:12px!important;
  background:var(--surface)!important;
  box-shadow:none!important
}

.manufacturing-recipe-group.is-optional{
  border-color:#cfe1d5!important
}

.manufacturing-recipe-search{
  padding:15px
}

.manufacturing-recipe-search label{
  display:block;
  margin-bottom:7px;
  color:#47534c;
  font-size:13px;
  font-weight:750
}

.manufacturing-recipe-search small{
  display:block;
  margin-top:6px;
  color:#89958e;
  font-size:12px
}

.manufacturing-search-control{
  display:flex;
  height:43px;
  align-items:center;
  gap:9px;
  padding:0 12px;
  border:1px solid #d7dfda;
  border-radius:10px;
  background:#f8faf9;
  color:#89958e;
  transition:.18s
}

.manufacturing-search-control:focus-within{
  border-color:#24964b;
  box-shadow:0 0 0 3px rgba(36,150,75,.12);
  background:var(--surface)
}

.manufacturing-search-control input{
  width:100%;
  height:auto!important;
  padding:0!important;
  border:0!important;
  outline:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#17211c;
  font-size:13.5px
}

.manufacturing-recipe-lines-wrap{
  overflow-x:auto;
  border-top:1px solid #e5eae7
}

.manufacturing-recipe-lines{
  min-width:800px;
  margin:0!important
}

.manufacturing-recipe-lines thead th{
  padding:11px 14px!important;
  border-bottom:1px solid #dfe6e2!important;
  background:#f5f8f6!important;
  color:#7d8982!important;
  font-size:10.5px!important;
  font-weight:800!important;
  letter-spacing:.045em;
  text-transform:uppercase
}

.manufacturing-recipe-lines tbody td{
  padding:12px 14px!important;
  border-color:#edf1ee!important;
  vertical-align:middle!important;
  color:#344139;
  font-size:13px
}

.manufacturing-recipe-lines th:nth-child(n+2),.manufacturing-recipe-lines td:nth-child(n+2){
  text-align:right
}

.manufacturing-recipe-lines .manufacturing-remove-column{
  width:64px;
  text-align:center!important
}

.manufacturing-recipe-ingredient-name{
  display:flex;
  min-width:250px;
  align-items:center;
  gap:9px;
  text-align:left
}

.manufacturing-recipe-ingredient-name .handle{
  display:grid;
  width:28px;
  height:32px;
  flex:none;
  place-items:center;
  border:0;
  background:transparent;
  color:#9aa59f;
  cursor:grab
}

.manufacturing-recipe-ingredient-name>span{
  display:grid;
  width:33px;
  height:33px;
  flex:none;
  place-items:center;
  border-radius:9px;
  background:#e9f7ee;
  color:#16813d
}

.manufacturing-recipe-ingredient-name strong{
  color:#17211c;
  font-size:13px
}

.manufacturing-recipe-lines .manufacturing-percent-control,.manufacturing-recipe-lines .manufacturing-line-quantity{
  margin-left:auto
}

.manufacturing-recipe-empty-row{
  display:none;
  padding:32px;
  text-align:center;
  color:#8b9690;
  font-size:13px
}

.manufacturing-recipe-lines tbody:empty+.manufacturing-recipe-empty-row{
  display:block
}

.manufacturing-recipe-group-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:13px 15px;
  border-bottom:1px solid #e5eae7;
  background:#f7faf8
}

.manufacturing-recipe-group-head>div{
  display:flex;
  align-items:center;
  gap:10px
}

.manufacturing-recipe-group-head>div>span{
  display:grid;
  width:35px;
  height:35px;
  place-items:center;
  border-radius:9px;
  background:#e9f7ee;
  color:#16813d
}

.manufacturing-recipe-group-head strong,.manufacturing-recipe-group-head small{
  display:block
}

.manufacturing-recipe-group-head strong{
  color:#17211c;
  font-size:13.5px
}

.manufacturing-recipe-group-head small{
  margin-top:2px;
  color:#87938c;
  font-size:11.5px
}

.manufacturing-recipe-group-fields{
  display:grid;
  grid-template-columns:1fr 1.15fr 1.2fr;
  gap:14px;
  padding:15px
}

.manufacturing-recipe-group-fields textarea.finput{
  min-height:43px;
  height:43px;
  resize:vertical
}

.manufacturing-recipe-cost-layout{
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(310px,.55fr);
  gap:20px
}

.manufacturing-recipe-cost-fields{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px
}

.manufacturing-recipe-cost-summary{
  overflow:hidden;
  border:1px solid #b9dcc6;
  border-radius:12px;
  background:#f7fcf8
}

.manufacturing-recipe-cost-summary>.eyebrow{
  display:block;
  padding:14px 16px 8px;
  color:#267a42;
  font-size:10px;
  font-weight:850;
  letter-spacing:.08em
}

.manufacturing-recipe-cost-summary>div{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:11px 16px;
  border-top:1px solid #deebe2;
  color:#647169;
  font-size:13px
}

.manufacturing-recipe-cost-summary>div strong{
  color:#17211c;
  font-size:14px
}

.manufacturing-recipe-cost-summary .is-total{
  background:#e4f5e9;
  color:#157738;
  font-weight:800
}

.manufacturing-recipe-cost-summary .is-total strong{
  display:flex;
  align-items:center;
  gap:4px;
  color:#157738;
  font-size:19px
}

.manufacturing-recipe-cost-summary #total{
  width:115px;
  padding:0;
  border:0;
  outline:0;
  background:transparent;
  color:inherit;
  text-align:right;
  font-weight:850
}

.manufacturing-instructions{
  min-height:145px!important;
  padding:12px!important;
  resize:vertical
}

.manufacturing-document-date{
  text-align:right
}

.manufacturing-document-date small,.manufacturing-document-date strong,.manufacturing-document-date span{
  display:block
}

.manufacturing-document-date small{
  color:#8a9690;
  font-size:10px;
  text-transform:uppercase
}

.manufacturing-document-date strong{
  margin-top:4px;
  color:#17211c;
  font-size:15px
}

.manufacturing-document-date span{
  margin-top:3px;
  color:#748078;
  font-size:11.5px
}

.manufacturing-detail-list{
  display:grid;
  gap:9px;
  margin:10px 0 0
}

.manufacturing-detail-list>div{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px
}

.manufacturing-detail-list dt{
  color:#839088;
  font-size:11.5px;
  font-weight:600
}

.manufacturing-detail-list dd{
  margin:0;
  color:#17211c;
  font-size:12.5px;
  font-weight:750;
  text-align:right
}

.manufacturing-status{
  display:inline-flex;
  align-items:center;
  padding:5px 8px;
  border-radius:999px;
  background:#eef2ef;
  color:#58665e;
  font-size:10.5px;
  font-weight:800
}

.manufacturing-status.is-final,.manufacturing-status.is-received,.manufacturing-status.is-completed{
  background:#e4f5e9;
  color:#177d3d
}

.manufacturing-status.is-pending{
  background:#fff2dc;
  color:#a76209
}

.manufacturing-production-view-table-wrap{
  overflow-x:auto
}

.manufacturing-production-view-table{
  width:100%;
  min-width:800px;
  border-collapse:collapse
}

.manufacturing-production-view-table th{
  padding:10px 12px;
  border-bottom:1px solid #dfe6e2;
  background:#f5f8f6;
  color:#7d8982;
  font-size:10px;
  font-weight:850;
  letter-spacing:.04em;
  text-align:left;
  text-transform:uppercase
}

.manufacturing-production-view-table td{
  padding:11px 12px;
  border-bottom:1px solid #edf1ee;
  color:#4d5a52;
  font-size:12.5px
}

.manufacturing-production-view-table th:not(:first-child),.manufacturing-production-view-table td:not(:first-child){
  text-align:right
}

.manufacturing-production-view-table td strong,.manufacturing-production-view-table td small{
  display:block
}

.manufacturing-production-view-table td strong{
  color:#17211c
}

.manufacturing-production-view-table td small{
  margin-top:3px;
  color:#8a9690;
  font-size:10.5px
}

.manufacturing-production-view-table tr.is-group td{
  background:#eef8f1;
  color:#227a40;
  text-align:left
}

.manufacturing-production-totals{
  width:min(430px,100%);
  margin:16px 0 0 auto;
  overflow:hidden;
  border:1px solid #d6e6dc;
  border-radius:12px;
  background:var(--surface)
}

.manufacturing-production-totals>div{
  display:flex;
  justify-content:space-between;
  gap:18px;
  padding:10px 14px;
  border-bottom:1px solid #e8ece9;
  color:#657169;
  font-size:12.5px
}

.manufacturing-production-totals>div:last-child{
  border:0
}

.manufacturing-production-totals strong{
  color:#17211c
}

.manufacturing-production-totals .is-total{
  padding-block:13px;
  background:#e4f5e9;
  color:#16773a;
  font-weight:850
}

.manufacturing-production-totals .is-total strong{
  color:#16773a;
  font-size:17px
}

.manufacturing-production-files{
  margin-top:16px
}

@media(max-width:1000px){
  .manufacturing-recipe-cost-layout{
    grid-template-columns:1fr
  }

  .manufacturing-recipe-group-fields,.manufacturing-recipe-cost-fields{
    grid-template-columns:1fr 1fr
  }

  .manufacturing-recipe-product-banner{
    align-items:flex-start;
    flex-wrap:wrap
  }

  .manufacturing-recipe-product-banner .btn-ghost{
    margin-left:52px
  }
}

@media(max-width:640px){
  .manufacturing-recipe-group-fields,.manufacturing-recipe-cost-fields{
    grid-template-columns:1fr
  }

  .manufacturing-recipe-product-banner .btn-ghost{
    width:100%;
    margin-left:0
  }

  .manufacturing-recipe-group-head small{
    display:none
  }

  .manufacturing-document-date{
    text-align:left
  }
}

@media print{
  .manufacturing-production-document{
    display:block!important
  }

  .manufacturing-production-view-table{
    min-width:0
  }

  .manufacturing-production-view-table-wrap{
    overflow:visible
  }

  .manufacturing-production-files a{
    color:#17211c;
    text-decoration:none
  }
}

/* Manufacturing recipe chooser and compact selects */

.manufacturing-choose-recipe-dialog{
  width:min(760px,calc(100% - 28px));
  margin:clamp(18px,6vh,56px) auto
}

.manufacturing-choice-form{
  margin:0
}

.manufacturing-modal-section{
  padding:16px;
  border:1px solid #dfe6e2;
  border-radius:13px;
  background:#fbfcfb
}

.manufacturing-section-head{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding-bottom:13px;
  border-bottom:1px solid #e8ece9
}

.manufacturing-section-head>span{
  display:grid;
  width:34px;
  height:34px;
  flex:0 0 34px;
  place-items:center;
  border-radius:9px;
  background:#e8f7ed;
  color:#168b44
}

.manufacturing-section-head strong{
  display:block;
  color:#17211c;
  font-size:14px;
  line-height:1.3
}

.manufacturing-section-head p{
  margin:2px 0 0;
  color:#7d8982;
  font-size:12.5px;
  line-height:1.45
}

.manufacturing-choice-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
  padding-top:15px
}

.manufacturing-choice-field{
  min-width:0
}

.manufacturing-choice-field>.flabel{
  margin-bottom:7px;
  color:#46534c;
  font-size:13px;
  font-weight:750
}

.manufacturing-select-field{
  position:relative;
  width:100%
}

.manufacturing-select-field>.select2-container{
  display:block;
  width:100%!important
}

.manufacturing-choice-field .field-help{
  display:block;
  margin-top:6px;
  color:#849088;
  font-size:12px;
  line-height:1.4
}

.manufacturing-choose-recipe-dialog .select2-container .select2-selection--single{
  min-height:43px
}

.manufacturing-choose-recipe-dialog .select2-container--default .select2-selection--single .select2-selection__rendered{
  padding-left:13px;
  line-height:41px
}

.manufacturing-choose-recipe-dialog .select2-container--default .select2-selection--single .select2-selection__arrow{
  height:41px
}

.manufacturing-select-field>.select2-container--open{
  left:0!important;
  top:calc(100% + 5px)!important;
  width:100%!important
}

.manufacturing-select-field>.select2-container--open.select2-dropdown-open{
  border:1px solid #cbd8d0!important;
  border-radius:11px!important;
  outline:0!important;
  box-shadow:0 16px 34px -14px rgba(15,35,24,.32)!important
}

.manufacturing-select-dropdown{
  width:100%!important;
  min-width:100%!important;
  z-index:1070
}

.manufacturing-select-dropdown .select2-results__options{
  max-height:240px!important
}

.manufacturing-select-dropdown .select2-results__option{
  font-size:13px;
  line-height:1.4
}

.manufacturing-select-dropdown .select2-search--dropdown{
  padding:8px!important
}

.manufacturing-select-dropdown .select2-search--dropdown .select2-search__field{
  width:100%!important;
  height:38px!important;
  margin:0!important;
  font-size:13px
}

.manufacturing-select-dropdown .select2-results__option[aria-disabled=true]{
  padding:10px 12px;
  color:#87938d
}

.manufacturing-inline-select{
  -moz-appearance:none;
       appearance:none;
  -webkit-appearance:none;
  padding-right:30px!important;
  background-image:linear-gradient(45deg,transparent 50%,#7e8b84 50%),linear-gradient(135deg,#7e8b84 50%,transparent 50%)!important;
  background-position:calc(100% - 15px) 50%,calc(100% - 10px) 50%!important;
  background-size:5px 5px,5px 5px!important;
  background-repeat:no-repeat!important;
  cursor:pointer
}

.manufacturing-select-field>.select2-container--open:not(.select2-dropdown-open){
  position:relative!important;
  top:auto!important;
  left:auto!important
}

.manufacturing-select-field>.select2-container--open.select2-dropdown-open{
  left:0!important;
  top:calc(100% + 5px)!important;
  width:100%!important
}

#recipe_quantity_input:not(.has-unit)>.finput{
  border-radius:9px
}

#recipe_quantity_input #unit_html[hidden]{
  display:none
}

.manufacturing-choice-form .manufacturing-modal__footer .btn-ghost,.manufacturing-choice-form .manufacturing-modal__footer .btn-primary{
  display:inline-flex;
  min-width:108px;
  height:42px;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:0 16px;
  white-space:nowrap;
  line-height:1
}

.manufacturing-choice-form .manufacturing-modal__footer .manufacturing-continue-button{
  min-width:122px
}

.manufacturing-choice-form .manufacturing-modal__footer .form-submit-default,.manufacturing-choice-form .manufacturing-modal__footer .form-submit-progress{
  align-items:center;
  justify-content:center;
  gap:8px;
  white-space:nowrap
}

.manufacturing-choice-form .manufacturing-modal__footer .form-submit-default{
  display:inline-flex
}

.manufacturing-choice-form .manufacturing-modal__footer .form-submit-progress{
  display:none
}

.manufacturing-choice-form .manufacturing-modal__footer .form-submit-button.is-loading .form-submit-default{
  display:none
}

.manufacturing-choice-form .manufacturing-modal__footer .form-submit-button.is-loading .form-submit-progress{
  display:inline-flex
}

.manufacturing-choice-form .manufacturing-modal__footer svg{
  display:block;
  width:16px;
  height:16px;
  flex:0 0 16px
}

@media(max-width:600px){
  .manufacturing-choose-recipe-dialog{
    width:calc(100% - 16px);
    margin:8px auto
  }

  .manufacturing-modal-section{
    padding:13px
  }

  .manufacturing-choice-grid{
    gap:14px
  }

  .manufacturing-choice-form .manufacturing-modal__footer .btn-ghost,.manufacturing-choice-form .manufacturing-modal__footer .btn-primary{
    flex:1
  }
}

/* Manufacturing AJAX controls */

.manufacturing-nav__links{
  display:flex;
  min-width:0;
  align-items:center;
  gap:6px
}

.manufacturing-nav__brand-icon{
  display:grid;
  width:30px;
  height:30px;
  flex:0 0 30px;
  place-items:center;
  border-radius:8px;
  background:#e7f7ed;
  color:#168b44
}

.manufacturing-nav__brand svg,.manufacturing-nav__item svg{
  display:block;
  width:17px;
  height:17px;
  flex:0 0 17px
}

.manufacturing-row-actions .act svg{
  display:block;
  width:17px;
  height:17px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round
}

@media(max-width:760px){
  .manufacturing-nav{
    overflow:hidden
  }

  .manufacturing-nav__links{
    overflow-x:auto
  }

  .manufacturing-nav__item{
    flex:0 0 auto;
    white-space:nowrap
  }
}

.manufacturing-quantity-control.has-sub-unit #unit_html{
  min-width:128px;
  padding:0
}

.manufacturing-quantity-control #unit_html.is-select select{
  width:100%;
  height:100%;
  padding:0 32px 0 12px
}

.manufacturing-autocomplete.ui-autocomplete{
  z-index:1065!important;
  width:min(620px,calc(100vw - 32px))!important;
  max-height:320px;
  overflow-y:auto;
  padding:6px!important;
  border:1px solid #d8e1dc!important;
  border-radius:12px!important;
  background:var(--surface)!important;
  box-shadow:0 18px 45px rgba(15,23,42,.16)!important
}

.manufacturing-autocomplete .manufacturing-product-result{
  margin:0!important;
  border:0!important;
  background:transparent!important
}

.manufacturing-autocomplete .manufacturing-product-result__content{
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 10px;
  border-radius:9px;
  color:#26322b
}

.manufacturing-autocomplete .ui-state-active .manufacturing-product-result__content,.manufacturing-autocomplete .manufacturing-product-result__content:hover{
  margin:0!important;
  border:0!important;
  background:#edf8f1!important;
  color:#126f35!important
}

.manufacturing-product-result__icon{
  display:grid;
  width:34px;
  height:34px;
  flex:0 0 34px;
  place-items:center;
  border-radius:9px;
  background:#e7f6ec;
  color:#16813d
}

.manufacturing-product-result__icon svg{
  width:17px;
  height:17px
}

.manufacturing-product-result__content>span:last-child{
  display:grid;
  min-width:0;
  gap:2px
}

.manufacturing-product-result__content strong{
  overflow:hidden;
  font-size:13px;
  text-overflow:ellipsis;
  white-space:nowrap
}

.manufacturing-product-result__content small{
  color:#89958e;
  font-size:11.5px
}

/* Manufacturing: quantity and unit are one compound field, not two stacked controls. */

body.app-ui .manufacturing-quantity-control.has-unit,
body.app-ui .manufacturing-line-quantity{
  overflow:hidden;
  border:1px solid #d7dfda;
  border-radius:10px;
  background:#f8faf9;
  transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease;
}

body.app-ui .manufacturing-quantity-control.has-unit:focus-within,
body.app-ui .manufacturing-line-quantity:focus-within{
  border-color:#24964b;
  background:var(--surface);
  box-shadow:0 0 0 3px rgba(36,150,75,.12);
}

body.app-ui .manufacturing-quantity-control.has-unit>.finput,
body.app-ui .manufacturing-line-quantity>.finput{
  flex:1 1 auto;
  border:0!important;
  border-radius:0!important;
  outline:0!important;
  background:transparent!important;
  box-shadow:none!important;
}

body.app-ui .manufacturing-quantity-control.has-unit>span,
body.app-ui .manufacturing-line-quantity>span{
  flex:0 0 auto;
  border:0!important;
  border-left:1px solid #dfe6e2!important;
  border-radius:0!important;
  background:#f4f7f5;
}

body.app-ui .manufacturing-quantity-control.has-unit>span.is-select:hover,
body.app-ui .manufacturing-line-quantity>span.is-select:hover{
  background:#edf5f0;
}

body.app-ui .manufacturing-quantity-control.has-unit select,
body.app-ui .manufacturing-line-quantity select{
  height:100%!important;
  border:0!important;
  border-radius:0!important;
  outline:0!important;
  background-color:transparent!important;
  box-shadow:none!important;
}

/* Manufacturing report: preserve the original totals while presenting them as a compact report. */

body.app-ui .manufacturing-report-document{
  padding:20px;
  border:1px solid #dfe6e2;
  border-radius:16px;
  background:var(--surface);
  box-shadow:0 5px 18px rgba(15,23,42,.045);
}

body.app-ui .manufacturing-report-page .manufacturing-document-head{
  padding-bottom:4px;
  border-bottom:0;
}

body.app-ui .manufacturing-report-page .manufacturing-document-meta-copy{
  display:grid;
  min-width:330px;
  overflow:hidden;
  border:1px solid #dfe6e2;
  border-radius:12px;
  background:#f8faf9;
}

body.app-ui .manufacturing-report-page .manufacturing-document-meta-copy>div{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:9px 12px;
}

body.app-ui .manufacturing-report-page .manufacturing-document-meta-copy>div+div{
  border-top:1px solid #e5eae7;
}

body.app-ui .manufacturing-report-page .manufacturing-document-meta-copy small{
  color:#7f8c85;
  font-size:11.5px;
  font-weight:650;
}

body.app-ui .manufacturing-report-page .manufacturing-document-meta-copy strong{
  max-width:205px;
  overflow:hidden;
  color:#202b25;
  font-size:12px;
  text-align:right;
  text-overflow:ellipsis;
  white-space:nowrap;
}

body.app-ui .manufacturing-report-page .manufacturing-report-summary{
  margin:16px 0 0;
}

body.app-ui .manufacturing-report-page .manufacturing-report-stat{
  min-height:132px;
}

body.app-ui .manufacturing-report-page .manufacturing-report-stat__head{
  display:flex;
  align-items:center;
  gap:9px;
}

body.app-ui .manufacturing-report-page .manufacturing-report-stat__icon{
  display:grid;
  width:32px;
  height:32px;
  flex:0 0 32px;
  place-items:center;
  border-radius:9px;
  background:#e7f7ed;
  color:#188a44;
}

body.app-ui .manufacturing-report-page .manufacturing-report-stat__icon.is-amber{
  background:#fff1dc;
  color:#cf7412;
}

body.app-ui .manufacturing-report-page .manufacturing-report-stat__icon.is-blue{
  background:#e9f1ff;
  color:#2d72d6;
}

body.app-ui .manufacturing-report-page .manufacturing-report-stat>small{
  display:block;
  margin-top:5px;
  color:#8a9690;
  font-size:11.5px;
}

body.app-ui .manufacturing-report-print{
  display:flex;
  justify-content:flex-end;
}

body.app-ui #print-manufacturing-report:disabled{
  opacity:.55;
  cursor:wait;
}

@media(max-width:720px){
  body.app-ui .manufacturing-report-page .manufacturing-document-head{
    flex-direction:column;
  }

  body.app-ui .manufacturing-report-page .manufacturing-document-meta-copy{
    min-width:0;
    width:100%;
  }
}

@media print{
  @page{
    size:A4 portrait;

    margin:14mm
  }

  html,body{
    background:var(--surface)!important
  }

  body.app-ui .manufacturing-report-document{
    width:100%!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
  }

  body.app-ui .manufacturing-report-page .manufacturing-document-head{
    display:flex!important;
    flex-direction:row!important;
    align-items:flex-start!important;
    padding:0 0 14px!important;
  }

  body.app-ui .manufacturing-report-page .manufacturing-document-head h2{
    font-size:22px!important;
  }

  body.app-ui .manufacturing-report-page .manufacturing-document-meta-copy{
    display:grid!important;
    min-width:285px!important;
    max-width:320px!important;
    box-shadow:none!important;
  }

  body.app-ui .manufacturing-report-page .manufacturing-report-summary{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:10px!important;
    margin:14px 0 0!important;
  }

  body.app-ui .manufacturing-report-page .manufacturing-report-stat{
    min-height:0!important;
    padding:13px!important;
    border-radius:10px!important;
    box-shadow:none!important;
    -moz-column-break-inside:avoid!important;
         break-inside:avoid!important;
  }

  body.app-ui .manufacturing-report-page .manufacturing-report-stat__icon{
    width:28px!important;
    height:28px!important;
    flex-basis:28px!important;
  }

  body.app-ui .manufacturing-report-page .manufacturing-report-stat strong{
    margin-top:8px!important;
    font-size:21px!important;
  }

  body.app-ui .manufacturing-report-page .manufacturing-report-stat>small{
    font-size:10px!important;
  }

  /* printThis creates a clean iframe body without the app-ui body class. */

  .manufacturing-report-document .manufacturing-document-head{
    display:flex!important;
    flex-direction:row!important;
    align-items:flex-start!important;
    padding:0 0 8px!important;
    border-bottom:0!important;
  }

  .manufacturing-report-document .manufacturing-report-summary{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:10px!important;
    margin:10px 0 0!important;
  }

  .manufacturing-report-document .manufacturing-report-stat{
    min-height:0!important;
    padding:13px!important;
    border-radius:10px!important;
    box-shadow:none!important;
    -moz-column-break-inside:avoid!important;
         break-inside:avoid!important;
  }
}

/* ---- Sell workspace (Add/Edit Sale + Sales Order) — reuses the purchase form language ---- */

.app-shell .sell-create-page{
  max-width:1480px
}

.app-shell .sell-form-alert{
  margin-top:14px;
  padding:12px 15px;
  border:1px solid color-mix(in srgb,var(--danger) 35%,var(--border));
  border-radius:10px;
  background:var(--danger-weak);
  color:var(--danger);
  font-size:12.5px;
  font-weight:650
}

/* The form is one column of fields wide.

   It used to reserve 300px down the left for the customer: a select, and two addresses held open
   whether or not anyone wanted them. The addresses are the kind of thing you check once and never
   again while typing an order, so they cost that space on every screen to be ignored. The customer
   is now the first field of the row like any other, and what was in the column is behind Details. */

.app-shell .sell-details-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:14px;
  align-items:start
}

/* The optional custom fields keep a line of their own under the row, aligned with the fields
   rather than with the card — run the full card width they began under the customer panel, below
   fields they have nothing to do with.

   They were tried in the cell left over beside the document picker. Shut it fitted, but opening it
   moved the bar to a row of its own to make room for the fields inside — so the control you just
   clicked jumped out from under the pointer. An empty cell is the cheaper cost. */

.app-shell .sell-details-layout>.purchase-optional-details{
  margin-top:2px
}

.app-shell .sell-details-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px
}

/* The document picker is one field among the others, not a panel across two of them. At double
   width and 62px tall it read as a drop zone the form was built around, and it pushed Table into
   the gap beside it. One column, and the picker the height of the inputs it sits beside — its two
   lines of copy fit that height, and the size limits go under it like any other field's help. */

.app-shell .sell-details-grid>.sell-field-document{
  grid-column:auto;
  min-width:0
}

/* One label style for the whole row.

   These fields are drawn by four different things — plain Form::label, the field component, the
   restaurant partial's POS label, and this document field — and each brought its own idea of how a
   label looks. Side by side that showed: Table and Service staff came out smaller and heavier than
   Sale Agent beside them, and the document's label stood further from its control than any of them.
   Every label on this grid is stated here, once, in the design system's own terms. */

.app-shell .sell-details-grid .form-group>label,
.app-shell .sell-details-grid>.sell-field-document>label,
.app-shell .sell-details-grid .flabel,
.app-shell .sell-details-grid .restaurant-pos-field .pos-meta-label{
  display:block;
  margin:0 0 7px;
  color:var(--text-2);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:0;
  text-transform:none
}

.app-shell .sell-details-grid .restaurant-pos-field .pos-meta-label>span{
  color:inherit;
  font:inherit;
  letter-spacing:inherit;
  text-transform:inherit
}

/* Who was chosen, and what about them changes what happens next.

   The panel had the customer's name in a select and nothing else: their phone number arrived with
   the dropdown and was dropped on selection, and what they owe was eleven pixels of red text under
   the field. Read at a counter, the debt is the only part that should raise its voice — it gets a
   row of its own, in the danger colour, and only when there is one. Everything else is reference
   and stays grey and small, on one line, showing only the parts that apply. */

/* Details sits on the label's line, where a field's own affordances belong, rather than below the
   control where it would read as a second field. */

.app-shell .sell-customer-field-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:8px
}

.app-shell .sell-customer-field-head>label{
  margin:0
}

.app-shell .sell-customer-toggle{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:0;
  border:0;
  background:none;
  color:var(--text-3);
  font-size:10.5px;
  font-weight:750;
  cursor:pointer
}

.app-shell .sell-customer-toggle:hover{
  color:var(--brand-strong)
}

.app-shell .sell-customer-toggle svg{
  transition:transform .16s ease
}

.app-shell .sell-customer-toggle[aria-expanded="true"]{
  color:var(--brand-strong)
}

.app-shell .sell-customer-toggle[aria-expanded="true"] svg{
  transform:rotate(180deg)
}

/* Opened, it grows downward inside the customer's own column: the fields beside it keep their
   places, and only what is below the row moves. */

.app-shell .sell-customer-details{
  margin-top:9px;
  padding:12px 13px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface-2)
}

.app-shell .sell-customer-details .sell-customer-addresses{
  margin-top:10px;
  padding:10px 11px;
  background:var(--surface)
}

.app-shell .sell-customer-identity{
  display:flex;
  min-width:0;
  align-items:center;
  gap:10px
}

.app-shell .sell-customer-avatar{
  display:grid;
  width:36px;
  height:36px;
  flex:none;
  place-items:center;
  border-radius:10px;
  background:var(--brand-weak);
  color:var(--brand-strong);
  font-size:12px;
  font-weight:800;
  letter-spacing:.3px
}

.app-shell .sell-customer-names{
  min-width:0
}

.app-shell .sell-customer-names>*{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .sell-customer-names strong{
  color:var(--text);
  font-size:12.5px;
  font-weight:750
}

.app-shell .sell-customer-names small{
  margin-top:1px;
  color:var(--text-3);
  font-size:10.5px
}

.app-shell .sell-customer-phone{
  display:flex;
  align-items:center;
  gap:5px;
  margin-top:3px;
  color:var(--text-2);
  font-size:11.5px;
  font-weight:650;
  text-decoration:none
}

.app-shell .sell-customer-phone:hover{
  color:var(--brand-strong)
}

.app-shell .sell-customer-phone svg{
  flex:none;
  color:var(--text-3)
}

.app-shell .sell-customer-profile{
  display:inline-flex;
  align-items:center;
  gap:4px;
  margin-top:9px;
  color:var(--brand-strong);
  font-size:10.5px;
  font-weight:750;
  text-decoration:none
}

.app-shell .sell-customer-profile:hover{
  text-decoration:underline
}

/* The one line that is allowed to shout, and only when there is something owed. */

.app-shell .sell-customer-due{
  display:flex;
  align-items:center;
  gap:7px;
  margin:10px 0 0;
  padding:8px 10px;
  border:1px solid color-mix(in srgb,var(--danger) 30%,var(--border));
  border-radius:9px;
  background:var(--danger-weak);
  color:var(--danger);
  font-size:11.5px
}

.app-shell .sell-customer-due svg{
  flex:none
}

.app-shell .sell-customer-due strong{
  font-weight:750
}

.app-shell .sell-customer-due span{
  margin-left:auto;
  font-weight:800;
  font-variant-numeric:tabular-nums
}

.app-shell .sell-customer-meta{
  margin:9px 0 0;
  color:var(--text-3);
  font-size:10.5px;
  font-weight:650;
  line-height:1.5
}

.app-shell .sell-customer-address-empty{
  color:var(--text-3);
  font-style:normal
}

.app-shell .sell-customer-addresses{
  display:grid;
  gap:11px;
  margin-top:12px;
  padding:12px 13px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface-2);
  color:var(--text-2);
  font-size:11.5px;
  line-height:1.5
}

.app-shell .sell-customer-addresses strong{
  display:block;
  margin-bottom:3px;
  color:var(--text-3);
  font-size:10px;
  font-weight:800;
  text-transform:uppercase
}

.app-shell .sell-date-control{
  position:relative
}

.app-shell .sell-date-control>span{
  position:absolute;
  top:50%;
  left:12px;
  z-index:2;
  display:flex;
  color:var(--text-3);
  transform:translateY(-50%);
  pointer-events:none
}

.app-shell .sell-date-control>.form-control{
  padding-left:38px;
  background:var(--surface-2);
  cursor:pointer
}

.app-shell .sell-field-hint{
  display:block;
  margin-top:4px;
  color:var(--text-3);
  font-size:10.5px
}

.app-shell .sell-subscribe-field{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px
}

.app-shell .sell-subscribe-toggle{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0;
  font-size:12.5px;
  font-weight:650;
  cursor:pointer
}

.app-shell .sell-subscribe-toggle input{
  width:16px;
  height:16px;
  accent-color:var(--brand)
}

/* Three fields on the row, each carrying its own running total.

   The totals used to be cells of this grid in their own right, so the row read discount type,
   discount amount, the discount it worked out to, order tax, the tax it worked out to — five boxes
   of three different heights, with each figure a box away from the field that produced it. They
   are now a line under their own field, which is where the answer to a number you just typed
   belongs. */

.app-shell .sell-pricing-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  align-items:start
}

.app-shell .sell-field-total{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:8px;
  margin:7px 0 0;
  padding:6px 9px;
  border-radius:8px;
  background:var(--surface-2);
  color:var(--text-3);
  font-size:10.5px;
  font-weight:700
}

.app-shell .sell-field-total strong{
  color:var(--text-2);
  font-size:12px;
  font-weight:800;
  font-variant-numeric:tabular-nums
}

.app-shell .sell-field-total.is-discount strong{
  color:var(--danger)
}

.app-shell .sell-field-total.is-tax strong{
  color:var(--info)
}

.app-shell .sell-rewards-block{
  margin-top:16px;
  padding:14px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface-2)
}

.app-shell .sell-rewards-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  align-items:end;
  margin-top:10px
}

/* Readouts, not fields — but they share the row with one, so they are labelled above it like a
   field and stand to its height, rather than floating at whatever height their sentence took. */

.app-shell .sell-rewards-grid>.form-group{
  margin:0
}

.app-shell .sell-rewards-grid label{
  display:block;
  margin:0 0 7px;
  color:var(--text-2);
  font-size:12.5px;
  font-weight:600
}

.app-shell .sell-reward-readout{
  display:flex;
  min-height:42px;
  align-items:center;
  margin:0;
  padding:0 12px;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface);
  color:var(--text);
  font-size:13px;
  font-weight:750;
  font-variant-numeric:tabular-nums
}

.app-shell .sell-reward-readout.is-deduction{
  color:var(--danger)
}

/* Redemption needs a named contact. Dimmed and explained beats a row of dead boxes. */

.app-shell .sell-rewards-block.is-unavailable .sell-rewards-grid{
  opacity:.55
}

.app-shell .sell-rewards-note{
  display:flex;
  align-items:center;
  gap:7px;
  margin:11px 0 0;
  color:var(--text-3);
  font-size:11px;
  font-weight:650
}

.app-shell .sell-rewards-note svg{
  flex:none;
  color:var(--info)
}

/* One note for the invoice, one for the staff: written together, so read together. */

.app-shell .sell-notes-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin-top:16px
}

.app-shell .sell-notes-grid textarea{
  min-height:84px;
  resize:vertical
}

.app-shell .sell-shipping-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px
}

/* The document picker is one field among the rest, and the same height as them — at two columns
   and 62px it read as a drop zone the section was built around. Same treatment as the sale's own
   picker; the size limits go under it like any other field's help. */

.app-shell .sell-shipping-grid>.sell-shipping-documents{
  grid-column:auto;
  min-width:0
}

/* The two blocks of prose sit at the end, as a pair — the shape the sale's two notes take. Left
   among the single-line fields they forced every field beside them to a textarea's height. */

.app-shell .sell-shipping-notes{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  padding:0 14px 14px
}

.app-shell .sell-shipping-notes textarea{
  min-height:84px;
  resize:vertical
}

.app-shell .sell-export-block{
  margin-top:16px;
  padding:14px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface)
}

.app-shell .sell-export-toggle{
  display:flex;
  align-items:center;
  gap:8px;
  margin:10px 0 12px
}

.app-shell .sell-export-toggle input{
  width:16px;
  height:16px;
  accent-color:var(--brand)
}

.app-shell .sell-export-toggle label{
  margin:0;
  font-size:12.5px;
  font-weight:650
}

.app-shell .sell-export-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px
}

.app-shell .sell-prefer-payment-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin-bottom:14px
}

/* What the payment came to — the closing line of the payment card, not a card of its own.

   Balance due carries the weight: it is the number you check before saving. It sounds the alarm
   only while something is left to pay; at zero it is settled and says so quietly, where before it
   was red at 0.00 — alarm colour for the best outcome on the screen. */

/* It closes the payment box, so it runs to that box's edges rather than sitting inside its
   padding as one more block. */

.app-shell .sell-payment-outcome{
  margin:14px -12px -12px;
  padding:12px 14px;
  border-top:1px solid var(--border-2);
  background:var(--surface-2);
  border-radius:0 0 10px 10px
}

.app-shell .sell-payment-outcome-figures{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:26px;
  flex-wrap:wrap
}

.app-shell .sell-payment-outcome-figures p{
  display:flex;
  align-items:baseline;
  gap:9px;
  margin:0
}

.app-shell .sell-payment-outcome-figures span{
  color:var(--text-3);
  font-size:11px;
  font-weight:750
}

.app-shell .sell-payment-change strong{
  color:var(--text);
  font-size:14px;
  font-weight:800;
  font-variant-numeric:tabular-nums
}

.app-shell .sell-payment-balance-due span{
  color:var(--text-2);
  font-size:12px;
  font-weight:800
}

.app-shell .sell-payment-balance-due strong{
  color:var(--danger);
  font-size:16.5px;
  font-weight:900;
  font-variant-numeric:tabular-nums
}

.app-shell .sell-payment-outcome.is-settled .sell-payment-balance-due strong{
  color:var(--text-2)
}

.app-shell .sell-payment-outcome #change_return_payment_data{
  margin-top:12px
}

@media (max-width:1100px){
  .app-shell .sell-details-grid,.app-shell .sell-pricing-grid,.app-shell .sell-shipping-grid,.app-shell .sell-export-grid,.app-shell .sell-rewards-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

  .app-shell .sell-prefer-payment-grid{
    grid-template-columns:1fr
  }
}

@media (max-width:640px){
  .app-shell .sell-details-grid,.app-shell .sell-pricing-grid,.app-shell .sell-shipping-grid,.app-shell .sell-export-grid,.app-shell .sell-rewards-grid,.app-shell .sell-notes-grid,.app-shell .sell-shipping-notes{
    grid-template-columns:1fr
  }
}

/*
 * Add Sale on a phone.
 *
 * Every measurement on this form was drawn for a desktop and then stacked: a 22px card head over
 * 20px of body padding, 14px between every field, a 12.5px label 7px above a control that was 40px
 * tall as an input and 42px as a select2 — so five fields filled the screen and the two controls
 * that mean the same thing were visibly different heights. Read on a phone it looked like a web
 * page zoomed in, not like an app.
 *
 * The whole form is one scale smaller here: one control height for every kind of control, labels
 * close to what they label, and the space between fields smaller than the fields themselves.
 */

@media (max-width:640px){
  /* The page inset and the card inset were paying for the same margin twice: 10px of page
       gutter, then a card, then 20px of padding before the first label — 30px of a 376px screen
       spent on air. The card keeps the smaller of the two, since it is the one that has to hold
       its border off the fields inside it. */

  .app-shell .page-shell.sell-create-page{
    padding-left:8px;
    padding-right:8px;
    gap:10px
  }

  .app-shell .sell-create-page .page-head h1{
    font-size:19px;
    letter-spacing:-.3px
  }

  .app-shell .sell-create-page .page-head p{
    margin-top:3px;
    font-size:11px
  }

  /* space-y-4 puts 16px between cards, which on a phone reads as a gap between screens. Its
       own selector carries three classes' worth of weight, so this one has to match it. */

  .app-shell .sell-create-page .sell-create-form>*+*{
    margin-top:10px
  }

  .app-shell .sell-create-page .card{
    border-radius:13px
  }

  .app-shell .sell-create-page .sec-head{
    gap:9px;
    padding:11px 11px
  }

  .app-shell .sell-create-page .sec-ico{
    width:30px;
    height:30px;
    border-radius:9px
  }

  .app-shell .sell-create-page .sec-ico svg{
    width:15px;
    height:15px
  }

  .app-shell .sell-create-page .sec-head .font-bold{
    font-size:13px
  }

  .app-shell .sell-create-page .sec-head .text-xs{
    font-size:10.5px
  }

  /* The card body is Tailwind's p-5 — 20px of padding around fields that are already inset. */

  .app-shell .sell-create-page .sec-head + div{
    padding:11px
  }

  .app-shell .sell-create-page .sell-details-layout,
    .app-shell .sell-create-page .sell-details-grid,
    .app-shell .sell-create-page .sell-pricing-grid,
    .app-shell .sell-create-page .sell-shipping-grid,
    .app-shell .sell-create-page .sell-export-grid,
    .app-shell .sell-create-page .sell-rewards-grid,
    .app-shell .sell-create-page .sell-notes-grid,
    .app-shell .sell-create-page .sell-shipping-notes{
    gap:10px
  }

  .app-shell .sell-create-page .form-group{
    margin-bottom:0
  }

  .app-shell .sell-create-page .sell-details-grid .form-group>label,
    .app-shell .sell-create-page .sell-details-grid>.sell-field-document>label,
    .app-shell .sell-create-page .sell-details-grid .flabel,
    .app-shell .sell-create-page .sell-details-grid .restaurant-pos-field .pos-meta-label,
    .app-shell .sell-create-page .form-group>label,
    .app-shell .sell-create-page .flabel{
    margin-bottom:4px;
    font-size:11.5px;
    font-weight:650
  }

  /* One height for every control, whatever draws it: a bare input, a select2, the addon beside
       an input, and the button that adds a customer. They were 40, 42, 40 and 42. */

  .app-shell .sell-create-page .form-control,
    .app-shell .sell-create-page .select2-container--default .select2-selection--single,
    .app-shell .sell-create-page .input-group-addon,
    .app-shell .sell-create-page .input-group-btn>.btn{
    height:38px;
    border-radius:9px;
    font-size:13px
  }

  .app-shell .sell-create-page .select2-container--default .select2-selection--single .select2-selection__rendered{
    line-height:36px;
    padding:0 38px 0 11px;
    font-size:13px
  }

  .app-shell .sell-create-page .select2-container--default .select2-selection--single .select2-selection__arrow{
    height:36px;
    width:26px
  }

  .app-shell .sell-create-page textarea.form-control{
    height:auto;
    min-height:64px;
    padding:8px 11px
  }

  .app-shell .sell-create-page .purchase-supplier-control{
    grid-template-columns:minmax(0,1fr) 38px;
    gap:6px
  }

  .app-shell .sell-create-page .purchase-supplier-control .add_new_customer,
    .app-shell .sell-create-page .purchase-supplier-control .add_new_supplier{
    width:38px;
    height:38px
  }

  .app-shell .sell-create-page .sell-customer-details{
    margin-top:7px;
    padding:10px 11px
  }

  .app-shell .sell-create-page .help-block,
    .app-shell .sell-create-page .sell-field-help{
    font-size:10.5px
  }

  /*
     * One row of actions, not three buttons wrapping onto two lines.
     *
     * The bar is a flex row, but its buttons sit inside a plain <div> that is not — so the
     * flex:1 written for phones never reached them, Save fell to a line of its own, and the
     * bar took 120px off a 640px screen. The wrapper becomes the row.
     */

  .app-shell .sell-create-page .form-page-actions{
    padding:9px 0 calc(9px + env(safe-area-inset-bottom))
  }

  .app-shell .sell-create-page .form-page-actions>div{
    display:flex;
    width:100%;
    gap:7px
  }

  .app-shell .sell-create-page .form-page-actions .btn-ghost,
    .app-shell .sell-create-page .form-page-actions .btn-primary{
    flex:1 1 0;
    min-width:0;
    height:40px;
    padding:0 10px;
    font-size:12.5px
  }

  .app-shell .sell-create-page .form-page-actions .btn-ghost svg,
    .app-shell .sell-create-page .form-page-actions .btn-primary svg{
    flex:none
  }
}

/*
 * Add / edit product on a phone.
 *
 * The form is drawn with utilities written for a desktop — a 20px card body, 16px between every
 * field, a 42px control under a label with 6px of air — and below md the action bar reverses into
 * a column and its two buttons drop to one per row. That is three full-width bars stacked at the
 * foot of the screen: More save options, Save, Cancel, ~150px of a 640px screen spent on chrome.
 *
 * Same scale as the sale form: one control height, labels close to what they label, and an action
 * bar that is one row — the extra save options behind their icon, then Cancel and Save.
 */

@media (max-width:640px){
  .app-shell .product-form-screen .page-head h1{
    font-size:19px;
    letter-spacing:-.3px
  }

  .app-shell .product-form-screen .page-head p{
    margin-top:3px;
    font-size:11px
  }

  /* space-y-4 between cards, and the utility that sets it carries three classes' weight. */

  .app-shell .product-form-screen .product_form>*+*{
    margin-top:10px
  }

  .app-shell .product-form-screen .card{
    border-radius:13px
  }

  .app-shell .product-form-screen .sec-head{
    gap:9px;
    padding:11px
  }

  .app-shell .product-form-screen .sec-ico{
    width:30px;
    height:30px
  }

  .app-shell .product-form-screen .sec-ico svg{
    width:15px;
    height:15px
  }

  .app-shell .product-form-screen .sec-head .font-bold{
    font-size:13px
  }

  .app-shell .product-form-screen .sec-head .text-xs{
    font-size:10.5px
  }

  .app-shell .product-form-screen .sec-head + div{
    padding:11px
  }

  /* gap-4 inside every section, and gap-4 again between the two columns of sections. Written
       against those two places only: the save menu is a grid as well, and its rows sit 4px apart
       on purpose. */

  .app-shell .product-form-screen .product_form>.grid,
    .app-shell .product-form-screen .card .grid{
    gap:10px
  }

  .app-shell .product-form-screen label{
    margin-bottom:0;
    font-size:11.5px;
    font-weight:650
  }

  .app-shell .product-form-screen .form-control,
    .app-shell .product-form-screen .input-group-addon,
    .app-shell .product-form-screen .input-group-btn>.btn,
    .app-shell .product-form-screen .select2-container--default .select2-selection--single,
    .app-shell .product-form-screen .select2-container--default .select2-selection--multiple{
    min-height:38px;
    height:38px;
    border-radius:9px;
    font-size:13px
  }

  .app-shell .product-form-screen .select2-container--default .select2-selection--single .select2-selection__rendered{
    line-height:36px;
    padding:0 38px 0 11px;
    font-size:13px
  }

  .app-shell .product-form-screen .select2-container--default .select2-selection--single .select2-selection__arrow{
    height:36px;
    width:26px
  }

  .app-shell .product-form-screen textarea.form-control{
    height:auto;
    min-height:64px
  }

  /* The add-unit button beside the unit select, which is written at the desktop height. */

  .app-shell .product-form-screen .btn-modal.h-\[42px\]{
    width:38px;
    height:38px
  }

  /*
     * One row of actions.
     *
     * max-md:flex-col-reverse turns the bar into a column and max-sm:grid-cols-1 puts one button
     * per row inside it, so the two of them plus Cancel come to three stacked bars. The extra
     * save options keep their menu but give up their label — the ellipsis is what opens it.
     */

  .app-shell .product-form-screen .form-page-actions{
    flex-direction:row;
    align-items:center;
    gap:7px;
    padding:9px 0 calc(9px + env(safe-area-inset-bottom))
  }

  .app-shell .product-form-screen .form-page-actions>div:last-child{
    display:flex;
    flex:1 1 auto;
    gap:7px
  }

  .app-shell .product-form-screen .form-page-actions details{
    flex:0 0 auto
  }

  .app-shell .product-form-screen .form-page-actions summary{
    min-width:0;
    width:40px;
    padding:0;
    gap:0
  }

  .app-shell .product-form-screen .form-page-actions summary>span,
    .app-shell .product-form-screen .form-page-actions summary>svg:last-child{
    display:none
  }

  .app-shell .product-form-screen .form-page-actions>.btn-ghost,
    .app-shell .product-form-screen .form-page-actions summary,
    .app-shell .product-form-screen .form-page-actions .btn-primary{
    height:40px;
    font-size:12.5px
  }

  .app-shell .product-form-screen .form-page-actions>.btn-ghost{
    flex:1 1 0;
    min-width:0;
    order:1
  }

  .app-shell .product-form-screen .form-page-actions>div:last-child{
    order:2
  }

  .app-shell .product-form-screen .form-page-actions .btn-primary{
    flex:1 1 0;
    min-width:0;
    padding:0 10px
  }

  /* The menu opens above a bar that is now at the very bottom of the screen. */

  .app-shell .product-form-screen .form-page-actions details>div{
    max-width:calc(100vw - 24px)
  }
}

/* Sell products table — pos.js renders legacy rows; restyle in place */

.app-shell .sell-create-products #pos_table{
  width:100%;
  min-width:1000px;
  margin:0;
  border:0!important
}

.app-shell .sell-create-products #pos_table thead th{
  padding:12px 10px!important;
  border:0!important;
  border-bottom:1px solid var(--border-2)!important;
  background:var(--surface-2)!important;
  color:var(--text-3)!important;
  font-size:10.5px!important;
  font-weight:850!important;
  letter-spacing:.035em;
  line-height:1.35!important;
  text-transform:uppercase;
  white-space:nowrap
}

.app-shell .sell-create-products #pos_table thead th svg{
  display:inline-block;
  vertical-align:middle
}

.app-shell .sell-create-products #pos_table tbody td{
  padding:11px 10px!important;
  border-color:var(--border-2)!important;
  font-size:12.5px;
  vertical-align:middle
}

.app-shell .sell-create-products #pos_table tbody .form-control{
  height:36px;
  min-width:80px;
  border-radius:8px;
  background:var(--surface)
}

.app-shell .sell-create-products #pos_table tbody select.form-control{
  min-width:104px
}

.app-shell .sell-create-products #pos_table tbody .input-group{
  display:flex;
  align-items:stretch
}

.app-shell .sell-create-products #pos_table tbody .input-group .form-control{
  flex:1 1 auto;
  min-width:64px
}

/* Shared product-row partial ships Font Awesome tags that render empty on the clean stack — draw glyphs here */

.app-shell .sell-create-products .quantity-up,.app-shell .sell-create-products .quantity-down{
  display:inline-flex;
  width:34px;
  height:36px;
  align-items:center;
  justify-content:center;
  padding:0;
  border:1px solid var(--border);
  background:var(--surface-2)
}

.app-shell .sell-create-products .quantity-down i,.app-shell .sell-create-products .quantity-up i{
  font-style:normal;
  font-weight:800
}

.app-shell .sell-create-products .quantity-down i::before{
  content:'−'
}

.app-shell .sell-create-products .quantity-up i::before{
  content:'+'
}

.app-shell .sell-create-products i.pos_remove_row{
  display:inline-flex;
  width:32px;
  height:32px;
  align-items:center;
  justify-content:center;
  border:1px solid color-mix(in srgb,var(--danger) 25%,var(--border));
  border-radius:8px;
  background:var(--danger-weak);
  color:var(--danger);
  font-style:normal;
  cursor:pointer
}

.app-shell .sell-create-products i.pos_remove_row::before{
  content:'✕';
  font-size:13px;
  font-weight:800
}

.app-shell .sell-create-products i.fa-info-circle{
  font-style:normal;
  color:var(--text-3)
}

.app-shell .sell-create-products i.fa-info-circle::before{
  content:'ⓘ'
}

/* The order line, read as a line.
   The shared product-row partial writes the name, the SKU, the brand, the price and the stock as
   separate spans and leaves the styling to the screen. The till has rules for them in pos-ui.css;
   this screen had none, so all five ran together as one unbroken sentence in the product cell. */

.app-shell .sell-create-products #pos_table tbody td:first-child{
  min-width:260px;
  max-width:340px
}

.app-shell .sell-create-products .pos-line-name{
  display:block;
  color:var(--text);
  font-size:12.5px;
  font-weight:750;
  line-height:1.35
}

.app-shell .sell-create-products .pos-line-name.is-editable{
  cursor:pointer
}

.app-shell .sell-create-products .pos-line-name.is-editable:hover{
  color:var(--brand-strong);
  text-decoration:underline;
  text-underline-offset:2px
}

.app-shell .sell-create-products .pos-line-meta{
  display:block;
  margin-top:2px;
  color:var(--text-3);
  font-size:11px;
  font-weight:600
}

.app-shell .sell-create-products .pos-line-sku{
  font-variant-numeric:tabular-nums
}

.app-shell .sell-create-products .pos-line-dot{
  padding:0 4px;
  color:var(--border-2)
}

.app-shell .sell-create-products .pos-line-price{
  color:var(--text-2);
  font-weight:700
}

/* What is left, where it matters: a line that cannot be filled is worth knowing about before the
   customer is told the total. */

.app-shell .sell-create-products .pos-line-stock{
  display:inline-flex;
  align-items:center;
  margin-top:5px;
  padding:2px 7px;
  border-radius:999px;
  background:var(--surface-2);
  color:var(--text-3);
  font-size:10px;
  font-weight:750
}

.app-shell .sell-create-products .pos-line-stock.is-low{
  background:#fff5e5;
  color:#ad6500
}

.app-shell .sell-create-products .pos-line-stock.is-out{
  background:#fff0f1;
  color:#c9343e
}

/* The lot picker and the line note are secondary to the name above them, and were sitting on it. */

.app-shell .sell-create-products #pos_table tbody td:first-child select.lot_number{
  margin-top:8px
}

.app-shell .sell-create-products #pos_table tbody td:first-child textarea.form-control{
  height:auto;
  min-height:52px;
  margin-top:8px;
  font-size:11.5px
}

.app-shell .sell-create-products #pos_table tbody td:first-child .help-block{
  margin:4px 0 0;
  color:var(--text-3);
  font-size:10px
}

.app-shell .sell-create-products #pos_table tbody td:first-child br{
  display:none
}

/* "Previously sold at" is a reference, not a second field: it reads under its input, not beside. */

.app-shell .sell-create-products #pos_table tbody td small.text-muted{
  display:block;
  margin-top:5px;
  color:var(--text-3)!important;
  font-size:10px;
  line-height:1.35;
  white-space:nowrap
}

.app-shell .sell-create-products #pos_table tbody td .row_discount_type{
  margin-top:6px
}

/* How many: one control, not three boxes with gaps between them.
   The partial writes a minus button, a field and a plus button; each was drawing its own border
   and its own corners, so a single number read as three separate things to fill in. They share a
   border now, and the unit under them is a chip rather than a field the width of the column. */

.app-shell .sell-create-products #pos_table tbody .input-group.input-number{
  display:inline-flex;
  width:auto;
  align-items:stretch;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface)
}

.app-shell .sell-create-products #pos_table tbody .input-group.input-number>.input-group-btn{
  display:flex;
  width:auto
}

.app-shell .sell-create-products #pos_table tbody .input-group.input-number .btn{
  width:34px;
  height:36px;
  min-width:0;
  padding:0;
  border:0;
  border-radius:0;
  background:var(--surface-2);
  color:var(--text-2)
}

.app-shell .sell-create-products #pos_table tbody .input-group.input-number .btn:hover{
  background:var(--surface-3);
  color:var(--text)
}

.app-shell .sell-create-products #pos_table tbody .input-group.input-number .form-control{
  width:66px;
  min-width:0;
  height:36px;
  border:0;
  border-right:1px solid var(--border);
  border-left:1px solid var(--border);
  border-radius:0;
  background:var(--surface);
  font-variant-numeric:tabular-nums;
  font-weight:700;
  text-align:center
}

.app-shell .sell-create-products #pos_table tbody .input-group.input-number .form-control:focus{
  box-shadow:none
}

.app-shell .sell-create-products #pos_table tbody select.sub_unit{
  width:auto;
  min-width:92px;
  height:30px;
  margin-top:7px;
  padding:0 24px 0 9px;
  font-size:11px
}

.app-shell .sell-create-products #pos_table tbody .input-group.input-number+br,.app-shell .sell-create-products #pos_table tbody select.sub_unit+br{
  display:none
}

/* The line total is the answer the row exists to give. */

.app-shell .sell-create-products #pos_table tbody .pos_line_total_text{
  display:inline-block;
  color:var(--text);
  font-size:13px;
  font-weight:800;
  font-variant-numeric:tabular-nums;
  white-space:nowrap
}

/* Restaurant module table / service-staff selects join the details grid as normal cells */

/* Table and Service staff, written in by the restaurant module. The span dissolves so each
   field is a cell of this grid in its own right, sized like every other field in the row —
   the partial no longer brings widths of its own to argue with. */

.app-shell .sell-details-grid #restaurant_module_span{
  display:contents
}

.app-shell .sell-details-grid .restaurant-pos-field{
  min-width:0;
  margin:0
}

.app-shell .sell-details-grid .restaurant-pos-field .form-group{
  margin:0
}

/* Its label ships styled for the POS band — small uppercase on a dark panel. It is restated with
   the rest of this grid's labels further up, so it reads as the sibling of Sale Agent. */

.app-shell .sell-details-grid #restaurant_module_span .form-control,
.app-shell .sell-details-grid #restaurant_module_span .select2-container{
  width:100%!important;
  min-width:0
}

.app-shell .sell-details-grid #restaurant_module_span .input-group-btn{
  margin-top:6px
}

.app-shell .sell-details-grid #restaurant_module_span .input-group-btn button{
  height:34px;
  padding:0 10px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface);
  font-size:12px
}

.app-shell .sell-details-grid #restaurant_module_span .input-group-btn button i{
  font-style:normal
}

.app-shell .sell-details-grid #restaurant_module_span .input-group-btn button i::before{
  content:'✓'
}

/* Order-lines summary strip */

.app-shell .sell-create-products .purchase-products-summary table{
  width:auto;
  margin-left:auto
}

.app-shell .sell-create-products .purchase-products-summary th{
  padding:6px 8px;
  color:var(--text-3);
  font-size:11px;
  letter-spacing:.03em;
  text-transform:uppercase
}

.app-shell .sell-create-products .purchase-products-summary td{
  padding:6px 14px 6px 4px;
  color:var(--brand-strong);
  font-size:14px;
  font-weight:800
}

/* Sell extras: inner card spacing */

.app-shell .sell-shipping-grid{
  padding:14px
}

.app-shell .sell-create-extras .purchase-delivery-workspace{
  margin-top:16px
}

.app-shell .sell-create-extras .purchase-expenses-workspace{
  margin:16px 0 0
}

.app-shell .sell-create-extras .purchase-total-card{
  padding:16px 0 0
}

/* The payment fields, on one row.

   The shared partial gives every field col-md-4, so the fourth — the payment account — dropped to
   a line of its own with the note beside it, and the row read as two ragged halves. The columns
   are laid out here instead of being renamed in a partial that POS, purchases and HMS bookings all
   draw from on layouts nothing like this one; a screen that wants the row asks for it by wrapping
   the include in this class.

   The fields share the row rather than being given a column count: the account field is only there
   when the business keeps payment accounts, and the date only on the screens that ask for it, so
   three have to sit as comfortably as four. Flex, not a grid of tracks — the partial emits empty
   wrapper divs, and with auto-fit those held tracks open that the real fields could not then
   stretch into, which left the row ending two thirds of the way across.

   Only direct children are touched: the card and cheque details inside are their own rows and keep
   their own shape. */

.app-shell .payment-entry-row>.row{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin:0
}

.app-shell .payment-entry-row>.row>[class*="col-"]{
  flex:1 1 200px;
  width:auto;
  min-width:0;
  max-width:none;
  padding:0;
  float:none
}

/* The note is the one field that is prose, and it takes the width of the row on its own. */

.app-shell .payment-entry-row>.row>.col-md-12{
  flex-basis:100%
}

/* A wrapper the partial left empty is not a field and must not hold a place in the row. */

.app-shell .payment-entry-row>.row>.clearfix,
.app-shell .payment-entry-row>.row>div:empty{
  display:none
}

.app-shell .payment-entry-row textarea{
  min-height:76px;
  resize:vertical
}

.app-shell .sell-create-payment .purchase-payment-workspace{
  margin-bottom:14px
}

.app-shell .sell-create-payment .purchase-payment-workspace:last-child{
  margin-bottom:0
}

/* ---- bootstrap-datetimepicker bridge (eonasdan widget from pos.js / paid_on) ---- */

body.app-ui .bootstrap-datetimepicker-widget{
  display:block;
  z-index:100000!important;
  min-width:286px;
  padding:10px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface);
  box-shadow:0 18px 42px -16px rgba(16,32,24,.34),0 5px 14px -8px rgba(16,32,24,.2);
  color:var(--text);
  font-size:13px
}

body.app-ui .bootstrap-datetimepicker-widget.dropdown-menu{
  position:absolute;
  display:block
}

/* The hour and minute lists are as long as they are — twenty-four rows of them — and the panel is
   placed against its field, so on a field halfway down the page the tail of the list fell off the
   bottom of the window with no way to reach it. The panel is capped at what the window can show and
   scrolls inside itself. The list picks up momentum scrolling on a trackpad; the picker's own wheel
   handling is on the spinner buttons, not here, so nothing is being fought over. */

body.app-ui .bootstrap-datetimepicker-widget{
  max-height:min(72vh,440px);
  overflow-y:auto;
  overscroll-behavior:contain
}

body.app-ui .bootstrap-datetimepicker-widget .timepicker-hours,
body.app-ui .bootstrap-datetimepicker-widget .timepicker-minutes,
body.app-ui .bootstrap-datetimepicker-widget .timepicker-seconds{
  max-height:none
}

body.app-ui .bootstrap-datetimepicker-widget:before,body.app-ui .bootstrap-datetimepicker-widget:after{
  display:none
}

body.app-ui .bootstrap-datetimepicker-widget .list-unstyled{
  margin:0;
  padding:0;
  list-style:none
}

body.app-ui .bootstrap-datetimepicker-widget .collapse{
  display:none;
  visibility:visible
}

body.app-ui .bootstrap-datetimepicker-widget .collapse.in{
  display:block
}

body.app-ui .bootstrap-datetimepicker-widget table{
  width:100%;
  margin:0;
  border-collapse:separate;
  border-spacing:2px;
  -webkit-user-select:none;
     -moz-user-select:none;
          user-select:none
}

body.app-ui .bootstrap-datetimepicker-widget td,body.app-ui .bootstrap-datetimepicker-widget th{
  height:34px;
  min-width:34px;
  padding:0;
  border:0;
  border-radius:8px;
  text-align:center;
  vertical-align:middle;
  cursor:pointer
}

body.app-ui .bootstrap-datetimepicker-widget th{
  color:var(--text-2);
  font-size:12px;
  font-weight:700
}

body.app-ui .bootstrap-datetimepicker-widget th.picker-switch{
  font-weight:800
}

body.app-ui .bootstrap-datetimepicker-widget th:hover,body.app-ui .bootstrap-datetimepicker-widget td.day:hover,body.app-ui .bootstrap-datetimepicker-widget td span:hover{
  background:var(--surface-3)
}

body.app-ui .bootstrap-datetimepicker-widget td.old,body.app-ui .bootstrap-datetimepicker-widget td.new{
  color:var(--text-3);
  opacity:.55
}

body.app-ui .bootstrap-datetimepicker-widget td.today{
  background:var(--brand-weak);
  color:var(--brand-strong);
  font-weight:700
}

body.app-ui .bootstrap-datetimepicker-widget td.active,body.app-ui .bootstrap-datetimepicker-widget td.active:hover,body.app-ui .bootstrap-datetimepicker-widget td span.active{
  background:var(--brand)!important;
  color:#fff!important;
  font-weight:800
}

body.app-ui .bootstrap-datetimepicker-widget td.disabled,body.app-ui .bootstrap-datetimepicker-widget td.disabled:hover{
  background:transparent;
  color:var(--text-3);
  opacity:.4;
  cursor:not-allowed
}

body.app-ui .bootstrap-datetimepicker-widget td span{
  display:inline-block;
  width:56px;
  height:40px;
  margin:2px;
  border-radius:8px;
  line-height:40px
}

body.app-ui .bootstrap-datetimepicker-widget .timepicker-hour,body.app-ui .bootstrap-datetimepicker-widget .timepicker-minute,body.app-ui .bootstrap-datetimepicker-widget .timepicker-second{
  width:54px;
  font-size:18px;
  font-weight:800
}

body.app-ui .bootstrap-datetimepicker-widget .timepicker .btn{
  display:inline-flex;
  height:34px;
  min-width:34px;
  align-items:center;
  justify-content:center;
  padding:0 8px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface);
  font-weight:700;
  cursor:pointer
}

body.app-ui .bootstrap-datetimepicker-widget .picker-switch td{
  height:38px
}

body.app-ui .bootstrap-datetimepicker-widget a[data-action]{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--brand-strong);
  text-decoration:none
}

/* The glyphicon font is absent on this stack. These were stand-in text characters — ◴ for a
   clock, ▦ for a calendar, ▴▾ for the spinners — which sat at the wrong size and weight
   against everything else. Drawn as masked SVG so they take currentColor and scale. */

body.app-ui .bootstrap-datetimepicker-widget .glyphicon{
  display:inline-block;
  width:17px;
  height:17px;
  background-color:currentColor;
  font-size:0;
  line-height:1;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-size:contain;
  mask-size:contain
}

body.app-ui .bootstrap-datetimepicker-widget .glyphicon:before{
  content:none
}

body.app-ui .bootstrap-datetimepicker-widget .glyphicon-chevron-left{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 18-6-6 6-6'/%3E%3C/svg%3E")
}

body.app-ui .bootstrap-datetimepicker-widget .glyphicon-chevron-right{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E")
}

body.app-ui .bootstrap-datetimepicker-widget .glyphicon-chevron-up{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m18 15-6-6-6 6'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m18 15-6-6-6 6'/%3E%3C/svg%3E")
}

body.app-ui .bootstrap-datetimepicker-widget .glyphicon-chevron-down{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")
}

body.app-ui .bootstrap-datetimepicker-widget .glyphicon-time{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E")
}

body.app-ui .bootstrap-datetimepicker-widget .glyphicon-calendar{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18M8 2v4M16 2v4'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18M8 2v4M16 2v4'/%3E%3C/svg%3E")
}

body.app-ui .bootstrap-datetimepicker-widget .glyphicon-screenshot{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3C/svg%3E")
}

body.app-ui .bootstrap-datetimepicker-widget .glyphicon-trash{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6'/%3E%3C/svg%3E")
}

body.app-ui .bootstrap-datetimepicker-widget .glyphicon-remove{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E")
}

/* Time view: the spinners and the hour/minute cells were unlabelled pills of equal weight,
   so the numbers you are actually setting did not read as the subject of the panel. */

body.app-ui .bootstrap-datetimepicker-widget .timepicker{
  padding:4px 2px
}

body.app-ui .bootstrap-datetimepicker-widget .timepicker-picker table{
  border-spacing:4px
}

body.app-ui .bootstrap-datetimepicker-widget .timepicker-picker td{
  height:auto;
  min-width:0
}

/* The spinners are <a data-action> in this build, not buttons. */

body.app-ui .bootstrap-datetimepicker-widget .timepicker-picker td .btn,
body.app-ui .bootstrap-datetimepicker-widget .timepicker-picker td a[data-action^="increment"],
body.app-ui .bootstrap-datetimepicker-widget .timepicker-picker td a[data-action^="decrement"]{
  display:inline-flex;
  width:44px;
  height:28px;
  min-width:0;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border-2);
  border-radius:8px;
  background:var(--surface-2);
  color:var(--text-3)
}

body.app-ui .bootstrap-datetimepicker-widget .timepicker-picker td .btn:hover,
body.app-ui .bootstrap-datetimepicker-widget .timepicker-picker td a[data-action^="increment"]:hover,
body.app-ui .bootstrap-datetimepicker-widget .timepicker-picker td a[data-action^="decrement"]:hover{
  border-color:var(--brand);
  background:var(--brand-weak);
  color:var(--brand)
}

body.app-ui .bootstrap-datetimepicker-widget .timepicker-hour,body.app-ui .bootstrap-datetimepicker-widget .timepicker-minute,body.app-ui .bootstrap-datetimepicker-widget .timepicker-second{
  display:inline-flex;
  width:64px;
  height:46px;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface);
  color:var(--text);
  font-size:21px;
  font-weight:800;
  font-variant-numeric:tabular-nums
}

body.app-ui .bootstrap-datetimepicker-widget .timepicker-hour:hover,body.app-ui .bootstrap-datetimepicker-widget .timepicker-minute:hover,body.app-ui .bootstrap-datetimepicker-widget .timepicker-second:hover{
  border-color:var(--brand);
  background:var(--brand-weak);
  color:var(--brand-strong)
}

body.app-ui .bootstrap-datetimepicker-widget .separator{
  width:14px;
  color:var(--text-3);
  font-size:19px;
  font-weight:800
}

body.app-ui .bootstrap-datetimepicker-widget .timepicker-picker .btn[data-action="togglePeriod"]{
  width:auto;
  height:34px;
  padding:0 13px;
  border-color:var(--border);
  background:var(--surface);
  color:var(--text);
  font-weight:700
}

/* Hour and minute grids opened by clicking the numbers. */

body.app-ui .bootstrap-datetimepicker-widget .timepicker-hours td,body.app-ui .bootstrap-datetimepicker-widget .timepicker-minutes td{
  height:36px
}

body.app-ui .bootstrap-datetimepicker-widget .timepicker-hours .hour,body.app-ui .bootstrap-datetimepicker-widget .timepicker-minutes .minute{
  display:block;
  width:auto;
  height:34px;
  margin:1px;
  border-radius:8px;
  font-size:13px;
  line-height:34px
}

/* The row that swaps between the date and time views: a full-width bar rather than a pill
   floating in the middle of the panel with a tooltip as its only label. */

body.app-ui .bootstrap-datetimepicker-widget .accordion-toggle{
  display:flex;
  margin-top:6px;
  padding-top:8px;
  border-top:1px solid var(--border-2)
}

body.app-ui .bootstrap-datetimepicker-widget .accordion-toggle td{
  width:100%;
  height:auto;
  padding:0 2px
}

/* The switch is an <a> holding nothing but the glyph, with its label only in the tooltip —
   so the button read as an empty pill until you hovered it. */

body.app-ui .bootstrap-datetimepicker-widget .accordion-toggle a[data-action]{
  display:flex;
  width:100%;
  height:36px;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface-2);
  color:var(--text-2);
  font-size:12.5px;
  font-weight:700
}

body.app-ui .bootstrap-datetimepicker-widget .accordion-toggle a[data-action]:hover{
  border-color:var(--brand);
  background:var(--brand-weak);
  color:var(--brand-strong)
}

body.app-ui .bootstrap-datetimepicker-widget .accordion-toggle a[data-action][title]:after{
  content:attr(title)
}

/* Sell product search autocomplete — opaque contained panel (pos.js jQuery UI menu) */

body.app-ui .sell-product-autocomplete.ui-autocomplete{
  box-sizing:border-box;
  max-width:560px;
  max-height:340px;
  margin:6px 0 0!important;
  padding:6px!important;
  overflow-x:hidden;
  overflow-y:auto;
  border:1px solid color-mix(in srgb,var(--brand) 34%,var(--border))!important;
  border-radius:12px;
  background:var(--surface)!important;
  color:var(--text);
  box-shadow:0 22px 48px -20px rgba(16,32,24,.42),0 8px 18px -12px rgba(21,154,77,.3);
  font-family:'Plus Jakarta Sans','Noto Sans Khmer',system-ui,sans-serif;
  font-size:12.5px;
  list-style:none;
  z-index:100000!important
}

body.app-ui .sell-product-autocomplete .ui-menu-item{
  margin:0 0 3px;
  padding:0;
  border:0;
  background:transparent;
  list-style:none
}

body.app-ui .sell-product-autocomplete .ui-menu-item:last-child{
  margin-bottom:0
}

body.app-ui .sell-product-autocomplete .ui-menu-item-wrapper{
  display:block;
  margin:0!important;
  padding:9px 11px!important;
  border:1px solid transparent!important;
  border-radius:9px;
  background:transparent!important;
  color:var(--text-2)!important;
  line-height:1.45;
  cursor:pointer
}

body.app-ui .sell-product-autocomplete .ui-menu-item-wrapper.ui-state-active,body.app-ui .sell-product-autocomplete .ui-menu-item-wrapper:hover{
  border-color:color-mix(in srgb,var(--brand) 25%,var(--border))!important;
  background:var(--brand-weak)!important;
  color:var(--text)!important;
  box-shadow:inset 3px 0 0 var(--brand)
}

/* Job sheet parts search — jQuery UI drops the suggestion list on <body>, so the panel
   is hooked by its own class (see add_parts.blade.php) the same way the sell and PO
   product searches are. Without it the list rendered as bare unstyled text. */

.app-shell .repair-parts-search:has(.ui-autocomplete-loading):after{
  position:absolute;
  top:50%;
  right:13px;
  width:16px;
  height:16px;
  margin-top:-8px;
  border:2px solid var(--brand-weak);
  border-top-color:var(--brand);
  border-radius:50%;
  content:"";
  animation:note-submit-spin .7s linear infinite
}

/* jQuery UI's _resizeMenu sets an inline width of max(content width, input width), so a
   long product name would otherwise stretch the panel past the viewport. Cap it at the
   search field's own width. */

body.app-ui .repair-parts-autocomplete.ui-autocomplete{
  box-sizing:border-box;
  max-width:min(640px,calc(100vw - 24px));
  max-height:330px;
  margin:6px 0 0!important;
  padding:6px!important;
  overflow-x:hidden;
  overflow-y:auto;
  border:1px solid color-mix(in srgb,var(--brand) 34%,var(--border))!important;
  border-radius:12px;
  background:var(--surface)!important;
  color:var(--text);
  box-shadow:0 22px 48px -20px rgba(16,32,24,.42),0 8px 18px -12px rgba(21,154,77,.3);
  font-family:'Plus Jakarta Sans','Noto Sans Khmer',system-ui,sans-serif;
  font-size:13.5px;
  list-style:none;
  z-index:100000!important
}

body.app-ui .repair-parts-autocomplete .ui-menu-item{
  margin:0 0 3px;
  padding:0;
  border:0;
  background:transparent;
  list-style:none
}

body.app-ui .repair-parts-autocomplete .ui-menu-item:last-child{
  margin-bottom:0
}

body.app-ui .repair-parts-autocomplete .ui-menu-item-wrapper{
  display:block;
  margin:0!important;
  padding:10px 12px!important;
  border:1px solid transparent!important;
  border-radius:9px;
  background:transparent!important;
  color:var(--text-2)!important;
  line-height:1.45;
  cursor:pointer
}

body.app-ui .repair-parts-autocomplete .ui-menu-item-wrapper.ui-state-active,body.app-ui .repair-parts-autocomplete .ui-menu-item-wrapper:hover{
  border-color:color-mix(in srgb,var(--brand) 25%,var(--border))!important;
  background:var(--brand-weak)!important;
  color:var(--text)!important;
  box-shadow:inset 3px 0 0 var(--brand)
}

/* jQuery UI stamps ui-menu-item-wrapper onto this very element when it refreshes the
   menu, and that rule's display:block was winning over a plain .parts-option flex rule -
   which pushed the price onto its own line. Style the wrapper itself. */

body.app-ui .repair-parts-autocomplete .ui-menu-item-wrapper.parts-option{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-width:0
}

body.app-ui .parts-option-lines{
  display:flex;
  min-width:0;
  flex:1 1 auto;
  flex-direction:column;
  gap:2px;
  overflow:hidden
}

body.app-ui .parts-option-name{
  color:var(--text);
  font-size:13.5px;
  font-weight:700;
  overflow-wrap:anywhere
}

body.app-ui .parts-option-variation{
  color:var(--text-3);
  font-weight:600
}

body.app-ui .parts-option-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:5px
}

body.app-ui .parts-option-sku{
  padding:3px 8px;
  border:1px solid var(--border);
  border-radius:6px;
  background:var(--surface-2);
  color:var(--text-3);
  font-size:11px;
  font-weight:800;
  letter-spacing:.3px
}

body.app-ui .parts-option-stock{
  padding:3px 8px;
  border:1px solid color-mix(in srgb,var(--brand) 22%,var(--border));
  border-radius:6px;
  background:var(--brand-weak);
  color:var(--brand-strong);
  font-size:11px;
  font-weight:800
}

body.app-ui .parts-option-stock.is-empty{
  border-color:color-mix(in srgb,var(--danger) 26%,var(--border));
  background:var(--danger-weak);
  color:var(--danger)
}

body.app-ui .parts-option-price{
  flex:0 0 auto;
  color:var(--text-2);
  font-size:13.5px;
  font-weight:800;
  white-space:nowrap
}

body.app-ui .repair-parts-autocomplete .ui-menu-item-wrapper.ui-state-active .parts-option-price{
  color:var(--brand-strong)
}

/* jQuery UI's screen-reader live region has no styling on this stack, so it would
   otherwise print "N results are available" into the page. */

body.app-ui .ui-helper-hidden-accessible{
  position:absolute!important;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  border:0;
  white-space:nowrap
}

/* Quick product — opening stock section */

.app-shell .quick-product-opening-stock{
  overflow:hidden
}

.app-shell .quick-product-opening-body{
  padding:12px 15px 15px;
  overflow-x:auto
}

.app-shell .quick-product-opening-body table{
  width:100%;
  min-width:640px;
  margin:0;
  border-collapse:separate;
  border-spacing:0
}

.app-shell .quick-product-opening-body thead th{
  padding:9px 10px;
  border-bottom:1px solid var(--border-2);
  background:var(--surface-2);
  color:var(--text-3);
  font-size:9.5px;
  font-weight:850;
  letter-spacing:.04em;
  text-align:left;
  text-transform:uppercase
}

.app-shell .quick-product-opening-body thead th:first-child{
  border-radius:9px 0 0 0
}

.app-shell .quick-product-opening-body thead th:last-child{
  border-radius:0 9px 0 0;
  text-align:right
}

.app-shell .quick-product-opening-body tbody td{
  padding:8px 10px;
  border-bottom:1px solid var(--border-2);
  font-size:12.5px;
  vertical-align:middle
}

.app-shell .quick-product-opening-body tbody tr:last-child td{
  border-bottom:0
}

.app-shell .quick-product-opening-body tbody td:first-child{
  color:var(--text-2);
  font-size:12px;
  font-weight:700
}

.app-shell .quick-product-opening-body tbody td:last-child{
  text-align:right
}

.app-shell .quick-product-opening-body .form-control{
  height:38px;
  max-width:180px;
  border-radius:8px;
  background:var(--surface-2)
}

.app-shell .quick-product-opening-body .form-control:focus{
  background:var(--surface)
}

.app-shell .quick-product-opening-body .row_subtotal_before_tax{
  display:inline-block;
  min-width:64px;
  color:var(--brand-strong);
  font-weight:800
}

/* ---- All Sales listing (sells-page) ---- */

body.app-ui .sells-page .sells-stage-board,
body.app-ui .sells-page .sells-filter-card,
body.app-ui .sells-page .sells-list-card{
  border:1px solid #dfe6e2;
  border-radius:14px;
  background:var(--surface);
  box-shadow:0 1px 2px rgba(16,24,32,.05)
}

body.app-ui .sells-page .sells-stage-board{
  display:grid;
  grid-template-columns:minmax(240px,1.15fr) repeat(4,minmax(0,1fr));
  margin-top:14px;
  overflow:hidden
}

body.app-ui .sells-page .sells-stage-intro{
  display:flex;
  align-items:center;
  gap:12px;
  padding:15px 17px;
  border-right:1px solid #e7ece9;
  background:#f8faf9
}

body.app-ui .sells-page .sells-stage-intro__icon{
  display:grid;
  width:42px;
  height:42px;
  flex:0 0 42px;
  place-items:center;
  border-radius:11px;
  background:#e8f6ed;
  color:#21894a
}

body.app-ui .sells-page .sells-eyebrow{
  display:block;
  color:#8a958f;
  font-size:8.5px;
  font-weight:850;
  letter-spacing:.7px
}

body.app-ui .sells-page .sells-stage-intro strong{
  display:block;
  margin-top:2px;
  color:#17201b;
  font-size:13px;
  font-weight:800
}

body.app-ui .sells-page .sells-stage-intro small{
  display:block;
  margin-top:2px;
  color:#8a958f;
  font-size:10.5px
}

body.app-ui .sells-page .sells-stage{
  display:flex;
  align-items:center;
  gap:11px;
  padding:14px 15px;
  border:0;
  border-right:1px solid #e7ece9;
  background:var(--surface);
  text-align:left;
  cursor:pointer;
  transition:background .15s
}

body.app-ui .sells-page .sells-stage:last-child{
  border-right:0
}

body.app-ui .sells-page .sells-stage:hover{
  background:#f8faf9
}

body.app-ui .sells-page .sells-stage:focus-visible{
  box-shadow:inset 0 0 0 2px #33a760
}

body.app-ui .sells-page .sells-stage strong{
  display:block;
  color:#17201b;
  font-size:12.5px;
  font-weight:800
}

body.app-ui .sells-page .sells-stage small{
  display:block;
  margin-top:2px;
  color:#8a958f;
  font-size:10.5px
}

body.app-ui .sells-page .sells-stage__number{
  display:grid;
  width:34px;
  height:34px;
  flex:0 0 34px;
  place-items:center;
  border-radius:10px
}

body.app-ui .sells-page .sells-stage__number.is-green{
  background:#e4f5eb;
  color:#21894a
}

body.app-ui .sells-page .sells-stage__number.is-amber{
  background:#fff1d8;
  color:#b56c00
}

body.app-ui .sells-page .sells-stage__number.is-blue{
  background:#eaf2ff;
  color:#2463c9
}

body.app-ui .sells-page .sells-stage__number.is-red{
  background:#fdeaea;
  color:#c0392b
}

body.app-ui .sells-page .sells-stage.is-active[data-payment-status="paid"]{
  background:#eef9f2;
  box-shadow:inset 0 -3px #2e9d58
}

body.app-ui .sells-page .sells-stage.is-active[data-payment-status="partial"]{
  background:#fff8eb;
  box-shadow:inset 0 -3px #e79a22
}

body.app-ui .sells-page .sells-stage.is-active[data-payment-status="due"]{
  background:#eff6ff;
  box-shadow:inset 0 -3px #3b82f6
}

body.app-ui .sells-page .sells-stage.is-active[data-payment-status="overdue"]{
  background:#fdf1f0;
  box-shadow:inset 0 -3px #dc4c3c
}

body.app-ui .sells-page .sells-filter-card{
  margin-top:14px
}

/* Open the rest of the filters on demand.

   Twelve of them stacked down a phone put the sales list three screens below the page it belongs
   to, and on any given day a person changes one. The button reads as a control rather than a link,
   and carries the number of hidden filters currently narrowing the list — the one thing worth
   knowing about a panel you cannot see. */

body.app-ui .sells-filter-toggle{
  display:flex;
  width:100%;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin:0;
  padding:12px 17px;
  border:0;
  border-top:1px solid var(--border);
  border-radius:0 0 14px 14px;
  background:transparent;
  color:var(--text-2);
  font-size:11.5px;
  font-weight:750;
  cursor:pointer;
  transition:background .12s ease,color .12s ease
}

body.app-ui .sells-filter-toggle:hover{
  background:var(--surface-2);
  color:var(--brand-strong)
}

body.app-ui .sells-filter-toggle>svg{
  flex:none;
  width:15px;
  height:15px;
  stroke-width:2.1
}

body.app-ui .sells-filter-toggle__caret{
  transition:transform .16s ease
}

body.app-ui .sells-filter-toggle.is-open .sells-filter-toggle__caret{
  transform:rotate(180deg)
}

/* How many hidden filters are narrowing the list right now — and nothing at all when none are.
   `hidden` is only the user agent's `display:none`, which this rule's own `display` would outrank:
   the badge sat there reading "0", which is the one number it never needs to say. */

body.app-ui .sells-filter-toggle__count{
  display:inline-flex;
  min-width:18px;
  height:18px;
  align-items:center;
  justify-content:center;
  padding:0 5px;
  border-radius:999px;
  background:var(--brand);
  color:#fff;
  font-size:10px;
  font-weight:800
}

body.app-ui .sells-filter-toggle__count[hidden]{
  display:none
}

/* The revealed filters read as one block with the two above them, not a second card — so they
   keep the grid's own padding and sit straight under it with no seam. */

body.app-ui .sells-filter-card__more{
  padding-top:0
}

/* The collapse is a narrow-screen measure only.
   On a wide card all twelve filters sit in three rows and are worth seeing at once; it is the
   phone, where they become twelve stacked rows, that needs them folded away. So `hidden` only
   closes the panel below 860px, and above it the toggle is not drawn at all.
   `.sells-page` is in the selector to out-weigh .sells-filter-card__grid's display:grid rather
   than to scope this one: without it the two tie at 0,3,1 and the later — grid — wins. */

@media (max-width:860px){
  /* Collapsed means everything past the first two fields. By position rather than in a container
       of its own: a second grid cannot share a row with the first, so on a wide card the opening
       row sat with two fields and two empty cells while the rest began again underneath. */

  body.app-ui .sells-filter-card__grid[data-filter-collapse][data-collapsed]>*:nth-child(n+3){
    display:none
  }
}

@media (min-width:861px){
  /* All twelve fit in four rows here and are worth seeing at once, so there is nothing to open
       and no button drawn — and the collapsed state above simply does not apply. */

  body.app-ui .sells-filter-toggle{
    display:none
  }
}

body.app-ui .sells-page .sells-filter-card__header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:13px 17px;
  border-bottom:1px solid #e7ece9
}

body.app-ui .sells-page .sells-section-heading{
  display:flex;
  align-items:center;
  gap:10px
}

body.app-ui .sells-page .sells-section-heading__icon{
  display:grid;
  width:32px;
  height:32px;
  place-items:center;
  border-radius:9px;
  background:#e8f6ed;
  color:#21894a
}

body.app-ui .sells-page .sells-section-heading strong{
  display:block;
  color:#17201b;
  font-size:13px;
  font-weight:800
}

body.app-ui .sells-page .sells-section-heading small{
  display:block;
  margin-top:1px;
  color:#8a958f;
  font-size:10.5px
}

body.app-ui .sells-page .sells-filter-card__grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:13px;
  padding:15px 17px
}

body.app-ui .sells-page .sells-clearable-range{
  display:grid;
  grid-template-columns:minmax(0,1fr) 40px;
  gap:6px
}

body.app-ui .sells-page .sells-clearable-range>button{
  display:grid;
  place-items:center;
  border:1px solid #dfe6e2;
  border-radius:10px;
  background:var(--surface);
  color:#66736c;
  cursor:pointer
}

body.app-ui .sells-page .sells-clearable-range>button:hover{
  border-color:#c0392b;
  background:#fdeaea;
  color:#c0392b
}

body.app-ui .sells-page .sells-list-card{
  margin-top:14px;
  overflow:visible
}

/* A twelve-column ledger is not a reading column. page-shell caps every screen at 1500px, which
   suits a form or a dashboard and starves a table that now carries invoice, date, customer,
   service staff, agent, payment, shipping and four figures — on a wide monitor the columns were
   squeezed while a band of grey sat either side of them. The sales listings take the window. */

body.app-ui .app-shell .page-shell.sells-page{
  max-width:none
}

body.app-ui .sells-page .sells-table-stage{
  position:relative;
  overflow:visible
}

/* Enough for every column at its natural width; below this the stage scrolls sideways rather
   than crushing the amounts. Two columns were added after 1120px was set. */

body.app-ui .sells-page .sells-table-stage table{
  width:100%;
  min-width:1320px
}

/* The row actions lead the row now, so the cell they open out of is the first one — not the
   last, which is where these rules were written for. */

body.app-ui .sells-page #sell_table td:first-child{
  position:relative;
  overflow:visible
}

body.app-ui .sells-page #sell_table td:has(.sell-action-group.open){
  z-index:190
}

body.app-ui .sells-page .sell-row-actions{
  display:flex;
  justify-content:flex-start;
  gap:6px;
  white-space:nowrap
}

body.app-ui .sells-page .sell-action-group.open{
  z-index:200
}

/* It hung off the right edge because it was the right-most column; from the left edge it would
   now open off the side of the table. */

body.app-ui .sells-page .sell-action-menu{
  left:0;
  right:auto;
  z-index:210;
  min-width:210px
}

body.app-ui .sells-page .sell-action-menu .table-action-icon{
  width:16px;
  height:16px;
  flex:0 0 16px;
  color:var(--text-3)
}

body.app-ui .sells-page .sell-action-menu>li>a:hover .table-action-icon{
  color:currentColor
}

body.app-ui .sells-page .sell-action-menu>li>.table-action-delete .table-action-icon{
  color:var(--danger)
}

body.app-ui .sells-page #sell_table td{
  vertical-align:middle!important;
  font-size:12.5px
}

body.app-ui .sells-page .sells-invoice-cell{
  display:flex;
  align-items:center;
  gap:10px
}

body.app-ui .sells-page .sells-invoice-cell__icon{
  display:grid;
  width:34px;
  height:34px;
  flex:0 0 34px;
  place-items:center;
  border-radius:9px;
  background:#e8f6ed;
  color:#21894a
}

body.app-ui .sells-page .sells-invoice-cell strong{
  display:block;
  color:#17201b;
  font-size:12.5px;
  font-weight:800
}

body.app-ui .sells-page .sells-invoice-cell small{
  display:block;
  margin-top:1px;
  color:#8a958f;
  font-size:10px
}

body.app-ui .sells-page .sells-date-cell strong{
  color:#2a3630;
  font-size:12px;
  font-weight:650;
  white-space:nowrap
}

/* A person's name stays on one line. These are Khmer names written beside their Latin spelling —
   "Lim Udam លឹម ឧត្តម" — and a wrap lands mid-name, which reads as two people until you look
   twice. The columns that carry a name give it the width instead. */

body.app-ui .sells-page .sells-party-cell strong{
  display:block;
  color:#17201b;
  font-size:12.5px;
  font-weight:750;
  white-space:nowrap
}

body.app-ui .sells-page .sells-party-cell small{
  display:block;
  margin-top:1px;
  color:#66736c;
  font-size:10.5px
}

body.app-ui .sells-page .sells-party-cell .sells-location{
  color:#8a958f
}

body.app-ui .sells-page .sells-payment-stack small{
  display:flex;
  gap:5px;
  margin-top:3px;
  color:#8a958f;
  font-size:10px
}

body.app-ui .sells-page .sells-payment-stack small strong{
  color:#2a3630;
  font-weight:700
}

/* Where a sale is going, in a column of its own. Payment and shipping answer two different
   questions and were stacked in one cell, so somebody scanning for deliveries read past the
   money on every row to find them. */

/* Wide enough to hold a booking code and a route on one line each, bounded so a long note
   wraps inside its own column instead of pushing the amounts off the screen. The note is shown
   whole, so the cell grows downwards — never sideways. */

body.app-ui .sells-page .sells-shipping-cell{
  max-width:320px;
  min-width:210px
}

body.app-ui .sells-page .sells-ship-stack small{
  display:flex;
  gap:5px;
  margin-top:3px;
  color:#8a958f;
  font-size:10px
}

body.app-ui .sells-page .sells-ship-stack small strong{
  color:#2a3630;
  font-weight:700
}

/* The note is typed over several lines — a booking code, a route, a time, a seat count — and
   every one of them is a fact somebody needs, so it is shown whole, on the lines it was typed
   with. It was clamped to two and cut with an ellipsis, which put the answer behind a hover on
   the one screen that exists to be scanned. Its label sits above rather than beside it, because
   a label sharing the line leaves nothing for the note itself. */

body.app-ui .sells-page .sells-ship-stack .sells-ship-note{
  flex-direction:column;
  gap:1px;
  margin-top:4px;
  padding-top:4px;
  border-top:1px dashed var(--border,#e2e8e5)
}

body.app-ui .sells-page .sells-ship-stack .sells-ship-note strong{
  color:#17201b;
  font-weight:650;
  line-height:1.4;
  white-space:pre-line;
  overflow-wrap:anywhere
}

body.app-ui .sells-page .sells-ship-stack .sells-ship-line strong{
  overflow-wrap:anywhere
}

/* Which job is this — the repair invoice listing's identity cell.
   It was three columns: a delivery date, a job sheet number and an invoice number, each holding
   one short value about the same row in a table that already scrolls sideways. Folded into one,
   the invoice leads because its number is what anyone types looking for a row, and the two under
   it carry their names — three bare values stacked without labels is a puzzle. Tokens throughout,
   so the cell follows the dark theme. */

body.app-ui .repair-identity-cell{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:1px;
  min-width:0;
  max-width:190px
}

/* The heading is the widest thing in this column — the cell under it holds an invoice number and
   two short labelled lines. Left to itself the table sized the column to the heading and gave it
   twice the width its contents need, in a table that already scrolls sideways. */

body.app-ui th.repair-identity-th{
  white-space:nowrap;
  width:1%
}

/* The repair invoice queue sizes itself to its contents rather than stretching a fixed share of
   the page across each column. `width:1%` on a cell in an auto-layout table means "as narrow as
   your content allows", which is what every one of these columns wants — the table scrolls
   sideways when the total needs it, instead of padding the early columns and pushing the rest
   off the edge. */

body.app-ui #pending_repair_table,body.app-ui #completed_repair_table,body.app-ui #all_repair_table{
  width:auto!important;
  min-width:100%;
  table-layout:auto
}

body.app-ui #pending_repair_table>thead>tr>th,body.app-ui #completed_repair_table>thead>tr>th,body.app-ui #all_repair_table>thead>tr>th{
  width:auto!important
}

body.app-ui .repair-identity-invoice{
  color:var(--text);
  font-size:12px;
  font-weight:750;
  line-height:1.35;
  white-space:nowrap
}

body.app-ui .repair-identity-date{
  color:var(--text-3);
  font-size:10px;
  line-height:1.4;
  white-space:nowrap
}

body.app-ui .repair-identity-line{
  display:flex;
  gap:5px;
  margin-top:3px;
  color:var(--text-3);
  font-size:10px;
  line-height:1.4;
  white-space:nowrap
}

/* The label is the quiet half; the value carries the weight. */

body.app-ui .repair-identity-line>span{
  flex:none
}

body.app-ui .repair-identity-line strong{
  color:var(--text-2);
  font-weight:700
}

body.app-ui .repair-identity-line a{
  color:var(--brand-strong);
  font-weight:700;
  text-decoration:none
}

body.app-ui .repair-identity-line a:hover{
  text-decoration:underline
}

/* Send Telegram, from a listing row — to the customer, the delivery person, the service staff,
   the sale agent, a supplier, a technician. One act, so one look everywhere it is offered: these
   used to be three separate inline styles and one class, one of them orange.
   Telegram's own blue, because the colour names the channel. */

body.app-ui .tg-row-send{
  display:inline-flex;
  align-items:center;
  gap:5px;
  margin-top:6px;
  padding:4px 10px;
  border:1px solid var(--telegram);
  border-radius:999px;
  background:var(--telegram);
  color:#fff;
  font-size:9.5px;
  font-weight:780;
  line-height:1.2;
  white-space:nowrap;
  text-decoration:none;
  cursor:pointer;
  transition:background .12s ease,border-color .12s ease
}

body.app-ui .tg-row-send>svg{
  flex:none;
  width:13px;
  height:13px;
  stroke-width:2.2
}

body.app-ui .tg-row-send:hover,body.app-ui .tg-row-send:focus{
  border-color:var(--telegram-strong);
  background:var(--telegram-strong);
  color:#fff;
  text-decoration:none
}

/* Nobody has connected a chat for this recipient yet. The button still works — it opens the modal,
   which offers the connect link — so it is muted rather than hidden. Hiding it is what made this
   invisible on 102 of 103 staff and read as a missing feature. */

body.app-ui .tg-row-send--none{
  border-color:var(--border);
  background:var(--surface-2);
  color:var(--text-3)
}

body.app-ui .tg-row-send--none:hover,body.app-ui .tg-row-send--none:focus{
  border-color:var(--telegram);
  background:var(--telegram);
  color:#fff
}

/* A sale with nothing to deliver says so. An empty cell reads as a column that failed to load. */

body.app-ui .sells-page .sells-ship-none{
  color:#b3bdb7;
  font-size:12px
}

/* The two notes on a sale wear the shipping note's treatment — label above, note under it, shown
   whole — so only the column's own width belongs here. Dropping the rule above the opening note
   is done on the cell itself, where it is drawn, so it holds without waiting on a CSS build. */

body.app-ui .sells-page .sells-note-cell{
  max-width:300px;
  min-width:190px
}

/* Who served the sale, and the way to message them. The button is built by the controller with
   its own inline styles — shared with every other listing that sends a Telegram — so only the
   stacking around it belongs here. */

/* No cap on these two. It was 190px, which is narrower than a name written in both scripts, so
   every served sale broke its staff member across two lines to obey it. */

body.app-ui .sells-page .sells-staff-stack,body.app-ui .sells-page .sells-agent-stack{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:5px;
  color:#2a3630;
  font-size:12px;
  font-weight:700
}

body.app-ui .sells-page .sells-staff-stack span,body.app-ui .sells-page .sells-agent-stack span{
  white-space:nowrap
}

/* The table the sale was served at, under the staff member who served it — a second line in the
   same cell, printed the way the rest of this table prints a fact about its heading. */

body.app-ui .sells-page .sells-staff-table{
  display:block;
  color:#8a958f;
  font-size:10.5px;
  font-weight:650;
  white-space:nowrap
}

/* What the agent earned sits under their name rather than in a column of its own: it is the
   same fact, and this table has no room to say it twice. */

body.app-ui .sells-page .sells-agent-stack small{
  display:flex;
  gap:5px;
  color:#8a958f;
  font-size:10px;
  font-weight:650
}

body.app-ui .sells-page .sells-agent-stack small .agent-commission{
  color:#2a3630;
  font-variant-numeric:tabular-nums;
  font-weight:750
}

body.app-ui .sells-page .sells-amount-cell{
  font-variant-numeric:tabular-nums;
  font-weight:700;
  color:#17201b
}

body.app-ui .sells-page .sells-due-stack small{
  display:flex;
  justify-content:flex-end;
  gap:5px;
  margin-top:2px;
  color:#8a958f;
  font-size:10px
}

body.app-ui .sells-page .sells-user-cell{
  display:flex;
  align-items:center;
  gap:9px
}

/* The initial in a circle, still drawn by the POS list, the drafts and the shipments. All sales
   dropped it — a column of identical badges left of the name they were made from — and prints the
   name in a div rather than a span, which is what keeps this off it. */

body.app-ui .sells-page .sells-user-cell>span:first-child{
  display:grid;
  width:30px;
  height:30px;
  flex:0 0 30px;
  place-items:center;
  border-radius:50%;
  background:#eef2f0;
  color:#53605a;
  font-size:12px;
  font-weight:800
}

body.app-ui .sells-page .sells-user-cell strong{
  display:block;
  color:#2a3630;
  font-size:12px;
  font-weight:700;
  white-space:nowrap
}

body.app-ui .sells-page .sells-user-cell small{
  display:block;
  margin-top:1px;
  color:#8a958f;
  font-size:9.5px;
  white-space:nowrap
}

body.app-ui .sells-page .sells-actions-cell,body.app-ui .sells-page .sells-actions-head{
  width:1%;
  white-space:nowrap;
  text-align:left
}

body.app-ui .sells-page .label{
  display:inline-flex;
  align-items:center;
  min-height:25px;
  padding:4px 9px;
  border-radius:999px;
  font-size:11px;
  font-weight:700
}

body.app-ui .sells-page .label.bg-green,body.app-ui .sells-page .label.bg-light-green{
  color:#21894a;
  background:#e4f5eb!important
}

body.app-ui .sells-page .label.bg-aqua,body.app-ui .sells-page .label.bg-info{
  color:#2463c9;
  background:#eaf2ff!important
}

body.app-ui .sells-page .label.bg-yellow{
  color:#b56c00;
  background:#fff1d8!important
}

body.app-ui .sells-page .label.bg-red{
  color:#c0392b;
  background:#fdeaea!important
}

body.app-ui .sells-page .sells-summary-strip{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:10px;
  padding:13px 15px;
  border-top:1px solid #e7ece9;
  background:#f8faf9
}

body.app-ui .sells-page .sells-summary-item>span{
  display:block;
  color:#8a958f;
  font-size:9px;
  font-weight:850;
  letter-spacing:.05em;
  text-transform:uppercase
}

body.app-ui .sells-page .sells-summary-item>strong{
  display:block;
  margin-top:3px;
  color:#17201b;
  font-size:13px;
  font-weight:800
}

body.app-ui .sells-page .sells-summary-item.is-total>strong{
  color:#21894a;
  font-size:15px
}

body.app-ui .sells-page .sells-summary-item.is-due>strong{
  color:#b56c00
}

body.app-ui .sells-page .sells-summary-item.is-return>strong{
  color:#c0392b
}

body.app-ui .sells-page .sells-summary-item.hidden{
  display:none
}

@media (max-width:1280px){
  body.app-ui .sells-page .sells-stage-board{
    grid-template-columns:1fr 1fr
  }

  body.app-ui .sells-page .sells-stage-intro{
    grid-column:1/-1;
    border-right:0;
    border-bottom:1px solid #e7ece9
  }
}

@media (max-width:1100px){
  body.app-ui .sells-page .sells-filter-card__grid{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

  body.app-ui .sells-page .sells-summary-strip{
    grid-template-columns:repeat(3,minmax(0,1fr))
  }
}

/* The stage scrolls sideways wherever the window is narrower than the table's own minimum —
   1320px plus the shell's padding. Above that it must stay unclipped, because a box that
   scrolls on one axis clips on both, and the row action menu drops out of it. The breakpoint
   moved with the two columns that were added: at 1199px the table overflowed its card with no
   way to reach the last of it. */

@media (max-width:1399px){
  body.app-ui .sells-page .sells-table-stage{
    overflow-x:auto;
    transition:padding-bottom .16s ease
  }

  body.app-ui .sells-page .sells-table-stage:has(.sell-action-group.open){
    padding-bottom:250px
  }
}

@media (max-width:640px){
  /* Two to a row on a phone, not one.
   Four states stacked one per row pushed the filters and the list itself below the fold, and the
   whole point of the board is to be glanced at. The intro spans both columns above them. */

  body.app-ui .sells-page .sells-stage-board{
    grid-template-columns:1fr 1fr
  }

  body.app-ui .sells-page .sells-stage-board>.sells-stage-intro{
    grid-column:1 / -1
  }

  body.app-ui .sells-page .sells-stage{
    border-right:0;
    border-top:1px solid #e7ece9
  }

  body.app-ui .sells-page .sells-filter-card__grid{
    grid-template-columns:1fr
  }

  body.app-ui .sells-page .sells-summary-strip{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}

/* Invoice URL dialog */

body.app-ui .invoice-url-dialog{
  width:calc(100% - 32px);
  max-width:640px;
  margin:9vh auto
}

body.app-ui .invoice-url-modal{
  overflow:hidden;
  border:1px solid #dfe6e2;
  border-radius:16px!important;
  background:var(--surface);
  box-shadow:0 24px 70px rgba(17,29,22,.2)
}

body.app-ui .invoice-url-header{
  display:grid;
  grid-template-columns:42px minmax(0,1fr) 36px;
  align-items:center;
  gap:12px;
  padding:16px 18px;
  border-bottom:1px solid #e7ece9
}

body.app-ui .invoice-url-header__icon{
  display:grid;
  width:42px;
  height:42px;
  place-items:center;
  border-radius:11px;
  background:#e8f6ed;
  color:#21894a
}

body.app-ui .invoice-url-header h4{
  margin:0;
  color:#17201b;
  font-size:17px;
  font-weight:800
}

body.app-ui .invoice-url-header p{
  margin:3px 0 0;
  color:#8a958f;
  font-size:12.5px
}

body.app-ui .invoice-url-header p strong{
  color:#2a3630
}

body.app-ui .invoice-url-close{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border:0;
  border-radius:10px;
  color:#66736c;
  background:#f2f5f3;
  cursor:pointer
}

body.app-ui .invoice-url-close:hover{
  background:#e7ece9;
  color:#17201b
}

body.app-ui .invoice-url-body{
  padding:18px
}

body.app-ui .invoice-url-body>label{
  display:block;
  margin-bottom:7px;
  color:#53605a;
  font-size:12.5px;
  font-weight:750
}

body.app-ui .invoice-url-control{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px
}

body.app-ui .invoice-url-control .form-control{
  height:44px;
  border-radius:10px;
  background:var(--surface-2);
  font-size:13px;
  font-variant-ligatures:none
}

body.app-ui .invoice-url-control .form-control:focus{
  background:var(--surface)
}

body.app-ui .invoice-url-control>button{
  display:inline-flex;
  align-items:center;
  gap:6px;
  height:44px;
  padding:0 14px;
  border:1px solid #dfe6e2;
  border-radius:10px;
  background:var(--surface);
  color:#2a3630;
  font-size:12.5px;
  font-weight:750;
  cursor:pointer;
  transition:border-color .15s,background .15s,color .15s
}

body.app-ui .invoice-url-control>button:hover{
  border-color:#33a760;
  background:#e8f6ed;
  color:#21894a
}

body.app-ui .invoice-url-body small{
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:9px;
  color:#8a958f;
  font-size:11px
}

body.app-ui .invoice-url-footer{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:9px;
  padding:13px 18px;
  border-top:1px solid #e7ece9;
  background:var(--surface)
}

body.app-ui .invoice-url-footer .btn-ghost,body.app-ui .invoice-url-footer .btn-primary{
  height:42px;
  min-width:104px;
  justify-content:center
}

@media (max-width:520px){
  body.app-ui .invoice-url-control{
    grid-template-columns:1fr
  }

  body.app-ui .invoice-url-control>button{
    justify-content:center
  }
}

/* Drafts / Quotations listing extras (rides on sells-page) */

/* The reference is printed inside the All sales invoice cell, so it only has to say
   what the proforma and export labels under it look like. The row actions are the
   All sales ones — same classes, same left-opening menu — because the action leads
   this row too. */

body.app-ui .draft-list-page .sells-invoice-cell .label{
  display:inline-flex;
  align-items:center;
  min-height:22px;
  margin-top:3px;
  padding:3px 8px;
  border-radius:999px;
  font-size:10px;
  font-weight:750;
  color:#53605a;
  background:#eef2f0!important
}

body.app-ui .draft-list-page .sells-stage-board{
  grid-template-columns:minmax(240px,1.15fr) repeat(3,minmax(0,1fr))
}

body.app-ui .draft-list-page .sells-stage.is-active[data-sub-status="draft"]{
  background:#eff6ff;
  box-shadow:inset 0 -3px #3b82f6
}

body.app-ui .draft-list-page .sells-stage.is-active[data-sub-status="proforma"]{
  background:#fff8eb;
  box-shadow:inset 0 -3px #e79a22
}

body.app-ui .draft-list-page .sells-stage.is-active[data-sub-status="quotation"]{
  background:#eef9f2;
  box-shadow:inset 0 -3px #2e9d58
}

body.app-ui .draft-list-page .sells-summary-strip{
  grid-template-columns:repeat(2,minmax(0,1fr))
}

body.app-ui .draft-list-page .sells-table-stage table{
  min-width:960px
}

body.app-ui .draft-list-page .sells-party-telegram{
  display:block;
  margin-top:5px
}

@media (max-width:1280px){
  body.app-ui .draft-list-page .sells-stage-board{
    grid-template-columns:1fr 1fr
  }
}

@media (max-width:640px){
  body.app-ui .draft-list-page .sells-stage-board{
    grid-template-columns:1fr 1fr
  }

  body.app-ui .draft-list-page .sells-stage-board>.sells-stage-intro{
    grid-column:1 / -1
  }
}

/* Order Request listing (rides on sells-page) */

/* Five columns, not the twelve All sales carries — the 1320px floor the sells table sets would
   scroll this one sideways with empty space in it.

   The floor is the larger of the two, never 920 alone: with scrollX the table is sized to its
   content (`width:auto!important`), and the only thing that stretches it across the card is the
   100% floor further up this file. A bare pixel floor replaced that one, so on a wide screen the
   heading band stopped short of the card's right edge and the sort arrows sat in mid-air. */

body.app-ui .order-request-page .sells-table-stage table{
  min-width:max(920px,100%)
}

/* Sell Return listing extras (rides on sells-page) */

body.app-ui .sell-return-page #sell_return_table td{
  vertical-align:middle!important;
  font-size:12.5px
}

body.app-ui .sell-return-page #sell_return_table td:last-child{
  position:relative;
  overflow:visible
}

body.app-ui .sell-return-page #sell_return_table td:has(.sell-return-action-group.open){
  z-index:190
}

body.app-ui .sell-return-page .sell-return-row-actions{
  display:flex;
  justify-content:flex-end;
  gap:6px;
  white-space:nowrap
}

body.app-ui .sell-return-page .sell-return-action-group.open{
  z-index:200
}

body.app-ui .sell-return-page .sell-return-action-menu{
  right:0;
  left:auto;
  z-index:210;
  min-width:200px
}

body.app-ui .sell-return-page .sell-return-action-menu .table-action-icon{
  width:16px;
  height:16px;
  flex:0 0 16px;
  color:var(--text-3)
}

body.app-ui .sell-return-page .sell-return-action-menu>li>a:hover .table-action-icon{
  color:currentColor
}

body.app-ui .sell-return-page .sell-return-action-menu>li>.table-action-delete .table-action-icon{
  color:var(--danger)
}

body.app-ui .sell-return-page .sell-return-parent-cell .btn-link{
  padding:0;
  border:0;
  background:none;
  color:#2463c9;
  font-size:12.5px;
  font-weight:750;
  text-decoration:underline;
  cursor:pointer
}

body.app-ui .sell-return-page .sell-return-note{
  display:block;
  max-width:200px;
  overflow:hidden;
  color:#66736c;
  font-size:11.5px;
  text-overflow:ellipsis;
  white-space:nowrap
}

body.app-ui .sell-return-page .sells-invoice-cell__icon{
  background:#fdeaea;
  color:#c0392b
}

body.app-ui .sell-return-page .sells-summary-strip{
  grid-template-columns:repeat(3,minmax(0,1fr))
}

body.app-ui .sell-return-page .sells-table-stage table{
  min-width:1040px
}

/* Shipments listing extras (rides on sells-page) */

body.app-ui .shipments-page .shipments-stage-board{
  grid-template-columns:minmax(240px,1.1fr) repeat(5,minmax(0,1fr))
}

body.app-ui .shipments-page .sells-stage__number.is-violet{
  background:#f1ecfd;
  color:#6d3fc4
}

body.app-ui .shipments-page .sells-stage.is-active{
  background:#f8faf9;
  box-shadow:inset 0 -3px #33a760
}

body.app-ui .shipments-page .shipments-unassigned{
  color:#b56c00;
  font-size:11.5px;
  font-weight:650
}

body.app-ui .shipments-page .shipments-status-cell{
  font-size:12px;
  font-weight:700;
  color:#2a3630
}

body.app-ui .shipments-page .sells-table-stage table{
  min-width:1320px
}

body.app-ui .shipments-page .sells-summary-strip{
  grid-template-columns:repeat(4,minmax(0,1fr))
}

@media (max-width:1280px){
  body.app-ui .shipments-page .shipments-stage-board{
    grid-template-columns:repeat(3,minmax(0,1fr))
  }
}

@media (max-width:640px){
  body.app-ui .shipments-page .shipments-stage-board{
    grid-template-columns:1fr
  }
}

/* Discounts listing + dialog */

body.app-ui .discount-page .discount-select-heading{
  width:36px
}

body.app-ui .discount-page .discount-select-cell input,body.app-ui .discount-page .discount-select-heading input{
  width:16px;
  height:16px;
  accent-color:#159a4d
}

body.app-ui .discount-page #discounts_list_table td{
  vertical-align:middle!important;
  font-size:12.5px
}

body.app-ui .discount-page .discount-name-cell{
  font-weight:750;
  color:#17201b
}

body.app-ui .discount-page .discount-name-cell .label{
  display:inline-flex;
  align-items:center;
  min-height:22px;
  margin-left:6px;
  padding:3px 8px;
  border-radius:999px;
  font-size:10px;
  font-weight:750;
  color:#b56c00;
  background:#fff1d8!important
}

body.app-ui .discount-page .discount-scope-stack{
  display:grid;
  gap:4px
}

body.app-ui .discount-page .discount-scope{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:5px;
  font-size:11px;
  color:#8a958f
}

body.app-ui .discount-page .discount-scope>strong{
  color:#2a3630;
  font-weight:700
}

body.app-ui .discount-page .discount-scope-products .label{
  display:inline-flex;
  margin:1px 2px 1px 0;
  padding:3px 8px;
  border-radius:999px;
  font-size:10.5px;
  font-weight:700;
  color:#21894a;
  background:#e4f5eb!important
}

body.app-ui .discount-page .discount-scope-all{
  color:#8a958f;
  font-size:11.5px
}

body.app-ui .discount-page .discount-row-actions{
  display:flex;
  justify-content:flex-end;
  gap:6px;
  white-space:nowrap
}

body.app-ui .discount-page .discount-activate-action{
  border-color:color-mix(in srgb,#159a4d 30%,#dfe6e2);
  color:#21894a
}

body.app-ui .discount-page .discount-selection-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:11px 15px;
  border-top:1px solid #e7ece9;
  background:#fff8eb
}

body.app-ui .discount-page .discount-selection-bar p{
  margin:0;
  color:#7a5a17;
  font-size:12.5px
}

body.app-ui .discount-page .discount-deactivate-action{
  height:38px;
  border-color:#e8c98a;
  color:#b56c00
}

body.app-ui .discount-page .discount-deactivate-action:hover{
  background:#fff1d8
}

body.app-ui .discount-modal-dialog{
  width:calc(100% - 32px);
  max-width:860px;
  margin:6vh auto
}

body.app-ui .discount-modal{
  overflow:visible;
  border:1px solid #dfe6e2;
  border-radius:16px!important;
  background:var(--surface);
  box-shadow:0 24px 70px rgba(17,29,22,.2)
}

body.app-ui .discount-modal-header{
  display:grid;
  grid-template-columns:42px minmax(0,1fr) 36px;
  align-items:center;
  gap:12px;
  padding:16px 18px;
  border-bottom:1px solid #e7ece9
}

body.app-ui .discount-modal-header__icon{
  display:grid;
  width:42px;
  height:42px;
  place-items:center;
  border-radius:11px;
  background:#e8f6ed;
  color:#21894a
}

body.app-ui .discount-modal-header h4{
  margin:0;
  color:#17201b;
  font-size:17px;
  font-weight:800
}

body.app-ui .discount-modal-header p{
  margin:3px 0 0;
  color:#8a958f;
  font-size:12px
}

body.app-ui .discount-modal-close{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border:0;
  border-radius:10px;
  color:#66736c;
  background:#f2f5f3;
  cursor:pointer
}

body.app-ui .discount-modal-close:hover{
  background:#e7ece9;
  color:#17201b
}

body.app-ui .discount-modal-body{
  padding:18px
}

body.app-ui .discount-field-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px
}

body.app-ui .discount-field-grid .form-group{
  margin:0;
  min-width:0
}

body.app-ui .discount-field-grid label{
  display:block;
  margin-bottom:6px;
  color:#53605a;
  font-size:12.5px;
  font-weight:750
}

body.app-ui .discount-field-wide{
  grid-column:1/-1
}

body.app-ui .discount-field-hint{
  display:block;
  margin-top:5px;
  color:#8a958f;
  font-size:10.5px
}

body.app-ui .discount-toggle-row{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:16px
}

body.app-ui .discount-toggle{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0;
  padding:11px 13px;
  border:1px solid #dfe6e2;
  border-radius:11px;
  background:#f8faf9;
  font-size:12.5px;
  cursor:pointer
}

body.app-ui .discount-modal-footer{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:9px;
  padding:13px 18px;
  border-top:1px solid #e7ece9;
  background:var(--surface);
  border-radius:0 0 16px 16px
}

body.app-ui .discount-modal-footer .btn-ghost,body.app-ui .discount-modal-footer .form-submit-button{
  height:42px;
  min-width:104px;
  justify-content:center
}

@media (max-width:640px){
  body.app-ui .discount-field-grid,body.app-ui .discount-toggle-row{
    grid-template-columns:1fr
  }
}

/* Import Sales workspace */

.app-shell .import-sales-page{
  max-width:1200px
}

.app-shell .import-sales-upload-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:end;
  gap:14px
}

.app-shell .import-sales-upload-row .form-group{
  margin:0;
  min-width:0
}

.app-shell .import-sales-upload-row label{
  display:block;
  margin-bottom:6px;
  color:var(--text-2);
  font-size:12.5px;
  font-weight:750
}

.app-shell .import-sales-upload-row .form-submit-button{
  height:46px;
  min-width:190px;
  justify-content:center
}

.app-shell .import-sales-steps{
  margin:0 0 16px;
  padding-left:20px;
  color:var(--text-2);
  font-size:13px;
  line-height:1.7
}

.app-shell .import-sales-fields{
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:11px
}

.app-shell .import-sales-fields-head{
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:12px;
  padding:10px 13px;
  border-bottom:1px solid var(--border-2);
  background:var(--surface-2);
  color:var(--text-3);
  font-size:10px;
  font-weight:850;
  letter-spacing:.05em;
  text-transform:uppercase
}

.app-shell .import-sales-field-row{
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:12px;
  padding:9px 13px;
  border-bottom:1px solid var(--border-2)
}

.app-shell .import-sales-field-row:last-child{
  border-bottom:0
}

.app-shell .import-sales-field-row>span{
  color:var(--text);
  font-size:12.5px;
  font-weight:700
}

.app-shell .import-sales-field-row>small{
  color:var(--text-3);
  font-size:11.5px;
  line-height:1.5
}

.app-shell .import-sales-history-table{
  overflow-x:auto
}

.app-shell .import-sales-history-table table{
  width:100%;
  min-width:680px;
  margin:0
}

.app-shell .import-sales-history-table thead th{
  padding:10px 12px;
  border-bottom:1px solid var(--border-2);
  background:var(--surface-2);
  color:var(--text-3);
  font-size:10px;
  font-weight:850;
  letter-spacing:.05em;
  text-align:left;
  text-transform:uppercase
}

.app-shell .import-sales-history-table thead th.text-right{
  text-align:right
}

.app-shell .import-sales-history-table tbody td{
  padding:11px 12px;
  border-bottom:1px solid var(--border-2);
  font-size:12.5px;
  vertical-align:top
}

.app-shell .import-sales-history-table tbody tr:last-child td{
  border-bottom:0
}

.app-shell .import-sales-batch{
  font-weight:800;
  color:var(--text)
}

.app-shell .import-sales-invoices small{
  display:block;
  margin-top:3px;
  color:var(--text-3);
  font-size:10.5px
}

.app-shell .import-sales-revert{
  color:var(--danger);
  border-color:color-mix(in srgb,var(--danger) 25%,var(--border))
}

.app-shell .import-sales-revert:hover{
  background:var(--danger-weak)
}

.app-shell .import-sales-empty{
  padding:22px;
  color:var(--text-3);
  text-align:center
}

@media (max-width:700px){
  .app-shell .import-sales-upload-row{
    grid-template-columns:1fr
  }

  .app-shell .import-sales-upload-row .form-submit-button{
    width:100%
  }
}

/* ---- CRM module (shared page language) ---- */

.app-shell .crm-page{
  max-width:1480px
}

.app-shell .crm-stat-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:13px;
  margin-top:14px
}

.app-shell .crm-stat-grid.is-four{
  grid-template-columns:repeat(4,minmax(0,1fr))
}

.app-shell .crm-stat-tile{
  display:flex;
  align-items:center;
  gap:13px;
  padding:15px 16px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

.app-shell .crm-stat-tile__icon{
  display:grid;
  width:44px;
  height:44px;
  flex:0 0 44px;
  place-items:center;
  border-radius:12px
}

.app-shell .crm-stat-tile__icon.is-green{
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .crm-stat-tile__icon.is-blue{
  background:#eaf2ff;
  color:#2463c9
}

.app-shell .crm-stat-tile__icon.is-amber{
  background:#fff1d8;
  color:#b56c00
}

.app-shell .crm-stat-tile__icon.is-violet{
  background:#f1ecfd;
  color:#6d3fc4
}

.app-shell .crm-stat-tile small{
  display:block;
  color:var(--text-3);
  font-size:11px;
  font-weight:650
}

.app-shell .crm-stat-tile strong{
  display:block;
  margin-top:2px;
  color:var(--text);
  font-size:20px;
  font-weight:850
}

.app-shell .crm-panel-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(330px,1fr));
  gap:13px;
  margin-top:14px
}

.app-shell .crm-panel{
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

.app-shell .crm-panel-wide{
  margin-top:14px
}

.app-shell .crm-panel-head{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 15px;
  border-bottom:1px solid var(--border-2);
  background:var(--surface-2)
}

.app-shell .crm-panel-head>span{
  display:grid;
  width:32px;
  height:32px;
  flex:0 0 32px;
  place-items:center;
  border-radius:9px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .crm-panel-head>strong{
  min-width:0;
  flex:1;
  color:var(--text);
  font-size:13px;
  font-weight:800
}

.app-shell .crm-panel-body{
  padding:14px 15px
}

.app-shell .crm-fact-list{
  display:grid
}

.app-shell .crm-fact{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 15px;
  border-bottom:1px solid var(--border-2)
}

.app-shell .crm-fact:last-child{
  border-bottom:0
}

.app-shell .crm-fact>span{
  color:var(--text-2);
  font-size:12.5px;
  font-weight:650
}

.app-shell .crm-fact>strong{
  color:var(--text);
  font-size:13.5px;
  font-weight:800
}

.app-shell .crm-panel-table{
  padding:6px 15px 12px;
  overflow-x:auto
}

.app-shell .crm-panel-table table{
  width:100%;
  margin:0
}

.app-shell .crm-panel-table thead th{
  padding:9px 8px;
  border-bottom:1px solid var(--border-2);
  color:var(--text-3);
  font-size:10px;
  font-weight:850;
  letter-spacing:.05em;
  text-align:left;
  text-transform:uppercase
}

.app-shell .crm-panel-table thead th.text-right{
  text-align:right
}

/* Bootstrap's .text-right left with Bootstrap, and every screen that noticed patched it for
   itself — this is the one rule all of them meant: a numeric column's heading sits over the
   numbers it heads, in any table. */

.app-shell .table thead th.text-right,
.app-shell .table thead td.text-right,
.app-shell .table tbody td.text-right{
  text-align:right
}

.app-shell .crm-panel-table tbody td{
  padding:9px 8px;
  border-bottom:1px solid var(--border-2);
  font-size:12.5px
}

.app-shell .crm-panel-table tbody tr:last-child td{
  border-bottom:0
}

.app-shell .crm-empty{
  padding:16px;
  color:var(--text-3);
  text-align:center
}

.app-shell .crm-section-divider{
  display:flex;
  align-items:center;
  gap:9px;
  margin-top:22px;
  color:var(--text-2)
}

.app-shell .crm-section-divider>span{
  display:grid;
  width:30px;
  height:30px;
  place-items:center;
  border-radius:9px;
  background:var(--surface-2);
  color:var(--text-3)
}

.app-shell .crm-section-divider>strong{
  font-size:12px;
  font-weight:850;
  letter-spacing:.04em;
  text-transform:uppercase
}

.app-shell .crm-section-divider::after{
  content:"";
  height:1px;
  flex:1;
  background:var(--border-2)
}

.app-shell .crm-birthday-action{
  margin-left:auto
}

.app-shell .crm-birthday-caption{
  margin:8px 0 4px;
  color:var(--text-3);
  font-size:10px;
  font-weight:850;
  letter-spacing:.05em;
  text-transform:uppercase
}

.app-shell .crm-birthday-check{
  width:36px
}

.app-shell .crm-birthday-name{
  margin:0;
  font-weight:650;
  cursor:pointer
}

.app-shell .crm-page .contat_id{
  width:16px;
  height:16px;
  accent-color:var(--brand)
}

.app-shell .crm-inline-filters{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,280px));
  gap:13px;
  margin-bottom:14px
}

.app-shell .crm-inline-filters .form-group{
  margin:0
}

.app-shell .crm-inline-filters label{
  display:block;
  margin-bottom:6px;
  color:var(--text-2);
  font-size:12px;
  font-weight:750
}

.app-shell .crm-wide-table{
  overflow-x:auto
}

.app-shell .crm-wide-table table{
  width:100%;
  min-width:640px;
  margin:0
}

.app-shell .crm-wide-table thead th{
  padding:10px 10px;
  border-bottom:1px solid var(--border-2);
  background:var(--surface-2);
  color:var(--text-3);
  font-size:10px;
  font-weight:850;
  letter-spacing:.05em;
  text-align:left;
  text-transform:uppercase
}

.app-shell .crm-wide-table tbody td{
  padding:10px;
  border-bottom:1px solid var(--border-2);
  font-size:12.5px
}

@media (max-width:1100px){
  .app-shell .crm-stat-grid,.app-shell .crm-stat-grid.is-four{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}

@media (max-width:640px){
  .app-shell .crm-stat-grid,.app-shell .crm-stat-grid.is-four{
    grid-template-columns:1fr
  }
}

/* CRM shared page chrome */

.app-shell .crm-page-head{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px 16px;
  margin-top:14px;
  padding-bottom:16px;
  border-bottom:1px solid var(--border)
}

.app-shell .crm-page-head h1{
  margin:0;
  color:var(--text);
  font-size:22px;
  font-weight:850;
  letter-spacing:-.4px;
  line-height:1.15
}

.app-shell .crm-page-head p{
  margin:4px 0 0;
  color:var(--text-3);
  font-size:12.5px
}

.app-shell .crm-page-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px
}

/* List-or-board switch. Written for CRM leads first; Projects shows the same pair, so the
   plain names carry the styling and the crm- ones ride along. */

.app-shell .view-toggle,.app-shell .crm-view-toggle{
  display:inline-flex;
  gap:2px;
  padding:3px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface-2)
}

.app-shell .view-toggle-option,.app-shell .crm-view-toggle-option{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin:0;
  padding:7px 13px;
  border-radius:8px;
  color:var(--text-3);
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  text-decoration:none;
  transition:background .15s,color .15s,box-shadow .15s
}

.app-shell .view-toggle-option:hover,.app-shell .crm-view-toggle-option:hover{
  color:var(--text-2);
  text-decoration:none
}

.app-shell .view-toggle-option input,.app-shell .crm-view-toggle-option input{
  position:absolute;
  opacity:0;
  pointer-events:none
}

.app-shell .view-toggle-option.active,.app-shell .crm-view-toggle-option.active{
  background:var(--surface);
  color:var(--text);
  box-shadow:0 1px 2px rgba(20,27,23,.08)
}

.app-shell .view-toggle-option svg,.app-shell .crm-view-toggle-option svg{
  width:15px;
  height:15px
}

.app-shell .crm-filter-panel{
  margin-top:14px
}

.app-shell .crm-filter-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:13px;
  padding:14px 15px
}

.app-shell .crm-filter-grid .form-group{
  margin:0;
  min-width:0
}

.app-shell .crm-filter-grid label,.app-shell .crm-form-grid label{
  display:block;
  margin-bottom:6px;
  color:var(--text-2);
  font-size:12px;
  font-weight:750
}

.app-shell .crm-form-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin-bottom:6px
}

.app-shell .crm-form-grid.is-four{
  grid-template-columns:repeat(4,minmax(0,1fr))
}

.app-shell .crm-form-grid.is-name-type{
  grid-template-columns:minmax(0,2fr) minmax(0,1fr)
}

.app-shell .crm-form-grid.is-recipients{
  grid-template-columns:minmax(0,1fr) minmax(0,2fr)
}

.app-shell .crm-form-grid .form-group{
  margin:0;
  min-width:0
}

.app-shell .crm-form-wide{
  grid-column:1/-1
}

.app-shell .crm-form-next{
  display:flex;
  align-items:flex-end
}

.app-shell .crm-days-control{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:0;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface-2)
}

.app-shell .crm-days-control>span{
  padding:0 12px;
  color:var(--text-3);
  font-size:12px;
  font-weight:700;
  white-space:nowrap
}

.app-shell .crm-days-control>.form-control,.app-shell .crm-days-control>select{
  height:42px;
  border:0;
  border-radius:0;
  background:var(--surface)
}

.app-shell .crm-select-tools{
  display:inline-flex;
  gap:6px;
  margin-left:8px
}

.app-shell .crm-select-tools .btn-sm{
  height:26px;
  padding:0 9px;
  font-size:10.5px
}

.app-shell .crm-tag-help{
  margin-top:7px;
  color:var(--text-3);
  font-size:11.5px;
  line-height:1.55
}

.app-shell .crm-tag-help strong{
  color:var(--text-2)
}

.app-shell .crm-tag-help .text-primary{
  color:#2463c9
}

.app-shell .crm-toggle-field{
  display:flex;
  align-items:center;
  gap:9px
}

.app-shell .crm-inline-toggle{
  display:flex;
  align-items:center;
  gap:9px;
  margin:0;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface-2);
  font-size:12.5px;
  font-weight:650;
  cursor:pointer
}

.app-shell .crm-inline-toggle-row{
  display:flex;
  flex-wrap:wrap;
  gap:9px
}

.app-shell .crm-form-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid var(--border-2)
}

.app-shell .crm-form-actions small{
  margin-right:auto;
  color:var(--text-3);
  font-size:11.5px
}

.app-shell .crm-form-actions .btn-primary,.app-shell .crm-form-actions .btn-ghost{
  height:42px;
  min-width:110px;
  justify-content:center
}

.app-shell .crm-selection-bar{
  display:flex;
  justify-content:flex-end;
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid var(--border-2)
}

.app-shell .crm-danger-action{
  border-color:color-mix(in srgb,var(--danger) 25%,var(--border));
  color:var(--danger)
}

.app-shell .crm-danger-action:hover{
  background:var(--danger-weak)
}

.app-shell .crm-template-card{
  max-width:560px;
  margin:14px auto 0
}

.app-shell .crm-template-card-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:9px
}

.app-shell .crm-template-facts{
  margin-bottom:14px;
  border:1px solid var(--border-2);
  border-radius:11px;
  overflow:hidden
}

.app-shell .crm-template-body{
  padding:13px 14px;
  border:1px solid var(--border-2);
  border-radius:11px
}

.app-shell .crm-template-body>strong{
  display:block;
  margin-bottom:8px;
  color:var(--text-2);
  font-size:12.5px
}

.app-shell .crm-attachments-block{
  margin-top:16px
}

.app-shell .crm-attachments-block h4{
  margin:0 0 8px;
  color:var(--text);
  font-size:14px;
  font-weight:800
}

.app-shell .crm-lead-switcher{
  min-width:260px
}

.app-shell .crm-lead-customer-note{
  color:var(--danger)!important;
  font-style:italic
}

.app-shell .crm-lead-info-region{
  margin-top:14px
}

/* Tabs card (bootstrap tab mechanics, modern skin) */

.app-shell .crm-tabs-card .nav-tabs-custom{
  background:transparent
}

.app-shell .crm-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  margin:0;
  padding:10px 12px 0;
  border-bottom:1px solid var(--border-2);
  list-style:none
}

.app-shell .crm-tabs>li{
  float:none;
  margin:0
}

.app-shell .crm-tabs>li>a{
  display:flex;
  align-items:center;
  gap:7px;
  margin:0;
  padding:10px 14px;
  border:0;
  border-radius:9px 9px 0 0;
  background:transparent;
  color:var(--text-2);
  font-size:12.5px;
  font-weight:700;
  text-decoration:none
}

.app-shell .crm-tabs>li>a:hover{
  background:var(--surface-2);
  color:var(--text)
}

.app-shell .crm-tabs>li.active>a{
  background:var(--brand-weak);
  color:var(--brand-strong);
  box-shadow:inset 0 -2px 0 var(--brand)
}

.app-shell .crm-tab-content{
  padding:15px
}

/* Segmented tabs: each option says what it holds, and the selected one is a raised pill on a sunk
   track rather than an underline under a word. Used where the choice is between two views of the
   same screen — the follow-up list and the rules that generate it. */

.app-shell .crm-tabs-segmented{
  gap:6px;
  padding:12px 12px;
  border-bottom:1px solid var(--border-2)
}

.app-shell .crm-tabs-segmented>li>a{
  align-items:center;
  gap:10px;
  padding:9px 14px;
  border:1px solid transparent;
  border-radius:11px;
  background:var(--surface-2)
}

.app-shell .crm-tabs-segmented>li>a:hover{
  border-color:var(--border);
  background:var(--surface)
}

.app-shell .crm-tabs-segmented>li.active>a{
  border-color:var(--border);
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

.app-shell .crm-tabs-segmented .crm-tab-ic{
  display:grid;
  width:30px;
  height:30px;
  flex:0 0 30px;
  place-items:center;
  border-radius:9px;
  background:var(--surface);
  color:var(--text-3)
}

.app-shell .crm-tabs-segmented>li.active .crm-tab-ic{
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .crm-tabs-segmented .crm-tab-text{
  display:block;
  min-width:0;
  text-align:left
}

.app-shell .crm-tabs-segmented .crm-tab-text>strong{
  display:block;
  color:var(--text-2);
  font-size:12.5px;
  font-weight:750;
  line-height:1.3;
  white-space:nowrap
}

.app-shell .crm-tabs-segmented>li.active .crm-tab-text>strong{
  color:var(--text)
}

@media(max-width:620px){
  .app-shell .crm-tabs-segmented>li{
    flex:1 1 100%
  }

  .app-shell .crm-tabs-segmented>li>a{
    width:100%
  }
}

/* Default DataTables controls inside CRM panels */

.app-shell .crm-dt .dataTables_wrapper .dataTables_length,.app-shell .crm-panel .dataTables_length{
  margin:0 0 10px;
  color:var(--text-3);
  font-size:12px
}

.app-shell .crm-dt .dataTables_wrapper .dataTables_length select,.app-shell .crm-panel .dataTables_length select{
  height:34px;
  margin:0 5px;
  padding:0 8px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface)
}

.app-shell .crm-dt .dataTables_wrapper .dataTables_filter,.app-shell .crm-panel .dataTables_filter{
  margin:0 0 10px;
  color:var(--text-3);
  font-size:12px
}

.app-shell .crm-dt .dataTables_wrapper .dataTables_filter input,.app-shell .crm-panel .dataTables_filter input{
  height:36px;
  margin-left:6px;
  padding:0 11px;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface)
}

.app-shell .crm-dt .dataTables_wrapper .dataTables_filter input:focus,.app-shell .crm-panel .dataTables_filter input:focus{
  border-color:var(--brand);
  outline:0;
  box-shadow:0 0 0 3px rgba(21,154,77,.12)
}

.app-shell .crm-panel .dataTables_info{
  padding-top:10px;
  color:var(--text-3);
  font-size:11.5px
}

.app-shell .crm-panel .dataTables_paginate{
  padding-top:8px
}

.app-shell .crm-panel table.dataTable{
  width:100%!important;
  margin:0!important
}

.app-shell .crm-panel table.dataTable thead th{
  padding:10px;
  border-bottom:1px solid var(--border-2);
  background:var(--surface-2);
  color:var(--text-3);
  font-size:10px;
  font-weight:850;
  letter-spacing:.05em;
  text-align:left;
  text-transform:uppercase
}

.app-shell .crm-panel table.dataTable tbody td{
  padding:10px;
  border-bottom:1px solid var(--border-2);
  font-size:12.5px;
  vertical-align:middle
}

.app-shell .crm-panel table.dataTable tfoot td{
  padding:10px;
  background:var(--surface-2);
  font-weight:750
}

.app-shell .crm-panel .footer-total td{
  border-top:1px solid var(--border-2)
}

/* Campaign listing */

.app-shell .crm-campaigns-workspace{
  margin-top:14px;
  overflow:visible
}

.app-shell .crm-campaigns-section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 14px;
  border-bottom:1px solid var(--border-2);
  background:var(--surface)
}

.app-shell .crm-campaigns-section-head>div{
  display:flex;
  align-items:center;
  gap:9px
}

.app-shell .crm-campaigns-section-head>div>span{
  display:grid;
  width:32px;
  height:32px;
  flex:0 0 32px;
  place-items:center;
  border-radius:9px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .crm-campaigns-section-head strong,.app-shell .crm-campaigns-section-head small{
  display:block
}

.app-shell .crm-campaigns-section-head strong{
  color:var(--text);
  font-size:12.5px;
  font-weight:810
}

.app-shell .crm-campaigns-section-head small{
  margin-top:1px;
  color:var(--text-3);
  font-size:9.5px
}

.app-shell .crm-campaigns-list-card{
  margin:0;
  border:0;
  border-radius:0 0 13px 13px;
  box-shadow:none
}

.app-shell .crm-campaigns-list-card>.table-toolbar{
  gap:9px;
  padding:10px 12px;
  background:var(--surface)
}

.app-shell .crm-campaigns-list-card .table-toolbar-search{
  width:min(100%,330px)
}

.app-shell .crm-campaigns-list-card .table-toolbar-search .finput{
  height:34px;
  padding-left:31px;
  border-radius:8px;
  font-size:11.5px
}

.app-shell .crm-campaigns-list-card .table-toolbar-search>svg{
  left:10px;
  width:13px;
  height:13px
}

.app-shell .crm-campaigns-list-card .table-toolbar-filters{
  display:flex;
  min-width:185px;
  align-items:center
}

.app-shell .crm-campaign-channel-filter{
  display:grid;
  grid-template-columns:auto auto minmax(100px,1fr);
  min-width:185px;
  align-items:center;
  gap:6px;
  margin:0;
  color:var(--text-3);
  font-size:10.5px;
  font-weight:720
}

.app-shell .crm-campaign-channel-filter>svg{
  width:13px;
  height:13px
}

.app-shell .crm-campaign-channel-filter .select-field{
  min-width:112px
}

.app-shell .crm-campaign-channel-filter select.form-control{
  height:34px;
  padding:0 28px 0 9px;
  border-radius:8px;
  background:var(--surface);
  font-size:11px
}

.app-shell .crm-campaigns-list-card .table-toolbar-actions{
  gap:8px
}

.app-shell .crm-campaigns-list-card .table-export-holder,.app-shell .crm-campaigns-list-card .table-export-holder .dt-buttons{
  gap:5px
}

.app-shell .crm-campaigns-list-card .table-export-holder .dt-button,.app-shell .crm-campaigns-list-card .table-export-holder .btn,.app-shell .crm-campaigns-list-card .table-export-holder .table-export-button,.app-shell .crm-campaigns-list-card .table-export-holder>a,.app-shell .crm-campaigns-list-card .table-export-holder>button,.app-shell .crm-campaigns-list-card .table-export-holder .dt-buttons>a,.app-shell .crm-campaigns-list-card .table-export-holder .dt-buttons>button{
  padding:0 9px;
  border-radius:8px!important;
  font-size:10.5px!important;
  gap:5px
}

.app-shell .crm-campaigns-list-card .table-page-size .finput{
  width:66px;
  border-radius:8px;
  font-size:10.5px
}

.app-shell .crm-campaigns-table-wrap{
  margin:0;
  overflow:visible
}

.app-shell .crm-campaigns-table-wrap .dataTables_wrapper{
  padding:0
}

.app-shell .crm-campaigns-table-wrap table{
  min-width:760px
}

.app-shell .crm-campaigns-list-card table.dataTable thead th{
  padding:10px 12px
}

.app-shell .crm-campaigns-list-card table.dataTable tbody td{
  padding:11px 12px;
  color:var(--text-2);
  vertical-align:middle
}

.app-shell .crm-campaigns-list-card table.dataTable tbody tr:hover{
  background:color-mix(in srgb,var(--brand-weak) 42%,var(--surface))
}

.app-shell .crm-campaigns-list-card table.dataTable tbody td:first-child{
  position:relative;
  width:82px;
  overflow:visible
}

.app-shell .crm-campaigns-list-card table.dataTable tbody td:first-child:has(.crm-campaign-row-actions .btn-group.open){
  z-index:170
}

.app-shell .crm-campaign-row-actions{
  display:flex;
  min-width:70px;
  align-items:center;
  gap:6px;
  white-space:nowrap
}

.app-shell .crm-campaign-row-actions .act{
  display:inline-grid;
  width:32px;
  min-width:32px;
  height:32px;
  min-height:32px;
  margin:0;
  padding:0;
  place-items:center;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface);
  color:var(--text-2);
  text-decoration:none;
  box-shadow:none;
  cursor:pointer;
  transition:border-color .15s,background .15s,color .15s,box-shadow .15s
}

.app-shell .crm-campaign-row-actions .act svg{
  display:block;
  width:15px;
  height:15px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round
}

.app-shell .crm-campaign-row-actions .crm-campaign-edit-action{
  border-color:color-mix(in srgb,var(--brand) 32%,var(--border));
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .crm-campaign-row-actions .crm-campaign-edit-action:hover{
  border-color:var(--brand);
  background:color-mix(in srgb,var(--brand-weak) 72%,var(--surface));
  color:var(--brand-strong);
  box-shadow:0 0 0 3px rgba(21,154,77,.1);
  text-decoration:none
}

.app-shell .crm-campaign-row-actions .crm-campaign-more-action:hover{
  border-color:var(--text-3);
  background:var(--surface-2);
  color:var(--text)
}

.app-shell .crm-campaign-row-actions .btn-group.open>.crm-campaign-more-action{
  border-color:var(--brand);
  background:var(--brand-weak);
  color:var(--brand-strong);
  box-shadow:0 0 0 3px rgba(21,154,77,.1)
}

.app-shell .crm-campaign-row-actions .dropdown-toggle:after,.app-shell .crm-campaign-row-actions .dropdown-toggle .caret{
  display:none
}

.app-shell .crm-campaign-row-actions .table-action-menu{
  right:auto;
  left:0;
  min-width:190px;
  padding:5px
}

.app-shell .crm-campaign-row-actions .table-action-menu>li>button{
  min-height:33px;
  padding:7px 9px;
  font-size:11.5px
}

.app-shell .crm-campaign-name-cell{
  display:flex;
  min-width:180px;
  align-items:center;
  gap:9px
}

.app-shell .crm-campaign-avatar{
  display:grid;
  width:34px;
  height:34px;
  flex:0 0 34px;
  place-items:center;
  border-radius:9px;
  background:linear-gradient(135deg,var(--brand),var(--brand-strong));
  color:#fff;
  font-size:11px;
  font-weight:830;
  box-shadow:0 6px 14px -9px rgba(21,154,77,.8)
}

.app-shell .crm-campaign-name-cell strong,.app-shell .crm-campaign-name-cell small{
  display:block
}

.app-shell .crm-campaign-name-cell strong{
  max-width:320px;
  overflow:hidden;
  color:var(--text);
  font-size:11.5px;
  font-weight:790;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .crm-campaign-name-cell small{
  margin-top:3px;
  color:var(--text-3);
  font-size:9px;
  font-weight:720
}

.app-shell .crm-campaign-name-cell small i{
  display:inline-block;
  width:6px;
  height:6px;
  margin-right:4px;
  border-radius:50%;
  background:currentColor
}

.app-shell .crm-campaign-name-cell small.is-draft{
  color:#9b6a12
}

.app-shell .crm-campaign-name-cell small.is-sent{
  color:var(--brand-strong)
}

.app-shell .crm-campaign-channel{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:4px 7px;
  border-radius:7px;
  font-size:9.5px;
  font-weight:750
}

.app-shell .crm-campaign-channel svg{
  width:12px;
  height:12px
}

.app-shell .crm-campaign-channel.is-email{
  background:#eaf1ff;
  color:#2d65c9
}

.app-shell .crm-campaign-channel.is-sms{
  background:#e7f7ed;
  color:#24824b
}

.app-shell .crm-campaign-owner-cell{
  display:flex;
  min-width:150px;
  align-items:center;
  gap:7px
}

.app-shell .crm-campaign-owner-cell>span{
  display:grid;
  width:27px;
  height:27px;
  flex:0 0 27px;
  place-items:center;
  border-radius:8px;
  background:var(--brand-weak);
  color:var(--brand-strong);
  font-size:8px;
  font-weight:820;
  text-transform:uppercase
}

.app-shell .crm-campaign-owner-cell strong{
  max-width:230px;
  overflow:hidden;
  color:var(--text-2);
  font-size:10.5px;
  font-weight:720;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .crm-campaign-date-cell{
  display:flex;
  align-items:center;
  gap:6px;
  color:var(--text-3);
  font-size:10.5px;
  font-weight:680;
  white-space:nowrap
}

.app-shell .crm-campaign-date-cell svg{
  width:13px;
  height:13px;
  color:var(--text-3)
}

.app-shell .crm-campaigns-list-card .data-table-footer{
  min-height:50px;
  padding:8px 11px
}

.app-shell .crm-campaigns-list-card .dataTables_info,.app-shell .crm-campaigns-list-card .dataTables_paginate{
  float:none;
  padding:0!important
}

.app-shell .crm-campaigns-list-card td.dataTables_empty{
  height:170px!important;
  color:var(--text-3)!important;
  text-align:center!important
}

@media(max-width:1100px){
  .app-shell .crm-campaigns-list-card>.table-toolbar{
    align-items:stretch;
    flex-wrap:wrap
  }

  .app-shell .crm-campaigns-list-card .table-toolbar-actions{
    margin-left:auto
  }
}

@media(max-width:760px){
  .app-shell .crm-campaigns-list-card .table-toolbar-filters,.app-shell .crm-campaign-channel-filter{
    width:100%
  }

  .app-shell .crm-campaign-channel-filter{
    grid-template-columns:auto auto minmax(0,1fr)
  }

  .app-shell .crm-campaigns-list-card .table-toolbar-actions{
    width:100%;
    margin-left:0
  }

  .app-shell .crm-campaigns-table-wrap{
    overflow-x:auto
  }
}

/* Campaign record dialog */

body.app-ui .crm-campaign-view-dialog{
  width:min(740px,calc(100vw - 28px));
  margin:34px auto
}

body.app-ui .crm-campaign-view{
  overflow:hidden;
  border:0;
  border-radius:15px;
  background:var(--surface);
  box-shadow:0 28px 76px -28px rgba(13,28,19,.62)
}

body.app-ui .crm-campaign-view__header{
  display:flex;
  min-height:74px;
  align-items:center;
  gap:11px;
  padding:13px 15px;
  border-bottom:1px solid var(--border-2);
  background:var(--surface)
}

body.app-ui .crm-campaign-view__identity{
  display:flex;
  min-width:0;
  align-items:center;
  gap:10px;
  flex:1
}

body.app-ui .crm-campaign-view__identity>div{
  min-width:0
}

body.app-ui .crm-campaign-view__identity small{
  display:block;
  color:var(--brand-strong);
  font-size:8.5px;
  font-weight:820;
  letter-spacing:.06em;
  text-transform:uppercase
}

body.app-ui .crm-campaign-view__identity h4{
  max-width:390px;
  margin:2px 0 0;
  overflow:hidden;
  color:var(--text);
  font-size:15px;
  font-weight:830;
  line-height:1.35;
  text-overflow:ellipsis;
  white-space:nowrap
}

body.app-ui .crm-campaign-view__icon{
  display:grid;
  width:39px;
  height:39px;
  flex:0 0 39px;
  place-items:center;
  border-radius:10px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

body.app-ui .crm-campaign-view__icon svg{
  width:15px;
  height:15px
}

body.app-ui .crm-campaign-view__icon.is-email{
  background:#eaf1ff;
  color:#2d65c9
}

body.app-ui .crm-campaign-view__badges{
  display:flex;
  align-items:center;
  gap:5px
}

body.app-ui .crm-campaign-view__status,body.app-ui .crm-campaign-view__channel{
  display:inline-flex;
  align-items:center;
  padding:4px 8px;
  border-radius:7px;
  font-size:8.5px;
  font-weight:780;
  white-space:nowrap
}

body.app-ui .crm-campaign-view__status.is-draft{
  background:#fff4df;
  color:#98620f
}

body.app-ui .crm-campaign-view__status.is-sent{
  background:var(--brand-weak);
  color:var(--brand-strong)
}

body.app-ui .crm-campaign-view__channel{
  background:var(--surface-3);
  color:var(--text-2)
}

body.app-ui .crm-campaign-view__body{
  display:grid;
  max-height:min(72vh,680px);
  gap:11px;
  padding:13px;
  overflow-y:auto;
  background:var(--surface-2)
}

body.app-ui .crm-campaign-view__facts{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  overflow:hidden;
  border:1px solid var(--border-2);
  border-radius:11px;
  background:var(--surface)
}

body.app-ui .crm-campaign-view__fact{
  display:flex;
  min-width:0;
  align-items:center;
  gap:8px;
  padding:11px
}

body.app-ui .crm-campaign-view__fact+.crm-campaign-view__fact{
  border-left:1px solid var(--border-2)
}

body.app-ui .crm-campaign-view__fact>span{
  display:grid;
  width:29px;
  height:29px;
  flex:0 0 29px;
  place-items:center;
  border-radius:8px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

body.app-ui .crm-campaign-view__fact>span svg{
  width:13px;
  height:13px
}

body.app-ui .crm-campaign-view__fact small,body.app-ui .crm-campaign-view__fact strong{
  display:block
}

body.app-ui .crm-campaign-view__fact small{
  color:var(--text-3);
  font-size:8.5px;
  font-weight:720
}

body.app-ui .crm-campaign-view__fact strong{
  margin-top:2px;
  color:var(--text-2);
  font-size:10px;
  font-weight:770;
  line-height:1.4;
  overflow-wrap:anywhere
}

body.app-ui .crm-campaign-view__subject{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 11px;
  border:1px solid var(--border-2);
  border-radius:10px;
  background:var(--surface)
}

body.app-ui .crm-campaign-view__subject>span{
  display:grid;
  width:29px;
  height:29px;
  flex:0 0 29px;
  place-items:center;
  border-radius:8px;
  background:#eaf1ff;
  color:#2d65c9
}

body.app-ui .crm-campaign-view__subject>span svg{
  width:13px;
  height:13px
}

body.app-ui .crm-campaign-view__subject small,body.app-ui .crm-campaign-view__subject strong{
  display:block
}

body.app-ui .crm-campaign-view__subject small{
  color:var(--text-3);
  font-size:8.5px;
  font-weight:720
}

body.app-ui .crm-campaign-view__subject strong{
  margin-top:2px;
  color:var(--text);
  font-size:11px;
  font-weight:780;
  overflow-wrap:anywhere
}

body.app-ui .crm-campaign-view__message,body.app-ui .crm-campaign-view__audience{
  padding:11px 12px;
  border:1px solid var(--border-2);
  border-radius:11px;
  background:var(--surface)
}

body.app-ui .crm-campaign-view__section-head{
  display:flex;
  align-items:center;
  gap:8px
}

body.app-ui .crm-campaign-view__section-head>span{
  display:grid;
  width:29px;
  height:29px;
  flex:0 0 29px;
  place-items:center;
  border-radius:8px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

body.app-ui .crm-campaign-view__section-head>span svg{
  width:13px;
  height:13px
}

body.app-ui .crm-campaign-view__section-head strong,body.app-ui .crm-campaign-view__section-head small{
  display:block
}

body.app-ui .crm-campaign-view__section-head strong{
  color:var(--text);
  font-size:11px;
  font-weight:800
}

body.app-ui .crm-campaign-view__section-head small{
  margin-top:1px;
  color:var(--text-3);
  font-size:8.5px
}

body.app-ui .crm-campaign-view__message-body{
  min-height:58px;
  margin-top:9px;
  padding:10px 11px;
  border-radius:8px;
  background:var(--surface-2);
  color:var(--text-2);
  font-size:11px;
  line-height:1.65;
  overflow-wrap:anywhere
}

body.app-ui .crm-campaign-view__message-body>:first-child{
  margin-top:0
}

body.app-ui .crm-campaign-view__message-body>:last-child{
  margin-bottom:0
}

body.app-ui .crm-campaign-view__empty{
  color:var(--text-3);
  font-style:italic
}

body.app-ui .crm-campaign-view__audience-group{
  margin-top:10px
}

body.app-ui .crm-campaign-view__audience-group>small{
  display:block;
  margin-bottom:5px;
  color:var(--text-3);
  font-size:8.5px;
  font-weight:750;
  text-transform:uppercase
}

body.app-ui .crm-campaign-view__audience-group>div{
  display:flex;
  flex-wrap:wrap;
  gap:5px
}

body.app-ui .crm-campaign-view__audience-group>div>span{
  display:inline-flex;
  align-items:center;
  padding:4px 7px;
  border:1px solid var(--border-2);
  border-radius:7px;
  background:var(--surface-2);
  color:var(--text-2);
  font-size:9.5px;
  font-weight:680
}

body.app-ui .crm-campaign-view__rule{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:10px;
  padding:9px 10px;
  border-radius:8px;
  background:var(--surface-2)
}

body.app-ui .crm-campaign-view__rule>span{
  display:grid;
  width:27px;
  height:27px;
  flex:0 0 27px;
  place-items:center;
  border-radius:7px;
  background:var(--surface);
  color:var(--brand-strong)
}

body.app-ui .crm-campaign-view__rule>span svg{
  width:12px;
  height:12px
}

body.app-ui .crm-campaign-view__rule small,body.app-ui .crm-campaign-view__rule strong{
  display:block
}

body.app-ui .crm-campaign-view__rule small{
  color:var(--text-3);
  font-size:8px;
  font-weight:720
}

body.app-ui .crm-campaign-view__rule strong{
  margin-top:2px;
  color:var(--text-2);
  font-size:9.5px;
  font-weight:740
}

body.app-ui .crm-campaign-view__footer{
  display:flex;
  min-height:54px;
  align-items:center;
  justify-content:flex-end;
  gap:9px;
  margin:0;
  padding:8px 13px;
  border-top:1px solid var(--border-2);
  background:var(--surface)
}

body.app-ui .crm-campaign-view__creator{
  display:flex;
  min-width:0;
  align-items:center;
  gap:7px;
  margin-right:auto
}

body.app-ui .crm-campaign-view__creator>span{
  display:grid;
  width:28px;
  height:28px;
  flex:0 0 28px;
  place-items:center;
  border-radius:8px;
  background:var(--brand-weak);
  color:var(--brand-strong);
  font-size:8px;
  font-weight:820
}

body.app-ui .crm-campaign-view__creator small,body.app-ui .crm-campaign-view__creator strong{
  display:block
}

body.app-ui .crm-campaign-view__creator small{
  color:var(--text-3);
  font-size:8.5px;
  font-weight:680
}

body.app-ui .crm-campaign-view__creator strong{
  margin-top:1px;
  color:var(--text-2);
  font-size:9.5px;
  font-weight:750
}

body.app-ui .crm-campaign-view__footer .btn-ghost{
  height:34px;
  min-width:82px;
  justify-content:center
}

@media(max-width:620px){
  body.app-ui .crm-campaign-view-dialog{
    margin:14px auto
  }

  body.app-ui .crm-campaign-view__badges{
    display:none
  }

  body.app-ui .crm-campaign-view__facts{
    grid-template-columns:1fr
  }

  body.app-ui .crm-campaign-view__fact+.crm-campaign-view__fact{
    border-top:1px solid var(--border-2);
    border-left:0
  }
}

/* Campaign create/edit builder */

.app-shell .crm-campaign-form-page{
  max-width:1520px
}

.app-shell .crm-campaign-builder{
  display:grid;
  width:min(1180px,100%);
  gap:12px;
  margin:14px auto 0
}

.app-shell .crm-campaign-builder-section{
  overflow:visible;
  margin:0;
  border-radius:13px
}

.app-shell .crm-campaign-builder-head{
  display:flex;
  min-height:58px;
  align-items:center;
  gap:9px;
  padding:11px 13px;
  border-bottom:1px solid var(--border-2);
  background:var(--surface)
}

.app-shell .crm-campaign-builder-head>span{
  display:grid;
  width:32px;
  height:32px;
  flex:0 0 32px;
  place-items:center;
  border-radius:9px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .crm-campaign-builder-head>span svg{
  width:14px;
  height:14px
}

.app-shell .crm-campaign-builder-head>div{
  min-width:0
}

.app-shell .crm-campaign-builder-head strong,.app-shell .crm-campaign-builder-head small{
  display:block
}

.app-shell .crm-campaign-builder-head strong{
  color:var(--text);
  font-size:13px;
  font-weight:810
}

.app-shell .crm-campaign-builder-head small{
  margin-top:2px;
  color:var(--text-3);
  font-size:10.5px;
  line-height:1.4
}

.app-shell .crm-campaign-builder-head>em{
  display:grid;
  width:28px;
  height:28px;
  margin-left:auto;
  place-items:center;
  border:1px solid color-mix(in srgb,var(--brand) 22%,var(--border));
  border-radius:8px;
  background:var(--brand-weak);
  color:var(--brand-strong);
  font-size:10.5px;
  font-style:normal;
  font-weight:830
}

.app-shell .crm-campaign-builder-section>.crm-panel-body{
  padding:15px 16px
}

.app-shell .crm-campaign-builder .form-group{
  margin:0
}

.app-shell .crm-campaign-builder label{
  display:block;
  margin-bottom:7px;
  color:var(--text-2);
  font-size:12px;
  font-weight:750
}

.app-shell .crm-campaign-builder .form-control{
  height:42px;
  border-radius:9px;
  background:var(--surface-2);
  font-size:13px
}

.app-shell .crm-campaign-builder .form-control:focus{
  background:var(--surface)
}

.app-shell .crm-campaign-details-grid{
  display:grid;
  grid-template-columns:minmax(0,2fr) minmax(230px,.8fr);
  gap:12px
}

.app-shell .crm-campaign-audience-source{
  display:grid;
  grid-template-columns:minmax(240px,.7fr) minmax(0,1.3fr);
  align-items:end;
  gap:12px
}

.app-shell .crm-campaign-audience-help{
  display:flex;
  min-height:42px;
  align-items:center;
  gap:9px;
  padding:8px 11px;
  border:1px solid var(--border-2);
  border-radius:9px;
  background:var(--surface-2)
}

.app-shell .crm-campaign-audience-help>span{
  display:grid;
  width:25px;
  height:25px;
  flex:0 0 25px;
  place-items:center;
  border-radius:7px;
  background:var(--surface);
  color:var(--brand-strong)
}

.app-shell .crm-campaign-audience-help>span svg{
  width:12px;
  height:12px
}

.app-shell .crm-campaign-audience-help strong,.app-shell .crm-campaign-audience-help small{
  display:block
}

.app-shell .crm-campaign-audience-help strong{
  color:var(--text-2);
  font-size:11.5px;
  font-weight:770
}

.app-shell .crm-campaign-audience-help small{
  margin-top:2px;
  color:var(--text-3);
  font-size:10px;
  line-height:1.35
}

.app-shell .crm-campaign-audience-fields{
  margin-top:11px
}

.app-shell .crm-campaign-audience-fields>.form-group,.app-shell .crm-campaign-rule-grid{
  padding:11px;
  border:1px solid var(--border-2);
  border-radius:10px;
  background:var(--surface-2)
}

.app-shell .crm-campaign-field-label{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:6px
}

.app-shell .crm-campaign-field-label label{
  margin:0
}

.app-shell .crm-campaign-builder .crm-select-tools{
  display:flex;
  gap:5px;
  margin:0
}

.app-shell .crm-campaign-builder .crm-select-tools .btn-sm{
  height:28px;
  padding:0 9px;
  border-radius:7px;
  font-size:10.5px
}

.app-shell .crm-campaign-builder .select2-container--default .select2-selection--single{
  height:42px;
  font-size:13px
}

.app-shell .crm-campaign-builder .select2-container--default .select2-selection--single .select2-selection__rendered{
  height:40px;
  padding-top:0;
  padding-bottom:0;
  font-size:13px;
  line-height:40px
}

.app-shell .crm-campaign-builder .select2-container--default .select2-selection--multiple{
  min-height:42px;
  background:var(--surface);
  font-size:12.5px
}

.app-shell .crm-campaign-builder .compact-multi-select+.select2-container .select2-selection--multiple{
  min-height:42px
}

.app-shell .crm-campaign-rule-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(240px,.65fr);
  gap:12px
}

.app-shell .crm-campaign-builder [hidden]{
  display:none!important
}

.app-shell .crm-campaign-editor-field{
  margin-top:11px
}

.app-shell .crm-campaign-builder .tox-tinymce{
  overflow:hidden;
  border:1px solid var(--border)!important;
  border-radius:10px!important;
  box-shadow:none!important
}

.app-shell .crm-campaign-builder .tox .tox-menubar{
  padding:2px 6px;
  background:var(--surface)
}

.app-shell .crm-campaign-builder .tox .tox-toolbar-overlord,.app-shell .crm-campaign-builder .tox .tox-toolbar__primary{
  background:var(--surface-2)
}

.app-shell .crm-campaign-sms-input{
  min-height:150px!important;
  padding:11px 12px!important;
  font-size:13px!important;
  line-height:1.6;
  resize:vertical
}

.app-shell .crm-campaign-tags{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:11px;
  padding:9px 10px;
  border:1px solid var(--border-2);
  border-radius:9px;
  background:var(--surface-2)
}

.app-shell .crm-campaign-tags>div:first-child{
  display:flex;
  min-width:0;
  align-items:center;
  gap:8px
}

.app-shell .crm-campaign-tags>div:first-child>span{
  display:grid;
  width:27px;
  height:27px;
  flex:0 0 27px;
  place-items:center;
  border-radius:7px;
  background:var(--surface);
  color:var(--brand-strong)
}

.app-shell .crm-campaign-tags>div:first-child>span svg{
  width:12px;
  height:12px
}

.app-shell .crm-campaign-tags strong,.app-shell .crm-campaign-tags small{
  display:block
}

.app-shell .crm-campaign-tags strong{
  color:var(--text-2);
  font-size:11px;
  font-weight:780
}

.app-shell .crm-campaign-tags small{
  margin-top:2px;
  color:var(--text-3);
  font-size:10px;
  line-height:1.35
}

.app-shell .crm-campaign-tag-list{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:5px
}

.app-shell .crm-campaign-tag{
  display:inline-flex;
  min-height:30px;
  align-items:center;
  padding:5px 8px;
  border:1px solid color-mix(in srgb,var(--brand) 20%,var(--border));
  border-radius:7px;
  background:var(--surface);
  color:var(--brand-strong);
  font:inherit;
  font-size:10.5px;
  font-weight:720;
  cursor:pointer
}

.app-shell .crm-campaign-tag:hover{
  border-color:var(--brand);
  background:var(--brand-weak)
}

.app-shell .crm-campaign-form-actions{
  margin-top:12px;
  padding-top:12px
}

.app-shell .crm-campaign-form-actions .btn-primary,.app-shell .crm-campaign-form-actions .btn-ghost{
  height:42px;
  min-width:120px;
  border-radius:9px;
  font-size:12.5px
}

.app-shell .crm-campaign-form-actions .ladda-label{
  display:inline-flex;
  align-items:center;
  gap:6px
}

@media(max-width:820px){
  .app-shell .crm-campaign-details-grid,.app-shell .crm-campaign-audience-source,.app-shell .crm-campaign-rule-grid{
    grid-template-columns:1fr
  }

  .app-shell .crm-campaign-tags{
    align-items:flex-start;
    flex-direction:column
  }

  .app-shell .crm-campaign-tag-list{
    justify-content:flex-start
  }
}

@media(max-width:520px){
  .app-shell .crm-campaign-builder-head small,.app-shell .crm-campaign-audience-help{
    display:none
  }

  .app-shell .crm-campaign-field-label{
    align-items:flex-start;
    flex-direction:column
  }

  .app-shell .crm-campaign-form-actions{
    align-items:stretch;
    flex-direction:column
  }

  .app-shell .crm-campaign-form-actions small{
    margin:0 0 2px
  }

  .app-shell .crm-campaign-form-actions .btn-primary,.app-shell .crm-campaign-form-actions .btn-ghost{
    width:100%
  }
}

/*
 * The listing is the ordinary card every other screen uses.
 *
 * It was drawn borderless inside the tab card, two boxes deep in a pane, with the table in a
 * wrapper of its own that carried the sideways scrolling — and at that depth neither the heading
 * nor the search bar could pin. The tabs stand above the card now and choose which one is on show.
 */

.app-shell .crm-followups-tabs{
  margin:0 0 14px;
  padding:0;
  border-bottom:0
}

.app-shell .crm-tab-content{
  padding:0
}

.app-shell .crm-followups-list-card>.table-toolbar{
  gap:10px;
  padding:10px 12px;
  border-bottom:1px solid var(--border-2);
  background:var(--surface)
}

.app-shell .crm-followups-list-card>.table-toolbar .table-toolbar-search{
  width:min(100%,330px)
}

.app-shell .crm-followups-list-card>.table-toolbar .table-toolbar-search>svg{
  left:10px;
  width:13px;
  height:13px
}

.app-shell .crm-followups-list-card>.table-toolbar .table-toolbar-search .finput{
  height:34px;
  padding-left:31px;
  border-radius:8px;
  font-size:11.5px
}

.app-shell .crm-followups-list-card>.table-toolbar .table-toolbar-actions{
  gap:8px
}

.app-shell .crm-followups-list-card>.table-toolbar .table-export-holder,.app-shell .crm-followups-list-card>.table-toolbar .table-export-holder .dt-buttons{
  gap:5px
}

.app-shell .crm-followups-list-card>.table-toolbar .table-export-holder .dt-button,.app-shell .crm-followups-list-card>.table-toolbar .table-export-holder .btn,.app-shell .crm-followups-list-card>.table-toolbar .table-export-holder .table-export-button,.app-shell .crm-followups-list-card>.table-toolbar .table-export-holder>a,.app-shell .crm-followups-list-card>.table-toolbar .table-export-holder>button,.app-shell .crm-followups-list-card>.table-toolbar .table-export-holder .dt-buttons>a,.app-shell .crm-followups-list-card>.table-toolbar .table-export-holder .dt-buttons>button{
  padding:0 10px;
  border-radius:8px!important;
  font-size:11px!important;
  gap:5px
}

.app-shell .crm-followups-list-card>.table-toolbar .table-export-holder svg{
  width:13px;
  height:13px
}

.app-shell .crm-followups-list-card>.table-toolbar .table-page-size .finput{
  width:68px;
  padding-left:10px;
  padding-right:24px;
  border-radius:8px;
  font-size:11px
}

/* DataTables holds the sideways scrolling; the card must not, or it becomes the box the heading
   pins to and the heading stops holding at the top of the page. */

.app-shell .crm-followups-list-card>.data-table-content{
  padding:0
}

/* The width each table overflows past, which is what there is to scroll. */

.app-shell #follow_up_table{
  width:100%!important;
  min-width:1140px!important;
  margin:0!important
}

.app-shell .crm-followups-list-card .dataTables_scrollHeadInner,.app-shell .crm-followups-list-card .dataTables_scrollHeadInner table{
  width:100%!important
}

.app-shell #recursive_follow_up_table{
  min-width:1120px!important;
  margin:0!important
}

.app-shell .crm-followups-list-card table.dataTable thead th{
  padding:11px 13px;
  background:var(--surface-2)
}

.app-shell .crm-followups-list-card .data-table-footer{
  display:flex;
  min-height:52px;
  align-items:center;
  justify-content:space-between;
  padding:8px 11px;
  border-top:1px solid var(--border-2);
  background:var(--surface)
}

.app-shell .crm-followups-list-card .dataTables_info,.app-shell .crm-followups-list-card .dataTables_paginate{
  float:none;
  padding:0!important
}

.app-shell .crm-followups-list-card td.dataTables_empty{
  height:180px!important;
  color:var(--text-3)!important;
  text-align:center!important
}

.app-shell .crm-followups-list-card .footer-total td{
  background:var(--surface-2)!important;
  color:var(--text-2);
  font-size:10.5px!important
}

.app-shell .crm-followups-list-card table.dataTable tbody td{
  padding-top:12px;
  padding-bottom:12px;
  vertical-align:top
}

.app-shell .crm-followups-list-card table.dataTable tbody tr:hover td{
  background:color-mix(in srgb,var(--brand-weak) 25%,var(--surface))
}

.app-shell #follow_up_table th:nth-child(1),.app-shell #follow_up_table td:nth-child(1){
  width:82px!important;
  min-width:82px
}

.app-shell #follow_up_table th:nth-child(5),.app-shell #follow_up_table td:nth-child(5),.app-shell #recursive_follow_up_table th:nth-child(4),.app-shell #recursive_follow_up_table td:nth-child(4){
  width:180px!important;
  min-width:180px
}

.app-shell #recursive_follow_up_table th:nth-child(5),.app-shell #recursive_follow_up_table td:nth-child(5){
  width:190px!important;
  min-width:190px
}

.app-shell .followup-row-actions{
  display:flex;
  min-width:72px;
  align-items:center;
  gap:6px;
  padding-top:1px;
  white-space:nowrap
}

.app-shell .followup-row-actions .act{
  display:inline-grid;
  width:32px;
  min-width:32px;
  height:32px;
  min-height:32px;
  padding:0;
  place-items:center
}

.app-shell .followup-row-actions .act svg{
  display:block;
  width:15px;
  height:15px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round
}

.app-shell .followup-row-actions .dropdown-toggle::after,.app-shell .followup-row-actions .dropdown-toggle .caret{
  display:none
}

.app-shell .followup-row-actions .followup-edit-action{
  border-color:color-mix(in srgb,var(--brand) 30%,var(--border));
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .followup-row-actions .followup-edit-action:hover{
  border-color:var(--brand);
  box-shadow:0 0 0 3px rgba(21,154,77,.1)
}

.app-shell .followup-row-actions .table-action-menu{
  right:auto;
  left:0;
  min-width:210px;
  padding:6px
}

.app-shell .followup-row-actions .table-action-menu>li:not(.divider)+li:not(.divider){
  margin-top:1px
}

.app-shell .followup-row-actions .table-action-menu>li>a.followup-menu-button{
  display:flex;
  min-height:36px;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border:0!important;
  border-radius:7px;
  background:transparent;
  color:var(--text-2)
}

.app-shell .followup-row-actions .followup-menu-icon{
  display:block;
  width:16px;
  height:16px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round
}

.app-shell .followup-row-actions .followup-menu-button>.followup-menu-icon{
  flex:0 0 16px;
  color:var(--text-3)
}

.app-shell .followup-row-actions .followup-menu-button>span{
  overflow:hidden;
  font-size:11.5px;
  font-weight:700;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .followup-row-actions .table-action-menu>li>a.followup-menu-button:hover{
  border:0!important;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .followup-row-actions .followup-menu-button:hover>.followup-menu-icon{
  color:var(--brand-strong)
}

.app-shell .followup-row-actions .table-action-menu>.divider{
  margin:7px 2px 6px
}

.app-shell .followup-row-actions .table-action-menu>li>a.followup-menu-button--danger{
  border:0!important;
  background:transparent;
  color:var(--danger)
}

.app-shell .followup-row-actions .followup-menu-button--danger>.followup-menu-icon{
  color:var(--danger)
}

.app-shell .followup-row-actions .table-action-menu>li>a.followup-menu-button--danger:hover{
  border:0!important;
  background:var(--danger-weak);
  color:var(--danger)
}

.app-shell .followup-contact-cell{
  display:flex;
  min-width:155px;
  align-items:flex-start;
  flex-direction:column;
  gap:6px
}

.app-shell .followup-contact-cell .crm-followup-contact{
  min-width:0
}

.app-shell .followup-contact-cell .crm-followup-contact__name{
  margin:0;
  color:var(--text);
  font-size:12px;
  font-weight:800
}

/* The contact's most recent purchase, under the detail link. Plain and quiet: it is context
   for the call, not something to act on from here. */

.app-shell .crm-followup-contact__sale{
  display:block;
  margin-top:2px;
  color:var(--text-3);
  font-size:10.5px;
  white-space:nowrap
}

/* The status trail, in its dialog. A rule down the left with a dot per change, so the sequence
   reads as one thing that happened over time rather than a stack of separate cards. */

.app-shell .repair-status-history-open{
  display:block;
  width:-moz-fit-content;
  width:fit-content;
  margin:3px 0 0;
  padding:0;
  border:0;
  background:none;
  color:var(--blue);
  font-size:10.5px;
  font-weight:700;
  cursor:pointer
}

.app-shell .repair-status-history-open:hover{
  text-decoration:underline
}

.app-shell .repair-status-history-open[disabled]{
  opacity:.5;
  cursor:default
}

.app-shell .repair-timeline-subject{
  margin-left:6px;
  color:var(--text-3);
  font-size:12px;
  font-weight:600
}

.app-shell .repair-timeline-empty{
  margin:0;
  color:var(--text-3);
  font-size:13px
}

.app-shell .repair-timeline{
  position:relative;
  margin:0;
  padding:0 0 0 22px;
  list-style:none
}

.app-shell .repair-timeline::before{
  content:"";
  position:absolute;
  top:6px;
  bottom:6px;
  left:5px;
  width:2px;
  background:var(--border)
}

.app-shell .repair-timeline__item{
  position:relative;
  padding:0 0 16px
}

.app-shell .repair-timeline__item:last-child{
  padding-bottom:0
}

/* The dot carries the status's own colour, so the trail is scannable without reading it. */

.app-shell .repair-timeline__item::before{
  content:"";
  position:absolute;
  top:5px;
  left:-21px;
  width:10px;
  height:10px;
  border:2px solid var(--surface,#fff);
  border-radius:999px;
  background:var(--dot-color,#64748b)
}

.app-shell .repair-timeline__head{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:7px
}

.app-shell .repair-timeline__from{
  color:var(--text-3);
  font-size:11.5px
}

.app-shell .repair-timeline__meta{
  display:flex;
  flex-wrap:wrap;
  gap:4px 10px;
  margin-top:3px;
  color:var(--text-3);
  font-size:11px
}

.app-shell .repair-timeline__meta time{
  font-variant-numeric:tabular-nums
}

.app-shell .repair-timeline__note{
  margin:5px 0 0;
  padding:7px 9px;
  border-radius:6px;
  background:var(--surface-2,rgba(15,23,42,.04));
  color:var(--text-2);
  font-size:12px;
  line-height:1.5;
  white-space:pre-line
}

/* The status picker: chips that say what can be chosen, and what cannot.
   A dropdown showed a shut door as an open one, and the difference only surfaced as a red toast. */

.app-shell .repair-status-choices{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:4px
}

.app-shell .repair-status-choice{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin:0;
  padding:7px 13px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--surface,#fff);
  cursor:pointer;
  font-size:12.5px;
  font-weight:650;
  transition:border-color .12s,background .12s
}

.app-shell .repair-status-choice input{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none
}

/* The status's own colour, so the chip matches the one in the listing it was opened from. */

.app-shell .repair-status-choice::before{
  content:"";
  width:9px;
  height:9px;
  flex:0 0 auto;
  border-radius:999px;
  background:var(--chip-color)
}

.app-shell .repair-status-choice:hover:not(.is-disabled){
  border-color:var(--chip-color)
}

/* Chosen, and unmistakably so: a heavier border in the status's own colour, a real tint, bold
   text and a tick. A 12% wash and a border tint read as nothing next to the browser's own
   focus ring, so the ring was doing the talking and it says "focused", not "chosen". */

/* Chosen means filled, not washed. A 20% tint of a pale status - grey, orange - was invisible
   next to the unchosen chips beside it. The ink is computed per status against the WCAG
   contrast formula, because a business picks its own colours and white is a coin toss on
   them: it fails on this installation's cyan and orange, and passes on its red and green. */

.app-shell .repair-status-choice:has(input:checked){
  border-color:var(--chip-color);
  background:var(--chip-color);
  color:var(--chip-ink);
  font-weight:800
}

.app-shell .repair-status-choice:has(input:checked)::before{
  background:currentColor;
  opacity:.55
}

.app-shell .repair-status-choice__tick{
  display:none;
  flex:0 0 auto;
  color:currentColor
}

.app-shell .repair-status-choice:has(input:checked) .repair-status-choice__tick{
  display:block
}

.app-shell .repair-status-choice:has(input:focus-visible){
  outline:2px solid var(--chip-color);
  outline-offset:2px
}

/* Still listed, still readable: knowing a door is shut beats it not being there. */

/* A blocked chip drops the status colour entirely and goes grey. Dimming alone was not
   enough: a pale status - Cancelled, Delayed - read as blocked while it was pickable, and
   the only real difference was a dashed border nobody notices. */

.app-shell .repair-status-choice.is-disabled{
  border-style:dashed;
  border-color:var(--border);
  background:transparent;
  color:var(--text-3);
  font-weight:600;
  cursor:not-allowed
}

.app-shell .repair-status-choice.is-disabled::before{
  background:var(--text-3);
  opacity:.4
}

/* ...and a pickable one is unmistakably solid. */

.app-shell .repair-status-choice:not(.is-disabled){
  border-color:color-mix(in srgb,var(--chip-color) 45%,var(--border));
  color:var(--text)
}

/* Where it is now: stated once, above the choices, and not selectable. */

/* The record a message was about, beside the template that carried it. Italic and quiet: it
   identifies the row, it is not the row's headline. */

.app-shell .tg-hist__subject{
  margin-left:5px;
  color:var(--text-3);
  font-size:11px;
  font-style:normal;
  font-weight:700
}

.app-shell .tg-hist__scope{
  display:block;
  margin:-2px 0 6px;
  color:var(--text-3);
  font-size:10.5px
}

.app-shell .repair-status-now{
  display:flex;
  align-items:center;
  gap:6px;
  margin:2px 0 9px;
  color:var(--text-3);
  font-size:11.5px
}

.app-shell .repair-status-now strong{
  color:var(--text);
  font-size:12.5px;
  font-weight:750
}

.app-shell .repair-status-now__dot{
  width:9px;
  height:9px;
  flex:0 0 auto;
  border-radius:999px;
  background:var(--chip-color)
}

.app-shell .followup-contact-phone{
  display:inline-flex;
  align-items:center;
  gap:5px;
  color:var(--text-3);
  font-size:10.5px;
  font-variant-numeric:tabular-nums
}

.app-shell .followup-contact-phone i{
  color:var(--brand)
}

/* Opened above, what happens next below.
   These were two grid columns with an arrow between them, so each date had half the cell and both
   wrapped mid-date. They are two facts about one follow up, read top to bottom — stacked they get
   the full width and each stays on its own line. */

.app-shell .followup-schedule-cell{
  display:flex;
  min-width:150px;
  flex-direction:column;
  gap:7px;
  color:var(--text-2);
  font-size:10.5px;
  line-height:1.45
}

.app-shell .followup-schedule-cell>div{
  min-width:0
}

.app-shell .followup-schedule-cell>div+div{
  padding-top:7px;
  border-top:1px dashed var(--border-2)
}

.app-shell .followup-schedule-cell small{
  display:block;
  margin-bottom:3px;
  color:var(--text-3);
  font-size:8.5px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase
}

.app-shell .followup-schedule-cell i{
  display:block;
  margin-top:2px;
  color:var(--text-3);
  font-size:9.5px
}

/* Kept for any cell still rendering the arrow; it has no place in a stacked layout. */

.app-shell .followup-schedule-arrow{
  display:none
}

.app-shell .followup-state-cell{
  display:flex;
  min-width:96px;
  align-items:flex-start;
  flex-direction:column;
  gap:6px
}

.app-shell .followup-state-cell .label,.app-shell .followup-state-cell>span:first-child{
  margin:0
}

.app-shell .followup-type-label{
  display:inline-flex;
  padding:3px 7px;
  border-radius:7px;
  background:var(--surface-3);
  color:var(--text-2);
  font-size:9.5px;
  font-weight:750;
  text-transform:capitalize
}

.app-shell .followup-category-chip{
  display:inline-flex;
  width:auto;
  max-width:170px;
  align-items:center;
  gap:7px;
  padding:4px 8px;
  border:0;
  border-radius:999px;
  background:var(--surface-3);
  color:var(--text-2);
  font-size:10.5px;
  font-weight:680;
  line-height:1.2;
  white-space:nowrap
}

.app-shell .followup-category-chip>span[aria-hidden]{
  width:6px;
  height:6px;
  flex:0 0 6px;
  border-radius:50%;
  background:var(--brand)
}

.app-shell .followup-category-chip__label{
  display:block;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .followup-category-empty{
  color:var(--text-3)
}

/* The cell folds open. Closed it is a row — one person and the count; open it is a column of
   everybody assigned, and the table row grows to hold them. */

.app-shell .followup-assignees{
  display:flex;
  width:180px;
  align-items:center;
  gap:7px
}

.app-shell .followup-assignees.is-open{
  flex-direction:column;
  align-items:flex-start;
  gap:6px
}

.app-shell .followup-assignees.is-open .followup-assignee{
  width:100%
}

.app-shell .followup-assignee{
  display:grid;
  min-width:0;
  grid-template-columns:26px minmax(0,1fr);
  align-items:center;
  gap:7px
}

.app-shell .followup-assignee__avatar{
  width:26px!important;
  height:26px!important;
  min-width:26px!important;
  border:2px solid var(--surface);
  border-radius:8px!important;
  -o-object-fit:cover;
     object-fit:cover;
  box-shadow:0 0 0 1px var(--border-2)
}

.app-shell .followup-assignee__name{
  overflow:hidden;
  color:var(--text-2);
  font-size:10.5px;
  font-weight:650;
  line-height:1.3;
  text-overflow:ellipsis;
  white-space:nowrap
}

/* The count was a span, which is to say it looked like a label and answered nothing. It is the
   control that opens the cell, so it is a button and says so. */

.app-shell .followup-assignees-more{
  display:grid;
  min-width:24px;
  height:24px;
  flex:0 0 auto;
  place-items:center;
  padding:0 6px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--surface);
  color:var(--text-3);
  font:inherit;
  font-size:9px;
  font-weight:800;
  line-height:1;
  cursor:pointer;
  transition:border-color .12s ease,background .12s ease,color .12s ease
}

.app-shell .followup-assignees-more:hover,.app-shell .followup-assignees-more:focus-visible{
  border-color:color-mix(in srgb,var(--brand) 40%,var(--border));
  background:var(--brand-weak);
  color:var(--brand-ink);
  outline:none
}

.app-shell .followup-assignees.is-open .followup-assignees-more{
  align-self:flex-start;
  height:22px;
  font-size:9.5px
}

.app-shell .followup-assignees-empty{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 8px;
  border:1px dashed var(--border);
  border-radius:8px;
  color:var(--text-3);
  font-size:10px;
  font-weight:650
}

.app-shell .crm-followups-list-card .followup-log-list{
  min-width:170px;
  gap:5px
}

/* The bar down the left says what the contact is: still owed, made, or dropped. Every card was
   green before, whatever had happened to it. */

.app-shell .crm-followups-list-card .followup-log-card{
  padding:7px 9px;
  border:1px solid var(--border-2);
  border-left:3px solid var(--border);
  border-radius:8px;
  background:var(--surface-2);
  box-shadow:none
}

.app-shell .crm-followups-list-card .followup-log-card.is-planned{
  border-left-color:var(--warn)
}

.app-shell .crm-followups-list-card .followup-log-card.is-completed{
  border-left-color:var(--brand)
}

.app-shell .crm-followups-list-card .followup-log-card.is-cancelled{
  border-left-color:var(--border);
  opacity:.7
}

.app-shell .crm-followups-list-card .followup-log-card:hover{
  background:var(--brand-weak);
  box-shadow:none;
  transform:none
}

.app-shell .crm-followups-list-card .followup-log-card__title{
  color:var(--text);
  font-size:10.5px;
  font-weight:780
}

.app-shell .crm-followups-list-card .followup-log-card__date{
  display:flex;
  align-items:center;
  gap:4px;
  color:var(--text-3);
  font-size:9px
}

.app-shell .crm-followups-list-card .followup-log-card__date svg{
  width:11px;
  height:11px;
  flex:none
}

/* The state, at the end of the date line rather than on a line of its own. */

.app-shell .crm-followups-list-card .followup-log-card__date>b{
  margin-left:auto;
  font-size:8.5px;
  font-weight:800;
  letter-spacing:.02em;
  text-transform:lowercase
}

.app-shell .crm-followups-list-card .followup-log-card.is-planned .followup-log-card__date>b{
  color:#a35a09
}

.app-shell .crm-followups-list-card .followup-log-card.is-completed .followup-log-card__date>b{
  color:var(--brand-strong)
}

/* What is owed and what was done, before the detail. The question this column is usually asked is
   "is anything outstanding", not "what was the second log". */

.app-shell .crm-followups-list-card .followup-log-summary{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  font-size:9px;
  font-weight:800;
  letter-spacing:.02em
}

.app-shell .crm-followups-list-card .followup-log-summary>em{
  font-style:normal
}

.app-shell .crm-followups-list-card .followup-log-summary>.is-planned{
  color:#a35a09
}

.app-shell .crm-followups-list-card .followup-log-summary>.is-done{
  color:var(--text-3)
}

/* Add is on all 25 rows at once, so it stays quiet until wanted: a plain green line rather than a
   dashed box. Twenty-five dashed boxes read as twenty-five things asking to be done. */

.app-shell .crm-followups-list-card .followup-log-add,.app-shell .crm-followups-list-card .followup-log-more{
  display:inline-flex;
  min-height:0;
  align-items:center;
  justify-content:flex-start;
  gap:5px;
  margin:1px 0 0;
  padding:2px 0;
  border:0;
  border-radius:0;
  background:none;
  color:var(--brand-strong);
  font-size:9.5px;
  font-weight:750;
  text-decoration:none;
  cursor:pointer
}

.app-shell .crm-followups-list-card .followup-log-add:hover,.app-shell .crm-followups-list-card .followup-log-more:hover{
  background:none;
  color:var(--brand-strong);
  text-decoration:underline;
  text-underline-offset:2px
}

.app-shell .crm-followups-list-card .followup-log-add svg,.app-shell .crm-followups-list-card .followup-log-more svg{
  width:11px;
  height:11px;
  flex:none
}

/* Nothing recorded is not a state worth a filled box on every empty row. */

.app-shell .crm-followups-list-card .followup-log-empty{
  padding:0;
  background:none;
  color:var(--text-3);
  font-size:9.5px;
  font-style:normal
}

.app-shell .followup-log-more span{
  padding:1px 5px;
  border-radius:999px;
  background:var(--brand-weak);
  font-size:8.5px
}

.app-shell .followup-notes-cell{
  min-width:170px;
  color:var(--text-2);
  font-size:10.5px;
  line-height:1.5
}

.app-shell .followup-notes-cell .clamp-text{
  -webkit-line-clamp:2
}

.app-shell .followup-additional-note{
  margin-top:6px;
  padding-top:6px;
  border-top:1px dashed var(--border);
  color:var(--text-3)
}

/* The follow up, its state and its category in one cell.
   Status and category each had a column of their own for one short value, and the category still
   truncated inside it because the width went to the column rather than to the text. Given the
   room the two columns used to take, both now fit whole. */

.app-shell .followup-record-cell{
  display:flex;
  min-width:230px;
  max-width:330px;
  align-items:flex-start;
  flex-direction:column;
  gap:4px
}

.app-shell .followup-record-cell strong{
  display:block;
  width:100%;
  overflow:hidden;
  color:var(--text);
  font-size:10.8px;
  font-weight:780;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .followup-record-cell span{
  display:block;
  overflow:hidden;
  max-width:100%;
  color:var(--text-2);
  font-size:10px;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .crm-followups-list-card .followup-record-cell small{
  color:var(--text-3);
  font-size:9px
}

/* Send Telegram, inside the Follow up cell. It is the one thing on the row that acts on the
   customer rather than describing the record, so it draws as a button and not as another line of
   the cell's list — and it sits under the facts, where the eye lands last.
   Telegram's own blue, not brand green: the row already carries two green actions (Plan day,
   Close follow up), and a third green among them reads as one more step of the same job rather
   than the one control that sends a message out to the customer. The colour names the channel, so
   the button is recognised before the label is read. */

.app-shell .followup-send-telegram{
  display:inline-flex;
  width:auto;
  align-items:center;
  gap:6px;
  margin-top:6px;
  padding:5px 12px;
  border:1px solid var(--telegram);
  border-radius:999px;
  background:var(--telegram);
  color:#fff;
  font-size:10px;
  font-weight:780;
  white-space:nowrap;
  transition:background .12s ease,border-color .12s ease
}

.app-shell .followup-send-telegram svg{
  width:13px;
  height:13px;
  stroke-width:2.2
}

.app-shell .followup-send-telegram:hover{
  border-color:var(--telegram-strong);
  background:var(--telegram-strong);
  color:#fff
}

.app-shell .followup-auto-message-link{
  display:inline-flex;
  width:-moz-max-content;
  width:max-content;
  align-items:center;
  gap:5px;
  margin-top:3px;
  padding:4px 9px;
  border:1px solid color-mix(in srgb,var(--brand) 58%,transparent);
  border-radius:999px;
  background:transparent;
  color:var(--brand-strong);
  font-size:10px;
  font-weight:750;
  line-height:1.2;
  text-decoration:none;
  white-space:nowrap;
  transition:border-color .14s ease,color .14s ease,background .14s ease
}

.app-shell .followup-auto-message-link svg{
  width:13px;
  height:13px;
  stroke-width:2.1
}

.app-shell .followup-auto-message-link:hover{
  border-color:var(--brand);
  background:var(--brand-weak);
  color:var(--brand-strong);
  text-decoration:none
}

.app-shell .followup-auto-message-link.is-not-configured{
  border-color:color-mix(in srgb,var(--warn) 62%,transparent);
  color:var(--warn)
}

.app-shell .followup-auto-message-link.is-not-configured:hover{
  border-color:var(--warn);
  background:var(--warn-weak);
  color:var(--warn)
}

.app-shell .followup-timeline-plan{
  display:inline-flex;
  width:-moz-max-content;
  width:max-content;
  align-items:center;
  gap:4px;
  margin-top:4px;
  padding:3px 8px;
  border:1px solid color-mix(in srgb,var(--brand) 45%,transparent);
  border-radius:999px;
  background:transparent;
  color:var(--brand-strong);
  font-size:9.5px;
  font-weight:750;
  line-height:1.2;
  text-decoration:none;
  white-space:nowrap
}

.app-shell .followup-timeline-plan:hover{
  border-color:var(--brand);
  background:var(--brand-weak);
  color:var(--brand-strong);
  text-decoration:none
}

.app-shell .followup-timeline-latest{
  display:grid;
  grid-template-columns:auto auto;
  -moz-column-gap:5px;
       column-gap:5px;
  row-gap:1px;
  margin-bottom:5px;
  padding:4px 6px;
  border-left:3px solid var(--brand);
  border-radius:4px;
  background:var(--brand-weak)
}

.app-shell .followup-timeline-latest small{
  grid-column:1/-1;
  color:var(--text-3);
  font-size:8px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase
}

.app-shell .followup-timeline-latest strong{
  color:var(--brand-strong);
  font-size:9.5px;
  font-weight:800
}

.app-shell .followup-timeline-latest time{
  color:var(--text-3);
  font-size:8.5px;
  white-space:nowrap
}

.app-shell .followup-timeline-latest span{
  grid-column:1/-1;
  max-width:190px;
  overflow:hidden;
  color:var(--text-2);
  font-size:9px;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .followup-timeline-upcoming{
  color:var(--text-2)
}

/* A category with no template linked yet draws the SAME full-strength button. It is not disabled
   and must not look it: clicking it opens a modal that names the category and links to the screen
   that fixes it, which is real work and the only way anyone finds out the link is missing.
   Every quieter treatment tried here — grey, amber, a dashed outline, a fade — read as "this
   button does nothing", which is the one thing it does not mean. The class stays as a hook for
   the markup and the tests; it carries no styling of its own. */

/* The follow up's facts under its title, each one named.
   A chip, a name and a date stacked loose left the reader working out which was which. Labels in
   a narrow first column and values in the second: it reads down as a list, and the labels line up
   so the values do too. */

.app-shell .followup-record-facts{
  display:grid;
  width:100%;
  grid-template-columns:auto minmax(0,1fr);
  align-items:baseline;
  gap:3px 10px;
  margin:1px 0 0
}

.app-shell .followup-record-facts>dt{
  color:var(--text-3);
  font-size:9px;
  font-weight:750;
  letter-spacing:.02em;
  text-transform:lowercase;
  white-space:nowrap
}

.app-shell .followup-record-facts>dd{
  min-width:0;
  margin:0;
  color:var(--text-2);
  font-size:10px;
  line-height:1.45;
  overflow-wrap:anywhere
}

/*
 * The status as coloured words, not a badge.
 *
 * A pill here sat among four plain values and drew more weight than the title above it — on a
 * list of 25 rows the eye went to a column of lozenges rather than to the customers. The colour
 * is the whole signal, so it is kept and the box around it dropped. Still a link: it is the one
 * value in this cell that is also a button, and it keeps the pointer and the underline on hover
 * that says so.
 */

.app-shell .followup-record-facts>dd>a,.app-shell .followup-record-facts>dd>.status-chip{
  vertical-align:baseline
}

.app-shell .followup-record-facts .status-chip{
  padding:0;
  border:0;
  border-radius:0;
  background:none;
  color:color-mix(in srgb,var(--chip-color,var(--brand)) 88%,var(--text));
  font-size:10px;
  font-weight:800
}

.app-shell .followup-record-facts>dd>a:hover .status-chip{
  text-decoration:underline;
  text-underline-offset:2px
}

.app-shell .followup-rule-cell{
  display:flex;
  min-width:140px;
  align-items:flex-start;
  flex-direction:column;
  gap:4px
}

.app-shell .followup-rule-cell strong{
  color:var(--text);
  font-size:11px;
  font-weight:780
}

.app-shell .followup-rule-cell span{
  display:inline-flex;
  padding:3px 7px;
  border-radius:7px;
  background:var(--brand-weak);
  color:var(--brand-strong);
  font-size:9.5px;
  font-weight:750
}

@media(max-width:760px){
  .app-shell .crm-followups-list-card .data-table-footer{
    align-items:flex-start;
    flex-direction:column;
    gap:8px
  }
}

@media (max-width:900px){
  .app-shell .crm-form-grid,.app-shell .crm-form-grid.is-four,.app-shell .crm-form-grid.is-name-type,.app-shell .crm-form-grid.is-recipients{
    grid-template-columns:1fr
  }
}

/* CRM follow-up create/edit dialog */

.app-shell .crm-followup-dialog{
  width:min(920px,calc(100vw - 28px));
  margin:22px auto
}

.app-shell .crm-followup-modal{
  overflow:hidden;
  border:0;
  border-radius:16px;
  background:var(--surface);
  box-shadow:0 28px 80px -32px rgba(13,28,19,.58)
}

.app-shell .crm-followup-modal>form{
  display:block;
  max-height:none
}

.app-shell .crm-followup-modal__header{
  display:flex;
  min-height:70px;
  align-items:center;
  gap:12px;
  padding:13px 17px;
  border-bottom:1px solid var(--border-2);
  background:var(--surface)
}

.app-shell .crm-followup-modal__heading{
  display:flex;
  min-width:0;
  align-items:center;
  gap:11px
}

.app-shell .crm-followup-modal__icon,.app-shell .crm-followup-form-section__head>span,.app-shell .crm-followup-reminder-icon{
  display:grid;
  place-items:center;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .crm-followup-modal__icon{
  width:40px;
  height:40px;
  flex:0 0 40px;
  border-radius:11px
}

.app-shell .crm-followup-modal__icon svg{
  width:19px;
  height:19px
}

.app-shell .crm-followup-modal__header svg,.app-shell .crm-followup-form-section__head svg,.app-shell .crm-followup-reminder-section svg,.app-shell .crm-followup-modal__footer svg{
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round
}

.app-shell .crm-followup-modal__heading h4{
  margin:0;
  color:var(--text);
  font-size:16px;
  font-weight:820;
  line-height:1.25
}

.app-shell .crm-followup-modal__heading p{
  margin:3px 0 0;
  color:var(--text-3);
  font-size:11.5px;
  line-height:1.35
}

.app-shell .crm-followup-copy-note{
  display:inline-flex;
  min-width:0;
  align-items:center;
  gap:6px;
  margin-left:auto;
  padding:5px 8px;
  border-radius:8px;
  background:var(--surface-3);
  color:var(--text-2);
  font-size:10px;
  white-space:nowrap
}

.app-shell .crm-followup-copy-note svg{
  width:13px;
  height:13px;
  flex:none;
  color:var(--brand)
}

.app-shell .crm-followup-copy-note strong{
  max-width:180px;
  overflow:hidden;
  text-overflow:ellipsis
}

.app-shell .crm-followup-modal__close{
  display:grid;
  width:34px;
  height:34px;
  flex:0 0 34px;
  margin-left:auto;
  padding:0;
  place-items:center;
  border:0;
  border-radius:9px;
  background:var(--surface-2);
  color:var(--text-3);
  cursor:pointer
}

.app-shell .crm-followup-copy-note+.crm-followup-modal__close{
  margin-left:0
}

.app-shell .crm-followup-modal__close:hover{
  background:var(--surface-3);
  color:var(--text)
}

.app-shell .crm-followup-modal__close svg{
  width:17px;
  height:17px
}

.app-shell .crm-followup-modal__body{
  min-height:0;
  overflow:visible;
  padding:15px;
  background:var(--surface-2)
}

.app-shell .crm-followup-form-section{
  padding:14px;
  border:1px solid var(--border-2);
  border-radius:12px;
  background:var(--surface)
}

.app-shell .crm-followup-form-section+.crm-followup-form-section{
  margin-top:12px
}

.app-shell .crm-followup-form-section__head{
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:13px;
  padding-bottom:11px;
  border-bottom:1px solid var(--border-2)
}

.app-shell .crm-followup-form-section__head>span{
  width:32px;
  height:32px;
  flex:0 0 32px;
  border-radius:9px
}

.app-shell .crm-followup-form-section__head svg{
  width:16px;
  height:16px
}

.app-shell .crm-followup-form-section__head strong,.app-shell .crm-followup-form-section__head small{
  display:block
}

.app-shell .crm-followup-form-section__head strong{
  color:var(--text);
  font-size:12.5px;
  font-weight:800
}

.app-shell .crm-followup-form-section__head small{
  margin-top:2px;
  color:var(--text-3);
  font-size:10.5px
}

.app-shell .crm-followup-form-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-top:12px
}

/* The log form asks two things here, not three, and the date carries a calendar and a clock —
   so it takes the room the missing third column was leaving empty. */

.app-shell .crm-followup-form-grid.is-log-details{
  grid-template-columns:minmax(0,200px) minmax(0,1fr)
}

.app-shell .crm-followup-form-grid.is-log-details .date-time-control{
  width:100%
}

@media(max-width:640px){
  .app-shell .crm-followup-form-grid.is-log-details{
    grid-template-columns:1fr
  }
}

/* One line for the whole of a contact: what kind, when, where it stands, how it went. The date
   takes the slack because it carries two controls; the three selects are sized to their longest
   option rather than sharing equally, which would leave "Call" swimming in a quarter of the row. */

.app-shell .crm-followup-form-grid.is-log-row{
  grid-template-columns:minmax(0,.85fr) minmax(0,1.5fr) minmax(0,.95fr) minmax(0,1fr)
}

.app-shell .crm-followup-form-grid.is-log-row .date-time-control{
  width:100%
}

/* Two lines rather than four, before it collapses to one field per line. */

@media(max-width:900px){
  .app-shell .crm-followup-form-grid.is-log-row{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}

@media(max-width:560px){
  .app-shell .crm-followup-form-grid.is-log-row{
    grid-template-columns:1fr
  }
}

.app-shell .crm-followup-form-grid.is-primary{
  grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);
  margin-top:0
}

.app-shell .crm-followup-form-grid.is-single{
  grid-template-columns:minmax(0,1fr)
}

.app-shell .crm-followup-form-grid.is-pair{
  grid-template-columns:repeat(2,minmax(0,1fr))
}

.app-shell .crm-followup-form-grid.is-single:first-of-type{
  margin-top:0
}

.app-shell .crm-followup-form-grid .form-group,.app-shell .crm-followup-notification-grid .form-group{
  min-width:0;
  margin:0
}

.app-shell .crm-followup-modal .form-group>label,.app-shell .crm-followup-editor-field>label{
  display:block;
  margin:0 0 5px;
  color:var(--text-2);
  font-size:10.5px;
  font-weight:750
}

.app-shell .crm-followup-modal .form-control,.app-shell .crm-followup-modal .select2-container .select2-selection{
  height:38px;
  border-color:var(--border);
  border-radius:9px;
  background:var(--surface-2);
  font-size:11.5px;
  box-shadow:none
}

.app-shell .crm-followup-modal .form-control:focus,.app-shell .crm-followup-modal .select2-container--focus .select2-selection{
  border-color:var(--brand);
  background:var(--surface);
  box-shadow:0 0 0 3px rgba(21,154,77,.1)
}

.app-shell .crm-followup-modal .select2-container .select2-selection--single .select2-selection__rendered{
  padding-left:11px;
  line-height:36px
}

.app-shell .crm-followup-modal .select2-container .select2-selection--single .select2-selection__arrow{
  height:36px
}

.app-shell .crm-followup-modal .select2-container .select2-selection--multiple{
  min-height:38px;
  height:auto;
  padding:2px 5px
}

.app-shell .crm-followup-modal .select2-container--open{
  z-index:1065
}

.app-shell .crm-followup-modal .select-field{
  width:100%;
  min-width:0
}

.app-shell .crm-followup-modal .select-field-native .form-control{
  -moz-appearance:none;
       appearance:none;
  -webkit-appearance:none;
  padding-right:31px;
  background-image:linear-gradient(45deg,transparent 50%,var(--text-3) 50%),linear-gradient(135deg,var(--text-3) 50%,transparent 50%);
  background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%;
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
  cursor:pointer
}

.app-shell .crm-followup-modal .select-field-compact-multiple .select2-selection--multiple{
  height:38px;
  min-height:38px
}

.app-shell .crm-followup-modal .select-field-compact-multiple .select2-selection--multiple:after{
  right:12px
}

.app-shell .crm-followup-date-field{
  min-width:0
}

.app-shell .crm-followup-date-field .date-time-control{
  height:38px;
  border-radius:9px;
  background:var(--surface-2)
}

.app-shell .crm-followup-date-field .date-time-control:focus-within{
  background:var(--surface)
}

.app-shell .crm-followup-date-field .date-control-input{
  height:36px!important;
  padding:0 34px 0 11px!important;
  font-size:11.5px
}

.app-shell .crm-followup-date-field .date-control-trigger{
  right:3px;
  width:30px;
  height:30px;
  border-radius:7px
}

.app-shell .crm-followup-date-field .date-control-trigger svg{
  width:15px;
  height:15px
}

.app-shell .crm-followup-date-field .date-time-part{
  padding:0 8px;
  background:transparent
}

/* The time input sizes to its own content. It was pinned to 70px, which fits a 24-hour
   "13:00" but not the 12-hour "01:00 PM" this business is set to — the leading zero was
   clipped off the left edge. A native time input has no single width: the fields it draws
   depend on the locale, so any fixed number is wrong for somebody. min-width holds the
   control steady while it is still empty. */

.app-shell .crm-followup-date-field .date-time-part>input{
  width:auto;
  min-width:70px;
  font-size:11.5px;
  font-weight:650
}

/* Contact Status and Result on the log form. Result is only meaningful once the contact has been
   completed, so it is not shown until then rather than sitting there asking about a call that has
   not happened. Kept in the flow with visibility rather than display:none so the row does not
   jump height as staff change the status. */

.app-shell .crm-log-state-grid{
  margin-top:12px
}

.app-shell .crm-log-result-field{
  transition:opacity .12s
}

.app-shell .crm-log-result-field.is-hidden{
  visibility:hidden;
  opacity:0;
  pointer-events:none
}

.app-shell .crm-log-completed-note{
  display:flex;
  align-items:center;
  gap:6px;
  margin:9px 0 0;
  color:var(--brand-strong);
  font-size:10.5px;
  font-weight:700
}

.app-shell .crm-log-completed-note svg{
  width:14px;
  height:14px;
  flex:none
}

/* One-click done on a queue row. Ghost like Add Follow Up Log beside it — it is routine work,
   not the decision that Close is. */

.app-shell .crm-queue-log-done:disabled{
  opacity:.55;
  cursor:progress
}

.app-shell .crm-followup-editor-field+.crm-followup-editor-field{
  margin-top:12px
}

.app-shell .crm-followup-editor-field textarea{
  min-height:120px
}

.app-shell .crm-followup-notes-section .tox-tinymce{
  height:300px!important;
  border:1px solid var(--border)!important;
  border-radius:10px!important
}

.app-shell .crm-followup-notes-section .tox .tox-menubar{
  padding:2px 5px!important;
  border-bottom:1px solid var(--border-2)!important;
  background:var(--surface)!important
}

.app-shell .crm-followup-notes-section .tox .tox-statusbar{
  min-height:24px!important;
  border-top:1px solid var(--border-2)!important;
  background:var(--surface)!important
}

.app-shell .crm-followup-notes-section .tox .tox-editor-header{
  border-bottom:1px solid var(--border-2)!important;
  box-shadow:none!important
}

.app-shell .crm-followup-notes-section .tox .tox-toolbar-overlord,.app-shell .crm-followup-notes-section .tox .tox-toolbar__primary{
  background:var(--surface-2)!important
}

.app-shell .crm-followup-notes-section .tox .tox-tbtn svg{
  opacity:.68;
  transition:opacity .12s
}

.app-shell .crm-followup-notes-section .tox .tox-tbtn:hover svg,.app-shell .crm-followup-notes-section .tox .tox-tbtn--enabled svg{
  opacity:.92
}

.app-shell .crm-followup-reminder-section{
  padding:0
}

.app-shell .crm-followup-reminder-toggle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:13px 14px
}

.app-shell .crm-followup-reminder-toggle>div{
  display:flex;
  min-width:0;
  align-items:center;
  gap:9px
}

.app-shell .crm-followup-reminder-icon{
  width:32px;
  height:32px;
  flex:0 0 32px;
  border-radius:9px
}

.app-shell .crm-followup-reminder-icon svg{
  width:16px;
  height:16px
}

.app-shell .crm-followup-reminder-toggle strong,.app-shell .crm-followup-reminder-toggle small{
  display:block
}

.app-shell .crm-followup-reminder-toggle strong{
  color:var(--text);
  font-size:12px;
  font-weight:780
}

.app-shell .crm-followup-reminder-toggle small{
  margin-top:2px;
  color:var(--text-3);
  font-size:10px
}

.app-shell .crm-followup-checkbox{
  margin:0
}

.app-shell .crm-followup-reminder-section .allow_notification_elements{
  padding:13px 14px;
  border-top:1px solid var(--border-2);
  background:var(--surface-2)
}

.app-shell .crm-followup-notification-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px
}

.app-shell .crm-followup-notify-options{
  display:flex;
  min-height:38px;
  align-items:center;
  gap:18px;
  padding:7px 10px;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface)
}

.app-shell .crm-followup-notify-options label{
  display:flex;
  align-items:center;
  gap:7px;
  margin:0;
  color:var(--text-2);
  font-size:11px;
  font-weight:650
}

.app-shell .crm-followup-notify-before{
  display:grid;
  grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:7px
}

.app-shell .crm-followup-modal__footer{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  margin:0;
  padding:11px 15px;
  border-top:1px solid var(--border-2);
  background:var(--surface)
}

.app-shell .crm-followup-modal__footer>span{
  margin-right:auto;
  color:var(--text-3);
  font-size:10px
}

.app-shell .crm-followup-modal__footer>span i{
  margin-right:4px;
  color:var(--danger);
  font-size:7px
}

.app-shell .crm-followup-modal__footer .btn-ghost,.app-shell .crm-followup-modal__footer .btn-primary{
  display:inline-flex;
  height:38px;
  min-width:96px;
  align-items:center;
  justify-content:center;
  gap:6px;
  margin:0
}

.app-shell .crm-followup-modal__footer .btn-primary svg{
  width:15px;
  height:15px
}

body.app-ui .bootstrap-datetimepicker-widget.crm-followup-datetime-widget{
  width:270px!important;
  min-width:270px!important;
  padding:8px!important;
  border:1px solid color-mix(in srgb,var(--brand) 18%,var(--border))!important;
  border-radius:11px!important;
  background:var(--surface)!important;
  box-shadow:0 18px 38px -18px rgba(16,32,24,.4)!important;
  font-size:11.5px!important
}

body.app-ui .bootstrap-datetimepicker-widget.crm-followup-datetime-widget table{
  border-spacing:1px
}

body.app-ui .bootstrap-datetimepicker-widget.crm-followup-datetime-widget td,body.app-ui .bootstrap-datetimepicker-widget.crm-followup-datetime-widget th{
  height:30px;
  min-width:30px;
  border-radius:7px;
  font-size:11px
}

body.app-ui .bootstrap-datetimepicker-widget.crm-followup-datetime-widget th.picker-switch{
  background:transparent;
  color:var(--text);
  font-size:11.5px;
  font-weight:780
}

body.app-ui .bootstrap-datetimepicker-widget.crm-followup-datetime-widget th.prev,body.app-ui .bootstrap-datetimepicker-widget.crm-followup-datetime-widget th.next{
  color:var(--text-2)
}

body.app-ui .bootstrap-datetimepicker-widget.crm-followup-datetime-widget td.day{
  color:var(--text-2);
  font-weight:550
}

body.app-ui .bootstrap-datetimepicker-widget.crm-followup-datetime-widget td.old,body.app-ui .bootstrap-datetimepicker-widget.crm-followup-datetime-widget td.new{
  color:#aeb8b2;
  opacity:.75
}

body.app-ui .bootstrap-datetimepicker-widget.crm-followup-datetime-widget td.disabled,body.app-ui .bootstrap-datetimepicker-widget.crm-followup-datetime-widget td.disabled:hover{
  color:#c2cac6;
  opacity:.62
}

body.app-ui .bootstrap-datetimepicker-widget.crm-followup-datetime-widget td.today{
  background:var(--brand-weak);
  color:var(--brand-strong);
  font-weight:750
}

body.app-ui .bootstrap-datetimepicker-widget.crm-followup-datetime-widget td.active,body.app-ui .bootstrap-datetimepicker-widget.crm-followup-datetime-widget td.active:hover{
  background:var(--brand)!important;
  color:#fff!important;
  box-shadow:0 3px 9px rgba(21,154,77,.2)
}

body.app-ui .bootstrap-datetimepicker-widget.crm-followup-datetime-widget td span{
  width:55px;
  height:36px;
  margin:2px;
  line-height:36px
}

body.app-ui .bootstrap-datetimepicker-widget.crm-followup-datetime-widget .timepicker-hour,body.app-ui .bootstrap-datetimepicker-widget.crm-followup-datetime-widget .timepicker-minute{
  font-size:15px;
  font-weight:750
}

body.app-ui .bootstrap-datetimepicker-widget.crm-followup-datetime-widget li.picker-switch.accordion-toggle{
  margin-top:5px;
  padding-top:5px;
  border-top:1px solid var(--border-2)
}

@media(max-width:760px){
  .app-shell .crm-followup-dialog{
    width:calc(100vw - 18px);
    margin:9px auto
  }

  .app-shell .crm-followup-modal>form{
    max-height:none
  }

  .app-shell .crm-followup-modal__heading p,.app-shell .crm-followup-copy-note{
    display:none
  }

  .app-shell .crm-followup-form-grid,.app-shell .crm-followup-form-grid.is-primary,.app-shell .crm-followup-form-grid.is-pair,.app-shell .crm-followup-form-grid.is-single,.app-shell .crm-followup-notification-grid{
    grid-template-columns:1fr
  }

  .app-shell .crm-followup-modal__body{
    padding:10px
  }

  .app-shell .crm-followup-form-section{
    padding:12px
  }
}

/* CRM follow-up log add/edit dialog */

.app-shell .crm-followup-log-dialog{
  width:min(850px,calc(100vw - 28px))
}

.app-shell .crm-followup-log-modal .crm-followup-modal__heading p strong{
  color:var(--text-2);
  font-weight:750
}

.app-shell .crm-followup-log-body{
  display:grid;
  gap:12px
}

.app-shell .crm-followup-log-body .crm-followup-form-section+.crm-followup-form-section{
  margin-top:0
}

.app-shell .crm-followup-log-subject{
  margin-bottom:12px
}

.app-shell .crm-followup-log-subject .form-group{
  margin:0
}

.app-shell .crm-followup-log-modal .crm-followup-form-grid{
  margin-top:0
}

.app-shell .crm-followup-log-notes .tox-tinymce{
  height:300px!important
}

.app-shell .crm-followup-log-status{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(220px,270px);
  align-items:center;
  gap:14px;
  padding:12px 14px
}

.app-shell .crm-followup-log-status__copy{
  display:flex;
  min-width:0;
  align-items:center;
  gap:9px
}

.app-shell .crm-followup-log-status__copy>span{
  display:grid;
  width:32px;
  height:32px;
  flex:0 0 32px;
  place-items:center;
  border-radius:9px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .crm-followup-log-status__copy strong,.app-shell .crm-followup-log-status__copy small{
  display:block
}

.app-shell .crm-followup-log-status__copy strong{
  color:var(--text);
  font-size:12px;
  font-weight:780
}

.app-shell .crm-followup-log-status__copy small{
  margin-top:2px;
  color:var(--text-3);
  font-size:10px;
  line-height:1.4
}

.app-shell .crm-followup-log-status>.form-group{
  min-width:0;
  margin:0
}

.app-shell .crm-followup-log-modal .date-time-control{
  background:var(--surface-2)
}

.app-shell .crm-followup-log-modal .tox .tox-tbtn svg{
  opacity:.68
}

.app-shell .crm-followup-log-modal .tox .tox-tbtn:hover svg,.app-shell .crm-followup-log-modal .tox .tox-tbtn--enabled svg{
  opacity:.92
}

@media(max-width:760px){
  .app-shell .crm-followup-log-dialog{
    width:calc(100vw - 18px)
  }

  .app-shell .crm-followup-log-status{
    grid-template-columns:1fr
  }
}

/* CRM advanced follow-up chooser and workflows */

.app-shell .crm-advance-choice-dialog{
  width:min(660px,calc(100vw - 28px));
  margin:70px auto
}

.app-shell .crm-advance-choice-modal{
  overflow:hidden;
  border:0;
  border-radius:16px;
  background:var(--surface);
  box-shadow:0 28px 80px -30px rgba(13,28,19,.58)
}

.app-shell .crm-advance-choice-header{
  display:flex;
  min-height:72px;
  align-items:center;
  gap:12px;
  padding:14px 17px;
  border-bottom:1px solid var(--border-2)
}

.app-shell .crm-advance-choice-heading{
  display:flex;
  min-width:0;
  align-items:center;
  gap:11px
}

.app-shell .crm-advance-choice-heading>span{
  display:grid;
  width:40px;
  height:40px;
  flex:0 0 40px;
  place-items:center;
  border-radius:11px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .crm-advance-choice-heading h4{
  margin:0;
  color:var(--text);
  font-size:16px;
  font-weight:820
}

.app-shell .crm-advance-choice-heading p{
  margin:3px 0 0;
  color:var(--text-3);
  font-size:11.5px
}

.app-shell .crm-advance-choice-body{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  padding:16px;
  background:var(--surface-2)
}

.app-shell .crm-advance-choice-card{
  display:grid;
  min-height:122px;
  grid-template-columns:42px minmax(0,1fr) 28px;
  align-items:center;
  gap:11px;
  padding:15px;
  border:1px solid var(--border);
  border-radius:13px;
  background:var(--surface);
  color:var(--text);
  text-decoration:none;
  transition:border-color .15s,box-shadow .15s,transform .15s
}

.app-shell .crm-advance-choice-card:hover,.app-shell .crm-advance-choice-card:focus{
  border-color:color-mix(in srgb,var(--brand) 45%,var(--border));
  color:var(--text);
  outline:0;
  box-shadow:0 10px 25px -17px rgba(18,61,37,.42);
  text-decoration:none;
  transform:translateY(-1px)
}

.app-shell .crm-advance-choice-card__icon{
  display:grid;
  width:42px;
  height:42px;
  place-items:center;
  border-radius:11px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .crm-advance-choice-card__icon.is-recurring{
  background:#eef2ff;
  color:#5164c8
}

.app-shell .crm-advance-choice-card__copy strong,.app-shell .crm-advance-choice-card__copy small{
  display:block
}

.app-shell .crm-advance-choice-card__copy strong{
  font-size:12.5px;
  font-weight:800
}

.app-shell .crm-advance-choice-card__copy small{
  margin-top:5px;
  color:var(--text-3);
  font-size:10.5px;
  line-height:1.5
}

.app-shell .crm-advance-choice-card__arrow{
  display:grid;
  width:28px;
  height:28px;
  place-items:center;
  border-radius:8px;
  background:var(--surface-2);
  color:var(--text-3)
}

.app-shell .crm-advance-choice-card:hover .crm-advance-choice-card__arrow{
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .crm-advance-choice-footer{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  margin:0;
  padding:11px 16px;
  border-top:1px solid var(--border-2);
  background:var(--surface)
}

.app-shell .crm-advance-choice-footer>span{
  margin-right:auto;
  color:var(--text-3);
  font-size:10.5px
}

.app-shell .crm-advance-choice-footer .btn-ghost{
  height:38px;
  min-width:92px;
  justify-content:center
}

.app-shell .crm-advance-progress{
  display:grid;
  grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr) 44px minmax(0,1fr);
  align-items:center;
  margin-top:14px;
  padding:12px 15px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

.app-shell .crm-advance-progress>div{
  display:flex;
  min-width:0;
  align-items:center;
  gap:9px;
  color:var(--text-3)
}

.app-shell .crm-advance-progress>div>span{
  display:grid;
  width:30px;
  height:30px;
  flex:0 0 30px;
  place-items:center;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface-2);
  font-size:10.5px;
  font-weight:850
}

.app-shell .crm-advance-progress strong,.app-shell .crm-advance-progress small{
  display:block
}

.app-shell .crm-advance-progress strong{
  font-size:11.5px;
  font-weight:780
}

.app-shell .crm-advance-progress small{
  margin-top:1px;
  font-size:9.5px
}

.app-shell .crm-advance-progress>i{
  display:block;
  height:1px;
  background:var(--border)
}

.app-shell .crm-advance-progress>div.is-active{
  color:var(--text)
}

.app-shell .crm-advance-progress>div.is-active>span{
  border-color:color-mix(in srgb,var(--brand) 30%,var(--border));
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .crm-advance-progress>div.is-complete>span{
  border-color:var(--brand);
  background:var(--brand);
  color:#fff
}

.app-shell .crm-advance-section{
  overflow:visible
}

.app-shell .crm-advance-section .crm-panel-head{
  border-radius:14px 14px 0 0
}

.app-shell .crm-advance-section .crm-panel-head--sub{
  justify-content:flex-start
}

.app-shell .crm-advance-section .crm-panel-head--sub>div{
  min-width:0;
  flex:1
}

.app-shell .crm-advance-section .form-group>label{
  display:block;
  margin:0 0 6px;
  color:var(--text-2);
  font-size:11.5px;
  font-weight:750
}

.app-shell .crm-advance-section .form-control,.app-shell .crm-advance-section .select2-container .select2-selection{
  height:40px;
  border-color:var(--border);
  border-radius:9px;
  background:var(--surface-2);
  box-shadow:none
}

.app-shell .crm-advance-section .select2-container .select2-selection--single .select2-selection__rendered{
  padding-left:11px;
  line-height:38px
}

.app-shell .crm-advance-section .select2-container .select2-selection--single .select2-selection__arrow{
  height:38px
}

.app-shell .crm-advance-section .select2-container .select2-selection--multiple{
  height:auto;
  min-height:40px
}

.app-shell .crm-advance-section .select-field{
  width:100%;
  min-width:0
}

.app-shell .crm-advance-section .form-control:focus,.app-shell .crm-advance-section .select2-container--focus .select2-selection{
  border-color:var(--brand);
  background:var(--surface);
  box-shadow:0 0 0 3px rgba(21,154,77,.1)
}

.app-shell .crm-advance-next{
  display:inline-flex;
  height:40px;
  align-items:center;
  justify-content:center;
  gap:6px
}

.app-shell .crm-advance-date-field .date-time-control{
  height:40px;
  border-radius:9px;
  background:var(--surface-2)
}

.app-shell .crm-advance-date-field .date-control-input{
  height:38px!important;
  padding:0 34px 0 11px!important
}

.app-shell .crm-advance-date-field .date-control-trigger{
  right:3px;
  width:31px;
  height:31px
}

.app-shell .crm-advance-review #group_invoices_div{
  overflow-x:auto
}

.app-shell .crm-advance-section textarea#description{
  min-height:180px
}

.app-shell .crm-advance-section .tox-tinymce{
  height:300px!important;
  border:1px solid var(--border)!important;
  border-radius:10px!important
}

.app-shell .crm-advance-section .tox .tox-editor-header{
  border-bottom:1px solid var(--border-2)!important;
  box-shadow:none!important
}

.app-shell .crm-advance-section .tox .tox-toolbar-overlord,.app-shell .crm-advance-section .tox .tox-toolbar__primary{
  background:var(--surface-2)!important
}

.app-shell .crm-advance-section .tox .tox-tbtn svg{
  opacity:.68
}

.app-shell .crm-recurring-summary{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:14px;
  padding:12px 14px;
  border:1px solid color-mix(in srgb,var(--brand) 18%,var(--border));
  border-radius:12px;
  background:var(--brand-weak)
}

.app-shell .crm-recurring-summary>span{
  display:grid;
  width:32px;
  height:32px;
  flex:0 0 32px;
  place-items:center;
  border-radius:9px;
  background:var(--surface);
  color:var(--brand-strong)
}

.app-shell .crm-recurring-summary strong,.app-shell .crm-recurring-summary small{
  display:block
}

.app-shell .crm-recurring-summary strong{
  color:var(--text);
  font-size:11.5px;
  font-weight:800
}

.app-shell .crm-recurring-summary small{
  margin-top:2px;
  color:var(--text-2);
  font-size:10.5px
}

@media(max-width:760px){
  .app-shell .crm-advance-choice-dialog{
    width:calc(100vw - 18px);
    margin:18px auto
  }

  .app-shell .crm-advance-choice-body{
    grid-template-columns:1fr
  }

  .app-shell .crm-advance-choice-card{
    min-height:104px
  }

  .app-shell .crm-advance-choice-footer>span{
    display:none
  }

  .app-shell .crm-advance-progress{
    grid-template-columns:1fr;
    gap:8px
  }

  .app-shell .crm-advance-progress>i{
    display:none
  }

  .app-shell .crm-advance-progress small{
    display:none
  }
}

/* CRM dashboard polish */

.app-shell .crm-stat-tile{
  transition:box-shadow .15s,transform .15s
}

.app-shell .crm-stat-tile:hover{
  box-shadow:0 8px 22px -12px rgba(16,32,24,.22)
}

.app-shell .crm-status-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:11px;
  padding:14px 15px
}

.app-shell .crm-status-chip{
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  grid-template-rows:auto auto;
  align-items:center;
  -moz-column-gap:10px;
       column-gap:10px;
  padding:12px 13px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface-2)
}

.app-shell .crm-status-chip>span{
  display:grid;
  width:34px;
  height:34px;
  grid-row:1/3;
  place-items:center;
  border-radius:9px
}

.app-shell .crm-status-chip>small{
  color:var(--text-3);
  font-size:11px;
  font-weight:700
}

.app-shell .crm-status-chip>strong{
  color:var(--text);
  font-size:18px;
  font-weight:850;
  line-height:1.1
}

.app-shell .crm-status-chip.is-blue>span{
  background:#eaf2ff;
  color:#2463c9
}

.app-shell .crm-status-chip.is-amber>span{
  background:#fff1d8;
  color:#b56c00
}

.app-shell .crm-status-chip.is-red>span{
  background:#fdeaea;
  color:#c0392b
}

.app-shell .crm-status-chip.is-green>span{
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .crm-status-chip.is-gray>span{
  background:#eef2f0;
  color:#66736c
}

.app-shell .crm-metric-name{
  font-weight:700;
  color:var(--text)
}

.app-shell .crm-metric-count{
  font-variant-numeric:tabular-nums;
  font-weight:750
}

.app-shell .crm-conversion-cell{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:9px
}

.app-shell .crm-conversion-cell>strong{
  min-width:58px;
  font-variant-numeric:tabular-nums;
  font-size:12px;
  font-weight:800;
  color:var(--text)
}

.app-shell .crm-meter{
  display:block;
  width:76px;
  height:6px;
  flex:none;
  overflow:hidden;
  border-radius:999px;
  background:var(--surface-3,#eef2f0)
}

.app-shell .crm-meter>i{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,#34b567,#159a4d)
}

.app-shell .crm-meter.is-stage>i{
  background:linear-gradient(90deg,#5f8dea,#2463c9)
}

/* CRM panel toolbar + footer alignment */

.app-shell .crm-panel-toolbar{
  margin-bottom:12px
}

.app-shell .crm-panel .data-table-footer{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding-top:12px
}

.app-shell .crm-panel td.details-control{
  cursor:pointer;
  color:var(--brand-strong)
}

.app-shell .crm-panel td.details-control::before{
  content:'+';
  display:inline-grid;
  width:20px;
  height:20px;
  place-items:center;
  border:1px solid var(--border);
  border-radius:6px;
  background:var(--surface-2);
  font-weight:800
}

.app-shell .crm-panel tr.details td.details-control::before{
  content:'−'
}

/* ---- CRM dashboard v3 ---- */

.app-shell .crm-nav-shell{
  margin:12px 0 4px
}

.app-shell .crm-nav{
  display:flex;
  align-items:center;
  gap:7px;
  padding:7px 8px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

.app-shell .crm-nav-brand{
  position:relative;
  display:inline-flex;
  height:38px;
  flex:0 0 auto;
  align-items:center;
  gap:7px;
  padding:0 13px;
  border:1px solid transparent;
  border-radius:10px;
  background:var(--brand-weak);
  color:var(--brand-strong)!important;
  font-size:12.5px;
  font-weight:820;
  text-decoration:none!important;
  white-space:nowrap;
  transition:border-color .15s,box-shadow .15s,background .15s
}

.app-shell .crm-nav-brand:hover{
  border-color:color-mix(in srgb,var(--brand) 25%,var(--border));
  background:color-mix(in srgb,var(--brand-weak) 75%,var(--surface));
  color:var(--brand-strong)!important
}

.app-shell .crm-nav-brand.is-current{
  border-color:color-mix(in srgb,var(--brand) 30%,var(--border));
  box-shadow:inset 0 -2px 0 var(--brand)
}

.app-shell .crm-nav-links{
  display:flex;
  min-width:0;
  flex:1;
  align-items:center;
  gap:2px;
  overflow-x:auto;
  overflow-y:hidden;
  overscroll-behavior-x:contain;
  scrollbar-width:none
}

.app-shell .crm-nav-links::-webkit-scrollbar{
  display:none
}

.app-shell .crm-nav-links>a,.app-shell .crm-nav-dropdown>button{
  position:relative;
  display:inline-flex;
  height:36px;
  flex:0 0 auto;
  align-items:center;
  gap:5px;
  padding:0 10px;
  border:1px solid transparent;
  border-radius:9px;
  background:transparent;
  color:var(--text-2)!important;
  font:inherit;
  font-size:12px;
  font-weight:680;
  line-height:1.2;
  text-decoration:none!important;
  white-space:nowrap;
  cursor:pointer;
  transition:border-color .15s,background .15s,color .15s,box-shadow .15s
}

.app-shell .crm-nav-links>a:hover,.app-shell .crm-nav-dropdown>button:hover{
  background:var(--surface-2);
  color:var(--text)!important
}

.app-shell .crm-nav-links>a.is-active,.app-shell .crm-nav-dropdown.is-active>button{
  border-color:var(--text);
  background:var(--text);
  color:#fff!important;
  box-shadow:0 5px 12px -8px rgba(16,32,24,.65)
}

.app-shell .crm-nav-links>a:focus-visible,.app-shell .crm-nav-dropdown>button:focus-visible,.app-shell .crm-nav-brand:focus-visible{
  outline:2px solid color-mix(in srgb,var(--brand) 55%,transparent);
  outline-offset:2px
}

.app-shell .crm-nav-links>a.is-section-start{
  margin-left:7px
}

.app-shell .crm-nav-links>a.is-section-start:before{
  position:absolute;
  top:7px;
  bottom:7px;
  left:-5px;
  width:1px;
  background:var(--border);
  content:""
}

.app-shell .crm-nav-links>a.is-section-start.is-active:before{
  background:var(--border)
}

.app-shell .crm-nav-dropdown{
  position:relative;
  display:inline-flex;
  flex:0 0 auto
}

.app-shell .crm-nav-dropdown>button>svg{
  transition:transform .15s
}

.app-shell .crm-nav-dropdown.open>button>svg{
  transform:rotate(180deg)
}

.app-shell .crm-nav-dropdown-menu{
  z-index:3100;
  min-width:205px;
  max-height:calc(100vh - 24px);
  margin:0;
  padding:6px;
  overflow-y:auto;
  border:1px solid var(--border);
  border-radius:11px;
  background:var(--surface);
  box-shadow:0 16px 38px -16px rgba(16,32,24,.35)
}

.app-shell .crm-nav-dropdown-menu .dropdown-item{
  display:flex;
  align-items:center;
  gap:9px;
  padding:9px 10px;
  border-radius:8px;
  color:var(--text-2);
  font-size:12px;
  font-weight:680;
  text-decoration:none
}

.app-shell .crm-nav-dropdown-menu .dropdown-item>svg{
  width:15px;
  height:15px;
  color:var(--text-3)
}

.app-shell .crm-nav-dropdown-menu .dropdown-item:hover,.app-shell .crm-nav-dropdown-menu .dropdown-item.is-current{
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .crm-nav-dropdown-menu .dropdown-item:hover>svg,.app-shell .crm-nav-dropdown-menu .dropdown-item.is-current>svg{
  color:var(--brand-strong)
}

@media(max-width:760px){
  .app-shell .crm-nav{
    gap:5px;
    border-radius:12px
  }

  .app-shell .crm-nav-brand{
    width:42px;
    justify-content:center;
    padding:0;
    font-size:0
  }

  .app-shell .crm-nav-brand>svg{
    width:17px;
    height:17px
  }

  .app-shell .crm-nav-links>a,.app-shell .crm-nav-dropdown>button{
    height:34px;
    padding:0 9px;
    font-size:11.5px
  }
}

.app-shell .crm-dash-crumb{
  display:block;
  color:var(--text-3);
  font-size:11px;
  font-weight:650
}

.app-shell .crm-kpi-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  margin-top:14px
}

.app-shell .crm-kpi{
  position:relative;
  padding:15px 16px 12px;
  border:1px solid var(--border);
  border-radius:13px;
  background:var(--surface);
  box-shadow:var(--shadow-sm);
  transition:box-shadow .15s
}

.app-shell .crm-kpi:hover{
  box-shadow:0 8px 24px -12px rgba(20,27,23,.16)
}

.app-shell .crm-kpi>small{
  display:block;
  padding-right:44px;
  color:var(--text-3);
  font-size:11px;
  font-weight:650
}

.app-shell .crm-kpi-ic{
  position:absolute;
  top:13px;
  right:14px;
  display:grid;
  width:34px;
  height:34px;
  place-items:center;
  border-radius:9px
}

.app-shell .crm-kpi-ic.is-green{
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .crm-kpi-ic.is-blue{
  background:#eaf2ff;
  color:#2463c9
}

.app-shell .crm-kpi-ic.is-amber{
  background:#fff1d8;
  color:#b56c00
}

.app-shell .crm-kpi-ic.is-violet{
  background:#f1ecfd;
  color:#6d3fc4
}

.app-shell .crm-kpi-num{
  margin-top:6px;
  font-size:26px;
  font-weight:850;
  letter-spacing:-.6px;
  line-height:1;
  font-variant-numeric:tabular-nums
}

.app-shell .crm-kpi-foot{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:11px;
  padding-top:10px;
  border-top:1px solid var(--border-2)
}

.app-shell .crm-kpi-foot>span:last-child{
  overflow:hidden;
  color:var(--text-3);
  font-size:10.5px;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .crm-kpi-chip{
  display:inline-flex;
  flex:none;
  align-items:center;
  gap:3px;
  padding:2px 7px;
  border-radius:6px;
  font-size:10.5px;
  font-weight:800
}

.app-shell .crm-kpi-chip.is-up{
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .crm-kpi-chip.is-warn{
  background:#fff1d8;
  color:#b56c00
}

.app-shell .crm-kpi-chip.is-flat{
  background:var(--surface-2);
  color:var(--text-3)
}

.app-shell .crm-panel-head--sub{
  justify-content:space-between
}

.app-shell .crm-panel-head--sub>div>strong{
  display:block;
  color:var(--text);
  font-size:13.5px;
  font-weight:750
}

.app-shell .crm-panel-head--sub>div>small{
  display:block;
  margin-top:1px;
  color:var(--text-3);
  font-size:11px
}

.app-shell .crm-panel-link{
  color:var(--brand-strong);
  font-size:11.5px;
  font-weight:700;
  text-decoration:none;
  white-space:nowrap
}

.app-shell .crm-pipe{
  display:flex;
  height:38px;
  overflow:hidden;
  border-radius:10px
}

.app-shell .crm-pipe>span{
  display:grid;
  min-width:34px;
  place-items:center;
  color:#fff;
  font-size:11.5px;
  font-weight:750
}

.app-shell .crm-pipe>span + span{
  border-left:2px solid var(--surface)
}

.app-shell .crm-pipe-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px 20px;
  margin-top:11px
}

.app-shell .crm-pipe-item{
  display:flex;
  align-items:center;
  gap:7px;
  color:var(--text-2);
  font-size:11.5px
}

.app-shell .crm-pipe-item em{
  width:9px;
  height:9px;
  border-radius:3px;
  font-style:normal
}

.app-shell .crm-pipe-item b{
  color:var(--text);
  font-variant-numeric:tabular-nums
}

.app-shell .crm-pipe-item i{
  color:var(--text-3);
  font-size:10.5px;
  font-style:normal;
  font-variant-numeric:tabular-nums
}

.app-shell .crm-hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
  gap:14px;
  margin-top:14px
}

.app-shell .crm-chart-legend{
  display:flex;
  gap:16px;
  margin:0 0 8px
}

.app-shell .crm-chart-legend>span{
  display:flex;
  align-items:center;
  gap:6px;
  color:var(--text-2);
  font-size:11.5px;
  font-weight:650
}

.app-shell .crm-chart-legend em{
  width:9px;
  height:9px;
  border-radius:3px;
  font-style:normal
}

.app-shell .crm-chart-scroll{
  overflow-x:auto
}

.app-shell .crm-chart-scroll svg{
  min-width:560px
}

.app-shell .crm-chart-grid line{
  stroke:var(--border-2);
  stroke-width:1
}

.app-shell .crm-chart-axis text{
  fill:var(--text-3);
  font-size:9.5px;
  font-weight:650;
  font-family:inherit
}

.app-shell .crm-chart-endlabel text{
  fill:var(--text-2);
  font-size:10px;
  font-weight:800;
  font-family:inherit
}

.app-shell .crm-gauges{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px
}

.app-shell .crm-gauge{
  display:grid;
  justify-items:center;
  padding:12px 6px 11px;
  border:1px solid var(--border-2);
  border-radius:11px;
  background:var(--surface-2);
  text-align:center
}

.app-shell .crm-gauge-arc{
  position:relative;
  width:104px;
  height:66px
}

.app-shell .crm-gauge-arc>b{
  position:absolute;
  right:0;
  bottom:0;
  left:0;
  font-size:16px;
  font-weight:850;
  font-variant-numeric:tabular-nums;
  line-height:1
}

.app-shell .crm-gauge>small{
  margin-top:6px;
  color:var(--text-3);
  font-size:9px;
  font-weight:850;
  letter-spacing:.05em;
  text-transform:uppercase
}

.app-shell .crm-gauge>p{
  margin:4px 0 0;
  color:var(--text-2);
  font-size:10.5px;
  font-weight:600
}

.app-shell .crm-section-divider.is-tight{
  margin:16px 0 10px
}

.app-shell .crm-section-divider.is-tight>strong{
  font-size:10px
}

.app-shell .crm-donut-flex{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:18px
}

.app-shell .crm-donut{
  position:relative;
  width:150px;
  height:150px;
  flex:none
}

.app-shell .crm-donut-center{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  text-align:center
}

.app-shell .crm-donut-center b{
  display:block;
  font-size:21px;
  font-weight:850;
  line-height:1.05;
  font-variant-numeric:tabular-nums
}

.app-shell .crm-donut-center small{
  display:block;
  color:var(--text-3);
  font-size:9px;
  font-weight:850;
  letter-spacing:.05em;
  text-transform:uppercase
}

.app-shell .crm-donut-legend{
  display:grid;
  flex:1;
  gap:7px;
  min-width:150px
}

.app-shell .crm-donut-row{
  display:grid;
  grid-template-columns:11px minmax(0,1fr) auto 34px;
  align-items:center;
  gap:8px;
  font-size:12px
}

.app-shell .crm-donut-row em{
  width:9px;
  height:9px;
  border-radius:3px;
  font-style:normal
}

.app-shell .crm-donut-row span{
  color:var(--text-2);
  font-weight:650
}

.app-shell .crm-donut-row b{
  font-variant-numeric:tabular-nums;
  font-weight:800
}

.app-shell .crm-donut-row i{
  color:var(--text-3);
  font-size:10.5px;
  font-style:normal;
  text-align:right;
  font-variant-numeric:tabular-nums
}

.app-shell .crm-fact-list.is-flush .crm-fact{
  padding-left:0;
  padding-right:0
}

.app-shell .crm-bottom-grid{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1.25fr) minmax(0,.85fr);
  gap:14px;
  margin-top:12px
}

.app-shell .crm-rail{
  display:grid;
  gap:14px;
  align-content:start
}

.app-shell .crm-thead{
  display:grid;
  gap:10px;
  padding-bottom:7px;
  border-bottom:1px solid var(--border);
  color:var(--text-3);
  font-size:9.5px;
  font-weight:850;
  letter-spacing:.07em;
  text-transform:uppercase
}

.app-shell .crm-trow{
  display:grid;
  align-items:center;
  gap:10px;
  padding:8px 0;
  font-size:12.5px
}

.app-shell .crm-trow + .crm-trow{
  border-top:1px solid var(--border-2)
}

.app-shell .crm-cols-src{
  grid-template-columns:minmax(0,1fr) 46px 96px 58px
}

.app-shell .crm-thead .t-r,.app-shell .num-r{
  text-align:right;
  font-variant-numeric:tabular-nums;
  font-weight:750
}

.app-shell .mut-r{
  text-align:right;
  color:var(--text-2);
  font-weight:650;
  font-variant-numeric:tabular-nums
}

.app-shell .crm-nm{
  overflow:hidden;
  font-weight:650;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .crm-trow:hover .crm-meter>i{
  filter:brightness(1.08)
}

.app-shell .crm-bday{
  display:flex;
  align-items:center;
  gap:9px;
  padding:7px 0
}

.app-shell .crm-bday + .crm-bday{
  border-top:1px solid var(--border-2)
}

.app-shell .crm-bday input{
  width:15px;
  height:15px;
  flex:none;
  accent-color:var(--brand)
}

.app-shell .crm-bday label{
  flex:1;
  min-width:0;
  margin:0;
  overflow:hidden;
  font-weight:650;
  text-overflow:ellipsis;
  white-space:nowrap;
  cursor:pointer
}

.app-shell .crm-bday b{
  color:var(--text-3);
  font-size:11px;
  font-weight:700;
  white-space:nowrap
}

.app-shell .crm-empty.is-left{
  text-align:left;
  padding:6px 0
}

@media (max-width:1150px){
  .app-shell .crm-kpi-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

  .app-shell .crm-hero-grid,.app-shell .crm-bottom-grid{
    grid-template-columns:1fr
  }
}

@media (max-width:600px){
  .app-shell .crm-kpi-grid{
    grid-template-columns:1fr
  }

  .app-shell .crm-gauges{
    grid-template-columns:1fr
  }
}

/* CRM dashboard summary rows + ranks */

.app-shell .crm-userbar{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1fr) 40px;
  align-items:center;
  gap:10px;
  padding:8px 0
}

.app-shell .crm-userbar + .crm-userbar{
  border-top:1px solid var(--border-2)
}

.app-shell .crm-userbar-who{
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0
}

.app-shell .crm-userbar-who i{
  display:grid;
  width:28px;
  height:28px;
  flex:0 0 28px;
  place-items:center;
  border-radius:50%;
  background:var(--brand-weak);
  color:var(--brand-strong);
  font-size:10.5px;
  font-style:normal;
  font-weight:800
}

.app-shell .crm-userbar-who span{
  overflow:hidden;
  font-size:12.5px;
  font-weight:650;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .crm-userbar>b{
  text-align:right;
  font-size:12.5px;
  font-weight:800;
  font-variant-numeric:tabular-nums
}

.app-shell .crm-meter.is-blue>i{
  background:#2f6fd8
}

.app-shell .crm-rank{
  display:grid;
  grid-template-columns:24px minmax(0,1fr) 54px;
  align-items:center;
  gap:10px;
  padding:8px 0
}

.app-shell .crm-rank + .crm-rank{
  border-top:1px solid var(--border-2)
}

.app-shell .crm-rank-pos{
  display:grid;
  width:22px;
  height:22px;
  place-items:center;
  border-radius:6px;
  background:var(--surface-2);
  color:var(--text-3);
  font-size:10.5px;
  font-weight:850
}

.app-shell .crm-rank:first-of-type .crm-rank-pos{
  background:var(--brand);
  color:#fff
}

.app-shell .crm-rank-nm{
  min-width:0
}

.app-shell .crm-rank-nm>span:first-child{
  display:block;
  overflow:hidden;
  font-size:12.5px;
  font-weight:650;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .crm-rank-nm .crm-meter{
  margin-top:5px;
  height:5px
}

.app-shell .crm-rank>b{
  text-align:right;
  font-weight:850;
  font-variant-numeric:tabular-nums
}

/* ---- Repair module: workshop overview ---- */

.app-shell .repair-page{
  max-width:1480px
}

.app-shell .repair-page-head,.app-shell .page-head{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px 18px;
  padding:8px 0 17px;
  border-bottom:1px solid var(--border)
}

.app-shell .repair-page-eyebrow,.app-shell .page-eyebrow{
  display:block;
  margin-bottom:4px;
  color:var(--brand-strong);
  font-size:9px;
  font-weight:850;
  letter-spacing:.07em;
  text-transform:uppercase
}

.app-shell .repair-page-head h1,.app-shell .page-head h1{
  margin:0;
  color:var(--text);
  font-size:23px;
  font-weight:850;
  letter-spacing:-.45px;
  line-height:1.15
}

.app-shell .repair-page-head p,.app-shell .page-head p{
  margin:5px 0 0;
  color:var(--text-3);
  font-size:12px
}

.app-shell .repair-page-actions,.app-shell .page-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:9px
}

.app-shell .repair-page-actions .btn-primary,.app-shell .repair-page-actions .btn-ghost,.app-shell .page-actions .btn-primary,.app-shell .page-actions .btn-ghost{
  height:40px;
  padding:0 14px;
  border-radius:10px
}

.app-shell .repair-flow-card,.app-shell .repair-chart-card,.app-shell .repair-team-card{
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

.app-shell .repair-section-head,.app-shell .section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:13px 15px;
  border-bottom:1px solid var(--border-2);
  background:linear-gradient(105deg,color-mix(in srgb,var(--brand-weak) 52%,var(--surface)) 0%,var(--surface) 66%)
}

.app-shell .repair-section-head>div,.app-shell .section-head>div{
  display:flex;
  min-width:0;
  align-items:center;
  gap:10px
}

.app-shell .repair-section-icon,.app-shell .repair-team-card>header>span,.app-shell .section-icon{
  display:grid;
  width:36px;
  height:36px;
  flex:0 0 36px;
  place-items:center;
  border-radius:10px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .repair-section-head h2,.app-shell .repair-section-head p,.app-shell .repair-chart-card header h3,.app-shell .repair-chart-card header p,.app-shell .repair-team-card header h3,.app-shell .repair-team-card header p,.app-shell .section-head h2,.app-shell .section-head p{
  margin:0
}

.app-shell .repair-section-head h2,.app-shell .section-head h2{
  color:var(--text);
  font-size:14.5px;
  font-weight:820
}

.app-shell .repair-section-head p,.app-shell .section-head p{
  margin-top:2px;
  color:var(--text-3);
  font-size:12px
}

.app-shell .repair-section-total,.app-shell .section-total{
  display:flex;
  align-items:baseline;
  gap:5px;
  padding:5px 9px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface);
  color:var(--text-3);
  font-size:9.5px;
  font-weight:700;
  white-space:nowrap
}

.app-shell .repair-section-total strong,.app-shell .section-total strong{
  color:var(--text);
  font-size:14px;
  font-weight:850;
  font-variant-numeric:tabular-nums
}

.app-shell .repair-status-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(178px,1fr));
  gap:0
}

.app-shell .repair-status-card{
  position:relative;
  display:flex;
  min-width:0;
  align-items:center;
  gap:12px;
  padding:16px;
  border-right:1px solid var(--border-2);
  background:var(--surface);
  color:var(--text);
  text-decoration:none;
  transition:background .15s,box-shadow .15s
}

.app-shell .repair-status-card:before{
  position:absolute;
  top:0;
  right:0;
  left:0;
  height:3px;
  background:var(--repair-status-color);
  content:""
}

.app-shell .repair-status-card:last-child{
  border-right:0
}

.app-shell .repair-status-card:hover{
  z-index:1;
  background:color-mix(in srgb,var(--repair-status-color) 5%,var(--surface));
  color:var(--text);
  box-shadow:0 8px 20px -18px rgba(16,32,24,.4)
}

.app-shell .repair-status-card__icon{
  display:grid;
  width:42px;
  height:42px;
  flex:0 0 42px;
  place-items:center;
  border-radius:11px;
  background:color-mix(in srgb,var(--repair-status-color) 12%,var(--surface));
  color:var(--repair-status-color)
}

.app-shell .repair-status-card__icon svg{
  width:23px;
  height:23px
}

.app-shell .repair-status-card__icon svg [fill]:not([fill="none"]){
  fill:currentColor!important
}

.app-shell .repair-status-card__icon svg [stroke]:not([stroke="none"]){
  stroke:currentColor!important
}

.app-shell .repair-status-card__copy{
  min-width:0
}

.app-shell .repair-status-card__copy small,.app-shell .repair-status-card__copy strong,.app-shell .repair-status-card__copy>span{
  display:block
}

.app-shell .repair-status-card__copy small{
  overflow:hidden;
  color:var(--text-2);
  font-size:10.5px;
  font-weight:720;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .repair-status-card__copy strong{
  margin-top:2px;
  color:var(--text);
  font-size:23px;
  font-weight:850;
  letter-spacing:-.4px;
  line-height:1.05;
  font-variant-numeric:tabular-nums
}

.app-shell .repair-status-card__copy>span{
  display:flex;
  align-items:center;
  gap:3px;
  margin-top:7px;
  color:var(--text-3);
  font-size:8.5px;
  font-weight:680
}

.app-shell .repair-status-card:hover .repair-status-card__copy>span{
  color:var(--repair-status-color)
}

.app-shell .repair-dashboard-empty{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:11px;
  min-height:112px;
  padding:18px;
  color:var(--text-3)
}

.app-shell .repair-dashboard-empty>span{
  display:grid;
  width:38px;
  height:38px;
  flex:0 0 38px;
  place-items:center;
  border-radius:10px;
  background:var(--surface-2)
}

.app-shell .repair-dashboard-empty strong{
  display:block;
  color:var(--text-2);
  font-size:12px;
  font-weight:780
}

.app-shell .repair-dashboard-empty p{
  margin:3px 0 0;
  font-size:10.5px
}

.app-shell .repair-dashboard-empty.is-compact{
  min-height:150px
}

.app-shell .repair-dashboard-section-title{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  margin-top:2px
}

.app-shell .repair-dashboard-section-title span{
  display:block;
  color:var(--brand-strong);
  font-size:8.5px;
  font-weight:850;
  letter-spacing:.08em
}

.app-shell .repair-dashboard-section-title h2{
  margin:3px 0 0;
  color:var(--text);
  font-size:17px;
  font-weight:830;
  letter-spacing:-.2px
}

.app-shell .repair-dashboard-section-title p{
  margin:3px 0 0;
  color:var(--text-3);
  font-size:11px
}

.app-shell .repair-chart-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px
}

.app-shell .repair-bottom-grid{
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(310px,.75fr);
  gap:14px
}

.app-shell .repair-chart-card>header,.app-shell .repair-team-card>header{
  display:flex;
  min-height:66px;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-bottom:1px solid var(--border-2);
  background:var(--surface)
}

.app-shell .repair-chart-card>header>span{
  display:grid;
  width:35px;
  height:35px;
  flex:0 0 35px;
  place-items:center;
  border-radius:10px
}

.app-shell .repair-chart-card>header>span.is-blue{
  background:#eaf2ff;
  color:#2463c9
}

.app-shell .repair-chart-card>header>span.is-green{
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .repair-chart-card>header>span.is-amber{
  background:#fff1d8;
  color:#b56c00
}

.app-shell .repair-chart-card>header>div,.app-shell .repair-team-card>header>div{
  min-width:0;
  flex:1
}

.app-shell .repair-chart-card header h3,.app-shell .repair-team-card header h3{
  color:var(--text);
  font-size:12.5px;
  font-weight:810
}

.app-shell .repair-chart-card header p,.app-shell .repair-team-card header p{
  margin-top:2px;
  color:var(--text-3);
  font-size:9.5px
}

.app-shell .repair-chart-card header em{
  padding:3px 7px;
  border-radius:6px;
  background:var(--surface-2);
  color:var(--text-3);
  font-size:8.5px;
  font-style:normal;
  font-weight:820;
  letter-spacing:.03em;
  text-transform:uppercase
}

.app-shell .repair-chart-canvas{
  min-height:280px;
  padding:6px 9px 4px
}

.app-shell .repair-chart-canvas>div{
  width:100%!important;
  min-height:280px
}

.app-shell .repair-chart-card .highcharts-container,.app-shell .repair-chart-card .highcharts-root{
  width:100%!important
}

.app-shell .repair-team-list{
  padding:4px 14px
}

.app-shell .repair-team-row{
  display:grid;
  grid-template-columns:32px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  padding:10px 0
}

.app-shell .repair-team-row+.repair-team-row{
  border-top:1px solid var(--border-2)
}

.app-shell .repair-team-avatar{
  display:grid;
  width:32px;
  height:32px;
  place-items:center;
  border-radius:9px;
  background:var(--brand-weak);
  color:var(--brand-strong);
  font-size:9px;
  font-weight:850
}

.app-shell .repair-team-row>div{
  min-width:0
}

.app-shell .repair-team-row>div>strong{
  display:block;
  overflow:hidden;
  color:var(--text-2);
  font-size:10.5px;
  font-weight:740;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .repair-team-row>div>span{
  display:block;
  height:4px;
  margin-top:6px;
  overflow:hidden;
  border-radius:99px;
  background:var(--surface-3)
}

.app-shell .repair-team-row>div>span>i{
  display:block;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--brand),#64bd83)
}

.app-shell .repair-team-row>b{
  min-width:27px;
  color:var(--text);
  font-size:11.5px;
  font-weight:850;
  text-align:right;
  font-variant-numeric:tabular-nums
}

.app-shell .repair-team-link{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  margin:4px 14px 13px;
  padding:8px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface-2);
  color:var(--brand-strong);
  font-size:10.5px;
  font-weight:750;
  text-decoration:none
}

.app-shell .repair-team-link:hover{
  border-color:color-mix(in srgb,var(--brand) 28%,var(--border));
  background:var(--brand-weak);
  color:var(--brand-strong)
}

/* Repair job sheets: filterable workshop queue. */

.app-shell .repair-job-sheets-page{
  gap:14px
}

/* @show_tooltip emits a Font Awesome info marker and a Bootstrap popover, neither of
   which this stack ships. Draw the marker as a glyph and give the popover a shell, so
   every migrated screen that uses the directive keeps its help text. */

.app-shell i.fa-info-circle,.app-shell span.fa-info-circle{
  display:inline-grid;
  width:15px;
  height:15px;
  place-items:center;
  color:var(--text-3);
  font-style:normal;
  font-size:11px;
  font-weight:800;
  cursor:help;
  vertical-align:middle
}

.app-shell i.fa-info-circle::before{
  content:"\24D8"
}

.app-shell i.fa-info-circle:hover{
  color:var(--brand-strong)
}

.app-shell i.fa-info-circle:focus-visible{
  border-radius:50%;
  color:var(--brand-strong);
  outline:2px solid rgba(21,154,77,.28);
  outline-offset:2px
}

/* The marker belongs to the label, so it goes on the label's line. A field label is a block, which
   pushed the marker onto a line of its own between the label and the control — it read as a stray
   mark hanging over the field rather than as a hint about its name. Only a label that is actually
   followed by one is made inline; every other label keeps its own line. */

.app-shell .form-group>label:has(+i.fa-info-circle){
  display:inline-block;
  margin-right:5px;
  vertical-align:middle
}

.app-shell .form-group>label+i.fa-info-circle{
  margin-bottom:6px
}

body.app-ui .popover{
  position:absolute;
  z-index:100010;
  max-width:290px;
  padding:0;
  border:1px solid var(--border);
  border-radius:11px;
  background:var(--surface);
  box-shadow:0 18px 40px -18px rgba(16,32,24,.4);
  font-family:'Plus Jakarta Sans','Noto Sans Khmer',system-ui,sans-serif;
  font-size:11.5px;
  line-height:1.55
}

body.app-ui .popover .popover-title{
  padding:9px 11px;
  border-bottom:1px solid var(--border-2);
  border-radius:11px 11px 0 0;
  background:var(--surface-2);
  color:var(--text);
  font-size:11.5px;
  font-weight:800
}

body.app-ui .popover .popover-content{
  padding:10px 11px;
  color:var(--text-2)
}

body.app-ui .popover>.arrow{
  display:none
}

.app-shell .dt-return-flag{
  display:inline-grid;
  width:19px;
  height:19px;
  place-items:center;
  border:1px solid color-mix(in srgb,var(--danger) 26%,var(--border));
  border-radius:6px;
  background:var(--danger-weak);
  color:var(--danger);
  vertical-align:middle
}

.app-shell .dt-return-flag>.dt-action-icon{
  width:12px;
  height:12px
}

.app-shell .dt-notified-flag{
  display:inline-grid;
  width:19px;
  height:19px;
  place-items:center;
  border-radius:6px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .dt-notified-flag>.dt-action-icon{
  width:12px;
  height:12px
}

/* Status chips driven by the colour configured on the status record. The colour tints
   the fill and the border and is blended toward the text colour for the label, so the
   chip stays readable in both themes instead of white-on-arbitrary-colour. */

.app-shell .status-chip{
  display:inline-flex;
  align-items:center;
  padding:4px 11px;
  border:1px solid color-mix(in srgb,var(--chip-color,var(--brand)) 30%,transparent);
  border-radius:999px;
  background:color-mix(in srgb,var(--chip-color,var(--brand)) 15%,var(--surface));
  color:color-mix(in srgb,var(--chip-color,var(--brand)) 80%,var(--text));
  font-size:11.5px;
  font-weight:800;
  line-height:1.25;
  white-space:nowrap
}

/* A status chip inside a link opens the status dialog, so it has to feel clickable. */

.app-shell a>.status-chip,.app-shell .edit_repair_status,.app-shell .edit_job_sheet_status{
  cursor:pointer
}

.app-shell a>.status-chip{
  transition:border-color .15s ease,background .15s ease,box-shadow .15s ease,transform .15s ease
}

.app-shell a:hover>.status-chip{
  border-color:color-mix(in srgb,var(--chip-color,var(--brand)) 55%,transparent);
  background:color-mix(in srgb,var(--chip-color,var(--brand)) 24%,var(--surface));
  box-shadow:0 2px 6px -2px color-mix(in srgb,var(--chip-color,var(--brand)) 45%,transparent);
  transform:translateY(-1px)
}

.app-shell a:focus-visible>.status-chip{
  outline:2px solid var(--chip-color,var(--brand));
  outline-offset:2px
}

.app-shell a:active>.status-chip{
  transform:none
}

/* Bootstrap contextual labels (payment status) get one shared shape and palette instead
   of a per-page override. */

.app-shell .label{
  display:inline-flex;
  align-items:center;
  padding:4px 10px;
  border-radius:999px;
  border:1px solid transparent;
  font-size:11.5px;
  font-weight:800;
  line-height:1.25;
  white-space:nowrap
}

.app-shell .label.bg-light-green,.app-shell .label.bg-green{
  border-color:color-mix(in srgb,var(--brand) 26%,transparent);
  background:var(--brand-weak)!important;
  color:var(--brand-strong)
}

.app-shell .label.bg-red{
  border-color:color-mix(in srgb,var(--danger) 26%,transparent);
  background:var(--danger-weak)!important;
  color:var(--danger)
}

.app-shell .label.bg-yellow,.app-shell .label.bg-orange{
  border-color:color-mix(in srgb,#b56c00 26%,transparent);
  background:#fff1d8!important;
  color:#b56c00
}

.app-shell .label.bg-aqua,.app-shell .label.bg-info,.app-shell .label.bg-light-blue{
  border-color:color-mix(in srgb,#2463c9 26%,transparent);
  background:#eaf2ff!important;
  color:#2463c9
}

.app-shell .label.bg-gray{
  border-color:var(--border);
  background:var(--surface-2)!important;
  color:var(--text-3)
}

.app-shell .label.bg-primary{
  border-color:color-mix(in srgb,#2463c9 26%,transparent);
  background:#eaf2ff!important;
  color:#2463c9
}

.app-shell .label.bg-danger{
  border-color:color-mix(in srgb,var(--danger) 26%,transparent);
  background:var(--danger-weak)!important;
  color:var(--danger)
}

/* Which column a table is sorted by, and which way.
   The arrows came from the DataTables stylesheet that shipped with AdminLTE, which this stack does
   not load — so every header sorted on click and said nothing about it. Drawn as a pair of carets
   rather than typed as arrow characters: a glyph at this size renders at the mercy of whichever
   font happens to carry it, which is how they came out as specks. */

/* Both places a heading can be: in the table, or in the copy DataTables makes of it when the table
   scrolls — the copy answers to neither the table's id nor its classes. :is() is written here so
   the pair costs exactly what the single selector did; the arrows must not start out-ranking the
   per-listing rules that were written against the original. */

.app-shell :is(table.dataTable,.dataTables_scrollHead table) thead th.sorting,.app-shell :is(table.dataTable,.dataTables_scrollHead table) thead th.sorting_asc,.app-shell :is(table.dataTable,.dataTables_scrollHead table) thead th.sorting_desc{
  position:relative;
  padding-right:20px!important;
  cursor:pointer
}

.app-shell :is(table.dataTable,.dataTables_scrollHead table) thead th.sorting::before,.app-shell :is(table.dataTable,.dataTables_scrollHead table) thead th.sorting_asc::before,.app-shell :is(table.dataTable,.dataTables_scrollHead table) thead th.sorting_desc::before,.app-shell :is(table.dataTable,.dataTables_scrollHead table) thead th.sorting::after,.app-shell :is(table.dataTable,.dataTables_scrollHead table) thead th.sorting_asc::after,.app-shell :is(table.dataTable,.dataTables_scrollHead table) thead th.sorting_desc::after{
  content:'';
  position:absolute;
  right:7px;
  width:0;
  height:0;
  border-left:4px solid transparent;
  border-right:4px solid transparent;
  opacity:.3
}

.app-shell :is(table.dataTable,.dataTables_scrollHead table) thead th.sorting::before,.app-shell :is(table.dataTable,.dataTables_scrollHead table) thead th.sorting_asc::before,.app-shell :is(table.dataTable,.dataTables_scrollHead table) thead th.sorting_desc::before{
  top:calc(50% - 6px);
  border-bottom:5px solid currentColor
}

.app-shell :is(table.dataTable,.dataTables_scrollHead table) thead th.sorting::after,.app-shell :is(table.dataTable,.dataTables_scrollHead table) thead th.sorting_asc::after,.app-shell :is(table.dataTable,.dataTables_scrollHead table) thead th.sorting_desc::after{
  top:calc(50% + 1px);
  border-top:5px solid currentColor
}

.app-shell :is(table.dataTable,.dataTables_scrollHead table) thead th.sorting:hover::before,.app-shell :is(table.dataTable,.dataTables_scrollHead table) thead th.sorting:hover::after{
  opacity:.55
}

/* The direction in force is the only one that is lit. */

.app-shell :is(table.dataTable,.dataTables_scrollHead table) thead th.sorting_asc::before{
  border-bottom-color:var(--brand);
  opacity:1
}

.app-shell :is(table.dataTable,.dataTables_scrollHead table) thead th.sorting_desc::after{
  border-top-color:var(--brand);
  opacity:1
}

.app-shell :is(table.dataTable,.dataTables_scrollHead table) thead th.sorting_disabled::before,.app-shell :is(table.dataTable,.dataTables_scrollHead table) thead th.sorting_disabled::after{
  content:none
}

/* The header printed twice on a scrolling table. A DataTable with scrolling on splits in two: the
   labels you read live in their own table inside .dataTables_scrollHead, and the scrolling table
   below keeps a second copy of the header purely to carry the column widths. DataTables collapses
   that copy by wrapping each label in a zero-height .dataTables_sizing box — but the cell around it
   still takes header padding, and the carets are positioned against the cell rather than its
   contents, so the copy came out as a second header row of bare arrows. These are the rules
   DataTables ships for this, which this stack never loads. The cells stay in the layout — reporting
   a width is their whole purpose — they just stop taking height and stop drawing sort marks.
   Named down to the table's own class, not because the row needs finding twice, but because the
   caret rules above already carry three classes: a shorter selector loses to them and the arrows
   stay. */

.app-shell div.dataTables_scrollBody>table.dataTable>thead>tr>th,.app-shell div.dataTables_scrollBody>table.dataTable>thead>tr>td{
  height:0;
  padding-top:0!important;
  padding-bottom:0!important;
  border-top-width:0!important;
  border-bottom-width:0!important;
  line-height:0
}

.app-shell div.dataTables_scrollBody>table.dataTable>thead .dataTables_sizing{
  height:0;
  margin:0;
  padding:0!important;
  overflow:hidden
}

.app-shell div.dataTables_scrollBody>table.dataTable>thead>tr>th::before,.app-shell div.dataTables_scrollBody>table.dataTable>thead>tr>th::after{
  content:none
}

/* A row at or below its alert quantity.
   It was filled with solid danger, and on a catalogue where low stock is common that painted half
   the table red — a warning everywhere is a warning nowhere, and the dark ink it left on top was
   unreadable besides. The row is tinted instead, marked down its edge, and the number that is
   actually wrong — the stock — carries the colour. */

.app-shell table.dataTable tbody tr.bg-danger>td,.app-shell tr.bg-danger>td{
  background-color:color-mix(in srgb,var(--danger) 9%,var(--surface))!important;
  color:var(--text)!important
}

.app-shell table.dataTable tbody tr.bg-danger:hover>td,.app-shell tr.bg-danger:hover>td{
  background-color:color-mix(in srgb,var(--danger) 15%,var(--surface))!important
}

.app-shell tr.bg-danger>td:first-child{
  box-shadow:inset 3px 0 0 var(--danger)
}

/* The figure that put the row in this state, and only it. */

.app-shell tr.bg-danger>td .current_stock,.app-shell tr.bg-danger>td .stock_value_by_purchase_price{
  color:var(--danger)!important;
  font-weight:750
}

.app-shell .label.bg-lightgray{
  border-color:var(--border);
  background:var(--surface-2)!important;
  color:var(--text-3)
}

/* Inline "send on Telegram" button under a person's name in a datatable cell. */

.app-shell .asset-inline-action{
  display:inline-flex;
  align-items:center;
  gap:5px;
  white-space:nowrap;
  margin-top:4px;
  padding:3px 9px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--surface);
  color:var(--text-2);
  font-size:10.5px;
  font-weight:600;
  cursor:pointer
}

.app-shell .asset-inline-action>svg{
  width:12px;
  height:12px;
  color:var(--brand-strong)
}

.app-shell .asset-inline-action:hover{
  border-color:color-mix(in srgb,var(--brand) 35%,transparent);
  background:var(--brand-weak);
  color:var(--brand-strong)
}

/* The code under the name it belongs to: quieter than the name, and on its own line. */

.app-shell .asset-cell-code{
  display:block;
  margin-top:2px;
  color:var(--text-3);
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.02em
}

/* Print-only duplicates of interactive cells must not show on screen: without this the
   payment status printed its label twice ("Paid Paid"). */

body.app-ui .print_section{
  display:none!important
}

@media print{
  body.app-ui .print_section{
    display:inline!important
  }

  body.app-ui .no-print{
    display:none!important
  }
}

/* Printing happens on the page now, not in an iframe — phones will not print an iframe at all.
   The copy to be printed is staged in this portal, held off-screen until the dialog opens. */

#app-print-portal{
  position:absolute;
  top:0;
  left:-100000px;
  width:900px
}

@media print{
  body.app-ui.is-printing>*:not(#app-print-portal){
    display:none!important
  }

  /*
   * The portal keeps a document width of its own rather than taking the sheet's.
   *
   * It used to be released to `width:auto`, which on a desktop is harmless — the sheet is wider
   * than the document needs — but on a phone means the document lays itself out at the width of
   * the paper. A five-column table given 320 points of paper crushes every column to fit: headings
   * broke mid-word into "UNIT VALU E", figures into "$ 187.0 0", and the last column ran off the
   * sheet anyway.
   *
   * Held at 900px it lays out exactly as it does on a desktop and the print engine scales that
   * down to whatever paper it is going to, which is the same document at a smaller size rather
   * than a different one.
   */

  /*
   * The document is measured in millimetres, against the paper it is going onto.
   *
   * A width in pixels only works if the print engine scales it, and whether it does is the
   * engine's decision: a desktop shrinks 900px to fit the sheet, iOS lays it out and crops what
   * does not fit. Every version of this sized in px has come out differently on the phone than on
   * the desk for that reason alone.
   *
   * 182mm is A4 portrait less the 14mm margins the stylesheet's one `@page` already declares, so
   * the document is exactly the printable width by construction and no scaling has to happen at
   * all. What fits, fits — on either device.
   *
   * It is sized to that page rather than declaring one of its own: `@page` is global, not scoped
   * to a selector, so a second one here would quietly re-margin every other printed document in
   * the application to suit this one.
   */

  body.app-ui.is-printing #app-print-portal{
    position:static!important;
    left:auto!important;
    width:182mm!important;
    max-width:182mm!important;
    margin:0 auto!important
  }

  /* The staged wrapper is only there to carry the design system's scope; it must not also carry
     the full-height flex layout the real one uses. */

  body.app-ui.is-printing #app-print-portal .app-shell{
    display:block!important;
    height:auto!important;
    overflow:visible!important
  }

  /* Most print buttons hand over a modal or its content, which is positioned, size-capped and
     scrolled — printed as-is that clips the document to one screen. */

  body.app-ui.is-printing #app-print-portal .modal,
  body.app-ui.is-printing #app-print-portal .modal-dialog,
  body.app-ui.is-printing #app-print-portal .modal-content{
    position:static!important;
    display:block!important;
    width:auto!important;
    max-width:none!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
    overflow:visible!important
  }

  body.app-ui.is-printing #app-print-portal .modal-body{
    max-height:none!important;
    overflow:visible!important
  }

  /*
   * Safari lightens colours when it prints unless it is told not to — its way of saving ink. On a
   * phone that turned every muted label on the document into a pale grey barely darker than the
   * paper, while the same document off a desktop printed them solid.
   */

  body.app-ui.is-printing,
  body.app-ui.is-printing #app-print-portal,
  body.app-ui.is-printing #app-print-portal *{
    -webkit-print-color-adjust:exact!important;
    print-color-adjust:exact!important
  }

  /*
   * The printed copy is always the light palette. What comes out of the printer should not depend
   * on which theme the person printing happens to be using, and a document built from tokens will
   * otherwise print in whichever one is on. The muted greys are taken a step darker than they are
   * on screen: a tone that reads as secondary on a lit display reads as faded on paper.
   */

  body.app-ui.is-printing #app-print-portal{
    --bg:#ffffff;
    --surface:#ffffff;
    --surface-2:#ffffff;
    --surface-3:#ffffff;
    --border:#c8d1cb;
    --border-2:#dbe2dd;
    --text:#101a14;
    --text-2:#3f4a44;
    --text-3:#5f6a63;
    --brand:#0e7a3c;
    --brand-strong:#0b5a2c;
    --brand-weak:#eef7f1;
    --brand-ink:#0b5a2c;
    --danger:#b52c2b;
    --danger-weak:#fbeaea;
    --warn:#9a5f10;
    --warn-weak:#fbf2e3;
    --blue:#2560b4;
    --blue-weak:#eaf1fc;
    color:#101a14;
  }

  /*
   * A scroller shows what fits and clips the rest, and paper cannot scroll. On a desktop the
   * staged copy is 900px wide and the table fits inside it, so nothing was ever clipped; on a
   * phone the page is narrower than the table and the last column was simply cut off the sheet.
   */

  body.app-ui.is-printing #app-print-portal .overflow-x-auto,
  body.app-ui.is-printing #app-print-portal .overflow-auto,
  body.app-ui.is-printing #app-print-portal [data-table-scroller],
  body.app-ui.is-printing #app-print-portal .table-scroll-frame,
  body.app-ui.is-printing #app-print-portal .dataTables_scroll,
  body.app-ui.is-printing #app-print-portal .dataTables_scrollBody,
  body.app-ui.is-printing #app-print-portal .dataTables_scrollHead,
  body.app-ui.is-printing #app-print-portal .dataTables_wrapper{
    overflow:visible!important;
    max-width:none!important
  }

  /* Those arrows are how a wide table is scrolled on screen. On paper they are two circles
     sitting over the first row of it. */

  body.app-ui.is-printing #app-print-portal .table-scroll-arrows,
  body.app-ui.is-printing #app-print-portal .table-scroll-arrow{
    display:none!important
  }

  /*
   * Released from its scroller the table fills the document's 900px rather than holding whatever
   * width the screen gave it.
   *
   * `white-space:normal` is here so a long product name wraps onto a second line instead of
   * holding its column open — `nowrap` is what keeps scrolled columns on one line on screen, and
   * on paper there is nothing to scroll. It is deliberately not paired with breaking inside
   * words: that is what turned "$187.00" into "$ 187.0 0" when the columns were being crushed.
   * At 900px no column is tight enough to need it.
   */

  /*
   * The document's own cards clip what overflows them. The scrollers above are not the only thing
   * that hides a wide table on paper — `.return-detail-lines` is `overflow:hidden` to keep its
   * rounded corners, and that is what was quietly cutting the last column off at the card edge.
   */

  body.app-ui.is-printing #app-print-portal .return-detail-lines,
  body.app-ui.is-printing #app-print-portal .return-detail-activities{
    overflow:visible!important
  }

  body.app-ui.is-printing #app-print-portal table{
    width:100%!important;
    min-width:0!important;
    table-layout:auto!important
  }

  /*
   * Only the name is allowed to break.
   *
   * A blanket `white-space:normal` on every cell let the figures wrap too — and a subtotal split
   * across two lines is worse than a name that takes three. So the figures keep the one-line rule
   * the stylesheet gives them, headings may wrap because they are short, and the product name —
   * the one cell with width to give — wraps into as many lines as it needs. Everything it gives
   * up goes to the columns that had none.
   */

  body.app-ui.is-printing #app-print-portal table td{
    white-space:nowrap
  }

  body.app-ui.is-printing #app-print-portal table th{
    white-space:normal!important
  }

  body.app-ui.is-printing #app-print-portal .return-detail-product,
  body.app-ui.is-printing #app-print-portal .return-detail-product strong{
    display:block!important;
    white-space:normal!important
  }

  /*
   * The lines table is laid out to fixed proportions rather than to its content.
   *
   * `table-layout:auto` asks each column what it would like and only compresses when it has to —
   * and a product name it is permitted to wrap still *prefers* one line, so the name column kept
   * taking the width and the table stayed wider than the document. Wider than the document means
   * the print engine crops the sheet rather than scaling it, which is how the page ended up cut
   * down both edges rather than only the right.
   *
   * Fixed proportions take the question away: the columns are exactly these widths, the figures
   * have more room than they need on their one line, and the name wraps into whatever is left.
   */

  body.app-ui.is-printing #app-print-portal .return-detail-lines table{
    table-layout:fixed!important
  }

  body.app-ui.is-printing #app-print-portal .return-detail-lines table th:nth-child(1){
    width:5%
  }

  body.app-ui.is-printing #app-print-portal .return-detail-lines table th:nth-child(2){
    width:43%
  }

  body.app-ui.is-printing #app-print-portal .return-detail-lines table th:nth-child(3){
    width:16%
  }

  body.app-ui.is-printing #app-print-portal .return-detail-lines table th:nth-child(4){
    width:18%
  }

  body.app-ui.is-printing #app-print-portal .return-detail-lines table th:nth-child(5){
    width:18%
  }

  /*
   * `white-space:normal` alone does not let a name wrap when it sits in a flex row: a flex item's
   * automatic minimum size is its min-content, so the cell holds the width of the longest name on
   * the document however much the table is squeezed. That is what kept the product column at full
   * width and pushed Subtotal off the right of the sheet.
   */

  body.app-ui.is-printing #app-print-portal table td>*{
    min-width:0
  }

  /*
   * The product cell is an icon tile beside a name. On screen the tile carries the row; on paper
   * it is decoration costing 44px of a column that has none to spare, so it goes and the name
   * takes the whole cell and wraps onto as many lines as it needs.
   */

  body.app-ui.is-printing #app-print-portal .return-detail-product{
    display:block!important
  }

  body.app-ui.is-printing #app-print-portal .return-detail-product>span{
    display:none!important
  }

  /* Nothing here hides the modal's header or footer: the call sites that do not want theirs
     printed already mark them .no-print, and hiding them wholesale would drop titles that print
     today. */
}

/* Credit note receipt (sell return), printed from #receipt_section. */

body.app-ui .sell-return-receipt{
  color:#111;
  font-size:12.5px;
  line-height:1.5
}

body.app-ui .sell-return-receipt img{
  max-width:100%;
  height:auto
}

body.app-ui .sell-return-receipt p{
  margin:0 0 6px
}

body.app-ui .sell-return-receipt table{
  width:100%;
  border-collapse:collapse
}

body.app-ui .sell-return-receipt table.table th,body.app-ui .sell-return-receipt table.table td{
  padding:7px 9px;
  border:0;
  vertical-align:top
}

/* Line table: the header and the grand total were filled with AdminLTE blue through inline
   styles, which prints as a heavy band. A rule and weight carry the same emphasis. */

body.app-ui .sell-return-receipt .credit-note-lines{
  margin-top:4px
}

body.app-ui .sell-return-receipt .credit-note-lines thead td{
  border-bottom:1.4px solid #111;
  color:#111;
  font-size:12px;
  font-weight:800;
  letter-spacing:.02em;
  text-transform:uppercase;
  white-space:nowrap
}

body.app-ui .sell-return-receipt .credit-note-lines tbody td{
  border-bottom:1px solid #e2e6e4;
  font-size:12px
}

body.app-ui .sell-return-receipt .credit-note-lines tbody tr:last-child td{
  border-bottom:0
}

body.app-ui .sell-return-receipt .credit-note-col-no{
  width:6%;
  text-align:center
}

body.app-ui .sell-return-receipt .credit-note-col-product{
  width:46%;
  text-align:left
}

body.app-ui .sell-return-receipt .credit-note-col-code{
  width:12%;
  text-align:left
}

body.app-ui .sell-return-receipt .credit-note-col-num{
  width:14%;
  text-align:right;
  white-space:nowrap;
  font-variant-numeric:tabular-nums
}

body.app-ui .sell-return-receipt .credit-note-lines tbody td:first-child{
  text-align:center
}

body.app-ui .sell-return-receipt .credit-note-lines tbody td:not(:first-child):not(:nth-child(2)){
  text-align:right;
  font-variant-numeric:tabular-nums
}

/* Totals: labels left, figures right, the payable line closed with a double rule. */

body.app-ui .sell-return-receipt .credit-note-totals{
  width:100%;
  margin-top:2px
}

body.app-ui .sell-return-receipt .credit-note-totals td,body.app-ui .sell-return-receipt .credit-note-totals th{
  padding:6px 9px;
  border:0;
  font-size:12.5px;
  text-align:left
}

body.app-ui .sell-return-receipt .credit-note-totals td.text-right{
  text-align:right;
  font-variant-numeric:tabular-nums
}

body.app-ui .sell-return-receipt .credit-note-grand-total>th,body.app-ui .sell-return-receipt .credit-note-grand-total>td{
  padding-top:9px;
  border-top:1.4px solid #111;
  color:#111;
  font-size:14px;
  font-weight:850
}

body.app-ui .sell-return-receipt .credit-note-due{
  margin-top:8px;
  padding:7px 9px;
  border-top:1px solid #111;
  border-bottom:1px solid #111;
  font-size:14px;
  font-weight:850
}

body.app-ui .sell-return-receipt .credit-note-due:after{
  content:"";
  display:table;
  clear:both
}

/* Signature: a line to sign on rather than a bare label. */

body.app-ui .sell-return-receipt .credit-note-signature{
  margin-top:26px;
  max-width:260px
}

body.app-ui .sell-return-receipt .credit-note-signline{
  display:block;
  height:42px;
  margin-bottom:5px;
  border-bottom:1px solid #111
}

body.app-ui .sell-return-receipt .credit-note-signature b{
  font-size:12px
}

body.app-ui .sell-return-receipt .text-right{
  text-align:right
}

body.app-ui .sell-return-receipt hr{
  margin:10px 0;
  border:0;
  border-top:1px solid #d7dbd9
}

@media print{
  body.app-ui .sell-return-receipt *{
    -webkit-print-color-adjust:exact;
    print-color-adjust:exact
  }

  body.app-ui .sell-return-receipt tr{
    page-break-inside:avoid
  }
}

/* Repair customer copy receipt. It is printed from #receipt_section, so the rules are
   scoped to the receipt's own wrapper and apply on screen and on paper alike. */

body.app-ui .repair-customer-copy{
  color:#111;
  font-size:12.5px;
  line-height:1.5
}

body.app-ui .repair-customer-copy img{
  max-width:100%;
  height:auto
}

body.app-ui .repair-customer-copy h2{
  margin:6px 0 2px;
  font-size:17px;
  font-weight:800
}

body.app-ui .repair-customer-copy h3{
  margin:10px 0 6px;
  font-size:14px;
  font-weight:800
}

body.app-ui .repair-customer-copy p{
  margin:0 0 6px
}

body.app-ui .repair-customer-copy .row{
  display:block
}

body.app-ui .repair-customer-copy .row:after{
  content:"";
  display:table;
  clear:both
}

/* Keep the ruling minimal: one line under the item column headers and one above the
   grand total. Bordering every cell produced ragged part-width strokes, because the
   payment and totals tables have fewer columns than the item table. */

body.app-ui .repair-customer-copy table{
  width:100%;
  margin:8px 0 0;
  border-collapse:collapse;
  font-size:12px
}

body.app-ui .repair-customer-copy table th,body.app-ui .repair-customer-copy table td{
  padding:6px 8px;
  border:0;
  vertical-align:top
}

body.app-ui .repair-customer-copy table thead th{
  border-bottom:1px solid #111;
  font-weight:800;
  text-align:left
}

body.app-ui .repair-customer-copy table tbody th{
  font-weight:700;
  text-align:left
}

/* Only the summary tables close with a rule; the item table ends with its last line. */

body.app-ui .repair-customer-copy table:not(:has(thead)) tr:last-child>th,body.app-ui .repair-customer-copy table:not(:has(thead)) tr:last-child>td{
  border-top:1px solid #111;
  font-weight:800
}

body.app-ui .repair-customer-copy table .text-right{
  text-align:right;
  white-space:nowrap;
  font-variant-numeric:tabular-nums
}

body.app-ui .repair-customer-copy table thead th:not(:first-child),
body.app-ui .repair-customer-copy table tbody td:not(:first-child):not(:nth-child(2)){
  text-align:right;
  white-space:nowrap;
  font-variant-numeric:tabular-nums
}

body.app-ui .repair-customer-copy hr{
  margin:10px 0;
  border:0;
  border-top:1px solid #d7dbd9
}

body.app-ui .repair-customer-copy .pull-left{
  float:left;
  max-width:52%
}

body.app-ui .repair-customer-copy .pull-right{
  float:right;
  max-width:46%;
  text-align:left
}

body.app-ui .repair-customer-copy .text-center{
  text-align:center
}

body.app-ui .repair-customer-copy small{
  font-size:11px
}

@media print{
  body.app-ui .repair-customer-copy{
    font-size:12px
  }

  body.app-ui .repair-customer-copy *{
    -webkit-print-color-adjust:exact;
    print-color-adjust:exact
  }

  body.app-ui .repair-customer-copy table{
    page-break-inside:auto
  }

  body.app-ui .repair-customer-copy tr{
    page-break-inside:avoid
  }
}

/* Upload document dialog: current file / empty-state banner. */

.app-shell .repair-upload-current,.app-shell .repair-upload-empty{
  display:flex;
  align-items:center;
  gap:11px;
  margin-bottom:13px;
  padding:11px 13px;
  border:1px solid var(--border-2);
  border-radius:11px;
  background:var(--surface-2)
}

.app-shell .repair-upload-current>span,.app-shell .repair-upload-empty>span{
  display:grid;
  width:34px;
  height:34px;
  flex:0 0 34px;
  place-items:center;
  border-radius:10px;
  background:var(--surface);
  color:var(--brand-strong)
}

.app-shell .repair-upload-current>div,.app-shell .repair-upload-empty>div{
  flex:1 1 auto;
  min-width:0
}

.app-shell .repair-upload-current strong,.app-shell .repair-upload-empty strong{
  display:block;
  color:var(--text);
  font-size:12.5px;
  font-weight:800
}

.app-shell .repair-upload-current small,.app-shell .repair-upload-empty small{
  display:block;
  margin-top:2px;
  color:var(--text-3);
  font-size:11.5px;
  overflow-wrap:anywhere
}

.app-shell .repair-upload-current .btn-ghost{
  flex:0 0 auto;
  height:36px;
  padding:0 12px;
  border-radius:9px;
  font-size:11.5px;
  font-weight:750
}

.app-shell .repair-upload-empty{
  border-color:color-mix(in srgb,var(--brand) 24%,var(--border));
  background:var(--brand-weak)
}

.app-shell .repair-upload-empty>span{
  color:var(--brand-strong)
}

/* Sell return form */

.app-shell .sell-return-form-page{
  display:flex;
  flex-direction:column;
  gap:13px
}

/* The two cards and the action bar live inside the form element, so the page-level gap
   never applied between them. */

.app-shell #sell_return_form{
  display:flex;
  flex-direction:column;
  gap:13px
}

.app-shell .sell-return-parent,.app-shell .sell-return-card{
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

.app-shell .sell-return-parent-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:1px;
  background:var(--border-2)
}

.app-shell .sell-return-parent-grid>div{
  display:flex;
  flex-direction:column;
  gap:3px;
  padding:12px 14px;
  background:var(--surface)
}

.app-shell .sell-return-parent-grid span{
  color:var(--text-3);
  font-size:10px;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase
}

.app-shell .sell-return-parent-grid strong{
  color:var(--text);
  font-size:13.5px;
  font-weight:750;
  overflow-wrap:anywhere
}

.app-shell .sell-return-body{
  padding:14px
}

.app-shell .sell-return-meta{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:12px;
  margin-bottom:13px
}

.app-shell .sell-return-meta .form-control,.app-shell .sell-return-meta .finput{
  height:42px;
  border-radius:9px;
  font-size:13.5px
}

.app-shell .sell-return-table-wrap{
  overflow-x:auto;
  border:1px solid var(--border-2);
  border-radius:12px
}

.app-shell .sell-return-table{
  width:100%;
  min-width:720px;
  margin:0!important;
  border-collapse:separate!important;
  border-spacing:0;
  font-variant-numeric:tabular-nums
}

.app-shell .sell-return-table thead th{
  padding:10px 12px!important;
  border:0!important;
  border-bottom:1px solid var(--border-2)!important;
  background:var(--surface-2)!important;
  color:var(--text-3)!important;
  font-size:10.5px;
  font-weight:850;
  letter-spacing:.03em;
  text-transform:uppercase;
  white-space:nowrap
}

.app-shell .sell-return-table tbody td{
  padding:11px 12px!important;
  border:0!important;
  border-bottom:1px solid var(--border-2)!important;
  background:var(--surface)!important;
  color:var(--text-2);
  font-size:13px;
  vertical-align:middle
}

.app-shell .sell-return-table tbody tr:last-child td{
  border-bottom:0!important
}

.app-shell .sell-return-table th:first-child,.app-shell .sell-return-table td:first-child{
  width:46px;
  color:var(--text-3);
  text-align:center
}

.app-shell .sell-return-table th:nth-child(3),.app-shell .sell-return-table td:nth-child(3),
.app-shell .sell-return-table th:nth-child(4),.app-shell .sell-return-table td:nth-child(4),
.app-shell .sell-return-table th:last-child,.app-shell .sell-return-table td:last-child{
  text-align:right;
  white-space:nowrap
}

.app-shell .sell-return-table td:last-child{
  color:var(--text);
  font-weight:800
}

.app-shell .sell-return-product strong{
  display:block;
  color:var(--text);
  font-size:13px;
  font-weight:700
}

.app-shell .sell-return-product small{
  display:block;
  margin-top:2px;
  color:var(--text-3);
  font-size:11.5px
}

.app-shell .sell-return-qty{
  display:flex;
  align-items:center;
  gap:7px;
  justify-content:flex-end
}

.app-shell .sell-return-qty .form-control{
  width:110px;
  height:38px;
  border-radius:9px;
  font-size:13px;
  text-align:right
}

.app-shell .sell-return-qty>span{
  flex:0 0 auto;
  color:var(--text-3);
  font-size:11.5px;
  font-weight:750
}

.app-shell .sell-return-adjust{
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(260px,.6fr);
  gap:14px;
  margin-top:14px
}

.app-shell .sell-return-adjust-fields{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  align-content:start
}

.app-shell .sell-return-adjust-fields .is-wide{
  grid-column:1/-1
}

.app-shell .sell-return-adjust-fields .form-control,.app-shell .sell-return-adjust-fields .select2-selection{
  min-height:42px;
  border-radius:9px;
  font-size:13.5px
}

.app-shell .sell-return-adjust-fields textarea.form-control{
  height:auto;
  padding:10px 12px;
  line-height:1.5
}

.app-shell .sell-return-totals{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px 14px;
  margin:0;
  padding:13px 14px;
  border:1px solid var(--border-2);
  border-radius:12px;
  background:var(--surface-2);
  align-content:start
}

.app-shell .sell-return-totals dt{
  color:var(--text-2);
  font-size:12px;
  font-weight:650
}

.app-shell .sell-return-totals dt small{
  color:var(--text-3);
  font-weight:600
}

.app-shell .sell-return-totals dd{
  margin:0;
  color:var(--text);
  font-size:13px;
  font-weight:750;
  font-variant-numeric:tabular-nums;
  text-align:right
}

.app-shell .sell-return-totals dt.is-total,.app-shell .sell-return-totals dd.is-total{
  padding-top:9px;
  border-top:1px solid var(--border);
  color:var(--text);
  font-size:15px;
  font-weight:850
}

@media(max-width:900px){
  .app-shell .sell-return-adjust{
    grid-template-columns:1fr
  }

  .app-shell .sell-return-adjust-fields{
    grid-template-columns:1fr
  }
}

/* Repair settings */

.app-shell .repair-settings-shell{
  padding:0!important
}

.app-shell .repair-settings-page .nav-tabs-custom{
  margin:0;
  overflow:visible;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

.app-shell .repair-settings-page .repair-job-tabs{
  padding:8px 8px 0
}

/* Rounded only where the strip really is the top of its card.

   The strip paints its own square background, so at the top of a card it has to repeat the card's
   corners or it squares them off. Below a section heading — which is where the repair listings put
   it — it is an edge in the middle of a card, and a curve there leaves the card showing through
   behind the corner: a second edge, next to the heading's straight one. The tab's own fill carries
   13px, the card's 14px less the 1px border it sits inside, so it follows the same curve the card
   clips it to instead of leaving a pale wedge. */

.app-shell .nav-tabs-custom:first-child>.repair-job-tabs,.app-shell .nav-tabs-custom:first-child>.section-tabs{
  border-top-left-radius:14px;
  border-top-right-radius:14px
}

.app-shell .nav-tabs-custom:first-child>.repair-job-tabs>a:first-child,.app-shell .nav-tabs-custom:first-child>.section-tabs>a:first-child{
  border-top-left-radius:13px
}

.app-shell .nav-tabs-custom:first-child>.repair-job-tabs>a:last-child,.app-shell .nav-tabs-custom:first-child>.section-tabs>a:last-child{
  border-top-right-radius:13px
}

.app-shell .repair-settings-page .repair-job-tab-content{
  padding:14px
}

/* The settings tables use the shared data-table card, so the toolbar owns search, page
   size and exports; DataTables' own controls are off. */

.app-shell .repair-settings-data-card{
  margin:0!important;
  overflow:visible!important;
  border:1px solid var(--border-2)!important;
  border-radius:12px!important;
  box-shadow:none!important
}

.app-shell .repair-settings-data-card .table-toolbar{
  min-height:60px;
  border-bottom:1px solid var(--border-2);
  background:var(--surface);
  border-radius:12px 12px 0 0
}

.app-shell .repair-settings-data-card .table-toolbar-search{
  width:min(320px,42vw)
}

.app-shell .repair-settings-data-card .table-toolbar-search .finput{
  height:40px;
  font-size:13px
}

.app-shell .repair-settings-data-card .data-table-footer{
  padding:4px 6px
}

.app-shell .repair-settings-data-card .dataTables_info{
  font-size:12.5px
}

/* Status dialog: colour swatch beside the value, and the notification templates folded
   away because most workshops never send them. */

.app-shell .repair-status-dialog-form{
  width:min(94vw,620px)
}

.app-shell .repair-status-color-field{
  position:relative;
  display:flex;
  align-items:center
}

.app-shell .repair-status-color-field .form-control{
  padding-left:40px;
  font-variant-numeric:tabular-nums
}

.app-shell .repair-status-color-preview{
  position:absolute;
  left:11px;
  width:20px;
  height:20px;
  border:1px solid color-mix(in srgb,var(--text) 16%,transparent);
  border-radius:6px;
  background:var(--surface-3,var(--surface-2));
  pointer-events:none
}

.app-shell .repair-status-templates{
  margin-top:4px;
  overflow:hidden;
  border:1px solid var(--border-2);
  border-radius:11px;
  background:var(--surface-2)
}

.app-shell .repair-status-templates>summary{
  display:flex;
  min-height:44px;
  align-items:center;
  gap:9px;
  padding:0 13px;
  color:var(--text);
  cursor:pointer;
  list-style:none
}

.app-shell .repair-status-templates>summary::-webkit-details-marker{
  display:none
}

.app-shell .repair-status-templates>summary>svg{
  flex:0 0 auto;
  color:var(--brand-strong)
}

.app-shell .repair-status-templates>summary strong{
  flex:1 1 auto;
  font-size:12.5px;
  font-weight:800
}

.app-shell .repair-status-templates>summary small{
  color:var(--text-3);
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em
}

.app-shell .repair-status-templates>summary::after{
  content:"";
  width:6px;
  height:6px;
  flex:0 0 6px;
  border-right:1.6px solid var(--text-3);
  border-bottom:1.6px solid var(--text-3);
  transform:rotate(45deg) translateY(-2px);
  transition:transform .15s ease
}

.app-shell .repair-status-templates[open]>summary{
  border-bottom:1px solid var(--border-2);
  background:var(--surface)
}

.app-shell .repair-status-templates[open]>summary::after{
  transform:rotate(225deg) translateY(-1px)
}

.app-shell .repair-status-templates .row{
  margin:0;
  padding:12px 13px 2px;
  background:var(--surface)
}

.app-shell .repair-status-templates .help-block label{
  display:block;
  margin:0 0 3px;
  color:var(--text-2);
  font-size:11px;
  font-weight:750
}

/* Taxonomy list (Devices tab, product categories, CRM categories) */

.app-shell .taxonomy-toolbar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:13px
}

.app-shell .taxonomy-toolbar strong{
  display:block;
  color:var(--text);
  font-size:13.5px;
  font-weight:820
}

.app-shell .taxonomy-toolbar small{
  display:block;
  margin-top:2px;
  color:var(--text-3);
  font-size:12px
}

.app-shell .taxonomy-toolbar .btn-primary{
  height:40px;
  padding:0 15px;
  border-radius:10px;
  font-size:13px;
  font-weight:750
}

/* A long description used to make its row six lines tall. */

.app-shell .taxonomy-description{
  display:-webkit-box;
  max-width:520px;
  overflow:hidden;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  line-clamp:2;
  color:var(--text-2)
}

.app-shell .taxonomy-empty{
  color:var(--text-3);
  font-weight:600
}

.app-shell .taxonomy-table tbody td{
  vertical-align:middle
}

/* Tabs: keyboard focus should read as ours, not the browser's blue box. */

.app-shell .repair-job-tabs>a:focus,.app-shell .section-tabs>a:focus{
  outline:0
}

.app-shell .repair-job-tabs>a:focus-visible,.app-shell .section-tabs>a:focus-visible{
  outline:0;
  box-shadow:0 0 0 3px var(--brand-weak);
  border-color:var(--brand)
}

.app-shell .repair-settings-toolbar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:13px
}

.app-shell .repair-settings-toolbar strong{
  display:block;
  color:var(--text);
  font-size:13.5px;
  font-weight:820
}

.app-shell .repair-settings-toolbar small{
  display:block;
  margin-top:2px;
  color:var(--text-3);
  font-size:12px
}

.app-shell .repair-settings-toolbar .btn-primary{
  height:40px;
  padding:0 15px;
  border-radius:10px;
  font-size:13px;
  font-weight:750
}

.app-shell .repair-settings-table-wrap{
  overflow-x:auto
}

.app-shell .repair-settings-table{
  width:100%!important;
  margin:0!important;
  border-collapse:separate!important;
  border-spacing:0
}

.app-shell .repair-settings-table thead th{
  padding:10px 12px!important;
  border:0!important;
  border-bottom:1px solid var(--border-2)!important;
  background:var(--surface-2)!important;
  color:var(--text-3)!important;
  font-size:11px;
  font-weight:850;
  letter-spacing:.03em;
  text-transform:uppercase;
  white-space:nowrap
}

.app-shell .repair-settings-table tbody td{
  padding:11px 12px!important;
  border:0!important;
  border-bottom:1px solid var(--border-2)!important;
  background:var(--surface)!important;
  color:var(--text-2);
  font-size:13px;
  vertical-align:middle
}

.app-shell .repair-settings-table tbody tr:last-child td{
  border-bottom:0!important
}

.app-shell .repair-settings-table tbody tr:hover td{
  background:color-mix(in srgb,var(--brand-weak) 26%,var(--surface))!important
}

.app-shell .repair-status-name{
  color:var(--text);
  font-weight:700
}

.app-shell .repair-status-complete{
  display:inline-grid;
  width:18px;
  height:18px;
  margin-left:6px;
  place-items:center;
  color:var(--brand-strong);
  vertical-align:-4px
}

.app-shell .repair-status-complete svg{
  width:15px;
  height:15px
}

.app-shell .repair-status-swatch{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-variant-numeric:tabular-nums
}

.app-shell .repair-status-swatch>i{
  width:14px;
  height:14px;
  flex:none;
  border:1px solid color-mix(in srgb,var(--text) 14%,transparent);
  border-radius:5px
}

.app-shell .repair-settings-row-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px
}

.app-shell .repair-settings-row-actions .act{
  display:inline-grid;
  width:32px;
  height:32px;
  place-items:center;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface);
  color:var(--text-2);
  cursor:pointer;
  transition:border-color .15s,background .15s,color .15s
}

.app-shell .repair-settings-row-actions .act svg{
  width:15px;
  height:15px;
  pointer-events:none
}

.app-shell .repair-settings-row-actions .act:hover{
  border-color:color-mix(in srgb,var(--brand) 38%,var(--border));
  background:var(--brand-weak);
  color:var(--brand-strong)
}

/* Settings forms: labelled fields, addon icons and one primary action per tab. */

.app-shell .repair-settings-page .form-group>label{
  display:block;
  margin-bottom:6px;
  color:var(--text-2);
  font-size:12.5px;
  font-weight:750
}

.app-shell .repair-settings-page .form-control,.app-shell .repair-settings-page .select2-selection{
  min-height:42px;
  border-radius:9px;
  font-size:13.5px
}

.app-shell .repair-settings-page textarea.form-control{
  height:auto;
  padding:10px 12px;
  line-height:1.5
}

.app-shell .repair-settings-page .input-group-addon{
  display:grid;
  min-width:42px;
  place-items:center;
  padding:0 10px;
  color:var(--text-3)
}

.app-shell .repair-settings-page .input-group-addon svg{
  width:16px;
  height:16px
}

.app-shell .repair-settings-page .help-block{
  margin:5px 0 0;
  color:var(--text-3);
  font-size:11.5px;
  line-height:1.5
}

.app-shell .repair-settings-page input[type=submit].btn-primary{
  height:42px;
  padding:0 18px;
  border:0;
  border-radius:10px;
  background:var(--brand);
  color:#fff;
  font-size:13px;
  font-weight:750;
  cursor:pointer
}

.app-shell .repair-settings-page input[type=submit].btn-primary:hover{
  background:var(--brand-strong)
}

.app-shell .repair-settings-page .checkbox label,.app-shell .repair-settings-page .checkbox-inline label{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--text-2);
  font-size:12.5px;
  font-weight:650
}

/* Repair invoice details dialog */

/* The dialog is addressed as .modal-dialog.repair-detail-dialog, not .repair-detail-dialog.
   body.app-ui sets every dialog to min(760px,100%) — two classes and an element, which outweighs
   two classes on their own. So a width written here without .modal-dialog on it loses, silently:
   the dialog stayed at 760 however large the number beside it grew, and its eight-column products
   table went on scrolling. Every other wide dialog in this file is written the same way. */

.app-shell .modal-dialog.repair-detail-dialog{
  width:min(1560px,calc(100vw - 32px));
  max-width:none;
  margin:16px auto
}

.app-shell .repair-detail-body{
  padding:14px 16px!important
}

.app-shell .repair-detail-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:11px
}

.app-shell .repair-detail-block{
  padding:12px 13px;
  border:1px solid var(--border-2);
  border-radius:12px;
  background:var(--surface-2)
}

.app-shell .repair-detail-block-title{
  display:block;
  margin-bottom:8px;
  color:var(--text-3);
  font-size:9.5px;
  font-weight:850;
  letter-spacing:.05em;
  text-transform:uppercase
}

.app-shell .repair-detail-block dl{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:5px 10px;
  margin:0
}

.app-shell .repair-detail-block dt{
  color:var(--text-3);
  font-size:11.5px;
  font-weight:700;
  white-space:nowrap
}

.app-shell .repair-detail-block dd{
  margin:0;
  color:var(--text);
  font-size:12.5px;
  font-weight:600;
  overflow-wrap:anywhere
}

.app-shell .repair-detail-block dd a{
  color:var(--brand-strong);
  font-weight:700
}

.app-shell .repair-detail-block dd small{
  color:var(--text-3);
  font-weight:600
}

.app-shell .repair-detail-document{
  display:inline-flex;
  height:38px;
  align-items:center;
  gap:7px;
  margin-top:11px;
  padding:0 13px;
  border-radius:9px;
  font-size:12.5px;
  font-weight:750
}

.app-shell .repair-detail-products,.app-shell .repair-detail-defects{
  margin-top:14px
}

.app-shell .repair-detail-products h4,.app-shell .repair-detail-defects h4{
  margin:0 0 8px;
  color:var(--text);
  font-size:13px;
  font-weight:820
}

.app-shell .repair-detail-products>.table-responsive{
  overflow-x:auto;
  border:1px solid var(--border-2);
  border-radius:12px
}

.app-shell .repair-detail-products table{
  width:100%;
  margin:0!important;
  border-collapse:separate!important;
  border-spacing:0;
  font-size:12.5px;
  font-variant-numeric:tabular-nums
}

.app-shell .repair-detail-products table th{
  padding:10px 12px!important;
  border:0!important;
  border-bottom:1px solid var(--border-2)!important;
  background:var(--surface-2)!important;
  color:var(--text-3)!important;
  font-size:10.5px;
  font-weight:850;
  letter-spacing:.03em;
  text-transform:uppercase;
  white-space:nowrap
}

.app-shell .repair-detail-products table td{
  padding:11px 12px!important;
  border:0!important;
  border-bottom:1px solid var(--border-2)!important;
  background:var(--surface)!important;
  color:var(--text-2);
  vertical-align:top
}

.app-shell .repair-detail-products table tr:last-child td{
  border-bottom:0!important
}

/* The partial's column count changes with business settings, so the money columns are
   targeted from the end: they are always the last five. */

.app-shell .repair-detail-products table th:nth-last-child(-n+5),.app-shell .repair-detail-products table td:nth-last-child(-n+5){
  text-align:right;
  white-space:nowrap
}

.app-shell .repair-detail-products table th:first-child,.app-shell .repair-detail-products table td:first-child{
  width:42px;
  color:var(--text-3);
  text-align:center
}

.app-shell .repair-detail-products table th:nth-child(2),.app-shell .repair-detail-products table td:nth-child(2){
  width:44%;
  min-width:220px;
  color:var(--text);
  font-weight:650;
  white-space:normal
}

.app-shell .repair-detail-products table td:last-child{
  color:var(--text);
  font-weight:800
}

.app-shell .repair-detail-products table td small{
  display:block;
  margin-top:2px;
  color:var(--text-3);
  font-weight:600
}

.app-shell .repair-detail-products table .bg-green,.app-shell .repair-detail-products table .bg-gray{
  background:var(--surface-2)!important
}

/* Money summary: total, paid and outstanding read before anything else. */

.app-shell .repair-detail-summary{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:10px;
  margin-bottom:13px
}

.app-shell .repair-detail-stat{
  display:flex;
  flex-direction:column;
  gap:3px;
  padding:11px 13px;
  border:1px solid var(--border-2);
  border-radius:12px;
  background:var(--surface-2)
}

.app-shell .repair-detail-stat>span{
  color:var(--text-3);
  font-size:10px;
  font-weight:800;
  letter-spacing:.045em;
  text-transform:uppercase
}

.app-shell .repair-detail-stat>strong{
  color:var(--text);
  font-size:19px;
  font-weight:850;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.3px
}

.app-shell .repair-detail-stat.is-paid{
  border-color:color-mix(in srgb,var(--brand) 26%,var(--border));
  background:var(--brand-weak)
}

.app-shell .repair-detail-stat.is-paid>strong,.app-shell .repair-detail-stat.is-paid>span{
  color:var(--brand-strong)
}

.app-shell .repair-detail-stat.is-due{
  border-color:color-mix(in srgb,var(--danger) 26%,var(--border));
  background:var(--danger-weak)
}

.app-shell .repair-detail-stat.is-due>strong,.app-shell .repair-detail-stat.is-due>span{
  color:var(--danger)
}

.app-shell .repair-detail-sections{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:14px
}

.app-shell .repair-detail-section{
  overflow:hidden;
  border:1px solid var(--border-2);
  border-radius:12px;
  background:var(--surface)
}

.app-shell .repair-detail-section>summary{
  display:flex;
  min-height:46px;
  align-items:center;
  gap:9px;
  padding:0 13px;
  background:var(--surface-2);
  color:var(--text);
  cursor:pointer;
  list-style:none
}

.app-shell .repair-detail-section>summary::-webkit-details-marker{
  display:none
}

.app-shell .repair-detail-section>summary>svg{
  flex:0 0 auto;
  color:var(--brand-strong)
}

.app-shell .repair-detail-section>summary strong{
  flex:1 1 auto;
  font-size:12.5px;
  font-weight:800
}

.app-shell .repair-detail-section>summary small{
  display:grid;
  min-width:20px;
  height:19px;
  place-items:center;
  padding:0 6px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--surface);
  color:var(--text-3);
  font-size:9.5px;
  font-weight:800
}

.app-shell .repair-detail-section>summary::after{
  content:"";
  width:6px;
  height:6px;
  flex:0 0 6px;
  border-right:1.6px solid var(--text-3);
  border-bottom:1.6px solid var(--text-3);
  transform:rotate(45deg) translateY(-2px);
  transition:transform .15s ease
}

.app-shell .repair-detail-section[open]>summary::after{
  transform:rotate(225deg) translateY(-1px)
}

.app-shell .repair-detail-section[open]>summary{
  border-bottom:1px solid var(--border-2)
}

.app-shell .repair-detail-section-body{
  padding:12px 13px
}

.app-shell .repair-detail-table{
  width:100%;
  margin:0!important;
  border-collapse:separate!important;
  border-spacing:0
}

.app-shell .repair-detail-table thead th{
  padding:9px 10px!important;
  border:0!important;
  border-bottom:1px solid var(--border-2)!important;
  background:var(--surface-2);
  color:var(--text-3);
  font-size:10.5px;
  font-weight:850;
  letter-spacing:.03em;
  text-transform:uppercase;
  text-align:left;
  white-space:nowrap
}

.app-shell .repair-detail-table tbody td{
  padding:10px!important;
  border:0!important;
  border-bottom:1px solid var(--border-2)!important;
  color:var(--text-2);
  font-size:12.5px;
  vertical-align:middle
}

.app-shell .repair-detail-table tbody tr:last-child td{
  border-bottom:0!important
}

.app-shell .repair-detail-totals{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:6px 14px;
  margin:12px 0 0;
  padding:11px 12px;
  border:1px solid var(--border-2);
  border-radius:11px;
  background:var(--surface-2)
}

.app-shell .repair-detail-totals dt{
  color:var(--text-2);
  font-size:12px;
  font-weight:650
}

.app-shell .repair-detail-totals dd{
  margin:0;
  color:var(--text);
  font-size:12.5px;
  font-weight:750;
  text-align:right
}

.app-shell .repair-detail-totals dt.is-total,.app-shell .repair-detail-totals dd.is-total{
  padding-top:7px;
  border-top:1px solid var(--border);
  color:var(--text);
  font-size:13.5px;
  font-weight:850
}

.app-shell .repair-detail-passcode{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:8px 12px;
  margin:0
}

.app-shell .repair-detail-passcode dt{
  color:var(--text-3);
  font-size:11.5px;
  font-weight:700
}

.app-shell .repair-detail-passcode dd{
  margin:0;
  color:var(--text);
  font-size:12.5px;
  font-weight:700
}

.app-shell .repair-detail-media-actions{
  display:inline-flex;
  gap:6px
}

.app-shell .repair-detail-media-actions .act{
  display:inline-grid;
  width:32px;
  height:32px;
  place-items:center;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface);
  color:var(--text-2)
}

.app-shell .repair-detail-media-actions .act:hover{
  border-color:color-mix(in srgb,var(--brand) 38%,var(--border));
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .repair-detail-media-actions .act.is-danger{
  border-color:color-mix(in srgb,var(--danger) 26%,var(--border));
  color:var(--danger)
}

.app-shell .repair-detail-media-actions .act.is-danger:hover{
  background:var(--danger-weak);
  color:var(--danger)
}

.app-shell .repair-doc-check.is-na{
  border-style:dashed;
  color:var(--text-3)
}

.app-shell .repair-detail-footer{
  flex-wrap:wrap;
  justify-content:flex-start
}

.app-shell .repair-detail-footer>*:first-child{
  margin-right:auto
}

.app-shell .btn-telegram{
  display:inline-flex;
  min-height:39px;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:0 14px;
  border:1px solid #229ED9;
  border-radius:9px;
  background:#229ED9;
  color:#fff;
  font-size:11px;
  font-weight:750;
  white-space:nowrap
}

.app-shell .btn-telegram:hover{
  background:#1b8dc2;
  border-color:#1b8dc2;
  color:#fff
}

.app-shell .btn-telegram.is-technician{
  border-color:#f0922b;
  background:#f0922b
}

.app-shell .btn-telegram.is-technician:hover{
  background:#dd8121;
  border-color:#dd8121
}

@media(max-width:680px){
  .app-shell .modal-dialog.repair-detail-dialog{
    width:calc(100% - 20px);
    margin:12px auto
  }

  .app-shell .repair-detail-footer>*{
    flex:1 1 auto
  }
}

/* Repair invoice row actions: the house pattern - a quick Edit icon button plus an
   ellipsis menu - matching CRM follow-ups and the product list. */

.app-shell .repair-invoice-row-actions{
  display:flex;
  min-width:72px;
  align-items:center;
  gap:6px;
  padding-top:1px;
  white-space:nowrap
}

.app-shell .repair-invoice-row-actions .act{
  display:inline-grid;
  width:32px;
  min-width:32px;
  height:32px;
  min-height:32px;
  flex:none;
  padding:0;
  place-items:center;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface);
  color:var(--text-2);
  cursor:pointer;
  transition:border-color .15s,background .15s,color .15s,box-shadow .15s
}

.app-shell .repair-invoice-row-actions .act svg{
  display:block;
  width:15px;
  height:15px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round
}

.app-shell .repair-invoice-row-actions .act:hover{
  border-color:color-mix(in srgb,var(--brand) 38%,var(--border));
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .repair-invoice-row-actions .act:focus-visible{
  border-color:var(--brand);
  outline:0;
  box-shadow:0 0 0 3px var(--brand-weak)
}

.app-shell .repair-invoice-row-actions .invoice-edit-action{
  border-color:color-mix(in srgb,var(--brand) 30%,var(--border));
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .repair-invoice-row-actions .btn-group.open>.act{
  border-color:var(--brand);
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .repair-invoice-row-actions .dropdown-toggle::after,.app-shell .repair-invoice-row-actions .dropdown-toggle .caret{
  display:none
}

.app-shell .repair-invoice-row-actions .table-action-menu{
  right:auto;
  left:0;
  z-index:120;
  min-width:214px;
  margin-top:5px;
  padding:6px
}

.app-shell .repair-invoice-row-actions .table-action-menu>li>a.invoice-menu-button{
  display:flex;
  min-height:36px;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border:0!important;
  border-radius:7px;
  background:transparent;
  color:var(--text-2);
  font-size:12px;
  font-weight:650;
  white-space:nowrap
}

.app-shell .repair-invoice-row-actions .invoice-menu-icon{
  width:16px;
  height:16px;
  flex:none;
  color:var(--text-3)
}

.app-shell .repair-invoice-row-actions .table-action-menu>li>a.invoice-menu-button:hover{
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .repair-invoice-row-actions .invoice-menu-button:hover>.invoice-menu-icon{
  color:currentColor
}

.app-shell .repair-invoice-row-actions .table-action-menu>.divider{
  height:1px;
  margin:5px 2px;
  background:var(--border-2)
}

.app-shell .repair-invoice-row-actions .table-action-menu>li>a.invoice-menu-button--danger{
  color:var(--danger)
}

.app-shell .repair-invoice-row-actions .invoice-menu-button--danger>.invoice-menu-icon{
  color:currentColor
}

.app-shell .repair-invoice-row-actions .table-action-menu>li>a.invoice-menu-button--danger:hover{
  background:var(--danger-weak);
  color:var(--danger)
}

/* app.js opens the row's detail modal on any click inside a `table.ajax_view` row, and
   its guard only skips the click when the event target is the <a>, <button> or <i>
   itself. Clicking a menu label or an icon made the target a <span> or <svg>, so the
   detail modal loaded on top of whatever the action opened. Making the contents
   click-through keeps the anchor or button as the target, so the guard holds. */

.app-shell table.ajax_view tbody a>svg,
.app-shell table.ajax_view tbody button>svg,
.app-shell .repair-invoice-row-actions .act>svg,
.app-shell .repair-invoice-row-actions .table-action-menu>li>a>*{
  pointer-events:none
}

/* Short tables would otherwise clip the menu inside the card. */

/* The queue scrolls horizontally, so any menu drawn inside it is clipped by that
   container - flipping it upward only moved the clipping to the top edge. The script
   places it in a fixed layer instead, which no overflow ancestor can cut off. */

.app-shell .repair-invoice-row-actions .table-action-menu.is-floating{
  position:fixed;
  z-index:1040;
  margin:0
}

/* Repair invoice queue: the totals row carried AdminLTE's bg-gray and an undefined
   font-17, so it read as a plain body row. */

.app-shell .repair-job-table-card .footer-total>td,.app-shell .repair-job-table-card .footer-total>th{
  border-top:1px solid var(--border)!important;
  background:var(--surface-2)!important;
  color:var(--text);
  font-size:13px;
  font-weight:800
}

.app-shell .repair-invoices-page .repair-date-filter{
  min-width:0
}

.app-shell .repair-filter-card,.app-shell .repair-job-workspace,.app-shell .filter-card,.app-shell .workspace-card{
  overflow:visible;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

.app-shell .repair-filter-card>.repair-section-head,.app-shell .repair-job-workspace>.repair-section-head,.app-shell .filter-card>.section-head,.app-shell .workspace-card>.section-head{
  border-radius:14px 14px 0 0
}

.app-shell .repair-filter-reset,.app-shell .filter-reset{
  height:34px;
  padding:0 10px;
  border-radius:8px;
  font-size:10.5px
}

.app-shell .repair-filter-grid,.app-shell .filter-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  padding:14px
}

.app-shell .repair-filter-grid>.field,.app-shell .repair-filter-grid>.form-group,.app-shell .filter-grid>.field,.app-shell .filter-grid>.form-group{
  min-width:0;
  margin:0
}

.app-shell .repair-filter-grid label,.app-shell .filter-grid label{
  display:block;
  margin-bottom:6px;
  color:var(--text-2);
  font-size:12.5px;
  font-weight:750
}

.app-shell .repair-filter-grid .form-control,.app-shell .repair-filter-grid .finput,.app-shell .filter-grid .form-control,.app-shell .filter-grid .finput{
  height:42px;
  border-radius:9px;
  font-size:13.5px
}

.app-shell .repair-date-filter{
  display:flex;
  height:40px;
  align-items:center;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface-2);
  color:var(--text-3);
  transition:border-color .15s,box-shadow .15s,background .15s
}

.app-shell .repair-date-filter:focus-within{
  border-color:var(--brand);
  background:var(--surface);
  box-shadow:0 0 0 3px var(--brand-weak)
}

.app-shell .repair-date-filter>svg{
  width:16px;
  height:16px;
  flex:none;
  margin-left:11px
}

.app-shell .repair-date-filter>.finput{
  height:38px;
  padding:0 9px;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  cursor:pointer
}

.app-shell .repair-date-filter>button{
  display:grid;
  width:34px;
  height:34px;
  flex:none;
  margin-right:3px;
  place-items:center;
  border:0;
  border-radius:7px;
  background:transparent;
  color:var(--text-3)
}

.app-shell .repair-date-filter>button:hover{
  background:var(--surface-3);
  color:var(--danger)
}

.app-shell .repair-job-workspace,.app-shell .workspace-card{
  overflow:hidden
}

/* Tab strip as quiet pills: no per-tab dividers or forced widths, the active one reads
   as a soft chip with its icon lit — cleaner than the old full-width blocks. */

.app-shell .repair-job-tabs,.app-shell .section-tabs{
  display:flex;
  gap:4px;
  overflow-x:auto;
  border-bottom:1px solid var(--border);
  background:var(--surface);
  padding:8px 10px;
  scrollbar-width:thin
}

.app-shell .repair-job-tabs>a,.app-shell .section-tabs>a{
  position:relative;
  display:flex;
  min-width:0;
  align-items:center;
  gap:10px;
  padding:8px 14px;
  border-radius:10px;
  color:var(--text-2);
  text-decoration:none;
  transition:background .15s,color .15s
}

/* The selected tab is told apart by its fill alone — no underline bar, no lifted icon. One signal,
   the same one on every tabbed screen. (The bar also cost a scrollbar: it hung a pixel below the
   strip, and overflow-x:auto forces the other axis to auto, so the row scrolled up and down by 1px.) */

.app-shell .repair-job-tabs>a:hover,.app-shell .section-tabs>a:hover{
  background:var(--surface-2);
  color:var(--text)
}

.app-shell .repair-job-tabs>a.active,.app-shell .section-tabs>a.active{
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .repair-job-tabs>a>span:first-child,.app-shell .section-tabs>a>span:first-child{
  display:grid;
  width:30px;
  height:30px;
  flex:none;
  place-items:center;
  border-radius:8px;
  background:var(--surface-2);
  color:var(--text-3);
  transition:background .15s,color .15s
}

.app-shell .repair-job-tabs>a.active>span:first-child,.app-shell .section-tabs>a.active>span:first-child{
  background:var(--brand);
  color:#fff
}

.app-shell .repair-job-tabs strong,.app-shell .repair-job-tabs small,.app-shell .section-tabs strong,.app-shell .section-tabs small{
  display:block;
  white-space:nowrap
}

.app-shell .repair-job-tabs strong,.app-shell .section-tabs strong{
  font-size:13px;
  font-weight:800
}

.app-shell .repair-job-tabs small{
  margin-top:2px;
  color:var(--text-3);
  font-size:10.5px
}

.app-shell .repair-job-tab-content{
  overflow:visible
}

.app-shell .repair-job-tab-content>.tab-pane{
  display:none
}

.app-shell .repair-job-tab-content>.tab-pane.active{
  display:block
}

.app-shell .repair-job-table-card{
  margin:0!important;
  overflow:visible!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important
}

.app-shell .repair-job-table-card .table-toolbar{
  min-height:64px;
  border-bottom:1px solid var(--border-2);
  background:var(--surface)
}

.app-shell .repair-job-table-card .table-toolbar-search{
  width:min(390px,38vw)
}

/* Workshop listings are read at arm's length, so the table runs a step larger than the
   compact CRM cards. */

.app-shell .repair-job-table-card .table-toolbar-search .finput{
  height:42px;
  font-size:13.5px
}

/* A roomier toolbar: asked for once, on the toolbar, so both controls hear the same number. */

.app-shell .repair-job-table-card .table-toolbar{
  --table-toolbar-control-h:38px
}

.app-shell .repair-job-table-card .table-export-holder .dt-button,.app-shell .repair-job-table-card .table-export-holder .btn{
  font-size:12.5px
}

.app-shell .repair-job-table-card .table-page-size .finput{
  font-size:12.5px
}

.app-shell .repair-job-table-card .dataTables_info{
  font-size:13px
}

.app-shell .repair-job-table-card .dataTables_paginate .paginate_button{
  font-size:12.5px
}

/* Only while the wrapper is the one scrolling. It is not any more — DataTables scrolls the queue
   itself — and a wrapper still declaring itself a scroll container is what the headings would pin
   to instead of the page. */

.app-shell .repair-job-table-card .profile-module-table-wrap:not(:has(.dataTables_scroll)){
  overflow-x:auto;
  overflow-y:visible
}

/* The width that makes that scrolling possible.

   With autoWidth off, DataTables has no column widths to keep and collapses the table to its
   container — the far columns cut, nothing to scroll. A min-width gives the columns room to exist,
   and the scroll box something to scroll. The product listing has carried the same pair for as long
   as it has worked: scrollX, and a min-width of its own. */

.app-shell .repair-job-table-card{
  --job-sheet-table-min-width:1700px
}

.app-shell .repair-job-table-card .dataTables_scroll table.dataTable{
  min-width:var(--job-sheet-table-min-width)!important
}

.app-shell .repair-job-table-card table.dataTable{
  width:-moz-max-content!important;
  width:max-content!important;
  min-width:2600px;
  margin:0!important
}

.app-shell .repair-job-table-card table.dataTable thead th{
  padding:10px 12px!important;
  background:var(--surface-2)!important;
  color:var(--text-3)!important;
  font-size:11px!important;
  font-weight:850!important;
  letter-spacing:.035em;
  text-transform:uppercase;
  white-space:nowrap
}

.app-shell .repair-job-table-card table.dataTable tbody td{
  height:60px;
  padding:10px 12px!important;
  border-bottom:1px solid var(--border-2)!important;
  background:var(--surface);
  color:var(--text-2);
  font-size:13px!important;
  line-height:1.45;
  vertical-align:middle!important
}

.app-shell .repair-job-table-card table.dataTable tbody tr:hover td{
  background:color-mix(in srgb,var(--brand-weak) 32%,var(--surface))
}

.app-shell .repair-job-table-card table.dataTable tbody tr:last-child td{
  border-bottom:0!important
}

.app-shell .repair-job-action-cell{
  width:76px;
  overflow:visible!important
}

.app-shell .repair-job-number-cell{
  min-width:145px;
  color:var(--text)!important;
  font-weight:780
}

.app-shell .repair-job-date-cell{
  min-width:125px;
  font-variant-numeric:tabular-nums;
  white-space:nowrap
}

/* The reason given the last time this job's status moved, above the box that records the next
   one. Quoted and quiet: it is context, not a field — the input below starts empty so each change
   carries its own reason and an old one can never be saved against a new status. */

body.app-ui .repair-last-status-note{
  margin-bottom:10px;
  padding:9px 11px;
  border:1px solid var(--border);
  border-left:3px solid var(--border-2);
  border-radius:8px;
  background:var(--surface-2)
}

body.app-ui .repair-last-status-note>small{
  display:block;
  color:var(--text-3);
  font-size:10px;
  letter-spacing:.01em
}

body.app-ui .repair-last-status-note>small>b{
  color:var(--text-2);
  font-weight:700
}

body.app-ui .repair-last-status-note>p{
  margin:3px 0 0;
  color:var(--text);
  font-size:12px;
  font-style:italic;
  line-height:1.5;
  overflow-wrap:anywhere
}

.app-shell .repair-job-status-cell{
  min-width:105px
}

/* Why a record is in the status it is, under the chip that says which. Typed into Edit Status and
   shown nowhere before, so the one line explaining a cancellation lived only in the activity log.
   Quiet and clamped: the status is the fact, the note is the footnote to it.
   Not scoped to a cell class — the job sheet queue and the repair invoice queue draw this same
   note in columns with different classes, and scoping it to one left the other printing the note
   inline beside the chip as unstyled text. */

.app-shell .repair-status-note{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
  margin-top:4px;
  max-width:190px;
  color:var(--text-3);
  font-size:9.5px;
  font-style:italic;
  line-height:1.4;
  white-space:normal;
  overflow-wrap:anywhere
}

.app-shell .repair-job-status-cell .label{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:3px 8px;
  border-radius:999px!important;
  color:#fff;
  font-size:9.5px;
  font-weight:760
}

.app-shell .repair-status-history-toggle{
  display:block;
  margin-top:3px;
  padding:0;
  border:0;
  background:none;
  color:var(--brand-strong);
  font-size:9.5px;
  font-weight:750;
  cursor:pointer
}

.app-shell .repair-status-history-toggle:hover{
  text-decoration:underline
}

.app-shell .repair-status-history-toggle:disabled{
  cursor:wait;
  opacity:.6
}

.app-shell .repair-status-history{
  max-width:230px;
  margin-top:5px;
  padding:5px 0 1px;
  border-top:1px solid var(--border-2)
}

.app-shell .repair-status-history-entry{
  padding:4px 0;
  border-bottom:1px solid var(--border-2)
}

.app-shell .repair-status-history-entry:last-child{
  border-bottom:0
}

.app-shell .repair-status-history-entry small{
  display:block;
  color:var(--text-3);
  font-size:8.5px;
  line-height:1.3
}

.app-shell .repair-status-history-entry p{
  margin:2px 0 0;
  color:var(--text-2);
  font-size:9.5px;
  line-height:1.35;
  overflow-wrap:anywhere
}

.app-shell .repair-job-person-cell{
  min-width:155px
}

.app-shell .repair-job-service-cell{
  min-width:95px
}

.app-shell .repair-job-device-cell{
  min-width:150px
}

.app-shell .repair-job-invoice-cell{
  min-width:170px
}

.app-shell .repair-job-money-cell{
  min-width:105px;
  font-weight:780;
  white-space:nowrap
}

/* What came in for service, and who raised the sheet — each was several columns describing one
   thing. The headline is what the row is called out by; the rest is labelled beneath it, the way
   the shipping and note cells on the sales list read. */

.app-shell .repair-device-stack,.app-shell .repair-recorded-stack,.app-shell .repair-party-stack{
  display:flex;
  flex-direction:column;
  gap:1px;
  max-width:230px;
  align-items:flex-start
}

.app-shell .repair-device-stack>strong,.app-shell .repair-recorded-stack>strong{
  color:var(--text);
  font-size:12px;
  font-weight:700;
  line-height:1.35;
  overflow-wrap:anywhere
}

.app-shell .repair-device-stack small,.app-shell .repair-party-stack small{
  display:flex;
  gap:5px;
  margin-top:2px;
  color:var(--text-3);
  font-size:10px
}

.app-shell .repair-device-stack small strong,.app-shell .repair-party-stack small strong{
  color:var(--text-2);
  font-weight:650;
  overflow-wrap:anywhere
}

/* The name leads — a link when there is a page to open, a plain span otherwise — its details sit
   under it, and the Send Telegram button, which the listing builds with its own inline styles,
   is pushed clear of the last line. */

.app-shell .repair-party-stack>:first-child{
  color:var(--text);
  font-size:12px;
  font-weight:700;
  line-height:1.35;
  overflow-wrap:anywhere
}

.app-shell .repair-party-stack>a.btn-modal{
  margin-top:5px
}

.app-shell .repair-recorded-stack small{
  color:var(--text-3);
  font-size:10px;
  white-space:nowrap
}

.app-shell .repair-job-none{
  color:var(--text-3)
}

/* List-valued datatable cells (parts, product configuration, condition, reported issues,
   checklist) collapse to one summary line that expands in place, instead of printing every
   entry as an inline chip and making a single row several lines tall. */

/* The compact multi-select's own search box, mounted under the Select all bar. */

.app-shell .select2-compact-search,body.app-ui .select2-compact-search{
  padding:7px 10px;
  border-bottom:1px solid var(--border-2);
  background:var(--surface)
}

.app-shell .select2-compact-search input,body.app-ui .select2-compact-search input{
  width:100%;
  height:32px;
  padding:0 10px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface);
  color:var(--text);
  font-size:12.5px;
  outline:none
}

.app-shell .select2-compact-search input:focus,body.app-ui .select2-compact-search input:focus{
  border-color:color-mix(in srgb,var(--brand) 45%,var(--border))
}

.app-shell .dt-list{
  max-width:320px
}

/* Invoice column: every invoice on its own thin line - number, amount, paid state as a
   coloured dot - each opening the sale, and a slim "Add invoice" link under them. */

.app-shell .repair-invoice-cell{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
  min-width:0
}

.app-shell .repair-invoice-list{
  display:flex;
  flex-direction:column;
  gap:0;
  width:100%;
  margin:0;
  padding:0;
  list-style:none
}

.app-shell .repair-invoice-row{
  display:inline-flex;
  align-items:center;
  gap:7px;
  max-width:100%;
  height:22px;
  margin:0 -4px;
  padding:0 4px;
  border:0;
  border-radius:6px;
  background:transparent;
  color:var(--text-2);
  line-height:1;
  text-decoration:none;
  transition:background .12s ease,color .12s ease
}

.app-shell .repair-invoice-row:hover{
  background:var(--brand-weak);
  color:var(--brand-strong);
  text-decoration:none
}

.app-shell .repair-invoice-no{
  min-width:54px;
  color:var(--text);
  font-size:12px;
  font-weight:750;
  letter-spacing:.2px;
  white-space:nowrap
}

.app-shell .repair-invoice-row:hover .repair-invoice-no{
  color:var(--brand-strong)
}

.app-shell .repair-invoice-total{
  color:var(--text-2);
  font-size:11.5px;
  font-weight:650;
  font-variant-numeric:tabular-nums;
  white-space:nowrap
}

.app-shell .repair-invoice-pay{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:0;
  border:0;
  background:transparent;
  color:var(--text-3);
  font-size:10px;
  font-weight:750;
  letter-spacing:.04em;
  text-transform:uppercase;
  white-space:nowrap
}

.app-shell .repair-invoice-pay::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:currentColor
}

.app-shell .repair-invoice-pay.is-paid{
  color:var(--brand-strong)
}

.app-shell .repair-invoice-pay.is-due{
  color:var(--danger)
}

.app-shell .repair-invoice-pay.is-partial{
  color:#b45309
}

.app-shell .repair-invoice-none{
  color:var(--text-3);
  font-size:11.5px;
  font-style:italic;
  line-height:22px
}

.app-shell .repair-invoice-add{
  display:inline-flex;
  align-items:center;
  gap:4px;
  height:22px;
  margin:0 -4px;
  padding:0 4px;
  border:0;
  border-radius:6px;
  background:transparent;
  color:var(--brand-strong);
  font-size:11.5px;
  font-weight:700;
  line-height:1;
  text-decoration:none;
  white-space:nowrap;
  transition:background .12s ease
}

.app-shell .repair-invoice-add svg{
  width:12px;
  height:12px;
  flex:0 0 12px
}

.app-shell .repair-invoice-add:hover{
  background:var(--brand-weak);
  color:var(--brand-strong);
  text-decoration:underline;
  text-underline-offset:2px
}

.app-shell .dt-list>summary{
  display:flex;
  align-items:center;
  gap:7px;
  padding:3px 0;
  list-style:none;
  cursor:pointer
}

.app-shell .dt-list>summary::-webkit-details-marker{
  display:none
}

.app-shell .dt-list>summary::after{
  content:"";
  width:6px;
  height:6px;
  flex:0 0 6px;
  border-right:1.6px solid var(--text-3);
  border-bottom:1.6px solid var(--text-3);
  transform:rotate(45deg) translateY(-2px);
  transition:transform .15s ease
}

.app-shell .dt-list[open]>summary::after{
  transform:rotate(225deg) translateY(-1px)
}

.app-shell .dt-list>summary:hover .dt-list-lead{
  color:var(--brand-strong)
}

.app-shell .dt-list-count{
  display:grid;
  min-width:21px;
  height:21px;
  flex:0 0 auto;
  place-items:center;
  padding:0 6px;
  border:1px solid color-mix(in srgb,var(--brand) 24%,var(--border));
  border-radius:999px;
  background:var(--brand-weak);
  color:var(--brand-strong);
  font-size:10.5px;
  font-weight:850
}

.app-shell .dt-list-lead{
  min-width:0;
  flex:1 1 auto;
  overflow:hidden;
  color:var(--text-2);
  font-size:12px;
  font-weight:650;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .dt-list-more{
  flex:0 0 auto;
  color:var(--text-3);
  font-size:10.5px;
  font-weight:800
}

.app-shell .dt-list-items{
  margin:5px 0 3px;
  padding:7px 9px;
  border:1px solid var(--border-2);
  border-radius:9px;
  background:var(--surface-2);
  list-style:none;
  max-width:100%;
  overflow:hidden
}

.app-shell .dt-list-items li{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  padding:4px 0;
  border-bottom:1px dashed var(--border-2)
}

.app-shell .dt-list-items li:last-child{
  border-bottom:0
}

.app-shell .dt-list-items li>span{
  flex:1 1 auto;
  min-width:0;
  color:var(--text-2);
  font-size:11.5px;
  overflow-wrap:anywhere;
  word-break:break-word;
  white-space:normal
}

.app-shell .dt-list-items li>b{
  display:inline-flex;
  align-items:center;
  gap:5px;
  flex:0 0 auto;
  color:var(--text);
  font-size:11.5px;
  font-weight:800;
  white-space:nowrap
}

.app-shell .dt-list-steps{
  display:grid;
  min-width:19px;
  height:18px;
  place-items:center;
  padding:0 5px;
  border-radius:5px;
  background:color-mix(in srgb,var(--brand) 14%,transparent);
  color:var(--brand-strong);
  font-size:9.5px;
  font-weight:850
}

.app-shell .dt-list-items .pc-readmore{
  font-size:12px
}

.app-shell .dt-list-flag{
  display:grid;
  width:18px;
  height:18px;
  place-items:center;
  border-radius:5px;
  font-size:11px;
  font-weight:900
}

.app-shell .dt-list-flag.is-yes{
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .dt-list-flag.is-no{
  background:var(--danger-weak);
  color:var(--danger)
}

.app-shell .repair-job-row-actions{
  display:flex;
  align-items:center;
  gap:6px;
  white-space:nowrap
}

.app-shell .repair-job-row-actions .act{
  display:grid;
  width:32px;
  height:32px;
  min-width:32px;
  place-items:center;
  padding:0;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface);
  color:var(--text-2)
}

.app-shell .repair-job-row-actions .act-edit{
  border-color:color-mix(in srgb,var(--brand) 35%,var(--border));
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .repair-job-row-actions .act:hover{
  border-color:var(--brand);
  color:var(--brand-strong)
}

.app-shell .repair-job-action-menu{
  right:auto!important;
  left:0!important;
  min-width:220px
}

.app-shell .repair-job-action-menu>li>a,.app-shell .repair-job-action-menu>li>button{
  width:100%
}

.app-shell .repair-job-action-menu svg{
  width:16px;
  height:16px;
  flex:none;
  color:var(--text-3)
}

.app-shell .repair-job-action-menu .menu-separator{
  height:1px;
  margin:5px 3px;
  background:var(--border-2)
}

.app-shell .repair-job-action-menu .danger{
  color:var(--danger)
}

.app-shell .repair-job-action-menu .danger:hover{
  background:var(--danger-weak);
  color:var(--danger)
}

.app-shell .repair-profile-add-row{
  display:flex;
  justify-content:flex-end;
  padding:10px 12px 0
}

.app-shell .repair-profile-add-row .profile-tab-add{
  height:36px;
  padding:0 11px;
  border-radius:9px
}

.app-shell .vhc-tag{
  display:inline-flex;
  align-items:center;
  gap:4px;
  margin-top:4px;
  padding:3px 7px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--surface-2);
  color:var(--text-3);
  font-size:8.5px;
  font-weight:720;
  line-height:1.2;
  white-space:nowrap
}

.app-shell .vhc-tag:hover{
  border-color:var(--brand);
  color:var(--brand-strong)
}

.app-shell .vhc-tag-sep{
  width:4px;
  height:4px;
  border-radius:50%;
  background:currentColor
}

/* "Copy link" chip under the job sheet number: the customer link in one click. */

.app-shell .repair-share-tag{
  display:inline-flex;
  align-items:center;
  gap:5px;
  margin-top:5px;
  padding:3px 8px 3px 7px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--surface);
  color:var(--text-2);
  font-size:10.5px;
  font-weight:720;
  line-height:1.2;
  white-space:nowrap;
  text-decoration:none;
  cursor:pointer;
  transition:border-color .15s ease,background .15s ease,color .15s ease
}

.app-shell .repair-share-tag svg{
  width:12px;
  height:12px;
  flex:0 0 12px
}

.app-shell .repair-share-tag:hover{
  border-color:var(--brand);
  background:var(--brand-weak);
  color:var(--brand-strong);
  text-decoration:none
}

.app-shell .repair-share-tag.is-busy{
  opacity:.6;
  pointer-events:none
}

.app-shell .repair-share-tag.is-copied,.app-shell .btn-ghost.js-copy-share-link.is-copied{
  border-color:var(--brand);
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .repair-share-tag+.vhc-tag{
  margin-left:4px
}

.app-shell .repair-share-field label{
  display:block;
  margin-bottom:6px;
  color:var(--text-2);
  font-size:13px;
  font-weight:750
}

.app-shell .repair-share-input{
  display:flex;
  gap:8px
}

.app-shell .repair-share-input .form-control{
  min-width:0;
  flex:1 1 auto;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12.5px
}

.app-shell .repair-share-input .btn-ghost{
  flex:0 0 auto
}

.app-shell .repair-share-field .help-block{
  margin:7px 0 0;
  color:var(--text-3);
  font-size:12px
}

.app-shell .vhc-tag-submitted{
  border-color:color-mix(in srgb,var(--info) 30%,var(--border));
  background:var(--info-weak);
  color:var(--info)
}

.app-shell .vhc-tag-reviewed{
  border-color:color-mix(in srgb,var(--brand) 30%,var(--border));
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .repair-job-table-card .dataTables_processing{
  top:92px;
  left:50%;
  width:auto;
  min-width:170px;
  margin:0;
  transform:translateX(-50%);
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface);
  color:var(--text-2);
  box-shadow:var(--shadow-md);
  font-size:11px;
  font-weight:750
}

/* The shared .filter-grid had no breakpoints of its own, so every screen that leans on it
   (asset listing among them) kept four tracks down to phone width — four ~80px selects with
   two-line labels. It now steps down with the repair grid it shares a definition with.
   Screens that declare their own column count out-specify these, so their own steps still win. */

@media(max-width:1100px){
  .app-shell .repair-filter-grid,.app-shell .filter-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))
  }
}

@media(max-width:760px){
  .app-shell .repair-filter-grid,.app-shell .filter-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

  .app-shell .repair-job-tabs>a{
    min-width:180px
  }

  .app-shell .repair-job-table-card .table-toolbar-search{
    width:100%
  }
}

@media(max-width:520px){
  .app-shell .repair-filter-grid,.app-shell .filter-grid{
    grid-template-columns:1fr
  }

  .app-shell .repair-filter-reset{
    width:100%;
    justify-content:center
  }

  .app-shell .repair-section-head,.app-shell .section-head{
    flex-wrap:wrap
  }
}

/* Repair job sheet create/edit: retain every operational field in a clearer flow. */

.app-shell .repair-job-form-page{
  gap:14px
}

.app-shell .repair-job-form-page>.repair-page-head>.btn-ghost{
  height:40px;
  padding:0 13px;
  border-radius:10px
}

.app-shell .repair-legacy-header{
  display:none!important
}

.app-shell .repair-form-copy-note{
  display:flex;
  align-items:center;
  gap:9px;
  padding:10px 12px;
  border:1px solid color-mix(in srgb,var(--warn) 30%,var(--border));
  border-radius:10px;
  background:var(--warn-weak);
  color:var(--text-2);
  font-size:11.5px
}

.app-shell .repair-form-copy-note svg{
  flex:none;
  color:var(--warn)
}

.app-shell .repair-form-copy-note strong{
  color:var(--text);
  font-weight:820
}

.app-shell .repair-job-form-shell{
  padding:0!important
}

.app-shell .repair-job-form{
  display:grid;
  gap:13px
}

.app-shell .repair-job-form-section,.app-shell .repair-job-form>.box{
  overflow:visible!important;
  margin:0!important;
  border:1px solid var(--border)!important;
  border-radius:14px!important;
  background:var(--surface)!important;
  box-shadow:var(--shadow-sm)!important;
  transform:none!important
}

.app-shell .repair-job-form-section:hover{
  box-shadow:var(--shadow-sm)!important;
  transform:none!important
}

.app-shell .repair-job-form>.box>.box-body{
  padding:14px!important
}

.app-shell .repair-form-grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  -moz-column-gap:14px;
       column-gap:14px;
  align-items:start;
  padding:16px 18px 18px
}

.app-shell .repair-form-grid:before,.app-shell .repair-form-grid:after{
  display:none!important
}

.app-shell .repair-form-grid>.row,.app-shell .repair-form-grid>.col-md-12,.app-shell .repair-form-grid>.col-sm-12,.app-shell .repair-form-grid>.pick_up_onsite_addr,.app-shell .repair-form-grid>hr{
  grid-column:1/-1;
  width:100%
}

.app-shell .repair-form-grid>.repair-form-subhead{
  grid-column:1/-1;
  width:100%
}

.app-shell .repair-form-grid>.col-md-3,.app-shell .repair-form-grid>.col-md-4,.app-shell .repair-form-grid>.col-md-5,.app-shell .repair-form-grid>.col-sm-4{
  grid-column:span 4;
  width:100%;
  padding-inline:0;
  float:none
}

.app-shell .repair-form-grid>.col-md-6,.app-shell .repair-form-grid>.col-sm-6{
  grid-column:span 6;
  width:100%;
  padding-inline:0;
  float:none
}

.app-shell .repair-form-grid>.clearfix{
  display:none
}

.app-shell .repair-form-section-head{
  display:grid;
  grid-template-columns:36px minmax(0,1fr) 25px;
  min-height:64px;
  align-items:center;
  gap:10px;
  margin:0;
  padding:12px 16px;
  border-bottom:1px solid var(--border-2);
  background:linear-gradient(110deg,var(--surface-2),var(--surface))
}

.app-shell .repair-form-section-head>span{
  display:grid;
  width:36px;
  height:36px;
  place-items:center;
  border-radius:9px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .repair-form-section-head strong,.app-shell .repair-form-section-head small{
  display:block
}

.app-shell .repair-form-section-head strong{
  color:var(--text);
  font-size:12.5px;
  font-weight:820
}

.app-shell .repair-form-section-head small{
  margin-top:2px;
  color:var(--text-3);
  font-size:10px
}

.app-shell .repair-form-section-head>i{
  display:grid;
  width:25px;
  height:25px;
  place-items:center;
  border:1px solid color-mix(in srgb,var(--brand) 28%,var(--border));
  border-radius:7px;
  background:var(--brand-weak);
  color:var(--brand-strong);
  font-size:9px;
  font-style:normal;
  font-weight:850
}

.app-shell .repair-job-form .row{
  row-gap:0
}

.app-shell .repair-job-form .form-group{
  margin-bottom:13px
}

.app-shell .repair-job-form .form-group>label,.app-shell .repair-job-form>label{
  display:block;
  margin:0 0 6px!important;
  color:var(--text-2);
  font-size:12px;
  font-weight:750
}

.app-shell .repair-job-form .repair-service-choice>label:first-child{
  display:block;
  margin:0 0 6px!important;
  color:var(--text-2);
  font-size:12px;
  font-weight:750
}

.app-shell .repair-job-form .repair-service-choice{
  display:flex;
  min-height:70px;
  align-items:flex-start;
  flex-wrap:wrap;
  gap:7px;
  padding-inline:0
}

.app-shell .repair-job-form .repair-service-choice>label:first-child{
  width:100%
}

.app-shell .repair-job-form .repair-service-choice .radio-inline{
  flex:1;
  justify-content:center;
  margin:0!important
}

.app-shell .repair-job-form .form-control,.app-shell .repair-job-form .finput,.app-shell .repair-job-form .select2-container .select2-selection{
  min-height:42px;
  border-radius:10px;
  font-size:13px
}

.app-shell .repair-job-form textarea.form-control{
  min-height:86px;
  padding:10px 12px;
  line-height:1.5;
  resize:vertical
}

.app-shell .repair-job-form .input-group>.select-field{
  display:block;
  min-width:0;
  flex:1
}

.app-shell .repair-job-form .input-group>.select-field .select2-container{
  width:100%!important
}

.app-shell .repair-job-form .input-group>.select-field .select2-selection{
  border-radius:10px 0 0 10px
}

.app-shell .repair-job-form .repair-customer-field .input-group{
  position:relative;
  display:flex;
  min-width:0;
  align-items:stretch
}

.app-shell .repair-job-form .repair-customer-picker{
  position:relative;
  display:block;
  min-width:0;
  width:auto;
  flex:1 1 auto
}

.app-shell .repair-job-form .repair-customer-picker>.select2-container{
  display:block;
  width:100%!important;
  min-width:0
}

.app-shell .repair-job-form .repair-customer-picker .select2-selection--single{
  height:42px;
  border-radius:10px 0 0 10px
}

.app-shell .repair-job-form .repair-customer-picker .select2-selection__rendered{
  padding-left:13px;
  line-height:40px
}

.app-shell .repair-job-form .repair-customer-picker .select2-selection__arrow{
  height:40px
}

body.app-ui .repair-customer-dropdown{
  box-sizing:border-box!important;
  min-width:280px!important;
  background:var(--surface)!important;
  z-index:100000!important
}

body.app-ui .repair-customer-dropdown .select2-search--dropdown{
  display:block!important;
  width:100%!important;
  padding:9px!important
}

body.app-ui .repair-customer-dropdown .select2-search__field{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  height:38px!important;
  margin:0!important
}

body.app-ui .repair-customer-dropdown .select2-results__options{
  max-height:260px!important;
  padding:6px!important
}

body.app-ui .repair-customer-dropdown .select2-results__message{
  display:block!important;
  min-height:42px;
  padding:11px 12px!important;
  line-height:1.45
}

/* Customer search result: name and mobile on the left, reward-point balance as a
   labelled chip on the right. The <br> separators are the fallback for screens still
   on the legacy stylesheet. */

body.app-ui .customer-option{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-width:0
}

body.app-ui .customer-option br{
  display:none
}

body.app-ui .customer-option-lines{
  display:flex;
  min-width:0;
  flex-direction:column;
  gap:1px
}

body.app-ui .customer-option-business{
  color:var(--text-3);
  font-size:9.5px;
  font-weight:750;
  letter-spacing:.3px;
  text-transform:uppercase
}

body.app-ui .customer-option-name{
  color:inherit;
  font-size:12.5px;
  font-weight:700;
  overflow-wrap:anywhere
}

body.app-ui .customer-option-mobile{
  color:var(--text-3);
  font-size:11px;
  font-weight:550
}

body.app-ui .customer-option-rp{
  display:inline-flex;
  flex:0 0 auto;
  align-items:center;
  gap:4px;
  padding:3px 8px;
  border:1px solid color-mix(in srgb,var(--brand) 24%,var(--border));
  border-radius:999px;
  background:var(--brand-weak);
  color:var(--brand-strong);
  font-size:10.5px;
  font-weight:800
}

body.app-ui .customer-option-rp svg{
  width:12px;
  height:12px
}

/* The highlighted row inverts, so the chip and the secondary lines follow it. */

body.app-ui .select2-results__option--highlighted .customer-option-mobile,
body.app-ui .select2-results__option--highlighted .customer-option-business{
  color:rgba(255,255,255,.82)
}

body.app-ui .select2-results__option--highlighted .customer-option-rp{
  border-color:rgba(255,255,255,.42);
  background:rgba(255,255,255,.18);
  color:#fff
}

body.app-ui .customer-option-add{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:0;
  border:0;
  background:transparent;
  color:var(--brand-strong);
  font-size:12px;
  font-weight:700;
  text-align:left
}

body.app-ui .customer-option-add svg{
  width:15px;
  height:15px;
  flex:0 0 15px
}

.app-shell .repair-job-form .repair-job-select-field{
  position:relative;
  display:block;
  width:100%;
  min-width:0
}

.app-shell .repair-job-form .repair-job-select-field>.select2-container{
  display:block;
  width:100%!important;
  min-width:0
}

body.app-ui .repair-job-dropdown{
  box-sizing:border-box!important;
  min-width:240px!important;
  background:var(--surface)!important;
  z-index:100000!important
}

/* Repair status colour chip. Replaces the old <i class="fa fa-circle"> marker: the
   new stack ships no Font Awesome, so that icon rendered as an empty element. */

body.app-ui .repair-status-dot{
  display:inline-block;
  width:9px;
  height:9px;
  margin-right:6px;
  border-radius:50%;
  box-shadow:0 0 0 1px rgba(15,23,42,.12) inset;
  vertical-align:baseline
}

body.app-ui .repair-job-dropdown .select2-search--dropdown{
  display:block!important;
  width:100%!important;
  padding:9px!important
}

body.app-ui .repair-job-dropdown .select2-search__field{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  height:38px!important;
  margin:0!important
}

body.app-ui .repair-job-dropdown .select2-results__options{
  max-height:248px!important;
  padding:6px!important
}

.app-shell .repair-job-form .date-time-control{
  width:100%;
  height:42px;
  background:var(--surface-2)
}

.app-shell .repair-job-form .date-time-control:focus-within{
  background:var(--surface)
}

.app-shell .repair-job-form .date-time-control .date-control-input{
  font-size:12.5px
}

.app-shell .repair-job-form .date-time-control .date-time-part{
  padding:0 8px
}

.app-shell .repair-job-form .date-time-control .date-time-part>input{
  width:78px;
  font-size:11.5px
}

.app-shell .repair-job-form .input-group-btn .btn{
  width:42px;
  padding:0;
  justify-content:center;
  border-radius:0 10px 10px 0
}

.app-shell .repair-job-form .input-group-btn .btn.repair-inline-add{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-color:var(--border);
  background:var(--surface-2)!important;
  color:var(--brand-strong)
}

.app-shell .repair-job-form .input-group-btn .btn.repair-inline-add:hover{
  border-color:var(--brand);
  background:var(--brand-weak)!important
}

.app-shell .repair-job-form .input-group-btn .btn:not(.repair-inline-add){
  display:inline-flex;
  min-width:42px;
  width:auto;
  align-items:center;
  gap:6px;
  padding:0 11px;
  border-color:var(--brand);
  background:var(--brand)!important;
  color:#fff
}

.app-shell .repair-job-form .input-group-addon{
  min-width:42px;
  justify-content:center;
  padding:0 10px
}

/* Inline add pickers (Brand, Device, Device Model, Customer) read as ONE control:
   the select and its + share a single frame split by a hairline, instead of two
   stacked boxes whose 40px button never lined up with the 42px select. */

.app-shell .repair-job-form .input-group:has(.repair-inline-add){
  align-items:stretch;
  border:1px solid var(--border);
  border-radius:11px;
  background:var(--surface-2);
  transition:border-color .15s ease,box-shadow .15s ease,background .15s ease
}

.app-shell .repair-job-form .input-group:has(.repair-inline-add):hover{
  border-color:color-mix(in srgb,var(--brand) 30%,var(--border))
}

.app-shell .repair-job-form .input-group:has(.repair-inline-add):focus-within{
  border-color:var(--brand);
  background:var(--surface);
  box-shadow:0 0 0 3px var(--brand-weak)
}

.app-shell .repair-job-form .input-group:has(.repair-inline-add) .select2-selection--single,
.app-shell .repair-job-form .input-group:has(.repair-inline-add)>.select-field>select.form-control,
.app-shell .repair-job-form .input-group:has(.repair-inline-add)>.form-control{
  height:40px;
  border:0!important;
  border-radius:11px 0 0 11px!important;
  background:transparent!important;
  box-shadow:none!important
}

.app-shell .repair-job-form .input-group:has(.repair-inline-add) .select2-container--open .select2-selection--single{
  border-bottom-color:transparent!important
}

.app-shell .repair-job-form .input-group:has(.repair-inline-add) .input-group-btn{
  margin:0
}

.app-shell .repair-job-form .input-group:has(.repair-inline-add) .btn.repair-inline-add{
  width:40px;
  height:40px;
  margin:0;
  border:0!important;
  border-left:1px solid var(--border)!important;
  border-radius:0 11px 11px 0;
  background:transparent!important;
  color:var(--text-3);
  transition:background .15s ease,color .15s ease
}

.app-shell .repair-job-form .input-group:has(.repair-inline-add) .btn.repair-inline-add:hover:not(:disabled){
  background:var(--brand-weak)!important;
  color:var(--brand-strong)
}

.app-shell .repair-job-form .input-group:has(.repair-inline-add) .btn.repair-inline-add:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:-2px
}

.app-shell .repair-job-form .input-group:has(.repair-inline-add) .btn.repair-inline-add:disabled{
  color:var(--text-3);
  cursor:not-allowed;
  opacity:.4
}

.app-shell .repair-job-form .input-group:has(.repair-inline-add):focus-within .btn.repair-inline-add{
  border-left-color:color-mix(in srgb,var(--brand) 26%,var(--border))!important
}

.app-shell .repair-job-form .radio-inline,.app-shell .repair-job-form .checkbox-inline label{
  display:inline-flex;
  min-height:38px;
  align-items:center;
  gap:7px;
  margin:0 7px 7px 0!important;
  padding:7px 10px;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface-2);
  color:var(--text-2);
  font-size:11.5px;
  font-weight:650;
  cursor:pointer
}

.app-shell .repair-job-form .radio-inline:has(.checked),.app-shell .repair-job-form .radio-inline:has(input:checked),.app-shell .repair-job-form .checkbox-inline label:has(input:checked){
  border-color:color-mix(in srgb,var(--brand) 42%,var(--border));
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .repair-job-form .box.box-solid:not(.repair-job-form-section){
  margin:2px 0 14px;
  border:1px solid var(--border-2)!important;
  border-radius:11px!important;
  background:var(--surface-2);
  box-shadow:none!important
}

.app-shell .repair-job-form .box.box-solid:not(.repair-job-form-section)>.box-header{
  padding:10px 12px;
  border-bottom:1px solid var(--border-2);
  background:transparent
}

.app-shell .repair-job-form .box.box-solid:not(.repair-job-form-section)>.box-body{
  padding:11px 12px
}

.app-shell .repair-checklist-empty{
  display:flex;
  min-height:58px;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:10px 12px;
  color:var(--text-3);
  text-align:left
}

.app-shell .repair-checklist-empty>svg{
  flex:none;
  color:var(--brand-strong)
}

.app-shell .repair-checklist-empty strong,.app-shell .repair-checklist-empty small{
  display:block
}

.app-shell .repair-checklist-empty strong{
  color:var(--text-2);
  font-size:11px;
  font-weight:760
}

.app-shell .repair-checklist-empty small{
  margin-top:2px;
  font-size:9.5px
}

.app-shell .repair-job-form .box-title{
  margin:0;
  color:var(--text-2);
  font-size:11.5px;
  font-weight:780
}

.app-shell .repair-job-form .box-title small{
  margin-left:6px;
  color:var(--text-3);
  font-size:9.5px;
  font-weight:600
}

/* The unlock pattern.

   PatternLock ships in vendor.js and draws its own markup — a .patt-wrap list of .patt-circ cells,
   each holding a .patt-dots, with a .patt-lines element added per stroke — and it sizes all of that
   inline. Its stylesheet came from vendor.css, which no migrated screen loads and which no longer
   exists here at all, so the widget rendered as nine unstyled list items and an invisible line: a
   field labelled Pattern with a blank space under it.

   Only what the plugin cannot work without is ported — the cells have to sit three to a row and the
   stroke has to pivot on the point the library positions it by. The rest is our own palette.

   The stroke's box is placed 5px up and left of the circle's centre and made 10px longer than the
   distance it spans, so its pivot is 5px into the box on both axes. The visible line is painted
   inside that box rather than being the box, which is what keeps a 3px stroke on a 10px pivot. */

body.app-ui .patt-holder{
  position:relative;
  margin:0 auto;
  touch-action:none
}

body.app-ui .patt-wrap{
  position:relative;
  margin:0;
  padding:0;
  list-style:none
}

body.app-ui .patt-wrap:after{
  display:block;
  clear:both;
  content:""
}

body.app-ui .patt-circ{
  position:relative;
  float:left;
  box-sizing:border-box;
  border:2px solid var(--border);
  border-radius:50%;
  background:var(--surface);
  transition:border-color .12s,background .12s
}

body.app-ui .patt-circ .patt-dots{
  position:absolute;
  top:50%;
  left:50%;
  width:26%;
  height:26%;
  border-radius:50%;
  background:var(--border);
  transform:translate(-50%,-50%);
  transition:background .12s
}

body.app-ui .patt-circ.hovered{
  border-color:var(--brand);
  background:var(--brand-weak)
}

body.app-ui .patt-circ.hovered .patt-dots{
  background:var(--brand)
}

body.app-ui .patt-lines{
  position:absolute;
  z-index:1;
  height:10px;
  background:linear-gradient(to bottom,transparent 3.5px,var(--brand) 3.5px,var(--brand) 6.5px,transparent 6.5px);
  pointer-events:none;
  transform-origin:5px 5px
}

body.app-ui .patt-error .patt-circ.hovered{
  border-color:var(--danger);
  background:var(--danger-weak)
}

body.app-ui .patt-error .patt-circ.hovered .patt-dots{
  background:var(--danger)
}

body.app-ui .patt-error .patt-lines{
  background:linear-gradient(to bottom,transparent 3.5px,var(--danger) 3.5px,var(--danger) 6.5px,transparent 6.5px)
}

/* Drawn in confidence: the library adds this while the pattern is being entered when it is set to
   keep what is drawn out of sight. */

body.app-ui .patt-hidden .patt-lines,body.app-ui .patt-hidden .patt-circ.hovered{
  display:none
}

/* The device's password and pattern, as one dialog.

   The two fields were a Bootstrap .form-group each, so on the till the label sat beside its box
   with the pattern's blank container below it and nothing to say what it was for. */

body.app-ui #security_modal .security-fields{
  display:grid;
  gap:14px
}

body.app-ui #security_modal .security-field>label{
  display:block;
  margin:0 0 6px;
  color:var(--text-2);
  font-size:11.5px;
  font-weight:700
}

/* The field is dressed here rather than left to the browser: .form-control is styled under
   .app-shell, and this dialog opens from the till, which has no shell element — so the box fell
   back to the reset and answered a focus with the browser's blue outline. */

body.app-ui #security_modal .security-field .form-control{
  width:100%;
  height:40px;
  padding:0 12px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface-2);
  color:var(--text);
  font:inherit;
  font-size:13.5px;
  outline:0;
  box-shadow:none;
  transition:border-color .12s,box-shadow .12s,background .12s
}

body.app-ui #security_modal .security-field .form-control::-moz-placeholder{
  color:var(--text-3)
}

body.app-ui #security_modal .security-field .form-control::placeholder{
  color:var(--text-3)
}

body.app-ui #security_modal .security-field .form-control:hover{
  border-color:color-mix(in srgb,var(--brand) 28%,var(--border))
}

body.app-ui #security_modal .security-field .form-control:focus{
  border-color:var(--brand);
  background:var(--surface);
  box-shadow:0 0 0 3px var(--brand-weak)
}

body.app-ui #security_modal .security-pattern{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  padding:12px;
  border:1px solid var(--border-2);
  border-radius:11px;
  background:var(--surface-2)
}

body.app-ui #security_modal .security-hint{
  margin:0;
  color:var(--text-3);
  font-size:10.5px;
  text-align:center
}

body.app-ui #security_modal .security-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px
}

body.app-ui #security_modal .security-footnote{
  margin:0;
  color:var(--text-3);
  font-size:10.5px;
  text-align:left
}

/* The pre-repair checklist.

   One question per row, answered yes / no / not applicable. It arrived from the server with its
   own \3c style> block and its own palette, and laid itself out in Bootstrap columns — which the till
   does not carry, so every question spanned the dialog while the three answers shared a segmented
   bar built out of Bootstrap greens and reds. Scoped body.app-ui rather than .app-shell: the till
   has no shell element, and this dialog is opened from it.

   The radios keep their names, values and ids — the sale posts repair_checklist[<question>] and
   the answers are read back by them. */

body.app-ui .append_repair_checklists{
  display:grid;
  margin:0;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:12px
}

body.app-ui .append_repair_checklists:before,body.app-ui .append_repair_checklists:after{
  content:none
}

body.app-ui .append_repair_checklists>[class^=col-],body.app-ui .append_repair_checklists>[class*=" col-"]{
  width:auto;
  float:none;
  padding:0
}

body.app-ui .checklist-item{
  min-width:0;
  margin:0
}

body.app-ui .checklist-item>label{
  display:block;
  margin:0 0 6px;
  color:var(--text-2);
  font-size:11.5px;
  font-weight:700;
  overflow-wrap:anywhere
}

body.app-ui .checklist-toggle{
  position:relative;
  display:grid;
  overflow:hidden;
  grid-template-columns:repeat(3,1fr);
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface-2)
}

body.app-ui .checklist-toggle input[type=radio]{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none
}

body.app-ui .checklist-toggle label{
  display:grid;
  min-height:36px;
  margin:0;
  place-items:center;
  padding:7px 10px;
  border:0;
  background:transparent;
  color:var(--text-3);
  cursor:pointer;
  font-size:12px;
  font-weight:650;
  transition:background .15s,color .15s
}

body.app-ui .checklist-toggle label:not(:last-of-type){
  border-right:1px solid var(--border-2)
}

body.app-ui .checklist-toggle label:hover{
  background:var(--surface-3,var(--surface));
  color:var(--text-2)
}

/* The answer given reads as the answer given: filled, in the colour that answer means. */

body.app-ui .checklist-toggle input[value=yes]:checked+label{
  background:var(--brand-weak);
  color:var(--brand-strong);
  box-shadow:inset 0 0 0 1px var(--brand)
}

body.app-ui .checklist-toggle input[value=no]:checked+label{
  background:var(--danger-weak);
  color:var(--danger);
  box-shadow:inset 0 0 0 1px var(--danger)
}

body.app-ui .checklist-toggle input[value=not_applicable]:checked+label{
  background:var(--surface-3,var(--surface-2));
  color:var(--text-2);
  box-shadow:inset 0 0 0 1px var(--border)
}

body.app-ui .checklist-toggle input:focus-visible+label{
  outline:2px solid var(--brand);
  outline-offset:-2px
}

body.app-ui #checklist_modal .checklist-heading{
  min-width:0
}

body.app-ui #checklist_modal .checklist-heading .help-block{
  margin:2px 0 0;
  color:var(--text-3);
  font-size:10.5px
}

/* The dialog saves nothing of its own, so its footer says where the answers go instead of
   pretending the button is the thing that keeps them. */

body.app-ui #checklist_modal .checklist-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px
}

body.app-ui #checklist_modal .checklist-footnote{
  margin:0;
  color:var(--text-3);
  font-size:10.5px;
  text-align:left
}

/* Tagify base chrome. master.blade.php intentionally loads only app-ui.css, so the
   plugin's own stylesheet (bundled into vendor.css for the legacy layout) never
   reaches migrated screens. Without it the whitelist dropdown gets no positioning
   and Tagify renders it as a static block at the end of <body> — invisible — and the
   placeholder, which is drawn with content:attr(data-placeholder), never paints.
   Only the rules the plugin cannot work without are ported; the visual language
   comes from our own tokens. */

body.app-ui .tagify{
  position:relative;
  display:flex;
  box-sizing:border-box;
  flex-wrap:wrap;
  align-items:flex-start;
  border:1px solid var(--border);
  cursor:text;
  line-height:normal;
  outline:0;
  transition:.1s
}

body.app-ui .tagify:hover{
  border-color:color-mix(in srgb,var(--brand) 28%,var(--border))
}

body.app-ui .tagify.tagify--focus{
  border-color:var(--brand);
  transition:0s
}

body.app-ui .tagify+input,body.app-ui .tagify+textarea{
  display:none!important
}

body.app-ui .tagify__input{
  position:relative;
  display:inline-block;
  min-width:110px;
  box-sizing:inherit;
  flex-grow:1;
  margin:5px;
  padding:.3em .5em;
  color:inherit;
  line-height:inherit;
  white-space:pre-wrap
}

body.app-ui .tagify__input:focus{
  outline:0
}

body.app-ui .tagify__input br{
  display:none
}

body.app-ui .tagify__input:empty:before{
  content:attr(data-placeholder);
  display:inline-block;
  color:var(--text-3);
  pointer-events:none;
  white-space:nowrap
}

body.app-ui .tagify__input:focus:empty:before{
  opacity:.72
}

body.app-ui .tagify__tag{
  position:relative;
  z-index:1;
  display:inline-flex;
  align-items:center;
  margin:5px 0 5px 5px;
  cursor:default;
  outline:0
}

body.app-ui .tagify__tag>div{
  max-width:100%;
  box-sizing:border-box;
  padding:.3em .5em;
  border:1px solid var(--border);
  border-radius:7px;
  background:var(--surface-2);
  color:var(--text);
  line-height:inherit;
  vertical-align:top
}

body.app-ui .tagify__tag-text{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:pre-wrap
}

body.app-ui .tagify__tag__removeBtn{
  display:inline-flex;
  width:16px;
  height:16px;
  order:5;
  flex:0 0 16px;
  align-items:center;
  justify-content:center;
  border-radius:50px;
  color:var(--text-3);
  cursor:pointer;
  font:15px/1 Arial;
  transition:.16s ease-out
}

body.app-ui .tagify__tag__removeBtn:after{
  content:"×"
}

body.app-ui .tagify__tag__removeBtn:hover{
  background:var(--danger-weak);
  color:var(--danger)
}

body.app-ui .tagify--hasMaxTags .tagify__input{
  display:none
}

/* Product Configuration chips carry a step count and a read-more trigger. */

body.app-ui .tagify__tag .pc-cnt{
  display:inline-grid;
  min-width:17px;
  height:17px;
  place-items:center;
  padding:0 4px;
  border-radius:5px;
  background:color-mix(in srgb,var(--brand) 16%,transparent);
  color:var(--brand-strong);
  font-size:9px;
  font-weight:750
}

body.app-ui .tagify__tag .pc-readmore{
  display:inline-grid;
  width:17px;
  height:17px;
  place-items:center;
  padding:0;
  border:0;
  border-radius:5px;
  background:transparent;
  color:var(--text-3);
  cursor:pointer;
  font-size:11px;
  line-height:1
}

body.app-ui .tagify__tag .pc-readmore:hover{
  background:var(--surface-3,var(--surface-2));
  color:var(--brand-strong)
}

/* Tagify appends the suggestion dropdown to <body>, outside .app-shell. */

body.app-ui .tagify__dropdown{
  position:absolute;
  z-index:100000;
  overflow:hidden;
  box-sizing:border-box;
  transform:translateY(3px)
}

body.app-ui .tagify__dropdown[placement=top]{
  margin-top:0;
  transform:translateY(calc(-100% - 3px))
}

body.app-ui .tagify__dropdown__wrapper{
  max-height:290px;
  padding:6px;
  overflow:hidden auto;
  border:1px solid var(--border);
  border-radius:11px;
  background:var(--surface);
  box-shadow:0 16px 34px -16px rgba(15,23,42,.32)
}

body.app-ui .tagify__dropdown__wrapper:hover{
  overflow:auto
}

body.app-ui .tagify__dropdown__item{
  margin:1px 0;
  padding:8px 10px;
  border-radius:8px;
  color:var(--text-2);
  cursor:pointer;
  font-size:11.5px;
  line-height:1.45;
  outline:0
}

body.app-ui .tagify__dropdown__item strong{
  color:var(--text);
  font-weight:650
}

body.app-ui .tagify__dropdown__item--active,body.app-ui .tagify__dropdown__item:hover{
  background:var(--brand-weak);
  color:var(--brand-strong)
}

body.app-ui .tagify__dropdown__item--active strong,body.app-ui .tagify__dropdown__item:hover strong{
  color:var(--brand-strong)
}

body.app-ui .tagify__dropdown__item--active small,body.app-ui .tagify__dropdown__item:hover small{
  color:var(--brand-strong)!important;
  opacity:.75
}

body.app-ui .tagify__dropdown .tagify__dropdown__item--noMatch{
  color:var(--text-3);
  cursor:default;
  font-style:italic
}

/* Product Configuration picker: the whitelist rows show the service name plus its
   step count, so they lay out as name-left / count-right. */

body.app-ui .pc-dropdown .tagify__dropdown__item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px
}

body.app-ui .pc-dropdown .tagify__dropdown__item small{
  flex-shrink:0;
  color:var(--text-3)
}

/* Saved configurations rendered outside Tagify (job sheet view + list column). */

body.app-ui .pc-chip{
  display:inline-flex;
  align-items:center;
  gap:5px;
  margin:0 4px 4px 0;
  padding:3px 10px;
  border:1px solid color-mix(in srgb,var(--brand) 22%,var(--border));
  border-radius:999px;
  background:var(--brand-weak);
  color:var(--brand-strong);
  font-size:11.5px;
  font-weight:600
}

body.app-ui .pc-readmore{
  padding:0 2px;
  border:0;
  background:transparent;
  color:var(--brand-strong);
  cursor:pointer;
  font-size:11px;
  font-weight:600
}

body.app-ui .pc-readmore:hover{
  color:var(--brand);
  text-decoration:underline
}

/* Product Configuration steps dialog: a long SOP has to stay readable, so the body
   scrolls on its own while the heading and Close stay put, and every phase is a
   numbered card carrying its own step count. */

body.app-ui .pc-steps-dialog{
  width:min(94vw,620px)
}

body.app-ui .pc-steps-dialog .repair-form-dialog-heading h4{
  overflow-wrap:anywhere
}

body.app-ui .pc-steps-body{
  max-height:min(62vh,540px);
  padding:12px 16px;
  overflow-y:auto;
  overscroll-behavior:contain
}

body.app-ui .pc-steps-body .pc-sec{
  margin:0 0 9px;
  padding:9px 11px;
  border:1px solid var(--border-2);
  border-radius:11px;
  background:var(--surface-2)
}

body.app-ui .pc-steps-body .pc-sec:last-child{
  margin-bottom:0
}

body.app-ui .pc-steps-body .pc-sec-h{
  display:flex;
  align-items:center;
  gap:7px;
  margin:0 0 6px;
  color:var(--text);
  font-size:12px;
  font-weight:750
}

body.app-ui .pc-steps-body .pc-sec-index{
  display:grid;
  width:19px;
  height:19px;
  flex:0 0 19px;
  place-items:center;
  border-radius:6px;
  background:var(--brand-weak);
  color:var(--brand-strong);
  font-size:9.5px;
  font-weight:850
}

body.app-ui .pc-steps-body .pc-sec-title{
  min-width:0;
  flex:1 1 auto;
  overflow-wrap:anywhere
}

body.app-ui .pc-steps-body .pc-sec-count{
  display:grid;
  min-width:20px;
  height:19px;
  flex:0 0 auto;
  place-items:center;
  padding:0 6px;
  border:1px solid var(--border);
  border-radius:6px;
  background:var(--surface);
  color:var(--text-3);
  font-size:9.5px;
  font-weight:800
}

body.app-ui .pc-steps-body .pc-steps{
  margin:0;
  padding-left:21px;
  color:var(--text-2);
  font-size:12px;
  list-style:decimal
}

body.app-ui .pc-steps-body .pc-steps li{
  margin:4px 0;
  padding-left:2px;
  line-height:1.55
}

body.app-ui .pc-steps-body .pc-steps li::marker{
  color:var(--text-3);
  font-size:10.5px;
  font-weight:800
}

body.app-ui .pc-steps-body .pc-steps li a{
  color:var(--brand-strong);
  word-break:break-all
}

body.app-ui .pc-steps-body .pc-none{
  padding:14px 0;
  color:var(--text-3);
  font-size:12px;
  font-style:italic;
  text-align:center
}

.app-shell .repair-job-form .tagify{
  width:100%;
  min-height:86px;
  padding:5px;
  border-color:var(--border);
  border-radius:10px;
  background:var(--surface-2)
}

.app-shell .repair-job-form .tagify:focus-within{
  border-color:var(--brand);
  background:var(--surface);
  box-shadow:0 0 0 3px var(--brand-weak)
}

.app-shell .repair-job-form .tagify__tag{
  margin:4px 2px 0
}

.app-shell .repair-job-form .tagify__tag>div{
  border:1px solid color-mix(in srgb,var(--brand) 22%,var(--border));
  border-radius:7px;
  background:var(--brand-weak);
  color:var(--brand-strong);
  font-size:10.5px
}

.app-shell .repair-condition-field{
  min-width:0
}

.app-shell .repair-condition-field .form-group{
  display:flex;
  min-width:0;
  min-height:190px;
  flex-direction:column;
  margin:0;
  padding:11px 12px;
  border:1px solid var(--border-2);
  border-radius:11px;
  background:var(--surface-2)
}

.app-shell .repair-condition-field .form-group>label{
  margin-bottom:2px!important;
  color:var(--text);
  font-size:11.5px
}

.app-shell .repair-condition-field .form-group>small{
  display:block;
  min-height:28px;
  margin-bottom:7px;
  color:var(--text-3);
  font-size:9.5px;
  line-height:1.45
}

.app-shell .repair-condition-field .tagify{
  display:flex!important;
  width:100%!important;
  height:128px;
  min-height:128px;
  max-height:128px;
  flex-flow:row wrap!important;
  align-items:flex-start;
  align-content:flex-start;
  justify-content:flex-start!important;
  gap:6px;
  overflow:auto;
  padding:7px!important;
  border:1px solid var(--border)!important;
  border-radius:10px;
  background:var(--surface);
  cursor:text
}

.app-shell .repair-condition-field .tagify:hover{
  border-color:color-mix(in srgb,var(--brand) 28%,var(--border))!important
}

.app-shell .repair-condition-field .tagify.tagify--focus,.app-shell .repair-condition-field .tagify:focus-within{
  border-color:var(--brand)!important;
  outline:0!important;
  box-shadow:0 0 0 3px var(--brand-weak)!important
}

.app-shell .repair-condition-field .tagify__tag{
  display:inline-flex!important;
  width:auto!important;
  max-width:100%!important;
  flex:0 1 auto!important;
  align-items:center!important;
  margin:0!important
}

.app-shell .repair-condition-field .tagify__tag>div{
  display:inline-flex!important;
  width:auto!important;
  max-width:100%!important;
  flex:0 1 auto!important;
  align-items:center;
  gap:5px;
  padding:7px 10px!important
}

.app-shell .repair-condition-field .tagify__tag-text{
  width:auto!important;
  max-width:min(270px,100%)!important;
  white-space:normal!important;
  overflow-wrap:anywhere
}

.app-shell .repair-condition-field .tagify__input,.app-shell .repair-condition-field .tagify__input:focus,.app-shell .repair-condition-field .tagify__input:focus-visible{
  order:-1!important;
  display:block;
  width:100%!important;
  min-width:100%!important;
  min-height:38px;
  flex:0 0 100%!important;
  margin:0!important;
  padding:9px 10px!important;
  border:1px solid var(--border-2)!important;
  border-radius:8px!important;
  background:var(--surface-2)!important;
  color:var(--text-2);
  font-size:11.5px;
  line-height:1.45;
  outline:0!important;
  box-shadow:none!important
}

.app-shell .repair-condition-field .tagify.tagify--focus .tagify__input{
  border-color:color-mix(in srgb,var(--brand) 24%,var(--border))!important;
  background:var(--surface)!important
}

.app-shell .repair-condition-field .tagify__input:empty:before{
  color:var(--text-3)!important;
  font-size:10.5px;
  font-weight:550;
  opacity:.9!important
}

.app-shell .repair-condition-field .tagify__input:focus:empty:before{
  color:var(--text-3)!important;
  opacity:.78!important
}

.app-shell .repair-condition-field textarea.tags-look[aria-hidden=true]{
  display:none!important
}

.app-shell .repair-job-form input[type=file]{
  width:100%;
  min-height:42px;
  padding:7px;
  border:1px dashed color-mix(in srgb,var(--brand) 35%,var(--border));
  border-radius:10px;
  background:var(--surface-2);
  font-size:11px
}

.app-shell .repair-job-form .help-block{
  margin:5px 0 0;
  font-size:9.5px
}

.app-shell .repair-form-subhead{
  display:flex;
  min-height:47px;
  align-items:center;
  gap:9px;
  margin:7px 0 13px;
  padding:9px 11px;
  border:1px solid var(--border-2);
  border-radius:10px;
  background:linear-gradient(110deg,color-mix(in srgb,var(--brand-weak) 48%,var(--surface-2)),var(--surface-2))
}

.app-shell .repair-form-subhead:first-child{
  margin-top:0
}

.app-shell .repair-form-subhead>span{
  display:grid;
  width:30px;
  height:30px;
  flex:0 0 30px;
  place-items:center;
  border-radius:8px;
  background:var(--surface);
  color:var(--brand-strong);
  box-shadow:var(--shadow-sm)
}

.app-shell .repair-form-subhead strong,.app-shell .repair-form-subhead small{
  display:block
}

.app-shell .repair-form-subhead strong{
  color:var(--text);
  font-size:11px;
  font-weight:810
}

.app-shell .repair-form-subhead small{
  margin-top:1px;
  color:var(--text-3);
  font-size:9.5px
}

.app-shell .repair-file-field .form-group,.app-shell .repair-notification-field .form-group{
  min-height:112px;
  margin-bottom:5px;
  padding:11px 12px;
  border:1px solid var(--border-2);
  border-radius:11px;
  background:var(--surface-2)
}

.app-shell .repair-document-upload{
  position:relative;
  display:flex;
  min-width:0;
  align-items:stretch;
  gap:7px;
  margin-top:7px
}

.app-shell .repair-document-input{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  min-height:0!important;
  margin:-1px!important;
  padding:0!important;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0!important;
  opacity:0
}

.app-shell .repair-document-picker{
  display:grid!important;
  min-width:0;
  min-height:52px;
  flex:1;
  grid-template-columns:34px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  margin:0!important;
  padding:7px 8px!important;
  border:1px dashed color-mix(in srgb,var(--brand) 34%,var(--border));
  border-radius:10px;
  background:var(--surface);
  cursor:pointer;
  transition:border-color .15s,background .15s,box-shadow .15s
}

.app-shell .repair-document-picker:hover{
  border-color:var(--brand);
  background:color-mix(in srgb,var(--brand-weak) 32%,var(--surface))
}

.app-shell .repair-document-input:focus-visible+.repair-document-picker{
  border-color:var(--brand);
  outline:0;
  box-shadow:0 0 0 3px var(--brand-weak)
}

.app-shell .repair-document-picker__icon{
  display:grid;
  width:34px;
  height:34px;
  place-items:center;
  border-radius:9px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .repair-document-picker__copy{
  min-width:0
}

.app-shell .repair-document-picker__copy strong,.app-shell .repair-document-picker__copy small{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .repair-document-picker__copy strong{
  color:var(--text-2);
  font-size:11px;
  font-weight:780
}

.app-shell .repair-document-picker__copy small{
  margin-top:2px;
  color:var(--text-3);
  font-size:9.5px;
  font-weight:550
}

.app-shell .repair-document-picker__action{
  display:inline-flex;
  height:32px;
  align-items:center;
  gap:5px;
  padding:0 9px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface-2);
  color:var(--brand-strong);
  font-size:10px;
  font-weight:750;
  white-space:nowrap
}

.app-shell .repair-document-clear{
  display:grid;
  width:38px;
  flex:0 0 38px;
  place-items:center;
  border:1px solid color-mix(in srgb,var(--danger) 26%,var(--border));
  border-radius:9px;
  background:var(--danger-weak);
  color:var(--danger)
}

.app-shell .repair-document-clear:hover{
  border-color:var(--danger)
}

.app-shell .repair-document-clear.hidden{
  display:none!important
}

.app-shell .repair-field-help{
  display:block;
  margin:1px 0 9px;
  color:var(--text-3);
  font-size:9.5px
}

.app-shell .repair-notification-options{
  display:flex;
  gap:8px
}

.app-shell .repair-notification-options .checkbox-inline{
  display:flex;
  flex:1;
  margin:0
}

.app-shell .repair-notification-options .checkbox-inline label{
  width:100%;
  justify-content:center;
  margin:0!important;
  background:var(--surface)
}

.app-shell .repair-notification-options .checkbox-inline label>svg{
  color:var(--brand-strong)
}

.app-shell .repair-workshop-grid>.repair-form-actions{
  margin-top:7px;
  padding:14px 0 0!important
}

.app-shell .repair-form-actions{
  display:flex!important;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  margin-top:2px;
  padding-top:13px!important;
  border-top:1px solid var(--border-2);
  text-align:initial!important
}

.app-shell .repair-form-actions .btn-primary,.app-shell .repair-form-actions .btn-ghost{
  display:inline-flex;
  height:40px;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:0 13px;
  border-radius:10px;
  font-size:11.5px;
  font-weight:750
}

.app-shell .repair-form-actions #save{
  order:3
}

.app-shell .repair-form-actions #save_and_upload_docs{
  order:2
}

.app-shell .repair-form-actions #save_and_add_parts{
  order:1
}

.app-shell .repair-job-form .file-input{
  margin-bottom:0
}

.app-shell .repair-job-form .file-preview{
  border-color:var(--border);
  border-radius:10px;
  background:var(--surface-2)
}

@media(max-width:980px){
  .app-shell .repair-form-grid>.col-md-3,.app-shell .repair-form-grid>.col-md-4,.app-shell .repair-form-grid>.col-md-5,.app-shell .repair-form-grid>.col-sm-4{
    grid-column:span 6
  }
}

@media(max-width:760px){
  .app-shell .repair-form-actions{
    align-items:stretch;
    flex-direction:column
  }

  .app-shell .repair-form-actions>*{
    width:100%
  }

  .app-shell .repair-form-section-head{
    grid-template-columns:36px minmax(0,1fr) 25px
  }

  .app-shell .repair-form-grid>.col-md-3,.app-shell .repair-form-grid>.col-md-4,.app-shell .repair-form-grid>.col-md-5,.app-shell .repair-form-grid>.col-sm-4,.app-shell .repair-form-grid>.col-md-6,.app-shell .repair-form-grid>.col-sm-6{
    grid-column:1/-1
  }
}

/* Repair job sheet detail: readable on screen and still printable as the original document. */

.app-shell .repair-job-detail-page{
  gap:14px
}

.app-shell .repair-job-detail-page .repair-page-head{
  align-items:center
}

.app-shell .repair-job-detail-page .repair-page-actions{
  justify-content:flex-end
}

.app-shell .repair-job-detail-page .repair-page-actions>*{
  height:38px;
  padding:0 11px;
  font-size:10.5px
}

.app-shell .repair-job-detail-shell{
  padding:0!important
}

.app-shell .repair-job-detail-shell>.row{
  margin:0
}

.app-shell .repair-job-detail-shell>.row>[class*="col-"]{
  padding:0
}

.app-shell .repair-job-document-card{
  overflow:hidden;
  margin:0!important;
  border:1px solid var(--border)!important;
  border-radius:14px!important;
  background:var(--surface)!important;
  box-shadow:var(--shadow-sm)!important
}

.app-shell .repair-job-document-card>.box-header{
  display:none
}

.app-shell .repair-job-document{
  width:min(100%,1120px);
  margin:0 auto;
  padding:24px!important;
  background:var(--surface)
}

.app-shell .repair-job-document>.width-100:first-child{
  display:flex;
  min-height:108px;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:4px 4px 18px;
  border-bottom:1px solid var(--border)
}

.app-shell .repair-job-document>.width-100:first-child:after{
  display:none
}

.app-shell .repair-job-document>.width-100:first-child>.width-50{
  width:auto!important;
  max-width:55%;
  float:none!important;
  padding:0!important
}

.app-shell .repair-job-document>.width-100:first-child>.width-50:first-child{
  flex:1
}

.app-shell .repair-job-document>.width-100:first-child>.width-50:last-child{
  flex:1.2
}

.app-shell .repair-job-document>.width-100:first-child p{
  margin:0!important;
  padding:0!important;
  color:var(--text-2);
  font-size:12px!important;
  line-height:1.55;
  text-align:right!important
}

.app-shell .repair-job-document>.width-100:first-child .font-23{
  color:var(--text);
  font-size:20px!important;
  font-weight:850;
  letter-spacing:-.2px
}

.app-shell .repair-job-document>.width-100:first-child img{
  max-width:180px!important;
  max-height:64px!important;
  margin:0!important
}

/* Every cell draws its own right and bottom rule and the table draws only the top and
   left, so the outer frame is formed by the edge cells themselves. Removing the right
   rule from :last-child instead used to drop the divider on any row whose last element
   is not actually at the right edge - the Date cell spans two rows, so the Job sheet
   number row lost its divider. */

.app-shell .repair-job-document>.table{
  width:100%;
  margin:18px 0 0!important;
  border-collapse:separate!important;
  border-spacing:0;
  overflow:hidden;
  border:0!important;
  border-top:1px solid var(--border)!important;
  border-left:1px solid var(--border)!important;
  border-radius:11px;
  background:var(--surface)
}

.app-shell .repair-job-document>.table>tbody>tr>th,.app-shell .repair-job-document>.table>tbody>tr>td{
  padding:12px 14px!important;
  border:0!important;
  border-right:1px solid var(--border)!important;
  border-bottom:1px solid var(--border)!important;
  color:var(--text-2);
  font-size:12.5px!important;
  line-height:1.55;
  vertical-align:top
}

.app-shell .repair-job-document>.table>tbody>tr:hover>*{
  background:color-mix(in srgb,var(--brand-weak) 24%,var(--surface))
}

.app-shell .repair-job-document>.table b,.app-shell .repair-job-document>.table strong{
  color:var(--text);
  font-weight:800
}

.app-shell .repair-job-document>.table a{
  color:var(--brand-strong);
  font-weight:700
}

.app-shell .repair-job-document>.table .label{
  display:inline-flex;
  padding:3px 7px;
  border-radius:999px!important;
  color:#fff;
  font-size:9px;
  font-weight:750
}

.app-shell .repair-job-document .pc-chip{
  display:inline-flex;
  align-items:center;
  gap:5px;
  margin:2px 4px 2px 0;
  padding:5px 10px;
  border:1px solid color-mix(in srgb,var(--brand) 26%,var(--border));
  border-radius:7px;
  background:var(--brand-weak);
  color:var(--brand-strong);
  font-size:11.5px;
  font-weight:700
}

/* Job sheet document primitives: results, tags and signatures read as a printed record
   rather than as raw table text. */

.app-shell .repair-doc-checklist{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:5px
}

.app-shell .repair-doc-check{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:4px 10px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--surface-2);
  color:var(--text-2);
  font-size:11.5px;
  font-weight:700
}

.app-shell .repair-doc-check svg{
  flex:0 0 auto
}

.app-shell .repair-doc-check.is-yes{
  border-color:color-mix(in srgb,var(--brand) 30%,var(--border));
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .repair-doc-check.is-no{
  border-color:color-mix(in srgb,var(--danger) 30%,var(--border));
  background:var(--danger-weak);
  color:var(--danger)
}

.app-shell .repair-doc-tag{
  display:inline-flex;
  align-items:center;
  margin:2px 5px 2px 0;
  padding:4px 10px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--surface-2);
  color:var(--text-2);
  font-size:11.5px;
  font-weight:650
}

.app-shell .repair-doc-empty{
  color:var(--text-3);
  font-weight:600
}

.app-shell .repair-doc-parts{
  width:100%;
  margin:4px 0 0
}

.app-shell .repair-doc-parts td{
  padding:5px 0!important;
  border:0!important;
  font-size:12.5px
}

.app-shell .repair-doc-parts tr+tr td{
  border-top:1px dashed var(--border-2)!important
}

.app-shell .repair-doc-parts td:last-child{
  color:var(--text);
  font-weight:750;
  text-align:right;
  white-space:nowrap
}

.app-shell .repair-doc-signatures>td{
  padding-bottom:18px!important
}

.app-shell .repair-doc-signline{
  display:block;
  height:48px;
  margin:8px 0 6px;
  border-bottom:1px dashed var(--text-3)
}

.app-shell .repair-doc-signatures small{
  color:var(--text-3);
  font-size:11px
}

.app-shell .repair-job-detail-shell>.row.no-print{
  margin-top:13px
}

.app-shell .repair-job-detail-shell>.row:last-child{
  gap:13px;
  margin-top:13px
}

.app-shell .repair-job-detail-shell>.row:last-child>[class*="col-"]{
  flex:1;
  width:auto;
  min-width:0
}

.app-shell .repair-job-support-card{
  height:100%;
  overflow:hidden;
  margin:0!important;
  border:1px solid var(--border)!important;
  border-radius:13px!important;
  background:var(--surface)!important;
  box-shadow:var(--shadow-sm)!important
}

.app-shell .repair-job-support-card>.box-header{
  padding:12px 14px!important;
  border-bottom:1px solid var(--border-2)!important;
  background:var(--surface-2)
}

.app-shell .repair-job-support-card .box-title{
  display:flex;
  align-items:center;
  gap:7px;
  margin:0;
  color:var(--text);
  font-size:13.5px;
  font-weight:820
}

.app-shell .repair-job-support-card .box-title svg{
  flex:0 0 auto;
  color:var(--brand-strong)
}

.app-shell .repair-job-support-card>.box-body{
  padding:13px!important
}

/* Vehicle health check panel — was still on the legacy button and label classes, which
   the new stack does not define, so its actions rendered as plain text. */

.app-shell .vhc-panel .vhc-template-field{
  min-width:240px;
  margin:0 9px 0 0
}

.app-shell .vhc-panel .vhc-template-field .form-control{
  height:42px
}

.app-shell .vhc-panel p{
  color:var(--text-2);
  font-size:12.5px
}

.app-shell .vhc-panel p strong{
  color:var(--text);
  font-size:13.5px
}

.app-shell .vhc-status-badge{
  display:inline-flex;
  align-items:center;
  margin-left:8px;
  padding:3px 10px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--surface-2);
  color:var(--text-2);
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.02em;
  text-transform:uppercase
}

.app-shell .vhc-status-badge.is-submitted{
  border-color:color-mix(in srgb,var(--blue,#3b82d0) 30%,var(--border));
  background:color-mix(in srgb,var(--blue,#3b82d0) 12%,transparent);
  color:var(--blue,#3b82d0)
}

.app-shell .vhc-status-badge.is-reviewed{
  border-color:color-mix(in srgb,var(--brand) 30%,var(--border));
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .vhc-count-badge{
  display:inline-flex;
  align-items:center;
  margin:3px 5px 0 0;
  padding:3px 10px;
  border-radius:999px;
  color:#fff;
  font-size:10.5px;
  font-weight:800
}

.app-shell .vhc-panel-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
  gap:7px
}

.app-shell .vhc-panel-actions form{
  display:inline-flex;
  margin:0
}

.app-shell .vhc-panel-actions .btn-ghost,.app-shell .vhc-panel .btn-primary{
  display:inline-flex;
  height:38px;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:0 13px;
  border-radius:9px;
  font-size:12px;
  font-weight:750
}

.app-shell .vhc-panel-actions .btn-ghost.is-danger{
  width:38px;
  padding:0;
  border-color:color-mix(in srgb,var(--danger) 28%,var(--border));
  color:var(--danger)
}

.app-shell .vhc-panel-actions .btn-ghost.is-danger:hover{
  background:var(--danger-weak)
}

/* Vehicle health check detail page */

.app-shell .repair-vhc-shell{
  display:flex;
  flex-direction:column;
  gap:13px;
  padding:0!important
}

.app-shell .repair-vhc-page .repair-page-head p{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:9px
}

.app-shell .vhc-inline-form{
  display:inline-flex;
  margin:0
}

.app-shell .vhc-report-menu{
  position:relative;
  display:inline-flex
}

.app-shell .vhc-report-menu .caret{
  margin-left:2px;
  border-top-color:currentColor
}

.app-shell .repair-vhc-context{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:1px;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:13px;
  background:var(--border-2);
  box-shadow:var(--shadow-sm)
}

.app-shell .repair-vhc-context-item{
  display:flex;
  flex-direction:column;
  gap:3px;
  padding:12px 14px;
  background:var(--surface)
}

.app-shell .repair-vhc-context-item>span{
  color:var(--text-3);
  font-size:10px;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase
}

.app-shell .repair-vhc-context-item>strong{
  color:var(--text);
  font-size:13.5px;
  font-weight:750;
  overflow-wrap:anywhere
}

.app-shell .repair-vhc-waiting{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  border:1px solid color-mix(in srgb,var(--brand) 26%,var(--border));
  border-radius:13px;
  background:var(--brand-weak)
}

.app-shell .repair-vhc-waiting>span{
  display:grid;
  width:38px;
  height:38px;
  flex:0 0 38px;
  place-items:center;
  border-radius:11px;
  background:var(--surface);
  color:var(--brand-strong)
}

.app-shell .repair-vhc-waiting>div{
  flex:1 1 auto;
  min-width:0
}

.app-shell .repair-vhc-waiting strong{
  display:block;
  color:var(--brand-strong);
  font-size:13px;
  font-weight:820
}

.app-shell .repair-vhc-waiting small{
  display:block;
  margin-top:2px;
  color:var(--text-2);
  font-size:11.5px;
  line-height:1.5
}

.app-shell .repair-vhc-waiting em{
  flex:0 0 auto;
  color:var(--brand-strong);
  font-size:14px;
  font-style:normal;
  font-weight:850
}

.app-shell .repair-vhc-summary{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:11px
}

.app-shell .repair-vhc-stat{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:2px;
  padding:15px 12px;
  border:1px solid color-mix(in srgb,var(--stat-color) 22%,var(--border));
  border-radius:13px;
  background:var(--stat-bg);
  text-align:center
}

.app-shell .repair-vhc-stat strong{
  color:var(--stat-color);
  font-size:26px;
  font-weight:850;
  line-height:1.1
}

.app-shell .repair-vhc-stat span{
  color:var(--stat-color);
  font-size:11.5px;
  font-weight:750;
  opacity:.92
}

.app-shell .repair-vhc-items>.box-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px
}

.app-shell .repair-vhc-items-count{
  display:grid;
  min-width:26px;
  height:22px;
  place-items:center;
  padding:0 8px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--surface);
  color:var(--text-3);
  font-size:11px;
  font-weight:800
}

.app-shell .repair-vhc-table-wrap{
  overflow-x:auto
}

.app-shell .repair-vhc-table{
  width:100%!important;
  min-width:720px;
  margin:0!important;
  border-collapse:separate!important;
  border-spacing:0
}

.app-shell .repair-vhc-table thead th{
  padding:10px 12px!important;
  border:0!important;
  border-bottom:1px solid var(--border-2)!important;
  background:var(--surface-2);
  color:var(--text-3);
  font-size:10.5px;
  font-weight:850;
  letter-spacing:.04em;
  text-align:left;
  text-transform:uppercase;
  white-space:nowrap
}

.app-shell .repair-vhc-table tbody td{
  padding:11px 12px!important;
  border:0!important;
  border-bottom:1px solid var(--border-2)!important;
  color:var(--text-2);
  font-size:12.5px;
  vertical-align:middle
}

.app-shell .repair-vhc-table tbody tr:last-child td{
  border-bottom:0!important
}

.app-shell .repair-vhc-table tbody tr:hover td{
  background:color-mix(in srgb,var(--brand-weak) 26%,transparent)
}

.app-shell .repair-vhc-item-name{
  color:var(--text);
  font-weight:650;
  overflow-wrap:anywhere
}

.app-shell .repair-vhc-col-no{
  width:54px;
  color:var(--text-3);
  font-weight:750;
  text-align:center
}

.app-shell .repair-vhc-col-status{
  width:170px
}

.app-shell .repair-vhc-col-photo{
  width:110px
}

.app-shell .repair-vhc-section>td{
  padding:9px 12px!important;
  background:var(--surface-2)!important;
  color:var(--text)
}

.app-shell .repair-vhc-section strong{
  font-size:12px;
  font-weight:820
}

.app-shell .repair-vhc-section small{
  display:inline-grid;
  min-width:20px;
  height:19px;
  margin-left:8px;
  padding:0 6px;
  place-items:center;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--surface);
  color:var(--text-3);
  font-size:9.5px;
  font-weight:800
}

.app-shell .repair-vhc-chip{
  display:inline-flex;
  align-items:center;
  padding:4px 11px;
  border:1px solid color-mix(in srgb,var(--chip-color,var(--text-3)) 24%,var(--border));
  border-radius:999px;
  background:var(--chip-bg,var(--surface-2));
  color:var(--chip-color,var(--text-3));
  font-size:11px;
  font-weight:800;
  white-space:nowrap
}

.app-shell .repair-vhc-chip.is-empty{
  border-style:dashed
}

.app-shell .repair-vhc-photo{
  display:inline-flex;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:9px
}

.app-shell .repair-vhc-photo img{
  display:block;
  width:62px;
  height:62px;
  -o-object-fit:cover;
     object-fit:cover
}

.app-shell .repair-vhc-notes{
  margin-top:12px;
  padding-top:11px;
  border-top:1px solid var(--border-2)
}

.app-shell .repair-vhc-notes p{
  margin:0 0 5px;
  color:var(--text-2);
  font-size:12.5px;
  line-height:1.55
}

.app-shell .repair-vhc-notes p:last-child{
  margin-bottom:0
}

.app-shell .repair-vhc-notes strong{
  color:var(--text)
}

@media(max-width:760px){
  .app-shell .repair-vhc-page .repair-page-actions{
    width:100%;
    flex-wrap:wrap
  }

  .app-shell .repair-vhc-summary{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}

.app-shell .vhc-panel-body{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px
}

.app-shell .vhc-panel-info{
  min-width:min(320px,100%);
  flex:1 1 320px
}

.app-shell .vhc-panel-title{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin:0 0 5px!important
}

.app-shell .vhc-panel-meta{
  margin:0 0 8px!important
}

.app-shell .vhc-panel-counts{
  margin:0!important
}

.app-shell .vhc-progress{
  width:min(320px,100%);
  height:6px;
  overflow:hidden;
  border-radius:999px;
  background:var(--surface-3,var(--surface-2))
}

.app-shell .vhc-progress>span{
  display:block;
  height:100%;
  border-radius:999px;
  background:var(--brand);
  transition:width .25s ease
}

.app-shell .vhc-panel-actions{
  flex:0 0 auto;
  align-self:center
}

/* Activity log: full width, quiet header, one line per event. */

.app-shell .repair-activity-scroll{
  overflow-x:auto
}

.app-shell .repair-activity-table{
  width:100%!important;
  min-width:520px;
  margin:0!important;
  border-collapse:separate!important;
  border-spacing:0
}

.app-shell .repair-activity-table thead th{
  padding:9px 11px!important;
  border:0!important;
  border-bottom:1px solid var(--border-2)!important;
  background:var(--surface-2);
  color:var(--text-3);
  font-size:10.5px;
  font-weight:850;
  letter-spacing:.04em;
  text-align:left;
  text-transform:uppercase;
  white-space:nowrap
}

.app-shell .repair-activity-table thead th:first-child{
  border-radius:9px 0 0 0
}

.app-shell .repair-activity-table thead th:last-child{
  border-radius:0 9px 0 0
}

.app-shell .repair-activity-table tbody td{
  padding:10px 11px!important;
  border:0!important;
  border-bottom:1px solid var(--border-2)!important;
  color:var(--text-2);
  font-size:12.5px;
  vertical-align:top
}

.app-shell .repair-activity-table tbody tr:last-child td{
  border-bottom:0!important
}

.app-shell .repair-activity-table tbody tr:hover td{
  background:color-mix(in srgb,var(--brand-weak) 26%,transparent)
}

.app-shell .repair-activity-date{
  color:var(--text-3);
  font-size:11.5px;
  font-weight:700;
  white-space:nowrap
}

.app-shell .repair-activity-action{
  display:inline-flex;
  align-items:center;
  padding:3px 9px;
  border:1px solid color-mix(in srgb,var(--brand) 22%,var(--border));
  border-radius:999px;
  background:var(--brand-weak);
  color:var(--brand-strong);
  font-size:11px;
  font-weight:750
}

.app-shell .repair-activity-meta{
  display:block;
  color:var(--text-3);
  font-size:11px;
  line-height:1.5
}

.app-shell .repair-activity-none{
  padding:18px 11px!important;
  color:var(--text-3);
  font-size:12.5px;
  font-style:italic;
  text-align:center
}

@media(max-width:680px){
  .app-shell .vhc-panel-actions{
    width:100%;
    justify-content:flex-start
  }

  .app-shell .vhc-panel-actions>*{
    flex:1 1 auto
  }
}

.app-shell .repair-job-support-card table{
  margin:0!important
}

.app-shell .repair-job-support-card table td{
  padding:10px 11px!important;
  border-color:var(--border-2)!important;
  font-size:12.5px;
  vertical-align:middle
}

@media(max-width:760px){
  .app-shell .repair-job-detail-page .repair-page-actions{
    width:100%;
    justify-content:flex-start
  }

  .app-shell .repair-job-detail-page .repair-page-actions>*{
    flex:1
  }

  .app-shell .repair-job-document{
    padding:14px!important
  }

  .app-shell .repair-job-document>.width-100:first-child{
    align-items:flex-start;
    flex-direction:column
  }

  .app-shell .repair-job-document>.width-100:first-child>.width-50{
    width:100%!important;
    max-width:none
  }

  .app-shell .repair-job-document>.width-100:first-child p{
    text-align:left!important
  }

  .app-shell .repair-job-detail-shell>.row:last-child{
    display:block
  }

  .app-shell .repair-job-detail-shell>.row:last-child>[class*="col-"]+ [class*="col-"]{
    margin-top:12px
  }
}

@media print{
  .app-shell .repair-job-detail-page{
    display:block!important
  }

  .app-shell .repair-job-document-card{
    border:0!important;
    box-shadow:none!important
  }

  .app-shell .repair-job-document{
    width:100%;
    padding:0!important
  }

  .app-shell .repair-job-document>.table{
    border-radius:0
  }

  .app-shell .repair-doc-check,.app-shell .repair-doc-tag,.app-shell .repair-job-document .pc-chip{
    -webkit-print-color-adjust:exact;
    print-color-adjust:exact
  }

  .app-shell .repair-job-document>.table>tbody>tr:hover>*{
    background:transparent
  }
}

/* Print format 1 prints the live page instead of cloning #job_sheet into an iframe:
   a clone loses the .app-shell ancestor, so every .app-shell rule stops matching and
   the document prints unstyled. Same approach as the POS receipt print. */

@media print{
  body.app-ui.printing-job-sheet{
    height:auto!important;
    overflow:visible!important;
    background:var(--surface)!important
  }

  body.app-ui.printing-job-sheet .app-shell{
    display:block!important;
    height:auto!important;
    overflow:visible!important;
    background:var(--surface)!important
  }

  body.app-ui.printing-job-sheet .app-shell>.sidebar,
  body.app-ui.printing-job-sheet .app-shell>.sidebar-backdrop,
  body.app-ui.printing-job-sheet .app-shell>.flex-1>.topbar,
  body.app-ui.printing-job-sheet .app-shell>.flex-1>#receipt_section,
  body.app-ui.printing-job-sheet .app-shell>.view_modal{
    display:none!important
  }

  body.app-ui.printing-job-sheet>:not(.app-shell){
    display:none!important
  }

  body.app-ui.printing-job-sheet .app-shell>.flex-1{
    display:block!important;
    width:100%!important;
    height:auto!important;
    overflow:visible!important
  }

  body.app-ui.printing-job-sheet .app-shell>.flex-1>#scrollable-container{
    height:auto!important;
    overflow:visible!important
  }

  body.app-ui.printing-job-sheet .no-print{
    display:none!important
  }

  body.app-ui.printing-job-sheet .repair-job-detail-page{
    padding:0!important
  }

  body.app-ui.printing-job-sheet .repair-job-detail-shell>.row+.row{
    display:none!important
  }

  body.app-ui.printing-job-sheet .repair-job-document-card{
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important
  }

  body.app-ui.printing-job-sheet .repair-job-document{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important
  }

  body.app-ui.printing-job-sheet .repair-job-document>.table{
    border-radius:0
  }

  body.app-ui.printing-job-sheet .repair-doc-check,
  body.app-ui.printing-job-sheet .repair-doc-tag,
  body.app-ui.printing-job-sheet .repair-job-document .pc-chip{
    -webkit-print-color-adjust:exact;
    print-color-adjust:exact
  }

  body.app-ui.printing-job-sheet .repair-job-document>.table>tbody>tr:hover>*{
    background:transparent
  }
}

@media(max-width:1050px){
  .app-shell .repair-bottom-grid{
    grid-template-columns:1fr
  }

  .app-shell .repair-team-card{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);
    align-items:stretch
  }

  .app-shell .repair-team-card>header{
    border-right:1px solid var(--border-2);
    border-bottom:0
  }

  .app-shell .repair-team-link{
    grid-column:1/-1
  }
}

@media(max-width:760px){
  .app-shell .repair-page-head{
    align-items:stretch;
    flex-direction:column
  }

  .app-shell .repair-page-actions>*{
    flex:1;
    justify-content:center
  }

  .app-shell .repair-section-head{
    align-items:flex-start
  }

  .app-shell .repair-section-total{
    margin-top:2px
  }

  .app-shell .repair-status-grid,.app-shell .repair-chart-grid{
    grid-template-columns:1fr
  }

  .app-shell .repair-status-card{
    border-right:0;
    border-bottom:1px solid var(--border-2)
  }

  .app-shell .repair-status-card:last-child{
    border-bottom:0
  }

  .app-shell .repair-team-card{
    display:block
  }

  .app-shell .repair-team-card>header{
    border-right:0;
    border-bottom:1px solid var(--border-2)
  }
}

/* Repair job sheet supporting workflows */

.app-shell .repair-job-support-page{
  width:min(100%,1180px);
  margin-inline:auto;
  gap:13px
}

.app-shell .repair-support-context-card,.app-shell .repair-support-work-card{
  overflow:visible;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

.app-shell .repair-support-card-head{
  display:flex;
  min-height:60px;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-bottom:1px solid var(--border-2);
  background:linear-gradient(110deg,var(--surface-2),var(--surface));
  border-radius:14px 14px 0 0
}

.app-shell .repair-support-card-head>span{
  display:grid;
  width:36px;
  height:36px;
  flex:0 0 36px;
  place-items:center;
  border-radius:10px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .repair-support-card-head strong,.app-shell .repair-support-card-head small{
  display:block
}

.app-shell .repair-support-card-head strong{
  color:var(--text);
  font-size:14px;
  font-weight:820
}

.app-shell .repair-support-card-head small{
  margin-top:2px;
  color:var(--text-3);
  font-size:11.5px
}

.app-shell .repair-support-card-body{
  padding:14px
}

.app-shell .repair-support-card-body>.row{
  margin-bottom:0
}

.app-shell .repair-support-context-table{
  padding:4px 14px 7px
}

.app-shell .repair-support-context-table .table{
  margin:0
}

.app-shell .repair-support-context-table th,.app-shell .repair-support-context-table td,.app-shell .repair-support-card-body>.row>.col-md-6>.table th,.app-shell .repair-support-card-body>.row>.col-md-6>.table td{
  padding:11px 12px!important;
  border-color:var(--border-2)!important;
  color:var(--text-2);
  font-size:13px;
  vertical-align:middle
}

.app-shell .repair-support-context-table th,.app-shell .repair-support-card-body>.row>.col-md-6>.table th{
  width:18%;
  color:var(--text-3);
  font-size:11.5px;
  font-weight:750
}

.app-shell .repair-parts-search{
  max-width:640px;
  margin:2px auto
}

.app-shell .repair-parts-search .form-control{
  height:46px;
  padding-left:40px;
  border-radius:10px;
  font-size:14px
}

.app-shell .repair-parts-search>svg{
  left:13px
}

.app-shell .repair-add-parts-page #job_sheet_parts_table{
  overflow:hidden;
  margin:5px 0 0;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface)
}

.app-shell .repair-add-parts-page #job_sheet_parts_table thead th{
  height:42px;
  padding:10px 12px;
  border-color:var(--border-2);
  background:var(--surface-2);
  color:var(--text-3);
  font-size:11px;
  font-weight:820;
  letter-spacing:.03em;
  text-transform:uppercase
}

.app-shell .repair-add-parts-page #job_sheet_parts_table tbody td{
  padding:11px 12px;
  border-color:var(--border-2);
  color:var(--text);
  font-size:13.5px;
  vertical-align:middle
}

/* Quantity cell: the unit used to be a loose text node that wrapped under the input at
   the table's base size. It now sits beside the field as a suffix. */

.app-shell .parts-row-qty{
  display:flex;
  align-items:center;
  gap:9px
}

.app-shell .parts-row-qty .form-control{
  height:44px;
  min-width:0;
  flex:1 1 auto;
  font-size:14px
}

.app-shell .parts-row-unit{
  flex:0 0 auto;
  padding:5px 10px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface-2);
  color:var(--text-3);
  font-size:12px;
  font-weight:750;
  white-space:nowrap
}

/* Parts list: each row reads as a card line - icon, name with variation, SKU and stock
   chips - so a technician can confirm the right part without opening the product. */

.app-shell .repair-parts-body .form-group{
  margin-bottom:12px
}

.app-shell .repair-parts-body .repair-parts-search{
  max-width:none;
  margin:0
}

.app-shell .repair-parts-list{
  position:relative;
  width:100%
}

.app-shell .repair-add-parts-page #job_sheet_parts_table{
  width:100%;
  margin-top:0
}

.app-shell .repair-add-parts-page #job_sheet_parts_table thead th.parts-col-part{
  width:auto;
  text-align:left
}

.app-shell .repair-add-parts-page #job_sheet_parts_table thead th.parts-col-qty{
  width:250px;
  text-align:left
}

.app-shell .repair-add-parts-page #job_sheet_parts_table thead th.parts-col-remove{
  width:56px
}

.app-shell .parts-col-remove-label{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap
}

.app-shell .repair-add-parts-page #job_sheet_parts_table tbody tr.product_row{
  transition:background .35s ease
}

.app-shell .repair-add-parts-page #job_sheet_parts_table tbody tr.product_row:hover{
  background:var(--surface-2)
}

.app-shell .repair-add-parts-page #job_sheet_parts_table tbody tr.product_row.is-bumped{
  background:var(--brand-weak)
}

.app-shell .repair-add-parts-page #job_sheet_parts_table tbody td{
  padding:12px 12px
}

.app-shell .repair-add-parts-page #job_sheet_parts_table tbody td:first-child{
  padding-left:14px
}

.app-shell .repair-add-parts-page #job_sheet_parts_table.is-empty{
  border-bottom-left-radius:0;
  border-bottom-right-radius:0
}

.app-shell .repair-add-parts-page #job_sheet_parts_table.is-empty tbody{
  display:none
}

.app-shell .parts-row-part{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0
}

.app-shell .parts-row-icon{
  display:inline-flex;
  width:36px;
  height:36px;
  flex:0 0 auto;
  align-items:center;
  justify-content:center;
  border:1px solid color-mix(in srgb,var(--brand) 22%,var(--border));
  border-radius:10px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .parts-row-lines{
  display:flex;
  min-width:0;
  flex-direction:column;
  gap:4px
}

.app-shell .parts-row-name{
  display:block;
  color:var(--text);
  font-size:14px;
  font-weight:750;
  line-height:1.3;
  overflow-wrap:anywhere
}

.app-shell .parts-row-variation{
  margin-left:4px;
  color:var(--text-3);
  font-weight:650
}

.app-shell .parts-row-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:5px
}

.app-shell .parts-row-sku{
  padding:2px 8px;
  border:1px solid var(--border);
  border-radius:6px;
  background:var(--surface-2);
  color:var(--text-3);
  font-size:11px;
  font-weight:800;
  letter-spacing:.3px
}

.app-shell .parts-row-stock{
  padding:2px 8px;
  border:1px solid color-mix(in srgb,var(--brand) 22%,var(--border));
  border-radius:6px;
  background:var(--brand-weak);
  color:var(--brand-strong);
  font-size:11px;
  font-weight:750;
  white-space:nowrap
}

.app-shell .parts-row-stock.is-empty{
  border-color:color-mix(in srgb,var(--danger) 26%,var(--border));
  background:var(--danger-weak);
  color:var(--danger)
}

/* Quantity stepper: minus / field / plus, with the unit as a suffix. Big targets for
   greasy fingers on the workshop tablet. */

.app-shell .parts-row-qty{
  gap:6px
}

.app-shell .parts-row-qty .form-control{
  width:74px;
  flex:0 0 74px;
  text-align:center;
  font-weight:750;
  font-variant-numeric:tabular-nums
}

.app-shell .parts-row-step{
  display:inline-flex;
  width:38px;
  height:44px;
  flex:0 0 auto;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface);
  color:var(--text-2);
  cursor:pointer;
  transition:border-color .15s ease,color .15s ease,background .15s ease
}

.app-shell .parts-row-step:hover{
  border-color:var(--brand);
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .parts-row-step:active{
  transform:translateY(1px)
}

.app-shell .parts-row-unit{
  margin-left:3px
}

.app-shell .repair-add-parts-page .act.remove_product_row{
  width:34px;
  height:34px;
  border-radius:9px
}

.app-shell .repair-add-parts-page .act.is-danger{
  border-color:color-mix(in srgb,var(--danger) 26%,var(--border));
  color:var(--danger)
}

.app-shell .repair-add-parts-page .act.is-danger:hover{
  border-color:var(--danger);
  background:var(--danger-weak);
  color:var(--danger)
}

/* Nothing added yet: say so under the header row instead of leaving a bare table. */

.app-shell .repair-parts-empty{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:26px 16px;
  border:1px solid var(--border);
  border-top:0;
  border-radius:0 0 10px 10px;
  background:var(--surface);
  color:var(--text-3);
  text-align:center
}

.app-shell .repair-parts-empty span{
  display:flex;
  width:40px;
  height:40px;
  align-items:center;
  justify-content:center;
  border-radius:11px;
  background:var(--surface-2);
  color:var(--text-3)
}

.app-shell .repair-parts-empty strong{
  margin-top:9px;
  color:var(--text-2);
  font-size:13.5px;
  font-weight:750
}

.app-shell .repair-parts-empty small{
  margin-top:3px;
  font-size:12px
}

.app-shell .repair-parts-empty.hide{
  display:none!important
}

.app-shell .repair-parts-count{
  display:flex;
  align-items:center;
  gap:7px;
  margin-top:9px;
  color:var(--text-3);
  font-size:12px;
  font-weight:700
}

.app-shell .repair-parts-count.hide{
  display:none!important
}

@media (max-width:640px){
  .app-shell .repair-add-parts-page #job_sheet_parts_table thead th.parts-col-qty{
    width:200px
  }

  .app-shell .parts-row-qty .form-control{
    width:60px;
    flex-basis:60px
  }

  .app-shell .parts-row-step{
    width:34px
  }

  .app-shell .parts-row-icon{
    display:none
  }
}

.app-shell .repair-inline-status-card .form-group>label,.app-shell .repair-support-work-card .form-group>label{
  display:block;
  margin-bottom:6px;
  color:var(--text-2);
  font-size:13px;
  font-weight:750
}

.app-shell .repair-inline-status-card .form-control,.app-shell .repair-inline-status-card .select2-selection{
  min-height:42px;
  border-radius:10px;
  font-size:13.5px
}

.app-shell .repair-support-actions,.app-shell .support-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  margin-top:13px;
  padding-top:13px;
  border-top:1px solid var(--border-2)
}

.app-shell .repair-support-actions .btn-primary,.app-shell .repair-support-actions .btn-ghost,.app-shell .support-actions .btn-primary,.app-shell .support-actions .btn-ghost{
  display:inline-flex;
  height:42px;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:0 17px;
  border-radius:10px;
  font-size:13px;
  font-weight:750
}

.app-shell .repair-document-dropzone{
  display:flex;
  min-height:210px;
  align-items:center;
  justify-content:center;
  border:1.5px dashed color-mix(in srgb,var(--brand) 36%,var(--border))!important;
  border-radius:12px!important;
  background:color-mix(in srgb,var(--brand-weak) 32%,var(--surface-2))!important;
  transition:border-color .15s,background .15s
}

.app-shell .repair-document-dropzone:hover,.app-shell .repair-document-dropzone.dz-drag-hover{
  border-color:var(--brand)!important;
  background:var(--brand-weak)!important
}

.app-shell .repair-document-dropzone .dz-message{
  display:flex;
  align-items:center;
  flex-direction:column;
  gap:6px;
  margin:0!important;
  color:var(--text-3);
  text-align:center
}

.app-shell .repair-document-dropzone .dz-message svg{
  color:var(--brand-strong)
}

.app-shell .repair-document-dropzone .dz-message strong{
  color:var(--text);
  font-size:12.5px
}

.app-shell .repair-document-dropzone .dz-message span{
  font-size:10px
}

/* Job sheet status modal */

#status_modal .repair-status-dialog{
  width:min(92vw,680px);
  margin:6vh auto
}

#status_modal .repair-status-modal{
  overflow:visible;
  border:0;
  border-radius:16px;
  background:var(--surface);
  box-shadow:0 24px 70px rgba(16,31,24,.24)
}

#status_modal .repair-status-header{
  display:flex;
  min-height:72px;
  align-items:center;
  justify-content:space-between;
  padding:14px 16px;
  border-bottom:1px solid var(--border-2);
  border-radius:16px 16px 0 0;
  background:linear-gradient(110deg,var(--surface),var(--surface-2))
}

#status_modal .repair-status-heading{
  display:flex;
  min-width:0;
  align-items:center;
  gap:11px
}

#status_modal .repair-status-heading>span{
  display:grid;
  width:40px;
  height:40px;
  flex:0 0 40px;
  place-items:center;
  border-radius:11px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

#status_modal .repair-status-heading small{
  display:block;
  color:var(--brand-strong);
  font-size:8.5px;
  font-weight:850;
  letter-spacing:.55px
}

#status_modal .repair-status-heading h4{
  margin:2px 0 0;
  color:var(--text);
  font-size:15px;
  font-weight:850
}

#status_modal .repair-status-heading p{
  margin:2px 0 0;
  color:var(--text-3);
  font-size:10px
}

#status_modal .repair-status-body{
  padding:7px 16px 3px
}

#status_modal .repair-status-body .row{
  margin-inline:-6px
}

#status_modal .repair-status-body [class*="col-"]{
  padding-inline:6px
}

#status_modal .repair-status-body .form-group{
  margin:11px 0
}

#status_modal .repair-status-body .form-group>label{
  display:block;
  margin:0 0 6px;
  color:var(--text-2);
  font-size:12px;
  font-weight:750
}

#status_modal .repair-status-body .form-control,#status_modal .repair-status-body .select2-selection{
  min-height:42px;
  border-radius:10px;
  font-size:13px
}

#status_modal .repair-status-body textarea.form-control{
  padding:10px 12px;
  line-height:1.5;
  resize:vertical
}

#status_modal .repair-status-body .checkbox-inline{
  margin:0 7px 0 0
}

#status_modal .repair-status-body .checkbox-inline label{
  display:inline-flex;
  min-height:38px;
  align-items:center;
  gap:7px;
  padding:7px 10px;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface-2);
  color:var(--text-2);
  font-size:11px;
  font-weight:700
}

#status_modal .repair-status-body .checkbox-inline label:has(input:checked){
  border-color:color-mix(in srgb,var(--brand) 42%,var(--border));
  background:var(--brand-weak);
  color:var(--brand-strong)
}

#status_modal .repair-status-body .help-block{
  margin:6px 0 0;
  color:var(--text-3);
  font-size:9.5px;
  line-height:1.5
}

#status_modal .repair-status-footer{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:7px;
  padding:12px 16px;
  border-top:1px solid var(--border-2);
  border-radius:0 0 16px 16px;
  background:var(--surface-2)
}

#status_modal .repair-status-footer .btn-primary,#status_modal .repair-status-footer .btn-ghost{
  display:inline-flex;
  min-height:39px;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:0 12px;
  border-radius:9px;
  font-size:10.5px;
  font-weight:750
}

#status_modal .select2-dropdown{
  border-color:var(--brand);
  border-radius:10px;
  box-shadow:0 14px 35px rgba(16,31,24,.18)
}

@media(max-width:680px){
  #status_modal .repair-status-dialog{
    width:calc(100% - 24px);
    margin:12px auto
  }

  #status_modal .repair-status-footer{
    align-items:stretch;
    flex-direction:column
  }

  #status_modal .repair-status-footer>*{
    width:100%
  }

  .app-shell .repair-support-actions{
    align-items:stretch;
    flex-direction:column
  }

  .app-shell .repair-support-actions>*{
    width:100%
  }
}

/* Shared compact form dialog (device model add/edit, reusable for further modals).
   Class-scoped on purpose so any container id can host it. */

body.app-ui .modal-close-btn{
  display:grid;
  width:32px;
  height:32px;
  flex:0 0 32px;
  place-items:center;
  padding:0;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface);
  color:var(--text-3);
  cursor:pointer;
  transition:.16s ease
}

body.app-ui .modal-close-btn:hover{
  border-color:color-mix(in srgb,var(--danger) 32%,var(--border));
  background:var(--danger-weak);
  color:var(--danger)
}

body.app-ui .repair-form-dialog{
  width:min(92vw,640px);
  margin:6vh auto
}

body.app-ui .repair-form-dialog-content{
  overflow:visible;
  border:0;
  border-radius:16px;
  background:var(--surface);
  box-shadow:0 24px 70px rgba(16,31,24,.24)
}

body.app-ui .repair-form-dialog-header{
  display:flex;
  min-height:72px;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  border-bottom:1px solid var(--border-2);
  border-radius:16px 16px 0 0;
  background:linear-gradient(110deg,var(--surface),var(--surface-2))
}

body.app-ui .repair-form-dialog-heading{
  display:flex;
  min-width:0;
  align-items:center;
  gap:11px
}

body.app-ui .repair-form-dialog-heading>span{
  display:grid;
  width:40px;
  height:40px;
  flex:0 0 40px;
  place-items:center;
  border-radius:11px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

body.app-ui .repair-form-dialog-heading small{
  display:block;
  color:var(--brand-strong);
  font-size:8.5px;
  font-weight:850;
  letter-spacing:.55px;
  text-transform:uppercase
}

body.app-ui .repair-form-dialog-heading h4{
  margin:2px 0 0;
  color:var(--text);
  font-size:15px;
  font-weight:850
}

body.app-ui .repair-form-dialog-heading p{
  margin:2px 0 0;
  color:var(--text-3);
  font-size:10px;
  line-height:1.45
}

body.app-ui .repair-form-dialog-body{
  padding:7px 16px 12px
}

body.app-ui .repair-form-dialog-body .row{
  margin-inline:-6px
}

body.app-ui .repair-form-dialog-body [class*="col-"]{
  padding-inline:6px
}

body.app-ui .repair-form-dialog-body .form-group{
  margin:11px 0 0
}

body.app-ui .repair-form-dialog-body .form-group>label{
  display:block;
  margin:0 0 2px;
  color:var(--text-2);
  font-size:12px;
  font-weight:750
}

body.app-ui .repair-form-dialog-body .form-control,body.app-ui .repair-form-dialog-body .select2-selection{
  min-height:42px;
  border-radius:10px;
  font-size:13px
}

body.app-ui .repair-form-dialog-body textarea.form-control{
  padding:10px 12px;
  line-height:1.5;
  resize:vertical
}

body.app-ui .repair-form-dialog-body .repair-field-help{
  margin:0 0 7px
}

body.app-ui .repair-form-dialog-footer{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:7px;
  padding:12px 16px;
  border-top:1px solid var(--border-2);
  border-radius:0 0 16px 16px;
  background:var(--surface-2)
}

body.app-ui .repair-form-dialog-footer .btn-primary,body.app-ui .repair-form-dialog-footer .btn-ghost{
  display:inline-flex;
  min-height:39px;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:0 14px;
  border-radius:9px;
  font-size:11px;
  font-weight:750
}

/* Live pipe-split preview: shows staff exactly which checklist points will be saved. */

.app-shell .repair-checklist-preview{
  display:none;
  margin:8px 0 0;
  padding:8px 9px;
  border:1px dashed var(--border);
  border-radius:10px;
  background:var(--surface-2)
}

.app-shell .repair-checklist-preview.is-visible{
  display:block
}

.app-shell .repair-checklist-preview>strong{
  display:block;
  margin-bottom:6px;
  color:var(--text-3);
  font-size:9px;
  font-weight:850;
  letter-spacing:.5px;
  text-transform:uppercase
}

.app-shell .repair-checklist-preview .repair-checklist-chips{
  display:flex;
  flex-wrap:wrap;
  gap:5px
}

.app-shell .repair-checklist-preview .repair-checklist-chip{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:4px 9px;
  border:1px solid color-mix(in srgb,var(--brand) 22%,var(--border));
  border-radius:999px;
  background:var(--brand-weak);
  color:var(--brand-strong);
  font-size:11px;
  font-weight:650
}

.app-shell .repair-checklist-preview .repair-checklist-chip i{
  font-style:normal;
  opacity:.65;
  font-size:9.5px;
  font-weight:800
}

@media(max-width:680px){
  body.app-ui .repair-form-dialog{
    width:calc(100% - 24px);
    margin:12px auto
  }

  body.app-ui .repair-form-dialog-footer{
    align-items:stretch;
    flex-direction:column
  }

  body.app-ui .repair-form-dialog-footer>*{
    width:100%
  }
}

/* CRM dashboard header date filter */

.app-shell .crm-dash-range{
  min-width:230px
}

.app-shell .crm-dash-range>.form-control{
  height:38px;
  border-radius:10px;
  background:var(--surface);
  font-size:12px;
  font-weight:700;
  color:var(--text-2);
  cursor:pointer
}

.app-shell .crm-dash-range>.form-control:hover{
  border-color:var(--brand);
  color:var(--text)
}

.app-shell .crm-dash-range>.form-control:disabled{
  border-color:color-mix(in srgb,var(--brand) 36%,var(--border));
  background:var(--brand-weak);
  color:var(--brand-strong);
  cursor:wait;
  opacity:1
}

.app-shell .crm-dashboard-loading{
  position:fixed;
  z-index:3050;
  inset:0;
  display:grid;
  place-items:center;
  padding:20px;
  background:rgba(17,28,22,.22);
  backdrop-filter:blur(1.5px)
}

.app-shell .crm-dashboard-loading[hidden]{
  display:none!important
}

.app-shell .crm-dashboard-loading-card{
  display:flex;
  width:min(100%,360px);
  align-items:center;
  gap:13px;
  padding:14px 16px;
  border:1px solid color-mix(in srgb,var(--brand) 22%,var(--border));
  border-radius:13px;
  background:var(--surface);
  box-shadow:0 24px 56px -24px rgba(12,32,21,.48),0 8px 22px -14px rgba(12,32,21,.26)
}

.app-shell .crm-dashboard-loading-icon{
  display:grid;
  width:40px;
  height:40px;
  flex:0 0 40px;
  place-items:center;
  border-radius:11px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .crm-dashboard-loading-icon svg{
  animation:crm-dashboard-spin .8s linear infinite
}

.app-shell .crm-dashboard-loading-card strong,.app-shell .crm-dashboard-loading-card div>span{
  display:block
}

.app-shell .crm-dashboard-loading-card strong{
  color:var(--text);
  font-size:13px;
  font-weight:820
}

.app-shell .crm-dashboard-loading-card div>span{
  margin-top:3px;
  color:var(--text-3);
  font-size:10.5px;
  font-weight:600
}

.app-shell .crm-dashboard-page.is-filtering{
  cursor:wait
}

@keyframes crm-dashboard-spin{
  to{
    transform:rotate(360deg)
  }
}

@media(prefers-reduced-motion:reduce){
  .app-shell .crm-dashboard-loading-icon svg{
    animation-duration:1.6s
  }
}

/* CRM dashboard operational report switcher */

.app-shell .crm-dashboard-team-reports{
  margin-top:16px;
  overflow:visible;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  box-shadow:var(--shadow-md)
}

.app-shell .crm-dashboard-team-reports-head{
  display:flex;
  min-height:76px;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:13px 15px;
  border-bottom:1px solid var(--border);
  border-radius:14px 14px 0 0;
  background:linear-gradient(110deg,color-mix(in srgb,var(--brand-weak) 55%,var(--surface)) 0%,var(--surface) 72%)
}

.app-shell .crm-dashboard-team-reports-head>div{
  display:flex;
  min-width:0;
  align-items:center;
  gap:11px
}

.app-shell .crm-dashboard-team-reports-head>div>span{
  display:grid;
  width:42px;
  height:42px;
  flex:0 0 42px;
  place-items:center;
  border:1px solid color-mix(in srgb,var(--brand) 18%,var(--border));
  border-radius:11px;
  background:var(--surface);
  color:var(--brand-strong);
  box-shadow:var(--shadow-sm)
}

.app-shell .crm-dashboard-team-reports-head small,.app-shell .crm-dashboard-team-reports-head strong,.app-shell .crm-dashboard-team-reports-head p{
  display:block
}

.app-shell .crm-dashboard-team-reports-head small{
  color:var(--brand-strong);
  font-size:8.5px;
  font-weight:850;
  letter-spacing:.65px
}

.app-shell .crm-dashboard-team-reports-head strong{
  margin-top:2px;
  color:var(--text);
  font-size:13.5px;
  font-weight:820
}

.app-shell .crm-dashboard-team-reports-head p{
  margin:2px 0 0;
  color:var(--text-3);
  font-size:10.5px
}

.app-shell .crm-dashboard-report-tabs{
  display:flex;
  align-items:stretch;
  gap:2px;
  padding:9px 11px 0;
  border-bottom:1px solid var(--border-2);
  background:var(--surface)
}

.app-shell .crm-dashboard-report-tabs>button{
  position:relative;
  display:flex;
  min-width:210px;
  align-items:center;
  gap:9px;
  padding:9px 12px 11px;
  border:0;
  border-radius:9px 9px 0 0;
  background:transparent;
  color:var(--text-3);
  font:inherit;
  text-align:left;
  cursor:pointer
}

.app-shell .crm-dashboard-report-tabs>button:after{
  position:absolute;
  right:10px;
  bottom:-1px;
  left:10px;
  height:2px;
  border-radius:2px;
  background:transparent;
  content:""
}

.app-shell .crm-dashboard-report-tabs>button>span{
  display:grid;
  width:31px;
  height:31px;
  flex:0 0 31px;
  place-items:center;
  border-radius:8px;
  background:var(--surface-2);
  color:var(--text-3)
}

.app-shell .crm-dashboard-report-tabs strong,.app-shell .crm-dashboard-report-tabs small{
  display:block
}

.app-shell .crm-dashboard-report-tabs strong{
  color:inherit;
  font-size:11px;
  font-weight:780
}

.app-shell .crm-dashboard-report-tabs small{
  margin-top:1px;
  font-size:9px
}

.app-shell .crm-dashboard-report-tabs>button:hover{
  background:var(--surface-2);
  color:var(--text-2)
}

.app-shell .crm-dashboard-report-tabs>button.is-active{
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .crm-dashboard-report-tabs>button.is-active:after{
  background:var(--brand)
}

.app-shell .crm-dashboard-report-tabs>button.is-active>span{
  background:var(--surface);
  color:var(--brand-strong)
}

.app-shell .crm-dashboard-report-pane[hidden]{
  display:none!important
}

.app-shell .crm-dashboard-report-pane{
  overflow:visible;
  border-radius:0 0 14px 14px;
  background:var(--surface)
}

.app-shell .crm-dashboard-report-pane-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  padding:12px 14px;
  border-bottom:1px solid var(--border-2)
}

.app-shell .crm-dashboard-report-pane-head>div:first-child>strong,.app-shell .crm-dashboard-report-pane-head>div:first-child>small{
  display:block
}

.app-shell .crm-dashboard-report-pane-head>div:first-child>strong{
  color:var(--text);
  font-size:12px;
  font-weight:800
}

.app-shell .crm-dashboard-report-pane-head>div:first-child>small{
  margin-top:2px;
  color:var(--text-3);
  font-size:9.5px
}

.app-shell .crm-dashboard-report-filters{
  display:flex;
  align-items:flex-end;
  gap:9px
}

.app-shell .crm-dashboard-report-filters .form-group{
  width:220px;
  margin:0
}

.app-shell .crm-dashboard-report-filters .form-group>span{
  display:block;
  margin-bottom:5px;
  color:var(--text-3);
  font-size:9.5px;
  font-weight:750
}

.app-shell .crm-dashboard-report-filters .form-control,.app-shell .crm-dashboard-report-filters .select2-container .select2-selection--single{
  height:36px;
  border-radius:8px;
  background:var(--surface-2);
  font-size:11px
}

.app-shell .crm-dashboard-report-filters .select2-container .select2-selection--single .select2-selection__rendered{
  height:34px;
  line-height:34px
}

.app-shell .crm-dashboard-report-filters .select2-container .select2-selection--single .select2-selection__arrow{
  height:34px
}

.app-shell .crm-dashboard-report-card{
  margin:0;
  border:0;
  border-radius:0 0 14px 14px;
  box-shadow:none
}

.app-shell .crm-dashboard-report-card>.table-toolbar{
  gap:8px;
  padding:9px 12px;
  background:var(--surface)
}

.app-shell .crm-dashboard-report-card .table-toolbar-search{
  width:min(100%,320px)
}

.app-shell .crm-dashboard-report-card .table-toolbar-search .finput{
  height:34px;
  padding-left:31px;
  border-radius:8px;
  font-size:11.5px
}

.app-shell .crm-dashboard-report-card .table-toolbar-search>svg{
  left:10px;
  width:13px;
  height:13px
}

.app-shell .crm-dashboard-report-card .table-toolbar-actions{
  gap:6px
}

.app-shell .crm-dashboard-report-card .table-export-holder,.app-shell .crm-dashboard-report-card .table-export-holder .dt-buttons{
  gap:5px
}

.app-shell .crm-dashboard-report-card .table-export-holder .dt-button,.app-shell .crm-dashboard-report-card .table-export-holder .table-export-button,.app-shell .crm-dashboard-report-card .table-page-size .finput{
  border-radius:8px!important;
  font-size:10.5px!important
}

.app-shell .crm-dashboard-report-card .table-export-holder .dt-button,.app-shell .crm-dashboard-report-card .table-export-holder .table-export-button{
  padding:0 9px
}

.app-shell .crm-dashboard-report-card .table-page-size .finput{
  width:66px
}

.app-shell .crm-dashboard-report-table-wrap{
  overflow-x:auto
}

.app-shell .crm-dashboard-report-card table.dataTable thead th{
  padding:10px 12px;
  background:var(--surface-2);
  font-size:9px
}

.app-shell .crm-dashboard-report-card table.dataTable tbody td{
  height:58px;
  padding:8px 12px;
  vertical-align:middle
}

.app-shell .crm-dashboard-report-card .data-table-footer{
  min-height:49px;
  padding:8px 11px
}

.app-shell .crm-dashboard-conversion-card table.dataTable thead th:first-child,.app-shell .crm-dashboard-conversion-card table.dataTable tbody td:first-child{
  width:56px!important;
  text-align:center
}

.app-shell .crm-dashboard-conversion-card table.dataTable thead th:last-child,.app-shell .crm-dashboard-conversion-card table.dataTable tbody td:last-child{
  width:36%;
  text-align:left
}

.app-shell .crm-dashboard-conversion-card td.details-control::before,.app-shell .crm-conversion-list-card td.details-control::before{
  display:none!important;
  content:none!important
}

.app-shell .crm-dashboard-conversion-card td.details-control{
  padding:8px 12px!important
}

.app-shell .crm-dashboard-conversion-card .crm-report-expand{
  margin:auto
}

@media(max-width:820px){
  .app-shell .crm-dashboard-team-reports-head{
    align-items:flex-start;
    flex-direction:column
  }

  .app-shell .crm-dashboard-team-reports-head>.btn-ghost{
    align-self:flex-end
  }

  .app-shell .crm-dashboard-report-tabs{
    overflow-x:auto
  }

  .app-shell .crm-dashboard-report-tabs>button{
    min-width:190px
  }

  .app-shell .crm-dashboard-report-pane-head{
    align-items:stretch;
    flex-direction:column
  }

  .app-shell .crm-dashboard-report-filters{
    align-items:stretch;
    flex-direction:column
  }

  .app-shell .crm-dashboard-report-filters .form-group{
    width:100%
  }
}

/* ---- CRM Leads list (consolidated workspace) ---- */

.app-shell .crm-leads-stage{
  position:relative
}

.app-shell #leads_table{
  min-width:960px
}

.app-shell #leads_table thead th{
  white-space:nowrap
}

.app-shell #leads_table td{
  padding:12px 14px!important;
  vertical-align:middle!important;
  font-size:12.5px
}

.app-shell #leads_table td:nth-child(8){
  position:relative;
  overflow:visible
}

.app-shell #leads_table td:nth-child(8):has(.lead-action-group.open){
  z-index:190
}

/* lead identity */

.app-shell .crm-lead-cell{
  display:flex;
  align-items:center;
  gap:11px;
  min-width:0
}

.app-shell .crm-lead-avatar{
  display:grid;
  width:38px;
  height:38px;
  flex:0 0 38px;
  place-items:center;
  border-radius:11px;
  color:#fff;
  font-size:12.5px;
  font-weight:800
}

.app-shell .crm-lead-meta{
  min-width:0
}

/*
 * One weight per row carries the emphasis, and it is the lead's name: everything beside it — the
 * code, the source, the stage, the follow-up, who it is assigned to — was set heavy enough to
 * compete, which left the row reading as a wall of bold with nothing standing out of it.
 */

.app-shell .crm-lead-meta>b{
  display:block;
  overflow:hidden;
  color:var(--text);
  font-size:13px;
  font-weight:620;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .crm-lead-sub{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:2px
}

.app-shell .crm-lead-meta>code,
.app-shell .crm-lead-sub>code{
  font-family:inherit;
  color:var(--text-3);
  font-size:10.5px;
  font-weight:500
}

.app-shell .crm-lead-mobile{
  color:var(--text-2);
  font-size:12px;
  font-variant-numeric:tabular-nums
}

.app-shell .crm-lead-creator{
  color:var(--text);
  font-size:12px;
  font-weight:550;
  white-space:nowrap
}

.app-shell .crm-lead-added{
  color:var(--text-3);
  font-size:11.5px;
  font-variant-numeric:tabular-nums;
  white-space:nowrap
}

/* source dot */

.app-shell .crm-lead-source{
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:var(--text-2);
  font-size:12px;
  font-weight:500;
  white-space:nowrap
}

.app-shell .crm-lead-source>em{
  width:8px;
  height:8px;
  flex:none;
  border-radius:3px
}

/* stage chip */

.app-shell .crm-stage-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 11px;
  border-radius:999px;
  font-size:11px;
  font-weight:600;
  white-space:nowrap
}

.app-shell .crm-stage-chip>em{
  width:7px;
  height:7px;
  flex:none;
  border-radius:50%;
  background:currentColor
}

.app-shell .crm-stage-chip.is-new{
  background:var(--blue-weak);
  color:#2463c9
}

.app-shell .crm-stage-chip.is-proc{
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .crm-stage-chip.is-int{
  background:#f1ecfd;
  color:#6d3fc4
}

.app-shell .crm-stage-chip.is-done{
  background:#e4f4f4;
  color:#0f8a8a
}

.app-shell .crm-stage-chip.is-lose{
  background:var(--danger-weak);
  color:var(--danger)
}

.app-shell .crm-stage-chip.is-none{
  background:var(--surface-2);
  color:var(--text-3)
}

/* follow-up cell */

.app-shell .crm-followup-cell{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:5px;
  min-width:150px
}

.app-shell .crm-followup-empty{
  color:var(--text-3)
}

.app-shell .crm-followup-last{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--text-3);
  font-size:11px;
  text-decoration:none
}

.app-shell .crm-followup-last svg{
  color:var(--text-3)
}

.app-shell .crm-followup-last b{
  color:var(--text-2);
  font-weight:600;
  font-variant-numeric:tabular-nums
}

.app-shell .crm-followup-last:hover b{
  color:var(--brand-strong)
}

.app-shell .crm-followup-next{
  display:inline-flex;
  align-items:center;
  gap:5px;
  width:-moz-max-content;
  width:max-content;
  padding:3px 9px;
  border-radius:7px;
  font-size:11px;
  font-weight:600;
  white-space:nowrap
}

.app-shell .crm-followup-next.is-due{
  background:var(--danger-weak);
  color:var(--danger)
}

.app-shell .crm-followup-next.is-soon{
  background:#fdf3e0;
  color:#c07c10
}

.app-shell .crm-followup-next.is-set{
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .crm-followup-add{
  display:inline-flex;
  align-items:center;
  gap:5px;
  width:-moz-max-content;
  width:max-content;
  color:var(--brand-strong);
  font-size:11px;
  font-weight:600;
  text-decoration:none;
  cursor:pointer
}

.app-shell .crm-followup-add:hover{
  text-decoration:underline
}

/* assigned to (avatar stack + names) */

.app-shell .crm-assigned-cell{
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0
}

.app-shell .crm-assigned-avatars{
  display:inline-flex;
  flex:none
}

.app-shell .crm-assigned-avatars>.crm-assigned-avatar:not(:first-child){
  margin-left:-9px
}

.app-shell .crm-assigned-avatar{
  display:grid;
  width:28px;
  height:28px;
  flex:0 0 28px;
  place-items:center;
  overflow:hidden;
  border:2px solid var(--surface);
  border-radius:50%;
  -o-object-fit:cover;
     object-fit:cover
}

.app-shell .crm-assigned-avatar.is-initial{
  background:var(--brand-weak);
  color:var(--brand-strong);
  font-size:10px;
  font-weight:800
}

.app-shell .crm-assigned-names{
  overflow:hidden;
  color:var(--text-2);
  font-size:11.5px;
  font-weight:500;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .crm-assigned-empty{
  color:var(--text-3);
  font-size:11.5px;
  font-style:italic
}

/* lead row actions (first column) */

.app-shell .crm-lead-action-heading{
  width:92px;
  min-width:92px
}

.app-shell .lead-row-actions{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:6px;
  white-space:nowrap
}

.app-shell .lead-row-actions .lead-edit-action{
  border-color:color-mix(in srgb,var(--brand) 30%,var(--border));
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .lead-row-actions .lead-edit-action:hover{
  border-color:var(--brand);
  background:color-mix(in srgb,var(--brand-weak) 75%,var(--surface));
  color:var(--brand-strong);
  box-shadow:0 0 0 3px rgba(21,154,77,.1)
}

.app-shell .lead-action-group.open{
  z-index:200
}

.app-shell .lead-action-menu{
  right:auto;
  left:0;
  z-index:210;
  min-width:200px
}

.app-shell .lead-action-menu .table-action-icon{
  width:16px;
  height:16px;
  flex:0 0 16px;
  color:var(--text-3)
}

.app-shell .lead-action-menu>li>a:hover .table-action-icon{
  color:currentColor
}

.app-shell .lead-action-menu>li>.table-action-delete .table-action-icon{
  color:var(--danger)
}

/* No overflow of its own on a narrow screen either: DataTables scrolls the table at every width,
   and a second scrolling box around it is the one the heading would pin to. */

@media (max-width:1199px){
  .app-shell .crm-leads-stage{
    transition:padding-bottom .16s ease
  }

  .app-shell .crm-leads-stage:has(.lead-action-group.open){
    padding-bottom:240px
  }
}

/* ---- CRM Leads: stat band + toolbar filters ---- */

.app-shell .crm-lead-stats{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  margin-top:14px
}

.app-shell .crm-lead-stat{
  position:relative;
  padding:14px 15px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

.app-shell .crm-lead-stat-ic{
  position:absolute;
  top:13px;
  right:13px;
  display:grid;
  width:32px;
  height:32px;
  place-items:center;
  border-radius:9px
}

.app-shell .crm-lead-stat-ic.is-blue{
  background:#eaf2ff;
  color:#2463c9
}

.app-shell .crm-lead-stat-ic.is-green{
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .crm-lead-stat-ic.is-amber{
  background:#fdf3e0;
  color:#c07c10
}

.app-shell .crm-lead-stat-ic.is-red{
  background:var(--danger-weak);
  color:var(--danger)
}

.app-shell .crm-lead-stat>small{
  display:block;
  padding-right:40px;
  color:var(--text-3);
  font-size:11px;
  font-weight:650
}

.app-shell .crm-lead-stat>b{
  display:block;
  margin-top:5px;
  font-size:23px;
  font-weight:850;
  letter-spacing:-.5px;
  line-height:1;
  font-variant-numeric:tabular-nums
}

.app-shell .crm-lead-stat-note{
  display:block;
  margin-top:5px;
  font-size:10.5px;
  font-weight:700;
  color:var(--text-3)
}

.app-shell .crm-lead-stat-note.warn{
  color:#c07c10
}

.app-shell .crm-lead-stat-note.crit{
  color:var(--danger)
}

.app-shell .crm-lead-stat-note.mut{
  color:var(--text-3)
}

/* leads card: no head, toolbar carries filters */

/* The leads table runs to the edges of its card, so the body pads the top only — the toolbar and
   the board carry their own side padding, and the footer under the table takes back the gutter the
   rows gave up. */

.app-shell .crm-leads-card>.crm-panel-body{
  padding:14px 0 0
}

.app-shell .crm-leads-toolbar{
  flex-wrap:wrap
}

.app-shell .crm-leads-toolbar .table-toolbar-search{
  flex:1 1 240px;
  max-width:360px
}

.app-shell .crm-leads-toolbar .table-toolbar-filters{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  flex:1 1 auto
}

.app-shell .crm-toolbar-select{
  min-width:150px
}

.app-shell .crm-toolbar-select .select2-container .select2-selection--single{
  height:38px
}

.app-shell .crm-toolbar-select .select2-container--default .select2-selection--single .select2-selection__rendered{
  line-height:36px;
  font-size:12px;
  font-weight:650
}

@media (max-width:1150px){
  .app-shell .crm-lead-stats{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}

@media (max-width:600px){
  .app-shell .crm-lead-stats{
    grid-template-columns:1fr
  }

  .app-shell .crm-toolbar-select{
    min-width:0;
    flex:1 1 45%
  }
}

/* CRM leads footer: proper padding + normalized pagination pills */

.app-shell .crm-leads-card .data-table-footer{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:0;
  padding:13px 15px;
  border-top:1px solid var(--border-2)
}

.app-shell .crm-leads-card .data-table-footer .dataTables_info{
  padding:0;
  color:var(--text-3);
  font-size:11.5px
}

.app-shell .crm-leads-card .data-table-footer .dataTables_paginate{
  padding:0
}

/* CRM leads kanban board */

.app-shell .lead-kanban-board,.app-shell .lead-kanban-board .page,.app-shell .lead-kanban-board .main,.app-shell .lead-kanban-board .meta-tasks-wrapper{
  display:block;
  margin:0;
  padding:0;
  background:none;
  border:0;
  box-shadow:none
}

.app-shell #myKanban.meta-tasks{
  display:block;
  overflow:visible
}

.app-shell .crm-kanban-loading{
  padding:40px 0;
  text-align:center;
  color:var(--text-3);
  font-size:12.5px;
  font-weight:650
}

.app-shell .crm-kanban-board{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(272px,1fr);
  gap:14px;
  overflow-x:auto;
  padding-bottom:8px
}

.app-shell .crm-kanban-col{
  position:relative;
  display:flex;
  flex-direction:column;
  min-height:200px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface-2)
}

.app-shell .crm-kanban-col-top{
  height:3px;
  border-radius:14px 14px 0 0
}

.app-shell .crm-kanban-col-head{
  display:flex;
  align-items:center;
  gap:9px;
  padding:12px 13px;
  border-bottom:1px solid var(--border-2)
}

.app-shell .crm-kanban-dot{
  width:10px;
  height:10px;
  flex:none;
  border-radius:50%
}

.app-shell .crm-kanban-col-head b{
  flex:1;
  min-width:0;
  font-size:12.5px;
  font-weight:800;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .crm-kanban-count{
  padding:2px 9px;
  border-radius:999px;
  background:var(--surface);
  border:1px solid var(--border);
  color:var(--text-2);
  font-size:11px;
  font-weight:800;
  font-variant-numeric:tabular-nums
}

.app-shell .crm-kanban-col-body{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:11px;
  overflow-y:auto;
  max-height:calc(100vh - 320px);
  min-height:80px
}

.app-shell .crm-kanban-empty{
  padding:22px 8px;
  text-align:center;
  color:var(--text-3);
  font-size:11px;
  font-style:italic
}

.app-shell .crm-kanban-col.is-drop .crm-kanban-col-body{
  outline:2px dashed color-mix(in srgb,var(--brand) 45%,transparent);
  outline-offset:-6px;
  border-radius:11px;
  background:var(--brand-weak)
}

.app-shell .crm-kanban-col-top.crm-stage-is-new,.app-shell .crm-kanban-dot.crm-stage-is-new{
  background:#2463c9
}

.app-shell .crm-kanban-col-top.crm-stage-is-proc,.app-shell .crm-kanban-dot.crm-stage-is-proc{
  background:var(--brand-strong)
}

.app-shell .crm-kanban-col-top.crm-stage-is-int,.app-shell .crm-kanban-dot.crm-stage-is-int{
  background:#6d3fc4
}

.app-shell .crm-kanban-col-top.crm-stage-is-done,.app-shell .crm-kanban-dot.crm-stage-is-done{
  background:#0f8a8a
}

.app-shell .crm-kanban-col-top.crm-stage-is-lose,.app-shell .crm-kanban-dot.crm-stage-is-lose{
  background:var(--danger)
}

.app-shell .crm-kanban-col-top.crm-stage-is-none,.app-shell .crm-kanban-dot.crm-stage-is-none{
  background:var(--text-3)
}

.app-shell .crm-kanban-card{
  display:block;
  padding:12px;
  border:1px solid var(--border);
  border-radius:11px;
  background:var(--surface);
  box-shadow:var(--shadow-sm);
  cursor:grab;
  transition:box-shadow .15s,transform .1s;
  text-decoration:none;
  color:inherit
}

.app-shell .crm-kanban-card:hover{
  box-shadow:var(--shadow-md);
  transform:translateY(-1px);
  text-decoration:none;
  color:inherit
}

.app-shell .crm-kanban-card.is-dragging{
  box-shadow:0 14px 34px -12px rgba(20,27,23,.28);
  transform:rotate(-1.5deg) scale(1.02);
  cursor:grabbing;
  opacity:.96
}

.app-shell .crm-kanban-card-top{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0
}

.app-shell .crm-kanban-card-av{
  display:grid;
  width:34px;
  height:34px;
  flex:0 0 34px;
  place-items:center;
  border-radius:10px;
  color:#fff;
  font-size:12px;
  font-weight:800
}

.app-shell .crm-kanban-card-id{
  min-width:0;
  flex:1
}

.app-shell .crm-kanban-card-id b{
  display:block;
  font-size:12.5px;
  font-weight:750;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .crm-kanban-card-id code{
  font-family:inherit;
  color:var(--text-3);
  font-size:10.5px;
  font-weight:700
}

.app-shell .crm-kanban-grip{
  color:var(--text-3);
  flex:none;
  display:inline-flex
}

.app-shell .crm-kanban-card-meta{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:10px
}

.app-shell .crm-kanban-card-meta:empty{
  display:none
}

.app-shell .crm-kanban-chip{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:3px 8px;
  border-radius:999px;
  font-size:10.5px;
  font-weight:700;
  white-space:nowrap;
  text-decoration:none
}

.app-shell .crm-kanban-chip em{
  width:7px;
  height:7px;
  border-radius:3px;
  font-style:normal
}

.app-shell .crm-kanban-chip.is-src{
  background:var(--surface-2);
  color:var(--text-2)
}

.app-shell .crm-kanban-chip.is-tg{
  background:var(--blue-weak,#eaf2ff);
  color:#2463c9
}

.app-shell .crm-kanban-chip.is-due{
  background:var(--danger-weak);
  color:var(--danger)
}

.app-shell .crm-kanban-chip.is-soon{
  background:#fdf3e0;
  color:#c07c10
}

.app-shell .crm-kanban-chip.is-set{
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .crm-kanban-chip.is-add{
  background:transparent;
  border:1px dashed var(--border);
  color:var(--text-3);
  cursor:pointer
}

.app-shell .crm-kanban-chip.is-add:hover{
  color:var(--brand-strong);
  border-color:color-mix(in srgb,var(--brand) 45%,transparent)
}

.app-shell .crm-kanban-card-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-top:11px;
  padding-top:10px;
  border-top:1px solid var(--border-2)
}

.app-shell .crm-kanban-assign{
  display:flex;
  align-items:center
}

.app-shell .crm-kanban-av{
  display:grid;
  width:24px;
  height:24px;
  place-items:center;
  border:2px solid var(--surface);
  border-radius:50%;
  font-size:9px;
  font-weight:800;
  color:#fff;
  -o-object-fit:cover;
     object-fit:cover
}

.app-shell .crm-kanban-av.is-initial{
  background:linear-gradient(135deg,#7a8493,#5c6673)
}

.app-shell .crm-kanban-av+.crm-kanban-av{
  margin-left:-8px
}

.app-shell .crm-kanban-none{
  color:var(--text-3);
  font-style:italic;
  font-size:11px
}

.app-shell .crm-kanban-date{
  color:var(--text-3);
  font-size:10.5px;
  font-variant-numeric:tabular-nums;
  white-space:nowrap
}

.app-shell .crm-kanban-more{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  width:100%;
  margin-top:2px;
  padding:9px;
  border:1px dashed var(--border);
  border-radius:9px;
  background:var(--surface);
  color:var(--text-2);
  font-size:11.5px;
  font-weight:750;
  cursor:pointer;
  transition:border-color .15s,color .15s,background .15s
}

.app-shell .crm-kanban-more:hover{
  border-color:color-mix(in srgb,var(--brand) 45%,transparent);
  color:var(--brand-strong);
  background:var(--brand-weak)
}

.app-shell .crm-kanban-more span{
  padding:1px 7px;
  border-radius:999px;
  background:var(--surface-2);
  color:var(--text-3);
  font-size:10.5px;
  font-weight:800;
  font-variant-numeric:tabular-nums
}

.app-shell .crm-kanban-more.is-loading{
  opacity:.55;
  pointer-events:none
}

/* CRM lead profile and follow-up workspace */

.app-shell .crm-lead-back-link{
  display:inline-flex;
  align-items:center;
  gap:5px;
  margin-bottom:7px;
  color:var(--text-3);
  font-size:11.5px;
  font-weight:700;
  text-decoration:none
}

.app-shell .crm-lead-back-link:hover{
  color:var(--brand-strong);
  text-decoration:none
}

.app-shell .crm-lead-profile-card{
  margin-top:14px;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:15px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

.app-shell .crm-lead-profile-main{
  display:flex;
  align-items:center;
  gap:14px;
  padding:18px 19px;
  border-bottom:1px solid var(--border-2);
  background:linear-gradient(110deg,var(--surface),color-mix(in srgb,var(--brand-weak) 35%,var(--surface)))
}

.app-shell .crm-lead-profile-avatar{
  display:grid;
  width:50px;
  height:50px;
  flex:0 0 50px;
  place-items:center;
  border:3px solid var(--surface);
  border-radius:14px;
  background:linear-gradient(135deg,#2f6fd8,#5a91ef);
  color:#fff;
  font-size:16px;
  font-weight:850;
  box-shadow:0 7px 18px -9px rgba(47,111,216,.8)
}

.app-shell .crm-lead-profile-copy{
  min-width:0
}

.app-shell .crm-lead-profile-name-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px
}

.app-shell .crm-lead-profile-name-row h2{
  margin:0;
  color:var(--text);
  font-size:18px;
  font-weight:850;
  letter-spacing:-.25px
}

.app-shell .crm-lead-profile-meta{
  display:flex;
  flex-wrap:wrap;
  gap:6px 15px;
  margin-top:7px;
  color:var(--text-3);
  font-size:11.5px;
  font-weight:650
}

.app-shell .crm-lead-profile-meta span{
  display:inline-flex;
  align-items:center;
  gap:5px
}

.app-shell .crm-lead-converted-chip{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:4px 8px;
  border-radius:999px;
  background:var(--brand-weak);
  color:var(--brand-strong);
  font-size:10.5px;
  font-weight:800
}

.app-shell .crm-lead-profile-grid{
  display:grid;
  grid-template-columns:1.15fr 1fr 1fr
}

.app-shell .crm-lead-detail-section{
  min-width:0;
  padding:17px 18px
}

.app-shell .crm-lead-detail-section+.crm-lead-detail-section{
  border-left:1px solid var(--border-2)
}

.app-shell .crm-lead-detail-heading{
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:13px
}

.app-shell .crm-lead-detail-heading>span{
  display:grid;
  width:34px;
  height:34px;
  flex:none;
  place-items:center;
  border-radius:9px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .crm-lead-detail-heading strong,.app-shell .crm-lead-detail-heading small{
  display:block
}

.app-shell .crm-lead-detail-heading strong{
  color:var(--text);
  font-size:12.5px;
  font-weight:800
}

.app-shell .crm-lead-detail-heading small{
  margin-top:2px;
  color:var(--text-3);
  font-size:10.5px
}

.app-shell .crm-lead-detail-list{
  display:grid;
  gap:0;
  margin:0
}

.app-shell .crm-lead-detail-list>div{
  display:grid;
  grid-template-columns:minmax(105px,.75fr) minmax(0,1.25fr);
  gap:10px;
  padding:8px 0;
  border-bottom:1px solid var(--border-2)
}

.app-shell .crm-lead-detail-list>div:last-child{
  border-bottom:0
}

.app-shell .crm-lead-detail-list dt{
  display:flex;
  align-items:center;
  gap:6px;
  color:var(--text-3);
  font-size:11px;
  font-weight:650
}

.app-shell .crm-lead-detail-list dd{
  min-width:0;
  margin:0;
  color:var(--text-2);
  font-size:11.5px;
  font-weight:700;
  overflow-wrap:anywhere
}

.app-shell .crm-lead-owner-list{
  display:grid;
  gap:8px
}

.app-shell .crm-lead-owner{
  display:flex;
  align-items:center;
  gap:9px;
  padding:8px 9px;
  border:1px solid var(--border-2);
  border-radius:10px;
  background:var(--surface-2)
}

.app-shell .crm-lead-owner>img,.app-shell .crm-lead-owner>span{
  display:grid;
  width:30px;
  height:30px;
  flex:0 0 30px;
  place-items:center;
  border-radius:9px;
  background:linear-gradient(135deg,#7a8493,#5c6673);
  color:#fff;
  font-size:11px;
  font-weight:800;
  -o-object-fit:cover;
     object-fit:cover
}

.app-shell .crm-lead-owner strong,.app-shell .crm-lead-owner small{
  display:block
}

.app-shell .crm-lead-owner strong{
  color:var(--text);
  font-size:11.5px;
  font-weight:750
}

.app-shell .crm-lead-owner small{
  margin-top:1px;
  color:var(--text-3);
  font-size:10px
}

.app-shell .crm-lead-empty-owner{
  display:flex;
  align-items:center;
  gap:8px;
  padding:11px;
  border:1px dashed var(--border);
  border-radius:10px;
  background:var(--surface-2);
  color:var(--text-3);
  font-size:11.5px;
  font-weight:700
}

.app-shell .crm-lead-extra{
  padding:0 18px 17px;
  border-top:1px solid var(--border-2)
}

.app-shell .crm-lead-links{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding-top:14px
}

.app-shell .crm-lead-links a{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 10px;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface-2);
  color:var(--text-2);
  font-size:11.5px;
  font-weight:700
}

.app-shell .crm-lead-links a:hover{
  border-color:color-mix(in srgb,var(--brand) 38%,var(--border));
  background:var(--brand-weak);
  color:var(--brand-strong);
  text-decoration:none
}

.app-shell .crm-lead-custom-fields{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  margin-top:12px
}

.app-shell .crm-lead-custom-fields>div{
  padding:9px 10px;
  border-radius:9px;
  background:var(--surface-2)
}

.app-shell .crm-lead-custom-fields small,.app-shell .crm-lead-custom-fields strong{
  display:block
}

.app-shell .crm-lead-custom-fields small{
  color:var(--text-3);
  font-size:9.5px;
  font-weight:700
}

.app-shell .crm-lead-custom-fields strong{
  margin-top:3px;
  color:var(--text-2);
  font-size:11.5px;
  font-weight:750;
  overflow-wrap:anywhere
}

.app-shell .crm-lead-schedule-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px
}

.app-shell .crm-lead-schedule-head>div{
  display:flex;
  align-items:center;
  gap:9px
}

.app-shell .crm-lead-schedule-icon{
  display:grid;
  width:34px;
  height:34px;
  place-items:center;
  border-radius:9px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .crm-lead-schedule-head strong,.app-shell .crm-lead-schedule-head small{
  display:block
}

.app-shell .crm-lead-schedule-head strong{
  font-size:13px;
  font-weight:800
}

.app-shell .crm-lead-schedule-head small{
  margin-top:2px;
  color:var(--text-3);
  font-size:10.5px
}

.app-shell .crm-lead-schedule-head .btn-primary{
  height:36px;
  padding:0 12px;
  border-radius:9px;
  font-size:11.5px
}

.app-shell .crm-lead-schedule-table{
  border:1px solid var(--border-2);
  border-radius:11px
}

.app-shell .crm-lead-schedule-table table{
  min-width:1050px
}

.app-shell .crm-lead-schedule-table .dataTables_wrapper{
  min-width:1050px
}

body.app-ui .crm-followup-history-dialog{
  width:min(1180px,calc(100vw - 26px));
  margin:34px auto
}

body.app-ui .crm-followup-history-modal{
  overflow:hidden;
  border:0!important;
  border-radius:16px!important;
  box-shadow:0 24px 70px rgba(16,24,40,.28)
}

body.app-ui .crm-followup-history-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:15px 18px;
  border-bottom:1px solid var(--border-2)
}

body.app-ui .crm-followup-history-head>div{
  display:flex;
  align-items:center;
  gap:10px
}

body.app-ui .crm-followup-history-head>div>span{
  display:grid;
  width:38px;
  height:38px;
  place-items:center;
  border-radius:10px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

body.app-ui .crm-followup-history-head h4{
  margin:0;
  color:var(--text);
  font-size:15px;
  font-weight:800
}

body.app-ui .crm-followup-history-head small{
  display:block;
  margin-top:2px;
  color:var(--text-3);
  font-size:11.5px
}

body.app-ui .crm-followup-history-head .close{
  display:grid;
  width:34px;
  height:34px;
  place-items:center;
  margin:0;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface-2);
  color:var(--text-3);
  opacity:1
}

body.app-ui .crm-followup-history-head .close:hover{
  background:var(--surface-3);
  color:var(--text)
}

body.app-ui .crm-followup-history-body{
  padding:16px 18px 18px
}

body.app-ui .crm-followup-history-body .crm-lead-schedule-table{
  overflow-x:auto
}

/* Follow-up log detail */

body.app-ui .crm-followup-log-view-dialog{
  width:min(700px,calc(100vw - 28px));
  margin:42px auto
}

body.app-ui .crm-followup-log-view{
  overflow:hidden;
  border:0;
  border-radius:15px;
  background:var(--surface);
  box-shadow:0 28px 76px -28px rgba(13,28,19,.62)
}

body.app-ui .crm-followup-log-view__header{
  display:flex;
  min-height:76px;
  align-items:center;
  gap:11px;
  padding:13px 15px;
  border-bottom:1px solid var(--border-2);
  background:var(--surface)
}

body.app-ui .crm-followup-log-view__identity{
  display:flex;
  min-width:0;
  align-items:center;
  gap:10px;
  flex:1
}

body.app-ui .crm-followup-log-view__identity>div{
  min-width:0
}

body.app-ui .crm-followup-log-view__identity small{
  display:block;
  color:var(--brand-strong);
  font-size:8.5px;
  font-weight:820;
  letter-spacing:.06em;
  text-transform:uppercase
}

body.app-ui .crm-followup-log-view__identity h4{
  max-width:430px;
  margin:2px 0 0;
  overflow:hidden;
  color:var(--text);
  font-size:15px;
  font-weight:820;
  line-height:1.35;
  text-overflow:ellipsis;
  white-space:nowrap
}

body.app-ui .crm-followup-log-view__type-icon{
  display:grid;
  width:38px;
  height:38px;
  flex:0 0 38px;
  place-items:center;
  border-radius:10px;
  background:var(--surface-3);
  color:var(--text-2)
}

body.app-ui .crm-followup-log-view__type-icon svg{
  width:15px;
  height:15px
}

body.app-ui .crm-followup-log-view__type-icon.is-call{
  background:#e9f0ff;
  color:#2d65c9
}

body.app-ui .crm-followup-log-view__type-icon.is-sms{
  background:#e7f7ed;
  color:#24824b
}

body.app-ui .crm-followup-log-view__type-icon.is-email{
  background:#fff3df;
  color:#a9680e
}

body.app-ui .crm-followup-log-view__type-icon.is-meeting{
  background:#f0ebff;
  color:#7051bf
}

body.app-ui .crm-followup-log-view__badge{
  display:inline-flex;
  align-items:center;
  padding:4px 8px;
  border-radius:7px;
  background:var(--surface-3);
  color:var(--text-2);
  font-size:8.5px;
  font-weight:780;
  letter-spacing:.04em;
  text-transform:uppercase
}

body.app-ui .crm-followup-log-view__badge.is-call{
  background:#e9f0ff;
  color:#2d65c9
}

body.app-ui .crm-followup-log-view__badge.is-sms{
  background:#e7f7ed;
  color:#24824b
}

body.app-ui .crm-followup-log-view__badge.is-email{
  background:#fff3df;
  color:#a9680e
}

body.app-ui .crm-followup-log-view__badge.is-meeting{
  background:#f0ebff;
  color:#7051bf
}

body.app-ui .crm-followup-log-view__body{
  display:grid;
  gap:11px;
  padding:13px;
  background:var(--surface-2)
}

body.app-ui .crm-followup-log-window{
  display:grid;
  grid-template-columns:minmax(0,1fr) 54px minmax(0,1fr);
  align-items:center;
  overflow:hidden;
  border:1px solid var(--border-2);
  border-radius:11px;
  background:var(--surface)
}

body.app-ui .crm-followup-log-window__point{
  display:flex;
  min-width:0;
  align-items:center;
  gap:8px;
  padding:12px
}

body.app-ui .crm-followup-log-window__point>span{
  display:grid;
  width:29px;
  height:29px;
  flex:0 0 29px;
  place-items:center;
  border-radius:8px;
  background:#e9f0ff;
  color:#2d65c9
}

/* The second point is the log's state, not the end of a window, so it is tinted by that state
   rather than always red — a contact that was made is not a failure. */

body.app-ui .crm-followup-log-window__point.is-end>span{
  background:var(--surface-3);
  color:var(--text-3)
}

body.app-ui .crm-followup-log-window__point.is-planned>span{
  background:#fff4e2;
  color:#a35a09
}

body.app-ui .crm-followup-log-window__point.is-completed>span{
  background:var(--brand-weak);
  color:var(--brand-strong)
}

body.app-ui .crm-followup-log-window__point>div>em{
  display:block;
  margin-top:2px;
  color:var(--text-3);
  font-size:10px;
  font-style:normal;
  font-weight:650
}

body.app-ui .crm-followup-log-window__point>span svg{
  width:12px;
  height:12px
}

body.app-ui .crm-followup-log-window__point small,body.app-ui .crm-followup-log-window__point strong{
  display:block
}

body.app-ui .crm-followup-log-window__point small{
  color:var(--text-3);
  font-size:8.5px;
  font-weight:720
}

body.app-ui .crm-followup-log-window__point strong{
  margin-top:2px;
  color:var(--text-2);
  font-size:10.5px;
  font-weight:780;
  overflow-wrap:anywhere
}

body.app-ui .crm-followup-log-window__line{
  display:flex;
  align-items:center;
  color:var(--brand)
}

body.app-ui .crm-followup-log-window__line span{
  height:1px;
  flex:1;
  background:var(--border)
}

body.app-ui .crm-followup-log-window__line svg{
  width:13px;
  height:13px;
  flex:0 0 13px
}

body.app-ui .crm-followup-log-context{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  overflow:hidden;
  border:1px solid var(--border-2);
  border-radius:11px;
  background:var(--surface)
}

body.app-ui .crm-followup-log-context__item{
  display:flex;
  min-width:0;
  align-items:center;
  gap:8px;
  padding:10px 12px
}

body.app-ui .crm-followup-log-context__item+.crm-followup-log-context__item{
  border-left:1px solid var(--border-2)
}

body.app-ui .crm-followup-log-context__item>span{
  display:grid;
  width:29px;
  height:29px;
  flex:0 0 29px;
  place-items:center;
  border-radius:8px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

body.app-ui .crm-followup-log-context__item>span svg{
  width:13px;
  height:13px
}

body.app-ui .crm-followup-log-context__item>.crm-followup-log-author{
  font-size:8.5px;
  font-weight:820
}

body.app-ui .crm-followup-log-context__item small,body.app-ui .crm-followup-log-context__item strong{
  display:block
}

body.app-ui .crm-followup-log-context__item small{
  color:var(--text-3);
  font-size:8.5px;
  font-weight:720
}

body.app-ui .crm-followup-log-context__item strong{
  margin-top:2px;
  color:var(--text-2);
  font-size:10.5px;
  font-weight:760;
  overflow-wrap:anywhere
}

body.app-ui .crm-followup-log-description{
  padding:11px 12px;
  border:1px solid var(--border-2);
  border-radius:11px;
  background:var(--surface)
}

body.app-ui .crm-followup-log-description__heading{
  display:flex;
  align-items:center;
  gap:8px
}

body.app-ui .crm-followup-log-description__heading>span{
  display:grid;
  width:29px;
  height:29px;
  flex:0 0 29px;
  place-items:center;
  border-radius:8px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

body.app-ui .crm-followup-log-description__heading>span svg{
  width:13px;
  height:13px
}

body.app-ui .crm-followup-log-description__heading strong,body.app-ui .crm-followup-log-description__heading small{
  display:block
}

body.app-ui .crm-followup-log-description__heading strong{
  color:var(--text);
  font-size:11px;
  font-weight:800
}

body.app-ui .crm-followup-log-description__heading small{
  margin-top:1px;
  color:var(--text-3);
  font-size:8.5px
}

body.app-ui .crm-followup-log-description__body{
  margin-top:9px;
  padding:9px 10px;
  border-radius:8px;
  background:var(--surface-2);
  color:var(--text-2);
  font-size:11px;
  line-height:1.6;
  overflow-wrap:anywhere
}

body.app-ui .crm-followup-log-description__body>:first-child{
  margin-top:0
}

body.app-ui .crm-followup-log-description__body>:last-child{
  margin-bottom:0
}

body.app-ui .crm-followup-log-description__empty{
  color:var(--text-3);
  font-style:italic
}

body.app-ui .crm-followup-log-view__footer{
  display:flex;
  min-height:52px;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  margin:0;
  padding:8px 13px;
  border-top:1px solid var(--border-2);
  background:var(--surface)
}

body.app-ui .crm-followup-log-view__footer>span{
  margin-right:auto;
  color:var(--text-3);
  font-size:9px
}

body.app-ui .crm-followup-log-view__footer .btn-ghost{
  height:34px;
  min-width:82px;
  justify-content:center
}

@media(max-width:560px){
  body.app-ui .crm-followup-log-view-dialog{
    margin:14px auto
  }

  body.app-ui .crm-followup-log-view__badge{
    display:none
  }

  body.app-ui .crm-followup-log-window{
    grid-template-columns:1fr
  }

  body.app-ui .crm-followup-log-window__line{
    height:20px;
    justify-content:center
  }

  body.app-ui .crm-followup-log-window__line span{
    display:none
  }

  body.app-ui .crm-followup-log-window__line svg{
    transform:rotate(90deg)
  }

  body.app-ui .crm-followup-log-context{
    grid-template-columns:1fr
  }

  body.app-ui .crm-followup-log-context__item+.crm-followup-log-context__item{
    border-top:1px solid var(--border-2);
    border-left:0
  }
}

/* Follow-up record + activity dialog */

body.app-ui .crm-followup-view-dialog{
  width:min(880px,calc(100vw - 28px));
  margin:28px auto
}

body.app-ui .crm-followup-view-modal{
  overflow:hidden;
  border:0;
  border-radius:16px;
  background:var(--surface);
  box-shadow:0 28px 80px -30px rgba(13,28,19,.58)
}

body.app-ui .crm-followup-view-modal .crm-followup-view-header{
  display:flex;
  min-height:78px;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
  padding:14px 17px;
  border-bottom:1px solid var(--border-2);
  background:var(--surface)
}

body.app-ui .crm-followup-view-heading{
  display:flex;
  min-width:0;
  align-items:center;
  gap:11px;
  flex:1
}

body.app-ui .crm-followup-view-modal .fl-head-avatar{
  display:grid;
  width:42px;
  height:42px;
  flex:0 0 42px;
  place-items:center;
  border-radius:11px;
  background:var(--brand);
  font-size:13px;
  font-weight:820;
  box-shadow:0 6px 15px -8px rgba(21,154,77,.7)
}

body.app-ui .crm-followup-view-modal .fl-head-text{
  min-width:0
}

body.app-ui .crm-followup-view-modal .fl-head-eyebrow{
  color:var(--brand-strong);
  font-size:9.5px;
  font-weight:820;
  letter-spacing:.055em
}

body.app-ui .crm-followup-view-modal .fl-head-title{
  max-width:430px;
  margin:2px 0 0;
  overflow:hidden;
  color:var(--text);
  font-size:15.5px;
  font-weight:820;
  text-overflow:ellipsis;
  white-space:nowrap
}

body.app-ui .crm-followup-view-modal .fl-head-sub{
  margin-top:2px;
  color:var(--text-3);
  font-size:10.5px
}

body.app-ui .crm-followup-view-header-badges{
  display:flex;
  align-items:center;
  gap:6px
}

body.app-ui .crm-followup-view-status,body.app-ui .crm-followup-view-type{
  display:inline-flex;
  align-items:center;
  padding:4px 8px;
  border-radius:7px;
  font-size:9.5px;
  font-weight:760;
  white-space:nowrap
}

body.app-ui .crm-followup-view-status{
  background:var(--brand-weak);
  color:var(--brand-strong)
}

body.app-ui .crm-followup-view-status.is-cancelled{
  background:var(--danger-weak);
  color:var(--danger)
}

body.app-ui .crm-followup-view-status.is-completed{
  background:#e8f4f4;
  color:#0f7474
}

body.app-ui .crm-followup-view-status.is-open{
  background:#eef5ff;
  color:#2761b2
}

body.app-ui .crm-followup-view-type{
  background:var(--surface-3);
  color:var(--text-2)
}

body.app-ui .crm-followup-view-modal .crm-followup-modal__close{
  margin-left:2px
}

body.app-ui .crm-followup-view-modal .fl-modal-body{
  max-height:min(72vh,720px);
  padding:14px;
  overflow-y:auto;
  background:var(--surface-2)
}

body.app-ui .crm-followup-view-modal .fl-content{
  display:grid;
  gap:12px;
  padding:0
}

body.app-ui .crm-followup-view-summary{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  overflow:hidden;
  border:1px solid var(--border-2);
  border-radius:12px;
  background:var(--surface)
}

body.app-ui .crm-followup-view-fact{
  display:flex;
  min-width:0;
  align-items:center;
  gap:9px;
  padding:12px
}

body.app-ui .crm-followup-view-fact+.crm-followup-view-fact{
  border-left:1px solid var(--border-2)
}

body.app-ui .crm-followup-view-fact:nth-child(3){
  border-left:0
}

body.app-ui .crm-followup-view-fact:nth-child(n+3){
  border-top:1px solid var(--border-2)
}

body.app-ui .crm-followup-view-fact>span,body.app-ui .crm-followup-view-section-title>span{
  display:grid;
  place-items:center;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

body.app-ui .crm-followup-view-fact>span{
  width:31px;
  height:31px;
  flex:0 0 31px;
  border-radius:9px
}

body.app-ui .crm-followup-view-fact small,body.app-ui .crm-followup-view-fact strong{
  display:block;
  min-width:0
}

body.app-ui .crm-followup-view-fact small{
  color:var(--text-3);
  font-size:9px;
  font-weight:720
}

body.app-ui .crm-followup-view-fact strong{
  display:-webkit-box;
  margin-top:3px;
  overflow:hidden;
  color:var(--text-2);
  font-size:10.5px;
  font-weight:760;
  line-height:1.4;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow-wrap:anywhere
}

body.app-ui .crm-followup-view-notes,body.app-ui .crm-followup-view-invoices{
  padding:12px;
  border:1px solid var(--border-2);
  border-radius:12px;
  background:var(--surface)
}

body.app-ui .crm-followup-view-section-title{
  display:flex;
  min-width:0;
  align-items:center;
  gap:9px
}

body.app-ui .crm-followup-view-section-title>span{
  width:31px;
  height:31px;
  flex:0 0 31px;
  border-radius:9px
}

body.app-ui .crm-followup-view-section-title strong,body.app-ui .crm-followup-view-section-title small{
  display:block
}

body.app-ui .crm-followup-view-section-title strong{
  color:var(--text);
  font-size:11.5px;
  font-weight:800
}

body.app-ui .crm-followup-view-section-title small{
  margin-top:1px;
  color:var(--text-3);
  font-size:9.5px
}

body.app-ui .crm-followup-view-notes__body{
  margin-top:10px;
  padding:10px 11px;
  border-radius:9px;
  background:var(--surface-2);
  color:var(--text-2);
  font-size:11.5px;
  line-height:1.65;
  overflow-wrap:anywhere
}

body.app-ui .crm-followup-view-notes__body>:first-child{
  margin-top:0
}

body.app-ui .crm-followup-view-notes__body>:last-child{
  margin-bottom:0
}

body.app-ui .crm-followup-view-invoices{
  overflow:hidden;
  padding:0
}

body.app-ui .crm-followup-view-invoices>.col-md-12{
  width:100%;
  padding:12px;
  float:none
}

body.app-ui .crm-followup-view-invoices table{
  margin:8px 0 0
}

body.app-ui .crm-followup-view-activity-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px;
  border:1px solid var(--border-2);
  border-radius:12px;
  background:var(--surface)
}

body.app-ui .crm-followup-view-activity-head .btn-primary{
  height:34px;
  padding:0 10px;
  border-radius:8px;
  font-size:10.5px
}

body.app-ui .crm-followup-view-modal .fl-timeline{
  margin:0;
  padding:2px 2px 0
}

body.app-ui .crm-followup-view-modal .fl-day-divider{
  gap:9px;
  margin:7px 0 11px
}

body.app-ui .crm-followup-view-modal .fl-day-divider span{
  padding:3px 10px;
  border-color:var(--border-2);
  background:var(--surface);
  color:var(--text-3);
  font-size:9.5px;
  font-weight:750
}

body.app-ui .crm-followup-view-modal .fl-day-divider:before,body.app-ui .crm-followup-view-modal .fl-day-divider:after{
  background:var(--border-2)
}

body.app-ui .crm-followup-view-modal .fl-entry{
  gap:11px;
  padding-bottom:12px
}

body.app-ui .crm-followup-view-modal .fl-entry:before{
  left:15px;
  top:34px;
  bottom:-2px;
  width:1px;
  background:var(--border)
}

body.app-ui .crm-followup-view-modal .fl-dot{
  display:grid;
  width:31px;
  height:31px;
  flex:0 0 31px;
  place-items:center;
  border-radius:9px;
  box-shadow:0 0 0 3px var(--surface-2)
}

body.app-ui .crm-followup-view-modal .fl-dot svg{
  width:14px;
  height:14px;
  stroke-width:2
}

body.app-ui .crm-followup-view-modal .fl-dot--call{
  background:#e9f0ff;
  color:#2d65c9
}

body.app-ui .crm-followup-view-modal .fl-dot--sms{
  background:#e7f7ed;
  color:#24824b
}

body.app-ui .crm-followup-view-modal .fl-dot--email{
  background:#fff3df;
  color:#a9680e
}

body.app-ui .crm-followup-view-modal .fl-dot--meeting{
  background:#f0ebff;
  color:#7051bf
}

body.app-ui .crm-followup-view-modal .fl-dot--default{
  background:var(--surface-3);
  color:var(--text-2)
}

body.app-ui .crm-followup-view-modal .fl-card{
  border-color:var(--border-2);
  border-radius:12px;
  padding:12px 13px 10px;
  box-shadow:none
}

body.app-ui .crm-followup-view-modal .fl-card:hover{
  transform:none;
  border-color:color-mix(in srgb,var(--brand) 25%,var(--border));
  box-shadow:0 10px 24px -20px rgba(16,32,24,.45)
}

body.app-ui .crm-followup-view-modal .fl-card-head{
  align-items:flex-start;
  gap:10px
}

body.app-ui .crm-followup-view-modal .fl-card-title{
  min-width:0
}

body.app-ui .crm-followup-view-modal .fl-card-title small{
  display:block;
  margin-bottom:2px;
  color:var(--text-3);
  font-size:8.5px;
  font-weight:750;
  letter-spacing:.055em;
  text-transform:uppercase
}

body.app-ui .crm-followup-view-modal .fl-subject{
  display:block;
  color:var(--text);
  font-size:12.5px;
  font-weight:800;
  line-height:1.35
}

body.app-ui .crm-followup-view-modal .fl-badge{
  padding:3px 8px;
  font-size:8.5px;
  letter-spacing:.04em
}

/* Three cells on a contact still owed, four once it has ended — the columns were written out
   one by one, so the fourth wrapped onto a row of its own at the width of the first. */

body.app-ui .crm-followup-view-modal .fl-event-meta-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(145px,1fr));
  gap:0;
  margin-top:10px;
  border-top:1px solid var(--border-2);
  border-bottom:1px solid var(--border-2)
}

body.app-ui .crm-followup-view-modal .fl-event-meta{
  display:flex;
  min-width:0;
  align-items:center;
  gap:7px;
  padding:8px 10px
}

body.app-ui .crm-followup-view-modal .fl-event-meta+.fl-event-meta{
  border-left:1px solid var(--border-2)
}

body.app-ui .crm-followup-view-modal .fl-event-meta>span{
  display:grid;
  width:26px;
  height:26px;
  flex:0 0 26px;
  place-items:center;
  border-radius:8px;
  background:var(--surface-2);
  color:var(--text-3)
}

body.app-ui .crm-followup-view-modal .fl-event-meta>span svg{
  width:13px;
  height:13px
}

body.app-ui .crm-followup-view-modal .fl-event-meta>div{
  min-width:0
}

body.app-ui .crm-followup-view-modal .fl-event-meta small,body.app-ui .crm-followup-view-modal .fl-event-meta strong{
  display:block
}

body.app-ui .crm-followup-view-modal .fl-event-meta small{
  color:var(--text-3);
  font-size:8.5px;
  font-weight:700
}

body.app-ui .crm-followup-view-modal .fl-event-meta strong{
  margin-top:2px;
  color:var(--text-2);
  font-size:9.5px;
  font-weight:720;
  line-height:1.35;
  overflow-wrap:anywhere
}

body.app-ui .crm-followup-view-modal .fl-event-meta strong i{
  padding:0 2px;
  color:var(--brand);
  font-style:normal
}

body.app-ui .crm-followup-view-modal .fl-event-owner>.fl-avatar{
  background:var(--brand-weak);
  color:var(--brand-strong);
  font-size:8.5px;
  font-weight:800
}

body.app-ui .crm-followup-view-modal .fl-body{
  margin-top:9px;
  padding:8px 10px;
  border-radius:8px;
  background:var(--surface-2);
  color:var(--text-2);
  font-size:10.5px;
  line-height:1.55
}

body.app-ui .crm-followup-view-modal .fl-body>small{
  display:block;
  margin-bottom:3px;
  color:var(--text-3);
  font-size:8.5px;
  font-weight:750;
  letter-spacing:.045em;
  text-transform:uppercase
}

body.app-ui .crm-followup-view-modal .fl-body>div>:first-child{
  margin-top:0
}

body.app-ui .crm-followup-view-modal .fl-body>div>:last-child{
  margin-bottom:0
}

body.app-ui .crm-followup-view-modal .fl-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:5px;
  margin-top:9px;
  padding-top:9px
}

body.app-ui .crm-followup-view-modal .fl-actions .fl-edited{
  margin-right:auto;
  padding:2px 7px;
  background:#f5f0ff;
  color:#7955b6;
  font-size:8.5px
}

body.app-ui .crm-followup-view-modal .fl-action{
  display:inline-flex;
  width:auto;
  height:29px;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:0 8px;
  border:1px solid var(--border-2);
  border-radius:7px;
  background:var(--surface);
  color:var(--text-2);
  font-size:9.5px;
  font-weight:720
}

body.app-ui .crm-followup-view-modal .fl-action svg{
  width:12px;
  height:12px;
  stroke-width:2
}

body.app-ui .crm-followup-view-modal .fl-action:hover{
  transform:none;
  border-color:var(--border);
  background:var(--surface-2);
  color:var(--text)
}

body.app-ui .crm-followup-view-modal .fl-action--view{
  color:var(--brand-strong)
}

body.app-ui .crm-followup-view-modal .fl-action--view:hover{
  border-color:color-mix(in srgb,var(--brand) 25%,var(--border));
  background:var(--brand-weak);
  color:var(--brand-strong)
}

body.app-ui .crm-followup-view-modal .fl-action--delete{
  color:var(--danger)
}

body.app-ui .crm-followup-view-modal .fl-action--delete:hover{
  border-color:#f1caca;
  background:#fff3f3;
  color:var(--danger)
}

/* Sending the customer a message about this task is the only action on the card that leaves the
   system, so it carries a colour rather than sitting grey among the record-editing buttons — and
   the same Telegram blue as the listing's Send Telegram, because it is the same act from a
   different screen and Mark done beside it is already the brand green. */

/* No message template on this business can be sent from a task yet. Said where the picker would
   have been, with the way to fix it beside it — a required field with an empty list is otherwise a
   dead end that explains nothing. */

body.app-ui .crm-task-template-empty{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  padding:11px 13px;
  border:1px dashed color-mix(in srgb,var(--warn) 45%,var(--border));
  border-radius:10px;
  background:var(--warn-weak);
  color:color-mix(in srgb,var(--warn) 62%,var(--text));
  font-size:11.5px;
  line-height:1.55
}

body.app-ui .crm-task-template-empty>a{
  flex:none;
  padding:5px 11px;
  border:1px solid var(--warn);
  border-radius:999px;
  background:var(--warn);
  color:#fff;
  font-weight:750;
  text-decoration:none
}

body.app-ui .crm-task-template-empty>a:hover{
  border-color:color-mix(in srgb,var(--warn) 82%,#000);
  background:color-mix(in srgb,var(--warn) 82%,#000)
}

body.app-ui .crm-followup-view-modal .fl-action--telegram{
  border-color:var(--telegram);
  background:var(--telegram);
  color:#fff
}

body.app-ui .crm-followup-view-modal .fl-action--telegram:hover{
  border-color:var(--telegram-strong);
  background:var(--telegram-strong);
  color:#fff
}

/* The same button on the task cards inside the Plan dialog, which draws its own buttons with
   utility classes rather than the .fl-action set. One rule so the two cannot drift apart. */

body.app-ui .crm-plan-day-telegram{
  border:1px solid var(--telegram);
  background:var(--telegram);
  color:#fff
}

body.app-ui .crm-plan-day-telegram:hover{
  border-color:var(--telegram-strong);
  background:var(--telegram-strong);
  color:#fff
}

/* What a Telegram send is ABOUT — the follow-up category, and the one task when there is one.
   Context, not a state: these used to be a hardcoded amber and indigo, which read as a warning
   about the category and could not follow the dark theme. Drawn as a quiet surface chip now, with
   the icon carrying the only colour, so the two chips are told apart without either shouting. */

body.app-ui .tg-context-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 11px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--surface-2);
  color:var(--text);
  font-size:11px;
  font-weight:650;
  line-height:1.4
}

body.app-ui .tg-context-chip__icon{
  flex:none;
  color:var(--brand)
}

body.app-ui .tg-context-chip--task .tg-context-chip__icon{
  color:var(--telegram)
}

body.app-ui .tg-context-note{
  margin-left:7px;
  color:var(--text-2);
  font-size:11px
}

/* The follow-up category has no template linked, so there is nothing to send. A real warning,
   drawn in the theme's warn tone rather than a hardcoded amber that dark mode could not follow. */

body.app-ui .tg-template-missing{
  display:flex;
  gap:11px;
  align-items:flex-start;
  padding:13px 15px;
  border:1px solid color-mix(in srgb,var(--warn) 55%,var(--border));
  border-left:3px solid var(--warn);
  border-radius:10px;
  background:var(--warn-weak)
}

body.app-ui .tg-template-missing__icon{
  flex:0 0 auto;
  margin-top:1px;
  color:var(--warn)
}

body.app-ui .tg-template-missing__icon svg{
  width:17px;
  height:17px;
  stroke-width:2.2
}

body.app-ui .tg-template-missing__body{
  flex:1 1 auto;
  min-width:0;
  font-size:11.5px;
  line-height:1.6
}

/* Warning wording in the warning tone. It was drawn in the ordinary text colour, which made a
   blocking problem read like a caption. Mixed toward --text rather than raw --warn so it stays
   legible as a paragraph — pure orange body text is a headache to read. */

body.app-ui .tg-template-missing__body>strong{
  display:block;
  margin-bottom:3px;
  color:var(--warn);
  font-size:12.5px;
  font-weight:800;
  letter-spacing:.01em
}

body.app-ui .tg-template-missing__body>span{
  display:block;
  color:color-mix(in srgb,var(--warn) 62%,var(--text));
  font-weight:600
}

body.app-ui .tg-template-missing__body>span+span{
  margin-top:5px
}

body.app-ui .tg-template-missing__body>a{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:10px;
  padding:6px 13px;
  border:1px solid var(--warn);
  border-radius:999px;
  background:var(--warn);
  color:#fff;
  font-size:11px;
  font-weight:750;
  text-decoration:none;
  transition:background .12s ease,border-color .12s ease
}

body.app-ui .tg-template-missing__body>a svg{
  width:14px;
  height:14px;
  stroke-width:2.2
}

body.app-ui .tg-template-missing__body>a:hover{
  border-color:color-mix(in srgb,var(--warn) 82%,#000);
  background:color-mix(in srgb,var(--warn) 82%,#000);
  color:#fff
}

/* Nothing to send: everything but the notice goes, including the Send button in the footer.
   Enforced here rather than in script — the modal's own JS shows these again after the guard. */

body.app-ui #send_telegram_form.is-template-missing #telegram_send_area>*:not(#telegram_template_missing){
  display:none!important
}

body.app-ui #send_telegram_form.is-template-missing #send_telegram_btn{
  display:none!important
}

/* Marking a contact done is the one action on a log that is ordinary work rather than editing a
   record, so it leads the row and carries the brand rather than sitting grey beside Delete. */

body.app-ui .crm-followup-view-modal .fl-action--done{
  margin-right:auto;
  border-color:color-mix(in srgb,var(--brand) 30%,var(--border));
  background:var(--brand-weak);
  color:var(--brand-strong)
}

body.app-ui .crm-followup-view-modal .fl-action--done:hover{
  border-color:var(--brand);
  background:color-mix(in srgb,var(--brand) 16%,var(--surface));
  color:var(--brand-strong)
}

body.app-ui .crm-followup-view-modal .fl-action--done:disabled{
  opacity:.55;
  cursor:progress
}

body.app-ui .crm-followup-view-modal .fl-actions .fl-action--done+.fl-edited{
  margin-right:0
}

/* Is this contact still owed, and what came of it. Planned is the only one that reads as work
   outstanding, so it is the only one that carries a colour with any weight. */

body.app-ui .crm-followup-view-modal .fl-state-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  margin-top:7px
}

body.app-ui .crm-followup-view-modal .fl-log-state{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:2px 7px;
  border-radius:999px;
  font-size:9px;
  font-weight:800;
  letter-spacing:.02em;
  text-transform:uppercase
}

body.app-ui .crm-followup-view-modal .fl-log-state svg{
  width:11px;
  height:11px;
  stroke-width:2.4
}

body.app-ui .crm-followup-view-modal .fl-log-state.is-planned{
  background:#fff4e2;
  color:#a35a09
}

body.app-ui .crm-followup-view-modal .fl-log-state.is-completed{
  background:var(--brand-weak);
  color:var(--brand-strong)
}

body.app-ui .crm-followup-view-modal .fl-log-state.is-cancelled{
  background:var(--surface-3);
  color:var(--text-3)
}

body.app-ui .crm-followup-view-modal .fl-log-result{
  display:inline-flex;
  padding:2px 7px;
  border:1px solid var(--border-2);
  border-radius:999px;
  background:var(--surface);
  color:var(--text-2);
  font-size:9px;
  font-weight:730
}

body.app-ui .crm-followup-view-modal .fl-empty{
  display:flex;
  min-height:138px;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  padding:20px;
  border:1px dashed var(--border);
  border-radius:12px;
  background:var(--surface);
  color:var(--text-3)
}

body.app-ui .crm-followup-view-modal .fl-empty>span{
  display:grid;
  width:44px;
  height:44px;
  place-items:center;
  border-radius:13px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

body.app-ui .crm-followup-view-modal .fl-empty .fl-empty-title{
  margin-top:10px;
  color:var(--text);
  font-size:12px;
  font-weight:800
}

body.app-ui .crm-followup-view-modal .fl-empty p{
  max-width:360px;
  margin:4px 0 0;
  color:var(--text-3);
  font-size:10.5px;
  line-height:1.5;
  text-align:center
}

body.app-ui .crm-followup-view-footer{
  display:flex;
  min-height:54px;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  margin:0;
  padding:9px 14px;
  border-top:1px solid var(--border-2);
  background:var(--surface)
}

body.app-ui .crm-followup-view-footer>span{
  margin-right:auto;
  color:var(--text-3);
  font-size:9.5px
}

body.app-ui .crm-followup-view-footer .btn-ghost{
  height:36px;
  min-width:88px;
  justify-content:center
}

@media(max-width:760px){
  body.app-ui .crm-followup-view-dialog{
    width:calc(100vw - 18px);
    margin:9px auto
  }

  body.app-ui .crm-followup-view-header-badges{
    display:none
  }

  body.app-ui .crm-followup-view-activity-head{
    align-items:flex-start;
    flex-direction:column
  }

  body.app-ui .crm-followup-view-activity-head .btn-primary{
    width:100%;
    justify-content:center
  }

  body.app-ui .crm-followup-view-modal .fl-event-meta-grid{
    grid-template-columns:1fr
  }

  body.app-ui .crm-followup-view-modal .fl-event-meta+.fl-event-meta{
    border-top:1px solid var(--border-2);
    border-left:0
  }
}

@media(max-width:440px){
  body.app-ui .crm-followup-view-summary{
    grid-template-columns:1fr
  }

  body.app-ui .crm-followup-view-fact+.crm-followup-view-fact{
    border-top:1px solid var(--border-2);
    border-left:0
  }

  body.app-ui .crm-followup-view-modal .fl-entry{
    gap:8px
  }

  body.app-ui .crm-followup-view-modal .fl-card{
    padding:10px
  }

  body.app-ui .crm-followup-view-modal .fl-action{
    width:29px;
    padding:0
  }

  body.app-ui .crm-followup-view-modal .fl-action span{
    display:none
  }
}

@media (max-width:980px){
  .app-shell .crm-lead-profile-grid{
    grid-template-columns:1fr 1fr
  }

  .app-shell .crm-lead-detail-section:last-child{
    grid-column:1/-1;
    border-top:1px solid var(--border-2);
    border-left:0
  }

  .app-shell .crm-lead-custom-fields{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}

@media (max-width:660px){
  .app-shell .crm-lead-profile-main{
    align-items:flex-start
  }

  .app-shell .crm-lead-profile-grid{
    grid-template-columns:1fr
  }

  .app-shell .crm-lead-detail-section+.crm-lead-detail-section{
    border-top:1px solid var(--border-2);
    border-left:0
  }

  .app-shell .crm-lead-detail-section:last-child{
    grid-column:auto
  }

  .app-shell .crm-lead-custom-fields{
    grid-template-columns:1fr
  }

  .app-shell .crm-lead-schedule-head{
    align-items:flex-start;
    flex-direction:column
  }

  .app-shell .crm-lead-schedule-head .btn-primary{
    width:100%;
    justify-content:center
  }
}

/* Shared Contact + Lead profile system */

.app-shell .contact-profile-page,.app-shell .crm-lead-show-page{
  max-width:1600px
}

.app-shell .contact-profile-page{
  display:grid;
  gap:16px
}

.app-shell .contact-profile-page>.page-header{
  margin-bottom:0
}

.app-shell .profile-record-switcher{
  width:min(320px,32vw)
}

.app-shell .profile-record-switcher .select2-container,.app-shell .profile-record-switcher .form-control{
  width:100%!important
}

.app-shell .profile-more-actions{
  position:relative
}

.app-shell .profile-more-actions>.btn-ghost{
  height:40px
}

.app-shell .profile-more-actions.open>.btn-ghost{
  border-color:var(--brand);
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .profile-more-actions .table-action-menu{
  right:0;
  left:auto;
  min-width:220px
}

.app-shell .profile-print-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr))
}

.app-shell .profile-metrics-region{
  padding:15px;
  border:1px solid var(--border);
  border-radius:15px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

.app-shell .profile-section-kicker{
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:12px
}

.app-shell .profile-section-kicker>span{
  display:grid;
  width:32px;
  height:32px;
  place-items:center;
  border-radius:9px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .profile-section-kicker strong,.app-shell .profile-section-kicker small{
  display:block
}

.app-shell .profile-section-kicker strong{
  color:var(--text);
  font-size:12.5px;
  font-weight:800
}

.app-shell .profile-section-kicker small{
  margin-top:1px;
  color:var(--text-3);
  font-size:10.5px
}

.app-shell .profile-metrics-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(185px,1fr));
  gap:9px
}

.app-shell .profile-metric{
  position:relative;
  display:flex;
  min-height:94px;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  overflow:hidden;
  padding:14px 14px 13px;
  border:1px solid var(--border-2);
  border-radius:12px;
  background:var(--surface-2);
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease
}

.app-shell .profile-metric:after{
  position:absolute;
  right:-18px;
  bottom:-30px;
  width:74px;
  height:74px;
  border-radius:50%;
  background:currentColor;
  content:"";
  opacity:.035
}

.app-shell .profile-metric:hover{
  transform:translateY(-2px);
  border-color:color-mix(in srgb,currentColor 24%,var(--border));
  box-shadow:0 9px 24px -18px currentColor
}

.app-shell .profile-metric-copy{
  min-width:0
}

.app-shell .profile-metric-label{
  display:block;
  color:var(--text-3);
  font-size:10.5px;
  font-weight:700;
  line-height:1.25
}

.app-shell .profile-metric-value{
  display:block;
  margin-top:7px;
  color:var(--text);
  font-size:18px;
  font-weight:850;
  letter-spacing:-.25px;
  line-height:1;
  font-variant-numeric:tabular-nums;
  white-space:nowrap
}

.app-shell .profile-metric-note{
  display:block;
  margin-top:5px;
  color:var(--text-3);
  font-size:9.5px
}

.app-shell .profile-metric-icon{
  display:grid;
  width:38px;
  height:38px;
  flex:0 0 38px;
  place-items:center;
  border-radius:11px;
  background:color-mix(in srgb,currentColor 12%,var(--surface));
  color:inherit
}

.app-shell .profile-metric.is-brand{
  color:var(--brand-strong)
}

.app-shell .profile-metric.is-blue{
  color:#2b68cc
}

.app-shell .profile-metric.is-danger{
  color:var(--danger)
}

.app-shell .profile-metric.is-amber{
  color:#bd7710
}

.app-shell .profile-metric.is-violet{
  color:#7357c7
}

.app-shell .profile-metric.is-teal{
  color:#0e8884
}

.app-shell .profile-record-card{
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:15px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

.app-shell .profile-record-hero{
  position:relative;
  display:flex;
  min-height:92px;
  align-items:center;
  gap:14px;
  padding:17px 18px;
  border-bottom:1px solid var(--border-2);
  background:linear-gradient(110deg,var(--surface),color-mix(in srgb,var(--brand-weak) 35%,var(--surface)))
}

.app-shell .profile-record-hero:before{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:3px;
  background:linear-gradient(90deg,var(--brand),#72c990 48%,transparent 82%);
  content:""
}

.app-shell .profile-record-avatar{
  display:grid;
  width:50px;
  height:50px;
  flex:0 0 50px;
  place-items:center;
  border:3px solid var(--surface);
  border-radius:14px;
  background:linear-gradient(135deg,#287b48,#3fac67);
  color:#fff;
  font-size:16px;
  font-weight:850;
  box-shadow:0 8px 20px -10px rgba(25,130,69,.75)
}

.app-shell .profile-record-card.is-lead .profile-record-avatar{
  background:linear-gradient(135deg,#2f6fd8,#5a91ef);
  box-shadow:0 8px 20px -10px rgba(47,111,216,.75)
}

.app-shell .profile-record-title{
  min-width:0
}

.app-shell .profile-record-name-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px
}

.app-shell .profile-record-name-row h2{
  margin:0;
  color:var(--text);
  font-size:18px;
  font-weight:850;
  letter-spacing:-.25px
}

.app-shell .profile-record-type{
  display:inline-flex;
  padding:4px 8px;
  border-radius:999px;
  background:var(--brand-weak);
  color:var(--brand-strong);
  font-size:10px;
  font-weight:800
}

.app-shell .profile-record-meta{
  display:flex;
  flex-wrap:wrap;
  gap:6px 15px;
  margin-top:7px;
  color:var(--text-3);
  font-size:11px;
  font-weight:650
}

.app-shell .profile-record-meta span{
  display:inline-flex;
  align-items:center;
  gap:5px
}

.app-shell .profile-record-quick{
  display:flex;
  align-items:center;
  gap:6px;
  margin-left:auto
}

.app-shell .profile-record-quick a{
  display:grid;
  width:34px;
  height:34px;
  place-items:center;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface);
  color:var(--text-3);
  transition:.15s ease
}

.app-shell .profile-record-quick a:hover{
  border-color:color-mix(in srgb,var(--brand) 35%,var(--border));
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .profile-record-grid{
  display:grid;
  grid-template-columns:1.1fr 1fr 1fr
}

.app-shell .profile-record-section{
  min-width:0;
  padding:17px 18px
}

.app-shell .profile-record-section+.profile-record-section{
  border-left:1px solid var(--border-2)
}

.app-shell .profile-record-section-head{
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:12px
}

.app-shell .profile-record-section-head>span{
  display:grid;
  width:34px;
  height:34px;
  flex:0 0 34px;
  place-items:center;
  border-radius:9px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .profile-record-section-head strong,.app-shell .profile-record-section-head small{
  display:block
}

.app-shell .profile-record-section-head strong{
  color:var(--text);
  font-size:12.5px;
  font-weight:800
}

.app-shell .profile-record-section-head small{
  margin-top:2px;
  color:var(--text-3);
  font-size:10px
}

.app-shell .profile-record-list{
  display:grid;
  margin:0
}

.app-shell .profile-record-list>div{
  display:grid;
  grid-template-columns:minmax(112px,.8fr) minmax(0,1.2fr);
  gap:10px;
  padding:8px 0;
  border-bottom:1px solid var(--border-2)
}

.app-shell .profile-record-list>div:last-child{
  border-bottom:0
}

.app-shell .profile-record-list dt{
  display:flex;
  align-items:center;
  gap:6px;
  color:var(--text-3);
  font-size:10.5px;
  font-weight:650
}

.app-shell .profile-record-list dd{
  min-width:0;
  margin:0;
  color:var(--text-2);
  font-size:11.5px;
  font-weight:750;
  overflow-wrap:anywhere
}

.app-shell .profile-record-list dd a{
  color:var(--brand-strong)
}

.app-shell .profile-record-owners{
  display:grid;
  gap:7px
}

.app-shell .profile-record-owner{
  display:flex;
  align-items:center;
  gap:9px;
  padding:8px 9px;
  border:1px solid var(--border-2);
  border-radius:10px;
  background:var(--surface-2)
}

.app-shell .profile-record-owner>img,.app-shell .profile-record-owner>span{
  display:grid;
  width:30px;
  height:30px;
  flex:0 0 30px;
  place-items:center;
  border-radius:9px;
  background:linear-gradient(135deg,#77847c,#536159);
  color:#fff;
  font-size:11px;
  font-weight:800;
  -o-object-fit:cover;
     object-fit:cover
}

.app-shell .profile-record-owner strong,.app-shell .profile-record-owner small{
  display:block
}

.app-shell .profile-record-owner strong{
  color:var(--text);
  font-size:11.5px;
  font-weight:750
}

.app-shell .profile-record-owner small{
  margin-top:1px;
  color:var(--text-3);
  font-size:9.5px
}

.app-shell .profile-record-empty{
  display:flex;
  align-items:center;
  gap:8px;
  padding:11px;
  border:1px dashed var(--border);
  border-radius:10px;
  background:var(--surface-2);
  color:var(--text-3);
  font-size:11.5px;
  font-weight:700
}

.app-shell .profile-record-extra{
  padding:0 18px 17px;
  border-top:1px solid var(--border-2)
}

.app-shell .profile-record-links{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding-top:14px
}

.app-shell .profile-record-links a{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 10px;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface-2);
  color:var(--text-2);
  font-size:11.5px;
  font-weight:700
}

.app-shell .profile-record-links a:hover{
  border-color:color-mix(in srgb,var(--brand) 35%,var(--border));
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .profile-record-custom{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  margin-top:12px
}

.app-shell .profile-record-custom>div{
  padding:9px 10px;
  border-radius:9px;
  background:var(--surface-2)
}

.app-shell .profile-record-custom small,.app-shell .profile-record-custom strong{
  display:block
}

.app-shell .profile-record-custom small{
  color:var(--text-3);
  font-size:9.5px;
  font-weight:700
}

.app-shell .profile-record-custom strong{
  margin-top:3px;
  color:var(--text-2);
  font-size:11.5px;
  font-weight:750;
  overflow-wrap:anywhere
}

.app-shell .profile-workspace-card{
  overflow:visible;
  border:1px solid var(--border);
  border-radius:15px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

.app-shell .profile-workspace-card>.nav-tabs-custom{
  margin:0;
  background:transparent;
  box-shadow:none
}

/* The strip scrolls sideways when the tabs outrun the card, and must not scroll at all the
   other way. Naming one axis is not enough: a box with overflow-x:auto computes its unnamed
   axis to auto as well, so the active tab's underline — which sits a pixel below the tabs to
   meet this border — was a pixel of vertical overflow, and the whole row could be dragged up
   and down. The underline is drawn inside the box instead, and the axis is stated. */

.app-shell .profile-tabs-scroll{
  overflow-x:auto;
  overflow-y:hidden;
  border-bottom:1px solid var(--border-2);
  border-radius:15px 15px 0 0;
  scrollbar-width:thin
}

/* No background of its own. The card behind it is already this colour, so painting it again
   bought nothing and cost the corners: the card keeps overflow visible for the row menus, so a
   square white strip laid over its 15px radius and the top corners read as a second panel
   sitting on the card. The radius on the scroller keeps that true if it ever paints again. */

.app-shell .profile-tabs{
  display:flex;
  width:-moz-max-content;
  width:max-content;
  min-width:100%;
  margin:0;
  padding:7px 9px 0;
  border:0!important;
  background:transparent
}

.app-shell .profile-tabs>li{
  float:none;
  margin:0 2px
}

.app-shell .profile-tabs>li>a{
  display:flex;
  min-height:42px;
  align-items:center;
  gap:7px;
  margin:0;
  padding:0 11px;
  border:0!important;
  border-radius:9px 9px 0 0;
  background:transparent;
  color:var(--text-3);
  font-size:11.5px;
  font-weight:700;
  white-space:nowrap
}

.app-shell .profile-tabs>li>a svg{
  color:var(--text-3)
}

.app-shell .profile-tabs>li>a:hover{
  background:var(--surface-2);
  color:var(--text)
}

.app-shell .profile-tabs>li.active>a,.app-shell .profile-tabs>li.active>a:hover,.app-shell .profile-tabs>li.active>a:focus{
  position:relative;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .profile-tabs>li.active>a:after{
  position:absolute;
  right:8px;
  bottom:0;
  left:8px;
  height:2px;
  border-radius:999px;
  background:var(--brand);
  content:""
}

.app-shell .profile-tabs>li.active>a svg{
  color:var(--brand-strong)
}

.app-shell .profile-tab-content{
  padding:16px!important
}

.app-shell .profile-tab-content>.tab-pane>.row{
  margin-right:-7px;
  margin-left:-7px
}

.app-shell .profile-tab-content>.tab-pane>.row>[class*="col-"]{
  padding-right:7px;
  padding-left:7px
}

.app-shell .profile-tab-content .box,.app-shell .profile-tab-content .widget{
  border-color:var(--border)!important;
  border-radius:12px!important;
  box-shadow:none!important
}

.app-shell .profile-tab-content .box-header{
  border-bottom:1px solid var(--border-2)
}

.app-shell .profile-tab-content .table-responsive{
  border:1px solid var(--border-2);
  border-radius:10px
}

.app-shell .profile-tab-toolbar{
  display:flex;
  justify-content:flex-end;
  margin:5px 0
}

.app-shell .profile-tab-add{
  display:inline-flex;
  min-height:34px;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:0 11px;
  border:0;
  border-radius:9px;
  font-size:11.5px;
  font-weight:750;
  text-decoration:none
}

.app-shell .profile-tab-add:hover,.app-shell .profile-tab-add:focus{
  color:#fff;
  text-decoration:none
}

.app-shell #contact_payments_div{
  height:auto!important;
  min-height:240px;
  overflow:visible!important
}

/* Contact persons workspace shared by Lead and Contact detail */

.app-shell .contact-person-workspace{
  overflow:hidden;
  border:1px solid var(--border-2);
  border-radius:13px;
  background:var(--surface)
}

.app-shell .contact-person-workspace-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:14px 15px;
  border-bottom:1px solid var(--border-2);
  background:linear-gradient(105deg,var(--surface),color-mix(in srgb,var(--brand-weak) 32%,var(--surface)))
}

.app-shell .contact-person-workspace-title{
  display:flex;
  min-width:0;
  align-items:center;
  gap:10px
}

.app-shell .contact-person-workspace-title>span{
  display:grid;
  width:36px;
  height:36px;
  flex:0 0 36px;
  place-items:center;
  border-radius:10px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .contact-person-workspace-title strong,.app-shell .contact-person-workspace-title small{
  display:block
}

.app-shell .contact-person-workspace-title strong{
  color:var(--text);
  font-size:13px;
  font-weight:820
}

.app-shell .contact-person-workspace-title small{
  margin-top:2px;
  color:var(--text-3);
  font-size:10.5px
}

.app-shell .contact-person-workspace-actions{
  display:flex;
  align-items:center;
  gap:9px
}

.app-shell .contact-person-count{
  display:inline-flex;
  height:34px;
  align-items:center;
  gap:5px;
  padding:0 10px;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface);
  color:var(--text-3);
  font-size:10.5px;
  font-weight:650
}

.app-shell .contact-person-count strong{
  color:var(--text);
  font-size:11.5px;
  font-weight:850;
  font-variant-numeric:tabular-nums
}

.app-shell .contact-person-workspace .contact-login-add{
  display:inline-flex;
  min-height:36px;
  align-items:center;
  gap:6px;
  padding:0 12px;
  border-radius:9px;
  font-size:11.5px;
  font-weight:750;
  cursor:pointer
}

.app-shell .contact-person-table-shell{
  padding:0 14px 12px
}

.app-shell .contact-person-table-shell>.table-responsive{
  overflow:visible;
  border:0;
  border-radius:0
}

.app-shell .contact-person-table-shell .dataTables_wrapper{
  padding-top:12px
}

.app-shell .contact-person-table-shell .dataTables_length,.app-shell .contact-person-table-shell .dataTables_filter{
  margin-bottom:11px
}

.app-shell .contact-person-table-shell .dataTables_filter input{
  width:230px
}

.app-shell #contact_login_table{
  width:100%!important;
  margin:0!important;
  border-collapse:separate!important;
  border-spacing:0
}

.app-shell #contact_login_table thead th{
  padding:10px 11px!important;
  border-top:1px solid var(--border-2)!important;
  border-bottom:1px solid var(--border-2)!important;
  background:var(--surface-2)!important;
  color:var(--text-3)!important;
  font-size:9.5px!important;
  font-weight:800!important;
  letter-spacing:.035em;
  text-transform:uppercase
}

.app-shell #contact_login_table thead th:first-child{
  border-left:1px solid var(--border-2)!important;
  border-radius:9px 0 0
}

.app-shell #contact_login_table thead th:last-child{
  width:92px;
  border-right:1px solid var(--border-2)!important;
  border-radius:0 9px 0 0;
  text-align:right
}

.app-shell #contact_login_table tbody td{
  height:68px;
  padding:10px 11px!important;
  border-top:0!important;
  border-bottom:1px solid var(--border-2)!important;
  background:var(--surface)!important;
  vertical-align:middle!important
}

.app-shell #contact_login_table tbody td:first-child{
  border-left:1px solid var(--border-2)!important
}

.app-shell #contact_login_table tbody td:last-child{
  border-right:1px solid var(--border-2)!important
}

.app-shell #contact_login_table tbody tr:hover td{
  background:#fbfdfb!important
}

.app-shell .contact-person-identity{
  display:flex;
  min-width:190px;
  align-items:center;
  gap:10px
}

.app-shell .contact-person-identity>span{
  display:grid;
  width:34px;
  height:34px;
  flex:0 0 34px;
  place-items:center;
  border-radius:10px;
  background:linear-gradient(135deg,#267b48,#43aa69);
  color:#fff;
  font-size:10.5px;
  font-weight:850;
  box-shadow:0 6px 14px -9px rgba(24,126,65,.8)
}

.app-shell .contact-person-identity>div,.app-shell .contact-person-role{
  min-width:0
}

.app-shell .contact-person-identity strong,.app-shell .contact-person-identity small,.app-shell .contact-person-role strong,.app-shell .contact-person-role small{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .contact-person-identity strong,.app-shell .contact-person-role strong{
  color:var(--text);
  font-size:11.5px;
  font-weight:760
}

.app-shell .contact-person-identity small,.app-shell .contact-person-role small{
  margin-top:3px;
  color:var(--text-3);
  font-size:9.5px
}

.app-shell .contact-person-channel-list{
  display:grid;
  gap:5px;
  min-width:145px
}

.app-shell .contact-person-channel-list a,.app-shell .contact-person-channel-list span{
  display:flex;
  align-items:center;
  gap:6px;
  color:var(--text-3);
  font-size:10.5px;
  font-weight:650
}

.app-shell .contact-person-channel-list a:first-child{
  color:var(--text-2)
}

.app-shell .contact-person-channel-list a:hover{
  color:var(--brand-strong);
  text-decoration:none
}

.app-shell .contact-person-access{
  display:grid;
  gap:6px;
  min-width:125px
}

.app-shell .contact-person-access>span{
  display:inline-flex;
  width:-moz-max-content;
  width:max-content;
  align-items:center;
  gap:6px;
  padding:4px 8px;
  border-radius:999px;
  font-size:9.5px;
  font-weight:800
}

.app-shell .contact-person-access>span em{
  width:6px;
  height:6px;
  border-radius:50%;
  background:currentColor
}

.app-shell .contact-person-access>span.is-active{
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .contact-person-access>span.is-inactive{
  background:var(--surface-3);
  color:var(--text-3)
}

.app-shell .contact-person-access small{
  display:flex;
  max-width:160px;
  align-items:center;
  gap:5px;
  overflow:hidden;
  color:var(--text-3);
  font-size:9.5px;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .contact-person-row-actions{
  justify-content:flex-end
}

.app-shell .contact-person-no-action{
  display:block;
  color:var(--text-3);
  text-align:right
}

.app-shell .contact-person-empty-state{
  display:flex;
  min-height:205px;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  padding:34px 20px;
  text-align:center
}

.app-shell .contact-person-empty-state>span{
  display:grid;
  width:50px;
  height:50px;
  place-items:center;
  border:1px solid color-mix(in srgb,var(--brand) 18%,var(--border));
  border-radius:15px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .contact-person-empty-state strong{
  margin-top:12px;
  color:var(--text);
  font-size:13px;
  font-weight:800
}

.app-shell .contact-person-empty-state small{
  max-width:390px;
  margin-top:5px;
  color:var(--text-3);
  font-size:10.5px;
  line-height:1.55
}

.app-shell #contact_login_table td.dataTables_empty{
  height:220px!important;
  padding:0!important
}

body.app-ui .contact-person-dialog{
  width:min(780px,calc(100vw - 28px));
  margin:34px auto
}

body.app-ui .contact-person-modal{
  overflow:hidden;
  border:0!important;
  border-radius:16px!important;
  box-shadow:0 24px 70px rgba(16,24,40,.26)
}

body.app-ui .contact-person-modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 16px!important;
  border-bottom:1px solid var(--border-2)!important;
  background:linear-gradient(105deg,var(--surface),color-mix(in srgb,var(--brand-weak) 34%,var(--surface)))
}

body.app-ui .contact-person-modal-heading{
  display:flex;
  align-items:center;
  gap:10px
}

body.app-ui .contact-person-modal-heading>span{
  display:grid;
  width:38px;
  height:38px;
  place-items:center;
  border-radius:10px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

body.app-ui .contact-person-modal-heading h4{
  margin:0;
  color:var(--text);
  font-size:14px;
  font-weight:820
}

body.app-ui .contact-person-modal-heading small{
  display:block;
  margin-top:2px;
  color:var(--text-3);
  font-size:10.5px
}

body.app-ui .contact-person-modal-head .close{
  display:grid;
  width:34px;
  height:34px;
  place-items:center;
  margin:0;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface);
  color:var(--text-3);
  opacity:1
}

body.app-ui .contact-person-modal-head .close:hover{
  background:var(--surface-3);
  color:var(--text)
}

body.app-ui .contact-person-modal-body{
  max-height:min(680px,calc(100vh - 180px));
  overflow-y:auto;
  padding:17px 17px 3px!important
}

body.app-ui .contact-person-modal-body>.row{
  margin-right:-7px;
  margin-left:-7px
}

body.app-ui .contact-person-modal-body>.row>[class*="col-"]{
  padding-right:7px;
  padding-left:7px
}

body.app-ui .contact-person-modal-body .form-group{
  margin-bottom:14px
}

body.app-ui .contact-person-modal-body .checkbox{
  display:flex;
  min-height:42px;
  align-items:center;
  padding:0 11px;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface-2)
}

body.app-ui .contact-person-modal-body .checkbox label{
  margin:0
}

body.app-ui .contact-person-modal-body #crm_login_div{
  margin-top:2px;
  padding-top:15px;
  border-top:1px dashed var(--border)
}

body.app-ui .contact-person-modal-foot{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  padding:12px 16px!important;
  border-top:1px solid var(--border-2)!important;
  background:var(--surface-2)
}

body.app-ui .contact-person-modal-foot:before,body.app-ui .contact-person-modal-foot:after{
  display:none
}

body.app-ui .contact-person-modal-foot .btn-ghost,body.app-ui .contact-person-modal-foot .btn-primary{
  display:inline-flex;
  min-width:84px;
  height:38px;
  align-items:center;
  justify-content:center;
  gap:6px;
  border-radius:9px;
  font-size:11.5px;
  font-weight:750
}

/* Standalone contact login workspace */

.app-shell .crm-contact-login-workspace{
  margin-top:14px;
  overflow:visible
}

.app-shell .crm-contact-login-section-head{
  display:flex;
  min-height:62px;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:12px 14px;
  border-bottom:1px solid var(--border-2);
  background:var(--surface)
}

.app-shell .crm-contact-login-section-head>div{
  display:flex;
  min-width:0;
  align-items:center;
  gap:9px
}

.app-shell .crm-contact-login-section-head>div>span{
  display:grid;
  width:34px;
  height:34px;
  flex:0 0 34px;
  place-items:center;
  border-radius:9px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .crm-contact-login-section-head strong,.app-shell .crm-contact-login-section-head small{
  display:block
}

.app-shell .crm-contact-login-section-head strong{
  color:var(--text);
  font-size:13px;
  font-weight:810
}

.app-shell .crm-contact-login-section-head small{
  margin-top:2px;
  color:var(--text-3);
  font-size:10.5px
}

.app-shell .crm-contact-login-count{
  display:inline-flex;
  height:34px;
  align-items:center;
  gap:5px;
  padding:0 10px;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface-2);
  color:var(--text-3);
  font-size:10.5px;
  font-weight:650;
  white-space:nowrap
}

.app-shell .crm-contact-login-count strong{
  color:var(--text);
  font-size:11.5px;
  font-weight:850;
  font-variant-numeric:tabular-nums
}

.app-shell .crm-contact-login-list-card{
  margin:0;
  border:0;
  border-radius:0 0 13px 13px;
  box-shadow:none
}

.app-shell .crm-contact-login-list-card>.table-toolbar{
  gap:9px;
  padding:10px 12px;
  background:var(--surface)
}

.app-shell .crm-contact-login-list-card .table-toolbar-search{
  width:min(100%,340px)
}

.app-shell .crm-contact-login-list-card .table-toolbar-search .finput{
  height:34px;
  padding-left:31px;
  border-radius:8px;
  font-size:11.5px
}

.app-shell .crm-contact-login-list-card .table-toolbar-search>svg{
  left:10px;
  width:13px;
  height:13px
}

.app-shell .crm-contact-login-list-card .table-toolbar-filters{
  display:flex;
  min-width:270px;
  align-items:center
}

.app-shell .crm-contact-login-account-filter{
  display:grid;
  grid-template-columns:auto auto minmax(150px,1fr);
  min-width:270px;
  align-items:center;
  gap:6px;
  margin:0;
  color:var(--text-3);
  font-size:10.5px;
  font-weight:720
}

.app-shell .crm-contact-login-account-filter>svg{
  width:13px;
  height:13px
}

.app-shell .crm-contact-login-account-filter .select-field{
  min-width:170px
}

.app-shell .crm-contact-login-account-filter .select2-container .select2-selection--single{
  height:34px;
  border-radius:8px;
  background:var(--surface);
  font-size:11px
}

.app-shell .crm-contact-login-account-filter .select2-container .select2-selection--single .select2-selection__rendered{
  height:32px;
  line-height:32px
}

.app-shell .crm-contact-login-list-card .table-toolbar-actions{
  gap:8px
}

.app-shell .crm-contact-login-list-card .table-export-holder,.app-shell .crm-contact-login-list-card .table-export-holder .dt-buttons{
  gap:5px
}

.app-shell .crm-contact-login-list-card .table-export-holder .dt-button,.app-shell .crm-contact-login-list-card .table-export-holder .btn,.app-shell .crm-contact-login-list-card .table-export-holder .table-export-button,.app-shell .crm-contact-login-list-card .table-export-holder>a,.app-shell .crm-contact-login-list-card .table-export-holder>button,.app-shell .crm-contact-login-list-card .table-export-holder .dt-buttons>a,.app-shell .crm-contact-login-list-card .table-export-holder .dt-buttons>button{
  padding:0 9px;
  border-radius:8px!important;
  font-size:10.5px!important;
  gap:5px
}

.app-shell .crm-contact-login-list-card .table-page-size .finput{
  width:66px;
  border-radius:8px;
  font-size:10.5px
}

.app-shell .crm-contact-login-table-wrap{
  margin:0;
  overflow:visible
}

.app-shell .crm-contact-login-table-wrap .dataTables_wrapper{
  padding:0
}

.app-shell .crm-contact-login-table-wrap table{
  min-width:1040px
}

.app-shell .crm-contact-login-list-card table.dataTable thead th{
  padding:10px 12px
}

.app-shell .crm-contact-login-list-card table.dataTable tbody td{
  height:66px;
  padding:10px 12px;
  color:var(--text-2);
  vertical-align:middle
}

.app-shell .crm-contact-login-list-card table.dataTable tbody tr:hover td{
  background:color-mix(in srgb,var(--brand-weak) 34%,var(--surface))
}

.app-shell .crm-contact-login-list-card table.dataTable tbody td:first-child{
  position:relative;
  width:82px;
  overflow:visible
}

.app-shell .crm-contact-login-list-card table.dataTable tbody td:first-child:has(.btn-group.open){
  z-index:170
}

.app-shell .crm-contact-login-list-card .contact-person-row-actions{
  min-width:70px;
  justify-content:flex-start;
  gap:6px
}

.app-shell .crm-contact-login-list-card .contact-person-row-actions .btn-icon-primary,.app-shell .crm-contact-login-list-card .contact-person-row-actions .btn-icon{
  display:inline-grid;
  width:32px;
  height:32px;
  min-height:32px;
  place-items:center;
  border-radius:8px
}

.app-shell .crm-contact-login-list-card .contact-person-row-actions .table-action-menu{
  right:auto;
  left:0
}

.app-shell .contact-login-account-cell{
  display:flex;
  min-width:170px;
  align-items:center;
  gap:9px
}

.app-shell .contact-login-account-cell>span{
  display:grid;
  width:31px;
  height:31px;
  flex:0 0 31px;
  place-items:center;
  border-radius:8px;
  background:var(--surface-3);
  color:var(--text-3)
}

.app-shell .contact-login-account-cell>div{
  min-width:0
}

.app-shell .contact-login-account-cell strong,.app-shell .contact-login-account-cell small{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .contact-login-account-cell strong{
  max-width:230px;
  color:var(--text-2);
  font-size:11.5px;
  font-weight:750
}

.app-shell .contact-login-account-cell small{
  margin-top:3px;
  color:var(--text-3);
  font-size:9.5px
}

.app-shell .crm-contact-login-list-card .data-table-footer{
  min-height:50px;
  padding:8px 11px
}

.app-shell .crm-contact-login-list-card .dataTables_info,.app-shell .crm-contact-login-list-card .dataTables_paginate{
  float:none;
  padding:0!important
}

.app-shell .crm-contact-login-list-card td.dataTables_empty{
  height:210px!important;
  padding:0!important
}

/* Contact person commission report */

.app-shell .crm-commission-filter-panel .crm-panel-head{
  display:flex;
  align-items:center;
  gap:9px
}

.app-shell .crm-commission-filter-panel .crm-panel-head>div{
  min-width:0
}

.app-shell .crm-commission-filter-panel .crm-panel-head strong,.app-shell .crm-commission-filter-panel .crm-panel-head small{
  display:block
}

.app-shell .crm-commission-filter-panel .crm-panel-head strong{
  font-size:13px
}

.app-shell .crm-commission-filter-panel .crm-panel-head small{
  margin-top:2px;
  color:var(--text-3);
  font-size:10.5px
}

.app-shell .crm-commission-filter-reset{
  display:inline-flex;
  height:36px;
  align-items:center;
  gap:6px;
  margin-left:auto;
  padding:0 11px;
  border-radius:9px;
  font-size:11.5px
}

.app-shell .crm-commission-filter-panel .crm-filter-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  padding:15px
}

.app-shell .crm-commission-filter-panel .form-group{
  margin:0
}

.app-shell .crm-commission-filter-panel label{
  margin-bottom:7px;
  color:var(--text-2);
  font-size:12px;
  font-weight:750
}

.app-shell .crm-commission-filter-panel .form-control,.app-shell .crm-commission-filter-panel .select2-container .select2-selection--single{
  height:42px;
  font-size:13px
}

.app-shell .crm-commission-filter-panel .select2-container .select2-selection--single .select2-selection__rendered{
  height:40px;
  font-size:13px;
  line-height:40px
}

.app-shell .crm-commission-workspace{
  margin-top:14px;
  overflow:visible
}

.app-shell .crm-commission-section-head{
  display:flex;
  min-height:64px;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:12px 14px;
  border-bottom:1px solid var(--border-2);
  background:var(--surface)
}

.app-shell .crm-commission-section-head>div:first-child{
  display:flex;
  min-width:0;
  align-items:center;
  gap:9px
}

.app-shell .crm-commission-section-head>div:first-child>span{
  display:grid;
  width:34px;
  height:34px;
  flex:0 0 34px;
  place-items:center;
  border-radius:9px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .crm-commission-section-head strong,.app-shell .crm-commission-section-head small{
  display:block
}

.app-shell .crm-commission-section-head>div:first-child strong{
  color:var(--text);
  font-size:13px;
  font-weight:810
}

.app-shell .crm-commission-section-head>div:first-child small{
  margin-top:2px;
  color:var(--text-3);
  font-size:10.5px
}

.app-shell .crm-commission-page-total{
  min-width:150px;
  padding:7px 10px;
  border:1px solid color-mix(in srgb,var(--brand) 20%,var(--border));
  border-radius:9px;
  background:var(--brand-weak);
  text-align:right
}

.app-shell .crm-commission-page-total small{
  color:var(--brand-strong);
  font-size:9px;
  font-weight:720
}

.app-shell .crm-commission-page-total strong{
  margin-top:2px;
  color:var(--brand-ink);
  font-size:13px;
  font-weight:840;
  font-variant-numeric:tabular-nums
}

.app-shell .crm-commission-list-card{
  margin:0;
  border:0;
  border-radius:0 0 13px 13px;
  box-shadow:none
}

.app-shell .crm-commission-list-card>.table-toolbar{
  gap:9px;
  padding:10px 12px;
  background:var(--surface)
}

.app-shell .crm-commission-list-card .table-toolbar-search{
  width:min(100%,370px)
}

.app-shell .crm-commission-list-card .table-toolbar-search .finput{
  height:34px;
  padding-left:31px;
  border-radius:8px;
  font-size:11.5px
}

.app-shell .crm-commission-list-card .table-toolbar-search>svg{
  left:10px;
  width:13px;
  height:13px
}

.app-shell .crm-commission-list-card .table-toolbar-actions{
  gap:8px
}

.app-shell .crm-commission-list-card .table-export-holder,.app-shell .crm-commission-list-card .table-export-holder .dt-buttons{
  gap:5px
}

.app-shell .crm-commission-list-card .table-export-holder .dt-button,.app-shell .crm-commission-list-card .table-export-holder .btn,.app-shell .crm-commission-list-card .table-export-holder .table-export-button,.app-shell .crm-commission-list-card .table-export-holder>a,.app-shell .crm-commission-list-card .table-export-holder>button,.app-shell .crm-commission-list-card .table-export-holder .dt-buttons>a,.app-shell .crm-commission-list-card .table-export-holder .dt-buttons>button{
  padding:0 9px;
  border-radius:8px!important;
  font-size:10.5px!important;
  gap:5px
}

.app-shell .crm-commission-list-card .table-page-size .finput{
  width:66px;
  border-radius:8px;
  font-size:10.5px
}

.app-shell .crm-commission-table-wrap{
  margin:0;
  overflow:visible
}

.app-shell .crm-commission-table-wrap .dataTables_wrapper{
  padding:0
}

.app-shell .crm-commission-table-wrap table{
  min-width:920px
}

.app-shell .crm-commission-list-card table.dataTable thead th{
  padding:10px 12px
}

.app-shell .crm-commission-list-card table.dataTable tbody td{
  height:64px;
  padding:10px 12px;
  color:var(--text-2);
  vertical-align:middle
}

.app-shell .crm-commission-list-card table.dataTable tbody tr:hover td{
  background:color-mix(in srgb,var(--brand-weak) 34%,var(--surface))
}

.app-shell .crm-commission-date-cell,.app-shell .crm-commission-customer-cell,.app-shell .crm-commission-person-cell,.app-shell .crm-commission-sale-cell,.app-shell .crm-commission-amount-cell{
  display:flex;
  align-items:center;
  gap:9px
}

.app-shell .crm-commission-date-cell>span,.app-shell .crm-commission-customer-cell>span,.app-shell .crm-commission-sale-cell>span,.app-shell .crm-commission-amount-cell>span{
  display:grid;
  width:31px;
  height:31px;
  flex:0 0 31px;
  place-items:center;
  border-radius:8px;
  background:var(--surface-3);
  color:var(--text-3)
}

.app-shell .crm-commission-date-cell strong{
  color:var(--text-2);
  font-size:10.5px;
  font-weight:720;
  white-space:nowrap
}

.app-shell .crm-commission-customer-cell,.app-shell .crm-commission-person-cell{
  min-width:185px
}

.app-shell .crm-commission-customer-cell>div,.app-shell .crm-commission-person-cell>div,.app-shell .crm-commission-sale-cell>div{
  min-width:0
}

.app-shell .crm-commission-customer-cell strong,.app-shell .crm-commission-customer-cell small,.app-shell .crm-commission-person-cell strong,.app-shell .crm-commission-person-cell small,.app-shell .crm-commission-sale-cell strong,.app-shell .crm-commission-sale-cell small{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .crm-commission-customer-cell strong,.app-shell .crm-commission-person-cell strong,.app-shell .crm-commission-sale-cell strong{
  max-width:260px;
  color:var(--text);
  font-size:11.5px;
  font-weight:760
}

.app-shell .crm-commission-customer-cell small,.app-shell .crm-commission-person-cell small,.app-shell .crm-commission-sale-cell small{
  margin-top:3px;
  color:var(--text-3);
  font-size:9.5px
}

.app-shell .crm-commission-person-cell>span{
  display:grid;
  width:32px;
  height:32px;
  flex:0 0 32px;
  place-items:center;
  border-radius:9px;
  background:linear-gradient(135deg,#267b48,#43aa69);
  color:#fff;
  font-size:9px;
  font-weight:850
}

.app-shell .crm-commission-sale-cell{
  min-width:160px
}

.app-shell .crm-commission-amount-cell{
  justify-content:flex-end;
  white-space:nowrap
}

.app-shell .crm-commission-amount-cell>span{
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .crm-commission-amount-cell strong{
  color:var(--brand-ink);
  font-size:12.5px;
  font-weight:830;
  font-variant-numeric:tabular-nums
}

.app-shell .crm-commission-list-card table.dataTable tfoot td{
  padding:11px 12px
}

.app-shell .crm-commission-list-card table.dataTable tfoot td:first-child{
  text-align:right
}

.app-shell .crm-commission-list-card table.dataTable tfoot td:last-child{
  color:var(--brand-ink);
  font-size:12.5px;
  font-weight:830;
  text-align:right
}

.app-shell .crm-commission-list-card .data-table-footer{
  min-height:50px;
  padding:8px 11px
}

.app-shell .crm-commission-list-card .dataTables_info,.app-shell .crm-commission-list-card .dataTables_paginate{
  float:none;
  padding:0!important
}

.app-shell .crm-commission-list-card td.dataTables_empty{
  height:180px!important;
  color:var(--text-3)!important;
  text-align:center!important
}

@media(max-width:1100px){
  .app-shell .crm-contact-login-list-card>.table-toolbar{
    align-items:stretch;
    flex-wrap:wrap
  }

  .app-shell .crm-contact-login-list-card .table-toolbar-actions{
    margin-left:auto
  }

  .app-shell .crm-commission-filter-panel .crm-filter-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}

@media(max-width:760px){
  .app-shell .crm-contact-login-list-card .table-toolbar-filters,.app-shell .crm-contact-login-account-filter{
    width:100%
  }

  .app-shell .crm-contact-login-account-filter{
    grid-template-columns:auto auto minmax(0,1fr)
  }

  .app-shell .crm-contact-login-list-card .table-toolbar-actions{
    width:100%;
    margin-left:0
  }

  .app-shell .crm-contact-login-table-wrap,.app-shell .crm-commission-table-wrap{
    overflow-x:auto
  }

  .app-shell .crm-commission-section-head{
    align-items:stretch;
    flex-direction:column
  }

  .app-shell .crm-commission-page-total{
    text-align:left
  }
}

@media(max-width:620px){
  .app-shell .crm-commission-filter-panel .crm-panel-head{
    align-items:flex-start;
    flex-wrap:wrap
  }

  .app-shell .crm-commission-filter-reset{
    margin-left:43px
  }

  .app-shell .crm-commission-filter-panel .crm-filter-grid{
    grid-template-columns:1fr
  }

  .app-shell .crm-contact-login-section-head{
    align-items:flex-start;
    flex-direction:column
  }
}

/* CRM reports workspace */

.app-shell .crm-report-navigator{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin:14px 0
}

.app-shell .crm-report-navigator>a{
  display:grid;
  min-width:0;
  grid-template-columns:38px minmax(0,1fr) 18px;
  align-items:center;
  gap:10px;
  padding:12px 13px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface);
  color:var(--text-2);
  text-decoration:none;
  box-shadow:var(--shadow-sm);
  transition:border-color .15s,background .15s,transform .15s
}

.app-shell .crm-report-navigator>a:hover{
  border-color:color-mix(in srgb,var(--brand) 38%,var(--border));
  background:color-mix(in srgb,var(--brand-weak) 42%,var(--surface));
  color:var(--text);
  text-decoration:none;
  transform:translateY(-1px)
}

.app-shell .crm-report-navigator>a>span{
  display:grid;
  width:38px;
  height:38px;
  place-items:center;
  border-radius:10px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .crm-report-navigator>a>div{
  min-width:0
}

.app-shell .crm-report-navigator small,.app-shell .crm-report-navigator strong,.app-shell .crm-report-navigator p{
  display:block
}

.app-shell .crm-report-navigator small{
  color:var(--brand-strong);
  font-size:9px;
  font-weight:820;
  letter-spacing:.055em;
  text-transform:uppercase
}

.app-shell .crm-report-navigator strong{
  margin-top:2px;
  overflow:hidden;
  color:var(--text);
  font-size:12.5px;
  font-weight:810;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .crm-report-navigator p{
  margin:2px 0 0;
  color:var(--text-3);
  font-size:10px
}

.app-shell .crm-report-navigator>a>svg{
  color:var(--text-3);
  transition:color .15s,transform .15s
}

.app-shell .crm-report-navigator>a:hover>svg{
  color:var(--brand-strong);
  transform:translate(2px,2px)
}

.app-shell .crm-report-panel{
  margin-top:14px;
  overflow:visible;
  scroll-margin-top:20px
}

.app-shell .crm-report-section-head{
  display:flex;
  min-height:62px;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:12px 14px;
  border-bottom:1px solid var(--border-2);
  background:var(--surface)
}

.app-shell .crm-report-section-head>div{
  display:flex;
  min-width:0;
  align-items:center;
  gap:9px
}

.app-shell .crm-report-section-head>div>span{
  display:grid;
  width:34px;
  height:34px;
  flex:0 0 34px;
  place-items:center;
  border-radius:9px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .crm-report-section-head strong,.app-shell .crm-report-section-head small{
  display:block
}

.app-shell .crm-report-section-head strong{
  color:var(--text);
  font-size:13px;
  font-weight:810
}

.app-shell .crm-report-section-head small{
  margin-top:2px;
  color:var(--text-3);
  font-size:10.5px
}

.app-shell .crm-report-section-head>em{
  display:grid;
  width:28px;
  height:28px;
  place-items:center;
  border:1px solid color-mix(in srgb,var(--brand) 20%,var(--border));
  border-radius:8px;
  background:var(--brand-weak);
  color:var(--brand-strong);
  font-size:10px;
  font-style:normal;
  font-weight:830
}

.app-shell .crm-report-list-card{
  margin:0;
  border:0;
  border-radius:0 0 13px 13px;
  box-shadow:none
}

.app-shell .crm-report-list-card>.table-toolbar{
  gap:9px;
  padding:10px 12px;
  background:var(--surface)
}

.app-shell .crm-report-list-card .table-toolbar-search{
  width:min(100%,320px)
}

.app-shell .crm-report-list-card .table-toolbar-search .finput{
  height:34px;
  padding-left:31px;
  border-radius:8px;
  font-size:11.5px
}

.app-shell .crm-report-list-card .table-toolbar-search>svg{
  left:10px;
  width:13px;
  height:13px
}

.app-shell .crm-report-list-card .table-toolbar-filters{
  display:flex;
  align-items:center
}

.app-shell .crm-report-date-filter{
  display:flex;
  align-items:center;
  gap:7px;
  margin:0;
  color:var(--text-3);
  font-size:10.5px;
  font-weight:720
}

.app-shell .crm-report-date-filter>span{
  white-space:nowrap
}

.app-shell .crm-report-date-filter .input-with-icon{
  width:245px
}

.app-shell .crm-report-date-filter .form-control{
  height:34px;
  padding-left:32px;
  border-radius:8px;
  background:var(--surface);
  font-size:11px
}

.app-shell .crm-report-date-filter .input-with-icon>svg{
  left:10px;
  width:13px;
  height:13px
}

.app-shell .crm-report-list-card .table-toolbar-actions{
  gap:8px
}

.app-shell .crm-report-list-card .table-export-holder,.app-shell .crm-report-list-card .table-export-holder .dt-buttons{
  gap:5px
}

.app-shell .crm-report-list-card .table-export-holder .dt-button,.app-shell .crm-report-list-card .table-export-holder .btn,.app-shell .crm-report-list-card .table-export-holder .table-export-button,.app-shell .crm-report-list-card .table-export-holder>a,.app-shell .crm-report-list-card .table-export-holder>button,.app-shell .crm-report-list-card .table-export-holder .dt-buttons>a,.app-shell .crm-report-list-card .table-export-holder .dt-buttons>button{
  padding:0 9px;
  border-radius:8px!important;
  font-size:10.5px!important;
  gap:5px
}

.app-shell .crm-report-list-card .table-page-size .finput{
  width:66px;
  border-radius:8px;
  font-size:10.5px
}

.app-shell .crm-report-table-wrap{
  margin:0;
  overflow:visible
}

.app-shell .crm-report-table-wrap .dataTables_wrapper{
  padding:0
}

.app-shell .crm-report-status-table{
  min-width:900px
}

.app-shell .crm-report-conversion-table{
  min-width:650px
}

.app-shell .crm-report-list-card table.dataTable thead th{
  padding:10px 12px;
  text-align:left
}

.app-shell .crm-report-list-card table.dataTable tbody td{
  height:62px;
  padding:9px 12px;
  color:var(--text-2);
  vertical-align:middle
}

.app-shell .crm-report-list-card table.dataTable tbody tr:hover>td{
  background:color-mix(in srgb,var(--brand-weak) 32%,var(--surface))
}

.app-shell .crm-report-person-cell,.app-shell .crm-report-contact-cell{
  display:flex;
  min-width:190px;
  align-items:center;
  gap:10px
}

.app-shell .crm-report-person-cell>span{
  display:grid;
  width:34px;
  height:34px;
  flex:0 0 34px;
  place-items:center;
  border-radius:10px;
  background:linear-gradient(135deg,#267b48,#43aa69);
  color:#fff;
  font-size:10px;
  font-weight:850;
  box-shadow:0 6px 14px -9px rgba(24,126,65,.8)
}

.app-shell .crm-report-contact-cell>span{
  display:grid;
  width:34px;
  height:34px;
  flex:0 0 34px;
  place-items:center;
  border-radius:9px;
  background:var(--surface-3);
  color:var(--text-3)
}

.app-shell .crm-report-person-cell>div,.app-shell .crm-report-contact-cell>div{
  min-width:0
}

.app-shell .crm-report-person-cell strong,.app-shell .crm-report-person-cell small,.app-shell .crm-report-contact-cell strong,.app-shell .crm-report-contact-cell small{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .crm-report-person-cell strong,.app-shell .crm-report-contact-cell strong{
  max-width:260px;
  color:var(--text);
  font-size:11.5px;
  font-weight:770
}

.app-shell .crm-report-person-cell small,.app-shell .crm-report-contact-cell small{
  margin-top:3px;
  color:var(--text-3);
  font-size:9.5px
}

.app-shell .crm-report-metric{
  display:inline-flex;
  min-width:74px;
  min-height:38px;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:5px 8px;
  border:1px solid transparent;
  border-radius:9px;
  background:var(--surface-3);
  color:var(--text-2);
  text-decoration:none;
  transition:border-color .15s,background .15s,box-shadow .15s
}

.app-shell .crm-report-metric strong{
  color:inherit;
  font-size:13px;
  font-weight:850;
  font-variant-numeric:tabular-nums
}

.app-shell .crm-report-metric span{
  display:inline-flex;
  align-items:center;
  gap:2px;
  color:inherit;
  font-size:9px;
  font-weight:720;
  opacity:.78;
  white-space:nowrap
}

.app-shell a.crm-report-metric:hover{
  border-color:currentColor;
  color:inherit;
  text-decoration:none;
  box-shadow:0 0 0 3px rgba(21,154,77,.07)
}

.app-shell .crm-report-metric.is-blue{
  background:#edf3ff;
  color:#346bc1
}

.app-shell .crm-report-metric.is-green{
  background:#eaf7ef;
  color:#23804a
}

.app-shell .crm-report-metric.is-red{
  background:#fff0f0;
  color:#c84c4c
}

.app-shell .crm-report-metric.is-teal{
  background:#e8f7f5;
  color:#16786f
}

.app-shell .crm-report-metric.is-muted{
  background:var(--surface-3);
  color:var(--text-3)
}

.app-shell .crm-report-metric.is-total{
  min-width:82px;
  border-color:color-mix(in srgb,var(--brand) 18%,var(--border));
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .crm-report-list-card .data-table-footer{
  min-height:50px;
  padding:8px 11px
}

.app-shell .crm-report-list-card .dataTables_info,.app-shell .crm-report-list-card .dataTables_paginate{
  float:none;
  padding:0!important
}

.app-shell .crm-report-list-card td.dataTables_empty{
  height:170px!important;
  color:var(--text-3)!important;
  text-align:center!important
}

.app-shell .crm-report-conversion-table th:first-child,.app-shell .crm-report-conversion-table td.details-control{
  width:58px;
  text-align:center
}

.app-shell .crm-report-expand{
  display:grid;
  width:32px;
  height:32px;
  place-items:center;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface);
  color:var(--text-3);
  cursor:pointer;
  transition:border-color .15s,background .15s,color .15s,box-shadow .15s
}

.app-shell .crm-report-expand svg{
  transition:transform .18s
}

.app-shell .crm-report-expand:hover,.app-shell tr.details .crm-report-expand{
  border-color:var(--brand);
  background:var(--brand-weak);
  color:var(--brand-strong);
  box-shadow:0 0 0 3px rgba(21,154,77,.08)
}

.app-shell tr.details .crm-report-expand svg{
  transform:rotate(90deg)
}

.app-shell .crm-report-conversion-total{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:6px 9px;
  border-radius:9px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .crm-report-conversion-total strong{
  font-size:13px;
  font-weight:850;
  font-variant-numeric:tabular-nums
}

.app-shell .crm-report-conversion-total span{
  font-size:9.5px;
  font-weight:720
}

.app-shell .crm-report-conversion-table tr.shown+tr>td,.app-shell .crm-report-conversion-table tr.details+tr>td{
  padding:0!important;
  background:var(--surface-2)!important
}

.app-shell .crm-conversion-details{
  margin:0;
  padding:10px 12px 12px;
  border-top:1px solid var(--border-2);
  background:var(--surface-2)
}

.app-shell .crm-conversion-details>header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:8px
}

.app-shell .crm-conversion-details>header>div{
  display:flex;
  align-items:center;
  gap:8px
}

.app-shell .crm-conversion-details>header>div>span{
  display:grid;
  width:29px;
  height:29px;
  place-items:center;
  border-radius:8px;
  background:var(--surface);
  color:var(--brand-strong)
}

.app-shell .crm-conversion-details header strong,.app-shell .crm-conversion-details header small{
  display:block
}

.app-shell .crm-conversion-details header strong{
  color:var(--text);
  font-size:11.5px;
  font-weight:790
}

.app-shell .crm-conversion-details header small{
  margin-top:1px;
  color:var(--text-3);
  font-size:9.5px
}

.app-shell .crm-conversion-details>article{
  display:grid;
  grid-template-columns:31px minmax(0,1fr) auto;
  align-items:center;
  gap:9px;
  padding:9px 10px;
  border:1px solid var(--border-2);
  border-radius:9px;
  background:var(--surface)
}

.app-shell .crm-conversion-details>article+article{
  margin-top:6px
}

.app-shell .crm-conversion-details>article>span{
  display:grid;
  width:31px;
  height:31px;
  place-items:center;
  border-radius:8px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .crm-conversion-details>article>div{
  min-width:0
}

.app-shell .crm-conversion-details article strong,.app-shell .crm-conversion-details article small{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .crm-conversion-details article strong{
  color:var(--text);
  font-size:11px;
  font-weight:760
}

.app-shell .crm-conversion-details article small{
  margin-top:2px;
  color:var(--text-3);
  font-size:9.5px
}

.app-shell .crm-conversion-details time{
  display:flex;
  align-items:center;
  gap:5px;
  color:var(--text-3);
  font-size:10px;
  font-weight:650;
  white-space:nowrap
}

.app-shell .crm-conversion-details-loading,.app-shell .crm-conversion-details-error,.app-shell .crm-conversion-details-empty{
  display:flex;
  min-height:82px;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px;
  color:var(--text-3);
  font-size:10.5px
}

.app-shell .crm-conversion-details-loading>span{
  width:17px;
  height:17px;
  border:2px solid var(--border);
  border-top-color:var(--brand);
  border-radius:50%;
  animation:spin .8s linear infinite
}

.app-shell .crm-conversion-details-error{
  color:var(--danger)
}

@media(max-width:1050px){
  .app-shell .crm-report-navigator{
    grid-template-columns:1fr
  }

  .app-shell .crm-report-navigator>a{
    grid-template-columns:38px minmax(0,1fr) 18px
  }

  .app-shell .crm-report-list-card>.table-toolbar{
    align-items:stretch;
    flex-wrap:wrap
  }

  .app-shell .crm-report-list-card .table-toolbar-actions{
    margin-left:auto
  }
}

@media(max-width:760px){
  .app-shell .crm-report-list-card .table-toolbar-filters,.app-shell .crm-report-date-filter{
    width:100%
  }

  .app-shell .crm-report-date-filter .input-with-icon{
    width:100%
  }

  .app-shell .crm-report-list-card .table-toolbar-actions{
    width:100%;
    margin-left:0
  }

  .app-shell .crm-report-table-wrap{
    overflow-x:auto
  }

  .app-shell .crm-conversion-details>article{
    grid-template-columns:31px minmax(0,1fr)
  }

  .app-shell .crm-conversion-details time{
    grid-column:2
  }
}

/* Complete detail-tab listing system */

.app-shell .profile-tab-pane{
  min-height:330px
}

.app-shell .profile-list-header{
  display:flex;
  min-height:54px;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin:-2px 0 13px;
  padding-bottom:12px;
  border-bottom:1px solid var(--border-2)
}

.app-shell .profile-list-heading{
  display:flex;
  min-width:0;
  align-items:center;
  gap:9px
}

.app-shell .profile-list-heading>span{
  display:grid;
  width:34px;
  height:34px;
  flex:0 0 34px;
  place-items:center;
  border-radius:9px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .profile-list-heading strong,.app-shell .profile-list-heading small{
  display:block
}

.app-shell .profile-list-heading strong{
  color:var(--text);
  font-size:12.5px;
  font-weight:820
}

.app-shell .profile-list-heading small{
  margin-top:2px;
  color:var(--text-3);
  font-size:10.5px
}

.app-shell .profile-list-actions{
  display:flex;
  align-items:center;
  gap:7px
}

/* The filter strip above a profile tab's listing. It is the shared filter card, so the fields sit
   in that card's responsive grid — one per row on a phone, two side by side from tablet, four
   across on a wide screen — however many filters the tab happens to have. The listings still hand
   it Bootstrap column wrappers (the sell filter partial is shared with the full listing screens),
   and a column inside a grid cell only re-adds its own gutter, so those wrappers are flattened and
   the grid's gap does the spacing. */

.app-shell .profile-tab-filter-card{
  margin:0 0 12px;
  padding:13px 14px;
  border:1px solid var(--border-2);
  border-radius:11px;
  background:var(--surface-2);
  box-shadow:none
}

.app-shell .profile-tab-filter-card>div:first-child{
  margin-bottom:11px;
  color:var(--text-2);
  font-size:11.5px;
  font-weight:780
}

.app-shell .profile-tab-filter-card [class*="col-"]{
  width:100%;
  max-width:100%;
  padding:0;
  float:none
}

.app-shell .profile-tab-filter-card .form-group{
  margin:0
}

.app-shell .profile-tab-filter-card label{
  display:block;
  margin-bottom:6px;
  color:var(--text-2);
  font-size:11.5px;
  font-weight:750
}

.app-shell .profile-tab-list-card{
  margin:0!important;
  border:0!important
}

.app-shell .profile-tab-inline-filter{
  margin-bottom:12px;
  padding:12px 6px 0;
  border:1px solid var(--border-2);
  border-radius:11px;
  background:var(--surface-2)
}

.app-shell .profile-tab-content .dataTables_wrapper{
  color:var(--text-2)
}

.app-shell .profile-tab-content .dataTables_wrapper:before,.app-shell .profile-tab-content .dataTables_wrapper:after{
  display:table;
  clear:both;
  content:""
}

.app-shell .profile-tab-content .dataTables_length,.app-shell .profile-tab-content .dataTables_filter{
  min-height:38px;
  margin:0 0 10px
}

.app-shell .profile-tab-content .dataTables_length{
  float:left
}

.app-shell .profile-tab-content .dataTables_filter{
  float:right
}

.app-shell .profile-tab-content .dataTables_length label,.app-shell .profile-tab-content .dataTables_filter label{
  display:flex;
  align-items:center;
  gap:7px;
  margin:0;
  color:var(--text-3);
  font-size:10.5px;
  font-weight:650
}

.app-shell .profile-tab-content .dataTables_length select{
  width:72px!important;
  height:34px!important;
  margin:0 4px;
  padding:0 24px 0 9px;
  border:1px solid var(--border)!important;
  border-radius:8px!important;
  background-color:var(--surface)!important;
  font-size:11px
}

.app-shell .profile-tab-content .dataTables_filter input{
  width:235px!important;
  height:34px!important;
  margin-left:0!important;
  padding:0 10px 0 31px!important;
  border:1px solid var(--border)!important;
  border-radius:8px!important;
  background-color:var(--surface)!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23818b84' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important;
  background-position:10px center!important;
  box-shadow:none!important;
  color:var(--text)!important;
  font-size:11px
}

.app-shell .profile-tab-content .dt-buttons{
  display:flex;
  float:left;
  flex-wrap:wrap;
  gap:5px;
  margin:0 0 10px
}

.app-shell .profile-tab-content .dt-buttons .btn,.app-shell .profile-tab-content .dt-buttons button,.app-shell .profile-tab-content .dt-buttons .dt-button{
  display:inline-flex;
  min-height:32px;
  align-items:center;
  margin:0!important;
  padding:0 9px!important;
  border:1px solid var(--border)!important;
  border-radius:8px!important;
  background:var(--surface)!important;
  color:var(--text-2)!important;
  font-size:10.5px!important;
  font-weight:700!important;
  box-shadow:none!important
}

.app-shell .profile-tab-content .dt-buttons .btn:hover,.app-shell .profile-tab-content .dt-buttons button:hover,.app-shell .profile-tab-content .dt-buttons .dt-button:hover{
  border-color:color-mix(in srgb,var(--brand) 35%,var(--border))!important;
  background:var(--brand-weak)!important;
  color:var(--brand-strong)!important
}

.app-shell .profile-tab-content .dataTables_info{
  padding:11px 0 0!important;
  color:var(--text-3)!important;
  font-size:10.5px
}

.app-shell .profile-tab-content .dataTables_paginate{
  padding-top:9px!important
}

.app-shell .profile-tab-content .dataTables_paginate .pagination>.paginate_button{
  min-width:0!important;
  height:auto!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important
}

.app-shell .profile-tab-content .dataTables_paginate>.paginate_button,.app-shell .profile-tab-content .dataTables_paginate>span>.paginate_button,.app-shell .profile-tab-content .dataTables_paginate .pagination>.paginate_button>a,.app-shell .profile-pagination .pagination>li>a,.app-shell .profile-pagination .pagination>li>span{
  display:inline-flex;
  min-width:34px!important;
  height:34px!important;
  align-items:center;
  justify-content:center;
  margin:0!important;
  padding:0 10px!important;
  border:1px solid var(--border)!important;
  border-radius:8px!important;
  background:var(--surface)!important;
  color:var(--text-2)!important;
  font-size:10.5px!important;
  line-height:1!important;
  box-shadow:none!important
}

.app-shell .profile-tab-content .dataTables_paginate>.paginate_button.current,.app-shell .profile-tab-content .dataTables_paginate>span>.paginate_button.current,.app-shell .profile-tab-content .dataTables_paginate .pagination>.paginate_button.active>a,.app-shell .profile-pagination .pagination>.active>span{
  border-color:var(--brand)!important;
  background:var(--brand)!important;
  color:#fff!important
}

.app-shell .profile-tab-content .dataTables_paginate .pagination>.paginate_button.disabled{
  opacity:1!important
}

.app-shell .profile-tab-content .dataTables_paginate .pagination>.paginate_button.disabled>a{
  background:var(--surface-2)!important;
  color:var(--text-3)!important;
  opacity:.5;
  cursor:not-allowed!important
}

.app-shell .profile-pagination{
  display:flex;
  width:100%;
  justify-content:flex-end;
  padding-top:10px
}

.app-shell .profile-pagination .pagination{
  margin:0
}

.app-shell .profile-module-table-wrap,.app-shell .profile-tab-content>.tab-pane>.table-responsive{
  overflow-x:auto;
  border:1px solid var(--border-2)!important;
  border-radius:10px!important;
  background:var(--surface)
}

.app-shell .profile-module-table-wrap table,.app-shell .profile-module-table,.app-shell .profile-tab-content table.dataTable{
  width:100%!important;
  margin:0!important;
  border-collapse:separate!important;
  border-spacing:0
}

.app-shell .profile-module-table-wrap thead th,.app-shell .profile-module-table thead th,.app-shell .profile-tab-content table.dataTable thead th{
  padding:10px 11px!important;
  border-top:0!important;
  border-right:0!important;
  border-bottom:1px solid var(--border-2)!important;
  border-left:0!important;
  background:var(--surface-2)!important;
  color:var(--text-3)!important;
  font-size:9.5px!important;
  font-weight:800!important;
  letter-spacing:.025em;
  text-transform:uppercase;
  white-space:nowrap
}

.app-shell .profile-module-table-wrap tbody td,.app-shell .profile-module-table tbody td,.app-shell .profile-tab-content table.dataTable tbody td{
  padding:10px 11px!important;
  border-top:0!important;
  border-right:0!important;
  border-bottom:1px solid var(--border-2)!important;
  border-left:0!important;
  background:var(--surface);
  color:var(--text-2);
  font-size:10.8px;
  vertical-align:middle!important
}

.app-shell .profile-module-table-wrap tbody tr:last-child td,.app-shell .profile-module-table tbody tr:last-child td{
  border-bottom:0!important
}

.app-shell .profile-module-table-wrap tbody tr:hover td,.app-shell .profile-module-table tbody tr:hover td,.app-shell .profile-tab-content table.dataTable tbody tr:hover td{
  background:#fbfdfb
}

.app-shell .profile-module-table-wrap .dataTables_scroll,.app-shell .crm-lead-schedule-table .dataTables_scroll{
  clear:both;
  border:1px solid var(--border-2);
  border-radius:10px
}

.app-shell .profile-module-table-wrap .dataTables_scrollHead,.app-shell .crm-lead-schedule-table .dataTables_scrollHead{
  border-bottom:0!important
}

.app-shell .profile-module-table-wrap .dataTables_scrollBody,.app-shell .crm-lead-schedule-table .dataTables_scrollBody{
  border-top:0!important
}

.app-shell .profile-table-empty{
  display:flex;
  min-height:190px;
  align-items:center;
  justify-content:center;
  flex-direction:column!important;
  padding:30px!important;
  text-align:center
}

.app-shell .profile-table-empty>span{
  display:grid;
  width:46px;
  height:46px;
  place-items:center;
  border-radius:14px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .profile-table-empty strong{
  margin-top:10px;
  color:var(--text);
  font-size:12px;
  font-weight:800
}

.app-shell .profile-table-empty small{
  max-width:360px;
  margin-top:4px;
  color:var(--text-3);
  font-size:10.5px;
  line-height:1.5
}

.app-shell .profile-tab-content td.dataTables_empty{
  height:185px!important;
  color:var(--text-3)!important;
  text-align:center!important
}

.app-shell .ledger-toolbar{
  margin:0 0 13px;
  padding:12px 6px 0;
  border:1px solid var(--border-2);
  border-radius:11px;
  background:var(--surface-2)
}

.app-shell .ledger-format-group{
  display:flex
}

.app-shell .ledger-format-group .btn{
  height:34px;
  padding:7px 10px;
  border-color:var(--border);
  background:var(--surface);
  color:var(--text-3);
  font-size:10.5px;
  font-weight:700
}

.app-shell .ledger-format-group .btn.active{
  border-color:var(--brand);
  background:var(--brand);
  color:#fff;
  box-shadow:none
}

.app-shell .ledger-tools{
  display:flex;
  height:100%;
  align-items:flex-end;
  justify-content:flex-end;
  gap:6px;
  padding-bottom:14px
}

.app-shell .ledger-tools .btn-icon{
  background:var(--surface)
}

.app-shell #contact_ledger_div:empty{
  display:flex;
  min-height:190px;
  align-items:center;
  justify-content:center;
  border:1px dashed var(--border);
  border-radius:10px;
  background:var(--surface-2)
}

.app-shell #contact_ledger_div:empty:after{
  color:var(--text-3);
  font-size:10.5px;
  content:"Choose a date range to load ledger activity"
}

.app-shell #contact_ledger_div{
  clear:both
}

.app-shell .profile-ledger-statement{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(320px,.72fr);
  gap:12px;
  margin-top:2px
}

.app-shell .profile-ledger-statement:before,.app-shell .profile-ledger-statement:after{
  display:none
}

.app-shell .profile-ledger-statement>[class*="col-"]{
  width:auto!important;
  min-width:0;
  padding:0!important;
  float:none!important
}

/* first-of-type, not first-child: the letterhead is the first column div but not always the
   first node in the statement, and a miss here dropped it into the narrow left column. */

.app-shell .profile-ledger-statement>[class*="col-"]:first-of-type,.app-shell .profile-ledger-statement>[class*="col-"]:last-of-type{
  grid-column:1/-1
}

.app-shell .profile-ledger-statement .ledger-letterhead{
  display:flex;
  min-height:58px;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  margin:0;
  padding:10px 14px;
  border:1px solid var(--border-2);
  border-radius:11px;
  background:linear-gradient(180deg,#fbfdfb,var(--surface));
  text-align:center!important
}

.app-shell .profile-ledger-statement .ledger-letterhead .biz-name{
  color:var(--text);
  font-size:15px;
  font-weight:850
}

.app-shell .profile-ledger-statement .ledger-letterhead .biz-address{
  max-width:620px;
  margin-top:3px;
  color:var(--text-3);
  font-size:10.5px;
  line-height:1.45
}

.app-shell .profile-ledger-statement .ledger-recipient,.app-shell .profile-ledger-statement .ledger-summary-box{
  max-width:none;
  margin:0;
  border:1px solid var(--border-2)!important;
  border-radius:11px!important;
  box-shadow:none
}

.app-shell .profile-ledger-statement .ledger-recipient{
  height:100%
}

.app-shell .profile-ledger-statement .ledger-recipient .recipient-head,.app-shell .profile-ledger-statement .ledger-summary-box .ledger-summary-head{
  padding:9px 12px;
  background:var(--surface-2);
  color:var(--text-2);
  font-size:10px;
  font-weight:800;
  letter-spacing:.035em;
  text-transform:uppercase
}

.app-shell .profile-ledger-statement .ledger-recipient .recipient-body{
  padding:12px;
  color:var(--text-2);
  font-size:10.8px;
  line-height:1.6
}

.app-shell .profile-ledger-statement .ledger-recipient .recipient-body .recipient-name{
  color:var(--text);
  font-size:12.5px;
  font-weight:820
}

.app-shell .profile-ledger-statement .ledger-summary-box+.ledger-summary-box{
  margin-top:8px
}

.app-shell .profile-ledger-statement .ledger-summary-box .ledger-summary-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px
}

.app-shell .profile-ledger-statement .ledger-summary-box .period{
  color:var(--text-3);
  font-size:9.5px;
  letter-spacing:0;
  text-transform:none
}

.app-shell .profile-ledger-statement .ledger-summary-box table{
  margin:0!important
}

.app-shell .profile-ledger-statement .ledger-summary-box td{
  padding:7px 12px!important;
  border-top:1px solid var(--border-2)!important;
  color:var(--text-2);
  font-size:10.5px
}

.app-shell .profile-ledger-statement .ledger-summary-box td.align-right{
  color:var(--text);
  font-weight:780
}

.app-shell .profile-ledger-statement .ledger-summary-box .ledger-balance-row td{
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .profile-ledger-statement .ledger-section-title{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin:4px 0 0;
  padding:11px 14px;
  border:1px solid var(--border-2);
  border-bottom:0;
  border-radius:11px 11px 0 0;
  background:var(--surface-2);
  color:var(--text-2);
  font-size:10.5px;
  font-weight:780
}

.app-shell .profile-ledger-statement .ledger-section-title:before,.app-shell .profile-ledger-statement .ledger-section-title:after{
  display:none
}

.app-shell .profile-ledger-statement .table-responsive{
  overflow-x:auto;
  border:1px solid var(--border-2);
  border-radius:0 0 11px 11px
}

.app-shell .profile-ledger-statement #ledger_table{
  min-width:840px;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none
}

/* The caption above already carries the tint; a column header in the same colour, touching it,
   reads as one band doubled rather than a title over its table. */

.app-shell .profile-ledger-statement #ledger_table thead th{
  padding:9px 10px!important;
  border:0!important;
  border-bottom:1px solid var(--border-2)!important;
  background:var(--surface)!important;
  color:var(--text-3)!important;
  font-size:9px!important;
  font-weight:800!important;
  letter-spacing:.025em;
  text-transform:uppercase
}

.app-shell .profile-ledger-statement #ledger_table tbody td{
  padding:9px 10px!important;
  border:0!important;
  border-bottom:1px solid var(--border-2)!important;
  background:var(--surface);
  color:var(--text-2);
  font-size:10.5px;
  vertical-align:middle
}

.app-shell .profile-ledger-statement #ledger_table tbody tr:last-child td{
  border-bottom:0!important
}

.app-shell .profile-ledger-statement #ledger_table tbody tr:hover td{
  background:#fbfdfb
}

.app-shell .profile-ledger-statement .ledger-type-badge{
  padding:3px 7px;
  border-radius:999px;
  background:var(--brand-weak);
  color:var(--brand-strong);
  font-size:9.5px;
  font-weight:750
}

/* Money columns read as a pair: what was billed against what came back. Lining figures keep the
   digits in the same place down the column, which is the only way a total can be eyeballed. */

.app-shell .profile-ledger-statement #ledger_table .ledger-debit,.app-shell .profile-ledger-statement #ledger_table .ledger-credit{
  font-weight:780;
  font-variant-numeric:tabular-nums
}

.app-shell .profile-ledger-statement #ledger_table .ledger-debit{
  color:var(--danger)
}

.app-shell .profile-ledger-statement #ledger_table .ledger-credit{
  color:var(--brand-strong)
}

.app-shell .profile-ledger-statement-aging{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)
}

.app-shell .profile-ledger-statement-aging>[class*="col-"]:nth-child(3){
  grid-column:1/-1
}

.app-shell .profile-ledger-statement-aging>[class*="col-"]:first-child{
  grid-column:auto
}

.app-shell .profile-ledger-statement-aging>[class*="col-"]:nth-child(-n+2){
  padding:13px!important;
  border:1px solid var(--border-2);
  border-radius:11px;
  background:var(--surface)
}

.app-shell .profile-ledger-statement-aging>[class*="col-"]:nth-child(-n+2)>p{
  margin:0;
  color:var(--text-2);
  font-size:10.8px;
  line-height:1.55
}

.app-shell .profile-ledger-statement-aging>[class*="col-"]:nth-child(-n+2) strong{
  color:var(--text);
  font-size:12.5px
}

.app-shell .profile-ledger-statement-aging>[class*="col-"]:nth-child(2)>table{
  margin:0 auto
}

.app-shell .profile-ledger-statement-aging>[class*="col-"]:nth-child(2)>table th,.app-shell .profile-ledger-statement-aging>[class*="col-"]:nth-child(2)>table td{
  padding:3px 7px;
  border:0;
  color:var(--text-2);
  font-size:10.5px
}

.app-shell .profile-ledger-statement-aging>[class*="col-"]:nth-child(2)>table tr:first-child th{
  color:var(--text);
  font-size:14px
}

.app-shell .profile-ledger-statement-aging>[class*="col-"]:nth-child(3)>.table{
  margin:10px 0 0!important;
  border:1px solid var(--border-2);
  border-radius:11px;
  background:var(--surface)
}

.app-shell .profile-ledger-statement-aging>[class*="col-"]:nth-child(3)>.table th,.app-shell .profile-ledger-statement-aging>[class*="col-"]:nth-child(3)>.table td{
  padding:9px!important;
  border-color:var(--border-2)!important;
  font-size:9.5px
}

.app-shell .profile-ledger-statement-detailed>[class*="col-"]:first-child{
  grid-column:1/-1;
  padding:10px 13px!important;
  border:1px solid var(--border-2);
  border-radius:11px;
  background:var(--surface-2)
}

.app-shell .profile-ledger-statement-detailed>[class*="col-"]:first-child p{
  margin:0!important;
  color:var(--text-3);
  font-size:10.5px;
  text-align:center!important
}

.app-shell .profile-ledger-statement-detailed>[class*="col-"]:first-child strong{
  display:block;
  color:var(--text);
  font-size:14px
}

.app-shell .profile-ledger-statement-detailed>[class*="col-"]:nth-child(2),.app-shell .profile-ledger-statement-detailed>[class*="col-"]:nth-child(3){
  padding:13px!important;
  border:1px solid var(--border-2);
  border-radius:11px;
  background:var(--surface)
}

.app-shell .profile-ledger-statement-detailed>[class*="col-"]:nth-child(2) .blue-heading,.app-shell .profile-ledger-statement-detailed>[class*="col-"]:nth-child(3) .blue-heading{
  margin:-13px -13px 10px!important;
  padding:9px 12px!important;
  border-radius:11px 11px 0 0;
  background:var(--surface-2)!important;
  color:var(--text-2)!important;
  font-size:10px!important;
  font-weight:800;
  text-align:left;
  text-transform:uppercase
}

.app-shell .profile-ledger-statement-detailed>[class*="col-"]:nth-child(2)>p:not(.blue-heading),.app-shell .profile-ledger-statement-detailed>[class*="col-"]:nth-child(3)>small{
  color:var(--text-2);
  font-size:10.5px;
  line-height:1.55
}

.app-shell .profile-ledger-statement-detailed>[class*="col-"]:nth-child(3) table{
  margin:8px 0 0
}

.app-shell .profile-ledger-statement-detailed>[class*="col-"]:nth-child(3) td{
  padding:6px 7px!important;
  border-color:var(--border-2)!important;
  font-size:10.5px
}

.app-shell .profile-reward-balance{
  display:flex;
  min-height:74px;
  align-items:center;
  gap:11px;
  margin-bottom:12px;
  padding:12px;
  border:1px solid color-mix(in srgb,#c58112 18%,var(--border));
  border-radius:11px;
  background:#fffaf0
}

.app-shell .profile-reward-balance>span{
  display:grid;
  width:38px;
  height:38px;
  place-items:center;
  border-radius:10px;
  background:#fdf0d4;
  color:#b47008
}

.app-shell .profile-reward-balance small,.app-shell .profile-reward-balance strong{
  display:block
}

.app-shell .profile-reward-balance small{
  color:#91641c;
  font-size:9.5px;
  font-weight:700
}

.app-shell .profile-reward-balance strong{
  margin-top:3px;
  color:#6d4a12;
  font-size:18px;
  font-weight:850
}

.app-shell .profile-sales-card,.app-shell .profile-listing-card{
  margin:0!important;
  border:1px solid var(--border-2)!important;
  box-shadow:none!important
}

.app-shell .profile-module-data-card{
  margin:0!important;
  overflow:visible;
  border:1px solid var(--border-2)!important;
  border-radius:11px!important;
  box-shadow:none!important
}

/* White, like every other listing toolbar. The tint was fine when the toolbar scrolled away with
   the page; now that it holds at the top it is a band of grey sitting over white rows, and on the
   cards carrying both this class and a listing card's the tint was winning on nothing more than
   being written later. */

.app-shell .profile-module-data-card>.table-toolbar{
  border-bottom:1px solid var(--border-2);
  background:var(--surface)
}

.app-shell .profile-module-data-card>.data-table-content{
  padding:0
}

/* The payments tab reads left to right like the rest of its row — the column heading is on the
   left, so the buttons under it are too, rather than pinned to the far edge of the table. */

.app-shell .contact-payment-row-actions{
  justify-content:flex-start
}

.app-shell .profile-module-data-card .profile-module-table-wrap{
  border:0!important;
  border-radius:0!important
}

.app-shell .profile-module-data-card .dataTables_wrapper{
  padding:0
}

.app-shell .profile-module-data-card .data-table-footer{
  display:flex;
  min-height:51px;
  align-items:center;
  justify-content:space-between;
  padding:8px 11px;
  border-top:1px solid var(--border-2);
  background:var(--surface)
}

.app-shell .profile-module-data-card .dataTables_info,.app-shell .profile-module-data-card .dataTables_paginate{
  float:none;
  padding:0!important
}

.app-shell .profile-module-data-card .table-responsive{
  margin:0;
  border:0!important;
  border-radius:0!important
}

.app-shell .profile-module-data-card table{
  min-width:960px
}

.app-shell .profile-reward-data-card table{
  min-width:560px
}

.app-shell .profile-sales-table-wrap{
  overflow-x:auto
}

.app-shell .profile-sales-table{
  min-width:940px
}

.app-shell .profile-sales-summary{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--border-2);
  background:var(--surface-2)
}

.app-shell .profile-sales-summary>div{
  padding:11px 13px
}

.app-shell .profile-sales-summary>div+div{
  border-left:1px solid var(--border-2)
}

.app-shell .profile-sales-summary span,.app-shell .profile-sales-summary strong{
  display:block
}

.app-shell .profile-sales-summary span{
  color:var(--text-3);
  font-size:9.5px;
  font-weight:700
}

.app-shell .profile-sales-summary strong{
  margin-top:4px;
  color:var(--text);
  font-size:13px;
  font-weight:820
}

/* Module-owned nested listings inherit the same visual language. */

.app-shell .profile-tab-content .nav-tabs-custom{
  margin:0;
  border:1px solid var(--border-2);
  border-radius:11px;
  background:var(--surface);
  box-shadow:none
}

.app-shell .profile-tab-content .nav-tabs-custom>.nav-tabs{
  display:flex;
  gap:5px;
  padding:7px;
  border-bottom:1px solid var(--border-2);
  background:var(--surface-2)
}

.app-shell .profile-tab-content .nav-tabs-custom>.nav-tabs>li{
  float:none;
  margin:0
}

.app-shell .profile-tab-content .nav-tabs-custom>.nav-tabs>li>a{
  display:flex;
  min-height:36px;
  align-items:center;
  gap:6px;
  margin:0;
  padding:0 11px;
  border:0!important;
  border-radius:8px;
  background:transparent;
  color:var(--text-3);
  font-size:10.5px;
  font-weight:730
}

.app-shell .profile-tab-content .nav-tabs-custom>.nav-tabs>li>a>svg{
  display:none
}

.app-shell .profile-tab-content .nav-tabs-custom>.nav-tabs>li.active>a{
  background:var(--surface);
  color:var(--brand-strong);
  box-shadow:var(--shadow-sm)
}

.app-shell .profile-tab-content .nav-tabs-custom>.tab-content{
  padding:12px
}

.app-shell .profile-tab-content .nav-tabs-custom .mb-12{
  display:flex;
  justify-content:flex-end;
  margin-bottom:10px
}

.app-shell .profile-tab-content .nav-tabs-custom .mb-12>a{
  display:inline-flex!important;
  min-height:34px;
  align-items:center;
  gap:6px;
  padding:0 11px!important;
  border:0!important;
  border-radius:9px!important;
  background:var(--brand)!important;
  color:#fff!important;
  font-size:11px!important;
  font-weight:750!important;
  text-decoration:none!important
}

.app-shell .profile-tab-content .nav-tabs-custom .mb-12>a>svg{
  width:15px;
  height:15px
}

.app-shell .profile-followup-card{
  margin:0!important;
  overflow:visible;
  border:1px solid var(--border-2)!important;
  border-radius:12px!important;
  box-shadow:none!important
}

.app-shell .profile-followup-card>.table-toolbar{
  border-bottom:1px solid var(--border-2);
  background:var(--surface)
}

.app-shell .profile-followup-card .data-table-content{
  padding:0
}

.app-shell .profile-followup-card .crm-lead-schedule-table{
  min-height:0;
  margin:0;
  border:0!important;
  border-radius:0 0 11px 11px!important
}

.app-shell .profile-followup-card .crm-lead-schedule-table table{
  min-width:1180px
}

.app-shell .profile-followup-card .dataTables_wrapper{
  padding:0
}

.app-shell .profile-followup-card .dataTables_scroll{
  border:0;
  border-radius:0
}

.app-shell .profile-followup-card .dataTables_scrollHead{
  border-bottom:0!important
}

.app-shell .profile-followup-card .dataTables_scrollBody{
  min-height:0!important;
  border-bottom:0!important
}

.app-shell .profile-followup-card .data-table-footer{
  display:flex;
  min-height:51px;
  align-items:center;
  justify-content:space-between;
  padding:8px 11px;
  border-top:1px solid var(--border-2);
  background:var(--surface)
}

.app-shell .profile-followup-card .dataTables_info,.app-shell .profile-followup-card .dataTables_paginate{
  float:none;
  padding:0!important
}

.app-shell .profile-followup-card td.dataTables_empty{
  height:170px!important;
  padding:0!important
}

.app-shell .profile-followup-empty{
  display:flex;
  min-height:168px;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  padding:24px;
  text-align:center
}

.app-shell .profile-followup-empty>span{
  display:grid;
  width:50px;
  height:50px;
  place-items:center;
  border:1px solid color-mix(in srgb,var(--brand) 18%,var(--border));
  border-radius:15px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .profile-followup-empty strong{
  margin-top:11px;
  color:var(--text);
  font-size:12.5px;
  font-weight:820
}

.app-shell .profile-followup-empty small{
  max-width:390px;
  margin-top:5px;
  color:var(--text-3);
  font-size:10.5px;
  line-height:1.55
}

@media (prefers-reduced-motion:no-preference){
  .app-shell .profile-metrics-region,.app-shell .profile-record-card,.app-shell .profile-workspace-card{
    animation:profile-rise .3s ease both
  }

  .app-shell .profile-record-card{
    animation-delay:.04s
  }

  .app-shell .profile-workspace-card{
    animation-delay:.08s
  }

  /* The end frame must resolve to transform:none, not translateY(0). animation-fill-mode:both
     keeps the final frame applied forever, and any transform other than none turns the card into
     the containing block for its position:fixed descendants — which pinned modals opened from
     inside a profile tab (documents & notes, field force) to the card instead of the viewport. */

  @keyframes profile-rise{
    from{
      opacity:0;
      transform:translateY(7px)
    }

    to{
      opacity:1;
      transform:none
    }
  }
}

@media (max-width:1100px){
  .app-shell .profile-record-grid{
    grid-template-columns:1fr 1fr
  }

  .app-shell .profile-record-section:last-child{
    grid-column:1/-1;
    border-top:1px solid var(--border-2);
    border-left:0
  }

  .app-shell .profile-record-owners{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}

@media (max-width:760px){
  .app-shell .profile-record-switcher{
    width:100%;
    min-width:220px
  }

  .app-shell .profile-record-grid{
    grid-template-columns:1fr
  }

  .app-shell .profile-record-section+.profile-record-section{
    border-top:1px solid var(--border-2);
    border-left:0
  }

  .app-shell .profile-record-section:last-child{
    grid-column:auto
  }

  .app-shell .profile-record-owners{
    grid-template-columns:1fr
  }

  .app-shell .profile-record-custom{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

  .app-shell .profile-tabs>li>a{
    padding:0 10px
  }

  .app-shell .contact-person-workspace-head{
    align-items:flex-start;
    flex-direction:column
  }

  .app-shell .contact-person-workspace-actions{
    width:100%;
    justify-content:space-between
  }

  .app-shell .contact-person-table-shell>.table-responsive{
    overflow-x:auto
  }

  .app-shell #contact_login_table{
    min-width:780px
  }

  .app-shell .profile-list-header{
    align-items:flex-start;
    flex-direction:column
  }

  .app-shell .profile-list-actions{
    width:100%
  }

  .app-shell .profile-list-actions>*{
    flex:1;
    justify-content:center
  }

  .app-shell .profile-tab-content .dataTables_length,.app-shell .profile-tab-content .dataTables_filter{
    float:none
  }

  .app-shell .profile-tab-content .dataTables_filter label,.app-shell .profile-tab-content .dataTables_filter input{
    width:100%!important
  }

  .app-shell .profile-tab-content .dt-buttons{
    float:none
  }

  .app-shell .profile-sales-summary{
    grid-template-columns:1fr
  }

  .app-shell .profile-sales-summary>div+div{
    border-top:1px solid var(--border-2);
    border-left:0
  }

  .app-shell .profile-followup-card .data-table-footer{
    align-items:flex-start;
    flex-direction:column;
    gap:8px
  }

  .app-shell .profile-ledger-statement,.app-shell .profile-ledger-statement-aging{
    grid-template-columns:1fr
  }

  .app-shell .profile-ledger-statement>[class*="col-"]{
    grid-column:1!important
  }

  .app-shell .ledger-tools{
    align-items:center;
    justify-content:flex-start
  }
}

@media (max-width:520px){
  .app-shell .profile-record-hero{
    align-items:flex-start
  }

  .app-shell .profile-record-quick{
    position:absolute;
    right:13px;
    bottom:13px
  }

  .app-shell .profile-record-meta{
    padding-right:90px
  }

  .app-shell .profile-metrics-grid{
    grid-template-columns:1fr 1fr
  }

  .app-shell .profile-metric{
    min-height:86px;
    padding:12px
  }

  .app-shell .profile-metric-value{
    font-size:16px
  }

  .app-shell .profile-record-custom{
    grid-template-columns:1fr
  }

  .app-shell .profile-tab-content{
    padding:12px!important
  }

  .app-shell .contact-person-count span:last-child{
    display:none
  }

  .app-shell .contact-person-workspace .contact-login-add{
    flex:1
  }
}

/* CRM proposals and relationship taxonomies */

.app-shell .crm-proposal-template-workspace{
  margin-top:18px;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:15px;
  background:var(--surface);
  box-shadow:var(--shadow-md)
}

.app-shell .crm-proposal-template-workspace>header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:18px 20px;
  border-bottom:1px solid var(--border);
  background:linear-gradient(115deg,color-mix(in srgb,var(--brand-weak) 62%,var(--surface)) 0%,var(--surface) 70%)
}

.app-shell .crm-proposal-template-title{
  display:flex;
  min-width:0;
  align-items:center;
  gap:13px
}

.app-shell .crm-proposal-template-title>span{
  display:grid;
  width:46px;
  height:46px;
  flex:none;
  place-items:center;
  border:1px solid color-mix(in srgb,var(--brand) 20%,var(--border));
  border-radius:12px;
  background:var(--surface);
  color:var(--brand-strong);
  box-shadow:var(--shadow-sm)
}

.app-shell .crm-proposal-template-title small,.app-shell .crm-proposal-message-preview>div>span{
  display:block;
  color:var(--brand-strong);
  font-size:9px;
  font-weight:850;
  letter-spacing:.7px
}

.app-shell .crm-proposal-template-title h2{
  margin:2px 0 0;
  color:var(--text);
  font-size:17px;
  font-weight:850;
  line-height:1.25
}

.app-shell .crm-proposal-template-title p{
  margin:3px 0 0;
  color:var(--text-3);
  font-size:11px
}

.app-shell .crm-proposal-template-summary{
  display:grid;
  grid-template-columns:320px minmax(0,1fr);
  min-height:340px
}

.app-shell .crm-proposal-template-meta{
  padding:18px;
  border-right:1px solid var(--border-2);
  background:var(--surface-2)
}

.app-shell .crm-proposal-template-meta>div{
  display:grid;
  grid-template-columns:36px minmax(0,1fr);
  align-items:center;
  gap:10px;
  padding:13px 0;
  border-bottom:1px solid var(--border-2)
}

.app-shell .crm-proposal-template-meta>div:first-child{
  padding-top:0
}

.app-shell .crm-proposal-template-meta>div:last-child{
  border:0
}

.app-shell .crm-proposal-template-meta>div>span{
  display:grid;
  width:36px;
  height:36px;
  place-items:center;
  border-radius:9px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .crm-proposal-template-meta p{
  min-width:0;
  margin:0
}

.app-shell .crm-proposal-template-meta small{
  display:block;
  color:var(--text-3);
  font-size:8.5px;
  font-weight:850;
  letter-spacing:.55px
}

.app-shell .crm-proposal-template-meta strong{
  display:block;
  overflow:hidden;
  margin-top:3px;
  color:var(--text-2);
  font-size:11.5px;
  font-weight:700;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .crm-proposal-message-preview{
  min-width:0;
  padding:21px 24px
}

.app-shell .crm-proposal-message-preview>div:first-child{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-bottom:12px;
  border-bottom:1px solid var(--border-2)
}

.app-shell .crm-proposal-message-preview>div>a{
  display:inline-flex;
  align-items:center;
  gap:5px;
  color:var(--brand-strong);
  font-size:10.5px;
  font-weight:750
}

.app-shell .crm-proposal-message-preview h3{
  margin:18px 0 11px;
  color:var(--text);
  font-size:16px;
  font-weight:800
}

.app-shell .crm-proposal-preview-body{
  position:relative;
  max-height:205px;
  overflow:hidden;
  color:var(--text-2);
  font-size:12.5px;
  line-height:1.65
}

.app-shell .crm-proposal-preview-body:after{
  position:absolute;
  right:0;
  bottom:0;
  left:0;
  height:48px;
  background:linear-gradient(transparent,var(--surface));
  content:""
}

.app-shell .crm-proposal-empty-state{
  display:flex;
  min-height:340px;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  margin-top:18px;
  padding:40px;
  border:1px dashed color-mix(in srgb,var(--brand) 28%,var(--border));
  border-radius:15px;
  background:var(--surface);
  text-align:center;
  box-shadow:var(--shadow-sm)
}

.app-shell .crm-proposal-empty-state>span{
  display:grid;
  width:58px;
  height:58px;
  place-items:center;
  border-radius:16px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .crm-proposal-empty-state h2{
  margin:14px 0 4px;
  font-size:17px
}

.app-shell .crm-proposal-empty-state p{
  max-width:460px;
  margin:0 0 16px;
  color:var(--text-3);
  font-size:12px
}

.app-shell .crm-proposal-builder{
  display:grid;
  gap:14px;
  margin-top:16px
}

.app-shell .crm-proposal-form-section{
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:13px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

.app-shell .crm-proposal-section-head{
  display:grid;
  grid-template-columns:36px minmax(0,1fr) 26px;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-bottom:1px solid var(--border-2);
  background:var(--surface-2)
}

.app-shell .crm-proposal-section-head>span{
  display:grid;
  width:36px;
  height:36px;
  place-items:center;
  border-radius:9px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .crm-proposal-section-head strong{
  display:block;
  color:var(--text);
  font-size:12.5px;
  font-weight:800
}

.app-shell .crm-proposal-section-head p{
  margin:2px 0 0;
  color:var(--text-3);
  font-size:10px
}

.app-shell .crm-proposal-section-head>i{
  display:grid;
  width:24px;
  height:24px;
  place-items:center;
  border:1px solid color-mix(in srgb,var(--brand) 25%,var(--border));
  border-radius:7px;
  background:var(--brand-weak);
  color:var(--brand-strong);
  font-size:9px;
  font-style:normal;
  font-weight:850
}

.app-shell .crm-proposal-fields{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  padding:15px
}

.app-shell .crm-proposal-fields .form-group,.app-shell .crm-proposal-recipient .form-group{
  margin:0
}

.app-shell .crm-proposal-subject{
  grid-column:1/-1
}

.app-shell .crm-proposal-fields label,.app-shell .crm-proposal-editor-field>label,.app-shell .crm-proposal-recipient label{
  display:block;
  margin-bottom:6px;
  color:var(--text-2);
  font-size:12px;
  font-weight:750
}

.app-shell .crm-proposal-fields .form-control,.app-shell .crm-proposal-recipient .form-control{
  height:42px;
  border-radius:10px;
  font-size:13px
}

.app-shell .crm-field-help{
  margin:5px 0 0;
  color:var(--text-3);
  font-size:10px
}

.app-shell .crm-proposal-editor-field{
  padding:15px
}

.app-shell .crm-proposal-editor-field .tox-tinymce{
  border-color:var(--border);
  border-radius:10px
}

.app-shell .crm-proposal-upload{
  padding:15px
}

.app-shell .crm-proposal-form-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin:14px 0 28px;
  padding:13px 15px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

.app-shell .crm-proposal-form-footer>span{
  color:var(--text-3);
  font-size:10.5px
}

.app-shell .crm-proposal-form-footer>div{
  display:flex;
  gap:8px
}

.app-shell .crm-proposal-recipient{
  display:grid;
  grid-template-columns:minmax(280px,480px) minmax(0,1fr);
  align-items:end;
  gap:14px;
  padding:15px
}

.app-shell .crm-proposal-recipient-note{
  display:flex;
  min-height:42px;
  align-items:center;
  gap:8px;
  padding:9px 11px;
  border:1px solid var(--border-2);
  border-radius:10px;
  background:var(--surface-2);
  color:var(--text-3);
  font-size:10.5px
}

.app-shell .crm-proposal-recipient-note svg{
  color:var(--brand-strong)
}

.app-shell .crm-proposal-existing-files{
  margin-top:14px;
  padding:15px;
  border:1px solid var(--border);
  border-radius:13px;
  background:var(--surface)
}

.app-shell .crm-proposal-existing-files h4,.app-shell .crm-proposal-modal-files h5{
  display:flex;
  align-items:center;
  gap:7px;
  margin:0 0 10px;
  color:var(--text);
  font-size:12px;
  font-weight:800
}

.app-shell .crm-proposal-files{
  display:grid;
  gap:7px
}

.app-shell .crm-proposal-file{
  display:grid;
  grid-template-columns:34px minmax(0,1fr) auto auto;
  align-items:center;
  gap:8px;
  padding:8px 9px;
  border:1px solid var(--border-2);
  border-radius:9px;
  background:var(--surface)
}

.app-shell .crm-proposal-file>span{
  display:grid;
  width:34px;
  height:34px;
  place-items:center;
  border-radius:8px;
  background:var(--info-weak);
  color:var(--info)
}

.app-shell .crm-proposal-file a{
  color:var(--text-2);
  font-size:11.5px;
  font-weight:750
}

.app-shell .crm-proposal-file small{
  display:block;
  margin-top:2px;
  color:var(--text-3);
  font-size:9px
}

.app-shell .crm-list-intro{
  display:flex;
  align-items:center;
  gap:11px;
  margin:16px 0 12px;
  padding:13px 15px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

.app-shell .crm-list-intro>span{
  display:grid;
  width:38px;
  height:38px;
  place-items:center;
  border-radius:10px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .crm-list-intro strong{
  font-size:12.5px
}

.app-shell .crm-list-intro p{
  margin:2px 0 0;
  color:var(--text-3);
  font-size:10px
}

.app-shell .crm-proposals-list-card tbody td{
  vertical-align:middle
}

.app-shell .crm-proposal-person,.app-shell .crm-proposal-sender,.app-shell .crm-proposal-date{
  display:flex;
  align-items:center;
  gap:9px
}

.app-shell .crm-proposal-person>span{
  display:grid;
  width:34px;
  height:34px;
  flex:none;
  place-items:center;
  border-radius:9px;
  background:var(--brand-weak);
  color:var(--brand-strong);
  font-size:11px;
  font-weight:850
}

.app-shell .crm-proposal-person strong,.app-shell .crm-proposal-subject-cell strong,.app-shell .crm-proposal-sender strong,.app-shell .crm-proposal-date strong{
  display:block;
  color:var(--text-2);
  font-size:11.5px;
  font-weight:750
}

.app-shell .crm-proposal-person small,.app-shell .crm-proposal-subject-cell small{
  display:block;
  margin-top:2px;
  color:var(--text-3);
  font-size:9px
}

.app-shell .crm-proposal-sender>span,.app-shell .crm-proposal-date>span{
  display:grid;
  width:27px;
  height:27px;
  flex:none;
  place-items:center;
  border-radius:7px;
  background:var(--surface-3);
  color:var(--text-3)
}

.app-shell .crm-proposal-row-actions{
  justify-content:flex-end
}

.app-shell .crm-proposal-view-dialog{
  width:min(880px,calc(100% - 24px));
  max-width:none
}

.app-shell .crm-proposal-view-modal{
  overflow:hidden
}

.app-shell .crm-proposal-view-modal .modal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 18px;
  background:linear-gradient(110deg,var(--brand-weak),var(--surface) 68%)
}

.app-shell .crm-proposal-modal-heading{
  display:flex;
  align-items:center;
  gap:11px
}

.app-shell .crm-proposal-modal-heading>span{
  display:grid;
  width:43px;
  height:43px;
  place-items:center;
  border-radius:11px;
  background:var(--brand);
  color:#fff
}

.app-shell .crm-proposal-modal-heading small{
  color:var(--brand-strong);
  font-size:8.5px;
  font-weight:850;
  letter-spacing:.6px
}

.app-shell .crm-proposal-modal-heading h4{
  margin:2px 0 0;
  font-size:16px
}

.app-shell .crm-proposal-modal-heading p{
  margin:2px 0 0;
  color:var(--text-3);
  font-size:10px
}

.app-shell .crm-modal-close{
  display:grid;
  width:34px;
  height:34px;
  place-items:center;
  border:0;
  border-radius:9px;
  background:var(--surface-2);
  color:var(--text-3)
}

.app-shell .crm-proposal-view-modal .modal-body{
  display:grid;
  gap:12px;
  padding:14px;
  background:var(--surface-2)
}

.app-shell .crm-proposal-delivery-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:11px;
  background:var(--surface)
}

.app-shell .crm-proposal-delivery-grid>div{
  display:flex;
  min-width:0;
  align-items:center;
  gap:9px;
  padding:12px
}

.app-shell .crm-proposal-delivery-grid>div+div{
  border-left:1px solid var(--border-2)
}

.app-shell .crm-proposal-delivery-grid>div>span{
  display:grid;
  width:33px;
  height:33px;
  flex:none;
  place-items:center;
  border-radius:8px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .crm-proposal-delivery-grid p{
  min-width:0;
  margin:0
}

.app-shell .crm-proposal-delivery-grid small,.app-shell .crm-proposal-copy-grid small,.app-shell .crm-proposal-letter small{
  display:block;
  color:var(--text-3);
  font-size:8.5px;
  font-weight:850;
  letter-spacing:.45px
}

.app-shell .crm-proposal-delivery-grid strong,.app-shell .crm-proposal-copy-grid strong{
  display:block;
  overflow:hidden;
  margin-top:3px;
  color:var(--text-2);
  font-size:10.5px;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .crm-proposal-copy-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px
}

.app-shell .crm-proposal-copy-grid>div{
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface)
}

.app-shell .crm-proposal-letter{
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:11px;
  background:var(--surface)
}

.app-shell .crm-proposal-letter>div{
  padding:11px 13px;
  border-bottom:1px solid var(--border-2);
  background:var(--surface-2)
}

.app-shell .crm-proposal-letter h5{
  margin:3px 0 0;
  font-size:13px
}

.app-shell .crm-proposal-letter>article{
  min-height:130px;
  padding:16px;
  color:var(--text-2);
  font-size:12px;
  line-height:1.6
}

.app-shell .crm-proposal-modal-files{
  padding:12px;
  border:1px solid var(--border);
  border-radius:11px;
  background:var(--surface)
}

.app-shell .crm-proposal-modal-files h5 span{
  display:grid;
  min-width:19px;
  height:19px;
  place-items:center;
  border-radius:6px;
  background:var(--brand-weak);
  color:var(--brand-strong);
  font-size:9px
}

.app-shell .crm-proposal-view-modal .modal-footer{
  display:flex;
  align-items:center;
  justify-content:space-between
}

.app-shell .crm-proposal-view-modal .modal-footer>span{
  color:var(--text-3);
  font-size:9.5px
}

.app-shell .crm-proposal-preview-layout{
  display:grid;
  grid-template-columns:310px minmax(0,1fr);
  gap:14px;
  margin-top:16px
}

.app-shell .crm-proposal-preview-layout>aside,.app-shell .crm-proposal-paper{
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

.app-shell .crm-proposal-preview-layout>aside{
  align-self:start;
  overflow:hidden
}

.app-shell .crm-proposal-preview-status{
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px;
  border-bottom:1px solid var(--border-2);
  background:var(--brand-weak)
}

.app-shell .crm-proposal-preview-status>span{
  display:grid;
  width:35px;
  height:35px;
  place-items:center;
  border-radius:9px;
  background:var(--surface);
  color:var(--brand-strong)
}

.app-shell .crm-proposal-preview-status small,.app-shell .crm-proposal-paper small{
  display:block;
  color:var(--brand-strong);
  font-size:8.5px;
  font-weight:850;
  letter-spacing:.55px
}

.app-shell .crm-proposal-preview-status strong{
  display:block;
  margin-top:2px;
  font-size:12px
}

.app-shell .crm-proposal-preview-layout dl{
  margin:0;
  padding:4px 14px
}

.app-shell .crm-proposal-preview-layout dl>div{
  padding:11px 0;
  border-bottom:1px solid var(--border-2)
}

.app-shell .crm-proposal-preview-layout dl>div:last-child{
  border:0
}

.app-shell .crm-proposal-preview-layout dt{
  color:var(--text-3);
  font-size:9px;
  font-weight:850;
  text-transform:uppercase
}

.app-shell .crm-proposal-preview-layout dd{
  overflow:hidden;
  margin:3px 0 0;
  color:var(--text-2);
  font-size:11px;
  font-weight:700;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .crm-proposal-preview-files{
  padding:13px;
  border-top:1px solid var(--border-2);
  background:var(--surface-2)
}

.app-shell .crm-proposal-preview-files>strong{
  display:flex;
  align-items:center;
  gap:6px;
  margin-bottom:8px;
  color:var(--text-2);
  font-size:10.5px
}

.app-shell .crm-proposal-paper{
  overflow:hidden
}

.app-shell .crm-proposal-paper>header{
  padding:17px 20px;
  border-bottom:1px solid var(--border-2);
  background:linear-gradient(110deg,var(--surface-2),var(--surface))
}

.app-shell .crm-proposal-paper h2{
  margin:5px 0 0;
  color:var(--text);
  font-size:17px;
  font-weight:850
}

.app-shell .crm-proposal-paper>article{
  min-height:420px;
  padding:24px;
  color:var(--text-2);
  font-size:13px;
  line-height:1.7
}

.app-shell .crm-taxonomy-guide{
  display:grid;
  grid-template-columns:42px minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
  padding:13px 15px;
  border:1px solid color-mix(in srgb,var(--brand) 18%,var(--border));
  border-radius:12px;
  background:linear-gradient(110deg,color-mix(in srgb,var(--brand-weak) 62%,var(--surface)) 0%,var(--surface) 74%);
  box-shadow:var(--shadow-sm)
}

.app-shell .crm-taxonomy-guide>span{
  display:grid;
  width:42px;
  height:42px;
  place-items:center;
  border-radius:11px;
  background:var(--surface);
  color:var(--brand-strong);
  box-shadow:var(--shadow-sm)
}

.app-shell .crm-taxonomy-guide small{
  display:block;
  color:var(--brand-strong);
  font-size:8.5px;
  font-weight:850;
  letter-spacing:.6px;
  text-transform:uppercase
}

.app-shell .crm-taxonomy-guide strong{
  display:block;
  margin-top:2px;
  color:var(--text);
  font-size:12.5px
}

.app-shell .crm-taxonomy-guide p{
  margin:2px 0 0;
  color:var(--text-3);
  font-size:10px
}

.app-shell .crm-taxonomy-guide-note{
  display:flex;
  align-items:center;
  gap:7px;
  padding:8px 10px;
  border:1px solid var(--border-2);
  border-radius:9px;
  background:var(--surface);
  color:var(--text-3);
  font-size:9.5px
}

.app-shell .crm-taxonomy-guide-note svg{
  color:var(--brand-strong)
}

.app-shell .crm-taxonomy-page .taxonomies-list-card{
  margin-top:0
}

.app-shell .crm-taxonomy-page .taxonomy-table tbody td{
  height:58px
}

.app-shell .crm-taxonomy-page .taxonomy-identity strong{
  font-size:12.5px
}

.app-shell .crm-taxonomy-page .taxonomy-row-actions .act{
  width:32px;
  height:32px
}

@media(max-width:780px){
  .app-shell .crm-proposal-template-workspace>header,.app-shell .crm-proposal-form-footer{
    align-items:flex-start;
    flex-direction:column
  }

  .app-shell .crm-proposal-template-summary,.app-shell .crm-proposal-preview-layout{
    grid-template-columns:1fr
  }

  .app-shell .crm-proposal-template-meta{
    border-right:0;
    border-bottom:1px solid var(--border-2)
  }

  .app-shell .crm-proposal-fields,.app-shell .crm-proposal-recipient,.app-shell .crm-proposal-delivery-grid{
    grid-template-columns:1fr
  }

  .app-shell .crm-proposal-subject{
    grid-column:auto
  }

  .app-shell .crm-proposal-delivery-grid>div+div{
    border-top:1px solid var(--border-2);
    border-left:0
  }

  .app-shell .crm-taxonomy-guide{
    grid-template-columns:42px minmax(0,1fr)
  }

  .app-shell .crm-taxonomy-guide-note{
    grid-column:1/-1
  }

  .app-shell .crm-proposal-form-footer>div{
    width:100%;
    justify-content:flex-end
  }
}

/* ==========================================================================
   Asset Management
   The dashboard carried ~55 lines of inline \3c style> with hard-coded greys and
   gradient KPI icons, so it ignored the theme entirely.
   ========================================================================== */

.app-shell .asset-kpi-grid{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:12px;
  margin-top:16px
}

.app-shell .asset-kpi{
  display:flex;
  flex-direction:column;
  padding:14px 15px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

.app-shell .asset-kpi-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:8px
}

.app-shell .asset-kpi-label{
  margin:0;
  color:var(--text-3);
  font-size:10px;
  font-weight:800;
  letter-spacing:.05em;
  line-height:1.35;
  text-transform:uppercase
}

.app-shell .asset-kpi-icon{
  display:grid;
  width:32px;
  height:32px;
  flex:0 0 32px;
  place-items:center;
  border:1px solid color-mix(in srgb,var(--kpi-tone) 26%,transparent);
  border-radius:10px;
  background:color-mix(in srgb,var(--kpi-tone) 12%,var(--surface));
  color:var(--kpi-tone)
}

.app-shell .asset-kpi-value{
  margin:12px 0 0;
  color:var(--text);
  font-size:22px;
  font-weight:850;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.5px;
  line-height:1.1
}

.app-shell .asset-kpi-sub{
  margin:3px 0 0;
  color:var(--text-3);
  font-size:11px
}

.app-shell .asset-chart-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin-top:14px
}

.app-shell .asset-chart-grid.is-wide-first{
  grid-template-columns:minmax(0,2fr) minmax(0,1fr)
}

.app-shell .asset-chart-grid.is-wide-last{
  grid-template-columns:minmax(0,1fr) minmax(0,2fr)
}

.app-shell .asset-card{
  display:flex;
  min-width:0;
  flex-direction:column;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

.app-shell .asset-card>.section-head{
  border-radius:14px 14px 0 0
}

.app-shell .asset-card-body{
  padding:12px 14px 14px
}

.app-shell .asset-card-link{
  display:inline-flex;
  align-items:center;
  gap:4px;
  color:var(--brand-strong);
  font-size:11px;
  font-weight:800;
  text-decoration:none;
  white-space:nowrap
}

.app-shell .asset-card-link:hover{
  text-decoration:underline
}

.app-shell .asset-chart{
  min-height:300px
}

.app-shell .asset-chart.is-short{
  min-height:230px
}

.app-shell .asset-chart.is-tall{
  min-height:330px
}

.app-shell .asset-split{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  margin-top:6px;
  border-top:1px solid var(--border-2)
}

.app-shell .asset-split>div{
  padding:11px 6px;
  text-align:center
}

.app-shell .asset-split>div+div{
  border-left:1px solid var(--border-2)
}

.app-shell .asset-split strong{
  display:block;
  color:var(--text);
  font-size:17px;
  font-weight:850;
  font-variant-numeric:tabular-nums
}

.app-shell .asset-split span{
  color:var(--text-3);
  font-size:11px
}

.app-shell .asset-table-wrap{
  min-width:0;
  overflow-x:auto
}

.app-shell .asset-table-wrap.is-scroll{
  max-height:322px;
  overflow-y:auto
}

.app-shell .asset-table{
  width:100%;
  border-collapse:collapse;
  font-size:12.5px
}

.app-shell .asset-table th{
  padding:9px 14px;
  border-bottom:1px solid var(--border-2);
  background:var(--surface-2);
  color:var(--text-3);
  font-size:10px;
  font-weight:800;
  letter-spacing:.05em;
  text-align:left;
  text-transform:uppercase;
  white-space:nowrap
}

.app-shell .asset-table td{
  padding:10px 14px;
  border-bottom:1px solid var(--border-2);
  color:var(--text-2);
  vertical-align:middle
}

.app-shell .asset-table tbody tr:last-child td{
  border-bottom:0
}

.app-shell .asset-table tbody tr:hover td{
  background:var(--surface-2)
}

.app-shell .asset-table td strong{
  display:block;
  color:var(--text);
  font-weight:750
}

.app-shell .asset-table td small{
  display:block;
  margin-top:2px;
  color:var(--text-3);
  font-size:10.5px
}

.app-shell .asset-table .is-numeric{
  font-variant-numeric:tabular-nums;
  text-align:right
}

.app-shell .asset-table-empty{
  padding:26px 14px!important;
  color:var(--text-3);
  text-align:center
}

.app-shell .asset-hero{
  display:flex;
  align-items:center;
  gap:12px;
  padding:18px;
  border:1px solid color-mix(in srgb,var(--brand) 28%,transparent);
  border-radius:14px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--brand-weak) 85%,var(--surface)),var(--surface))
}

.app-shell .asset-hero-icon{
  display:grid;
  width:46px;
  height:46px;
  flex:0 0 46px;
  place-items:center;
  border-radius:13px;
  background:var(--surface);
  color:var(--brand-strong);
  box-shadow:var(--shadow-sm)
}

.app-shell .asset-hero p{
  margin:0;
  color:var(--text-2);
  font-size:12px;
  font-weight:700
}

.app-shell .asset-settings-panes{
  padding:14px 16px 4px
}

.app-shell .asset-settings-page .settings-fieldset:first-of-type{
  padding-top:10px
}

.app-shell .asset-flag{
  display:inline-grid;
  width:22px;
  height:22px;
  place-items:center;
  border-radius:7px
}

.app-shell .asset-flag>svg{
  width:15px;
  height:15px
}

.app-shell .asset-flag.is-yes{
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .asset-flag.is-no{
  background:var(--danger-weak);
  color:var(--danger)
}

/* 42px, not 40px: the selects beside it in .filter-grid are 42px tall, and the two-pixel
   difference showed as the checkbox row sitting high against the last dropdown. */

.app-shell .asset-filter-check{
  display:inline-flex;
  height:40px;
  align-items:center;
  gap:8px;
  margin:0;
  color:var(--text-2);
  font-size:12.5px;
  font-weight:650;
  cursor:pointer
}

.app-shell .asset-filter-check input{
  width:16px;
  height:16px;
  flex:0 0 16px;
  margin:0;
  accent-color:var(--brand);
  cursor:pointer
}

/* Boxed variant, for a checkbox that shares a .filter-grid row with select controls. The selects
   are 42px framed boxes, so a bare checkbox in the last cell read as an unfinished control rather
   than a filter, and lost its baseline entirely once the grid stacked. Same height, same border,
   same radius. The plain variant above stays for the checkboxes that sit in button rows and
   wrapping option groups, where a full-width frame would be wrong. */

.app-shell .asset-filter-check.is-boxed{
  display:flex;
  width:100%;
  height:42px;
  padding:0 11px;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface-2);
  transition:border-color .15s,background .15s,color .15s
}

.app-shell .asset-filter-check.is-boxed:hover{
  border-color:var(--text-3);
  color:var(--text)
}

.app-shell .asset-filter-check.is-boxed:focus-within{
  border-color:var(--brand);
  background:var(--surface);
  box-shadow:0 0 0 3px var(--brand-weak)
}

.app-shell .asset-filter-check.is-boxed>span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .asset-filter-check.is-boxed:has(input:checked){
  border-color:color-mix(in srgb,var(--brand) 42%,var(--border));
  background:var(--brand-weak);
  color:var(--brand-strong)
}

/* Asset listing identity cell: image + name + labelled code/category in one column. */

.app-shell .asset-cell{
  display:flex;
  align-items:flex-start;
  gap:10px;
  min-width:240px
}

.app-shell .asset-cell__thumb{
  flex:0 0 auto
}

.app-shell .asset-cell__thumb--empty{
  display:block;
  width:42px;
  height:42px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface-2)
}

.app-shell .asset-cell__body{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0
}

.app-shell .asset-cell__name{
  color:var(--text);
  font-size:13.5px;
  font-weight:750;
  line-height:1.3
}

.app-shell .asset-cell__row{
  display:flex;
  align-items:baseline;
  gap:6px;
  font-size:12px;
  line-height:1.35
}

.app-shell .asset-cell__label{
  flex:0 0 auto;
  color:var(--text-3);
  font-weight:500
}

.app-shell .asset-cell__label::after{
  content:':'
}

.app-shell .asset-cell__value{
  color:var(--text-2);
  font-weight:500
}

.app-shell .asset-cell__row.is-muted{
  color:var(--text-3);
  gap:6px
}

.app-shell .asset-cell__row .asset-flag{
  margin-right:2px
}

.app-shell .asset-hero strong{
  display:block;
  margin-top:3px;
  color:var(--text);
  font-size:27px;
  font-weight:850;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.6px;
  line-height:1.1
}

@media(max-width:1400px){
  .app-shell .asset-kpi-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))
  }
}

@media(max-width:1100px){
  .app-shell .asset-chart-grid,.app-shell .asset-chart-grid.is-wide-first,.app-shell .asset-chart-grid.is-wide-last{
    grid-template-columns:minmax(0,1fr)
  }
}

@media(max-width:760px){
  .app-shell .asset-kpi-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}

@media(max-width:460px){
  .app-shell .asset-kpi-grid{
    grid-template-columns:minmax(0,1fr)
  }
}

/* Report index: the Reports rail entry opens here because there are far more reports
   than a module bar can hold — around sixty on a full install, which is a list you search
   rather than a list you read. */

.app-shell .report-search{
  position:sticky;
  top:0;
  z-index:5;
  display:flex;
  align-items:center;
  gap:9px;
  margin:16px 0 12px;
  padding:9px 12px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface);
  box-shadow:0 5px 18px -15px rgba(16,32,24,.42)
}

.app-shell .report-search>span{
  display:grid;
  width:30px;
  height:30px;
  flex:none;
  place-items:center;
  border-radius:9px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .report-search .finput{
  height:38px;
  flex:1;
  min-width:0;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:var(--text);
  font-size:13.5px
}

.app-shell .report-search .finput::-webkit-search-cancel-button{
  display:none
}

.app-shell .report-search>button{
  display:grid;
  width:30px;
  height:30px;
  flex:none;
  place-items:center;
  border:0;
  border-radius:8px;
  background:var(--surface-2);
  color:var(--text-3);
  cursor:pointer
}

.app-shell .report-search>button:hover{
  background:var(--danger-weak);
  color:var(--danger)
}

.app-shell .report-search>b{
  flex:none;
  color:var(--text-3);
  font-size:11px;
  font-weight:800;
  white-space:nowrap
}

.app-shell .report-jump{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin-bottom:6px
}

.app-shell .report-jump>a{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 11px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--surface);
  color:var(--text-2);
  font-size:11.5px;
  font-weight:700;
  text-decoration:none;
  transition:border-color .14s,background .14s,color .14s
}

.app-shell .report-jump>a:hover{
  border-color:color-mix(in srgb,var(--brand) 34%,var(--border));
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .report-jump em{
  color:var(--text-3);
  font-size:10px;
  font-style:normal;
  font-weight:800
}

.app-shell .report-jump>a:hover em{
  color:var(--brand-strong)
}

.app-shell .report-area{
  margin-top:14px;
  scroll-margin-top:80px
}

.app-shell .report-area>header{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border:1px solid var(--border);
  border-bottom:0;
  border-radius:14px 14px 0 0;
  background:linear-gradient(90deg,#f9fbfa,var(--surface))
}

.app-shell .report-area>header>span{
  display:grid;
  width:32px;
  height:32px;
  flex:none;
  place-items:center;
  border-radius:9px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .report-area>header>div{
  min-width:0;
  flex:1
}

.app-shell .report-area h2{
  margin:0;
  color:var(--text);
  font-size:14.5px;
  font-weight:830
}

.app-shell .report-area header p{
  margin:2px 0 0;
  color:var(--text-3);
  font-size:11.5px
}

.app-shell .report-area>header>b{
  flex:none;
  min-width:26px;
  padding:4px 9px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--surface);
  color:var(--text-3);
  font-size:11px;
  font-weight:800;
  text-align:center
}

/* Three fixed columns, so a group with two reports in it left the third of the row empty —
   a blank cell with a hairline down the middle of it. The tracks fit what is there. */

.app-shell .report-area-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
  gap:1px;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:0 0 14px 14px;
  background:var(--border-2)
}

.app-shell .report-card{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:13px 15px;
  background:var(--surface);
  color:var(--text-2);
  text-decoration:none;
  transition:background .14s,color .14s
}

.app-shell .report-card.is-hidden{
  display:none
}

.app-shell .report-card-icon{
  display:grid;
  width:32px;
  height:32px;
  flex:0 0 32px;
  place-items:center;
  border-radius:9px;
  background:var(--surface-2);
  color:var(--text-3);
  transition:background .14s,color .14s
}

.app-shell .report-card-body{
  display:block;
  min-width:0;
  flex:1
}

.app-shell .report-card-body strong{
  display:block;
  color:var(--text);
  font-size:12.8px;
  font-weight:760;
  line-height:1.35
}

/* The title alone assumes you know what an "ABC Analysis" or a "Register Report" holds. */

.app-shell .report-card-body small{
  display:block;
  margin-top:3px;
  color:var(--text-3);
  font-size:11px;
  line-height:1.45
}

.app-shell .report-card-go{
  flex:0 0 auto;
  margin-top:6px;
  color:var(--text-3);
  opacity:0;
  transition:opacity .14s
}

.app-shell .report-card:hover{
  background:var(--surface-2)
}

.app-shell .report-card:hover .report-card-body strong{
  color:var(--brand-strong)
}

.app-shell .report-card:hover .report-card-icon{
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .report-card:hover .report-card-go{
  opacity:1;
  color:var(--brand-strong)
}

.app-shell .report-card:focus-visible{
  outline:2px solid color-mix(in srgb,var(--brand) 50%,transparent);
  outline-offset:-2px
}

.app-shell .report-index-empty,.app-shell .report-no-match{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:16px;
  padding:24px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface)
}

.app-shell .report-index-empty>span,.app-shell .report-no-match>span{
  display:grid;
  width:42px;
  height:42px;
  flex:0 0 42px;
  place-items:center;
  border-radius:12px;
  background:var(--surface-2);
  color:var(--text-3)
}

.app-shell .report-index-empty strong,.app-shell .report-no-match strong{
  color:var(--text);
  font-size:14px;
  font-weight:800
}

.app-shell .report-index-empty p,.app-shell .report-no-match p{
  margin:2px 0 0;
  color:var(--text-3);
  font-size:12.5px
}

@media (max-width:640px){
  .app-shell .report-search{
    flex-wrap:wrap
  }

  .app-shell .report-search>b{
    width:100%;
    text-align:right
  }

  .app-shell .report-jump{
    overflow-x:auto;
    flex-wrap:nowrap;
    padding-bottom:4px
  }

  .app-shell .report-jump>a{
    white-space:nowrap
  }
}

/* Add / edit asset dialog. Bootstrap's col-md-4 grid does not lay out on this stack, so
   the original form rendered as one very long column of full-width fields. */

.app-shell .asset-dialog-form,body.app-ui .asset-dialog-form{
  width:min(980px,calc(100vw - 32px))
}

body.app-ui .asset-dialog-form .settings-fieldset{
  padding:14px 0 4px;
  border-top:1px solid var(--border-2)
}

body.app-ui .asset-dialog-form .settings-fieldset:first-of-type{
  padding-top:0;
  border-top:0
}

body.app-ui .asset-dialog-form .settings-fieldset>header{
  display:flex;
  gap:10px;
  align-items:flex-start;
  margin-bottom:12px
}

body.app-ui .asset-dialog-form .settings-fieldset>header>div:not(.section-icon){
  flex:1;
  min-width:0
}

body.app-ui .asset-dialog-form .settings-fieldset>header h3{
  margin:0;
  color:var(--text);
  font-size:13.5px;
  font-weight:800
}

body.app-ui .asset-dialog-form .settings-fieldset>header p{
  margin:2px 0 0;
  color:var(--text-3);
  font-size:11.5px;
  line-height:1.5
}

body.app-ui .asset-dialog-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px
}

body.app-ui .asset-dialog-form .help-block{
  margin:5px 0 0;
  color:var(--text-3);
  font-size:11px;
  line-height:1.45
}

body.app-ui .asset-dialog-form .is-wide{
  margin-top:12px
}

body.app-ui .asset-dialog-check{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin:12px 0 0;
  color:var(--text-2);
  font-size:12.5px;
  font-weight:650;
  cursor:pointer
}

body.app-ui .asset-dialog-check input{
  width:16px;
  height:16px;
  margin:0;
  accent-color:var(--brand);
  cursor:pointer
}

body.app-ui .asset-dialog-check>span{
  display:inline-flex;
  align-items:center;
  gap:6px
}

body.app-ui .asset-warranty-add{
  height:32px;
  padding:0 11px;
  font-size:11.5px
}

body.app-ui .asset-warranty-table{
  width:100%;
  border-collapse:collapse
}

body.app-ui .asset-warranty-table th{
  padding:8px 10px;
  border-bottom:1px solid var(--border-2);
  background:var(--surface-2);
  color:var(--text-3);
  font-size:10px;
  font-weight:800;
  letter-spacing:.05em;
  text-align:left;
  text-transform:uppercase;
  white-space:nowrap
}

body.app-ui .asset-warranty-table th:first-child{
  border-radius:9px 0 0 0
}

body.app-ui .asset-warranty-table th:last-child{
  border-radius:0 9px 0 0
}

body.app-ui .asset-warranty-table td{
  padding:8px 10px;
  border-bottom:1px solid var(--border-2);
  vertical-align:top
}

body.app-ui .asset-warranty-table tbody tr:last-child td{
  border-bottom:0
}

body.app-ui .asset-warranty-table .form-control{
  min-width:120px
}

body.app-ui .asset-warranty-table textarea.form-control{
  min-width:180px
}

body.app-ui .asset-warranty-remove-cell{
  width:44px
}

@media(max-width:900px){
  body.app-ui .asset-dialog-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}

@media(max-width:620px){
  body.app-ui .asset-dialog-grid{
    grid-template-columns:minmax(0,1fr)
  }
}

/* Send-for-maintenance dialog. The attachment row used to be a raw file input rendered as
   a green Browse bar that dominated the form. */

.app-shell .asset-maintenance-dialog,body.app-ui .asset-maintenance-dialog{
  width:min(720px,calc(100vw - 32px))
}

body.app-ui .asset-maintenance-summary{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:16px;
  padding:12px 14px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface-2)
}

body.app-ui .asset-maintenance-summary-icon{
  display:grid;
  width:40px;
  height:40px;
  flex:0 0 40px;
  place-items:center;
  border-radius:11px;
  background:var(--surface);
  color:var(--brand-strong);
  box-shadow:var(--shadow-sm)
}

body.app-ui .asset-maintenance-summary>div{
  min-width:0;
  flex:1
}

body.app-ui .asset-maintenance-summary strong{
  display:block;
  color:var(--text);
  font-size:13.5px;
  font-weight:800;
  line-height:1.3
}

body.app-ui .asset-maintenance-summary small{
  display:block;
  margin-top:2px;
  color:var(--text-3);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px
}

body.app-ui .asset-maintenance-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px
}

body.app-ui .asset-maintenance-dialog .asset-maintenance-grid:has(>*:nth-child(3)){
  grid-template-columns:repeat(3,minmax(0,1fr))
}

body.app-ui .asset-maintenance-field{
  margin-top:12px
}

body.app-ui .asset-maintenance-dialog .help-block{
  margin:5px 0 0;
  color:var(--text-3);
  font-size:11px;
  line-height:1.45
}

/* The picker is the only control in its row here, so it can afford to be a proper drop
   zone rather than the compact strip used inside dense forms. */

body.app-ui .asset-maintenance-dialog .file-upload-picker{
  min-height:76px;
  grid-template-columns:40px minmax(0,1fr) auto;
  gap:12px;
  padding:12px 14px;
  border-radius:12px
}

body.app-ui .asset-maintenance-dialog .file-upload-icon{
  width:40px;
  height:40px;
  border-radius:11px
}

body.app-ui .asset-maintenance-dialog .file-upload-copy strong{
  font-size:12.5px
}

body.app-ui .asset-maintenance-dialog .file-upload-copy small{
  font-size:11px
}

body.app-ui .asset-maintenance-dialog .file-upload-action{
  min-height:34px;
  padding:0 13px;
  font-size:11.5px
}

body.app-ui .asset-maintenance-dialog .file-upload-help{
  margin-top:6px;
  font-size:11px
}

body.app-ui .asset-maintenance-media{
  margin-top:12px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface-2)
}

body.app-ui .asset-maintenance-media table{
  width:100%;
  font-size:12.5px
}

/* Four fields read as 2×2, not 3+1 with a hole beside the last one. The three-column rule
   above still applies to the create dialog, which has three. */

body.app-ui .asset-maintenance-dialog .asset-maintenance-grid:has(>*:nth-child(4)){
  grid-template-columns:repeat(2,minmax(0,1fr))
}

/* The reminder plan makes this dialog several screens long, so the title and the Update
   button have to stay put — otherwise saving means scrolling back past every reminder row.
   Same shell the Essentials To Do dialog uses. */

body.app-ui .asset-maintenance-dialog{
  margin:16px auto
}

/* 88px = the overlay's own 28px gutter top and bottom plus the dialog's 16px margin either
   side of it. Measured against the viewport, a smaller number means the pinned footer is
   pushed below the fold on a short window. */

body.app-ui .asset-maintenance-dialog .repair-form-dialog-content{
  max-height:calc(100dvh - 68px);
  overflow:hidden
}

body.app-ui .asset-maintenance-dialog form{
  display:flex;
  max-height:inherit;
  flex-direction:column;
  min-height:0
}

body.app-ui .asset-maintenance-dialog .repair-form-dialog-header,body.app-ui .asset-maintenance-dialog .repair-form-dialog-footer{
  flex:none
}

body.app-ui .asset-maintenance-dialog .repair-form-dialog-body{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch
}

@media(max-width:620px){
  body.app-ui .asset-maintenance-grid,body.app-ui .asset-maintenance-dialog .asset-maintenance-grid:has(>*:nth-child(3)),body.app-ui .asset-maintenance-dialog .asset-maintenance-grid:has(>*:nth-child(4)){
    grid-template-columns:minmax(0,1fr)
  }
}

/* Maintenance Reminder plan (.amr-* markup lives in asset_maintenance/_reminder_fields).
   The plan is the densest thing in the dialog, so it is what has to give at phone width. */

@media(max-width:620px){
  body.app-ui .asset-maintenance-dialog .repair-form-dialog-content{
    max-height:calc(100dvh - 16px);
    border-radius:13px
  }

  body.app-ui .asset-maintenance-dialog .repair-form-dialog-header{
    min-height:60px;
    padding:10px 12px;
    border-radius:13px 13px 0 0
  }

  body.app-ui .asset-maintenance-dialog .repair-form-dialog-heading>span{
    width:36px;
    height:36px;
    flex-basis:36px
  }

  body.app-ui .asset-maintenance-dialog .repair-form-dialog-heading h4{
    font-size:14px
  }

  body.app-ui .asset-maintenance-dialog .repair-form-dialog-body{
    padding:10px 12px 12px
  }

  body.app-ui .asset-maintenance-dialog .repair-form-dialog-footer{
    padding:10px 12px
  }

  body.app-ui .asset-maintenance-summary{
    margin-bottom:12px;
    padding:10px 12px
  }

  body.app-ui .asset-maintenance-summary-icon{
    width:34px;
    height:34px;
    flex-basis:34px
  }

  body.app-ui .asset-maintenance-dialog .amr-card{
    padding:12px
  }

  body.app-ui .asset-maintenance-dialog .amr-sec{
    padding:11px
  }

  body.app-ui .asset-maintenance-dialog .amr-head-text strong{
    font-size:13px
  }

  body.app-ui .asset-maintenance-dialog .amr-head-text small{
    font-size:10.5px
  }

  body.app-ui .asset-maintenance-dialog .amr-sec-title{
    font-size:10.5px
  }

  body.app-ui .asset-maintenance-dialog .amr-label{
    margin-top:12px;
    font-size:10px
  }

  body.app-ui .asset-maintenance-dialog .amr-chip span{
    padding:6px 11px;
    font-size:11.5px
  }

  body.app-ui .asset-maintenance-dialog .amr-recipient,body.app-ui .asset-maintenance-dialog .amr-sent span,body.app-ui .asset-maintenance-dialog .amr-warn{
    font-size:10.5px
  }

  body.app-ui .asset-maintenance-dialog .amr-empty,body.app-ui .asset-maintenance-dialog .amr-row-hint{
    font-size:11.5px
  }

  body.app-ui .asset-maintenance-dialog .amr-row input.amr-datepicker{
    max-width:none
  }

  /* Three across is one word per button at this width. Add and Suggest share a row, the
     daily control takes its own, and Clear all sits under them where it cannot be hit by
     accident while reaching for Add. */

  body.app-ui .asset-maintenance-dialog .amr-actions{
    gap:7px
  }

  body.app-ui .asset-maintenance-dialog .amr-actions .amr-btn{
    flex:1 1 calc(50% - 4px);
    font-size:11.5px
  }

  body.app-ui .asset-maintenance-dialog .amr-daily{
    width:100%;
    font-size:11.5px
  }

  body.app-ui .asset-maintenance-dialog .amr-daily button{
    justify-content:flex-start;
    font-size:11.5px
  }

  body.app-ui .asset-maintenance-dialog .amr-daily input[type=time]{
    font-size:11.5px
  }

  body.app-ui .asset-maintenance-dialog .amr-clear{
    flex:1 1 100%;
    margin-left:0
  }

  body.app-ui .asset-maintenance-dialog .amr-preview{
    grid-template-columns:minmax(0,1fr)
  }

  body.app-ui .asset-maintenance-dialog .amr-preview-to{
    font-size:11.5px
  }

  body.app-ui .asset-maintenance-dialog .amr-bubble-body{
    font-size:12px;
    line-height:1.55
  }
}

/* The shared dialog stacks its footer buttons full-width below 680px. In a footer that is
   now pinned, two stacked buttons take a fifth of a phone screen away from the form. */

@media(max-width:680px){
  body.app-ui .asset-maintenance-dialog .repair-form-dialog-footer{
    align-items:center;
    flex-direction:row
  }

  body.app-ui .asset-maintenance-dialog .repair-form-dialog-footer>*{
    width:auto
  }
}

/* Allocate asset dialog. */

.app-shell .asset-allocation-dialog,body.app-ui .asset-allocation-dialog{
  width:min(860px,calc(100vw - 32px))
}

body.app-ui .asset-allocation-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px
}

body.app-ui .asset-allocation-field{
  margin-top:12px
}

body.app-ui .asset-allocation-dialog .help-block{
  margin:5px 0 0;
  color:var(--text-3);
  font-size:11px;
  line-height:1.45
}

/* Two submits sit in this footer, so the secondary one has to read as secondary. */

body.app-ui .asset-allocation-dialog .repair-form-dialog-footer{
  gap:8px
}

body.app-ui .asset-allocation-dialog .repair-form-dialog-footer>.btn-ghost:first-child{
  margin-right:auto
}

@media(max-width:820px){
  body.app-ui .asset-allocation-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}

@media(max-width:560px){
  body.app-ui .asset-allocation-grid{
    grid-template-columns:minmax(0,1fr)
  }
}

/* Asset settings — prefixes. Four inputs holding two or three characters used to stretch
   the full width of the page, with the tab heading repeated as a fieldset heading above
   them. Each prefix is now a card showing what the next code will look like. */

.app-shell .asset-prefix-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  padding-top:4px
}

.app-shell .asset-prefix-card{
  display:flex;
  gap:11px;
  padding:14px;
  border:1px solid var(--border);
  border-radius:13px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

.app-shell .asset-prefix-icon{
  display:grid;
  width:34px;
  height:34px;
  flex:0 0 34px;
  place-items:center;
  border-radius:10px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .asset-prefix-body{
  min-width:0;
  flex:1
}

.app-shell .asset-prefix-body>label{
  display:block;
  margin:0;
  color:var(--text);
  font-size:12.5px;
  font-weight:800
}

.app-shell .asset-prefix-applies{
  margin:2px 0 0;
  color:var(--text-3);
  font-size:11px
}

.app-shell .asset-prefix-input{
  width:100%;
  max-width:160px;
  margin-top:9px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:13px;
  letter-spacing:.04em;
  text-transform:uppercase
}

.app-shell .asset-prefix-preview{
  margin:8px 0 0;
  color:var(--text-3);
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase
}

.app-shell .asset-prefix-preview code{
  margin-left:5px;
  padding:2px 7px;
  border:1px solid var(--border);
  border-radius:6px;
  background:var(--surface-2);
  color:var(--text-2);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px;
  letter-spacing:0;
  text-transform:none
}

@media(max-width:1200px){
  .app-shell .asset-prefix-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}

@media(max-width:640px){
  .app-shell .asset-prefix-grid{
    grid-template-columns:minmax(0,1fr)
  }
}

/* Inventory (stock counts). */

.app-shell .inventory-table-card td small{
  display:block;
  margin-top:2px;
  color:var(--text-3);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:10.5px
}

.app-shell .inventory-form-card{
  margin-top:14px
}

.app-shell .inventory-form-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  padding:14px
}

.app-shell .inventory-form-grid input[type=date]{
  width:100%
}

@media(max-width:820px){
  .app-shell .inventory-form-grid{
    grid-template-columns:minmax(0,1fr)
  }
}

/* Installment. */

.app-shell .installment-customer-grid{
  display:grid;
  grid-template-columns:minmax(0,2fr) minmax(0,1fr);
  gap:12px;
  padding:14px
}

.app-shell .installment-balance-due{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-variant-numeric:tabular-nums;
  text-align:right
}

.app-shell .installment-table-card td small{
  display:block;
  margin-top:2px;
  color:var(--text-3);
  font-size:10.5px
}

@media(max-width:760px){
  .app-shell .installment-customer-grid{
    grid-template-columns:minmax(0,1fr)
  }
}

/* Accounting. */

.app-shell .accounting-overview-body{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,2fr);
  gap:14px;
  padding:14px
}

.app-shell .accounting-overview-table table{
  width:100%
}

.app-shell .accounting-chart-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin-top:14px
}

.app-shell .accounting-chart-body{
  padding:14px
}

.app-shell .accounting-card-body{
  padding:14px
}

/* Accounting action cells hold bare icon buttons rather than a wrapper element. */

.app-shell .accounting-page table.dataTable td>.act,.app-shell table.dataTable td>a.act{
  display:inline-flex;
  margin-right:4px
}

.app-shell .act.is-warning{
  border-color:color-mix(in srgb,var(--warn) 30%,transparent);
  background:var(--warn-weak);
  color:var(--warn)
}

/* Accounting dialogs keep their Bootstrap row/col markup inside; map it onto a grid so
   the fields lay out instead of stacking full width. */

.app-shell .accounting-dialog,body.app-ui .accounting-dialog{
  width:min(720px,calc(100vw - 32px))
}

body.app-ui .accounting-dialog .row{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:12px;
  margin:0
}

body.app-ui .accounting-dialog .row>[class*="col-"]{
  width:auto;
  min-width:0;
  padding:0;
  float:none;
  grid-column:span 12
}

body.app-ui .accounting-dialog .row>[class*="col-md-3"],body.app-ui .accounting-dialog .row>[class*="col-sm-3"]{
  grid-column:span 3
}

body.app-ui .accounting-dialog .row>[class*="col-md-4"],body.app-ui .accounting-dialog .row>[class*="col-sm-4"]{
  grid-column:span 4
}

body.app-ui .accounting-dialog .row>[class*="col-md-6"],body.app-ui .accounting-dialog .row>[class*="col-sm-6"]{
  grid-column:span 6
}

body.app-ui .accounting-dialog .form-group{
  margin:0 0 12px
}

body.app-ui .accounting-dialog .form-group>label{
  display:inline-block;
  margin:0 5px 6px 0;
  color:var(--text-2);
  font-size:12.5px;
  font-weight:750
}

@media(max-width:640px){
  body.app-ui .accounting-dialog .row>[class*="col-"]{
    grid-column:span 12
  }
}

/* Tree / tabular switch in the page head. */

.app-shell .accounting-view-toggle{
  display:inline-flex;
  padding:3px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface-2);
  gap:2px
}

.app-shell .accounting-view-toggle>.btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin:0;
  padding:6px 11px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:var(--text-2);
  font-size:12px;
  font-weight:700;
  cursor:pointer
}

.app-shell .accounting-view-toggle>.btn.active{
  background:var(--text);
  color:var(--surface)
}

.app-shell .accounting-view-toggle input{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0
}

@media(max-width:1100px){
  .app-shell .accounting-overview-body,.app-shell .accounting-chart-grid{
    grid-template-columns:minmax(0,1fr)
  }
}

/* ==========================================================================
   Font Awesome bridge. This stack loads no icon font, so `<i class="fa...">`
   in un-migrated markup renders as an empty box. These draw the glyph as a
   mask instead, so it inherits currentColor and sizes with the text.
   ========================================================================== */

.app-shell i.fa:not(.fa-info-circle),.app-shell i.fas:not(.fa-info-circle),.app-shell i.far,.app-shell i.fab,.app-shell span.fa:not(.fa-info-circle),.app-shell span.fas:not(.fa-info-circle),.app-shell span.far,.app-shell span.fab{
  display:inline-block;
  width:1em;
  height:1em;
  vertical-align:-.125em;
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-size:contain;
  mask-size:contain
}

.app-shell i.fa-list-ul,.app-shell span.fa-list-ul{
  background:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%206h13M8%2012h13M8%2018h13M3%206h.01M3%2012h.01M3%2018h.01%22%2F%3E%3C%2Fsvg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%206h13M8%2012h13M8%2018h13M3%206h.01M3%2012h.01M3%2018h.01%22%2F%3E%3C%2Fsvg%3E")
}

.app-shell i.fa-table,.app-shell span.fa-table{
  background:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20width%3D%2218%22%20height%3D%2218%22%20x%3D%223%22%20y%3D%223%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M3%209h18M3%2015h18M9%203v18M15%203v18%22%2F%3E%3C%2Fsvg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20width%3D%2218%22%20height%3D%2218%22%20x%3D%223%22%20y%3D%223%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M3%209h18M3%2015h18M9%203v18M15%203v18%22%2F%3E%3C%2Fsvg%3E")
}

.app-shell i.fa-file-alt,.app-shell span.fa-file-alt{
  background:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M15%202H6a2%202%200%200%200-2%202v16a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V7z%22%2F%3E%3Cpath%20d%3D%22M14%202v5h6M8%2013h8M8%2017h5%22%2F%3E%3C%2Fsvg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M15%202H6a2%202%200%200%200-2%202v16a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V7z%22%2F%3E%3Cpath%20d%3D%22M14%202v5h6M8%2013h8M8%2017h5%22%2F%3E%3C%2Fsvg%3E")
}

.app-shell i.fa-edit,.app-shell span.fa-edit{
  background:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2020h9%22%2F%3E%3Cpath%20d%3D%22M16.5%203.5a2.12%202.12%200%200%201%203%203L7%2019l-4%201%201-4z%22%2F%3E%3C%2Fsvg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2020h9%22%2F%3E%3Cpath%20d%3D%22M16.5%203.5a2.12%202.12%200%200%201%203%203L7%2019l-4%201%201-4z%22%2F%3E%3C%2Fsvg%3E")
}

.app-shell i.fa-power-off,.app-shell span.fa-power-off{
  background:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%202v10%22%2F%3E%3Cpath%20d%3D%22M18.4%206.6a9%209%200%201%201-12.77.04%22%2F%3E%3C%2Fsvg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%202v10%22%2F%3E%3Cpath%20d%3D%22M18.4%206.6a9%209%200%201%201-12.77.04%22%2F%3E%3C%2Fsvg%3E")
}

.app-shell i.fa-calendar,.app-shell span.fa-calendar{
  background:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20width%3D%2218%22%20height%3D%2218%22%20x%3D%223%22%20y%3D%224%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M16%202v4M8%202v4M3%2010h18%22%2F%3E%3C%2Fsvg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20width%3D%2218%22%20height%3D%2218%22%20x%3D%223%22%20y%3D%224%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M16%202v4M8%202v4M3%2010h18%22%2F%3E%3C%2Fsvg%3E")
}

.app-shell i.fa-arrow-circle-right,.app-shell span.fa-arrow-circle-right{
  background:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22m12%2016%204-4-4-4M8%2012h8%22%2F%3E%3C%2Fsvg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22m12%2016%204-4-4-4M8%2012h8%22%2F%3E%3C%2Fsvg%3E")
}

.app-shell i.fa-arrow-circle-down,.app-shell span.fa-arrow-circle-down{
  background:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22m8%2012%204%204%204-4M12%208v8%22%2F%3E%3C%2Fsvg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22m8%2012%204%204%204-4M12%208v8%22%2F%3E%3C%2Fsvg%3E")
}

.app-shell i.fa-filter,.app-shell span.fa-filter{
  background:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M22%203H2l8%209.46V19l4%202v-8.54z%22%2F%3E%3C%2Fsvg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M22%203H2l8%209.46V19l4%202v-8.54z%22%2F%3E%3C%2Fsvg%3E")
}

.app-shell i.fa-search,.app-shell span.fa-search{
  background:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%228%22%2F%3E%3Cpath%20d%3D%22m21%2021-4.3-4.3%22%2F%3E%3C%2Fsvg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%228%22%2F%3E%3Cpath%20d%3D%22m21%2021-4.3-4.3%22%2F%3E%3C%2Fsvg%3E")
}

.app-shell i.fa-check,.app-shell span.fa-check{
  background:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%206%209%2017l-5-5%22%2F%3E%3C%2Fsvg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%206%209%2017l-5-5%22%2F%3E%3C%2Fsvg%3E")
}

.app-shell i.fa-times,.app-shell span.fa-times{
  background:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M18%206%206%2018M6%206l12%2012%22%2F%3E%3C%2Fsvg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M18%206%206%2018M6%206l12%2012%22%2F%3E%3C%2Fsvg%3E")
}

.app-shell i.fa-caret-down,.app-shell span.fa-caret-down{
  background:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m6%209%206%206%206-6%22%2F%3E%3C%2Fsvg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m6%209%206%206%206-6%22%2F%3E%3C%2Fsvg%3E")
}

.app-shell i.fa-plus,.app-shell span.fa-plus{
  background:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%205v14M5%2012h14%22%2F%3E%3C%2Fsvg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%205v14M5%2012h14%22%2F%3E%3C%2Fsvg%3E")
}

.app-shell i.fa-trash,.app-shell span.fa-trash{
  background:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%206h18M8%206V4a1%201%200%200%201%201-1h6a1%201%200%200%201%201%201v2M19%206l-1%2014a2%202%200%200%201-2%202H8a2%202%200%200%201-2-2L5%206%22%2F%3E%3C%2Fsvg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%206h18M8%206V4a1%201%200%200%201%201-1h6a1%201%200%200%201%201%201v2M19%206l-1%2014a2%202%200%200%201-2%202H8a2%202%200%200%201-2-2L5%206%22%2F%3E%3C%2Fsvg%3E")
}

/* The global ajax loader is __fa_awesome(), which emits `fa-sync fa-spin`; without
   these it renders as nothing at all on every ajax placeholder in the app. */

.app-shell i.fa-sync,.app-shell i.fa-refresh,.app-shell i.fa-spinner,.app-shell i.fa-circle-notch,.app-shell span.fa-sync,.app-shell span.fa-refresh,.app-shell span.fa-spinner,.app-shell span.fa-circle-notch{
  background:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2012a9%209%200%200%201%209-9%209.75%209.75%200%200%201%206.74%202.74L21%208%22%2F%3E%3Cpath%20d%3D%22M21%203v5h-5%22%2F%3E%3Cpath%20d%3D%22M21%2012a9%209%200%200%201-9%209%209.75%209.75%200%200%201-6.74-2.74L3%2016%22%2F%3E%3Cpath%20d%3D%22M8%2016H3v5%22%2F%3E%3C%2Fsvg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2012a9%209%200%200%201%209-9%209.75%209.75%200%200%201%206.74%202.74L21%208%22%2F%3E%3Cpath%20d%3D%22M21%203v5h-5%22%2F%3E%3Cpath%20d%3D%22M21%2012a9%209%200%200%201-9%209%209.75%209.75%200%200%201-6.74-2.74L3%2016%22%2F%3E%3Cpath%20d%3D%22M8%2016H3v5%22%2F%3E%3C%2Fsvg%3E")
}

.app-shell i.fa-spin,.app-shell span.fa-spin{
  animation:app-ui-fa-spin 1.1s linear infinite
}

@keyframes app-ui-fa-spin{
  to{
    transform:rotate(360deg)
  }
}

@media(prefers-reduced-motion:reduce){
  .app-shell i.fa-spin{
    animation-duration:2.4s
  }
}

/* Glyphs used by screens that have not been hand-converted yet. Every name below
   appears in a migrated module's markup; without a mask each one renders as nothing. */

.app-shell i.fa-calendar-check,.app-shell span.fa-calendar-check{
  background:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%202v4M16%202v4%22%2F%3E%3Crect%20width%3D%2218%22%20height%3D%2218%22%20x%3D%223%22%20y%3D%224%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M3%2010h18M9%2016l2%202%204-4%22%2F%3E%3C%2Fsvg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%202v4M16%202v4%22%2F%3E%3Crect%20width%3D%2218%22%20height%3D%2218%22%20x%3D%223%22%20y%3D%224%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M3%2010h18M9%2016l2%202%204-4%22%2F%3E%3C%2Fsvg%3E")
}

.app-shell i.fa-calendar-minus,.app-shell span.fa-calendar-minus{
  background:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%202v4M16%202v4%22%2F%3E%3Crect%20width%3D%2218%22%20height%3D%2218%22%20x%3D%223%22%20y%3D%224%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M3%2010h18M9%2016h6%22%2F%3E%3C%2Fsvg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%202v4M16%202v4%22%2F%3E%3Crect%20width%3D%2218%22%20height%3D%2218%22%20x%3D%223%22%20y%3D%224%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M3%2010h18M9%2016h6%22%2F%3E%3C%2Fsvg%3E")
}

.app-shell i.fa-arrow-alt-circle-right,.app-shell span.fa-arrow-alt-circle-right{
  background:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22m12%2016%204-4-4-4M8%2012h8%22%2F%3E%3C%2Fsvg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22m12%2016%204-4-4-4M8%2012h8%22%2F%3E%3C%2Fsvg%3E")
}

.app-shell i.fa-clock,.app-shell span.fa-clock{
  background:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22M12%206v6l4%202%22%2F%3E%3C%2Fsvg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22M12%206v6l4%202%22%2F%3E%3C%2Fsvg%3E")
}

.app-shell i.fa-close,.app-shell i.fa-window-close,.app-shell span.fa-close,.app-shell span.fa-window-close{
  background:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M18%206%206%2018M6%206l12%2012%22%2F%3E%3C%2Fsvg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M18%206%206%2018M6%206l12%2012%22%2F%3E%3C%2Fsvg%3E")
}

.app-shell i.fa-money-bill-alt,.app-shell i.fa-money,.app-shell i.fa-money-bill,.app-shell span.fa-money-bill-alt,.app-shell span.fa-money,.app-shell span.fa-money-bill{
  background:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20width%3D%2220%22%20height%3D%2212%22%20x%3D%222%22%20y%3D%226%22%20rx%3D%222%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%222%22%2F%3E%3Cpath%20d%3D%22M6%2012h.01M18%2012h.01%22%2F%3E%3C%2Fsvg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20width%3D%2220%22%20height%3D%2212%22%20x%3D%222%22%20y%3D%226%22%20rx%3D%222%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%222%22%2F%3E%3Cpath%20d%3D%22M6%2012h.01M18%2012h.01%22%2F%3E%3C%2Fsvg%3E")
}

.app-shell i.fa-user,.app-shell span.fa-user{
  background:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M19%2021v-2a4%204%200%200%200-4-4H9a4%204%200%200%200-4%204v2%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%227%22%20r%3D%224%22%2F%3E%3C%2Fsvg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M19%2021v-2a4%204%200%200%200-4-4H9a4%204%200%200%200-4%204v2%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%227%22%20r%3D%224%22%2F%3E%3C%2Fsvg%3E")
}

.app-shell i.fa-users,.app-shell span.fa-users{
  background:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M16%2021v-2a4%204%200%200%200-4-4H6a4%204%200%200%200-4%204v2%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%227%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M22%2021v-2a4%204%200%200%200-3-3.87M16%203.13a4%204%200%200%201%200%207.75%22%2F%3E%3C%2Fsvg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M16%2021v-2a4%204%200%200%200-4-4H6a4%204%200%200%200-4%204v2%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%227%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22M22%2021v-2a4%204%200%200%200-3-3.87M16%203.13a4%204%200%200%201%200%207.75%22%2F%3E%3C%2Fsvg%3E")
}

.app-shell i.fa-user-check,.app-shell span.fa-user-check{
  background:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M16%2021v-2a4%204%200%200%200-4-4H6a4%204%200%200%200-4%204v2%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%227%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22m16%2011%202%202%204-4%22%2F%3E%3C%2Fsvg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M16%2021v-2a4%204%200%200%200-4-4H6a4%204%200%200%200-4%204v2%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%227%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22m16%2011%202%202%204-4%22%2F%3E%3C%2Fsvg%3E")
}

.app-shell i.fa-user-times,.app-shell span.fa-user-times{
  background:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M16%2021v-2a4%204%200%200%200-4-4H6a4%204%200%200%200-4%204v2%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%227%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22m17%208%205%205M22%208l-5%205%22%2F%3E%3C%2Fsvg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M16%2021v-2a4%204%200%200%200-4-4H6a4%204%200%200%200-4%204v2%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%227%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22m17%208%205%205M22%208l-5%205%22%2F%3E%3C%2Fsvg%3E")
}

.app-shell i.fa-user-clock,.app-shell span.fa-user-clock{
  background:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M16%2021v-2a4%204%200%200%200-4-4H7a4%204%200%200%200-4%204v2%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%227%22%20r%3D%224%22%2F%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%2216%22%20r%3D%225%22%2F%3E%3Cpath%20d%3D%22M18%2014v2l1.5%201%22%2F%3E%3C%2Fsvg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M16%2021v-2a4%204%200%200%200-4-4H7a4%204%200%200%200-4%204v2%22%2F%3E%3Ccircle%20cx%3D%229%22%20cy%3D%227%22%20r%3D%224%22%2F%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%2216%22%20r%3D%225%22%2F%3E%3Cpath%20d%3D%22M18%2014v2l1.5%201%22%2F%3E%3C%2Fsvg%3E")
}

.app-shell i.fa-pencil,.app-shell i.fa-pen-square,.app-shell span.fa-pencil,.app-shell span.fa-pen-square{
  background:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203H5a2%202%200%200%200-2%202v14a2%202%200%200%200%202%202h14a2%202%200%200%200%202-2v-7%22%2F%3E%3Cpath%20d%3D%22M18.4%202.6a2%202%200%200%201%202.8%202.8L12%2014.6l-3.6.9.9-3.6z%22%2F%3E%3C%2Fsvg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%203H5a2%202%200%200%200-2%202v14a2%202%200%200%200%202%202h14a2%202%200%200%200%202-2v-7%22%2F%3E%3Cpath%20d%3D%22M18.4%202.6a2%202%200%200%201%202.8%202.8L12%2014.6l-3.6.9.9-3.6z%22%2F%3E%3C%2Fsvg%3E")
}

.app-shell i.fa-info,.app-shell span.fa-info{
  background:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22M12%2016v-4M12%208h.01%22%2F%3E%3C%2Fsvg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22M12%2016v-4M12%208h.01%22%2F%3E%3C%2Fsvg%3E")
}

.app-shell i.fa-trash-alt,.app-shell i.fa-trash-can,.app-shell span.fa-trash-alt,.app-shell span.fa-trash-can{
  background:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%206h18M8%206V4a1%201%200%200%201%201-1h6a1%201%200%200%201%201%201v2m3%200v14a2%202%200%200%201-2%202H7a2%202%200%200%201-2-2V6%22%2F%3E%3Cpath%20d%3D%22M10%2011v6M14%2011v6%22%2F%3E%3C%2Fsvg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%206h18M8%206V4a1%201%200%200%201%201-1h6a1%201%200%200%201%201%201v2m3%200v14a2%202%200%200%201-2%202H7a2%202%200%200%201-2-2V6%22%2F%3E%3Cpath%20d%3D%22M10%2011v6M14%2011v6%22%2F%3E%3C%2Fsvg%3E")
}

.app-shell i.fa-plus-circle,.app-shell span.fa-plus-circle{
  background:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22M8%2012h8M12%208v8%22%2F%3E%3C%2Fsvg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22M8%2012h8M12%208v8%22%2F%3E%3C%2Fsvg%3E")
}

.app-shell i.fa-badge-check,.app-shell span.fa-badge-check{
  background:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3.85%208.62a4%204%200%200%201%204.78-4.77%204%204%200%200%201%206.74%200%204%204%200%200%201%204.78%204.78%204%204%200%200%201%200%206.74%204%204%200%200%201-4.77%204.78%204%204%200%200%201-6.75%200%204%204%200%200%201-4.78-4.77%204%204%200%200%201%200-6.76Z%22%2F%3E%3Cpath%20d%3D%22m9%2012%202%202%204-4%22%2F%3E%3C%2Fsvg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3.85%208.62a4%204%200%200%201%204.78-4.77%204%204%200%200%201%206.74%200%204%204%200%200%201%204.78%204.78%204%204%200%200%201%200%206.74%204%204%200%200%201-4.77%204.78%204%204%200%200%201-6.75%200%204%204%200%200%201-4.78-4.77%204%204%200%200%201%200-6.76Z%22%2F%3E%3Cpath%20d%3D%22m9%2012%202%202%204-4%22%2F%3E%3C%2Fsvg%3E")
}

.app-shell i.fa-eye,.app-shell span.fa-eye{
  background:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2.06%2012.35a1%201%200%200%201%200-.7%2010.75%2010.75%200%200%201%2019.88%200%201%201%200%200%201%200%20.7%2010.75%2010.75%200%200%201-19.88%200%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22%2F%3E%3C%2Fsvg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M2.06%2012.35a1%201%200%200%201%200-.7%2010.75%2010.75%200%200%201%2019.88%200%201%201%200%200%201%200%20.7%2010.75%2010.75%200%200%201-19.88%200%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22%2F%3E%3C%2Fsvg%3E")
}

.app-shell i.fa-save,.app-shell span.fa-save{
  background:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M15.2%203a2%202%200%200%201%201.4.6l3.8%203.8a2%202%200%200%201%20.6%201.4V19a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2V5a2%202%200%200%201%202-2z%22%2F%3E%3Cpath%20d%3D%22M17%2021v-7a1%201%200%200%200-1-1H8a1%201%200%200%200-1%201v7M7%203v4a1%201%200%200%200%201%201h7%22%2F%3E%3C%2Fsvg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M15.2%203a2%202%200%200%201%201.4.6l3.8%203.8a2%202%200%200%201%20.6%201.4V19a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2V5a2%202%200%200%201%202-2z%22%2F%3E%3Cpath%20d%3D%22M17%2021v-7a1%201%200%200%200-1-1H8a1%201%200%200%200-1%201v7M7%203v4a1%201%200%200%200%201%201h7%22%2F%3E%3C%2Fsvg%3E")
}

.app-shell i.fa-file-excel,.app-shell i.fa-file-csv,.app-shell span.fa-file-excel,.app-shell span.fa-file-csv{
  background:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M15%202H6a2%202%200%200%200-2%202v16a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V7Z%22%2F%3E%3Cpath%20d%3D%22M14%202v4a2%202%200%200%200%202%202h4%22%2F%3E%3Cpath%20d%3D%22M8%2013h2M14%2013h2M8%2017h2M14%2017h2%22%2F%3E%3C%2Fsvg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M15%202H6a2%202%200%200%200-2%202v16a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V7Z%22%2F%3E%3Cpath%20d%3D%22M14%202v4a2%202%200%200%200%202%202h4%22%2F%3E%3Cpath%20d%3D%22M8%2013h2M14%2013h2M8%2017h2M14%2017h2%22%2F%3E%3C%2Fsvg%3E")
}

.app-shell i.fa-file,.app-shell i.fa-file-pdf,.app-shell span.fa-file,.app-shell span.fa-file-pdf{
  background:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M15%202H6a2%202%200%200%200-2%202v16a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V7Z%22%2F%3E%3Cpath%20d%3D%22M14%202v4a2%202%200%200%200%202%202h4%22%2F%3E%3Cpath%20d%3D%22M10%209H8M16%2013H8M16%2017H8%22%2F%3E%3C%2Fsvg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M15%202H6a2%202%200%200%200-2%202v16a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V7Z%22%2F%3E%3Cpath%20d%3D%22M14%202v4a2%202%200%200%200%202%202h4%22%2F%3E%3Cpath%20d%3D%22M10%209H8M16%2013H8M16%2017H8%22%2F%3E%3C%2Fsvg%3E")
}

.app-shell i.fa-print,.app-shell span.fa-print{
  background:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%2018H4a2%202%200%200%201-2-2v-5a2%202%200%200%201%202-2h16a2%202%200%200%201%202%202v5a2%202%200%200%201-2%202h-2%22%2F%3E%3Cpath%20d%3D%22M6%209V3h12v6%22%2F%3E%3Crect%20width%3D%2212%22%20height%3D%228%22%20x%3D%226%22%20y%3D%2214%22%20rx%3D%221%22%2F%3E%3C%2Fsvg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%2018H4a2%202%200%200%201-2-2v-5a2%202%200%200%201%202-2h16a2%202%200%200%201%202%202v5a2%202%200%200%201-2%202h-2%22%2F%3E%3Cpath%20d%3D%22M6%209V3h12v6%22%2F%3E%3Crect%20width%3D%2212%22%20height%3D%228%22%20x%3D%226%22%20y%3D%2214%22%20rx%3D%221%22%2F%3E%3C%2Fsvg%3E")
}

.app-shell i.fa-map-marker-alt,.app-shell i.fa-map-marker,.app-shell span.fa-map-marker-alt,.app-shell span.fa-map-marker{
  background:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%2010c0%205-5.54%2010.19-7.4%2011.8a1%201%200%200%201-1.2%200C9.54%2020.19%204%2015%204%2010a8%208%200%200%201%2016%200%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2210%22%20r%3D%223%22%2F%3E%3C%2Fsvg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%2010c0%205-5.54%2010.19-7.4%2011.8a1%201%200%200%201-1.2%200C9.54%2020.19%204%2015%204%2010a8%208%200%200%201%2016%200%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2210%22%20r%3D%223%22%2F%3E%3C%2Fsvg%3E")
}

.app-shell i.fa-gift,.app-shell span.fa-gift{
  background:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%228%22%20width%3D%2218%22%20height%3D%224%22%20rx%3D%221%22%2F%3E%3Cpath%20d%3D%22M12%208v13M19%2012v7a2%202%200%200%201-2%202H7a2%202%200%200%201-2-2v-7%22%2F%3E%3Cpath%20d%3D%22M7.5%208a2.5%202.5%200%200%201%200-5A4.8%208%200%200%201%2012%208a4.8%208%200%200%201%204.5-5%202.5%202.5%200%200%201%200%205%22%2F%3E%3C%2Fsvg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%228%22%20width%3D%2218%22%20height%3D%224%22%20rx%3D%221%22%2F%3E%3Cpath%20d%3D%22M12%208v13M19%2012v7a2%202%200%200%201-2%202H7a2%202%200%200%201-2-2v-7%22%2F%3E%3Cpath%20d%3D%22M7.5%208a2.5%202.5%200%200%201%200-5A4.8%208%200%200%201%2012%208a4.8%208%200%200%201%204.5-5%202.5%202.5%200%200%201%200%205%22%2F%3E%3C%2Fsvg%3E")
}

.app-shell i.fa-exclamation-triangle,.app-shell span.fa-exclamation-triangle{
  background:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m21.73%2018-8-14a2%202%200%200%200-3.48%200l-8%2014A2%202%200%200%200%204%2021h16a2%202%200%200%200%201.73-3%22%2F%3E%3Cpath%20d%3D%22M12%209v4M12%2017h.01%22%2F%3E%3C%2Fsvg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m21.73%2018-8-14a2%202%200%200%200-3.48%200l-8%2014A2%202%200%200%200%204%2021h16a2%202%200%200%200%201.73-3%22%2F%3E%3Cpath%20d%3D%22M12%209v4M12%2017h.01%22%2F%3E%3C%2Fsvg%3E")
}

.app-shell i.fa-wrench,.app-shell span.fa-wrench{
  background:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14.7%206.3a1%201%200%200%200%200%201.4l1.6%201.6a1%201%200%200%200%201.4%200l3.77-3.77a6%206%200%200%201-7.94%207.94l-6.91%206.91a2.12%202.12%200%200%201-3-3l6.91-6.91a6%206%200%200%201%207.94-7.94l-3.76%203.76z%22%2F%3E%3C%2Fsvg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14.7%206.3a1%201%200%200%200%200%201.4l1.6%201.6a1%201%200%200%200%201.4%200l3.77-3.77a6%206%200%200%201-7.94%207.94l-6.91%206.91a2.12%202.12%200%200%201-3-3l6.91-6.91a6%206%200%200%201%207.94-7.94l-3.76%203.76z%22%2F%3E%3C%2Fsvg%3E")
}

.app-shell i.fa-minus,.app-shell span.fa-minus{
  background:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012h14%22%2F%3E%3C%2Fsvg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2012h14%22%2F%3E%3C%2Fsvg%3E")
}

.app-shell i.fa-lock,.app-shell span.fa-lock{
  background:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20width%3D%2218%22%20height%3D%2211%22%20x%3D%223%22%20y%3D%2211%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M7%2011V7a5%205%200%200%201%2010%200v4%22%2F%3E%3C%2Fsvg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20width%3D%2218%22%20height%3D%2211%22%20x%3D%223%22%20y%3D%2211%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M7%2011V7a5%205%200%200%201%2010%200v4%22%2F%3E%3C%2Fsvg%3E")
}

.app-shell i.fa-download,.app-shell span.fa-download{
  background:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2015v4a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2v-4%22%2F%3E%3Cpath%20d%3D%22M7%2010l5%205%205-5M12%2015V3%22%2F%3E%3C%2Fsvg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2015v4a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2v-4%22%2F%3E%3Cpath%20d%3D%22M7%2010l5%205%205-5M12%2015V3%22%2F%3E%3C%2Fsvg%3E")
}

.app-shell i.fa-coins,.app-shell span.fa-coins{
  background:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%226%22%2F%3E%3Cpath%20d%3D%22M18.09%2010.37A6%206%200%201%201%2010.34%2018%22%2F%3E%3Cpath%20d%3D%22M7%206h1v4M16.71%2013.88l.7.71-2.82%202.82%22%2F%3E%3C%2Fsvg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%226%22%2F%3E%3Cpath%20d%3D%22M18.09%2010.37A6%206%200%201%201%2010.34%2018%22%2F%3E%3Cpath%20d%3D%22M7%206h1v4M16.71%2013.88l.7.71-2.82%202.82%22%2F%3E%3C%2Fsvg%3E")
}

.app-shell i.fa-bullseye,.app-shell span.fa-bullseye{
  background:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%226%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%222%22%2F%3E%3C%2Fsvg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%226%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%222%22%2F%3E%3C%2Fsvg%3E")
}

.app-shell i.fa-barcode,.app-shell span.fa-barcode{
  background:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%205v14M8%205v14M12%205v14M17%205v14M21%205v14%22%2F%3E%3C%2Fsvg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%205v14M8%205v14M12%205v14M17%205v14M21%205v14%22%2F%3E%3C%2Fsvg%3E")
}

.app-shell i.fa-times-circle,.app-shell span.fa-times-circle{
  background:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22m15%209-6%206M9%209l6%206%22%2F%3E%3C%2Fsvg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22m15%209-6%206M9%209l6%206%22%2F%3E%3C%2Fsvg%3E")
}

.app-shell i.fa-share-alt,.app-shell i.fa-share,.app-shell span.fa-share-alt,.app-shell span.fa-share{
  background:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%225%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%226%22%20cy%3D%2212%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%2219%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22m8.59%2013.51%206.83%203.98M15.41%206.51l-6.82%203.98%22%2F%3E%3C%2Fsvg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%225%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%226%22%20cy%3D%2212%22%20r%3D%223%22%2F%3E%3Ccircle%20cx%3D%2218%22%20cy%3D%2219%22%20r%3D%223%22%2F%3E%3Cpath%20d%3D%22m8.59%2013.51%206.83%203.98M15.41%206.51l-6.82%203.98%22%2F%3E%3C%2Fsvg%3E")
}

.app-shell i.fa-percent,.app-shell span.fa-percent{
  background:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M19%205%205%2019%22%2F%3E%3Ccircle%20cx%3D%226.5%22%20cy%3D%226.5%22%20r%3D%222.5%22%2F%3E%3Ccircle%20cx%3D%2217.5%22%20cy%3D%2217.5%22%20r%3D%222.5%22%2F%3E%3C%2Fsvg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M19%205%205%2019%22%2F%3E%3Ccircle%20cx%3D%226.5%22%20cy%3D%226.5%22%20r%3D%222.5%22%2F%3E%3Ccircle%20cx%3D%2217.5%22%20cy%3D%2217.5%22%20r%3D%222.5%22%2F%3E%3C%2Fsvg%3E")
}

.app-shell i.fa-life-ring,.app-shell span.fa-life-ring{
  background:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22m4.93%204.93%204.24%204.24M14.83%2014.83l4.24%204.24M14.83%209.17l4.24-4.24M4.93%2019.07l4.24-4.24%22%2F%3E%3C%2Fsvg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%224%22%2F%3E%3Cpath%20d%3D%22m4.93%204.93%204.24%204.24M14.83%2014.83l4.24%204.24M14.83%209.17l4.24-4.24M4.93%2019.07l4.24-4.24%22%2F%3E%3C%2Fsvg%3E")
}

.app-shell i.fa-folder,.app-shell span.fa-folder{
  background:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%2020a2%202%200%200%200%202-2V8a2%202%200%200%200-2-2h-7.9a2%202%200%200%201-1.69-.9L9.6%203.9A2%202%200%200%200%207.93%203H4a2%202%200%200%200-2%202v13a2%202%200%200%200%202%202Z%22%2F%3E%3C%2Fsvg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%2020a2%202%200%200%200%202-2V8a2%202%200%200%200-2-2h-7.9a2%202%200%200%201-1.69-.9L9.6%203.9A2%202%200%200%200%207.93%203H4a2%202%200%200%200-2%202v13a2%202%200%200%200%202%202Z%22%2F%3E%3C%2Fsvg%3E")
}

.app-shell i.fa-file-import,.app-shell span.fa-file-import{
  background:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2022h14a2%202%200%200%200%202-2V7l-5-5H6a2%202%200%200%200-2%202v4%22%2F%3E%3Cpath%20d%3D%22M14%202v4a2%202%200%200%200%202%202h4%22%2F%3E%3Cpath%20d%3D%22M2%2015h10M9%2018l3-3-3-3%22%2F%3E%3C%2Fsvg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2022h14a2%202%200%200%200%202-2V7l-5-5H6a2%202%200%200%200-2%202v4%22%2F%3E%3Cpath%20d%3D%22M14%202v4a2%202%200%200%200%202%202h4%22%2F%3E%3Cpath%20d%3D%22M2%2015h10M9%2018l3-3-3-3%22%2F%3E%3C%2Fsvg%3E")
}

.app-shell i.fa-external-link-alt,.app-shell span.fa-external-link-alt{
  background:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M15%203h6v6M10%2014%2021%203M18%2013v6a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2V8a2%202%200%200%201%202-2h6%22%2F%3E%3C%2Fsvg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M15%203h6v6M10%2014%2021%203M18%2013v6a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2V8a2%202%200%200%201%202-2h6%22%2F%3E%3C%2Fsvg%3E")
}

.app-shell i.fa-copy,.app-shell span.fa-copy{
  background:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20x%3D%228%22%20y%3D%228%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M4%2016c-1.1%200-2-.9-2-2V4c0-1.1.9-2%202-2h10c1.1%200%202%20.9%202%202%22%2F%3E%3C%2Fsvg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20width%3D%2214%22%20height%3D%2214%22%20x%3D%228%22%20y%3D%228%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M4%2016c-1.1%200-2-.9-2-2V4c0-1.1.9-2%202-2h10c1.1%200%202%20.9%202%202%22%2F%3E%3C%2Fsvg%3E")
}

.app-shell i.fa-comments-o,.app-shell i.fa-comment,.app-shell i.fa-comments,.app-shell span.fa-comments-o,.app-shell span.fa-comment,.app-shell span.fa-comments{
  background:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2015a2%202%200%200%201-2%202H7l-4%204V5a2%202%200%200%201%202-2h14a2%202%200%200%201%202%202z%22%2F%3E%3C%2Fsvg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2015a2%202%200%200%201-2%202H7l-4%204V5a2%202%200%200%201%202-2h14a2%202%200%200%201%202%202z%22%2F%3E%3C%2Fsvg%3E")
}

.app-shell i.fa-cogs,.app-shell i.fa-cog,.app-shell span.fa-cogs,.app-shell span.fa-cog{
  background:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12.2%202h-.4a2%202%200%200%200-2%202v.2a2%202%200%200%201-1%201.7l-.4.3a2%202%200%200%201-2%200l-.2-.1a2%202%200%200%200-2.7.7l-.2.4a2%202%200%200%200%20.7%202.7l.2.1a2%202%200%200%201%201%201.7v.5a2%202%200%200%201-1%201.8l-.2.1a2%202%200%200%200-.7%202.7l.2.4a2%202%200%200%200%202.7.7l.2-.1a2%202%200%200%201%202%200l.4.3a2%202%200%200%201%201%201.7V20a2%202%200%200%200%202%202h.4a2%202%200%200%200%202-2v-.2a2%202%200%200%201%201-1.7l.4-.3a2%202%200%200%201%202%200l.2.1a2%202%200%200%200%202.7-.7l.2-.4a2%202%200%200%200-.7-2.7l-.2-.1a2%202%200%200%201-1-1.7v-.5a2%202%200%200%201%201-1.8l.2-.1a2%202%200%200%200%20.7-2.7l-.2-.4a2%202%200%200%200-2.7-.7l-.2.1a2%202%200%200%201-2%200l-.4-.3a2%202%200%200%201-1-1.7V4a2%202%200%200%200-2-2z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22%2F%3E%3C%2Fsvg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12.2%202h-.4a2%202%200%200%200-2%202v.2a2%202%200%200%201-1%201.7l-.4.3a2%202%200%200%201-2%200l-.2-.1a2%202%200%200%200-2.7.7l-.2.4a2%202%200%200%200%20.7%202.7l.2.1a2%202%200%200%201%201%201.7v.5a2%202%200%200%201-1%201.8l-.2.1a2%202%200%200%200-.7%202.7l.2.4a2%202%200%200%200%202.7.7l.2-.1a2%202%200%200%201%202%200l.4.3a2%202%200%200%201%201%201.7V20a2%202%200%200%200%202%202h.4a2%202%200%200%200%202-2v-.2a2%202%200%200%201%201-1.7l.4-.3a2%202%200%200%201%202%200l.2.1a2%202%200%200%200%202.7-.7l.2-.4a2%202%200%200%200-.7-2.7l-.2-.1a2%202%200%200%201-1-1.7v-.5a2%202%200%200%201%201-1.8l.2-.1a2%202%200%200%200%20.7-2.7l-.2-.4a2%202%200%200%200-2.7-.7l-.2.1a2%202%200%200%201-2%200l-.4-.3a2%202%200%200%201-1-1.7V4a2%202%200%200%200-2-2z%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22%2F%3E%3C%2Fsvg%3E")
}

.app-shell i.fa-chevron-left,.app-shell i.fa-angle-left,.app-shell span.fa-chevron-left,.app-shell span.fa-angle-left{
  background:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m15%2018-6-6%206-6%22%2F%3E%3C%2Fsvg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m15%2018-6-6%206-6%22%2F%3E%3C%2Fsvg%3E")
}

.app-shell i.fa-chevron-right,.app-shell i.fa-angle-right,.app-shell span.fa-chevron-right,.app-shell span.fa-angle-right{
  background:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m9%2018%206-6-6-6%22%2F%3E%3C%2Fsvg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m9%2018%206-6-6-6%22%2F%3E%3C%2Fsvg%3E")
}

.app-shell i.fa-angle-up,.app-shell i.fa-chevron-up,.app-shell span.fa-angle-up,.app-shell span.fa-chevron-up{
  background:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m18%2015-6-6-6%206%22%2F%3E%3C%2Fsvg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m18%2015-6-6-6%206%22%2F%3E%3C%2Fsvg%3E")
}

.app-shell i.fa-check-square,.app-shell i.fa-check-square-o,.app-shell span.fa-check-square,.app-shell span.fa-check-square-o{
  background:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20width%3D%2218%22%20height%3D%2218%22%20x%3D%223%22%20y%3D%223%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22m9%2012%202%202%204-4%22%2F%3E%3C%2Fsvg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20width%3D%2218%22%20height%3D%2218%22%20x%3D%223%22%20y%3D%223%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22m9%2012%202%202%204-4%22%2F%3E%3C%2Fsvg%3E")
}

.app-shell i.fa-check-circle,.app-shell span.fa-check-circle{
  background:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22m9%2012%202%202%204-4%22%2F%3E%3C%2Fsvg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22m9%2012%202%202%204-4%22%2F%3E%3C%2Fsvg%3E")
}

.app-shell i.fa-telegram,.app-shell i.fa-paper-plane,.app-shell span.fa-telegram,.app-shell span.fa-paper-plane{
  background:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M22%202%2011%2013M22%202l-7%2020-4-9-9-4z%22%2F%3E%3C%2Fsvg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M22%202%2011%2013M22%202l-7%2020-4-9-9-4z%22%2F%3E%3C%2Fsvg%3E")
}

.app-shell i.fa-suitcase,.app-shell i.fa-suitcase-rolling,.app-shell i.fa-briefcase,.app-shell span.fa-suitcase,.app-shell span.fa-suitcase-rolling,.app-shell span.fa-briefcase{
  background:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M16%2020V4a2%202%200%200%200-2-2h-4a2%202%200%200%200-2%202v16%22%2F%3E%3Crect%20width%3D%2220%22%20height%3D%2214%22%20x%3D%222%22%20y%3D%226%22%20rx%3D%222%22%2F%3E%3C%2Fsvg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M16%2020V4a2%202%200%200%200-2-2h-4a2%202%200%200%200-2%202v16%22%2F%3E%3Crect%20width%3D%2220%22%20height%3D%2214%22%20x%3D%222%22%20y%3D%226%22%20rx%3D%222%22%2F%3E%3C%2Fsvg%3E")
}

.app-shell i.fa-star,.app-shell span.fa-star{
  background:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M11.53%202.3a.53.53%200%200%201%20.95%200l2.3%204.68a2.1%202.1%200%200%200%201.6%201.16l5.17.75a.53.53%200%200%201%20.29.91l-3.74%203.64a2.1%202.1%200%200%200-.61%201.87l.88%205.14a.53.53%200%200%201-.77.56l-4.62-2.43a2.1%202.1%200%200%200-1.97%200L6.4%2021.01a.53.53%200%200%201-.77-.56l.88-5.14a2.1%202.1%200%200%200-.61-1.88L2.16%209.8a.53.53%200%200%201%20.29-.91l5.17-.75a2.1%202.1%200%200%200%201.6-1.16z%22%2F%3E%3C%2Fsvg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M11.53%202.3a.53.53%200%200%201%20.95%200l2.3%204.68a2.1%202.1%200%200%200%201.6%201.16l5.17.75a.53.53%200%200%201%20.29.91l-3.74%203.64a2.1%202.1%200%200%200-.61%201.87l.88%205.14a.53.53%200%200%201-.77.56l-4.62-2.43a2.1%202.1%200%200%200-1.97%200L6.4%2021.01a.53.53%200%200%201-.77-.56l.88-5.14a2.1%202.1%200%200%200-.61-1.88L2.16%209.8a.53.53%200%200%201%20.29-.91l5.17-.75a2.1%202.1%200%200%200%201.6-1.16z%22%2F%3E%3C%2Fsvg%3E")
}

.app-shell i.fa-sign-out-alt,.app-shell i.fa-sign-out,.app-shell span.fa-sign-out-alt,.app-shell span.fa-sign-out{
  background:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%2021H5a2%202%200%200%201-2-2V5a2%202%200%200%201%202-2h4M16%2017l5-5-5-5M21%2012H9%22%2F%3E%3C%2Fsvg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9%2021H5a2%202%200%200%201-2-2V5a2%202%200%200%201%202-2h4M16%2017l5-5-5-5M21%2012H9%22%2F%3E%3C%2Fsvg%3E")
}

.app-shell i.fa-receipt,.app-shell span.fa-receipt{
  background:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%202v20l2-1%202%201%202-1%202%201%202-1%202%201%202-1%202%201V2l-2%201-2-1-2%201-2-1-2%201-2-1-2%201Z%22%2F%3E%3Cpath%20d%3D%22M16%208h-6a2%202%200%201%200%200%204h4a2%202%200%201%201%200%204H8M12%2017.5v-11%22%2F%3E%3C%2Fsvg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%202v20l2-1%202%201%202-1%202%201%202-1%202%201%202-1%202%201V2l-2%201-2-1-2%201-2-1-2%201-2-1-2%201Z%22%2F%3E%3Cpath%20d%3D%22M16%208h-6a2%202%200%201%200%200%204h4a2%202%200%201%201%200%204H8M12%2017.5v-11%22%2F%3E%3C%2Fsvg%3E")
}

.app-shell i.fa-layer-group,.app-shell span.fa-layer-group{
  background:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12.83%202.18a2%202%200%200%200-1.66%200L2.6%206.08a1%201%200%200%200%200%201.83l8.58%203.91a2%202%200%200%200%201.66%200l8.58-3.9a1%201%200%200%200%200-1.83z%22%2F%3E%3Cpath%20d%3D%22M2%2012.18a1%201%200%200%200%20.6.91l8.58%203.91a2%202%200%200%200%201.66%200l8.58-3.9a1%201%200%200%200%20.6-.92M2%2017.18a1%201%200%200%200%20.6.91l8.58%203.91a2%202%200%200%200%201.66%200l8.58-3.9a1%201%200%200%200%20.6-.92%22%2F%3E%3C%2Fsvg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12.83%202.18a2%202%200%200%200-1.66%200L2.6%206.08a1%201%200%200%200%200%201.83l8.58%203.91a2%202%200%200%200%201.66%200l8.58-3.9a1%201%200%200%200%200-1.83z%22%2F%3E%3Cpath%20d%3D%22M2%2012.18a1%201%200%200%200%20.6.91l8.58%203.91a2%202%200%200%200%201.66%200l8.58-3.9a1%201%200%200%200%20.6-.92M2%2017.18a1%201%200%200%200%20.6.91l8.58%203.91a2%202%200%200%200%201.66%200l8.58-3.9a1%201%200%200%200%20.6-.92%22%2F%3E%3C%2Fsvg%3E")
}

.app-shell i.fa-hourglass-half,.app-shell i.fa-hourglass,.app-shell span.fa-hourglass-half,.app-shell span.fa-hourglass{
  background:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2022h14M5%202h14M17%2022v-4.17a2%202%200%200%200-.59-1.41L12%2012l-4.41%204.41A2%202%200%200%200%207%2017.83V22M7%202v4.17a2%202%200%200%200%20.59%201.41L12%2012l4.41-4.41A2%202%200%200%200%2017%206.17V2%22%2F%3E%3C%2Fsvg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M5%2022h14M5%202h14M17%2022v-4.17a2%202%200%200%200-.59-1.41L12%2012l-4.41%204.41A2%202%200%200%200%207%2017.83V22M7%202v4.17a2%202%200%200%200%20.59%201.41L12%2012l4.41-4.41A2%202%200%200%200%2017%206.17V2%22%2F%3E%3C%2Fsvg%3E")
}

.app-shell i.fa-envelope-open,.app-shell span.fa-envelope-open{
  background:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21.2%208.4c.5.38.8.97.8%201.6v10a2%202%200%200%201-2%202H4a2%202%200%200%201-2-2V10a2%202%200%200%201%20.8-1.6l8-6a2%202%200%200%201%202.4%200z%22%2F%3E%3Cpath%20d%3D%22m22%2010-8.97%205.7a1.94%201.94%200%200%201-2.06%200L2%2010%22%2F%3E%3C%2Fsvg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21.2%208.4c.5.38.8.97.8%201.6v10a2%202%200%200%201-2%202H4a2%202%200%200%201-2-2V10a2%202%200%200%201%20.8-1.6l8-6a2%202%200%200%201%202.4%200z%22%2F%3E%3Cpath%20d%3D%22m22%2010-8.97%205.7a1.94%201.94%200%200%201-2.06%200L2%2010%22%2F%3E%3C%2Fsvg%3E")
}

.app-shell i.fa-envelope,.app-shell span.fa-envelope{
  background:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20width%3D%2220%22%20height%3D%2216%22%20x%3D%222%22%20y%3D%224%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22m22%207-8.97%205.7a1.94%201.94%200%200%201-2.06%200L2%207%22%2F%3E%3C%2Fsvg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20width%3D%2220%22%20height%3D%2216%22%20x%3D%222%22%20y%3D%224%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22m22%207-8.97%205.7a1.94%201.94%200%200%201-2.06%200L2%207%22%2F%3E%3C%2Fsvg%3E")
}

.app-shell i.fa-dashboard,.app-shell i.fa-tachometer-alt,.app-shell span.fa-dashboard,.app-shell span.fa-tachometer-alt{
  background:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m12%2014%204-4%22%2F%3E%3Cpath%20d%3D%22M3.34%2019a10%2010%200%201%201%2017.32%200%22%2F%3E%3C%2Fsvg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m12%2014%204-4%22%2F%3E%3Cpath%20d%3D%22M3.34%2019a10%2010%200%201%201%2017.32%200%22%2F%3E%3C%2Fsvg%3E")
}

.app-shell i.fa-circle,.app-shell i.fa-gg-circle,.app-shell span.fa-circle,.app-shell span.fa-gg-circle{
  background:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3C%2Fsvg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3C%2Fsvg%3E")
}

.app-shell i.fa-boxes,.app-shell i.fa-box,.app-shell span.fa-boxes,.app-shell span.fa-box{
  background:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m7.5%204.27%209%205.15%22%2F%3E%3Cpath%20d%3D%22M21%208a2%202%200%200%200-1-1.73l-7-4a2%202%200%200%200-2%200l-7%204A2%202%200%200%200%203%208v8a2%202%200%200%200%201%201.73l7%204a2%202%200%200%200%202%200l7-4A2%202%200%200%200%2021%2016Z%22%2F%3E%3Cpath%20d%3D%22m3.3%207%208.7%205%208.7-5M12%2022V12%22%2F%3E%3C%2Fsvg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m7.5%204.27%209%205.15%22%2F%3E%3Cpath%20d%3D%22M21%208a2%202%200%200%200-1-1.73l-7-4a2%202%200%200%200-2%200l-7%204A2%202%200%200%200%203%208v8a2%202%200%200%200%201%201.73l7%204a2%202%200%200%200%202%200l7-4A2%202%200%200%200%2021%2016Z%22%2F%3E%3Cpath%20d%3D%22m3.3%207%208.7%205%208.7-5M12%2022V12%22%2F%3E%3C%2Fsvg%3E")
}

.app-shell i.fa-birthday-cake,.app-shell span.fa-birthday-cake{
  background:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%2021v-8a2%202%200%200%200-2-2H6a2%202%200%200%200-2%202v8M4%2016s.5-1%202-1%202.5%202%204%202%202.5-2%204-2%202.5%202%204%202%202-1%202-1M2%2021h20M7%208v3M12%208v3M17%208v3M7%204h.01M12%204h.01M17%204h.01%22%2F%3E%3C%2Fsvg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%2021v-8a2%202%200%200%200-2-2H6a2%202%200%200%200-2%202v8M4%2016s.5-1%202-1%202.5%202%204%202%202.5-2%204-2%202.5%202%204%202%202-1%202-1M2%2021h20M7%208v3M12%208v3M17%208v3M7%204h.01M12%204h.01M17%204h.01%22%2F%3E%3C%2Fsvg%3E")
}

.app-shell i.fa-bell,.app-shell span.fa-bell{
  background:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10.27%2021a2%202%200%200%200%203.46%200%22%2F%3E%3Cpath%20d%3D%22M3.26%2015.33A1%201%200%200%200%204%2017h16a1%201%200%200%200%20.74-1.67C19.41%2013.96%2018%2012.5%2018%208A6%206%200%200%200%206%208c0%204.5-1.41%205.96-2.74%207.33%22%2F%3E%3C%2Fsvg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10.27%2021a2%202%200%200%200%203.46%200%22%2F%3E%3Cpath%20d%3D%22M3.26%2015.33A1%201%200%200%200%204%2017h16a1%201%200%200%200%20.74-1.67C19.41%2013.96%2018%2012.5%2018%208A6%206%200%200%200%206%208c0%204.5-1.41%205.96-2.74%207.33%22%2F%3E%3C%2Fsvg%3E")
}

.app-shell i.fa-th-large,.app-shell i.fa-th,.app-shell span.fa-th-large,.app-shell span.fa-th{
  background:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20width%3D%227%22%20height%3D%227%22%20x%3D%223%22%20y%3D%223%22%20rx%3D%221%22%2F%3E%3Crect%20width%3D%227%22%20height%3D%227%22%20x%3D%2214%22%20y%3D%223%22%20rx%3D%221%22%2F%3E%3Crect%20width%3D%227%22%20height%3D%227%22%20x%3D%2214%22%20y%3D%2214%22%20rx%3D%221%22%2F%3E%3Crect%20width%3D%227%22%20height%3D%227%22%20x%3D%223%22%20y%3D%2214%22%20rx%3D%221%22%2F%3E%3C%2Fsvg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20width%3D%227%22%20height%3D%227%22%20x%3D%223%22%20y%3D%223%22%20rx%3D%221%22%2F%3E%3Crect%20width%3D%227%22%20height%3D%227%22%20x%3D%2214%22%20y%3D%223%22%20rx%3D%221%22%2F%3E%3Crect%20width%3D%227%22%20height%3D%227%22%20x%3D%2214%22%20y%3D%2214%22%20rx%3D%221%22%2F%3E%3Crect%20width%3D%227%22%20height%3D%227%22%20x%3D%223%22%20y%3D%2214%22%20rx%3D%221%22%2F%3E%3C%2Fsvg%3E")
}

.app-shell i.fa-history,.app-shell i.fa-undo,.app-shell span.fa-history,.app-shell span.fa-undo{
  background:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2012a9%209%200%201%200%209-9%209.75%209.75%200%200%200-6.74%202.74L3%208%22%2F%3E%3Cpath%20d%3D%22M3%203v5h5M12%207v5l4%202%22%2F%3E%3C%2Fsvg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%2012a9%209%200%201%200%209-9%209.75%209.75%200%200%200-6.74%202.74L3%208%22%2F%3E%3Cpath%20d%3D%22M3%203v5h5M12%207v5l4%202%22%2F%3E%3C%2Fsvg%3E")
}

.app-shell i.fa-upload,.app-shell span.fa-upload{
  background:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2015v4a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2v-4%22%2F%3E%3Cpath%20d%3D%22M17%208l-5-5-5%205M12%203v12%22%2F%3E%3C%2Fsvg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21%2015v4a2%202%200%200%201-2%202H5a2%202%200%200%201-2-2v-4%22%2F%3E%3Cpath%20d%3D%22M17%208l-5-5-5%205M12%203v12%22%2F%3E%3C%2Fsvg%3E")
}

.app-shell i.fa-key,.app-shell span.fa-key{
  background:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m15.5%207.5%202.3%202.3a1%201%200%200%200%201.4%200l2.1-2.1a1%201%200%200%200%200-1.4L19%204%22%2F%3E%3Cpath%20d%3D%22m21%202-9.6%209.6%22%2F%3E%3Ccircle%20cx%3D%227.5%22%20cy%3D%2215.5%22%20r%3D%225.5%22%2F%3E%3C%2Fsvg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m15.5%207.5%202.3%202.3a1%201%200%200%200%201.4%200l2.1-2.1a1%201%200%200%200%200-1.4L19%204%22%2F%3E%3Cpath%20d%3D%22m21%202-9.6%209.6%22%2F%3E%3Ccircle%20cx%3D%227.5%22%20cy%3D%2215.5%22%20r%3D%225.5%22%2F%3E%3C%2Fsvg%3E")
}

.app-shell i.fa-truck,.app-shell span.fa-truck{
  background:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14%2018V6a2%202%200%200%200-2-2H4a2%202%200%200%200-2%202v11a1%201%200%200%200%201%201h2%22%2F%3E%3Cpath%20d%3D%22M15%2018H9M19%2018h2a1%201%200%200%200%201-1v-3.65a1%201%200%200%200-.22-.62l-3.48-4.35A1%201%200%200%200%2017.52%208H14%22%2F%3E%3Ccircle%20cx%3D%2217%22%20cy%3D%2218%22%20r%3D%222%22%2F%3E%3Ccircle%20cx%3D%227%22%20cy%3D%2218%22%20r%3D%222%22%2F%3E%3C%2Fsvg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14%2018V6a2%202%200%200%200-2-2H4a2%202%200%200%200-2%202v11a1%201%200%200%200%201%201h2%22%2F%3E%3Cpath%20d%3D%22M15%2018H9M19%2018h2a1%201%200%200%200%201-1v-3.65a1%201%200%200%200-.22-.62l-3.48-4.35A1%201%200%200%200%2017.52%208H14%22%2F%3E%3Ccircle%20cx%3D%2217%22%20cy%3D%2218%22%20r%3D%222%22%2F%3E%3Ccircle%20cx%3D%227%22%20cy%3D%2218%22%20r%3D%222%22%2F%3E%3C%2Fsvg%3E")
}

.app-shell i.fa-building,.app-shell span.fa-building{
  background:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20width%3D%2216%22%20height%3D%2220%22%20x%3D%224%22%20y%3D%222%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M9%2022v-4h6v4M8%206h.01M16%206h.01M12%206h.01M12%2010h.01M12%2014h.01M16%2010h.01M16%2014h.01M8%2010h.01M8%2014h.01%22%2F%3E%3C%2Fsvg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20width%3D%2216%22%20height%3D%2220%22%20x%3D%224%22%20y%3D%222%22%20rx%3D%222%22%2F%3E%3Cpath%20d%3D%22M9%2022v-4h6v4M8%206h.01M16%206h.01M12%206h.01M12%2010h.01M12%2014h.01M16%2010h.01M16%2014h.01M8%2010h.01M8%2014h.01%22%2F%3E%3C%2Fsvg%3E")
}

.app-shell i.fa-phone,.app-shell span.fa-phone{
  background:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M13.83%2019.17a16%2016%200%200%201-9-9%202%202%200%200%201%20.53-2.2l1.4-1.24a2%202%200%200%200%20.5-2.26L6.4%203.14A2%202%200%200%200%204.3%202.03l-1.3.2A2%202%200%200%200%201.3%204.4%2020%2020%200%200%200%2019.6%2022.7a2%202%200%200%200%202.17-1.7l.2-1.3a2%202%200%200%200-1.1-2.1l-1.34-1.87a2%202%200%200%200-2.26.5l-1.24%201.4a2%202%200%200%201-2.2.54%22%2F%3E%3C%2Fsvg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M13.83%2019.17a16%2016%200%200%201-9-9%202%202%200%200%201%20.53-2.2l1.4-1.24a2%202%200%200%200%20.5-2.26L6.4%203.14A2%202%200%200%200%204.3%202.03l-1.3.2A2%202%200%200%200%201.3%204.4%2020%2020%200%200%200%2019.6%2022.7a2%202%200%200%200%202.17-1.7l.2-1.3a2%202%200%200%200-1.1-2.1l-1.34-1.87a2%202%200%200%200-2.26.5l-1.24%201.4a2%202%200%200%201-2.2.54%22%2F%3E%3C%2Fsvg%3E")
}

/* Used by the date/time picker chrome: the mode toggle, the up/down steppers and
   the today button. Without these the picker offers no visible way to reach its time
   view at all. */

.app-shell i.fa-chevron-down,.app-shell i.fa-angle-down,.app-shell span.fa-chevron-down,.app-shell span.fa-angle-down{
  background:currentColor;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m6%209%206%206%206-6%22%2F%3E%3C%2Fsvg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m6%209%206%206%206-6%22%2F%3E%3C%2Fsvg%3E")
}

/* Font Awesome's own sizing and layout modifiers. */

.app-shell i.fa-lg,.app-shell span.fa-lg{
  width:1.33em;
  height:1.33em;
  vertical-align:-.2em
}

.app-shell i.fa-2x,.app-shell span.fa-2x{
  width:2em;
  height:2em
}

.app-shell i.fa-3x,.app-shell span.fa-3x{
  width:3em;
  height:3em
}

.app-shell i.fa-fw,.app-shell span.fa-fw{
  width:1.28em
}

/* ==========================================================================
   Legacy furniture compatibility.
   Screens still written with AdminLTE's `content-header` and the `components.widget`
   box markup now sit on the master layout, where those classes mean nothing. Rather
   than rewrite every such view by hand, give the markup the shape of the new page
   head and section card. Page-scoped rules elsewhere are more specific and still win.
   ========================================================================== */

.app-shell .content-header{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px 18px;
  margin:0 0 14px;
  padding:2px 0 14px;
  border-bottom:1px solid var(--border)
}

.app-shell .content-header>h1,.app-shell .content-header>div>h1{
  margin:0;
  color:var(--text);
  font-size:23px;
  font-weight:850;
  letter-spacing:-.45px;
  line-height:1.15
}

.app-shell .content-header>h1>small{
  display:block;
  margin-top:5px;
  color:var(--text-3);
  font-size:12px;
  font-weight:600;
  letter-spacing:0
}

.app-shell .content-header>h3{
  margin:5px 0 0;
  color:var(--text-3);
  font-size:13px;
  font-weight:600
}

.app-shell .content-header .breadcrumb{
  display:none
}

/* These screens have no <x-page>, so their content sits straight in <main> with no
   padding at all. Give the legacy wrappers the same frame the page shell provides. */

.app-shell main>.content-header,.app-shell main>.content{
  width:100%;
  max-width:1500px;
  margin-left:auto;
  margin-right:auto;
  padding-left:16px;
  padding-right:16px
}

.app-shell main>.content-header{
  padding-top:16px
}

.app-shell main>.content{
  padding-bottom:26px
}

/* Inside a page that already has its own shell, the wrapper adds nothing. */

.app-shell .page-shell>.content{
  padding:0
}

.app-shell .box{
  overflow:visible;
  margin:0 0 14px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

.app-shell .box>.box-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 15px;
  border-bottom:1px solid var(--border-2);
  background:linear-gradient(105deg,color-mix(in srgb,var(--brand-weak) 52%,var(--surface)) 0%,var(--surface) 66%);
  border-radius:14px 14px 0 0
}

.app-shell .box>.box-header>.box-title{
  margin:0;
  color:var(--text);
  font-size:14.5px;
  font-weight:820
}

.app-shell .box>.box-header>.box-tools{
  display:flex;
  align-items:center;
  gap:8px;
  position:static;
  float:none
}

.app-shell .box>.box-body{
  padding:14px
}

/* A box holding nothing but a listing gives it the whole box.

   The 14 pixels are there for a box of prose or a chart. Around a table they are a gutter down
   both sides of it: the toolbar starts inset from the card, the column headings start inset from
   the toolbar, and the listing reads as a table dropped into a panel rather than as the panel
   itself — which is not what the same table looks like on any screen that has been reworked.

   The pull is on the wrapper rather than the padding on the box: it is the wrapper that is asked
   about itself, so nothing depends on a parent selector.

   `:last-child:nth-child(-n+2)` rather than `:only-child`, because the wrapper is not always
   alone in there. The shell puts the scroll arrows' layer in this same box — it has to be outside
   the thing it scrolls — and prepends it, which made the wrapper the second of two children and
   an only-child test fail. Last, and no later than second: the wrapper with the arrow layer
   before it, or the wrapper on its own. A box holding a chart above its table has three. */

.app-shell .box>.box-body>.table-responsive:last-child:nth-child(-n+2),
.app-shell .box>.box-body>.dataTables_wrapper:last-child:nth-child(-n+2),
.app-shell .box>.box-body>.report-table-wrap:last-child:nth-child(-n+2){
  margin:-14px;
  max-width:none
}

.app-shell .box>.box-footer{
  padding:12px 15px;
  border-top:1px solid var(--border-2);
  background:var(--surface-2);
  border-radius:0 0 14px 14px
}

/* Installment plan dialog. The Bootstrap col-lg grid does not lay out on this stack, so
   the fields rendered at arbitrary widths with the unit selects floating beside them. */

.app-shell .installment-plan-dialog,body.app-ui .installment-plan-dialog{
  width:min(760px,calc(100vw - 32px))
}

body.app-ui .installment-plan-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:12px
}

body.app-ui .installment-plan-field{
  margin-top:12px
}

body.app-ui .installment-plan-field:first-child{
  margin-top:0
}

/* Value plus unit reads as one control. */

body.app-ui .installment-plan-pair{
  display:flex;
  gap:0
}

body.app-ui .installment-plan-pair>.form-control:first-child{
  border-top-right-radius:0;
  border-bottom-right-radius:0
}

body.app-ui .installment-plan-pair>select{
  width:auto;
  min-width:104px;
  flex:0 0 auto;
  margin-left:-1px;
  border-top-left-radius:0;
  border-bottom-left-radius:0;
  background:var(--surface-2)
}

body.app-ui .installment-plan-pair>.form-control:focus{
  position:relative;
  z-index:1
}

@media(max-width:600px){
  body.app-ui .installment-plan-grid{
    grid-template-columns:minmax(0,1fr)
  }
}

/* Installment dialogs: payment and sell-on-instalments. */

.app-shell .installment-payment-dialog,body.app-ui .installment-payment-dialog{
  width:min(760px,calc(100vw - 32px))
}

.app-shell .installment-sell-dialog,body.app-ui .installment-sell-dialog{
  width:min(900px,calc(100vw - 32px))
}

/* Values the user cannot change read as a summary, not as disabled inputs. */

body.app-ui .installment-payment-summary{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;
  overflow:hidden;
  margin-bottom:14px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--border-2)
}

body.app-ui .installment-payment-summary>div{
  padding:10px 12px;
  background:var(--surface-2)
}

body.app-ui .installment-payment-summary span{
  display:block;
  color:var(--text-3);
  font-size:10px;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase
}

body.app-ui .installment-payment-summary strong{
  display:block;
  margin-top:3px;
  color:var(--text);
  font-size:13px;
  font-weight:800
}

body.app-ui .installment-payment-summary .is-numeric{
  font-variant-numeric:tabular-nums
}

body.app-ui .installment-payment-grid,body.app-ui .installment-sell-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px
}

body.app-ui .installment-sell-grid .is-wide-field{
  grid-column:1/-1
}

body.app-ui .installment-sell-dialog .help-block,body.app-ui .installment-payment-dialog .help-block{
  margin:5px 0 0;
  color:var(--text-3);
  font-size:11px
}

body.app-ui .installment-sell-totals{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-top:14px;
  padding:12px 14px;
  border:1px solid color-mix(in srgb,var(--brand) 24%,transparent);
  border-radius:12px;
  background:var(--brand-weak)
}

body.app-ui .installment-sell-totals span{
  display:block;
  margin-bottom:5px;
  color:var(--brand-strong);
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase
}

body.app-ui .installment-sell-totals .form-control{
  background:var(--surface);
  font-variant-numeric:tabular-nums;
  font-weight:750;
  text-align:right
}

@media(max-width:820px){
  body.app-ui .installment-payment-summary{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

  body.app-ui .installment-payment-grid,body.app-ui .installment-sell-grid,body.app-ui .installment-sell-totals{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}

@media(max-width:560px){
  body.app-ui .installment-payment-summary,body.app-ui .installment-payment-grid,body.app-ui .installment-sell-grid,body.app-ui .installment-sell-totals{
    grid-template-columns:minmax(0,1fr)
  }
}

/* Today's profit dialog. Shipped by every layout, so it keeps the Bootstrap class
   names; these rules only apply on the new stack. */

body.app-ui .todays-profit-dialog .modal-close-btn{
  float:none;
  font-size:17px;
  line-height:1;
  text-shadow:none;
  opacity:1
}

body.app-ui .todays-profit-dialog .modal-close-btn:hover{
  border-color:var(--brand);
  color:var(--brand);
  opacity:1
}

body.app-ui .todays-profit-dialog .repair-form-dialog-body{
  padding:16px
}

body.app-ui .todays-profit-dialog .repair-form-dialog-body .row{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  margin:0;
  gap:12px
}

body.app-ui .todays-profit-dialog .repair-form-dialog-body .row>div{
  width:auto;
  padding:0;
  float:none
}

/* Inventory count and report screens. */

body.app-ui .inventory-product-search{
  position:relative;
  margin:0 14px 12px;
  max-width:520px
}

body.app-ui .inventory-product-search-icon{
  position:absolute;
  top:50%;
  left:12px;
  display:grid;
  place-items:center;
  color:var(--text-3);
  transform:translateY(-50%);
  pointer-events:none
}

body.app-ui .inventory-product-search .form-control{
  height:42px;
  padding-left:36px
}

body.app-ui .inventory-count-input{
  height:34px;
  width:96px;
  padding:0 9px;
  font-variant-numeric:tabular-nums;
  text-align:right
}

body.app-ui .inventory-delta{
  display:inline-flex;
  height:22px;
  align-items:center;
  padding:0 8px;
  border-radius:999px;
  background:color-mix(in srgb,var(--chip-color,var(--text-3)) 12%,transparent);
  color:var(--chip-color,var(--text-2));
  font-size:12px;
  font-weight:700;
  font-variant-numeric:tabular-nums
}

body.app-ui .inventory-delta.is-up{
  --chip-color:var(--brand)
}

body.app-ui .inventory-delta.is-down{
  --chip-color:#d64545
}

body.app-ui .inventory-report-panes>.tab-pane{
  padding:0
}

body.app-ui .inventory-closed-state{
  display:grid;
  justify-items:center;
  padding:38px 20px 34px;
  gap:9px;
  text-align:center
}

body.app-ui .inventory-closed-icon{
  display:grid;
  width:52px;
  height:52px;
  place-items:center;
  border:1px solid var(--border);
  border-radius:15px;
  background:var(--surface-2);
  color:var(--text-3)
}

body.app-ui .inventory-closed-state h2{
  margin:5px 0 0;
  font-size:17px;
  font-weight:750
}

body.app-ui .inventory-closed-state p{
  margin:0;
  max-width:48ch;
  color:var(--text-2);
  font-size:13px
}

body.app-ui .inventory-closed-facts{
  display:grid;
  width:100%;
  max-width:640px;
  margin:16px 0 0;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:10px
}

body.app-ui .inventory-closed-facts>div{
  padding:11px 13px;
  border:1px solid var(--border);
  border-radius:11px;
  background:var(--surface-2);
  text-align:left
}

body.app-ui .inventory-closed-facts dt{
  margin:0 0 3px;
  color:var(--text-3);
  font-size:11px;
  font-weight:700;
  letter-spacing:.02em;
  text-transform:uppercase
}

body.app-ui .inventory-closed-facts dd{
  margin:0;
  font-size:13.5px;
  font-weight:650
}

body.app-ui .inventory-edit-summary{
  display:grid;
  margin:0 0 14px;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px
}

body.app-ui .inventory-edit-summary>div{
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:11px;
  background:var(--surface-2)
}

body.app-ui .inventory-edit-summary span{
  display:block;
  margin-bottom:3px;
  color:var(--text-3);
  font-size:11px;
  font-weight:700;
  letter-spacing:.02em;
  text-transform:uppercase
}

body.app-ui .inventory-edit-summary strong{
  font-size:15px;
  font-weight:750;
  font-variant-numeric:tabular-nums
}

@media(max-width:560px){
  body.app-ui .inventory-edit-summary{
    grid-template-columns:1fr
  }

  body.app-ui .inventory-product-search{
    max-width:none
  }
}

/* Spreadsheet editor chrome. The grid below it is drawn by luckysheet, so this bar is
   the only part of the page the design system owns. */

body.app-ui .sheet-editor-bar{
  display:flex;
  flex:0 0 auto;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:9px 14px;
  border-bottom:1px solid var(--border);
  background:var(--surface)
}

body.app-ui .sheet-editor-identity{
  display:flex;
  min-width:0;
  align-items:center;
  gap:10px
}

body.app-ui .sheet-editor-identity>div{
  display:grid;
  min-width:0
}

body.app-ui .sheet-editor-identity small{
  color:var(--text-3);
  font-size:11px;
  font-weight:650;
  letter-spacing:.02em;
  text-transform:uppercase
}

body.app-ui .sheet-editor-identity strong{
  overflow:hidden;
  font-size:15px;
  font-weight:750;
  text-overflow:ellipsis;
  white-space:nowrap
}

body.app-ui .sheet-editor-actions{
  display:flex;
  flex:0 0 auto;
  align-items:center;
  gap:8px
}

body.app-ui .sheet-editor-actions form{
  margin:0
}

body.app-ui .sheet-editor-import{
  display:inline-flex;
  height:38px;
  align-items:center;
  gap:7px;
  margin:0;
  padding:0 13px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface);
  color:var(--text-2);
  font-size:12.5px;
  font-weight:650;
  cursor:pointer;
  transition:.16s ease
}

body.app-ui .sheet-editor-import:hover{
  border-color:var(--brand);
  color:var(--brand)
}

body.app-ui .sheet-editor-import input[type=file]{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none
}

@media(max-width:680px){
  body.app-ui .sheet-editor-bar{
    align-items:stretch;
    flex-direction:column
  }

  body.app-ui .sheet-editor-actions{
    justify-content:flex-end
  }
}

/* Repair intake form pieces shared by the add and edit screens. */

body.app-ui .repair-location-picker{
  max-width:340px;
  margin:0 0 14px
}

body.app-ui .repair-part-search{
  position:relative
}

body.app-ui .repair-part-search-icon{
  position:absolute;
  top:50%;
  left:12px;
  display:grid;
  place-items:center;
  color:var(--text-3);
  transform:translateY(-50%);
  pointer-events:none
}

body.app-ui .repair-part-search .form-control{
  height:44px;
  padding-left:36px
}

body.app-ui .repair-notify-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 20px;
  padding:11px 13px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface-2)
}

body.app-ui .repair-notify-toggle{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:0;
  font-size:13px;
  font-weight:600;
  cursor:pointer
}

body.app-ui .repair-notify-toggle input{
  margin:0
}

body.app-ui .repair-notify-actions{
  display:flex;
  flex:1 1 auto;
  justify-content:flex-end;
  gap:8px
}

body.app-ui .repair-notify-actions .btn-ghost{
  height:38px;
  padding:0 13px;
  font-size:12.5px
}

body.app-ui .repair-parts-total{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  margin-top:10px;
  padding:11px 14px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface-2)
}

body.app-ui .repair-parts-total span{
  color:var(--text-3);
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.02em;
  text-transform:uppercase
}

body.app-ui .repair-parts-total strong{
  font-size:16px;
  font-weight:800;
  font-variant-numeric:tabular-nums
}

body.app-ui .repair-total-readout{
  display:grid;
  align-content:center;
  min-height:56px;
  padding:9px 13px;
  border:1px solid var(--border);
  border-radius:11px;
  background:var(--surface-2);
  gap:3px
}

body.app-ui .repair-total-readout span{
  color:var(--text-3);
  font-size:11px;
  font-weight:700;
  letter-spacing:.02em;
  text-transform:uppercase
}

body.app-ui .repair-total-readout strong{
  font-size:15px;
  font-weight:750;
  font-variant-numeric:tabular-nums
}

body.app-ui .repair-total-readout.is-grand{
  border-color:color-mix(in srgb,var(--brand) 40%,var(--border));
  background:var(--brand-weak)
}

body.app-ui .repair-total-readout.is-grand strong{
  color:var(--brand);
  font-size:18px;
  font-weight:800
}

body.app-ui .repair-reward-panel{
  padding:13px 15px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface-2)
}

body.app-ui .repair-reward-panel h4{
  margin:0 0 10px;
  font-size:14px;
  font-weight:750
}

body.app-ui .repair-reward-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px
}

body.app-ui .repair-reward-grid .form-group{
  margin:0
}

body.app-ui .repair-label-page .repair-label-sheet{
  padding:18px 0
}

@media(max-width:820px){
  body.app-ui .repair-reward-grid{
    grid-template-columns:1fr
  }

  body.app-ui .repair-notify-actions{
    flex:1 1 100%;
    justify-content:flex-start
  }
}

/* Base table. Only table.dataTable was styled, so any table that is not a DataTable —
   POS part lists, the inventory count, and every screen still on the legacy furniture
   layer — rendered as raw unstyled rows. Scoped with :not(.dataTable) so it cannot
   compete with the DataTables rules, which match at the same specificity.
   table-striped/table-bordered/table-condensed are AdminLTE skins that mean nothing
   here and are deliberately left as no-ops. */

.app-shell .table:not(.dataTable){
  width:100%;
  border-collapse:collapse;
  margin:0;
  background:transparent
}

.app-shell .table:not(.dataTable)>thead>tr>th,.app-shell .table:not(.dataTable)>thead>tr>td{
  padding:9px 14px;
  border:0;
  border-bottom:1px solid var(--border);
  color:var(--text-3);
  font-size:11px;
  font-weight:700;
  letter-spacing:.3px;
  text-align:left;
  text-transform:uppercase;
  white-space:nowrap
}

.app-shell .table:not(.dataTable)>tbody>tr>td,.app-shell .table:not(.dataTable)>tbody>tr>th{
  padding:10px 14px;
  border:0;
  border-top:1px solid var(--border-2);
  color:var(--text-2);
  font-size:12.5px;
  line-height:1.45;
  vertical-align:middle
}

.app-shell .table:not(.dataTable)>tbody>tr:first-child>td,.app-shell .table:not(.dataTable)>tbody>tr:first-child>th{
  border-top:0
}

.app-shell .table:not(.dataTable)>tbody>tr:hover>td,.app-shell .table:not(.dataTable)>tbody>tr:hover>th{
  background:var(--surface-2)
}

.app-shell .table:not(.dataTable)>tfoot>tr>td,.app-shell .table:not(.dataTable)>tfoot>tr>th{
  padding:10px 14px;
  border:0;
  border-top:1px solid var(--border);
  font-size:12.5px;
  font-weight:700
}

.app-shell .table td.is-numeric,.app-shell .table th.is-numeric{
  font-variant-numeric:tabular-nums;
  text-align:right;
  white-space:nowrap
}

.app-shell .table td.is-numeric .repair-invoice-row-actions{
  justify-content:flex-end
}

/* Row action menu, moved out of the row while open.
   A DataTable built with scrollX sits inside .dataTables_scrollBody{overflow:auto}, and
   .table-responsive and the card wrappers clip the same way, so an absolutely positioned
   menu opened inside one of them is invisible. layouts/master moves the menu to <body>
   for as long as it is open; these rules are what it needs once it is no longer a child
   of the .open button group that Bootstrap's own display rule keys off. */

.app-shell.table-action-portal{
  position:fixed;
  top:0;
  left:0;
  z-index:1080;
  width:0;
  height:0;
  background:transparent
}

.app-shell.table-action-portal .table-action-group{
  position:static
}

.app-shell.table-action-portal .table-action-menu.is-portaled{
  display:block;
  position:fixed;
  z-index:1080
}

/* Column flex items default to min-width:auto, so a card holding a wide table refuses to
   shrink below that table's intrinsic width. The card then grows past the shell, and the
   content column — which is overflow:hidden — simply cuts it off with nothing to scroll.
   The table's own scroll container is what should be doing the scrolling. */

.app-shell .page-shell{
  min-width:0
}

.app-shell .page-shell > *{
  min-width:0;
  max-width:100%
}

.app-shell .workspace-card,.app-shell .filter-card,.app-shell .data-table-card{
  min-width:0
}

.app-shell .table-responsive{
  max-width:100%;
  overflow-x:auto
}

.app-shell .dataTables_scroll,.app-shell .dataTables_scrollHead,.app-shell .dataTables_scrollBody{
  max-width:100%
}

/* ==========================================================================
   Field Force. The dashboard was built from AdminLTE stat widgets and the visit
   dialogs from the Bootstrap grid, none of which this stack styles.

   .workspace-card supplies no padding of its own — every block inside one has to
   carry its own gutter, and a table dropped straight into a card runs to the edges.
   ========================================================================== */

body.app-ui .field-force-stat-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  padding:14px;
  gap:12px
}

body.app-ui .field-force-stat-grid+.field-force-stat-grid{
  padding-top:0
}

body.app-ui .field-force-stat-grid.is-four{
  grid-template-columns:repeat(4,minmax(0,1fr))
}

body.app-ui .field-force-stat{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:14px 15px;
  border:1px solid var(--border);
  border-radius:13px;
  background:var(--surface);
  color:inherit;
  text-decoration:none;
  transition:.16s ease
}

body.app-ui a.field-force-stat:hover{
  border-color:color-mix(in srgb,var(--brand) 45%,var(--border));
  box-shadow:var(--shadow-sm);
  transform:translateY(-1px)
}

body.app-ui .field-force-stat-icon{
  display:grid;
  width:36px;
  height:36px;
  flex:none;
  place-items:center;
  border-radius:10px;
  background:color-mix(in srgb,var(--stat-color,var(--text-3)) 13%,transparent);
  color:var(--stat-color,var(--text-2))
}

body.app-ui .field-force-stat.is-good{
  --stat-color:var(--brand)
}

body.app-ui .field-force-stat.is-bad{
  --stat-color:#d64545
}

body.app-ui .field-force-stat>div{
  display:grid;
  min-width:0;
  gap:2px
}

body.app-ui .field-force-stat>div>span{
  color:var(--text-3);
  font-size:10.5px;
  font-weight:750;
  letter-spacing:.05em;
  line-height:1.35;
  text-transform:uppercase
}

body.app-ui .field-force-stat strong{
  font-size:26px;
  font-weight:800;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;
  line-height:1.1
}

body.app-ui .field-force-stat small{
  display:inline-flex;
  align-items:center;
  gap:4px;
  margin-top:2px;
  color:var(--brand);
  font-size:11.5px;
  font-weight:750
}

body.app-ui .field-force-stat small:after{
  content:"→"
}

body.app-ui a.field-force-stat:hover small{
  gap:7px
}

/* The "my visits" matrix: three periods against two kinds of visit. */

body.app-ui .field-force-matrix{
  max-width:560px;
  margin:0 14px 14px;
  border:1px solid var(--border);
  border-radius:13px;
  overflow:hidden
}

body.app-ui .field-force-matrix-head,body.app-ui .field-force-matrix-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) 96px 96px;
  align-items:center;
  gap:10px;
  padding:9px 14px
}

body.app-ui .field-force-matrix-head{
  border-bottom:1px solid var(--border);
  background:var(--surface-2)
}

body.app-ui .field-force-matrix-head span{
  color:var(--text-3);
  font-size:10.5px;
  font-weight:750;
  letter-spacing:.05em;
  text-align:right;
  text-transform:uppercase
}

body.app-ui .field-force-matrix-head span:first-child{
  text-align:left
}

body.app-ui .field-force-matrix-row+.field-force-matrix-row{
  border-top:1px solid var(--border-2)
}

body.app-ui .field-force-matrix-row:hover{
  background:var(--surface-2)
}

body.app-ui .field-force-matrix-row>span{
  color:var(--text-2);
  font-size:13px;
  font-weight:600
}

body.app-ui .field-force-matrix-row>strong{
  font-size:15px;
  font-weight:750;
  font-variant-numeric:tabular-nums;
  text-align:right
}

body.app-ui .field-force-matrix-row>strong:not(:empty){
  color:var(--text)
}

body.app-ui .field-force-assignees{
  display:flex;
  flex-wrap:wrap;
  gap:5px
}

body.app-ui .ff-assignee{
  display:inline-flex;
  align-items:center;
  max-width:100%;
  padding:2px 9px;
  border-radius:999px;
  background:var(--surface-2);
  border:1px solid var(--border-2);
  color:var(--text-2);
  font-size:11.5px;
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}

body.app-ui .field-force-assignee-filter{
  grid-column:span 2
}

/* To-do schedule cell: the estimated-duration chip beneath the start/end dates. */

body.app-ui .ff-est-chip{
  display:inline-flex;
  align-self:flex-start;
  margin-top:3px;
  padding:1px 8px;
  border-radius:999px;
  background:var(--surface-2);
  border:1px solid var(--border-2);
  color:var(--text-3);
  font-size:11px;
  font-weight:600
}

/* To-do comments. The box to write in sits at the top of the tab and the thread reads
   newest first beneath it, so opening a task puts both the newest note and the composer
   on screen without scrolling. Every row states its author and its full date and time. */

body.app-ui .todo-comments{
  display:flex;
  flex-direction:column
}

/* Composer: always open, sitting directly under the tab strip. */

body.app-ui .todo-composer{
  display:flex;
  gap:11px;
  align-items:flex-start;
  padding:2px 0 4px
}

body.app-ui .todo-composer__avatar{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:50%;
  background:var(--brand-weak);
  color:var(--brand-strong);
  font-size:13px;
  font-weight:750
}

body.app-ui .todo-composer__field{
  flex:1 1 auto;
  min-width:0
}

body.app-ui .todo-composer__input{
  min-height:60px;
  max-height:220px;
  resize:none;
  overflow-y:auto;
  line-height:1.55
}

body.app-ui .todo-composer__input:focus{
  border-color:color-mix(in srgb,var(--brand) 45%,var(--border))
}

body.app-ui .todo-composer__tools{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin-top:9px
}

body.app-ui .todo-composer__count{
  margin-left:auto;
  color:var(--text-3);
  font-size:11px;
  font-weight:650;
  font-variant-numeric:tabular-nums
}

body.app-ui .todo-composer__tools .add-comment-btn{
  margin-left:auto
}

body.app-ui .todo-composer__count:not(:empty)+.add-comment-btn{
  margin-left:10px
}

/* The thread. No inner scrollbar: the page scrolls once. */

body.app-ui .todo-comments-feed{
  display:flex;
  flex-direction:column;
  gap:2px;
  margin-top:6px
}

/* Date break: a hairline across the thread with the day sitting on it. */

body.app-ui .todo-comments-day{
  display:flex;
  align-items:center;
  gap:10px;
  margin:14px 0 8px
}

body.app-ui .todo-comments-day:first-child{
  margin-top:6px
}

body.app-ui .todo-comments-day:before,body.app-ui .todo-comments-day:after{
  content:"";
  flex:1 1 auto;
  height:1px;
  background:var(--border-2)
}

body.app-ui .todo-comments-day>span{
  flex:0 0 auto;
  padding:2px 10px;
  border:1px solid var(--border-2);
  border-radius:999px;
  background:var(--surface);
  color:var(--text-3);
  font-size:11px;
  font-weight:700;
  letter-spacing:.02em;
  white-space:nowrap
}

/* Empty thread: an invitation rather than a stray sentence. */

body.app-ui .todo-comments-empty{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding:26px 16px 30px;
  text-align:center
}

body.app-ui .todo-comments-empty__icon{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border-radius:50%;
  background:var(--surface-2);
  color:var(--text-3)
}

body.app-ui .todo-comments-empty__title{
  margin:2px 0 0;
  color:var(--text);
  font-size:13.5px;
  font-weight:750
}

body.app-ui .todo-comments-empty__hint{
  margin:0;
  max-width:340px;
  color:var(--text-3);
  font-size:12.5px;
  line-height:1.5
}

/* One comment: avatar, a byline that keeps the whole stamp, and the text. */

body.app-ui .todo-comment{
  position:relative;
  display:flex;
  gap:11px;
  align-items:flex-start;
  padding:9px 42px 9px 8px;
  border-radius:10px;
  transition:background .14s ease
}

body.app-ui .todo-comment:hover{
  background:var(--surface-2)
}

body.app-ui .todo-comment__avatar{
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  border-radius:50%;
  background:var(--surface-3);
  color:var(--text-2);
  font-size:12.5px;
  font-weight:750
}

body.app-ui .todo-comment--own .todo-comment__avatar{
  background:var(--brand-weak);
  color:var(--brand-strong)
}

body.app-ui .todo-comment__body{
  flex:1 1 auto;
  min-width:0
}

body.app-ui .todo-comment__head{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:6px
}

body.app-ui .todo-comment__name{
  color:var(--text);
  font-size:13px;
  font-weight:750
}

body.app-ui .todo-comment__you{
  padding:1px 6px;
  border-radius:999px;
  background:var(--brand-weak);
  color:var(--brand-strong);
  font-size:10px;
  font-weight:750;
  letter-spacing:.03em;
  line-height:1.5;
  text-transform:uppercase
}

body.app-ui .todo-comment__dot{
  color:var(--border);
  font-size:11px
}

body.app-ui .todo-comment__stamp{
  color:var(--text-3);
  font-size:11.5px;
  font-weight:650;
  font-variant-numeric:tabular-nums
}

body.app-ui .todo-comment__ago{
  color:var(--text-3);
  font-size:11px;
  font-weight:600;
  opacity:.8
}

body.app-ui .todo-comment__ago:before{
  content:"· "
}

body.app-ui .todo-comment__body-text{
  margin-top:3px
}

body.app-ui .todo-comment__text{
  display:-webkit-box;
  -webkit-line-clamp:6;
  -webkit-box-orient:vertical;
  overflow:hidden;
  color:var(--text-2);
  font-size:13.5px;
  line-height:1.55;
  white-space:pre-wrap;
  word-break:break-word
}

body.app-ui .todo-comment__body-text.is-open .todo-comment__text{
  -webkit-line-clamp:unset;
  overflow:visible
}

body.app-ui .todo-comment__more{
  margin-top:4px;
  padding:0;
  border:0;
  background:transparent;
  color:var(--brand-strong);
  font-size:11.5px;
  font-weight:700;
  cursor:pointer
}

body.app-ui .todo-comment__more:hover{
  text-decoration:underline
}

/* A comment that just landed marks itself for a moment, otherwise a post into a thread
   already holding a dozen notes looks like nothing happened. */

body.app-ui .todo-comment.is-fresh{
  animation:todo-comment-in .9s ease
}

@keyframes todo-comment-in{
  0%{
    background:var(--brand-weak)
  }

  100%{
    background:transparent
  }
}

/* The older half of a long thread, folded away until asked for. */

body.app-ui .todo-comment--older,body.app-ui .todo-comments-day--older{
  display:none
}

body.app-ui .todo-comments-feed.is-showing-older .todo-comment--older{
  display:flex
}

body.app-ui .todo-comments-feed.is-showing-older .todo-comments-day--older{
  display:flex
}

body.app-ui .todo-comments-more{
  align-self:flex-start;
  margin-top:10px;
  padding:6px 12px;
  border:1px solid var(--border-2);
  border-radius:999px;
  background:var(--surface);
  color:var(--text-2);
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  transition:background .14s ease,border-color .14s ease,color .14s ease
}

body.app-ui .todo-comments-more:hover{
  border-color:var(--brand);
  background:var(--brand-weak);
  color:var(--brand-strong)
}

/* The trash icon only appears on the row the pointer is over, or when it takes focus. */

body.app-ui .todo-comment__delete{
  position:absolute;
  top:8px;
  right:8px;
  display:grid;
  place-items:center;
  width:26px;
  height:26px;
  padding:0;
  border:0;
  border-radius:7px;
  background:transparent;
  color:var(--text-3);
  opacity:0;
  cursor:pointer;
  transition:opacity .14s ease,background .14s ease,color .14s ease
}

body.app-ui .todo-comment:hover .todo-comment__delete,body.app-ui .todo-comment__delete:focus-visible{
  opacity:1
}

body.app-ui .todo-comment__delete:hover{
  background:var(--danger-weak);
  color:var(--danger)
}

@media (max-width:767px){
  body.app-ui .todo-comment__delete{
    opacity:1
  }

  body.app-ui .todo-comment__ago{
    display:none
  }
}

/* Comment count beside the Comments tab label. */

body.app-ui .section-tabs__count{
  display:inline-grid;
  place-items:center;
  min-width:20px;
  height:20px;
  padding:0 6px;
  border-radius:999px;
  background:var(--surface-3);
  color:var(--text-2);
  font-size:11px;
  font-weight:750;
  font-variant-numeric:tabular-nums
}

body.app-ui .section-tabs a.active .section-tabs__count{
  background:var(--brand-weak);
  color:var(--brand-strong)
}

/* Task history as a timeline: coloured dots on a rail, each carrying the action, who did
   it and when, with any status change shown as before -> after chips. */

body.app-ui .todo-activity{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:4px 0
}

body.app-ui .todo-activity__item{
  position:relative;
  display:flex;
  gap:12px;
  padding-bottom:16px
}

body.app-ui .todo-activity__item:last-child{
  padding-bottom:0
}

body.app-ui .todo-activity__item:not(:last-child)::before{
  content:"";
  position:absolute;
  left:13px;
  top:26px;
  bottom:0;
  width:2px;
  background:var(--border-2)
}

body.app-ui .todo-activity__dot{
  position:relative;
  z-index:1;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  width:26px;
  height:26px;
  border-radius:50%;
  border:1px solid var(--border);
  background:var(--surface-2);
  color:var(--text-3)
}

body.app-ui .todo-activity__dot--add{
  border-color:color-mix(in srgb,var(--brand) 30%,var(--border));
  background:var(--brand-weak);
  color:var(--brand-strong)
}

body.app-ui .todo-activity__dot--edit{
  border-color:color-mix(in srgb,var(--blue) 30%,var(--border));
  background:var(--blue-weak);
  color:var(--blue)
}

/* Each event reads as a card beside its rail dot: header row, then one aligned,
   divided line per changed field. */

body.app-ui .todo-activity__body{
  flex:1 1 auto;
  min-width:0;
  border:1px solid var(--border-2);
  border-radius:10px;
  background:var(--surface);
  padding:9px 14px 4px;
  box-shadow:0 1px 2px rgba(16,31,24,.04)
}

body.app-ui .todo-activity__head{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  padding-bottom:8px;
  border-bottom:1px dashed var(--border-2)
}

body.app-ui .todo-activity__action{
  font-size:12.5px;
  font-weight:800
}

body.app-ui .todo-activity__action--add{
  color:var(--brand-strong)
}

body.app-ui .todo-activity__action--edit{
  color:var(--blue)
}

body.app-ui .todo-activity__by{
  color:var(--text);
  font-size:12.5px;
  font-weight:650
}

body.app-ui .todo-activity__time{
  margin-left:auto;
  color:var(--text-3);
  font-size:11px;
  font-weight:600;
  font-variant-numeric:tabular-nums
}

body.app-ui .todo-activity__change{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:7px;
  margin:0;
  padding:8px 0;
  border-bottom:1px solid var(--border-2)
}

body.app-ui .todo-activity__change:last-child{
  border-bottom:0
}

body.app-ui .todo-activity__field-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--text-3)
}

body.app-ui .todo-activity__label{
  min-width:92px;
  color:var(--text-3);
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.03em
}

body.app-ui .todo-activity__was{
  color:var(--text-3);
  font-size:12px;
  font-weight:600;
  text-decoration:line-through;
  text-decoration-color:var(--border)
}

body.app-ui .todo-activity__now{
  color:var(--text);
  font-size:12.5px;
  font-weight:700
}

/* Who joined the task and who came off it, rather than the whole list twice. */

body.app-ui .todo-activity__people{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:5px
}

body.app-ui .todo-activity__person{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:1px 8px;
  border:1px solid var(--border-2);
  border-radius:999px;
  font-size:11.5px;
  font-weight:650
}

body.app-ui .todo-activity__person--in{
  border-color:color-mix(in srgb,var(--brand) 32%,var(--border));
  background:var(--brand-weak);
  color:var(--brand-strong)
}

body.app-ui .todo-activity__person--in:before{
  content:"+";
  font-weight:800
}

body.app-ui .todo-activity__person--out{
  background:var(--surface-2);
  color:var(--text-3);
  text-decoration:line-through;
  text-decoration-color:var(--border)
}

body.app-ui .todo-activity__person--out:before{
  content:"−";
  font-weight:800;
  text-decoration:none
}

/* A changed description is a sentence, not a chip: let it wrap under its label. */

body.app-ui .todo-activity__change{
  align-items:flex-start
}

body.app-ui .todo-activity__was,body.app-ui .todo-activity__now{
  overflow-wrap:anywhere;
  word-break:break-word
}

body.app-ui .todo-activity__arrow{
  display:inline-flex;
  color:var(--text-3)
}

body.app-ui .todo-activity__muted{
  margin:0;
  padding:8px 0;
  color:var(--text-3);
  font-size:12px;
  font-style:italic
}

body.app-ui .todo-activity__note{
  margin:0;
  padding:8px 0;
  color:var(--text-2);
  font-size:12.5px;
  line-height:1.5;
  word-break:break-word;
  border-top:1px dashed var(--border-2)
}

/* To-do task cell: reference caption, title (clamped), then a meta row with priority
   and a quiet Docs button. */

/* The ToDo filters are four useful controls, not four equal slivers. The date needs more room
   on a desktop; on a phone the owner and date form full-width anchors around a compact
   Priority / Status pair. */

body.app-ui .essentials-todo-filter-grid{
  grid-template-columns:minmax(180px,1.2fr) repeat(2,minmax(140px,.8fr)) minmax(230px,1.35fr);
  gap:14px
}

body.app-ui .essentials-todo-filter-grid .select2-container{
  width:100%!important;
  max-width:100%
}

body.app-ui .essentials-todo-date-filter .form-control{
  min-width:0;
  text-overflow:ellipsis
}

@media(max-width:1000px){
  body.app-ui .essentials-todo-filter-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}

@media(max-width:700px){
  body.app-ui .essentials-todo-filters>.section-head{
    padding:12px
  }

  body.app-ui .essentials-todo-filter-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px 10px;
    padding:12px
  }

  body.app-ui .essentials-todo-owner-filter,body.app-ui .essentials-todo-date-filter{
    grid-column:1/-1
  }

  body.app-ui .essentials-todo-card .table-toolbar-buttons{
    width:100%;
    padding:8px 0 0;
    border:0;
    border-top:1px solid var(--border-2)
  }

  body.app-ui .essentials-todo-card .table-toolbar-buttons .btn-primary{
    width:100%;
    height:38px;
    justify-content:center
  }
}

@media(max-width:380px){
  body.app-ui .essentials-todo-filter-grid{
    grid-template-columns:minmax(0,1fr)
  }

  body.app-ui .essentials-todo-filter-grid>*{
    grid-column:auto
  }
}

body.app-ui td.ff-col-task{
  min-width:240px;
  max-width:320px;
  white-space:normal
}

body.app-ui .todo-task{
  display:flex;
  flex-direction:column;
  gap:5px
}

body.app-ui .todo-task__id{
  color:var(--text-3);
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.02em
}

body.app-ui .todo-task__title{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  color:var(--text);
  font-size:13px;
  font-weight:700;
  line-height:1.35;
  text-decoration:none
}

body.app-ui .todo-task__title:hover{
  color:var(--brand-strong);
  text-decoration:underline
}

body.app-ui .todo-task__meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px
}

body.app-ui .todo-task__docs{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:2px 9px;
  border-radius:7px;
  background:var(--surface-2);
  border:1px solid var(--border-2);
  color:var(--text-2);
  font-size:11.5px;
  font-weight:650;
  text-decoration:none;
  cursor:pointer
}

body.app-ui .todo-task__docs:hover{
  background:var(--brand-weak);
  border-color:var(--brand);
  color:var(--brand-strong)
}

body.app-ui .todo-task__docs>svg{
  flex:0 0 auto
}

/* Task Reminder badge on the listing: green bell + planned count while the schedule runs,
   amber once the deadline passed and the daily overdue nag carries on, quiet when completed. */

body.app-ui .todo-task__reminder{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:2px 9px;
  border-radius:7px;
  background:var(--brand-weak);
  border:1px solid var(--brand);
  color:var(--brand-ink);
  font-size:11.5px;
  font-weight:650;
  text-decoration:none;
  cursor:pointer
}

body.app-ui .todo-task__reminder:hover{
  background:var(--brand);
  color:#fff
}

body.app-ui .todo-task__reminder.is-overdue:hover{
  background:var(--warn);
  color:#fff
}

body.app-ui .todo-task__reminder.is-done:hover{
  background:var(--surface-3);
  color:var(--text-2)
}

body.app-ui .todo-task__reminder.is-overdue{
  background:var(--warn-weak);
  border-color:var(--warn);
  color:var(--warn)
}

body.app-ui .todo-task__reminder.is-done{
  background:var(--surface-2);
  border-color:var(--border-2);
  color:var(--text-3)
}

body.app-ui .todo-task__reminder svg{
  flex:0 0 auto;
  width:12px;
  height:12px
}

body.app-ui button.todo-task__reminder{
  margin-top:4px
}

/* Add-visit form: a two-column grid so the short fields pair up and the dialog stops
   running tall with half-empty rows. Full-width rows opt in with .ff-span-2. */

body.app-ui .ff-visit-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px 16px;
  align-items:start
}

body.app-ui .ff-visit-grid .ff-span-2{
  grid-column:1 / -1
}

@media(max-width:640px){
  body.app-ui .ff-visit-grid{
    grid-template-columns:minmax(0,1fr)
  }
}

/* Tall To-do dialog: the whole dialog scrolls as one with the modal backdrop — no inner
   body scrollbar, header and footer flow with the content (owner's call 2026-09-04; the
   pinned-header variant hid the reminder section behind a nested scroll). */

/* Add-visit footer: Close sits to the left, Save to the right. */

body.app-ui .repair-form-dialog-footer .ff-close-left{
  margin-right:auto
}

/* Save stays visibly inert until every required field is filled. */

body.app-ui .repair-form-dialog-footer .btn-primary:disabled{
  opacity:.5;
  cursor:not-allowed;
  pointer-events:none
}

body.app-ui .field-force-choice{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:9px 14px;
  margin:0 0 14px;
  padding:11px 13px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface-2)
}

body.app-ui .field-force-choice legend{
  width:100%;
  margin:0 0 3px;
  padding:0;
  border:0;
  color:var(--text-3);
  font-size:11px;
  font-weight:700;
  letter-spacing:.02em;
  text-transform:uppercase
}

body.app-ui .field-force-choice label{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin:0;
  font-size:13px;
  font-weight:600;
  cursor:pointer
}

body.app-ui .field-force-choice label.is-locked{
  color:var(--text-3);
  cursor:not-allowed;
  text-decoration:line-through
}

body.app-ui .field-force-choice input{
  margin:0
}

body.app-ui .field-force-dialog-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 14px
}

body.app-ui .field-force-meet-section{
  margin:0 0 14px;
  border:1px solid var(--border);
  border-radius:12px;
  overflow:hidden
}

body.app-ui .field-force-meet-section h5{
  margin:0;
  padding:10px 13px;
  border-bottom:1px solid var(--border);
  background:var(--surface-2);
  font-size:12px;
  font-weight:750;
  letter-spacing:.02em;
  text-transform:uppercase
}

body.app-ui .field-force-meet-section .form-control{
  height:34px;
  padding:0 9px;
  font-size:12.5px
}

body.app-ui .field-force-location{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px
}

body.app-ui .field-force-location .btn-ghost{
  height:36px;
  padding:0 12px;
  font-size:12.5px
}

body.app-ui .field-force-location>div{
  color:var(--text-2);
  font-size:13px
}

body.app-ui .field-force-detail-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  margin:0 0 14px;
  gap:10px
}

body.app-ui .field-force-detail-grid>div{
  display:grid;
  align-content:start;
  padding:10px 13px;
  border:1px solid var(--border);
  border-radius:11px;
  background:var(--surface-2);
  gap:3px
}

body.app-ui .field-force-detail-wide{
  grid-column:1 / -1
}

body.app-ui .field-force-detail-grid span{
  color:var(--text-3);
  font-size:11px;
  font-weight:700;
  letter-spacing:.02em;
  text-transform:uppercase
}

body.app-ui .field-force-detail-grid strong{
  font-size:13.5px;
  font-weight:650;
  line-height:1.45
}

body.app-ui .field-force-detail-grid small{
  color:var(--text-3);
  font-size:12px
}

body.app-ui .field-force-map-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:5px;
  font-size:12.5px;
  font-weight:700
}

body.app-ui .field-force-photo{
  margin:0 0 14px
}

body.app-ui .field-force-photo h5{
  margin:0 0 7px;
  color:var(--text-3);
  font-size:11px;
  font-weight:700;
  letter-spacing:.02em;
  text-transform:uppercase
}

body.app-ui .field-force-photo img{
  max-width:220px;
  border:1px solid var(--border);
  border-radius:11px
}

body.app-ui .field-force-view-dialog .repair-form-dialog-content{
  max-width:920px
}

@media(max-width:1100px){
  body.app-ui .field-force-stat-grid.is-four{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}

@media(max-width:680px){
  body.app-ui .field-force-stat-grid,body.app-ui .field-force-stat-grid.is-four,body.app-ui .field-force-dialog-grid,body.app-ui .field-force-detail-grid{
    grid-template-columns:1fr
  }

  body.app-ui .field-force-assignee-filter{
    grid-column:auto
  }

  body.app-ui .field-force-matrix{
    margin-right:12px;
    margin-left:12px
  }

  body.app-ui .field-force-matrix-head,body.app-ui .field-force-matrix-row{
    grid-template-columns:minmax(0,1fr) 62px 62px
  }
}

/* Shared listing column shapes. Squeezing a dozen columns into the container width
   broke dates across three lines at their hyphens, stacked chips one per line and let a
   wordy row set the height of every other one. Tables that opt in with scrollX give their
   columns these classes so each one keeps its shape. Scoped past the DataTables base
   rules so white-space and width actually take. */

.app-shell table.dataTable tbody td.ff-col-date,
.app-shell table.dataTable tbody td.ff-col-id,
.app-shell table.dataTable tbody td.ff-col-nowrap,
.app-shell table.dataTable tbody td.ff-col-status,
.app-shell table.dataTable tbody td.ff-col-action{
  white-space:nowrap
}

.app-shell table.dataTable tbody td.ff-col-date{
  min-width:132px;
  font-variant-numeric:tabular-nums
}

.app-shell table.dataTable tbody td.ff-col-id{
  min-width:112px;
  font-variant-numeric:tabular-nums;
  font-weight:700
}

.app-shell table.dataTable tbody td.ff-col-nowrap{
  min-width:120px
}

.app-shell table.dataTable tbody td.ff-col-contact{
  min-width:150px;
  max-width:210px
}

.app-shell table.dataTable tbody td.ff-col-people{
  min-width:170px;
  max-width:250px
}

.app-shell table.dataTable tbody td.ff-col-text{
  min-width:200px;
  max-width:290px;
  cursor:pointer
}

/* A td has to stay display:table-cell, so the clamp goes on an inner element. The table
   layout algorithm treats max-width on a cell as a suggestion, so the width has to be
   carried by that inner block too — without it a long value simply grows the cell and
   paints across the columns beside it. */

.app-shell td.ff-col-text .ff-clamp{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  overflow:hidden;
  max-width:290px;
  overflow-wrap:anywhere
}

/* Same reason, for cells that carry no clamp of their own. */

.app-shell table.dataTable tbody td.ff-col-text,
.app-shell table.dataTable tbody td.ff-col-people,
.app-shell table.dataTable tbody td.ff-col-contact{
  white-space:normal;
  overflow-wrap:anywhere
}

.app-shell td.ff-col-text.is-expanded .ff-clamp{
  -webkit-line-clamp:unset;
  display:block;
  overflow:visible
}

.app-shell td.ff-col-text:empty:before{
  content:"—";
  color:var(--text-3)
}

.app-shell table.dataTable tbody td,.app-shell table.dataTable tbody th{
  vertical-align:top
}

.app-shell .field-force-assignees .status-chip{
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .ff-muted{
  color:var(--text-3);
  font-style:italic
}

/* ==========================================================================
   HRM dashboard. Built from AdminLTE widgets on a Bootstrap grid, with the
   today/upcoming lists as tables carrying a grey header row and a spacer row of
   non-breaking spaces between the two halves.
   ========================================================================== */

body.app-ui .hrm-card-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:start;
  gap:14px
}

body.app-ui .hrm-card{
  min-width:0
}

body.app-ui .hrm-period-list{
  padding:12px 14px 14px
}

body.app-ui .hrm-period-group+.hrm-period-group{
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid var(--border-2)
}

body.app-ui .hrm-period-group h4{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin:0 0 8px;
  color:var(--text-3);
  font-size:10.5px;
  font-weight:750;
  letter-spacing:.05em;
  text-transform:uppercase
}

body.app-ui .hrm-period-group h4>span{
  display:inline-grid;
  min-width:20px;
  height:20px;
  place-items:center;
  padding:0 6px;
  border-radius:999px;
  background:var(--surface-2);
  color:var(--text-2);
  font-size:11px;
  font-weight:750;
  letter-spacing:0
}

body.app-ui .hrm-period-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:8px 0
}

body.app-ui .hrm-period-row+.hrm-period-row{
  border-top:1px solid var(--border-2)
}

body.app-ui .hrm-period-row>div{
  display:grid;
  min-width:0;
  gap:1px
}

body.app-ui .hrm-period-row strong{
  font-size:13px;
  font-weight:650;
  line-height:1.35
}

body.app-ui .hrm-period-row small{
  color:var(--text-3);
  font-size:11.5px
}

body.app-ui .hrm-period-meta{
  flex:0 0 auto;
  color:var(--text-2);
  font-size:12px;
  font-weight:650;
  font-variant-numeric:tabular-nums;
  white-space:nowrap
}

body.app-ui .hrm-period-empty{
  margin:0;
  padding:10px 0;
  color:var(--text-3);
  font-size:12.5px
}

body.app-ui .hrm-achieved-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  padding:14px 14px 0;
  gap:10px
}

body.app-ui .hrm-achieved-grid>div{
  display:grid;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:11px;
  background:var(--surface-2);
  gap:2px
}

body.app-ui .hrm-achieved-grid span{
  color:var(--text-3);
  font-size:10.5px;
  font-weight:750;
  letter-spacing:.05em;
  line-height:1.3;
  text-transform:uppercase
}

body.app-ui .hrm-achieved-grid strong{
  color:var(--brand-strong);
  font-size:17px;
  font-weight:800;
  font-variant-numeric:tabular-nums
}

body.app-ui .hrm-card-table{
  padding:12px 14px 14px
}

body.app-ui .hrm-card-table .table:not(.dataTable)>thead>tr>th{
  padding-left:0;
  padding-right:0
}

body.app-ui .hrm-card-table .table:not(.dataTable)>tbody>tr>td{
  padding-left:0;
  padding-right:0;
  font-size:12.5px
}

body.app-ui .hrm-card-table .table:not(.dataTable)>tbody>tr:hover>td{
  background:transparent
}

body.app-ui .hrm-card-table small{
  display:block;
  color:var(--text-3);
  font-size:11.5px
}

body.app-ui .hrm-muted{
  color:var(--text-3)
}

@media(max-width:1200px){
  body.app-ui .hrm-card-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}

@media(max-width:760px){
  body.app-ui .hrm-card-grid,body.app-ui .hrm-achieved-grid{
    grid-template-columns:1fr
  }
}

/* HRM forms and dialogs. */

body.app-ui .hrm-choice{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:9px 16px;
  margin:0;
  padding:11px 13px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface-2)
}

body.app-ui .hrm-choice legend{
  width:100%;
  margin:0 0 4px;
  padding:0;
  border:0;
  color:var(--text-3);
  font-size:10.5px;
  font-weight:750;
  letter-spacing:.05em;
  text-transform:uppercase
}

body.app-ui .hrm-choice label{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin:0;
  font-size:13px;
  font-weight:600;
  cursor:pointer
}

body.app-ui .hrm-choice input{
  margin:0
}

body.app-ui .hrm-table-card td.ff-col-action,body.app-ui .hrm-table-card th:first-child{
  width:1%;
  white-space:nowrap
}

body.app-ui .hrm-dialog-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 14px
}

body.app-ui .hrm-instructions{
  margin:4px 0 0;
  padding:11px 13px;
  border:1px solid var(--border);
  border-radius:11px;
  background:var(--surface-2);
  color:var(--text-2);
  font-size:12.5px;
  line-height:1.55
}

body.app-ui .hrm-instructions :last-child{
  margin-bottom:0
}

@media(max-width:620px){
  body.app-ui .hrm-dialog-grid{
    grid-template-columns:1fr
  }
}

/* Attendance: clock in/out, tab-level filters and the import form. */

body.app-ui .hrm-notice{
  display:flex;
  align-items:flex-start;
  gap:9px;
  padding:11px 14px;
  border:1px solid color-mix(in srgb,var(--danger) 30%,var(--border));
  border-radius:12px;
  background:var(--danger-weak);
  color:var(--danger);
  font-size:13px;
  font-weight:600
}

/* Tab-level filters. These sat loose on the card with nothing framing them and no
   separation from the toolbar underneath, so they read as stray fields. */

body.app-ui .hrm-filter-bar{
  margin:0;
  padding:14px;
  border-bottom:1px solid var(--border-2);
  background:transparent
}

body.app-ui .hrm-filter-bar-head{
  display:flex;
  align-items:center;
  gap:7px;
  margin-bottom:10px;
  color:var(--text-3)
}

body.app-ui .hrm-filter-bar-head span{
  font-size:10.5px;
  font-weight:750;
  letter-spacing:.05em;
  text-transform:uppercase
}

/* auto-fit stretched a lone filter across the whole card. Columns are a fixed width,
   so one filter stays the size of its field and two sit side by side. */

body.app-ui .hrm-filter-bar-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(240px,260px));
  gap:12px
}

body.app-ui .hrm-filter-bar-grid>*{
  min-width:0
}

/* The pane had a 14px strip below it, which left the table footer's own bottom border
   and the card's border separated by an empty band that read as a doubled line. The
   footer already carries its own padding, so it closes the card directly. A pane that
   ends in something other than a table still needs the gap. */

body.app-ui .workspace-card>.tab-content>.tab-pane{
  padding-bottom:14px
}

body.app-ui .workspace-card>.tab-content>.tab-pane:has(>.data-table-card:last-child){
  padding-bottom:0
}

body.app-ui .hrm-total-hours{
  display:inline-flex;
  align-items:center;
  gap:9px;
  margin:12px 14px 0;
  padding:9px 14px;
  border:1px solid var(--border);
  border-radius:11px;
  background:var(--surface-2)
}

body.app-ui .hrm-total-hours span{
  color:var(--text-3);
  font-size:10.5px;
  font-weight:750;
  letter-spacing:.05em;
  text-transform:uppercase
}

body.app-ui .hrm-total-hours strong{
  font-size:16px;
  font-weight:800;
  font-variant-numeric:tabular-nums
}

body.app-ui .hrm-import{
  padding:14px
}

body.app-ui .hrm-import-form{
  max-width:520px;
  margin:0 0 16px
}

body.app-ui .hrm-import-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin-top:12px
}

/* The primary action ends the toolbar. The rule marks it off from the export and
   page-size controls, which are utilities rather than the action of the screen. */

body.app-ui .table-toolbar-buttons{
  display:flex;
  align-items:center;
  gap:8px;
  padding-left:12px;
  border-left:1px solid var(--border-2)
}

body.app-ui .table-toolbar-buttons .btn-primary{
  height:34px;
  padding:0 12px;
  font-size:12px
}

body.app-ui .fhelp{
  display:block;
  margin-top:5px;
  color:var(--text-3);
  font-size:11.5px;
  line-height:1.45
}

/* Assign users to a shift. The list runs to every user in the business, so it needs a
   search, a select-all and a scroll of its own rather than growing the whole dialog. */

body.app-ui .hrm-assign-dialog .repair-form-dialog-content{
  max-width:860px
}

body.app-ui .hrm-assign-body{
  display:flex;
  flex-direction:column;
  min-height:0;
  padding-bottom:0
}

body.app-ui .hrm-assign-tools{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin:0 0 12px
}

body.app-ui .hrm-assign-search{
  position:relative;
  flex:1 1 240px;
  min-width:0
}

body.app-ui .hrm-assign-search>span{
  position:absolute;
  top:50%;
  left:12px;
  display:grid;
  place-items:center;
  color:var(--text-3);
  transform:translateY(-50%);
  pointer-events:none
}

body.app-ui .hrm-assign-search .form-control{
  height:40px;
  padding-left:36px
}

body.app-ui .hrm-assign-all{
  display:inline-flex;
  align-items:center;
  gap:7px;
  height:40px;
  margin:0;
  padding:0 13px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface-2);
  font-size:12.5px;
  font-weight:700;
  cursor:pointer
}

body.app-ui .hrm-assign-all input{
  margin:0
}

body.app-ui .hrm-assign-count{
  display:inline-grid;
  min-width:34px;
  height:40px;
  place-items:center;
  padding:0 11px;
  border:1px solid color-mix(in srgb,var(--brand) 32%,var(--border));
  border-radius:10px;
  background:var(--brand-weak);
  color:var(--brand-strong);
  font-size:13px;
  font-weight:800;
  font-variant-numeric:tabular-nums
}

body.app-ui .hrm-assign-table{
  overflow-y:auto;
  max-height:52vh;
  border:1px solid var(--border);
  border-radius:12px
}

body.app-ui .hrm-assign-table .table:not(.dataTable)>thead>tr>th{
  position:sticky;
  top:0;
  z-index:2;
  background:var(--surface-2)
}

body.app-ui .hrm-assign-tick{
  width:1%;
  white-space:nowrap
}

body.app-ui .hrm-assign-row label{
  margin:0;
  font-size:13px;
  font-weight:600;
  cursor:pointer
}

body.app-ui .hrm-assign-row .form-control{
  height:34px;
  padding:0 10px;
  font-size:12.5px
}

/* An unticked row posts nothing, so its dates are dimmed until it is on. */

body.app-ui .hrm-assign-row:not(.is-on) .form-control{
  background:var(--surface-2);
  color:var(--text-3)
}

body.app-ui .hrm-assign-row.is-on>td{
  background:color-mix(in srgb,var(--brand) 5%,transparent)
}

/* Host for date pickers that must escape a scrolling dialog. It is fixed, and so
   non-static, which is what the picker library requires of its widget parent: given
   a static one it walks up looking for a positioned ancestor and throws when it
   finds none, so the picker simply never appears. Zero size, so it only ever
   occupies the space its child asks for. */

#datetimepicker_portal{
  position:fixed;
  top:0;
  left:0;
  z-index:1100;
  width:0;
  height:0;
  background:transparent
}

/* Hidden until the handler has placed it, so it cannot be seen at the host corner
   even for a frame. The library builds a fresh widget on every open, so this never
   carries a stale class. */

#datetimepicker_portal>.bootstrap-datetimepicker-widget{
  z-index:1100;
  visibility:hidden
}

#datetimepicker_portal>.bootstrap-datetimepicker-widget.is-placed{
  visibility:visible
}

@media(max-width:680px){
  body.app-ui .hrm-assign-table{
    max-height:46vh
  }
}

/* Shift dialog: the type is a described choice rather than a bare select. */

body.app-ui .hrm-shift-type{
  margin:0 0 14px;
  padding:0;
  border:0
}

body.app-ui .hrm-shift-type legend{
  width:100%;
  margin:0 0 7px;
  padding:0;
  border:0;
  color:var(--text-2);
  font-size:12.5px;
  font-weight:700
}

body.app-ui .hrm-shift-type legend .req{
  color:var(--danger)
}

body.app-ui .hrm-shift-option{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin:0 0 8px;
  padding:11px 13px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface);
  cursor:pointer;
  transition:.16s ease
}

body.app-ui .hrm-shift-option:last-child{
  margin-bottom:0
}

body.app-ui .hrm-shift-option:hover{
  border-color:color-mix(in srgb,var(--brand) 38%,var(--border))
}

body.app-ui .hrm-shift-option.is-on{
  border-color:var(--brand);
  background:var(--brand-weak)
}

body.app-ui .hrm-shift-option input{
  margin:2px 0 0
}

body.app-ui .hrm-shift-option>span{
  display:grid;
  min-width:0;
  gap:2px
}

body.app-ui .hrm-shift-option strong{
  font-size:13.5px;
  font-weight:700
}

body.app-ui .hrm-shift-option small{
  color:var(--text-3);
  font-size:12px;
  line-height:1.45
}

body.app-ui .hrm-shift-option.is-on small{
  color:var(--text-2)
}

body.app-ui .hrm-toggle-row{
  padding:11px 13px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface-2)
}

body.app-ui .hrm-toggle{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin:0;
  cursor:pointer
}

body.app-ui .hrm-toggle input{
  margin:2px 0 0
}

body.app-ui .hrm-toggle>span{
  display:grid;
  min-width:0;
  gap:2px
}

body.app-ui .hrm-toggle strong{
  font-size:13.5px;
  font-weight:700
}

body.app-ui .hrm-toggle small{
  color:var(--text-3);
  font-size:12px;
  line-height:1.45
}

body.app-ui .hrm-toggle-detail{
  max-width:260px;
  margin-top:11px;
  padding-top:11px;
  border-top:1px solid var(--border)
}

/* Add attendance: one card per employee rather than a row in a seven-column table. */

body.app-ui .hrm-attendance-dialog .repair-form-dialog-content{
  max-width:880px
}

body.app-ui .hrm-attendance-list{
  display:grid;
  gap:12px;
  margin-top:4px
}

body.app-ui .hrm-attendance-entry{
  border:1px solid var(--border);
  border-radius:13px;
  background:var(--surface-2);
  overflow:hidden
}

body.app-ui .hrm-attendance-entry>header{
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 13px;
  border-bottom:1px solid var(--border);
  background:var(--surface)
}

body.app-ui .hrm-attendance-entry>header>div{
  display:grid;
  flex:1 1 auto;
  min-width:0;
  gap:1px
}

body.app-ui .hrm-attendance-entry>header strong{
  font-size:13.5px;
  font-weight:700
}

body.app-ui .hrm-attendance-entry>header small{
  color:var(--text-3);
  font-size:11.5px
}

body.app-ui .hrm-attendance-avatar{
  display:grid;
  width:32px;
  height:32px;
  flex:none;
  place-items:center;
  border-radius:9px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

/* Two columns, so the fields pair the way they are written: the two times together,
   shift and IP together, then the two notes side by side. An auto-fit grid gave three
   columns on the first row and left the notes straddling and trailing a gap. */

body.app-ui .hrm-attendance-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  padding:13px;
  gap:12px 14px
}

body.app-ui .hrm-attendance-grid textarea.form-control{
  min-height:74px;
  resize:vertical
}

/* The edit dialog uses the same grid inside the dialog body, which already pads. */

body.app-ui .hrm-attendance-grid.is-flush{
  padding:0
}

body.app-ui .hrm-attendance-empty{
  margin:14px 0 0;
  padding:18px;
  border:1px dashed var(--border);
  border-radius:12px;
  color:var(--text-3);
  font-size:12.5px;
  text-align:center
}

@media(max-width:680px){
  body.app-ui .hrm-attendance-grid{
    grid-template-columns:1fr
  }
}

/* ==========================================================================
   Date / time picker widget.

   This is Bootstrap 3 markup styled by a stylesheet this stack does not load, so it
   arrived as a bare table: an empty grey panel under the calendar, stepper buttons as
   blank boxes and no highlight on the selected day.
   ========================================================================== */

.app-shell .bootstrap-datetimepicker-widget{
  min-width:270px;
  padding:8px;
  border:1px solid var(--border);
  border-radius:13px;
  background:var(--surface);
  box-shadow:var(--shadow-md);
  list-style:none
}

.app-shell .bootstrap-datetimepicker-widget.dropdown-menu:after,
.app-shell .bootstrap-datetimepicker-widget.dropdown-menu:before{
  display:none
}

.app-shell .bootstrap-datetimepicker-widget table{
  width:100%;
  border-collapse:separate;
  border-spacing:2px;
  margin:0
}

.app-shell .bootstrap-datetimepicker-widget table td,
.app-shell .bootstrap-datetimepicker-widget table th{
  padding:0;
  border:0;
  background:transparent;
  text-align:center;
  vertical-align:middle
}

/* Header: month, and the arrows either side of it. */

.app-shell .bootstrap-datetimepicker-widget th.picker-switch{
  height:36px;
  color:var(--text);
  font-size:13px;
  font-weight:750;
  text-transform:none;
  letter-spacing:0;
  cursor:pointer
}

.app-shell .bootstrap-datetimepicker-widget th.prev,
.app-shell .bootstrap-datetimepicker-widget th.next{
  width:32px;
  height:32px;
  border-radius:9px;
  color:var(--text-2);
  cursor:pointer;
  transition:.15s ease
}

.app-shell .bootstrap-datetimepicker-widget th.prev:hover,
.app-shell .bootstrap-datetimepicker-widget th.next:hover,
.app-shell .bootstrap-datetimepicker-widget th.picker-switch:hover{
  background:var(--surface-2)
}

.app-shell .bootstrap-datetimepicker-widget th.dow{
  height:26px;
  color:var(--text-3);
  font-size:10.5px;
  font-weight:750;
  letter-spacing:.04em;
  text-transform:uppercase
}

.app-shell .bootstrap-datetimepicker-widget th.disabled,
.app-shell .bootstrap-datetimepicker-widget td.disabled{
  color:var(--text-3);
  opacity:.45;
  cursor:not-allowed
}

/* Days, months, years. */

.app-shell .bootstrap-datetimepicker-widget td.day,
.app-shell .bootstrap-datetimepicker-widget span.month,
.app-shell .bootstrap-datetimepicker-widget span.year,
.app-shell .bootstrap-datetimepicker-widget span.decade{
  height:32px;
  min-width:32px;
  border-radius:9px;
  color:var(--text);
  font-size:12.5px;
  font-weight:600;
  font-variant-numeric:tabular-nums;
  line-height:32px;
  cursor:pointer;
  transition:.14s ease
}

.app-shell .bootstrap-datetimepicker-widget td.day:hover,
.app-shell .bootstrap-datetimepicker-widget span.month:hover,
.app-shell .bootstrap-datetimepicker-widget span.year:hover{
  background:var(--surface-2)
}

.app-shell .bootstrap-datetimepicker-widget td.day.old,
.app-shell .bootstrap-datetimepicker-widget td.day.new{
  color:var(--text-3)
}

.app-shell .bootstrap-datetimepicker-widget td.day.today{
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--brand) 45%,transparent);
  color:var(--brand-strong);
  font-weight:750
}

.app-shell .bootstrap-datetimepicker-widget td.day.active,
.app-shell .bootstrap-datetimepicker-widget span.month.active,
.app-shell .bootstrap-datetimepicker-widget span.year.active{
  background:var(--brand);
  color:#fff;
  font-weight:750
}

.app-shell .bootstrap-datetimepicker-widget span.month,
.app-shell .bootstrap-datetimepicker-widget span.year,
.app-shell .bootstrap-datetimepicker-widget span.decade{
  display:inline-block;
  width:calc(33.333% - 6px);
  margin:3px;
  line-height:36px
}

/* The row that switches between the calendar and the clock. It was an empty grey band. */

.app-shell .bootstrap-datetimepicker-widget li.picker-switch{
  margin:6px 0 0;
  padding-top:6px;
  border-top:1px solid var(--border-2);
  text-align:center
}

.app-shell .bootstrap-datetimepicker-widget li.picker-switch>a,
.app-shell .bootstrap-datetimepicker-widget li.picker-switch td>a{
  display:inline-flex;
  width:auto;
  min-width:120px;
  height:34px;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:0 14px;
  border-radius:9px;
  background:var(--surface-2);
  color:var(--text-2);
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  transition:.15s ease
}

.app-shell .bootstrap-datetimepicker-widget li.picker-switch>a:hover,
.app-shell .bootstrap-datetimepicker-widget li.picker-switch td>a:hover{
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .bootstrap-datetimepicker-widget li.picker-switch table{
  width:100%
}

/* Time view: the steppers were bordered boxes with nothing in them. */

.app-shell .bootstrap-datetimepicker-widget .timepicker{
  padding:6px 2px
}

.app-shell .bootstrap-datetimepicker-widget .timepicker-picker a[data-action]{
  display:inline-flex;
  width:36px;
  height:32px;
  align-items:center;
  justify-content:center;
  border-radius:9px;
  color:var(--text-2);
  cursor:pointer;
  transition:.15s ease
}

.app-shell .bootstrap-datetimepicker-widget .timepicker-picker a[data-action]:hover{
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .bootstrap-datetimepicker-widget .timepicker-hour,
.app-shell .bootstrap-datetimepicker-widget .timepicker-minute,
.app-shell .bootstrap-datetimepicker-widget .timepicker-second{
  display:inline-flex;
  width:56px;
  height:38px;
  align-items:center;
  justify-content:center;
  border-radius:9px;
  font-size:17px;
  font-weight:800;
  font-variant-numeric:tabular-nums;
  cursor:pointer
}

.app-shell .bootstrap-datetimepicker-widget .timepicker-hour:hover,
.app-shell .bootstrap-datetimepicker-widget .timepicker-minute:hover,
.app-shell .bootstrap-datetimepicker-widget .timepicker-second:hover{
  background:var(--surface-2)
}

.app-shell .bootstrap-datetimepicker-widget td.separator{
  width:12px;
  color:var(--text-3);
  font-size:16px;
  font-weight:800
}

.app-shell .bootstrap-datetimepicker-widget button[data-action="togglePeriod"]{
  height:32px;
  padding:0 12px;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface-2);
  color:var(--text-2);
  font-size:12px;
  font-weight:750;
  cursor:pointer
}

.app-shell .bootstrap-datetimepicker-widget .timepicker-hours td,
.app-shell .bootstrap-datetimepicker-widget .timepicker-minutes td{
  height:30px;
  border-radius:8px;
  font-size:12.5px;
  font-variant-numeric:tabular-nums;
  cursor:pointer
}

.app-shell .bootstrap-datetimepicker-widget .timepicker-hours td:hover,
.app-shell .bootstrap-datetimepicker-widget .timepicker-minutes td:hover{
  background:var(--surface-2)
}

/* Side-by-side lays the calendar and the clock out in two columns. */

.app-shell .bootstrap-datetimepicker-widget.usetwentyfour td.hour{
  height:27px;
  line-height:27px
}

.app-shell .bootstrap-datetimepicker-widget .accordion-toggle a{
  text-decoration:none
}

/* Present / absent figures and the people behind them. */

body.app-ui .hrm-count{
  display:inline-grid;
  min-width:30px;
  height:26px;
  place-items:center;
  padding:0 9px;
  border-radius:999px;
  background:var(--surface-2);
  color:var(--text-2);
  font-size:12.5px;
  font-weight:800;
  font-variant-numeric:tabular-nums
}

body.app-ui .hrm-count.is-present{
  background:var(--brand-weak);
  color:var(--brand-strong)
}

body.app-ui .hrm-count.is-absent{
  background:color-mix(in srgb,#d64545 13%,transparent);
  color:#d64545
}

body.app-ui .hrm-people{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  margin-top:7px;
  max-width:520px
}

/* Attendance by shift: one card per shift. A three-column table could not hold cells
   this unequal — one name in Present against twenty-one in Absent left the shift name
   floating in the middle of a very tall row. */

body.app-ui .hrm-shift-list{
  display:grid;
  padding:14px;
  gap:12px
}

body.app-ui .hrm-shift-card{
  border:1px solid var(--border);
  border-radius:13px;
  background:var(--surface);
  overflow:hidden
}

body.app-ui .hrm-shift-card>header{
  display:flex;
  align-items:center;
  gap:11px;
  padding:11px 14px;
  border-bottom:1px solid var(--border);
  background:var(--surface-2)
}

body.app-ui .hrm-shift-card>header>div:first-of-type{
  display:grid;
  flex:1 1 auto;
  min-width:0;
  gap:1px
}

body.app-ui .hrm-shift-card>header strong{
  font-size:14px;
  font-weight:750
}

body.app-ui .hrm-shift-card>header small{
  color:var(--text-3);
  font-size:11.5px
}

body.app-ui .hrm-shift-icon{
  display:grid;
  width:32px;
  height:32px;
  flex:none;
  place-items:center;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface);
  color:var(--text-2)
}

body.app-ui .hrm-shift-rate{
  display:grid;
  min-width:96px;
  flex:0 0 auto;
  justify-items:end;
  gap:4px
}

body.app-ui .hrm-shift-rate>span{
  font-size:13px;
  font-weight:800;
  font-variant-numeric:tabular-nums
}

body.app-ui .hrm-shift-bar{
  overflow:hidden;
  width:96px;
  height:5px;
  border-radius:999px;
  background:color-mix(in srgb,#d64545 22%,transparent)
}

body.app-ui .hrm-shift-bar>i{
  display:block;
  height:100%;
  border-radius:999px;
  background:var(--brand)
}

body.app-ui .hrm-shift-groups{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,2fr);
  gap:0
}

body.app-ui .hrm-shift-groups>section{
  padding:12px 14px
}

body.app-ui .hrm-shift-groups>section+section{
  border-left:1px solid var(--border-2)
}

body.app-ui .hrm-shift-groups h6{
  display:flex;
  align-items:center;
  gap:7px;
  margin:0 0 9px;
  color:var(--text-3);
  font-size:10.5px;
  font-weight:750;
  letter-spacing:.05em;
  text-transform:uppercase
}

body.app-ui .hrm-people-empty{
  margin:0;
  color:var(--text-3);
  font-size:12px
}

body.app-ui .hrm-shift-empty{
  margin:0;
  padding:26px;
  color:var(--text-3);
  font-size:12.5px;
  text-align:center
}

@media(max-width:820px){
  body.app-ui .hrm-shift-groups{
    grid-template-columns:1fr
  }

  body.app-ui .hrm-shift-groups>section+section{
    border-top:1px solid var(--border-2);
    border-left:0
  }
}

/* Header clock in/out. Sits with the other topbar controls; the two buttons swap
   visibility, which the existing clock JS already handles. */

body.app-ui .header-clock{
  display:none;
  align-items:center
}

@media(min-width:1024px){
  body.app-ui .header-clock{
    display:flex
  }
}

body.app-ui .header-clock-btn{
  display:inline-flex;
  height:36px;
  align-items:center;
  gap:7px;
  padding:0 13px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface-2);
  color:var(--text-2);
  font-size:12.5px;
  font-weight:700;
  cursor:pointer;
  transition:.16s ease
}

body.app-ui .header-clock-btn:hover{
  border-color:color-mix(in srgb,var(--brand) 42%,var(--border));
  background:var(--brand-weak);
  color:var(--brand-strong)
}

body.app-ui .header-clock-btn.is-on{
  border-color:color-mix(in srgb,var(--brand) 38%,var(--border));
  background:var(--brand-weak);
  color:var(--brand-strong)
}

body.app-ui .header-clock-btn.is-on:hover{
  border-color:color-mix(in srgb,#d64545 40%,var(--border));
  background:color-mix(in srgb,#d64545 12%,transparent);
  color:#d64545
}

body.app-ui .header-clock-btn.hide{
  display:none
}

/* POS and Clock in/out on a phone. Both were hidden below 1024px, which is where they are needed
   most: clocking in is the first thing a member of staff does, on the device in their hand. They
   stay as their icons alone — the labels are what did not fit, not the buttons. Superadmin does
   stand down: it administers the platform, which nobody starts on a phone. */

@media(max-width:1023px){
  .app-shell .topbar-jump{
    display:flex
  }

  .app-shell .topbar-jump .is-superadmin{
    display:none
  }

  .app-shell .topbar-actions{
    gap:7px
  }

  .app-shell .pill-btn{
    gap:0;
    padding:0 10px
  }

  .app-shell .pill-btn .pill-btn-label{
    display:none
  }

  body.app-ui .header-clock{
    display:flex
  }

  body.app-ui .header-clock-btn{
    gap:0;
    padding:0 10px
  }

  body.app-ui .header-clock-btn>span:not(.header-clock-dot){
    display:none
  }
}

body.app-ui .header-clock-dot{
  width:8px;
  height:8px;
  flex:none;
  border-radius:999px;
  background:var(--brand);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 22%,transparent)
}

/* Clock in/out dialog. */

body.app-ui .hrm-clock-dialog .repair-form-dialog-content{
  max-width:520px
}

body.app-ui .hrm-clock-facts{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  margin:0 0 14px;
  gap:10px
}

body.app-ui .hrm-clock-facts>div{
  display:grid;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:11px;
  background:var(--surface-2);
  gap:2px
}

body.app-ui .hrm-clock-facts span{
  color:var(--text-3);
  font-size:10.5px;
  font-weight:750;
  letter-spacing:.05em;
  text-transform:uppercase
}

body.app-ui .hrm-clock-facts strong{
  font-size:13.5px;
  font-weight:700;
  font-variant-numeric:tabular-nums
}

body.app-ui .hrm-clock-location{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:4px;
  padding:11px 13px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface-2)
}

body.app-ui .hrm-clock-location>div{
  display:grid;
  min-width:0;
  gap:2px
}

body.app-ui .hrm-clock-location span{
  color:var(--text-3);
  font-size:10.5px;
  font-weight:750;
  letter-spacing:.05em;
  text-transform:uppercase
}

body.app-ui .hrm-clock-location strong{
  font-size:12.5px;
  font-weight:650;
  line-height:1.45
}

body.app-ui .hrm-clock-location .btn-ghost{
  height:36px;
  padding:0 12px;
  font-size:12.5px
}

body.app-ui .ask_location .location_required{
  display:block;
  margin-top:8px;
  color:var(--danger);
  font-size:12.5px;
  font-weight:600
}

/* Shell context for dialogs emitted after the main shell closes. It must not occupy any
   space or paint anything: the modals inside it are fixed-position and hidden until shown,
   and everything else it wraps is scripts and audio elements. */

.app-shell.app-dialog-layer{
  display:contents;
  background:transparent
}

/* Payroll ------------------------------------------------------------------ */

/* Money columns line up on the decimal point and never wrap onto a second line. */

.app-shell table.dataTable tbody td.ff-col-amount,
.app-shell table.dataTable thead th.ff-col-amount{
  text-align:right;
  white-space:nowrap
}

.app-shell table.dataTable tbody td.ff-col-amount{
  font-variant-numeric:tabular-nums;
  font-weight:650
}

/* Destructive inline row action. The icon buttons are otherwise all neutral, and
   delete is the one that deserves to read differently before it is clicked. */

.app-shell .act--danger{
  color:var(--danger)
}

.app-shell .act--danger:hover{
  border-color:color-mix(in srgb,var(--danger) 40%,transparent);
  background:color-mix(in srgb,var(--danger) 12%,var(--surface));
  color:var(--danger)
}

/* A control that reads as a link but acts on the field beside it. */

.app-shell .link-button{
  padding:0;
  border:0;
  background:none;
  color:var(--brand);
  font:inherit;
  font-size:12.5px;
  font-weight:650;
  cursor:pointer
}

.app-shell .link-button:hover{
  text-decoration:underline
}

/* Select-all / deselect-all belong on the label row, not stacked above the field. */

.app-shell .payroll-employee-field{
  min-width:0
}

.app-shell .payroll-employee-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px
}

.app-shell .payroll-employee-head .flabel{
  margin-bottom:7px
}

.app-shell .payroll-employee-bulk{
  display:flex;
  gap:12px;
  margin-bottom:7px
}

/* A filter card nested in a workspace card is not its own box, for the same reason a table
   card nested there is not: the card around it already carries the border, radius and
   shadow, so a second rounded box inside it read as a box in a box — two borders running
   parallel down both sides of the pane. It becomes a band across the top of the pane, with
   one rule separating it from the table underneath. */

.app-shell .workspace-card .filter-card,
.app-shell .repair-job-workspace .filter-card{
  border:0;
  border-bottom:1px solid var(--border);
  border-radius:0;
  background:transparent;
  box-shadow:none
}

.app-shell .workspace-card .filter-card>.section-head,
.app-shell .repair-job-workspace .filter-card>.section-head{
  border-radius:0
}

/* Payslip ------------------------------------------------------------------ */

/* Deliberately unscoped. printThis clones the modal body into an iframe with importCSS on
   and importStyle off: this file comes along, an inline style element in the view does not,
   and .app-shell is not an ancestor in there. The borders below used to live in such a
   block, which is why the payslip printed with no borders at all. Colours are literal for
   the same reason — the iframe inherits none of the theme tokens. */

#payroll-view{
  width:100%;
  border-collapse:collapse;
  color:#1d1a1a;
  font-size:12.5px;
  line-height:1.5
}

/* Twenty-nine bold runs on one page. Every label was <strong> and every value was not,
   which is backwards — you scan a payslip for its values — and with half the page bold,
   nothing on it stood out. Labels are quiet now; bold is spent on the few things that
   should carry it: the ledger headings, the two totals and net pay. */

#payroll-view strong{
  font-weight:600;
  color:#4a5551
}

#payroll-view .payslip-ledger-head strong,
#payroll-view .payslip-line strong,
#payroll-view .payslip-net-line strong{
  font-weight:800;
  color:#1d1a1a
}

#payroll-view .payslip-masthead strong{
  font-weight:800;
  color:#1d1a1a;
  font-size:15px
}

#payroll-view{
  border:1px solid #9aa5a0
}

#payroll-view>thead>tr>th,#payroll-view>tbody>tr>th,#payroll-view>tfoot>tr>th,
#payroll-view>thead>tr>td,#payroll-view>tbody>tr>td,#payroll-view>tfoot>tr>td,
#payroll-view>tr>th,#payroll-view>tr>td{
  border:1px solid #c3ccc8;
  padding:7px 9px;
  vertical-align:top
}

/* vertical-align matters here: the earnings and deductions cells are different heights, and
   cells default to middle, so a single deduction sat halfway down its cell instead of level
   with the first earning beside it. The padding is what kept the text off the rules. */

/* The payment table is nested inside a cell, so the border rule above — which is
   deliberately direct-child, to keep it off nested content — never reached it, and it
   printed as unruled columns running into each other. */

#payroll-view .payslip-ledger-head{
  background:#f1f5f3;
  border-bottom-color:#9aa5a0
}

#payroll-view .table{
  width:100%;
  border-collapse:collapse;
  margin:6px 0 0
}

#payroll-view .table th,#payroll-view .table td{
  border:1px solid #9aa5a0;
  padding:5px 8px;
  text-align:left;
  vertical-align:top
}

#payroll-view .table th{
  background:#eef3f0;
  font-weight:700
}

@media print{
  /* Browsers drop backgrounds and images by default, which takes the logo with them. */

  #payroll-view,#payroll-view *{
    -webkit-print-color-adjust:exact;
    print-color-adjust:exact
  }

  /* A payslip that lands on a page boundary should not be cut through a row. */

  #payroll-view tr,#payroll-view .table tr{
    -moz-column-break-inside:avoid;
         break-inside:avoid;
    page-break-inside:avoid
  }
}

/* Each line of the earnings and deductions columns is three floated blocks adding up to
   100%, but nothing closed the row, so the next item packed in beside the previous one
   rather than starting a line of its own. */

.payslip-line{
  overflow:hidden
}

.payslip-line+.payslip-line{
  margin-top:6px
}

/* Net pay used to be a 43%-wide float on a hardcoded 49px right padding, which only lined
   up with the amount column at one particular dialog width. */

.payslip-net-line{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px
}

.payslip-net-line .display_currency{
  font-variant-numeric:tabular-nums
}

/* The masthead put margin:auto on an inline image (which centres nothing) and floated the
   business block right, so the logo and the address overlapped instead of sharing a row,
   and a 40px top padding opened a gap underneath them. */

.payslip-masthead{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px
}

.payslip-masthead img{
  max-height:50px;
  width:auto
}

.payslip-issuer{
  text-align:right
}

.payslip-period{
  padding-top:10px;
  text-align:center
}

/* Employee and bank details were .pull-left and .pull-right. Only .pull-right is defined in
   this stack, so the employee block stayed in normal flow at 50% width and the bank block
   floated right underneath it rather than beside it. Both helpers are also scoped to
   .app-shell, so neither would have applied on the printed page either way. */

.payslip-cols{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  align-items:start
}

@media (max-width:640px){
  .payslip-masthead{
    flex-direction:column;
    text-align:center
  }

  .payslip-issuer{
    text-align:center
  }

  .payslip-cols{
    grid-template-columns:minmax(0,1fr)
  }
}

/* The legacy dismiss button is written before the title, and the header is a flex row, so
   it landed on the left of every dialog still using this markup. */

body.app-ui .modal-header>.close{
  order:2
}

/* Payroll group form ------------------------------------------------------- */

.app-shell .payroll-group-card{
  margin-bottom:16px
}

.app-shell .payroll-group-grid{
  grid-template-columns:repeat(2,minmax(0,1fr))
}

/* One row per employee, and the cells hold blocks of very different heights, so they have
   to align at the top or the headings stop describing what is under them. */

.app-shell .payroll-table-wrap{
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

.app-shell table.payroll-table{
  width:100%;
  margin:0;
  border-collapse:collapse
}

.app-shell table.payroll-table>thead>tr>th{
  padding:12px 14px;
  border-bottom:1px solid var(--border);
  background:var(--surface-2);
  color:var(--text-3);
  font-size:11px;
  font-weight:850;
  letter-spacing:.06em;
  text-align:left;
  text-transform:uppercase;
  white-space:nowrap
}

.app-shell table.payroll-table>tbody>tr>td{
  padding:14px;
  vertical-align:top
}

.app-shell table.payroll-table>tbody>tr.payroll-employee-row>td{
  border-top:1px solid var(--border-2)
}

.app-shell table.payroll-table>tbody>tr.payroll-employee-row:first-child>td{
  border-top:0
}

.app-shell .payroll-col-employee{
  width:200px
}

.app-shell .payroll-col-salary{
  width:240px
}

.app-shell .payroll-col-gross{
  width:140px;
  text-align:right
}

.app-shell .payroll-col-gross strong{
  font-size:16px;
  font-weight:850;
  font-variant-numeric:tabular-nums
}

.app-shell .payroll-employee-name{
  display:block;
  color:var(--text);
  font-size:14px;
  font-weight:800
}

/* These were bold labels separated by pairs of <br>, which made the block twice as tall as
   the information in it. */

.app-shell .payroll-employee-stats{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:4px 10px;
  margin:10px 0 0
}

.app-shell .payroll-employee-stats dt{
  color:var(--text-3);
  font-size:11.5px
}

.app-shell .payroll-employee-stats dd{
  margin:0;
  color:var(--text-2);
  font-size:12px;
  font-weight:650
}

.app-shell .payroll-salary-grid{
  display:grid;
  gap:10px
}

.app-shell .payroll-salary-grid .flabel{
  margin-bottom:4px;
  font-size:11.5px
}

/* The ledgers were each wrapped in a widget card inside a table cell inside another card. */

.app-shell table.payroll-ledger-table{
  width:100%;
  margin:0;
  border-collapse:collapse
}

.app-shell table.payroll-ledger-table>thead>tr>th{
  padding:0 6px 6px;
  border:0;
  color:var(--text-3);
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.05em;
  text-align:left;
  text-transform:uppercase
}

.app-shell table.payroll-ledger-table>tbody>tr>td{
  padding:3px 6px;
  border:0;
  vertical-align:top
}

.app-shell table.payroll-ledger-table>tfoot>tr>th{
  padding:8px 6px 0;
  border:0;
  border-top:1px solid var(--border-2);
  color:var(--text-2);
  font-size:12px;
  text-align:left
}

.app-shell table.payroll-ledger-table>tfoot>tr>td{
  padding:8px 6px 0;
  border:0;
  border-top:1px solid var(--border-2)
}

.app-shell .payroll-ledger-total{
  color:var(--text);
  font-size:13px;
  font-weight:800;
  font-variant-numeric:tabular-nums;
  white-space:nowrap
}

.app-shell table.payroll-ledger-table .form-control{
  height:36px;
  font-size:12.5px
}

.app-shell table.payroll-ledger-table .input-group{
  margin-top:6px
}

.app-shell .payroll-row-action{
  width:38px
}

.app-shell tr.payroll-note-row>td{
  padding:0 14px 14px
}

.app-shell tr.payroll-note-row textarea{
  min-height:0
}

.app-shell .payroll-form-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:18px;
  flex-wrap:wrap;
  margin-top:16px
}

/* Row hover marks a row you can act on. Every row on these forms is a form, so the highlight
   followed the pointer around fields the user is typing in and meant nothing.

   The base rule is `.app-shell .table:not(.dataTable)>tbody>tr:hover>td`, which counts four
   classes; an override has to carry at least as many or it loses regardless of where it sits
   in the file. Scoping to the page adds the fifth. */

.app-shell .payroll-form-page .table:not(.dataTable)>tbody>tr:hover>td,
.app-shell .payroll-form-page .table:not(.dataTable)>tbody>tr:hover>th{
  background:transparent
}

@media (max-width:960px){
  .app-shell .payroll-group-grid{
    grid-template-columns:minmax(0,1fr)
  }
}

/* The single-payroll form: earnings and deductions side by side rather than stacked, which
   pushed the gross amount below the fold on any payroll with a few lines. */

.app-shell .payroll-ledger-pair{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  margin-bottom:16px
}

.app-shell .payroll-ledger-body{
  padding:14px
}

.app-shell .payroll-gross{
  display:flex;
  align-items:baseline;
  gap:10px;
  margin-right:auto
}

.app-shell .payroll-gross span{
  color:var(--text-3);
  font-size:12px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase
}

.app-shell .payroll-gross strong{
  color:var(--text);
  font-size:20px;
  font-weight:900;
  font-variant-numeric:tabular-nums
}

@media (max-width:960px){
  .app-shell .payroll-ledger-pair{
    grid-template-columns:minmax(0,1fr)
  }
}

/* Payroll group document --------------------------------------------------- */

/* Unscoped for the same reason as the payslip: printThis clones this node into an iframe
   with importCSS on and importStyle off, so this file travels but .app-shell is not an
   ancestor in there and literal colours are the only ones that survive. */

.payroll-group-doc{
  padding:20px 22px;
  border:1px solid #9aa5a0;
  border-radius:12px;
  background:var(--surface);
  color:#1d1a1a;
  font-size:12.5px;
  line-height:1.55
}

.payroll-group-masthead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
  padding-bottom:14px;
  border-bottom:1px solid #9aa5a0
}

.payroll-group-masthead strong{
  display:block;
  font-size:15px;
  font-weight:800
}

.payroll-group-masthead p{
  margin:2px 0 0;
  color:#5c6763;
  font-size:12px
}

.payroll-group-meta{
  text-align:right
}

.payroll-group-meta p span{
  color:#5c6763;
  font-weight:700
}

.payroll-group-table{
  width:100%;
  margin-top:14px;
  border-collapse:collapse
}

.payroll-group-table th,.payroll-group-table td{
  padding:9px 11px;
  border:1px solid #c3ccc8;
  text-align:left;
  vertical-align:top
}

.payroll-group-table thead th{
  background:#f1f5f3;
  color:#40504a;
  font-size:11px;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase
}

.payroll-group-table tfoot th,.payroll-group-table tfoot td{
  background:#f1f5f3;
  font-weight:800
}

.payroll-group-amount{
  text-align:right;
  white-space:nowrap;
  font-variant-numeric:tabular-nums
}

/* The bank block was a labelled line each, so an employee with no branch or tax id printed
   a run of labels with nothing after them. Empty values are dropped now. */

.payroll-group-bank{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:3px 10px;
  margin:0
}

.payroll-group-bank dt{
  color:#5c6763;
  font-size:11.5px
}

.payroll-group-bank dd{
  margin:0;
  font-weight:650;
  overflow-wrap:anywhere
}

.payroll-group-muted{
  color:#7c8783
}

@media print{
  .payroll-group-doc{
    padding:0!important;
    border:0!important;
    border-radius:0!important
  }

  .payroll-group-doc *{
    -webkit-print-color-adjust:exact;
    print-color-adjust:exact
  }

  .payroll-group-table tr{
    -moz-column-break-inside:avoid;
         break-inside:avoid;
    page-break-inside:avoid
  }
}

/* HRM settings and sales targets ------------------------------------------- */

.app-shell .settings-form>.tab-pane{
  padding:16px
}

.app-shell .settings-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:14px
}

.app-shell .settings-grid-wide{
  grid-column:1/-1
}

.app-shell .settings-grid textarea.form-control{
  min-height:110px;
  height:auto;
  padding:10px 12px
}

.app-shell .settings-subhead{
  margin:18px 0 10px;
  color:var(--text);
  font-size:13px;
  font-weight:800
}

/* input-icheck styles these through a plugin this stack does not load, so they came out as
   bare boxes with the label running into them. */

.app-shell .settings-check{
  display:flex;
  align-items:flex-start;
  gap:9px;
  margin:0;
  color:var(--text-2);
  font-size:13.5px;
  font-weight:600;
  cursor:pointer
}

.app-shell .settings-check input{
  width:16px;
  height:16px;
  margin:2px 0 0;
  flex:none;
  accent-color:var(--brand)
}

.app-shell .settings-check small{
  display:block;
  margin-top:3px;
  color:var(--text-3);
  font-size:12px;
  font-weight:500;
  line-height:1.45
}

.app-shell .settings-note{
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin:16px 0 0;
  color:var(--danger);
  font-size:12.5px
}

.app-shell .settings-note svg{
  flex:none;
  margin-top:2px
}

.app-shell .settings-actions{
  display:flex;
  justify-content:flex-end;
  margin-top:16px
}

.app-shell .sales-target-dialog{
  width:min(700px,calc(100% - 28px))
}

.app-shell table.sales-target-table>thead>tr>th{
  padding:0 6px 7px;
  border:0;
  border-bottom:1px solid var(--border-2)
}

.app-shell table.sales-target-table>tbody>tr>td{
  padding:5px 6px;
  border:0;
  vertical-align:middle
}

.app-shell table.sales-target-table>tbody>tr:hover>td{
  background:transparent
}

.app-shell .sales-target-row-action{
  width:38px
}

.app-shell .sales-target-add{
  margin-top:12px
}

/* HRM dashboard headline --------------------------------------------------- */

.app-shell .hrm-kpis{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:12px;
  margin-bottom:16px
}

.app-shell .hrm-kpi{
  display:block;
  padding:14px 16px;
  border:1px solid var(--border);
  border-radius:13px;
  background:var(--surface);
  box-shadow:var(--shadow-sm);
  color:inherit;
  text-decoration:none;
  transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease
}

.app-shell .hrm-kpi:hover{
  border-color:color-mix(in srgb,var(--brand) 34%,var(--border));
  box-shadow:var(--shadow-md);
  transform:translateY(-1px)
}

.app-shell .hrm-kpi>span{
  display:block;
  color:var(--text-3);
  font-size:11px;
  font-weight:850;
  letter-spacing:.06em;
  text-transform:uppercase
}

.app-shell .hrm-kpi>strong{
  display:block;
  margin-top:5px;
  color:var(--text);
  font-size:26px;
  font-weight:900;
  line-height:1.1;
  font-variant-numeric:tabular-nums
}

.app-shell .hrm-kpi>small{
  display:block;
  margin-top:3px;
  color:var(--text-3);
  font-size:11.5px
}

/* Semantic state, kept separate from the brand accent: something to do, something to look
   at, and something happening right now. */

.app-shell .hrm-kpi.is-action{
  border-color:color-mix(in srgb,var(--brand) 40%,var(--border));
  background:color-mix(in srgb,var(--brand-weak) 45%,var(--surface))
}

.app-shell .hrm-kpi.is-action>strong{
  color:var(--brand-strong)
}

.app-shell .hrm-kpi.is-warn>strong{
  color:#b26a12
}

.app-shell .hrm-kpi.is-live>strong{
  color:var(--brand-strong)
}

.app-shell .hrm-period-row.is-warn small{
  display:block;
  margin-top:2px;
  color:var(--text-3);
  font-size:11.5px;
  font-weight:500;
  line-height:1.4
}

.app-shell .hrm-period-row.is-warn .hrm-period-meta{
  color:#b26a12;
  font-weight:850
}

@media (max-width:640px){
  .app-shell .hrm-kpis{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}

/* HRM dashboard: today, the roll, and what needs attention ------------------ */

.app-shell .hrm-hero{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:14px;
  margin-bottom:14px
}

.app-shell .hrm-hero-stack{
  display:grid;
  gap:14px;
  align-content:stretch
}

.app-shell .hrm-hero-stack>.hrm-card{
  margin:0
}

.app-shell .hrm-today{
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  box-shadow:var(--shadow-md)
}

.app-shell .hrm-today>header{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  padding:13px 16px;
  border-bottom:1px solid var(--border-2);
  background:linear-gradient(105deg,color-mix(in srgb,var(--brand-weak) 58%,var(--surface)) 0%,var(--surface) 68%)
}

.app-shell .hrm-today>header h2{
  margin:0;
  color:var(--text);
  font-size:15px;
  font-weight:850
}

.app-shell .hrm-today>header span{
  color:var(--text-3);
  font-size:11.5px;
  font-weight:700
}

/* The panel is a flex column, so this has to grow or the dial sits at the top with dead
   space under it while the column beside it sets the height. */

.app-shell .hrm-attend{
  flex:1;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:20px;
  align-items:center;
  align-content:center;
  padding:18px 16px
}

.app-shell .hrm-dial{
  position:relative;
  width:104px;
  height:104px;
  flex:none
}

.app-shell .hrm-dial svg{
  width:104px;
  height:104px;
  overflow:visible;
  transform:rotate(-90deg)
}

.app-shell .hrm-dial circle{
  fill:none;
  stroke-width:9
}

.app-shell .hrm-dial .rail{
  stroke:var(--surface-3)
}

/* Round caps would make a hairline slice read as a dot, so the ends are butted and the
   separation comes from the gap the view leaves between slices instead. */

.app-shell .hrm-dial .slice{
  stroke-linecap:butt;
  transition:stroke-width .15s ease
}

.app-shell .hrm-dial .slice.is-in{
  stroke:var(--brand)
}

.app-shell .hrm-dial .slice.is-leave{
  stroke:var(--blue,#2563a8)
}

.app-shell .hrm-dial .slice.is-missing{
  stroke:color-mix(in srgb,#b26a12 55%,transparent)
}

.app-shell .hrm-dial:hover .slice.is-in{
  stroke-width:11
}

.app-shell .hrm-dial-mid{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  align-content:center;
  text-align:center
}

.app-shell .hrm-dial-mid b{
  color:var(--text);
  font-size:24px;
  font-weight:900;
  line-height:1;
  font-variant-numeric:tabular-nums
}

.app-shell .hrm-dial-mid b i{
  margin-left:1px;
  color:var(--text-3);
  font-size:13px;
  font-style:normal;
  font-weight:800
}

.app-shell .hrm-dial-mid span{
  color:var(--text-3);
  font-size:10px;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase
}

.app-shell .hrm-roll-legend{
  display:grid;
  gap:9px;
  min-width:0
}

.app-shell .hrm-roll-legend>div{
  display:grid;
  grid-template-columns:10px minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
  font-size:12.5px
}

.app-shell .hrm-roll-legend i{
  width:10px;
  height:10px;
  border-radius:3px
}

.app-shell .hrm-roll-legend i.is-in{
  background:var(--brand)
}

.app-shell .hrm-roll-legend i.is-leave{
  background:var(--blue,#2563a8)
}

.app-shell .hrm-roll-legend i.is-missing{
  background:color-mix(in srgb,#b26a12 55%,transparent)
}

.app-shell .hrm-roll-legend small{
  display:block;
  color:var(--text-3);
  font-size:11px
}

.app-shell .hrm-roll-legend b{
  color:var(--text);
  font-weight:800;
  font-variant-numeric:tabular-nums
}

.app-shell .hrm-roll{
  border-top:1px solid var(--border-2)
}

.app-shell .hrm-roll-tabs{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  padding:12px 14px 0
}

.app-shell .hrm-seg{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:6px 12px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--surface);
  color:var(--text-2);
  font:inherit;
  font-size:11.5px;
  font-weight:750;
  cursor:pointer
}

.app-shell .hrm-seg span{
  font-weight:850;
  font-variant-numeric:tabular-nums
}

.app-shell .hrm-seg.is-on{
  border-color:color-mix(in srgb,var(--brand) 45%,var(--border));
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .hrm-seg.is-warnish.is-on{
  border-color:color-mix(in srgb,#b26a12 45%,var(--border));
  background:#fdf3e4;
  color:#b26a12
}

.app-shell .hrm-roll-pane{
  padding:10px 0 0
}

.app-shell .hrm-person{
  display:grid;
  grid-template-columns:34px minmax(0,1fr) auto;
  gap:11px;
  align-items:center;
  padding:9px 14px;
  border-bottom:1px solid var(--border-2)
}

.app-shell .hrm-person:last-child{
  border-bottom:0
}

.app-shell .hrm-person-name{
  min-width:0
}

.app-shell .hrm-person-name b{
  display:block;
  overflow:hidden;
  color:var(--text);
  font-size:13px;
  font-weight:750;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .hrm-person-name small{
  display:block;
  overflow:hidden;
  color:var(--text-3);
  font-size:11px;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .hrm-person-time{
  text-align:right;
  white-space:nowrap
}

.app-shell .hrm-person-time b{
  display:block;
  color:var(--text);
  font-size:12.5px;
  font-weight:800;
  font-variant-numeric:tabular-nums
}

.app-shell .hrm-person-time small{
  display:block;
  color:var(--text-3);
  font-size:10.5px
}

.app-shell .hrm-live{
  display:inline-flex;
  align-items:center;
  gap:5px;
  color:var(--brand-strong);
  font-weight:800
}

.app-shell .hrm-live i{
  width:6px;
  height:6px;
  border-radius:999px;
  background:var(--brand);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 22%,transparent)
}

.app-shell .hrm-roll-empty{
  margin:0;
  padding:16px 14px;
  color:var(--text-3);
  font-size:12.5px;
  text-align:center
}

.app-shell .hrm-roll-more{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 14px;
  border-top:1px solid var(--border-2);
  background:var(--surface-2);
  color:var(--brand-strong);
  font-size:12px;
  font-weight:750;
  text-decoration:none
}

.app-shell .hrm-roll-more>span:first-child{
  color:var(--text-3);
  font-weight:650
}

.app-shell .hrm-roll-more:hover{
  background:var(--surface-3)
}

/* Photo when one has been uploaded, initials until then. */

.app-shell .staff-avatar{
  display:grid;
  width:34px;
  height:34px;
  flex:none;
  place-items:center;
  overflow:hidden;
  border-radius:999px;
  -o-object-fit:cover;
     object-fit:cover
}

.app-shell .staff-avatar.is-initials{
  background:var(--brand-weak);
  color:var(--brand-strong);
  font-size:12px;
  font-weight:850
}

.app-shell .hrm-today-foot{
  margin-top:auto;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  border-top:1px solid var(--border-2)
}

.app-shell .hrm-today-foot>div{
  padding:11px 14px;
  border-right:1px solid var(--border-2)
}

.app-shell .hrm-today-foot>div:last-child{
  border-right:0
}

.app-shell .hrm-today-foot span{
  display:block;
  color:var(--text-3);
  font-size:10px;
  font-weight:850;
  letter-spacing:.05em;
  text-transform:uppercase
}

.app-shell .hrm-today-foot b{
  display:block;
  margin-top:2px;
  color:var(--text);
  font-size:17px;
  font-weight:900;
  font-variant-numeric:tabular-nums
}

.app-shell .hrm-today-foot small{
  display:block;
  color:var(--text-3);
  font-size:11px
}

/* A zero would read as "nobody was late", which is not what the data says. */

.app-shell .hrm-today-foot .hrm-na{
  color:var(--text-3);
  font-size:13px;
  font-weight:750
}

.app-shell .hrm-attention{
  overflow:hidden;
  margin-bottom:14px;
  border:1px solid color-mix(in srgb,var(--danger) 28%,var(--border));
  border-radius:14px;
  background:var(--surface);
  box-shadow:var(--shadow-md)
}

.app-shell .hrm-attention>header{
  padding:12px 15px;
  border-bottom:1px solid var(--border-2);
  background:linear-gradient(105deg,color-mix(in srgb,var(--danger) 10%,var(--surface)) 0%,var(--surface) 70%)
}

.app-shell .hrm-attention>header h2{
  margin:0;
  color:var(--text);
  font-size:14px;
  font-weight:850
}

.app-shell .hrm-attention>header p{
  margin:1px 0 0;
  color:var(--text-3);
  font-size:11.5px
}

.app-shell .hrm-attention-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr))
}

.app-shell .hrm-attention-grid>a{
  padding:13px 15px;
  border-right:1px solid var(--border-2);
  color:inherit;
  text-decoration:none
}

.app-shell .hrm-attention-grid>a:last-child{
  border-right:0
}

.app-shell .hrm-attention-grid>a:hover{
  background:var(--surface-2)
}

.app-shell .hrm-attention-grid span{
  display:block;
  color:var(--text-3);
  font-size:10.5px;
  font-weight:850;
  letter-spacing:.05em;
  text-transform:uppercase
}

.app-shell .hrm-attention-grid b{
  display:block;
  margin:4px 0 2px;
  font-size:22px;
  font-weight:900;
  line-height:1.1;
  font-variant-numeric:tabular-nums
}

.app-shell .hrm-attention-grid b.is-alert{
  color:var(--danger)
}

.app-shell .hrm-attention-grid b.is-warn{
  color:#b26a12
}

.app-shell .hrm-attention-grid p{
  margin:0;
  color:var(--text-3);
  font-size:11.5px
}

@media (max-width:1100px){
  .app-shell .hrm-hero{
    grid-template-columns:minmax(0,1fr)
  }

  .app-shell .hrm-attention-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

  .app-shell .hrm-attention-grid>a:nth-child(2){
    border-right:0
  }

  .app-shell .hrm-attention-grid>a:nth-child(-n+2){
    border-bottom:1px solid var(--border-2)
  }
}

@media (max-width:640px){
  .app-shell .hrm-attend{
    grid-template-columns:minmax(0,1fr);
    justify-items:center
  }

  .app-shell .hrm-attention-grid{
    grid-template-columns:minmax(0,1fr)
  }

  .app-shell .hrm-attention-grid>a{
    border-right:0;
    border-bottom:1px solid var(--border-2)
  }
}

/* A headline tile that is a figure rather than a link — the personal payroll page has
   nowhere useful to send you from its own totals. */

.app-shell .hrm-kpi.is-static{
  cursor:default
}

.app-shell .hrm-kpi.is-static:hover{
  border-color:var(--border);
  box-shadow:var(--shadow-sm);
  transform:none
}

/* HMS ---------------------------------------------------------------------- */

.app-shell .hms-table-card{
  margin-top:0
}

.app-shell table.dataTable tbody td.ff-col-amount{
  text-align:right
}

/* HMS room form ------------------------------------------------------------ */

.app-shell .hms-form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  align-items:start
}

.app-shell .hms-field-full{
  grid-column:1/-1
}

.app-shell .hms-detail-grid{
  grid-template-columns:repeat(2,minmax(0,1fr))
}

.app-shell .hms-field-wide{
  grid-column:1/-1
}

/* Every room row is a form field, so the row highlight followed the pointer across inputs
   the user is typing in and meant nothing. */

.app-shell .hms-room-rows{
  padding:14px
}

.app-shell table.hms-room-table{
  width:100%;
  margin:0 0 12px;
  border-collapse:collapse
}

.app-shell table.hms-room-table>thead>tr>th{
  padding:0 8px 7px;
  border:0;
  border-bottom:1px solid var(--border-2);
  color:var(--text-3);
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.05em;
  text-align:left;
  text-transform:uppercase
}

.app-shell table.hms-room-table>tbody>tr>td{
  padding:6px 8px;
  border:0;
  vertical-align:top
}

.app-shell .hms-room-form .table:not(.dataTable)>tbody>tr:hover>td{
  background:transparent
}

.app-shell .hms-room-action{
  width:44px
}

.app-shell .hms-room-table .invalid-feedback{
  margin-top:4px;
  color:var(--danger);
  font-size:11.5px
}

.app-shell .hms-room-table .form-control.is-invalid{
  border-color:var(--danger)
}

.app-shell .hms-amenities{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:11px;
  padding:14px
}

.app-shell .hms-empty{
  grid-column:1/-1;
  margin:0;
  color:var(--text-3);
  font-size:12.5px
}

.app-shell .hms-empty a{
  color:var(--brand-strong);
  font-weight:700
}

.app-shell .hms-media{
  display:grid;
  gap:12px;
  padding:14px
}

.app-shell .hms-media-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(108px,1fr));
  gap:10px
}

.app-shell .hms-media-item{
  position:relative;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface-2)
}

.app-shell .hms-media-item img{
  display:block;
  width:100%;
  height:88px;
  -o-object-fit:cover;
     object-fit:cover
}

.app-shell .hms-media-item .delete-media{
  position:absolute;
  top:5px;
  right:5px;
  background:var(--surface)
}

.app-shell .hms-description{
  padding:14px
}

.app-shell .hms-description .tox-tinymce{
  border-radius:10px;
  border-color:var(--border)
}

.app-shell .hms-form-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  flex-wrap:wrap;
  margin-top:16px
}

@media (max-width:1000px){
  .app-shell .hms-form-grid{
    grid-template-columns:minmax(0,1fr)
  }

  .app-shell .hms-detail-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}

@media (max-width:560px){
  .app-shell .hms-detail-grid{
    grid-template-columns:minmax(0,1fr)
  }
}

/* HMS pricing -------------------------------------------------------------- */

/* One card, divided into groups. Three separate cards read as more separation than a
   single decision made in three parts actually has. */

.app-shell .hms-pricing-card{
  overflow:hidden
}

.app-shell .hms-group+.hms-group{
  border-top:1px solid var(--border)
}

.app-shell .hms-group-head{
  display:flex;
  align-items:flex-start;
  gap:11px;
  padding:13px 15px;
  background:linear-gradient(105deg,color-mix(in srgb,var(--brand-weak) 42%,var(--surface)) 0%,var(--surface) 62%)
}

.app-shell .hms-group-head h2{
  margin:0;
  color:var(--text);
  font-size:13.5px;
  font-weight:820
}

.app-shell .hms-group-head p{
  margin:2px 0 0;
  color:var(--text-3);
  font-size:12px;
  line-height:1.45
}

.app-shell .hms-group-body{
  display:grid;
  gap:14px;
  padding:14px 15px
}

.app-shell .hms-type-field{
  max-width:340px
}

.app-shell .hms-rate-body{
  display:grid;
  gap:14px;
  padding:14px
}

.app-shell .hms-week-grid{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:10px
}

.app-shell .hms-week-grid .flabel{
  font-size:11px;
  letter-spacing:.03em;
  text-transform:uppercase
}

.app-shell .hms-default-price{
  max-width:260px
}

.app-shell table.hms-guest-price-table{
  width:100%;
  margin:0;
  border-collapse:collapse
}

.app-shell table.hms-guest-price-table>thead>tr>th{
  padding:0 6px 7px;
  border:0;
  border-bottom:1px solid var(--border-2);
  color:var(--text-3);
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.05em;
  text-align:left;
  text-transform:uppercase;
  white-space:nowrap
}

.app-shell table.hms-guest-price-table>tbody>tr>td{
  padding:5px 6px;
  border:0;
  vertical-align:middle
}

/* Every row here is a set of form fields, so the row highlight followed the pointer across
   inputs the user is typing in and meant nothing. */

.app-shell .hms-pricing-page .table:not(.dataTable)>tbody>tr:hover>td{
  background:transparent
}

.app-shell .hms-guest-price-table .form-control{
  min-width:96px
}

.app-shell .hms-guest-price-action{
  width:84px;
  white-space:nowrap
}

.app-shell .hms-guest-price-action .act+.act{
  margin-left:5px
}

/* With no combinations set up yet the table is a heading row on its own, and the button sat
   against it with nothing between them. */

.app-shell .week_days_pricing_spacial .add-row{
  margin-top:12px
}

@media (max-width:1100px){
  .app-shell .hms-week-grid{
    grid-template-columns:repeat(4,minmax(0,1fr))
  }
}

@media (max-width:640px){
  .app-shell .hms-week-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}

/* HMS calendar and bookings ------------------------------------------------ */

/* The controls were three pull-left/pull-right boxes with hardcoded top margins to line them
   up, so they sat at different heights and drifted apart at other widths. */

.app-shell .hms-calendar-bar{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  padding:14px;
  border-bottom:1px solid var(--border-2)
}

.app-shell .hms-calendar-jump{
  display:grid;
  gap:5px;
  max-width:220px
}

.app-shell .hms-calendar-nav{
  display:flex;
  gap:6px
}

.app-shell .hms-calendar-range{
  display:grid;
  gap:2px;
  margin-right:auto
}

.app-shell .hms-calendar-range strong{
  color:var(--text);
  font-size:13px;
  font-weight:750
}

.app-shell .hms-calendar-range span{
  color:var(--text-3);
  font-size:11.5px;
  font-weight:600
}

.app-shell table.hms-calendar-table{
  width:100%;
  margin:0;
  border-collapse:collapse;
  table-layout:fixed
}

.app-shell table.hms-calendar-table th,.app-shell table.hms-calendar-table td{
  padding:7px 9px;
  border:1px solid var(--border-2);
  text-align:left;
  font-size:12px;
  vertical-align:middle
}

.app-shell .hms-calendar-room-head,.app-shell .hms-calendar-room{
  width:180px
}

.app-shell .hms-calendar-day{
  width:auto;
  text-align:center
}

.app-shell .hms-calendar-day span{
  display:block;
  color:var(--text);
  font-size:14px;
  font-weight:750;
  line-height:1.2
}

.app-shell .hms-calendar-day small{
  display:block;
  color:var(--text-3);
  font-size:10.5px;
  font-weight:650;
  letter-spacing:.04em;
  text-transform:uppercase
}

.app-shell .hms-calendar-day.is-weekend,.app-shell td.hms-calendar-cell.is-weekend{
  background:var(--surface-2)
}

.app-shell .hms-calendar-day.is-today{
  background:var(--brand-weak)
}

.app-shell .hms-calendar-day.is-today span,.app-shell .hms-calendar-day.is-today small{
  color:var(--brand-strong)
}

.app-shell td.hms-calendar-cell.is-today{
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--brand) 30%,transparent)
}

.app-shell .hms-calendar-room{
  background:var(--surface-2)
}

.app-shell .hms-calendar-room strong{
  display:block;
  color:var(--text);
  font-size:12.5px;
  font-weight:750
}

.app-shell .hms-calendar-room small{
  display:block;
  margin-top:1px;
  color:var(--text-3);
  font-size:11px;
  font-weight:600
}

.app-shell td.hms-calendar-cell{
  height:44px;
  padding:4px 5px
}

/* The + only appeared on hover through a fadeIn, so an empty week looked like a dead grid
   with nothing to click. It is always present now, and strengthens under the pointer. */

.app-shell .hms-calendar-table .add_booking_div{
  display:grid;
  width:100%;
  height:100%;
  min-height:34px;
  place-items:center;
  border-radius:8px;
  color:var(--text-3);
  opacity:.45;
  transition:opacity .15s ease,background .15s ease,color .15s ease
}

.app-shell .hms-calendar-table td:hover .add_booking_div{
  background:var(--brand-weak);
  color:var(--brand-strong);
  opacity:1
}

.app-shell .hms-calendar-table .add_booking_div:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:-2px;
  opacity:1
}

/* A booking spanning several days is one cell with a colspan, so the bar is simply the
   width of its cell — the old markup drew one bar and widened it by string replacement. */

.app-shell .hms-calendar-booking{
  display:flex;
  min-height:34px;
  flex-direction:column;
  justify-content:center;
  padding:5px 9px;
  border-radius:8px;
  background:var(--brand);
  color:#fff;
  text-decoration:none;
  overflow:hidden
}

.app-shell .hms-calendar-booking strong{
  color:#fff;
  font-size:12px;
  font-weight:750;
  white-space:nowrap;
  text-overflow:ellipsis;
  overflow:hidden
}

.app-shell .hms-calendar-booking small{
  color:rgba(255,255,255,.86);
  font-size:10.5px;
  font-weight:600
}

.app-shell .hms-calendar-booking:hover{
  filter:brightness(1.06)
}

/* Pending is not confirmed, but the room is still spoken for. */

.app-shell .hms-calendar-booking.is-pending{
  background:#c98a12
}

.app-shell .hms-calendar-booking.is-continued{
  border-top-left-radius:0;
  border-bottom-left-radius:0
}

.app-shell .hms-calendar-booking.is-continues{
  border-top-right-radius:0;
  border-bottom-right-radius:0
}

.app-shell .hms-calendar-legend{
  display:flex;
  flex-wrap:wrap;
  gap:8px 18px;
  padding:12px 14px;
  border-top:1px solid var(--border-2)
}

.app-shell .hms-calendar-legend span{
  display:flex;
  align-items:center;
  gap:7px;
  color:var(--text-2);
  font-size:11.5px;
  font-weight:650
}

.app-shell .hms-calendar-legend i{
  width:11px;
  height:11px;
  border-radius:3px;
  background:var(--brand)
}

.app-shell .hms-calendar-legend i.is-pending{
  background:#c98a12
}

.app-shell .hms-calendar-legend i.is-free{
  border:1px solid var(--border);
  background:var(--surface-2)
}

/* HMS reports -------------------------------------------------------------- */

.app-shell .hms-report-filter{
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  align-items:end
}

.app-shell .hms-report-generate{
  display:flex;
  align-items:flex-end
}

/* Sixteen figures laid out as four rows of Bootstrap columns separated by horizontal rules,
   with nothing tying a figure to the group it belonged to. */

.app-shell .hms-report-group{
  margin-bottom:14px;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

.app-shell .hms-report-group>header{
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 14px;
  border-bottom:1px solid var(--border-2);
  background:linear-gradient(105deg,color-mix(in srgb,var(--brand-weak) 45%,var(--surface)) 0%,var(--surface) 64%)
}

.app-shell .hms-report-group>header h2{
  margin:0;
  color:var(--text);
  font-size:13.5px;
  font-weight:820
}

.app-shell .hms-report-group.is-good>header .section-icon{
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .hms-report-group.is-warn>header .section-icon{
  background:#fdf3e4;
  color:#b26a12
}

.app-shell .hms-report-group.is-bad>header .section-icon{
  background:color-mix(in srgb,var(--danger) 12%,var(--surface));
  color:var(--danger)
}

.app-shell .hms-report-stats{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr))
}

.app-shell .hms-report-stats>div{
  padding:13px 14px;
  border-right:1px solid var(--border-2)
}

.app-shell .hms-report-stats>div:last-child{
  border-right:0
}

.app-shell .hms-report-stats span{
  display:block;
  color:var(--text-3);
  font-size:10.5px;
  font-weight:850;
  letter-spacing:.05em;
  text-transform:uppercase
}

.app-shell .hms-report-stats strong{
  display:block;
  margin-top:3px;
  color:var(--text);
  font-size:20px;
  font-weight:900;
  font-variant-numeric:tabular-nums
}

.app-shell .hms-report-stats small{
  display:block;
  margin-top:2px;
  color:var(--text-3);
  font-size:11.5px
}

.app-shell .hms-report-table-card{
  margin-bottom:14px
}

.app-shell .hms-report-table-card .table-responsive{
  padding:0
}

@media (max-width:640px){
  .app-shell .hms-report-stats>div{
    border-right:0;
    border-bottom:1px solid var(--border-2)
  }
}

/* HMS dashboard ------------------------------------------------------------ */

.app-shell .hms-dashboard-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  align-items:stretch
}

.app-shell .hms-dashboard-grid>.workspace-card{
  display:flex;
  flex-direction:column;
  min-width:0
}

/* Room board. A hotel is read room by room before it is read as numbers. */

.app-shell .hms-rack-card{
  margin-bottom:14px
}

.app-shell .hms-rack{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(158px,1fr));
  gap:9px;
  padding:14px
}

.app-shell .hms-rack-room{
  display:grid;
  gap:1px;
  padding:11px 12px;
  border:1px solid var(--border-2);
  border-left:3px solid var(--text-3);
  border-radius:11px;
  background:var(--surface-2);
  color:var(--text);
  text-decoration:none;
  transition:border-color .15s ease,background .15s ease,transform .15s ease
}

.app-shell .hms-rack-room:hover{
  background:var(--surface);
  transform:translateY(-1px)
}

.app-shell .hms-rack-room>strong{
  font-size:14px;
  font-weight:800;
  line-height:1.2
}

.app-shell .hms-rack-room>small{
  color:var(--text-3);
  font-size:10.5px;
  font-weight:650;
  letter-spacing:.03em;
  text-transform:uppercase
}

.app-shell .hms-rack-room>span{
  margin-top:5px;
  color:var(--text-2);
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}

.app-shell .hms-rack-room>em{
  color:var(--text-3);
  font-size:10.5px;
  font-style:normal;
  font-weight:600
}

.app-shell .hms-rack-room.is-occupied{
  border-left-color:var(--brand);
  background:var(--brand-weak)
}

.app-shell .hms-rack-room.is-due-in{
  border-left-color:#2f7fd1
}

.app-shell .hms-rack-room.is-pending{
  border-left-color:#c98a12
}

.app-shell .hms-rack-room.is-blocked{
  border-left-color:var(--danger);
  background:var(--surface-3)
}

.app-shell .hms-rack-room.is-free{
  border-left-color:var(--border)
}

.app-shell .hms-rack-legend{
  display:flex;
  flex-wrap:wrap;
  gap:6px 14px
}

.app-shell .hms-rack-legend span{
  display:flex;
  align-items:center;
  gap:6px;
  color:var(--text-3);
  font-size:11px;
  font-weight:650
}

.app-shell .hms-rack-legend i{
  width:9px;
  height:9px;
  border-radius:3px;
  background:var(--border)
}

.app-shell .hms-rack-legend i.is-occupied{
  background:var(--brand)
}

.app-shell .hms-rack-legend i.is-due-in{
  background:#2f7fd1
}

.app-shell .hms-rack-legend i.is-pending{
  background:#c98a12
}

.app-shell .hms-rack-legend i.is-blocked{
  background:var(--danger)
}

/* Payment split: the total owed says how much, this says how it is spread. */

.app-shell .hms-ledger{
  display:grid;
  gap:6px;
  padding:14px
}

.app-shell .hms-ledger>a{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:baseline;
  gap:4px 10px;
  padding:9px 11px;
  border:1px solid var(--border-2);
  border-radius:10px;
  background:var(--surface-2);
  color:var(--text);
  text-decoration:none
}

.app-shell .hms-ledger>a:hover{
  border-color:color-mix(in srgb,var(--brand) 30%,var(--border));
  background:var(--brand-weak)
}

.app-shell .hms-ledger>a>span{
  display:flex;
  align-items:center;
  gap:7px;
  color:var(--text-2);
  font-size:12.5px;
  font-weight:650
}

.app-shell .hms-ledger>a>span>i{
  width:9px;
  height:9px;
  flex:none;
  border-radius:3px;
  background:var(--border)
}

.app-shell .hms-ledger>a>span>i.is-settled{
  background:var(--brand)
}

.app-shell .hms-ledger>a>span>i.is-part{
  background:#c98a12
}

.app-shell .hms-ledger>a>span>i.is-unpaid{
  background:var(--danger)
}

.app-shell .hms-ledger>a>strong{
  font-size:14px;
  font-weight:800
}

.app-shell .hms-ledger>a>small{
  grid-column:1/-1;
  color:var(--text-3);
  font-size:11px;
  font-weight:600
}

.app-shell .hms-ledger-facts{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:4px;
  padding-top:11px;
  border-top:1px solid var(--border-2)
}

.app-shell .hms-ledger-facts span{
  display:block;
  color:var(--text-3);
  font-size:11px;
  font-weight:650
}

.app-shell .hms-ledger-facts strong{
  display:block;
  margin-top:2px;
  font-size:13.5px;
  font-weight:750
}

/* Arrivals past today, which the screen never showed. */

.app-shell .hms-upcoming{
  display:grid;
  gap:4px;
  padding:14px
}

.app-shell .hms-upcoming>a{
  display:grid;
  grid-template-columns:34px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  padding:7px 9px;
  border-radius:9px;
  color:var(--text);
  text-decoration:none
}

.app-shell .hms-upcoming>a:hover{
  background:var(--surface-2)
}

.app-shell .hms-upcoming-day{
  text-align:center
}

.app-shell .hms-upcoming-day strong{
  display:block;
  font-size:13px;
  font-weight:750;
  line-height:1.1
}

.app-shell .hms-upcoming-day small{
  display:block;
  color:var(--text-3);
  font-size:10px;
  font-weight:650;
  text-transform:uppercase
}

.app-shell .hms-upcoming-who{
  min-width:0
}

.app-shell .hms-upcoming-who strong{
  display:block;
  font-size:12.5px;
  font-weight:700;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}

.app-shell .hms-upcoming-who small{
  display:block;
  color:var(--text-3);
  font-size:10.5px;
  font-weight:600
}

/* Needs attention: the work waiting on somebody, each row linking to the booking it is
   about, because a count on its own cannot be acted on. */

.app-shell .hms-attention-body{
  display:grid;
  gap:14px;
  padding:14px
}

.app-shell .hms-attention-group{
  display:grid;
  gap:5px
}

.app-shell .hms-attention-group>h3{
  display:flex;
  align-items:center;
  gap:6px;
  margin:0 0 2px;
  color:var(--text-3);
  font-size:11px;
  font-weight:650;
  letter-spacing:.03em;
  text-transform:uppercase
}

.app-shell .hms-attention-group.is-urgent>h3{
  color:var(--danger)
}

.app-shell .hms-attention-group>a{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  padding:8px 10px;
  border:1px solid var(--border-2);
  border-radius:9px;
  background:var(--surface-2);
  color:var(--text);
  text-decoration:none;
  transition:border-color .15s ease,background .15s ease
}

.app-shell .hms-attention-group>a:hover{
  border-color:color-mix(in srgb,var(--brand) 32%,var(--border));
  background:var(--brand-weak)
}

.app-shell .hms-attention-group.is-urgent>a{
  border-color:color-mix(in srgb,var(--danger) 28%,var(--border))
}

.app-shell .hms-attention-group>a>strong{
  font-size:12.5px;
  font-weight:700;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}

.app-shell .hms-attention-group>a>small{
  flex:none;
  color:var(--text-3);
  font-size:11px;
  font-weight:600
}

.app-shell .hms-attention-note{
  display:flex;
  align-items:center;
  gap:7px;
  margin:0;
  padding:9px 10px;
  border:1px dashed var(--border);
  border-radius:9px;
  color:var(--text-3);
  font-size:11.5px;
  font-weight:600
}

/* Seven nights ahead, drawn from the same numbers the calendar uses. */

.app-shell .hms-forecast-body{
  display:grid;
  gap:3px;
  padding:14px
}

.app-shell .hms-forecast-night{
  display:grid;
  grid-template-columns:38px minmax(0,1fr) 52px;
  align-items:center;
  gap:10px;
  padding:6px 8px;
  border-radius:9px;
  color:var(--text);
  text-decoration:none
}

.app-shell .hms-forecast-night:hover{
  background:var(--surface-2)
}

.app-shell .hms-forecast-day{
  text-align:center
}

.app-shell .hms-forecast-day strong{
  display:block;
  font-size:13px;
  font-weight:750;
  line-height:1.1
}

.app-shell .hms-forecast-day small{
  display:block;
  color:var(--text-3);
  font-size:10px;
  font-weight:650;
  text-transform:uppercase
}

.app-shell .hms-forecast-bar{
  display:block;
  height:9px;
  border-radius:5px;
  background:var(--surface-3);
  overflow:hidden
}

.app-shell .hms-forecast-bar>i{
  display:block;
  height:100%;
  border-radius:5px;
  background:var(--brand);
  transition:width .2s ease
}

.app-shell .hms-forecast-night.is-full .hms-forecast-bar>i{
  background:var(--danger)
}

.app-shell .hms-forecast-value{
  text-align:right
}

.app-shell .hms-forecast-value strong{
  display:block;
  font-size:12px;
  font-weight:750;
  line-height:1.15
}

.app-shell .hms-forecast-value small{
  display:block;
  color:var(--text-3);
  font-size:10.5px;
  font-weight:600
}

.app-shell .hms-dashboard-panes{
  flex:1;
  padding:14px
}

.app-shell .hms-dashboard-panes>.tab-pane{
  min-height:0
}

@media (max-width:1200px){
  .app-shell .hms-dashboard-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}

@media (max-width:760px){
  .app-shell .hms-dashboard-grid{
    grid-template-columns:minmax(0,1fr)
  }
}

/* HMS booking form --------------------------------------------------------- */

.app-shell .hms-booking-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 340px;
  gap:14px;
  align-items:start
}

.app-shell .hms-booking-main{
  display:grid;
  gap:14px;
  min-width:0
}

.app-shell .hms-booking-side{
  display:grid;
  gap:14px;
  position:sticky;
  top:14px;
  min-width:0
}

.app-shell .hms-booking-fields{
  grid-template-columns:repeat(2,minmax(0,1fr))
}

.app-shell .hms-booking-form .hms-field-wide{
  grid-column:1/-1
}

.app-shell .hms-customer-picker{
  display:flex;
  align-items:center;
  gap:8px
}

.app-shell .hms-customer-picker>.select2-container,.app-shell .hms-customer-picker>select{
  flex:1;
  min-width:0
}

.app-shell .hms-billing-address{
  margin-top:8px;
  padding:9px 11px;
  border-radius:9px;
  background:var(--surface-2);
  font-size:12px;
  color:var(--text-2)
}

.app-shell .hms-billing-address>span{
  display:block;
  color:var(--text-3);
  font-size:10.5px;
  font-weight:850;
  letter-spacing:.05em;
  text-transform:uppercase
}

.app-shell .days_count{
  color:var(--brand-strong);
  font-weight:700
}

.app-shell .hms-booking-rooms{
  padding:14px
}

.app-shell table.hms-booking-room-table{
  width:100%;
  margin:0 0 12px;
  border-collapse:collapse
}

.app-shell table.hms-booking-room-table>thead>tr>th{
  padding:0 8px 7px;
  border:0;
  border-bottom:1px solid var(--border-2);
  color:var(--text-3);
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.05em;
  text-align:left;
  text-transform:uppercase;
  white-space:nowrap
}

.app-shell table.hms-booking-room-table>tbody>tr>td{
  padding:6px 8px;
  border:0;
  vertical-align:middle
}

/* Every row here is a set of form fields, so the row highlight followed the pointer across
   inputs the user is typing in. */

.app-shell .hms-booking-form .table:not(.dataTable)>tbody>tr:hover>td{
  background:transparent
}

.app-shell .hms-booking-room-action{
  width:44px
}

.app-shell .hms-booking-extras{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:11px;
  padding:14px
}

.app-shell .hms-booking-extras .settings-check small{
  display:block;
  margin-top:2px;
  color:var(--text-3);
  font-size:11.5px;
  font-weight:500
}

.app-shell .hms-booking-payment{
  display:grid;
  gap:14px;
  padding:14px
}

.app-shell .hms-change-return,.app-shell .hms-booking-balance{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  padding:11px 13px;
  border:1px solid var(--border-2);
  border-radius:10px;
  background:var(--surface-2)
}

.app-shell .hms-change-return span,.app-shell .hms-booking-balance span{
  color:var(--text-3);
  font-size:11px;
  font-weight:850;
  letter-spacing:.05em;
  text-transform:uppercase
}

.app-shell .hms-change-return strong,.app-shell .hms-booking-balance strong{
  color:var(--text);
  font-size:16px;
  font-weight:850;
  font-variant-numeric:tabular-nums
}

/* The totals were rows of a Bootstrap grid inside a panel, so the figures never lined up
   with each other. */

.app-shell .hms-summary-lines{
  display:grid;
  padding:6px 0
}

.app-shell .hms-summary-lines>div{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  padding:7px 14px;
  font-size:12.5px
}

.app-shell .hms-summary-lines span{
  color:var(--text-2)
}

.app-shell .hms-summary-lines strong{
  color:var(--text);
  font-weight:800;
  font-variant-numeric:tabular-nums
}

.app-shell .hms-summary-discount{
  padding:6px 14px 12px;
  border-top:1px solid var(--border-2)
}

.app-shell .hms-summary-total{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  padding:12px 14px;
  border-top:1px solid var(--border)
}

.app-shell .hms-summary-total span{
  color:var(--text-3);
  font-size:11px;
  font-weight:850;
  letter-spacing:.05em;
  text-transform:uppercase
}

.app-shell .hms-summary-total strong{
  color:var(--text);
  font-size:20px;
  font-weight:900;
  font-variant-numeric:tabular-nums
}

.app-shell .hms-booking-coupon{
  display:grid;
  gap:11px;
  padding:14px;
  justify-items:start
}

.app-shell .hms-booking-coupon>.field,.app-shell .hms-booking-coupon>div:first-child{
  width:100%
}

@media (max-width:1200px){
  .app-shell .hms-booking-grid{
    grid-template-columns:minmax(0,1fr)
  }

  .app-shell .hms-booking-side{
    position:static
  }
}

@media (max-width:640px){
  .app-shell .hms-booking-fields{
    grid-template-columns:minmax(0,1fr)
  }
}

/* The edit booking form keeps its Bootstrap column classes; these lay them out as a grid
   rather than floats, so the fields line up without rewriting every one of them. */

.app-shell .hms-booking-legacy-fields{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  padding:14px
}

.app-shell .hms-booking-legacy-fields>[class*="col-md-"]{
  width:auto;
  min-width:0;
  padding:0;
  float:none
}

.app-shell .hms-booking-legacy-fields>[class*="col-md-12"],
.app-shell .hms-booking-legacy-fields>.booking_add_room{
  grid-column:1/-1
}

.app-shell .hms-booking-legacy-fields hr{
  display:none
}

.app-shell .hms-booking-legacy-fields .form-group{
  margin:0
}

.app-shell .hms-booking-legacy-panel{
  padding:14px
}

.app-shell .hms-booking-legacy-panel .row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin:0 0 8px
}

.app-shell .hms-booking-legacy-panel .row>[class*="col-xs-"]{
  width:auto;
  padding:0;
  float:none
}

.app-shell .hms-booking-legacy-panel .row>.text-right{
  text-align:right
}

.app-shell .hms-booking-legacy-panel .form-group{
  margin:0
}

.app-shell .hms-booking-legacy-panel hr{
  margin:10px 0;
  border-color:var(--border-2)
}

@media (max-width:640px){
  .app-shell .hms-booking-legacy-fields{
    grid-template-columns:minmax(0,1fr)
  }
}

/* Booking detail ------------------------------------------------------------
   The screen read as a record, not a form, so its facts are a description list:
   the label sits above its value and a row with nothing to say collapses instead
   of leaving a labelled gap, which is what the old two-column float grid did. */

/* Named for the shape rather than the module: a screen that reads as a record uses these
   whichever module it belongs to. */

.app-shell .record-facts,
.app-shell .hms-facts{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:1px;
  margin:0;
  padding:14px;
  background:var(--border-2)
}

.app-shell .record-facts>div,.app-shell .hms-facts>div{
  min-width:0;
  padding:9px 12px;
  background:var(--surface)
}

.app-shell .record-facts dt,.app-shell .hms-facts dt{
  margin:0 0 3px;
  color:var(--text-3);
  font-size:11px;
  font-weight:650;
  letter-spacing:.03em;
  text-transform:uppercase
}

.app-shell .record-facts dd,.app-shell .hms-facts dd{
  margin:0;
  color:var(--text);
  font-size:13px;
  font-weight:600;
  line-height:1.5;
  overflow-wrap:anywhere
}

.app-shell .record-facts dd small,.app-shell .hms-facts dd small{
  display:block;
  margin-top:1px;
  color:var(--text-2);
  font-size:11.5px;
  font-weight:600
}

.app-shell .hms-facts-inline{
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr))
}

/* Reminder detail modal: the facts grid reads as a rounded card above the repeat field, and
   the destructive Delete sits apart on the left of the footer, away from Close. */

.app-shell .reminder-facts{
  margin-bottom:16px;
  padding:1px;
  border-radius:12px;
  overflow:hidden
}

.app-shell .reminder-footer-delete{
  margin-right:auto
}

/* Essentials task detail */

.app-shell .essentials-todo-description{
  padding:0 14px 14px
}

.app-shell .essentials-todo-description>h3{
  margin:0 0 7px;
  color:var(--text-3);
  font-size:11px;
  font-weight:650;
  letter-spacing:.03em;
  text-transform:uppercase
}

.app-shell .essentials-todo-description>div{
  color:var(--text-2);
  font-size:13px;
  line-height:1.6;
  overflow-wrap:anywhere
}

.app-shell .essentials-todo-description img{
  max-width:100%;
  height:auto;
  border-radius:9px
}

.app-shell .essentials-todo-pane{
  padding:14px
}

.app-shell .essentials-todo-comments{
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid var(--border-2)
}

/* The detail page is a working record on phones: dates and urgency stay scannable in a
   two-column summary, people get the width their names need, and tabs scroll as complete
   controls instead of shrinking their non-wrapping labels into one another. */

@media(max-width:640px){
  body.app-ui .essentials-todo-view .page-head{
    display:grid;
    gap:11px;
    padding:3px 0 13px
  }

  body.app-ui .essentials-todo-view .page-head>div:first-child{
    min-width:0
  }

  body.app-ui .essentials-todo-view .page-head h1{
    font-size:20px;
    line-height:1.2;
    overflow-wrap:anywhere
  }

  body.app-ui .essentials-todo-view .page-head p{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:6px
  }

  body.app-ui .essentials-todo-view .page-actions{
    display:grid;
    width:100%;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px
  }

  body.app-ui .essentials-todo-view .page-actions .btn-primary,body.app-ui .essentials-todo-view .page-actions .btn-ghost{
    width:100%;
    height:38px;
    justify-content:center;
    padding:0 10px
  }

  body.app-ui .essentials-todo-summary>.section-head{
    padding:11px 12px
  }

  body.app-ui .essentials-todo-summary>.section-head p{
    font-size:11.5px
  }

  body.app-ui .essentials-todo-summary .record-facts{
    grid-template-columns:repeat(2,minmax(0,1fr));
    padding:1px
  }

  body.app-ui .essentials-todo-summary .record-facts>div{
    padding:10px 11px
  }

  body.app-ui .essentials-todo-summary .record-facts>.essentials-todo-fact-person{
    grid-column:1/-1
  }

  body.app-ui .essentials-todo-summary .record-facts dt{
    font-size:10px
  }

  body.app-ui .essentials-todo-summary .record-facts dd{
    font-size:12.5px
  }

  body.app-ui .essentials-todo-description{
    padding:12px
  }

  body.app-ui .essentials-todo-description>div,body.app-ui .essentials-todo-description>.hrm-period-empty{
    font-size:12.5px;
    line-height:1.55
  }

  body.app-ui .essentials-todo-tabs{
    gap:5px;
    padding:7px 8px;
    scroll-padding-inline:8px;
    scroll-snap-type:x proximity;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch
  }

  body.app-ui .essentials-todo-tabs::-webkit-scrollbar{
    display:none
  }

  body.app-ui .essentials-todo-tabs>a{
    min-width:-moz-max-content;
    min-width:max-content;
    flex:0 0 auto;
    gap:6px;
    padding:6px 9px;
    scroll-snap-align:start
  }

  body.app-ui .essentials-todo-tabs>a>span:first-child{
    width:27px;
    height:27px
  }

  body.app-ui .essentials-todo-tabs strong{
    font-size:11.5px
  }

  body.app-ui .essentials-todo-tabs .section-tabs__count{
    min-width:18px;
    height:18px;
    padding:0 5px;
    font-size:10px
  }

  body.app-ui .essentials-todo-pane{
    padding:12px
  }

  body.app-ui .essentials-todo-comments{
    margin-top:0;
    padding-top:0;
    border-top:0
  }

  body.app-ui .essentials-todo-pane--comments{
    background:linear-gradient(180deg,var(--surface-2),var(--surface) 150px)
  }

  body.app-ui .todo-composer{
    gap:8px;
    padding:10px;
    border:1px solid var(--border-2);
    border-radius:11px;
    background:var(--surface)
  }

  body.app-ui .todo-composer__avatar{
    width:32px;
    height:32px;
    font-size:12px
  }

  body.app-ui .todo-composer__input{
    min-height:54px;
    font-size:12.5px
  }

  body.app-ui .todo-comments-feed{
    margin-top:12px
  }

  body.app-ui .todo-comment{
    gap:8px;
    padding-right:36px;
    padding-left:4px
  }

  body.app-ui .essentials-todo-pane--documents .essentials-todo-upload{
    gap:10px;
    padding:11px
  }

  body.app-ui .essentials-todo-pane--documents .essentials-todo-upload .file-upload-picker{
    height:auto;
    min-height:58px;
    grid-template-columns:30px minmax(0,1fr) auto;
    gap:8px;
    padding:7px 8px
  }

  body.app-ui .essentials-todo-pane--documents .essentials-todo-upload .file-upload-icon{
    width:30px;
    height:30px
  }

  body.app-ui .essentials-todo-pane--documents .essentials-todo-upload .file-upload-action{
    min-height:28px;
    grid-column:auto;
    padding:0 9px;
    justify-content:center
  }

  body.app-ui .essentials-todo-pane--documents .essentials-todo-upload textarea.form-control{
    height:54px;
    min-height:54px;
    font-size:12px
  }

  body.app-ui .essentials-todo-pane--documents .essentials-todo-upload>.btn-primary{
    width:100%;
    height:40px;
    justify-content:center
  }

  body.app-ui .essentials-todo-pane--documents .todo-docs{
    margin-top:12px
  }

  body.app-ui .essentials-todo-pane--documents .todo-docs-empty{
    min-height:150px;
    padding:22px 14px
  }

  body.app-ui .essentials-todo-pane--documents .todo-docs-empty__icon{
    width:40px;
    height:40px
  }

  body.app-ui .essentials-todo-pane--activities{
    background:var(--surface-2)
  }

  body.app-ui .todo-activity__item{
    gap:8px
  }

  body.app-ui .todo-activity__body{
    padding:9px 10px 4px;
    background:var(--surface)
  }

  body.app-ui .todo-activity__head{
    gap:4px 7px
  }

  body.app-ui .todo-activity__time{
    width:100%;
    margin-left:0
  }

  body.app-ui .todo-activity__change{
    gap:6px;
    padding:7px 0
  }

  body.app-ui .todo-activity__label{
    min-width:0;
    flex:1 1 calc(100% - 22px);
    font-size:10px
  }

  body.app-ui .essentials-todo-pane--reminders{
    background:var(--surface-2)
  }

  body.app-ui .essentials-todo-pane--reminders .trmv-meta{
    gap:5px;
    margin-bottom:14px
  }

  body.app-ui .essentials-todo-pane--reminders .trmv-chip{
    max-width:100%;
    padding:4px 9px;
    font-size:11.5px;
    overflow-wrap:anywhere
  }

  body.app-ui .essentials-todo-pane--reminders .trmv-rows{
    gap:7px;
    margin-bottom:16px
  }

  body.app-ui .essentials-todo-pane--reminders .trmv-row{
    display:grid;
    grid-template-columns:24px minmax(0,1fr) auto;
    gap:7px;
    padding:9px;
    background:var(--surface)
  }

  body.app-ui .essentials-todo-pane--reminders .trmv-num{
    width:22px;
    height:22px
  }

  body.app-ui .essentials-todo-pane--reminders .trmv-pill{
    margin-left:0;
    font-size:10.5px
  }

  body.app-ui .essentials-todo-pane--reminders .trmv-act{
    grid-column:auto
  }

  body.app-ui .essentials-todo-pane--reminders .trmv-act:first-of-type{
    grid-column:2
  }

  body.app-ui .essentials-todo-pane--reminders .trmv-btn{
    min-height:30px;
    justify-content:center
  }

  body.app-ui .essentials-todo-pane--reminders .trmv-log summary{
    display:grid;
    grid-template-columns:24px minmax(0,1fr) auto;
    gap:6px 8px
  }

  body.app-ui .essentials-todo-pane--reminders .trmv-log summary>strong{
    min-width:0;
    overflow-wrap:anywhere
  }

  body.app-ui .essentials-todo-pane--reminders .trmv-log summary>.trmv-pill{
    grid-column:3;
    grid-row:1
  }

  body.app-ui .essentials-todo-pane--reminders .trmv-when{
    grid-column:2/-1;
    font-size:10.5px
  }

  body.app-ui .essentials-todo-pane--reminders .trmv-msg,body.app-ui .essentials-todo-pane--reminders .trmv-err{
    margin:0 9px 9px;
    padding:9px;
    font-size:11.5px
  }

  body.app-ui .essentials-todo-pane--reminders .trmv-empty{
    background:var(--surface);
    font-size:11.5px;
    line-height:1.5
  }
}

@media(max-width:340px){
  body.app-ui .essentials-todo-summary .record-facts{
    grid-template-columns:minmax(0,1fr)
  }

  body.app-ui .essentials-todo-summary .record-facts>.essentials-todo-fact-person{
    grid-column:auto
  }
}

/* Upload sits on one line with its button, rather than a full-width bar under the fields
   with the button floated to the far end of it. The cells align on their bottom edge and
   the two controls are given the same height, so the labels above them line up and the
   button finishes level with both. */

.app-shell .essentials-todo-upload{
  display:grid;
  grid-template-columns:minmax(240px,1fr) minmax(220px,1.2fr) auto;
  align-items:end;
  gap:12px;
  padding:13px;
  border:1px solid var(--border-2);
  border-radius:12px;
  background:var(--surface-2)
}

/* Matched to the picker's own height, which carries two lines of text — shrinking it to the
   height of a plain control would clip the file name it reports. */

.app-shell .essentials-todo-upload{
  --todo-upload-control:62px
}

/* Each field fills its cell and hangs its control off the bottom, so the two labels sit on
   one line however tall the cell grows. The button is left alone: it lays its icon out
   beside its text and a column would stack the two. */

.app-shell .essentials-todo-upload>*:not(button){
  display:flex;
  min-width:0;
  flex-direction:column;
  justify-content:flex-end
}

/* Matched to the picker's own height, which carries two lines of text — shrinking it to the
   height of a plain control would clip the file name it reports. */

.app-shell .essentials-todo-upload .file-upload-picker{
  height:var(--todo-upload-control);
  min-height:var(--todo-upload-control)
}

.app-shell .essentials-todo-upload textarea.form-control{
  height:var(--todo-upload-control);
  min-height:var(--todo-upload-control);
  padding-top:11px;
  resize:none
}

.app-shell .essentials-todo-upload>.btn-primary{
  height:var(--todo-upload-control);
  white-space:nowrap
}

@media (max-width:840px){
  .app-shell .essentials-todo-upload{
    grid-template-columns:minmax(0,1fr)
  }

  .app-shell .essentials-todo-upload>.btn-primary{
    justify-self:start
  }
}

/* Upload panel on the documents screen. The picker used to fill the row to match the
   description box, which left it needlessly tall; it now sits compact and top-aligned, so
   the pair reads as a tidy, small field rather than a big dashed slab. */

.app-shell .essentials-document-upload .filter-grid{
  grid-template-columns:minmax(280px,1fr) minmax(280px,1.4fr);
  align-items:start
}

.app-shell .essentials-document-upload .file-upload-picker{
  min-height:58px;
  grid-template-columns:30px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  padding:8px 11px;
  border-radius:10px
}

.app-shell .essentials-document-upload .file-upload-icon{
  width:30px;
  height:30px;
  border-radius:8px
}

.app-shell .essentials-document-upload .file-upload-icon svg{
  width:15px;
  height:15px
}

.app-shell .essentials-document-upload .file-upload-copy strong{
  font-size:11.5px
}

.app-shell .essentials-document-upload .file-upload-copy small{
  margin-top:1px;
  font-size:10px
}

.app-shell .essentials-document-upload .file-upload-action{
  min-height:30px;
  padding:0 12px;
  font-size:10px
}

.app-shell .essentials-document-upload textarea.form-control{
  height:58px;
  min-height:58px;
  resize:vertical
}

/* Stated above the breakpoint only, so the stack the shared rule falls back to on a narrow
   screen is left intact. Keep the icon | copy | Browse row horizontal on real screens. */

@media (min-width:681px){
  .app-shell .essentials-document-upload .file-upload-picker{
    grid-template-columns:30px minmax(0,1fr) auto
  }

  .app-shell .essentials-document-upload .file-upload-action{
    grid-column:auto;
    justify-content:flex-end
  }
}

/* The form's buttons sat hard against the corner of the card: the fields carry the card's
   padding on their own grid, and the row beneath it had none. */

.app-shell .essentials-document-upload .form-inline-actions{
  margin-top:0;
  padding:0 14px 14px
}

/* Spreadsheet editor shell. Moved out of a style block in the module's own layout so the
   editor is styled from the same place as everything else. */

.app-shell.sheet-editor{
  display:flex;
  min-height:100vh;
  flex-direction:column;
  background:var(--surface-2)
}

.app-shell.sheet-editor .sheet-editor-body{
  position:relative;
  flex:1 1 auto;
  min-height:0
}

.app-shell.sheet-editor .spreadsheet{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  width:100%
}

/* luckysheet ships a share logo and its own back, update and save controls in the info bar;
   this page provides those itself. */

.luckysheet-share-logo,.luckysheet_info_detail_back,.luckysheet_info_detail_update,.luckysheet_info_detail_save{
  display:none!important
}

/* Document editor. UEditor draws its own chrome; these give it an edge and let it fill the
   space under the header rather than asking for a whole viewport of its own. */

.app-shell .document-editor-title{
  max-width:520px;
  margin-bottom:12px
}

.app-shell .document-editor-surface{
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface);
  overflow:hidden
}

.app-shell .document-editor-surface .edui-editor{
  border:0!important;
  border-radius:12px
}

.app-shell .document-editor-surface .edui-editor-toolbarbox{
  border-radius:12px 12px 0 0;
  box-shadow:none!important
}

.app-shell .document-editor-surface .edui-editor-toolbarboxouter{
  border-bottom:1px solid var(--border-2)!important;
  background:var(--surface-2)!important
}

.app-shell .document-editor-surface .edui-editor-iframeholder{
  min-height:min(64vh,720px)
}

/* Document tree. The search sat in an offset Bootstrap column with the expand and collapse
   buttons beside it, so the three drifted apart as the page narrowed. */

.app-shell .document-tree-bar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px;
  border-bottom:1px solid var(--border-2)
}

.app-shell .document-tree-search{
  position:relative;
  flex:1;
  min-width:220px;
  max-width:420px
}

.app-shell .document-tree-search>svg{
  position:absolute;
  top:50%;
  left:11px;
  margin-top:-8px;
  color:var(--text-3);
  pointer-events:none
}

.app-shell .document-tree-search>input{
  padding-left:34px
}

.app-shell .document-tree-controls{
  display:flex;
  gap:8px
}

.app-shell .document-tree-body{
  padding:14px;
  overflow-x:auto
}

/* jstree draws the tree itself; these keep its rows legible beside the actions on each one. */

.app-shell .document-tree-body .jstree-anchor{
  height:auto!important;
  white-space:normal;
  color:var(--text)
}

.app-shell .document-tree-body .jstree-clicked{
  border-radius:7px;
  background:var(--brand-weak);
  box-shadow:none
}

.app-shell .document-tree-body .jstree-hovered{
  border-radius:7px;
  background:var(--surface-2);
  box-shadow:none
}

.app-shell .tree-actions{
  display:inline-flex;
  align-items:center;
  gap:4px;
  margin-left:8px;
  vertical-align:middle
}

.app-shell .tree-actions .act{
  width:24px;
  height:24px
}

/* One line of facts under a document rather than a stack. The reset makes an svg a block, so
   each icon was taking a row of its own and a two-fact line became four. */

.app-shell .sheet-info{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:4px 14px;
  margin:1px 0 4px 38px;
  color:var(--text-3);
  font-size:11px;
  line-height:1.4
}

.app-shell .sheet-info>span{
  display:inline-flex;
  align-items:center;
  gap:5px;
  min-width:0
}

.app-shell .sheet-info svg{
  display:inline-block;
  flex:none;
  color:var(--text-3)
}

.app-shell .sheet-info small{
  color:var(--text-3);
  font-size:11px
}

.app-shell .sheet-info strong{
  color:var(--text-2);
  font-weight:700
}

/* A document is a leaf: give it a file mark rather than the folder the theme draws for
   every node. */

.app-shell .document-tree-body .jstree-leaf>.jstree-icon.jstree-themeicon{
  background-image:none
}

.app-shell .document-tree-body .jstree-leaf>.jstree-icon.jstree-themeicon:before{
  content:"";
  display:block;
  width:14px;
  height:14px;
  margin:4px 0 0 3px;
  background:currentColor;
  color:var(--text-3);
  -webkit-mask:var(--doc-file-mask) center/14px no-repeat;
  mask:var(--doc-file-mask) center/14px no-repeat
}

.app-shell .document-tree-body{
  --doc-file-mask: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' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3C/svg%3E")
}

/* Knowledge base. Every level used to be an AdminLTE box inside another box, with a bootstrap
   collapse for the sections; the sections are a details element now, which needs no script. */

.app-shell .essentials-kb-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:14px;
  align-items:start
}

.app-shell .essentials-kb-card{
  min-width:0
}

.app-shell .essentials-kb-body{
  padding:14px
}

.app-shell .essentials-kb-content{
  color:var(--text-2);
  font-size:13px;
  line-height:1.6;
  overflow-wrap:anywhere
}

/* Card preview of an entry: clamp the trimmed text to a few lines so every card stays a
   tidy, even height no matter how much was pasted in. */

.app-shell .essentials-kb-excerpt{
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
  margin:0
}

.app-shell .essentials-kb-content img{
  max-width:100%;
  height:auto;
  border-radius:9px
}

.app-shell .essentials-kb-sections{
  display:grid;
  gap:8px;
  margin-top:12px
}

.app-shell .essentials-kb-section{
  border:1px solid var(--border-2);
  border-radius:11px;
  background:var(--surface-2);
  overflow:hidden
}

.app-shell .essentials-kb-section>summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  color:var(--text);
  font-size:12.5px;
  font-weight:700;
  cursor:pointer;
  list-style:none
}

.app-shell .essentials-kb-section>summary::-webkit-details-marker{
  display:none
}

.app-shell .essentials-kb-section>summary:hover{
  background:var(--brand-weak)
}

.app-shell .essentials-kb-section>summary>svg{
  flex:none;
  color:var(--text-3);
  transition:transform .15s ease
}

.app-shell .essentials-kb-section[open]>summary>svg{
  transform:rotate(180deg)
}

.app-shell .essentials-kb-section-body{
  padding:0 12px 12px;
  background:var(--surface)
}

.app-shell .essentials-kb-section-body>.repair-invoice-row-actions{
  justify-content:flex-end;
  padding:8px 0
}

.app-shell .essentials-kb-articles{
  display:grid;
  gap:2px;
  margin:8px 0 0;
  padding:0;
  list-style:none
}

.app-shell .essentials-kb-articles>li{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:6px 8px;
  border-radius:8px
}

.app-shell .essentials-kb-articles>li:hover{
  background:var(--surface-2)
}

.app-shell .essentials-kb-articles>li>a{
  display:flex;
  min-width:0;
  align-items:center;
  gap:7px;
  color:var(--text-2);
  font-size:12.5px;
  font-weight:650;
  text-decoration:none
}

.app-shell .essentials-kb-articles>li>a:hover{
  color:var(--brand-strong)
}

.app-shell .essentials-kb-articles>li>a>svg{
  flex:none;
  color:var(--text-3)
}

.app-shell .essentials-kb-articles>li>a>span{
  min-width:0;
  overflow-wrap:anywhere
}

.app-shell .essentials-kb-articles>li.is-active{
  background:var(--brand-weak)
}

.app-shell .essentials-kb-articles>li.is-active>a{
  color:var(--brand-strong);
  font-weight:750
}

/* Knowledge-base detail page: a section nav beside the entry, which sits in a card that reads
   like a document rather than a raw HTML dump in a legacy box. */

.app-shell .essentials-kb-layout{
  display:grid;
  grid-template-columns:minmax(0,260px) minmax(0,1fr);
  gap:14px;
  align-items:start
}

.app-shell .essentials-kb-view .essentials-kb-sections{
  margin-top:0
}

.app-shell .essentials-kb-article{
  padding:18px 20px
}

.app-shell .essentials-kb-article-body{
  color:var(--text);
  font-size:14px;
  line-height:1.7;
  overflow-wrap:anywhere
}

.app-shell .essentials-kb-article-body>*+*{
  margin-top:12px
}

.app-shell .essentials-kb-article-body h1,.app-shell .essentials-kb-article-body h2,.app-shell .essentials-kb-article-body h3,.app-shell .essentials-kb-article-body h4{
  color:var(--text);
  font-weight:750;
  line-height:1.35
}

.app-shell .essentials-kb-article-body ul,.app-shell .essentials-kb-article-body ol{
  padding-left:20px
}

.app-shell .essentials-kb-article-body a{
  color:var(--brand-strong);
  text-decoration:underline;
  text-underline-offset:2px
}

@media(max-width:820px){
  .app-shell .essentials-kb-layout{
    grid-template-columns:1fr
  }
}

/* Team thread. The card was an AdminLTE box with a fixed 70vh body; the thread now takes the
   height it is given and the composer stays put beneath it. */

.app-shell .essentials-chat{
  display:flex;
  flex-direction:column;
  min-height:min(70vh,620px)
}

.app-shell .essentials-chat-thread{
  display:flex;
  flex:1;
  flex-direction:column;
  gap:10px;
  padding:16px;
  overflow-y:auto
}

.app-shell .essentials-chat-empty{
  margin:auto
}

.app-shell .essentials-chat-message{
  display:flex;
  max-width:min(72%,560px)
}

.app-shell .essentials-chat-message.is-mine{
  margin-left:auto
}

.app-shell .essentials-chat-bubble{
  width:100%;
  padding:9px 12px;
  border:1px solid var(--border-2);
  border-radius:12px 12px 12px 4px;
  background:var(--surface-2)
}

.app-shell .essentials-chat-message.is-mine .essentials-chat-bubble{
  border-color:color-mix(in srgb,var(--brand) 28%,var(--border));
  border-radius:12px 12px 4px;
  background:var(--brand-weak)
}

.app-shell .essentials-chat-bubble>header{
  display:flex;
  align-items:baseline;
  gap:8px;
  margin-bottom:3px
}

.app-shell .essentials-chat-bubble>header>strong{
  color:var(--text);
  font-size:12px;
  font-weight:750
}

.app-shell .essentials-chat-bubble>header>small{
  color:var(--text-3);
  font-size:10.5px;
  font-weight:600
}

.app-shell .essentials-chat-bubble>header>.chat-delete{
  display:inline-grid;
  width:18px;
  height:18px;
  margin-left:auto;
  place-items:center;
  border-radius:5px;
  color:var(--text-3)
}

.app-shell .essentials-chat-bubble>header>.chat-delete:hover{
  background:color-mix(in srgb,var(--danger) 14%,transparent);
  color:var(--danger)
}

.app-shell .essentials-chat-bubble>p{
  margin:0;
  color:var(--text-2);
  font-size:13px;
  line-height:1.5;
  overflow-wrap:anywhere
}

.app-shell .essentials-chat-composer{
  border-top:1px solid var(--border-2);
  padding:12px 16px
}

.app-shell .essentials-chat-composer form{
  display:grid;
  grid-template-columns:minmax(0,1fr) 190px auto;
  align-items:end;
  gap:10px
}

.app-shell .essentials-chat-composer textarea.form-control{
  min-height:44px;
  height:44px;
  padding-top:11px;
  resize:none
}

.app-shell .essentials-chat-composer .btn-primary{
  height:44px;
  min-width:52px;
  padding:0 16px
}

@media (max-width:720px){
  .app-shell .essentials-chat-composer form{
    grid-template-columns:minmax(0,1fr) auto
  }

  .app-shell .essentials-chat-composer select.form-control{
    grid-column:1/-1
  }
}

/* ---- fullcalendar v3 bridge ------------------------------------------------
   The calendar's own stylesheet is in the bundle this layout does not load, so with nothing
   styling it the toolbar rendered as run-together words and the month as a column of bare
   numbers. Written against the v3 class names the plugin emits. */

.app-shell .essentials-calendar-card{
  padding:14px
}

.app-shell .fc{
  font-size:13px
}

.app-shell .fc .fc-toolbar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin:0 0 14px
}

.app-shell .fc .fc-toolbar h2{
  margin:0;
  color:var(--text);
  font-size:16px;
  font-weight:800
}

.app-shell .fc .fc-left,.app-shell .fc .fc-right,.app-shell .fc .fc-center{
  display:flex;
  align-items:center;
  gap:8px;
  float:none
}

.app-shell .fc .fc-button-group{
  display:inline-flex;
  gap:6px
}

.app-shell .fc .fc-button{
  display:inline-flex;
  height:34px;
  align-items:center;
  justify-content:center;
  padding:0 12px;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface);
  box-shadow:none;
  color:var(--text-2);
  font-size:12.5px;
  font-weight:700;
  text-shadow:none;
  cursor:pointer;
  transition:border-color .15s ease,background .15s ease,color .15s ease
}

.app-shell .fc .fc-button:hover{
  border-color:color-mix(in srgb,var(--brand) 40%,var(--border));
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .fc .fc-button.fc-state-active,.app-shell .fc .fc-button.fc-state-down{
  border-color:var(--brand);
  background:var(--brand);
  color:#fff
}

.app-shell .fc .fc-button.fc-state-disabled{
  opacity:.5;
  cursor:not-allowed
}

/* The prev and next buttons are icon-only in v3 and draw their arrow from a font. */

.app-shell .fc .fc-icon{
  display:inline-flex;
  width:16px;
  height:16px;
  align-items:center;
  justify-content:center;
  font-family:inherit;
  font-size:0
}

.app-shell .fc .fc-icon:after{
  font-size:15px;
  font-weight:800;
  line-height:1
}

.app-shell .fc .fc-icon-left-single-arrow:after{
  content:'‹'
}

.app-shell .fc .fc-icon-right-single-arrow:after{
  content:'›'
}

/* Structure. v3 lays a month out as two stacked tables per week — a background table that
   carries the cell borders, and a content table above it holding the numbers and events — and
   it positions them from its own stylesheet. Without these the content table collapses to the
   width of its text, which is why the month read as a short column of numbers on the left. */

.app-shell .fc-view,.app-shell .fc-view>table{
  position:relative;
  z-index:1
}

.app-shell .fc table{
  width:100%;
  margin:0;
  table-layout:fixed;
  border-collapse:collapse;
  border-spacing:0
}

.app-shell .fc th,.app-shell .fc td{
  padding:0;
  border:1px solid var(--border-2);
  vertical-align:top
}

.app-shell .fc-row{
  position:relative;
  border-width:0;
  border-style:solid
}

.app-shell .fc-row table{
  border-left:0 hidden transparent;
  border-right:0 hidden transparent;
  border-bottom:0 hidden transparent
}

.app-shell .fc-row:first-child table{
  border-top:0 hidden transparent
}

.app-shell .fc-row .fc-bg{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  z-index:1
}

.app-shell .fc-row .fc-bg table{
  height:100%
}

.app-shell .fc-row .fc-content-skeleton{
  position:relative;
  z-index:4;
  padding-bottom:2px
}

.app-shell .fc-row .fc-content-skeleton table{
  background:none;
  border-color:transparent
}

.app-shell .fc-row .fc-content-skeleton td,.app-shell .fc-row .fc-helper-skeleton td{
  border-color:transparent;
  border-bottom:0;
  background:none
}

.app-shell .fc-row .fc-content-skeleton tbody td{
  border-top:0
}

.app-shell .fc-day-grid-container{
  position:relative
}

.app-shell .fc-day-grid .fc-row{
  min-height:92px
}

.app-shell .fc-scroller{
  overflow-y:auto;
  -webkit-overflow-scrolling:touch
}

.app-shell .fc-view-container{
  border:1px solid var(--border-2);
  border-radius:12px;
  overflow:hidden
}

.app-shell .fc .fc-day-header{
  padding:9px 6px;
  border-color:var(--border-2);
  background:var(--surface-2);
  color:var(--text-3);
  font-size:11px;
  font-weight:700;
  letter-spacing:.03em;
  text-transform:uppercase
}

/* v3 floats the number to the trailing edge of the cell from its own stylesheet. */

.app-shell .fc .fc-day-number{
  display:block;
  padding:6px 8px 0;
  color:var(--text-2);
  font-size:12px;
  font-weight:700;
  text-align:right
}

.app-shell .fc-ltr .fc-day-number{
  float:right
}

.app-shell .fc .fc-day-grid-event{
  margin:2px 6px
}

.app-shell .fc .fc-today{
  background:var(--brand-weak)
}

.app-shell .fc .fc-today .fc-day-number{
  color:var(--brand-strong);
  font-weight:800
}

.app-shell .fc .fc-other-month{
  background:var(--surface-2)
}

.app-shell .fc .fc-other-month .fc-day-number{
  color:var(--text-3);
  opacity:.7
}

.app-shell .fc .fc-event{
  padding:2px 7px;
  border:0;
  border-radius:7px;
  background:var(--brand);
  color:#fff;
  font-size:11.5px;
  font-weight:650;
  cursor:pointer
}

.app-shell .fc .fc-event:hover{
  filter:brightness(1.06);
  color:#fff
}

.app-shell .fc .fc-event .fc-title{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .fc .fc-more{
  color:var(--brand-strong);
  font-size:11px;
  font-weight:700
}

.app-shell .fc .fc-popover{
  border:1px solid var(--border);
  border-radius:11px;
  background:var(--surface);
  box-shadow:0 18px 42px -16px rgba(16,32,24,.34)
}

.app-shell .fc .fc-popover .fc-header{
  padding:8px 10px;
  border-radius:11px 11px 0 0;
  background:var(--surface-2);
  color:var(--text-2);
  font-weight:700
}

@media (max-width:640px){
  .app-shell .fc .fc-toolbar{
    flex-direction:column;
    align-items:stretch
  }

  .app-shell .fc .fc-left,.app-shell .fc .fc-right{
    justify-content:center
  }
}

/* A document row reads as a file name with what is known about it beneath, rather than three
   lines each led by an icon. */

.app-shell .essentials-document-cell{
  display:grid;
  gap:2px;
  min-width:0
}

.app-shell .essentials-document-name{
  color:var(--text);
  font-weight:700;
  overflow-wrap:anywhere;
  text-decoration:none
}

.app-shell a.essentials-document-name:hover{
  color:var(--brand-strong);
  text-decoration:underline
}

.app-shell .essentials-document-cell small{
  color:var(--text-3);
  font-size:11px;
  font-weight:600
}

@media (max-width:760px){
  .app-shell .essentials-document-upload .filter-grid{
    grid-template-columns:minmax(0,1fr)
  }
}

/* This form carries a rich text editor and a drop area, and the shared 640px dialog wrapped
   the editor toolbar onto three rows. */

body.app-ui .essentials-todo-dialog{
  width:min(calc(100vw - 32px),900px);
  margin:16px auto
}

body.app-ui .essentials-todo-dialog .repair-form-dialog-content{
  max-height:calc(100dvh - 68px);
  overflow:hidden
}

body.app-ui .essentials-todo-dialog form{
  display:flex;
  max-height:inherit;
  flex-direction:column
}

body.app-ui .essentials-todo-dialog .repair-form-dialog-body{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch
}

body.app-ui .essentials-todo-form-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
  padding:16px
}

body.app-ui .essentials-todo-form-grid .select2-container{
  width:100%!important;
  max-width:100%
}

body.app-ui .essentials-todo-dialog .mce-tinymce,body.app-ui .essentials-todo-dialog .tox-tinymce{
  width:100%!important;
  max-width:100%
}

@media(max-width:640px){
  body.app-ui .essentials-todo-dialog .repair-form-dialog-content{
    max-height:calc(100dvh - 16px);
    border-radius:13px
  }

  body.app-ui .essentials-todo-dialog .repair-form-dialog-header{
    min-height:64px;
    padding:10px 12px;
    border-radius:13px 13px 0 0
  }

  body.app-ui .essentials-todo-dialog .repair-form-dialog-heading>span{
    width:36px;
    height:36px;
    flex-basis:36px
  }

  body.app-ui .essentials-todo-dialog .repair-form-dialog-heading h4{
    font-size:14px
  }

  body.app-ui .essentials-todo-dialog .repair-form-dialog-body{
    padding:0
  }

  body.app-ui .essentials-todo-form-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px 10px;
    padding:12px
  }

  body.app-ui .essentials-todo-form-grid>.hms-field-full{
    grid-column:1/-1
  }

  body.app-ui .essentials-todo-dialog .flabel{
    font-size:11.5px
  }

  body.app-ui .essentials-todo-dialog .form-control,body.app-ui .essentials-todo-dialog .select2-selection,body.app-ui .essentials-todo-dialog .select2-selection__rendered{
    font-size:12px
  }

  body.app-ui .essentials-todo-dialog .mce-edit-area iframe{
    height:170px!important;
    min-height:170px!important
  }

  body.app-ui .essentials-todo-dialog .tox-tinymce{
    height:230px!important;
    min-height:230px!important
  }

  body.app-ui .essentials-todo-dialog .trm-card{
    padding:12px
  }

  body.app-ui .essentials-todo-dialog .trm-sec{
    padding:11px
  }

  body.app-ui .essentials-todo-dialog .trm-head-text strong{
    font-size:13px
  }

  body.app-ui .essentials-todo-dialog .trm-head-text small{
    font-size:10.5px;
    line-height:1.4
  }

  body.app-ui .essentials-todo-dialog .trm-sec-title{
    font-size:10.5px
  }

  body.app-ui .essentials-todo-dialog .trm-label{
    font-size:11.5px
  }

  body.app-ui .essentials-todo-dialog .trm-chip span{
    padding:6px 11px;
    font-size:11.5px
  }

  body.app-ui .essentials-todo-dialog .trm-recipient,body.app-ui .essentials-todo-dialog .trm-recipient-warn{
    font-size:10.5px
  }

  body.app-ui .essentials-todo-dialog .trm-empty{
    font-size:11.5px;
    line-height:1.45
  }

  body.app-ui .essentials-todo-dialog .trm-actions .trm-btn,body.app-ui .essentials-todo-dialog .trm-daily button,body.app-ui .essentials-todo-dialog .trm-daily input[type="time"]{
    font-size:11.5px
  }

  body.app-ui .essentials-todo-dialog .trm-preview-to{
    font-size:11.5px;
    line-height:1.5
  }

  body.app-ui .essentials-todo-dialog .trm-preview-body{
    font-size:12px;
    line-height:1.55
  }

  body.app-ui .essentials-todo-dialog .reminder-row input.reminder-datepicker{
    min-width:0;
    max-width:none;
    flex:1 1 180px
  }

  body.app-ui .essentials-todo-dialog .reminder-row .trm-row-hint{
    width:100%;
    padding-left:30px
  }

  body.app-ui .essentials-todo-dialog .repair-form-dialog-footer{
    align-items:center;
    flex-direction:row;
    padding:10px 12px
  }

  body.app-ui .essentials-todo-dialog .repair-form-dialog-footer>*{
    width:auto
  }

  body.app-ui .essentials-todo-dialog .repair-form-dialog-footer .btn-primary,body.app-ui .essentials-todo-dialog .repair-form-dialog-footer .btn-ghost{
    font-size:10.5px
  }

  body.app-ui .essentials-todo-dialog .essentials-todo-dropzone{
    font-size:11.5px
  }
}

@media(max-width:340px){
  body.app-ui .essentials-todo-form-grid{
    grid-template-columns:minmax(0,1fr)
  }

  body.app-ui .essentials-todo-form-grid>*{
    grid-column:auto
  }
}

/* Dropzone paints nothing of its own, so its drop area read as a line of text sitting on the
   dialog background with no edge to aim at. */

.app-shell .essentials-todo-dropzone{
  display:grid;
  min-height:96px;
  place-content:center;
  padding:16px;
  border:1px dashed var(--border);
  border-radius:11px;
  background:var(--surface-2);
  color:var(--text-3);
  font-size:12.5px;
  text-align:center;
  cursor:pointer;
  transition:border-color .16s ease,background .16s ease
}

.app-shell .essentials-todo-dropzone:hover,.app-shell .essentials-todo-dropzone.dz-drag-hover{
  border-color:color-mix(in srgb,var(--brand) 48%,var(--border));
  background:var(--brand-weak)
}

.app-shell .essentials-todo-dropzone .dz-message{
  margin:0;
  color:var(--text-2);
  font-weight:650
}

.app-shell .essentials-todo-dropzone .dz-preview{
  margin:8px 6px 0
}

/* For a form that sits inside a card or a tab rather than filling the page: the same right
   aligned row, without the sticky bar and gradient that .form-page-actions carries. */

.app-shell .form-inline-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:12px
}

/* Task documents: a list, not a table. The four columns gave the file name the narrowest
   cell on the row — every screenshot name broke onto three lines — while the description
   beside it held twice the width and was usually empty. The name now leads the row, with a
   thumbnail or a file-type badge at its left and the size, who saved it and when beneath. */

.app-shell .todo-docs{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin:14px 0 0;
  padding:0;
  list-style:none
}

.app-shell .todo-doc{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:10px;
  border:1px solid var(--border-2);
  border-radius:12px;
  background:var(--surface);
  transition:border-color .14s ease,box-shadow .14s ease
}

.app-shell .todo-doc:hover{
  border-color:color-mix(in srgb,var(--brand) 35%,var(--border));
  box-shadow:0 6px 18px -14px #10201866
}

/* An image shows itself; anything else says what it is. */

.app-shell .todo-doc__thumb{
  display:grid;
  overflow:hidden;
  width:44px;
  height:44px;
  flex:none;
  place-items:center;
  border:1px solid var(--border-2);
  border-radius:9px;
  background:var(--surface-2);
  color:var(--text-3);
  text-decoration:none
}

.app-shell .todo-doc__thumb img{
  width:100%;
  height:100%;
  -o-object-fit:cover;
     object-fit:cover
}

.app-shell .todo-doc__ext{
  font-size:10px;
  font-weight:800;
  letter-spacing:.04em
}

.app-shell .todo-doc__body{
  min-width:0;
  flex:1 1 auto
}

.app-shell .todo-doc__name{
  display:block;
  overflow:hidden;
  color:var(--text);
  font-size:13px;
  font-weight:750;
  text-decoration:none;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .todo-doc__name:hover{
  color:var(--brand-strong);
  text-decoration:underline
}

.app-shell .todo-doc__meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  margin-top:3px;
  color:var(--text-3);
  font-size:11.5px;
  font-weight:600
}

.app-shell .todo-doc__meta>span+span:before{
  margin-right:6px;
  color:var(--border);
  content:"·"
}

/* A description can be one unbroken run of characters; without this it ran straight out of the row. */

.app-shell .todo-doc__desc{
  margin-top:6px;
  color:var(--text-2);
  font-size:12.5px;
  line-height:1.5;
  overflow-wrap:anywhere;
  word-break:break-word
}

.app-shell .todo-doc__actions{
  display:flex;
  flex:none;
  align-items:center;
  gap:4px
}

.app-shell .todo-docs-empty{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  padding:26px 16px 30px;
  border:1px dashed var(--border);
  border-radius:12px;
  color:var(--text-3);
  text-align:center
}

.app-shell .todo-docs-empty__icon{
  display:grid;
  width:44px;
  height:44px;
  place-items:center;
  border-radius:50%;
  background:var(--surface-2)
}

.app-shell .todo-docs-empty__title{
  margin:0;
  color:var(--text-2);
  font-size:13px;
  font-weight:700
}

.app-shell .todo-docs-empty__hint{
  margin:0;
  max-width:340px;
  color:var(--text-3);
  font-size:12.5px;
  line-height:1.5
}

@media (max-width:640px){
  .app-shell .todo-doc{
    flex-wrap:wrap
  }

  .app-shell .todo-doc__actions{
    width:100%;
    justify-content:flex-end
  }
}

/* Long descriptions are clamped to two lines with a More/Less toggle beneath. */

.app-shell .doc-desc__text{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden
}

.app-shell .doc-desc.is-open .doc-desc__text{
  -webkit-line-clamp:unset;
  overflow:visible
}

.app-shell .doc-desc__toggle{
  margin-top:3px;
  padding:0;
  border:0;
  background:transparent;
  color:var(--brand-strong);
  font-size:11.5px;
  font-weight:700;
  cursor:pointer
}

.app-shell .doc-desc__toggle:hover{
  text-decoration:underline
}

.app-shell .hms-fact-empty{
  color:var(--text-3);
  font-weight:600
}

.app-shell .hms-booking-view .hms-card-table{
  padding:4px 14px 12px
}

.app-shell .hms-booking-view .hms-card-table .table:not(.dataTable)>tbody>tr:hover>td{
  background:transparent
}

.app-shell .hms-extras-list{
  padding:0 14px 14px
}

.app-shell .hms-extras-list h3{
  margin:0 0 7px;
  color:var(--text-3);
  font-size:11px;
  font-weight:650;
  letter-spacing:.03em;
  text-transform:uppercase
}

.app-shell .hms-extras-list ul{
  margin:0;
  padding:0;
  list-style:none
}

.app-shell .hms-extras-list li{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  padding:7px 0;
  border-bottom:1px solid var(--border-2);
  color:var(--text);
  font-size:12.5px
}

.app-shell .hms-extras-list li:last-child{
  border-bottom:0
}

.app-shell .hms-extras-list li>span:last-child{
  color:var(--text-2);
  font-weight:700;
  white-space:nowrap
}

.app-shell .hms-extras-list small{
  margin-left:5px;
  color:var(--text-3);
  font-size:11px;
  font-weight:600
}

.app-shell .hms-booking-totals{
  padding:14px
}

.app-shell .hms-booking-totals>div{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  padding:7px 0;
  color:var(--text-2);
  font-size:12.5px
}

.app-shell .hms-booking-totals>div>strong{
  color:var(--text);
  font-weight:750;
  white-space:nowrap
}

.app-shell .hms-booking-totals small{
  margin-left:4px;
  color:var(--text-3);
  font-size:11px;
  font-weight:600
}

.app-shell .hms-booking-totals>.is-total{
  margin-top:5px;
  padding-top:11px;
  border-top:1px solid var(--border);
  font-size:13.5px
}

.app-shell .hms-booking-totals>.is-total>strong{
  font-size:15px
}

.app-shell .hms-booking-totals>.is-due{
  margin-top:5px;
  padding-top:9px;
  border-top:1px dashed var(--border-2)
}

.app-shell .hms-booking-totals>.is-outstanding>strong{
  color:var(--danger)
}

/* Booking edit -------------------------------------------------------------- */

.app-shell .hms-billing-address{
  min-height:38px;
  padding:9px 11px;
  border:1px solid var(--border-2);
  border-radius:10px;
  background:var(--surface-2);
  color:var(--text-2);
  font-size:12.5px;
  line-height:1.5
}

.app-shell .hms-summary-field{
  padding:0 14px 14px
}

.app-shell .hms-summary-field .btn-ghost{
  width:100%;
  justify-content:center;
  margin-top:10px
}

/* Extras were a one-column table whose only cell held a bare checkbox and a run-on
   line of name, price and unit, so there was nothing to aim at but the box itself. */

.app-shell .hms-extras-picker{
  padding:0 14px 14px
}

.app-shell .hms-extras-picker>h3{
  margin:0 0 8px;
  color:var(--text-3);
  font-size:11px;
  font-weight:650;
  letter-spacing:.03em;
  text-transform:uppercase
}

.app-shell .hms-extras-picker>div{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:8px
}

.app-shell .hms-extra-option{
  display:flex;
  align-items:flex-start;
  gap:9px;
  margin:0;
  padding:9px 11px;
  border:1px solid var(--border-2);
  border-radius:10px;
  background:var(--surface-2);
  cursor:pointer;
  transition:border-color .15s ease,background .15s ease
}

.app-shell .hms-extra-option:hover{
  border-color:color-mix(in srgb,var(--brand) 32%,var(--border))
}

.app-shell .hms-extra-option:has(input:checked){
  border-color:var(--brand);
  background:var(--brand-weak)
}

.app-shell .hms-extra-option>input[type=checkbox]{
  width:15px;
  height:15px;
  flex:none;
  margin:1px 0 0;
  accent-color:var(--brand)
}

.app-shell .hms-extra-option strong{
  display:block;
  color:var(--text);
  font-size:12.5px;
  font-weight:700
}

.app-shell .hms-extra-option small{
  display:block;
  margin-top:2px;
  color:var(--text-3);
  font-size:11.5px;
  font-weight:600
}

.app-shell .hms-payment-body{
  padding:14px
}

.app-shell .hms-payment-body .payment_row+.payment_row{
  margin-top:12px
}

.app-shell .hms-payment-returns{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:flex-end;
  gap:10px 26px;
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid var(--border-2)
}

.app-shell .hms-payment-returns>div{
  display:flex;
  align-items:baseline;
  gap:9px
}

.app-shell .hms-payment-returns span{
  color:var(--text-2);
  font-size:12.5px;
  font-weight:650
}

.app-shell .hms-payment-returns strong{
  color:var(--text);
  font-size:14px;
  font-weight:800
}

/* HMS settings -------------------------------------------------------------- */

.app-shell .hms-settings-page .settings-form>.tab-pane{
  display:none;
  padding:14px
}

.app-shell .hms-settings-page .settings-form>.tab-pane.active{
  display:block
}

.app-shell .hms-settings-page .section-head{
  padding:0 0 12px;
  border-bottom:1px solid var(--border-2)
}

.app-shell .hms-settings-page .filter-grid{
  padding:14px 0 0
}

.app-shell .hms-settings-page .settings-check{
  margin-top:12px
}

.app-shell .hms-settings-page .hms-form-actions{
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid var(--border-2)
}

/* The merge tags were one long comma-separated line, which is hard to pick a single tag
   out of and impossible to copy cleanly. */

.app-shell .hms-settings-tags{
  margin-top:14px;
  padding:12px 13px;
  border:1px solid var(--border-2);
  border-radius:11px;
  background:var(--surface-2)
}

.app-shell .hms-settings-tags>strong{
  display:block;
  margin-bottom:8px;
  color:var(--text-3);
  font-size:11px;
  font-weight:650;
  letter-spacing:.03em;
  text-transform:uppercase
}

.app-shell .hms-settings-tags>div{
  display:flex;
  flex-wrap:wrap;
  gap:6px
}

.app-shell .hms-settings-tags code{
  padding:3px 8px;
  border:1px solid var(--border-2);
  border-radius:7px;
  background:var(--surface);
  color:var(--brand-strong);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11.5px;
  -webkit-user-select:all;
     -moz-user-select:all;
          user-select:all
}

/* TinyMCE builds at the width it is given; inside a field it must fill it. */

.app-shell .hms-settings-page .tox-tinymce{
  width:100%!important;
  border:1px solid var(--border)!important;
  border-radius:10px
}

/* HMS check in / check out ------------------------------------------------- */

.app-shell .hms-checkin-dialog{
  width:min(1000px,calc(100% - 28px))
}

.app-shell .hms-checkin-panel{
  margin-top:12px
}

.app-shell .hms-checkin-panel .panel-heading,.app-shell .hms-checkin-panel>.panel-heading{
  padding:11px 14px;
  border-bottom:1px solid var(--border-2);
  background:linear-gradient(105deg,color-mix(in srgb,var(--brand-weak) 45%,var(--surface)) 0%,var(--surface) 64%)
}

.app-shell .hms-checkin-panel .panel-title{
  margin:0;
  color:var(--text);
  font-size:13.5px;
  font-weight:820
}

.app-shell .hms-checkin-panel .panel-body{
  padding:14px
}

.app-shell .hms-checkin-panel .row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin:0 0 8px
}

.app-shell .hms-checkin-panel .row>[class*="col-xs-"]{
  width:auto;
  padding:0;
  float:none
}

/* An inline svg with no width or height fills whatever box it lands in. Icons drawn into
   markup built at runtime — a select2 result, a datatable cell — can end up outside .app-shell
   where nothing sizes them, so this is the floor rather than the styling. */

svg.dt-action-icon{
  width:15px;
  height:15px;
  flex:none
}

.app-shell svg.dt-action-icon{
  width:15px;
  height:15px
}

/* The date picker needs a non-static parent to place its panel against; the layout gives it
   one when the picker is built, since only script can check that the parent is static first.
   A blanket rule here would also hit the pickers that place into a fixed portal and break
   them. */

/* ============================================================
   Project — listing
   ============================================================ */

.app-shell .project-stats{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:12px;
  margin-bottom:16px
}

.app-shell .project-stat{
  display:flex;
  flex-direction:column;
  gap:3px;
  padding:13px 15px;
  border:1px solid var(--border);
  border-left:3px solid var(--stat-color,var(--border-2));
  border-radius:12px;
  background:var(--surface);
  box-shadow:var(--shadow-sm);
  text-decoration:none;
  transition:transform .15s ease,box-shadow .15s ease
}

.app-shell .project-stat:hover{
  transform:translateY(-1px);
  box-shadow:var(--shadow-md);
  text-decoration:none
}

.app-shell .project-stat small{
  color:var(--text-3);
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase
}

.app-shell .project-stat b{
  color:var(--text);
  font-size:24px;
  font-weight:800;
  font-variant-numeric:tabular-nums;
  line-height:1.1
}

/* A status nobody is in is still worth saying, quietly. */

.app-shell .project-stat.is-empty b{
  color:var(--text-3)
}

.app-shell .project-stat.is-slate{
  --stat-color:#94a3b8
}

.app-shell .project-stat.is-blue{
  --stat-color:#38bdf8
}

.app-shell .project-stat.is-amber{
  --stat-color:#f59e0b
}

.app-shell .project-stat.is-red{
  --stat-color:#ef4444
}

.app-shell .project-stat.is-green{
  --stat-color:#22c55e
}

.app-shell .project-filter-card{
  margin-bottom:16px
}

.app-shell .project-filter-card .filter-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))
}

.app-shell .project-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px
}

.app-shell .project-grid+.project-grid{
  margin-top:14px
}

.app-shell .project-card{
  display:flex;
  flex-direction:column;
  gap:11px;
  padding:15px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  box-shadow:var(--shadow-sm);
  transition:box-shadow .15s ease,border-color .15s ease
}

.app-shell .project-card:hover{
  border-color:color-mix(in srgb,var(--brand) 30%,var(--border));
  box-shadow:var(--shadow-md)
}

.app-shell .project-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px
}

.app-shell .project-card-name{
  color:var(--text);
  font-size:15px;
  font-weight:800;
  line-height:1.3;
  text-decoration:none
}

.app-shell .project-card-name:hover{
  color:var(--brand);
  text-decoration:none
}

.app-shell .project-card-head-right{
  display:flex;
  align-items:center;
  gap:6px;
  flex-shrink:0
}

.app-shell .project-card-menu{
  position:relative
}

.app-shell .project-card-menu .dropdown-menu{
  min-width:212px
}

.app-shell .project-card-menu .dropdown-menu>li>a{
  display:flex;
  align-items:center;
  gap:9px
}

.app-shell .project-card-menu .dropdown-menu svg{
  width:15px;
  height:15px;
  color:var(--text-3);
  flex-shrink:0
}

.app-shell .project-card-facts{
  display:flex;
  flex-direction:column;
  gap:7px;
  margin:0
}

.app-shell .project-card-facts>div{
  display:grid;
  grid-template-columns:minmax(0,124px) minmax(0,1fr);
  align-items:baseline;
  gap:10px
}

.app-shell .project-card-facts dt{
  display:flex;
  align-items:center;
  gap:6px;
  margin:0;
  color:var(--text-3);
  font-size:12px;
  font-weight:600
}

.app-shell .project-card-facts dt svg{
  width:14px;
  height:14px;
  flex-shrink:0
}

.app-shell .project-card-facts dd{
  margin:0;
  color:var(--text);
  font-size:13px;
  font-weight:600;
  overflow-wrap:anywhere
}

.app-shell .project-card-tags{
  display:flex;
  flex-wrap:wrap;
  gap:5px
}

.app-shell .project-card-tag{
  padding:3px 9px;
  border:1px solid var(--border-2);
  border-radius:999px;
  background:var(--surface-2);
  color:var(--text-2);
  font-size:11px;
  font-weight:700
}

.app-shell .project-card-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:auto;
  padding-top:11px;
  border-top:1px solid var(--border-2)
}

.app-shell .project-card-members{
  display:flex;
  align-items:center
}

.app-shell .project-card-members .user_avatar{
  width:28px;
  height:28px;
  border-radius:50%;
  border:2px solid var(--surface);
  -o-object-fit:cover;
     object-fit:cover;
  background:var(--surface-3)
}

.app-shell .project-card-members .user_avatar+.user_avatar{
  margin-left:-8px
}

.app-shell .project-card-open{
  display:inline-flex;
  align-items:center;
  gap:5px;
  color:var(--brand);
  font-size:12px;
  font-weight:700;
  text-decoration:none;
  white-space:nowrap
}

.app-shell .project-card-open:hover{
  text-decoration:none;
  gap:7px
}

.app-shell .project-card-open svg{
  width:14px;
  height:14px
}

.app-shell .project-empty{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  padding:44px 16px;
  border:1px dashed var(--border);
  border-radius:14px;
  background:var(--surface);
  color:var(--text-3)
}

.app-shell .project-empty p{
  margin:0;
  font-size:13.5px;
  font-weight:600
}

.app-shell .project-load-more{
  width:100%;
  margin-top:14px;
  justify-content:center
}

@media (max-width:1200px){
  .app-shell .project-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

  .app-shell .project-stats{
    grid-template-columns:repeat(3,minmax(0,1fr))
  }
}

@media (max-width:820px){
  .app-shell .project-grid{
    grid-template-columns:1fr
  }

  .app-shell .project-stats{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

  .app-shell .project-filter-card .filter-grid{
    grid-template-columns:1fr
  }
}

/* ------------------------------------------------------------
   Project — kanban board

   The board is drawn by jKanban, whose stylesheet ships only in the legacy
   vendor bundle that this shell does not load, so the columns arrived as bare
   floated divs. This is the same markup, dressed for this design.
   ------------------------------------------------------------ */

.app-shell .project-kanban-card{
  padding:14px
}

.app-shell .project-kanban-board,.app-shell .project-kanban-board .page,.app-shell .project-kanban-board .main,.app-shell .project-kanban-board .meta-tasks-wrapper{
  min-width:0
}

.app-shell .project-kanban-board .meta-tasks{
  overflow:auto!important;
  padding-bottom:6px
}

/* Perfect Scrollbar's own rails live in that same missing bundle; the column
   scrolls natively instead. */

.app-shell .project-kanban-board .ps__rail-x,.app-shell .project-kanban-board .ps__rail-y{
  display:none!important
}

.app-shell .project-kanban-board .kanban-container{
  display:flex;
  align-items:flex-start;
  gap:12px;
  width:auto!important;
  padding:2px
}

.app-shell .project-kanban-board .kanban-board{
  float:none;
  flex:0 0 auto;
  width:320px;
  margin:0;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface-2)
}

.app-shell .project-kanban-board .kanban-board header{
  padding:12px 14px;
  border-bottom:1px solid var(--border-2)
}

.app-shell .project-kanban-board .board-title{
  display:flex;
  align-items:center;
  gap:7px;
  color:var(--text);
  font-size:13px;
  font-weight:800;
  letter-spacing:.02em;
  text-transform:uppercase
}

.app-shell .project-kanban-board .kanban-drag{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-height:120px;
  max-height:62vh;
  overflow:auto;
  padding:12px
}

.app-shell .project-kanban-board .kanban-item{
  margin:0;
  padding:12px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

.app-shell .project-kanban-board .kanban-item:hover{
  border-color:color-mix(in srgb,var(--brand) 30%,var(--border));
  box-shadow:var(--shadow-md)
}

.app-shell .project-kanban-board .kanban-item.dragging{
  opacity:.6
}

.app-shell .project-kanban-board .card-title{
  color:var(--text);
  font-size:14px;
  font-weight:700;
  line-height:1.35
}

.app-shell .project-kanban-board .card-title a{
  color:inherit;
  text-decoration:none
}

.app-shell .project-kanban-board .card-tags{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:5px;
  margin-top:9px
}

.app-shell .project-kanban-board .card-tags .label{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:3px 9px;
  border:1px solid var(--border-2);
  border-radius:999px;
  background:var(--surface-2);
  color:var(--text-2);
  font-size:11px;
  font-weight:700
}

.app-shell .project-kanban-board .card-tags .label-danger{
  border-color:color-mix(in srgb,var(--danger) 32%,transparent);
  background:color-mix(in srgb,var(--danger) 12%,var(--surface));
  color:var(--danger)
}

.app-shell .project-kanban-board .card-tags .user_avatar{
  width:24px;
  height:24px;
  border-radius:50%;
  border:2px solid var(--surface);
  -o-object-fit:cover;
     object-fit:cover
}

.app-shell .project-kanban-board .card-actions{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:11px;
  padding-top:10px;
  border-top:1px solid var(--border-2)
}

/* Every action on a card was an icon and nothing else, and the icon font is not
   part of this stack, so they arrived as blank squares. The word each button
   already carried as its tooltip is shown instead. */

.app-shell .project-kanban-board .card-actions i{
  display:none
}

.app-shell .project-kanban-board .card-action,.app-shell .project-kanban-board .card-actions .action{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:4px 10px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface);
  color:var(--text-2);
  font-size:11.5px;
  font-weight:700;
  cursor:pointer;
  text-decoration:none
}

.app-shell .project-kanban-board .card-action:hover,.app-shell .project-kanban-board .card-actions .action:hover{
  border-color:color-mix(in srgb,var(--brand) 34%,var(--border));
  color:var(--text);
  text-decoration:none
}

.app-shell .project-kanban-board .card-action[title]::after,.app-shell .project-kanban-board .card-actions .action[title]::after{
  content:attr(title)
}

/* Project create/edit dialog. Three fields across a row need more than the 640px a
   default dialog gets, and the description editor makes it tall enough to scroll. */

body.app-ui .project-form-dialog{
  width:min(94vw,880px);
  margin:5vh auto
}

.app-shell .project-form-grid .tox-tinymce{
  border:1px solid var(--border);
  border-radius:10px
}

/* ============================================================
   Project — detail page
   ============================================================ */

.app-shell .project-view-page .page-head p{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 14px
}

.app-shell .page-head-fact{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--text-3);
  font-size:12.5px;
  font-weight:600
}

.app-shell .page-head-fact svg{
  width:14px;
  height:14px
}

.app-shell .project-workspace{
  overflow:hidden
}

.app-shell .project-tab-content>.tab-pane{
  display:none
}

.app-shell .project-tab-content>.tab-pane.active{
  display:block
}

.app-shell .project-task-filter-card{
  margin-bottom:14px
}

.app-shell .project-task-filter-card .filter-grid{
  grid-template-columns:repeat(4,minmax(0,1fr))
}

.app-shell .project-task-filter-card .status_filter.hide{
  display:none
}

.app-shell .project-overview{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,360px);
  gap:16px;
  align-items:start
}

.app-shell .project-overview-main{
  display:flex;
  flex-direction:column;
  gap:14px;
  min-width:0
}

.app-shell .project-metrics{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(168px,1fr));
  gap:12px
}

.app-shell .project-metric{
  display:flex;
  flex-direction:column;
  gap:3px;
  padding:13px 15px;
  border:1px solid var(--border);
  border-left:3px solid var(--metric-color,var(--border-2));
  border-radius:12px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

.app-shell .project-metric>span{
  display:grid;
  width:30px;
  height:30px;
  place-items:center;
  border-radius:8px;
  background:color-mix(in srgb,var(--metric-color,var(--brand)) 14%,var(--surface));
  color:var(--metric-color,var(--brand-strong))
}

.app-shell .project-metric small{
  margin-top:5px;
  color:var(--text-3);
  font-size:11px;
  font-weight:700;
  letter-spacing:.03em;
  text-transform:uppercase
}

.app-shell .project-metric b{
  color:var(--text);
  font-size:21px;
  font-weight:800;
  font-variant-numeric:tabular-nums;
  line-height:1.15
}

.app-shell .project-metric.is-slate{
  --metric-color:#94a3b8
}

.app-shell .project-metric.is-blue{
  --metric-color:#3b82f6
}

.app-shell .project-metric.is-cyan{
  --metric-color:#06b6d4
}

.app-shell .project-metric.is-amber{
  --metric-color:#f59e0b
}

.app-shell .project-metric.is-red{
  --metric-color:#ef4444
}

.app-shell .project-metric.is-green{
  --metric-color:#22c55e
}

.app-shell .project-overview-card{
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

.app-shell .project-overview-card>.section-head{
  border-radius:14px 14px 0 0
}

.app-shell .project-overview-card .record-facts{
  margin:0;
  padding:13px 15px
}

.app-shell .project-description{
  padding:14px 15px;
  color:var(--text-2);
  font-size:13.5px;
  line-height:1.65;
  overflow-wrap:anywhere
}

.app-shell .project-description :where(p,ul,ol):last-child{
  margin-bottom:0
}

.app-shell .project-overview-tags{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  padding:0 15px 13px
}

.app-shell .project-overview-members{
  display:flex;
  flex-direction:column;
  gap:7px;
  padding:12px 15px;
  border-top:1px solid var(--border-2);
  background:var(--surface-2)
}

.app-shell .project-overview-members>small{
  color:var(--text-3);
  font-size:11px;
  font-weight:700;
  letter-spacing:.03em;
  text-transform:uppercase
}

@media (max-width:1100px){
  .app-shell .project-overview{
    grid-template-columns:1fr
  }

  .app-shell .project-task-filter-card .filter-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}

@media (max-width:680px){
  .app-shell .project-task-filter-card .filter-grid{
    grid-template-columns:1fr
  }
}

/* Project detail — the head of a tab body, and the tables inside one. */

.app-shell .project-tab-head{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:13px
}

.app-shell .project-tab-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px
}

.app-shell .project-table-card{
  overflow:auto;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

.app-shell .project-table-card>table{
  margin:0
}

/* The task view toggle stays a pair of radios, because the datatable asks which one is
   checked. Bootstrap's button group used to paint the active one; the checked radio says
   it here, with the class kept as a fallback for the first paint. */

.app-shell .view-toggle-option:has(input:checked){
  background:var(--surface);
  color:var(--text);
  box-shadow:0 1px 2px rgba(20,27,23,.08)
}

/* Project detail — the settings tab. Two cards inside the tab's own card, with the update
   button floating in the space beneath them; they are two halves of one pane now, and the
   button sits on a bar along the bottom where a form's button belongs. */

.app-shell .project-settings-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(320px,1fr))
}

.app-shell .project-settings-column{
  min-width:0
}

.app-shell .project-settings-column+.project-settings-column{
  border-left:1px solid var(--border-2)
}

.app-shell .project-settings-column>header{
  padding:11px 15px;
  border-bottom:1px solid var(--border-2);
  background:var(--surface-2)
}

.app-shell .project-settings-column>header .section-title{
  align-items:center
}

.app-shell .project-settings-column>header h2{
  font-size:13.5px
}

.app-shell .project-settings-column>header p{
  margin:1px 0 0;
  color:var(--text-3);
  font-size:11.5px
}

.app-shell .project-settings-body{
  display:flex;
  flex-direction:column;
  gap:13px;
  padding:15px
}

.app-shell .project-settings-field{
  display:flex;
  flex-direction:column;
  gap:6px
}

.app-shell .project-settings-label{
  color:var(--text-2);
  font-size:12.5px;
  font-weight:700
}

.app-shell .project-settings-actions{
  display:flex;
  justify-content:flex-end;
  padding:12px 15px;
  border-top:1px solid var(--border-2);
  background:var(--surface-2)
}

/* The box was left to the browser, which paints it in its own blue whatever the page's
   colours are. */

.app-shell .settings-check input[type=checkbox]{
  -moz-appearance:none;
       appearance:none;
  -webkit-appearance:none;
  width:18px;
  height:18px;
  flex:none;
  margin:1px 0 0;
  border:1.5px solid var(--border);
  border-radius:6px;
  background:var(--surface);
  cursor:pointer;
  transition:background .12s ease,border-color .12s ease
}

.app-shell .settings-check input[type=checkbox]:hover{
  border-color:color-mix(in srgb,var(--brand) 45%,var(--border))
}

.app-shell .settings-check input[type=checkbox]:checked{
  border-color:var(--brand);
  background:var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center/13px 13px no-repeat
}

.app-shell .settings-check input[type=checkbox]:focus-visible{
  outline:0;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 22%,transparent)
}

@media (max-width:760px){
  .app-shell .project-settings-column+.project-settings-column{
    border-left:0;
    border-top:1px solid var(--border-2)
  }
}

/* Project detail — the facts card beside the overview. Each fact was a box of its own,
   stacked, so a one-word answer took a tall row and the card ran past the metrics beside
   it. Label and value share a line now. */

.app-shell .project-facts-card{
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

.app-shell .project-facts-head{
  display:flex;
  align-items:center;
  gap:11px;
  padding:13px 15px;
  border-bottom:1px solid var(--border-2);
  background:linear-gradient(105deg,color-mix(in srgb,var(--brand-weak) 52%,var(--surface)) 0%,var(--surface) 70%)
}

.app-shell .project-facts-badge{
  display:grid;
  width:38px;
  height:38px;
  flex:none;
  place-items:center;
  border-radius:11px;
  background:var(--brand-weak);
  color:var(--brand-strong);
  font-size:16px;
  font-weight:800
}

.app-shell .project-facts-head>div{
  display:flex;
  min-width:0;
  flex-direction:column;
  align-items:flex-start;
  gap:5px
}

.app-shell .project-facts-head strong{
  color:var(--text);
  font-size:14px;
  font-weight:800;
  line-height:1.3;
  overflow-wrap:anywhere
}

.app-shell .project-facts-progress{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:11px 15px;
  border-bottom:1px solid var(--border-2);
  background:var(--surface-2)
}

.app-shell .project-facts-progress>div:first-child{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px
}

.app-shell .project-facts-progress small{
  color:var(--text-3);
  font-size:11px;
  font-weight:700;
  letter-spacing:.03em;
  text-transform:uppercase
}

.app-shell .project-facts-progress b{
  color:var(--text);
  font-size:13px;
  font-weight:800;
  font-variant-numeric:tabular-nums
}

.app-shell .project-progress-track{
  position:relative;
  height:6px;
  border-radius:999px;
  background:var(--surface-3);
  overflow:hidden
}

.app-shell .project-progress-track>span{
  display:block;
  height:100%;
  border-radius:999px;
  background:var(--brand);
  transition:width .3s ease
}

.app-shell .project-facts{
  display:flex;
  flex-direction:column;
  margin:0;
  padding:0
}

.app-shell .project-facts>div{
  display:grid;
  grid-template-columns:minmax(0,104px) minmax(0,1fr);
  align-items:baseline;
  gap:12px;
  padding:9px 15px
}

.app-shell .project-facts>div+div{
  border-top:1px solid var(--border-2)
}

.app-shell .project-facts dt{
  margin:0;
  color:var(--text-3);
  font-size:11px;
  font-weight:700;
  letter-spacing:.03em;
  text-transform:uppercase
}

.app-shell .project-facts dd{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  margin:0;
  color:var(--text);
  font-size:13px;
  font-weight:600;
  overflow-wrap:anywhere
}

.app-shell .project-facts dd code{
  padding:1px 6px;
  border-radius:5px;
  background:var(--surface-3);
  color:var(--text-3);
  font-size:11px
}

.app-shell .project-facts dd svg{
  width:13px;
  height:13px;
  color:var(--text-3)
}

.app-shell .project-facts-tags{
  gap:5px
}

.app-shell .project-facts-members{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:11px 15px;
  border-top:1px solid var(--border-2);
  background:var(--surface-2)
}

.app-shell .project-facts-members>small{
  color:var(--text-3);
  font-size:11px;
  font-weight:700;
  letter-spacing:.03em;
  text-transform:uppercase
}

/* Project detail — the activities timeline. AdminLTE drew it, and its stylesheet ships in
   the legacy bundle this shell does not load, so the entries arrived as a bare list with
   an empty circle where each icon should be. */

.app-shell .project-tab-content ul.timeline{
  display:flex;
  flex-direction:column;
  gap:0;
  margin:0;
  padding:0 0 0 4px;
  list-style:none
}

.app-shell .activity-day{
  display:flex;
  align-items:center;
  gap:10px;
  margin:14px 0 8px
}

.app-shell .activity-day:first-child{
  margin-top:0
}

.app-shell .activity-day>span{
  padding:3px 11px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--surface-2);
  color:var(--text-2);
  font-size:11.5px;
  font-weight:800;
  letter-spacing:.02em
}

.app-shell .activity-day:after{
  flex:1;
  height:1px;
  background:var(--border-2);
  content:""
}

.app-shell .activity-item{
  position:relative;
  display:grid;
  grid-template-columns:32px minmax(0,1fr);
  gap:12px;
  padding:0 0 14px 0
}

/* The line runs between the dots rather than behind them. */

.app-shell .activity-item:not(:last-child):before{
  position:absolute;
  top:34px;
  bottom:0;
  left:15px;
  width:2px;
  background:var(--border-2);
  content:""
}

.app-shell .activity-dot{
  position:relative;
  z-index:1;
  display:grid;
  width:32px;
  height:32px;
  place-items:center;
  border:1px solid var(--border);
  border-radius:50%;
  background:var(--surface);
  color:var(--dot-color,var(--text-3));
  box-shadow:var(--shadow-sm)
}

.app-shell .activity-dot.is-green{
  --dot-color:#16a34a;
  border-color:color-mix(in srgb,#16a34a 34%,var(--border));
  background:color-mix(in srgb,#16a34a 10%,var(--surface))
}

.app-shell .activity-dot.is-blue{
  --dot-color:#2563eb;
  border-color:color-mix(in srgb,#2563eb 34%,var(--border));
  background:color-mix(in srgb,#2563eb 10%,var(--surface))
}

.app-shell .activity-dot.is-red{
  --dot-color:#dc2626;
  border-color:color-mix(in srgb,#dc2626 34%,var(--border));
  background:color-mix(in srgb,#dc2626 10%,var(--surface))
}

.app-shell .activity-dot.is-amber{
  --dot-color:#d97706;
  border-color:color-mix(in srgb,#d97706 34%,var(--border));
  background:color-mix(in srgb,#d97706 10%,var(--surface))
}

.app-shell .activity-dot.is-slate{
  --dot-color:#64748b
}

.app-shell .activity-card{
  min-width:0;
  padding:11px 13px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

.app-shell .activity-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px
}

.app-shell .activity-head strong{
  color:var(--text);
  font-size:13.5px;
  font-weight:700;
  line-height:1.45;
  overflow-wrap:anywhere
}

.app-shell .activity-head time{
  flex:none;
  color:var(--text-3);
  font-size:11.5px;
  font-weight:700;
  font-variant-numeric:tabular-nums
}

.app-shell .activity-detail{
  margin-top:7px;
  color:var(--text-2);
  font-size:13px;
  line-height:1.55;
  overflow-wrap:anywhere
}

.app-shell .activity-detail a{
  color:var(--text);
  font-weight:700;
  text-decoration:none
}

.app-shell .activity-detail a:hover{
  color:var(--brand);
  text-decoration:none
}

.app-shell .activity-detail code,.app-shell .activity-changes code{
  padding:1px 6px;
  border-radius:5px;
  background:var(--surface-3);
  color:var(--text-3);
  font-size:11.5px
}

.app-shell .activity-meta{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--text-2);
  font-size:12.5px;
  font-weight:600
}

.app-shell .activity-meta svg{
  width:14px;
  height:14px;
  color:var(--text-3)
}

.app-shell .activity-note{
  margin-top:6px;
  padding:8px 10px;
  border-left:2px solid var(--border);
  border-radius:0 8px 8px 0;
  background:var(--surface-2);
  color:var(--text-2);
  font-size:12.5px
}

.app-shell .activity-note :where(p):last-child{
  margin-bottom:0
}

.app-shell .activity-changes{
  display:flex;
  flex-direction:column;
  gap:5px;
  margin:8px 0 0;
  padding:9px 11px;
  border-radius:9px;
  background:var(--surface-2);
  list-style:none
}

.app-shell .activity-changes>li{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:7px;
  font-size:12.5px
}

.app-shell .activity-changes svg{
  width:13px;
  height:13px;
  flex:none;
  color:var(--text-3)
}

.app-shell .activity-change-field{
  min-width:84px;
  color:var(--text-3);
  font-size:11px;
  font-weight:700;
  letter-spacing:.03em;
  text-transform:uppercase
}

.app-shell .activity-change-old{
  color:var(--text-3);
  text-decoration:line-through
}

.app-shell .activity-change-new{
  color:var(--text);
  font-weight:700
}

.app-shell .activity-more{
  padding-top:4px
}

.app-shell .activity-more .btn-ghost{
  width:100%;
  justify-content:center
}

/* Datatable avatar stack. Every avatar used to be an <img> pointed at an external avatar
   service — a request per member per row — and any that failed left the alt text and a
   broken-image icon in the cell. The initial sits underneath, so a picture that never
   arrives simply falls back to it. */

.app-shell .dt-avatars{
  display:inline-flex;
  align-items:center;
  padding-left:6px
}

.app-shell .dt-avatar{
  position:relative;
  display:inline-grid;
  width:28px;
  height:28px;
  margin-left:-6px;
  place-items:center;
  overflow:hidden;
  border:2px solid var(--surface);
  border-radius:50%;
  background:var(--brand);
  color:#fff;
  font-size:10px;
  font-weight:800;
  box-shadow:0 1px 3px rgba(16,32,24,.12)
}

.app-shell .dt-avatar>i{
  font-style:normal;
  line-height:1
}

.app-shell .dt-avatar>img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  -o-object-fit:cover;
     object-fit:cover
}

.app-shell .project-table-card>.table-toolbar{
  border-bottom:1px solid var(--border-2);
  background:var(--surface)
}

/* Status chip tones. The chip reads its colour from --chip-color and nothing set it, so
   every chip came out brand green whatever it said — a cancelled job and a completed one
   looked alike. */

.app-shell .status-chip.is-green{
  --chip-color:#16a34a
}

.app-shell .status-chip.is-blue{
  --chip-color:#2563eb
}

.app-shell .status-chip.is-cyan{
  --chip-color:#0891b2
}

.app-shell .status-chip.is-amber{
  --chip-color:#d97706
}

.app-shell .status-chip.is-orange{
  --chip-color:#ea580c
}

.app-shell .status-chip.is-red{
  --chip-color:#dc2626
}

.app-shell .status-chip.is-slate{
  --chip-color:#64748b
}

/* Project — the task status dialog. One field, so it keeps a narrow shell, with the task it
   belongs to named above the field: the dialog used to name no task at all. */

body.app-ui .task-status-dialog{
  width:min(94vw,440px)
}

.app-shell .task-status-subject{
  display:flex;
  flex-direction:column;
  gap:3px;
  padding:11px 13px;
  border:1px solid var(--border-2);
  border-radius:10px;
  background:var(--surface-2)
}

.app-shell .task-status-subject>small{
  color:var(--text-3);
  font-size:11px;
  font-weight:700;
  letter-spacing:.03em;
  text-transform:uppercase
}

.app-shell .task-status-subject>strong{
  color:var(--text);
  font-size:13.5px;
  font-weight:700;
  line-height:1.4;
  overflow-wrap:anywhere
}

.app-shell .task-status-current{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:11px
}

.app-shell .task-status-current>span:first-child{
  color:var(--text-3);
  font-size:11px;
  font-weight:700;
  letter-spacing:.03em;
  text-transform:uppercase
}

/* ------------------------------------------------------------
   Project — the task view dialog
   ------------------------------------------------------------ */

body.app-ui .task-view-dialog{
  width:min(94vw,860px);
  margin:5vh auto
}

.app-shell .task-view-header .repair-form-dialog-heading{
  min-width:0
}

.app-shell .task-view-header .modal-title{
  font-size:16px;
  line-height:1.35;
  overflow-wrap:anywhere
}

.app-shell .task-view-header-actions{
  display:flex;
  flex:none;
  align-items:center;
  gap:8px
}

.app-shell .task-view-header-actions .btn-ghost{
  height:34px;
  padding:0 12px;
  font-size:12.5px
}

.app-shell .task-view-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 10px;
  padding:10px 16px;
  border-bottom:1px solid var(--border-2);
  background:var(--surface-2)
}

.app-shell .task-view-due{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--text-3);
  font-size:12px;
  font-weight:600
}

.app-shell .task-view-due svg{
  width:14px;
  height:14px
}

.app-shell .task-view-meta .project-card-members{
  margin-left:auto
}

.app-shell .task-view-body{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:14px 16px 16px
}

.app-shell .task-view-section{
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface)
}

.app-shell .task-view-section>header{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 13px;
  border-bottom:1px solid var(--border-2);
  background:var(--surface-2)
}

.app-shell .task-view-section>header .btn-ghost{
  height:32px;
  padding:0 11px;
  font-size:12px
}

.app-shell .task-view-section .form_n_description,.app-shell .task-view-comment-form{
  padding:12px 13px
}

.app-shell .task_description{
  color:var(--text-2);
  font-size:13.5px;
  line-height:1.6;
  overflow-wrap:anywhere
}

.app-shell .task_description :where(p,ul,ol):last-child{
  margin-bottom:0
}

.app-shell .task-view-empty{
  margin:0;
  padding:14px 13px;
  color:var(--text-3);
  font-size:13px
}

.app-shell .task-view-table{
  margin:0
}

.app-shell .task-view-table>table{
  margin:0
}

.app-shell .task-view-comment-form .form-group:last-of-type{
  margin-bottom:0
}

.app-shell .task-view-comment-form .form-inline-actions{
  margin-top:11px
}

.app-shell .task-view-comments{
  display:flex;
  flex-direction:column;
  gap:11px;
  padding:12px 13px
}

.app-shell .task-comment{
  display:grid;
  grid-template-columns:32px minmax(0,1fr);
  gap:11px
}

.app-shell .task-comment-avatar{
  display:grid;
  width:32px;
  height:32px;
  place-items:center;
  border-radius:50%;
  background:var(--brand-weak);
  color:var(--brand-strong);
  font-size:12px;
  font-weight:800
}

.app-shell .task-comment-body{
  min-width:0;
  padding:9px 11px;
  border:1px solid var(--border-2);
  border-radius:10px;
  background:var(--surface-2)
}

.app-shell .task-comment-body>header{
  display:flex;
  align-items:center;
  gap:9px
}

.app-shell .task-comment-body>header strong{
  color:var(--text);
  font-size:12.5px;
  font-weight:800
}

.app-shell .task-comment-body>header time{
  color:var(--text-3);
  font-size:11px;
  font-weight:600
}

.app-shell .task-comment-body>header .icon-btn{
  width:26px;
  height:26px;
  margin-left:auto;
  color:var(--danger)
}

.app-shell .task-comment-text{
  margin-top:4px;
  color:var(--text-2);
  font-size:13px;
  line-height:1.55;
  overflow-wrap:anywhere
}

.app-shell .task-comment-text :where(p):last-child{
  margin-bottom:0
}

.app-shell .task-comment-files{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:8px
}

.app-shell .task-comment-files a{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:3px 9px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--surface);
  color:var(--text-2);
  font-size:11.5px;
  font-weight:700;
  text-decoration:none
}

.app-shell .task-comment-files a:hover{
  border-color:color-mix(in srgb,var(--brand) 34%,var(--border));
  color:var(--text);
  text-decoration:none
}

.app-shell .task-comment-files svg{
  width:13px;
  height:13px
}

.app-shell .task-view-footer{
  justify-content:space-between
}

.app-shell .task-view-added{
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:var(--text-3);
  font-size:12px;
  font-weight:600
}

.app-shell .task-view-added svg{
  width:14px;
  height:14px
}

@media (max-width:620px){
  .app-shell .task-view-meta .project-card-members{
    margin-left:0
  }

  .app-shell .task-view-added{
    display:none
  }
}

/* The icon-and-heading pair. Inside .section-head it is laid out by that rule, but on its own
   — the head of a tab body, the head of a card inside a dialog — nothing styled it at all, so
   the icon sat on one line with the heading underneath it. */

.app-shell .section-title{
  display:flex;
  min-width:0;
  align-items:center;
  gap:10px
}

.app-shell .section-title h2{
  margin:0;
  color:var(--text);
  font-size:14.5px;
  font-weight:820
}

.app-shell .section-title p{
  margin:2px 0 0;
  color:var(--text-3);
  font-size:12px
}

/* A column flex container lets its children shrink below their own content, so the cards in
   this dialog were squashed until their text was cut off by the card edge — the description,
   the comment buttons and the comment text all lost their bottom half. */

.app-shell .task-view-body>*{
  flex:0 0 auto
}

/* The dialog scrolls as one page. The body used to be the only thing that moved, which pinned
   the title, the chips and the footer in place and left the reader scrolling a panel inside a
   window — and a second scroller inside that one for the comments. */

/* Project — the time log tab's summary. */

.app-shell .timelog-summary{
  margin-bottom:14px
}

.app-shell .timelog-summary .timelog-summary-date{
  font-size:15px
}

/* Documents and notes — the flags beside a heading. Both were icon-font glyphs, so they were
   empty boxes on this stack. */

.app-shell .note-heading{
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:var(--text);
  font-weight:600;
  text-decoration:none
}

.app-shell .note-heading:hover{
  color:var(--brand);
  text-decoration:none
}

.app-shell .note-flag{
  display:inline-grid;
  width:20px;
  height:20px;
  place-items:center;
  border-radius:6px;
  background:var(--surface-3);
  color:var(--text-3)
}

.app-shell .note-flag.is-private{
  background:color-mix(in srgb,var(--danger) 12%,var(--surface));
  color:var(--danger)
}

.app-shell .note-flag-icon{
  width:12px;
  height:12px
}

/* No card inside a card. The tab body is already a card, so the tables in it run to its own
   edges rather than sitting in a second, smaller card with a gap around it. */

.app-shell .project-pane{
  padding:0
}

.app-shell .project-tab-content>.document_note_body{
  padding:0
}

.app-shell .project-tab-content .project-tab-head{
  margin:0;
  padding:12px 15px;
  border-bottom:1px solid var(--border-2);
  background:var(--surface-2)
}

.app-shell .project-tab-content .project-table-card,
.app-shell .project-tab-content .profile-module-data-card{
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important
}

.app-shell .project-tab-content .project-table-card>.table-toolbar,
.app-shell .project-tab-content .profile-module-data-card>.table-toolbar{
  border-radius:0
}

/* The filters read as a bar across the top of the pane rather than as a card of their own. */

.app-shell .project-tab-content .filter-card{
  margin:0;
  border-width:0 0 1px;
  border-radius:0;
  box-shadow:none
}

.app-shell .project-tab-content .timelog-summary{
  margin:0;
  padding:14px 15px;
  border-bottom:1px solid var(--border-2);
  background:var(--surface-2)
}

.app-shell .project-tab-content .project-overview{
  padding:16px
}

.app-shell .project-tab-content .timeline{
  padding:14px 15px
}

/* Project — the time log reports. Each block was an AdminLTE box holding a <caption> and an
   <ol> wrapped around a table: markup a table cannot legally hold, and none of it styled here. */

.app-shell .project-report-body{
  display:flex;
  flex-direction:column;
  gap:14px
}

.app-shell .report-block{
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

.app-shell .report-block-group+.report-block-group{
  border-top:1px solid var(--border-2)
}

.app-shell .report-block-group>h3{
  display:flex;
  align-items:center;
  gap:7px;
  margin:0;
  padding:11px 15px;
  color:var(--text-2);
  font-size:12.5px;
  font-weight:800
}

.app-shell .report-block-group>h3 svg{
  width:14px;
  height:14px;
  color:var(--text-3)
}

.app-shell .report-block tfoot td{
  border-top:1px solid var(--border);
  background:var(--surface-2);
  color:var(--text-2);
  font-weight:700
}

.app-shell .coa-filter-card{
  margin:14px 14px 0
}

.app-shell .coa-filter-card .filter-grid{
  grid-template-columns:repeat(2,minmax(0,1fr))
}

/* Chart of accounts — the three buttons on an account row. One of them carried Bootstrap's
   btn class and the other two did not, so the first arrived as a boxed white button half again
   the size of its neighbours, and the row of three read as one button and two loose icons. */

.app-shell #accounts_tree .tree-actions{
  display:inline-flex;
  align-items:center;
  gap:3px;
  margin-left:8px;
  vertical-align:middle
}

.app-shell #accounts_tree .tree-actions>a{
  display:inline-grid;
  width:26px;
  height:26px;
  min-width:0;
  padding:0;
  place-items:center;
  border:1px solid transparent;
  border-radius:7px;
  background:transparent;
  box-shadow:none;
  color:var(--text-3);
  line-height:1
}

.app-shell #accounts_tree .tree-actions>a:hover,.app-shell #accounts_tree .tree-actions>a:focus-visible{
  border-color:var(--border);
  background:var(--surface);
  color:var(--brand-strong);
  text-decoration:none
}

.app-shell #accounts_tree .tree-actions>a.activate-deactivate-btn:hover{
  border-color:color-mix(in srgb,var(--danger) 32%,var(--border));
  color:var(--danger)
}

/* The glyphs are drawn as masks by the icon bridge, and each came out at its own size. */

.app-shell #accounts_tree .tree-actions>a>i{
  width:14px;
  height:14px;
  margin:0;
  font-size:14px
}

/* Accounting — an account's ledger. */

.app-shell .accounting-ledger-page .page-head p{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px 14px
}

.app-shell .accounting-ledger-page .page-head-fact code{
  padding:1px 6px;
  border-radius:5px;
  background:var(--surface-3);
  color:var(--text-3);
  font-size:11px
}

.app-shell .accounting-ledger-metrics{
  grid-template-columns:repeat(3,minmax(0,1fr));
  margin-bottom:16px
}

.app-shell .accounting-ledger-filters{
  margin-bottom:16px
}

.app-shell .accounting-ledger-filters .filter-grid{
  grid-template-columns:repeat(2,minmax(0,1fr))
}

.app-shell .accounting-ledger-card tfoot td{
  border-top:1px solid var(--border);
  background:var(--surface-2);
  color:var(--text);
  font-weight:800
}

@media (max-width:860px){
  .app-shell .accounting-ledger-metrics{
    grid-template-columns:1fr
  }

  .app-shell .accounting-ledger-filters .filter-grid{
    grid-template-columns:1fr
  }
}

.app-shell .accounting-ledger-card tfoot .ff-col-amount{
  text-align:right;
  font-variant-numeric:tabular-nums
}

.app-shell .accounting-journal-filters{
  margin-bottom:16px
}

.app-shell .accounting-journal-filters .filter-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))
}

@media (max-width:860px){
  .app-shell .accounting-journal-filters .filter-grid{
    grid-template-columns:1fr
  }
}

/* Accounting — the journal entry form. Its four columns were sized with Bootstrap column
   classes, which mean nothing here, so the fields were squeezed against the right edge with
   the row numbers stranded on the left. */

.app-shell .journal-form-card{
  margin-bottom:16px
}

.app-shell .journal-form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  padding:15px
}

.app-shell .journal-form-notes{
  grid-column:1/-1
}

.app-shell .journal-lines{
  table-layout:fixed
}

.app-shell .journal-lines .journal-line-no{
  width:56px;
  color:var(--text-3);
  font-variant-numeric:tabular-nums
}

.app-shell .journal-lines .journal-line-amount{
  width:180px
}

.app-shell .journal-lines td{
  padding-top:7px;
  padding-bottom:7px;
  vertical-align:middle
}

.app-shell .journal-lines .form-control,.app-shell .journal-lines .select2-container{
  width:100%!important
}

.app-shell .journal-lines .journal-line-amount .form-control{
  text-align:right;
  font-variant-numeric:tabular-nums
}

.app-shell .journal-lines-total th{
  border-top:1px solid var(--border);
  background:var(--surface-2);
  color:var(--text);
  font-size:13px;
  font-weight:800
}

.app-shell .journal-lines-total .journal-line-amount{
  text-align:right;
  font-variant-numeric:tabular-nums
}

@media (max-width:860px){
  .app-shell .journal-form-grid{
    grid-template-columns:1fr
  }

  .app-shell .journal-lines{
    table-layout:auto
  }
}

.app-shell .accounting-transfer-filters{
  margin-bottom:16px
}

.app-shell .accounting-transfer-filters .filter-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))
}

@media (max-width:860px){
  .app-shell .accounting-transfer-filters .filter-grid{
    grid-template-columns:1fr
  }
}

/* Accounting — transactions. Five tables behind one tab strip. */

.app-shell .accounting-transactions-card{
  overflow:hidden
}

.app-shell .accounting-transactions-panes>.tab-pane{
  display:none
}

.app-shell .accounting-transactions-panes>.tab-pane.active{
  display:block
}

/* No card inside a card, and no gutter: the tab body is already one, so the table runs to its
   own edges. */

.app-shell .accounting-tab-pane{
  padding:0
}

.app-shell .accounting-tab-pane .data-table-card{
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important
}

.app-shell .accounting-tab-pane .data-table-card>.table-toolbar{
  border-bottom:1px solid var(--border-2)
}

.app-shell .accounting-tab-pane .accounting-purchase-filters{
  margin:0;
  border-width:0 0 1px;
  border-radius:0;
  box-shadow:none
}

/* Mapping a transaction is a labelled button, not a glyph. It carried the class for a fixed
   size icon button, so the words spilled out of a box built for one letter. */

.app-shell .accounting-map-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
  height:28px;
  padding:0 10px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface);
  color:var(--text-2);
  font-size:11.5px;
  font-weight:700;
  white-space:nowrap;
  text-decoration:none
}

.app-shell .accounting-map-btn:hover{
  border-color:color-mix(in srgb,var(--brand) 34%,var(--border));
  background:var(--brand-weak);
  color:var(--brand-strong);
  text-decoration:none
}

.app-shell .accounting-map-btn.is-mapped{
  border-color:color-mix(in srgb,var(--warn) 34%,var(--border));
  background:color-mix(in srgb,var(--warn) 12%,var(--surface));
  color:color-mix(in srgb,var(--warn) 82%,#4b3600)
}

.app-shell .accounting-map-btn i{
  width:13px;
  height:13px;
  font-size:13px
}

.app-shell .accounting-purchase-filters{
  margin-bottom:14px
}

.app-shell .accounting-purchase-filters .filter-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))
}

@media (max-width:860px){
  .app-shell .accounting-purchase-filters .filter-grid{
    grid-template-columns:1fr
  }
}

/* A row can carry both View and Map, and they sat against each other. */

.app-shell .accounting-map-btn + .accounting-map-btn{
  margin-left:6px
}

/* Accounting — the budget. */

.app-shell .accounting-budget-filters{
  margin-bottom:16px
}

.app-shell .accounting-budget-filters .filter-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))
}

.app-shell .accounting-budget-card{
  overflow:hidden
}

.app-shell .accounting-budget-panes>.tab-pane{
  display:none;
  padding:14px
}

.app-shell .accounting-budget-panes>.tab-pane.active{
  display:block
}

.app-shell .accounting-budget-exports{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:8px;
  margin-bottom:12px
}

.app-shell .accounting-budget-exports .btn-ghost{
  height:32px;
  padding:0 11px;
  font-size:12px
}

body.app-ui .budget-year-dialog{
  width:min(94vw,460px);
  margin:5vh auto
}

@media (max-width:860px){
  .app-shell .accounting-budget-filters .filter-grid{
    grid-template-columns:1fr
  }
}

/* The budget's own tables set a height in pixels; they scroll within the pane instead. */

.app-shell .accounting-budget-scroll{
  max-height:min(60vh,560px);
  overflow:auto
}

/* A report card that carries its description. The accounting reports are not
   self-explanatory — an ageing summary and an ageing details report differ only in a word. */

.app-shell .report-area-grid-rich{
  grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))
}

.app-shell .report-area-grid-rich .report-card{
  align-items:flex-start;
  padding:13px 15px
}

.app-shell .report-area-grid-rich .report-card>span:nth-child(2){
  display:flex;
  flex-direction:column;
  gap:3px
}

.app-shell .report-area-grid-rich .report-card strong{
  color:var(--text);
  font-size:13px;
  font-weight:800;
  line-height:1.35
}

.app-shell .report-area-grid-rich .report-card small{
  color:var(--text-3);
  font-size:11.5px;
  font-weight:500;
  line-height:1.5
}

.app-shell .report-area-grid-rich .report-card-go{
  margin-top:6px
}

/* A report with nothing to open says so rather than raising a browser alert on click. */

.app-shell .report-card.is-unavailable{
  background:var(--surface-2);
  color:var(--text-3);
  cursor:not-allowed
}

.app-shell .report-card.is-unavailable strong{
  color:var(--text-3)
}

/* Accounting — a report page: filters above, the report itself in one card. */

.app-shell .accounting-report-filters{
  margin-bottom:16px
}

.app-shell .accounting-report-filters .filter-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))
}

.app-shell .accounting-report-card{
  overflow:auto
}

.app-shell .accounting-report-card>.table-responsive>table{
  margin:0
}

@media (max-width:860px){
  .app-shell .accounting-report-filters .filter-grid{
    grid-template-columns:1fr
  }
}

/* Accounting — settings. Six near-identical pairs of selects separated by rules, with the last
   of them wrapped in a bright green box, under Bootstrap tabs this stack does not style. */

.app-shell .accounting-settings-card{
  overflow:hidden
}

.app-shell .accounting-settings-panes>.tab-pane{
  display:none;
  padding:14px
}

/* The two table tabs are already inside the tab body's card; their own card drew a second
   frame with a gutter between the two. */

.app-shell .accounting-settings-panes>.accounting-tab-pane{
  padding:0
}

.app-shell .accounting-settings-panes>.tab-pane.active{
  display:block
}

.app-shell .accounting-settings-section{
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface)
}

.app-shell .accounting-settings-section + .accounting-settings-section{
  margin-top:14px
}

.app-shell .accounting-settings-prefixes{
  grid-template-columns:repeat(2,minmax(0,1fr))
}

/* Dialog bodies whose fields are a plain stack. Bootstrap rows of one full-width column
   each carried the spacing before, and this stack has no grid to give them. */

.app-shell .repair-form-stack{
  display:grid;
  gap:13px
}

.app-shell .repair-form-stack>.hide{
  display:none!important
}

.app-shell .accounting-settings-actions{
  display:flex;
  justify-content:flex-end;
  margin-top:14px;
  padding:12px 15px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface-2)
}

.app-shell .accounting-map-rows{
  display:flex;
  flex-direction:column
}

.app-shell .accounting-map-row{
  display:grid;
  grid-template-columns:minmax(0,200px) minmax(0,1fr);
  align-items:start;
  gap:16px;
  padding:13px 15px
}

.app-shell .accounting-map-row + .accounting-map-row{
  border-top:1px solid var(--border-2)
}

.app-shell .accounting-map-row-label{
  padding-top:26px;
  color:var(--text);
  font-size:13px;
  font-weight:700;
  overflow-wrap:anywhere
}

.app-shell .accounting-map-row-fields{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  min-width:0
}

@media (max-width:900px){
  .app-shell .accounting-map-row{
    grid-template-columns:1fr;
    gap:8px
  }

  .app-shell .accounting-map-row-label{
    padding-top:0
  }

  .app-shell .accounting-map-row-fields{
    grid-template-columns:1fr
  }

  .app-shell .accounting-settings-prefixes{
    grid-template-columns:1fr
  }
}

/* Catalogue QR. Two Bootstrap columns and three widget boxes on a stack that styles none of
   them, so the form, the instructions and the empty preview panel ran full width in a row. */

.app-shell .catalogue-qr-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(340px,420px);
  align-items:start;
  gap:14px
}

.app-shell .catalogue-qr-fields{
  display:grid;
  gap:13px;
  padding:15px
}

.app-shell .catalogue-qr-color{
  display:flex;
  align-items:center;
  gap:9px
}

.app-shell .catalogue-qr-color input[type=color]{
  width:44px;
  height:38px;
  padding:3px;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface);
  cursor:pointer
}

.app-shell .catalogue-qr-color .finput{
  flex:1;
  min-width:0;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  text-transform:uppercase
}

.app-shell .catalogue-qr-fields .settings-check.is-disabled{
  color:var(--text-3);
  cursor:not-allowed
}

.app-shell .catalogue-qr-fields .settings-check small{
  display:block;
  margin-top:2px;
  color:var(--text-3);
  font-size:11.5px;
  font-weight:500
}

.app-shell .catalogue-qr-actions{
  display:flex;
  justify-content:flex-end;
  padding:12px 15px;
  border-top:1px solid var(--border-2);
  background:var(--surface-2)
}

.app-shell .catalogue-qr-preview{
  position:sticky;
  top:14px
}

.app-shell .catalogue-qr-stage{
  display:grid;
  min-height:300px;
  place-items:center;
  padding:20px 15px
}

.app-shell .catalogue-qr-empty{
  display:grid;
  justify-items:center;
  gap:5px;
  color:var(--text-3);
  text-align:center
}

.app-shell .catalogue-qr-empty>span{
  display:grid;
  width:46px;
  height:46px;
  place-items:center;
  margin-bottom:4px;
  border-radius:12px;
  background:var(--surface-2)
}

.app-shell .catalogue-qr-empty strong{
  color:var(--text-2);
  font-size:13.5px
}

.app-shell .catalogue-qr-empty small{
  font-size:12px
}

.app-shell .catalogue-qr-result{
  display:grid;
  justify-items:center;
  gap:11px
}

.app-shell .catalogue-qr-result.hide{
  display:none!important
}

.app-shell .catalogue-qr-result #qrcode canvas,.app-shell .catalogue-qr-result #qrcode img{
  max-width:100%;
  height:auto;
  border-radius:10px
}

.app-shell .catalogue-qr-link{
  display:inline-flex;
  max-width:100%;
  align-items:center;
  gap:6px;
  color:var(--brand);
  font-size:12px;
  word-break:break-all
}

.app-shell .catalogue-qr-link svg{
  flex:none
}

.app-shell .catalogue-qr-steps{
  display:grid;
  gap:8px;
  margin:0;
  padding:13px 15px 15px 15px;
  border-top:1px solid var(--border-2);
  counter-reset:qr-step;
  list-style:none
}

.app-shell .catalogue-qr-steps li{
  position:relative;
  padding-left:27px;
  color:var(--text-2);
  font-size:12.5px;
  line-height:1.5
}

.app-shell .catalogue-qr-steps li::before{
  position:absolute;
  top:1px;
  left:0;
  display:grid;
  width:19px;
  height:19px;
  place-items:center;
  border-radius:6px;
  background:var(--brand-weak);
  color:var(--brand);
  content:counter(qr-step);
  counter-increment:qr-step;
  font-size:11px;
  font-weight:800
}

@media (max-width:1100px){
  .app-shell .catalogue-qr-grid{
    grid-template-columns:1fr
  }

  .app-shell .catalogue-qr-preview{
    position:static
  }
}

/* Digital Forms. The module drew its own header, nav strip, cards and status pills from a
   \3c style> block a page only reached if it happened to include the module nav. */

.app-shell .digital-form-scope-note{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:11px;
  margin-bottom:12px;
  padding:10px 14px;
  border:1px solid color-mix(in srgb,var(--blue) 32%,transparent);
  border-radius:11px;
  background:color-mix(in srgb,var(--blue) 10%,var(--surface));
  color:color-mix(in srgb,var(--blue) 80%,var(--text));
  font-size:12.5px;
  font-weight:700
}

.app-shell .digital-form-scope-note>span{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-width:0
}

.app-shell .digital-form-scope-note .btn-ghost{
  flex:none;
  height:32px;
  padding:0 11px;
  font-size:12px
}

.app-shell .digital-form-filter-grid{
  grid-template-columns:minmax(190px,1.2fr) minmax(140px,.8fr) minmax(140px,.8fr) minmax(170px,1fr) auto;
  align-items:end
}

.app-shell .filter-date{
  position:relative;
  display:flex;
  align-items:center
}

.app-shell .filter-date>svg{
  position:absolute;
  left:11px;
  color:var(--text-3);
  pointer-events:none
}

.app-shell .filter-date .finput{
  padding-left:33px;
  cursor:pointer
}

.app-shell .filter-actions{
  display:flex;
  align-items:center;
  gap:8px
}

.app-shell .filter-actions .btn-ghost{
  height:42px
}

@media (max-width:1080px){
  .app-shell .digital-form-filter-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

  .app-shell .filter-actions{
    grid-column:1/-1;
    justify-content:flex-end
  }
}

@media (max-width:620px){
  .app-shell .digital-form-filter-grid{
    grid-template-columns:1fr
  }
}

.app-shell .digital-form-history-system{
  color:var(--text-3)
}

.app-shell .digital-form-history-link{
  display:inline-flex;
  margin-left:6px;
  color:var(--brand);
  vertical-align:middle
}

.app-shell .digital-form-history-icon{
  width:13px;
  height:13px
}

.app-shell .digital-form-recipient{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0
}

.app-shell .digital-form-recipient strong{
  overflow:hidden;
  font-size:13px;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .digital-form-history-filter-grid{
  grid-template-columns:repeat(4,minmax(140px,1fr)) auto;
  align-items:end
}

.app-shell .digital-form-template-filter-grid{
  grid-template-columns:minmax(200px,1.4fr) minmax(150px,1fr) minmax(150px,1fr) auto;
  align-items:end
}

@media (max-width:1080px){
  .app-shell .digital-form-history-filter-grid,.app-shell .digital-form-template-filter-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}

@media (max-width:620px){
  .app-shell .digital-form-history-filter-grid,.app-shell .digital-form-template-filter-grid{
    grid-template-columns:1fr
  }
}

/* Send Form. Two Bootstrap columns, a widget box, and a fixed action bar that offset itself
   by the old 256px sidebar — on this shell it sat underneath the rail. */

.app-shell .digital-form-send-grid{
  display:grid;
  grid-template-columns:minmax(0,440px) minmax(0,1fr);
  align-items:start;
  gap:14px
}

.app-shell .digital-form-send-fields{
  display:grid;
  gap:13px;
  padding:15px
}

.app-shell .digital-form-form-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 15px;
  border-top:1px solid var(--border-2);
  background:var(--surface-2)
}

.app-shell .digital-form-channel{
  display:grid;
  gap:7px
}

.app-shell .digital-form-channel-options{
  display:grid;
  gap:8px
}

.app-shell .digital-form-channel-option{
  margin:0;
  cursor:pointer
}

.app-shell .digital-form-channel-option input{
  position:absolute;
  opacity:0;
  pointer-events:none
}

.app-shell .digital-form-channel-card{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border:1.5px solid var(--border);
  border-radius:11px;
  background:var(--surface);
  transition:border-color .15s ease,background .15s ease,box-shadow .15s ease
}

.app-shell .digital-form-channel-option:hover .digital-form-channel-card{
  border-color:color-mix(in srgb,var(--brand) 45%,var(--border))
}

.app-shell .digital-form-channel-icon{
  display:grid;
  width:34px;
  height:34px;
  flex:none;
  place-items:center;
  border-radius:9px;
  background:var(--surface-2);
  color:var(--text-3)
}

.app-shell .digital-form-channel-meta{
  display:grid;
  min-width:0;
  gap:1px
}

.app-shell .digital-form-channel-meta strong{
  font-size:13px
}

.app-shell .digital-form-channel-meta small{
  color:var(--text-3);
  font-size:11.5px
}

/* The chat the link is about to land in — a group name can be long, and it must not push the
   card's tick off the end of the row. */

.app-shell .digital-form-channel-target{
  overflow-wrap:anywhere
}

.app-shell .digital-form-channel-check{
  margin-left:auto;
  flex:none;
  color:var(--brand);
  opacity:0;
  transform:scale(.7);
  transition:opacity .15s ease,transform .15s ease
}

.app-shell .digital-form-channel-option input:checked + .digital-form-channel-card{
  border-color:var(--brand);
  background:var(--brand-weak);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 14%,transparent)
}

.app-shell .digital-form-channel-option input:checked + .digital-form-channel-card .digital-form-channel-icon{
  background:var(--brand);
  color:#fff
}

.app-shell .digital-form-channel-option input:checked + .digital-form-channel-card .digital-form-channel-check{
  opacity:1;
  transform:scale(1)
}

.app-shell .digital-form-warn{
  display:flex;
  align-items:flex-start;
  gap:8px;
  padding:10px 12px;
  border:1px solid color-mix(in srgb,var(--warn) 34%,transparent);
  border-radius:10px;
  background:var(--warn-weak);
  color:color-mix(in srgb,var(--warn) 80%,var(--text));
  font-size:12.5px;
  font-weight:600
}

.app-shell .digital-form-warn.hide{
  display:none!important
}

.app-shell .digital-form-warn svg{
  flex:none;
  margin-top:1px
}

.app-shell .digital-form-preview-card{
  position:sticky;
  top:14px;
  overflow:hidden
}

.app-shell .digital-form-preview-meta{
  color:var(--text-3);
  font-size:12px
}

.app-shell .digital-form-preview-stage{
  position:relative;
  min-height:560px;
  background:var(--surface)
}

.app-shell .digital-form-preview-empty{
  display:grid;
  height:560px;
  align-content:center;
  justify-items:center;
  gap:8px;
  color:var(--text-3);
  text-align:center
}

.app-shell .digital-form-preview-empty.hide{
  display:none!important
}

.app-shell .digital-form-preview-empty>span{
  display:grid;
  width:48px;
  height:48px;
  place-items:center;
  border-radius:12px;
  background:var(--surface-2)
}

.app-shell .digital-form-preview-empty strong{
  color:var(--text-2);
  font-size:13.5px
}

.app-shell .digital-form-preview-stage iframe{
  display:none;
  width:100%;
  height:640px;
  border:0;
  background:var(--surface)
}

.app-shell .digital-form-preview-stage iframe.is-ready{
  display:block
}

@media (max-width:1180px){
  .app-shell .digital-form-send-grid{
    grid-template-columns:1fr
  }

  .app-shell .digital-form-preview-card{
    position:static
  }
}

/* Digital Forms dashboard. Six KPI tiles, four card blocks and a bar chart, all drawn from a
   \3c style> block of hard-coded hexes that never followed the theme. */

.app-shell .digital-form-kpis{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:12px;
  margin-bottom:14px
}

.app-shell .digital-form-kpi{
  padding:15px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  box-shadow:var(--shadow-sm);
  transition:border-color .15s ease,box-shadow .15s ease,transform .15s ease
}

.app-shell .digital-form-kpi:hover{
  border-color:color-mix(in srgb,var(--kpi-tone,var(--brand)) 40%,var(--border));
  box-shadow:var(--shadow-md);
  transform:translateY(-2px)
}

.app-shell .digital-form-kpi>header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:9px
}

.app-shell .digital-form-kpi>header span:first-child,.app-shell .digital-form-kpi>header>div>span{
  display:block;
  color:var(--text-3);
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase
}

.app-shell .digital-form-kpi>header strong{
  display:block;
  margin-top:6px;
  font-size:27px;
  font-weight:800;
  line-height:1.05
}

.app-shell .digital-form-kpi-icon{
  display:grid;
  width:42px;
  height:42px;
  flex:none;
  place-items:center;
  border-radius:12px;
  background:color-mix(in srgb,var(--kpi-tone,var(--brand)) 14%,var(--surface));
  color:var(--kpi-tone,var(--brand))
}

.app-shell .digital-form-kpi>footer{
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid var(--border-2);
  color:var(--text-3);
  font-size:11.5px;
  font-weight:650
}

.app-shell .digital-form-kpi>footer.is-danger{
  color:var(--danger)
}

.app-shell .digital-form-kpi>footer.is-ok{
  color:var(--brand)
}

.app-shell .digital-form-dash-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin-bottom:14px
}

.app-shell .digital-form-rows{
  padding:4px 15px 10px
}

.app-shell .digital-form-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:11px;
  padding:10px 0;
  border-bottom:1px solid var(--border-2)
}

.app-shell .digital-form-row:last-child{
  border-bottom:0
}

.app-shell .digital-form-row strong{
  display:block;
  font-size:13px
}

.app-shell .digital-form-row small{
  display:block;
  margin-top:2px;
  color:var(--text-3);
  font-size:11.5px
}

.app-shell .digital-form-row-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex:none
}

.app-shell .digital-form-row-count{
  flex:none;
  text-align:right
}

.app-shell .digital-form-row .btn-ghost{
  flex:none;
  height:32px;
  padding:0 11px;
  font-size:12px
}

.app-shell .digital-form-empty{
  display:grid;
  justify-items:center;
  gap:7px;
  padding:24px 8px;
  color:var(--text-3);
  font-size:12.5px;
  text-align:center
}

.app-shell .digital-form-empty>span{
  display:grid;
  width:40px;
  height:40px;
  place-items:center;
  border-radius:11px;
  background:var(--surface-2)
}

.app-shell .digital-form-bar{
  display:grid;
  grid-template-columns:130px minmax(0,1fr) 86px;
  align-items:center;
  gap:10px;
  padding:8px 0
}

.app-shell .digital-form-bar-label{
  display:flex;
  align-items:center;
  gap:7px;
  color:var(--text-2);
  font-size:12.5px;
  font-weight:700
}

.app-shell .digital-form-bar-label i{
  width:8px;
  height:8px;
  flex:none;
  border-radius:50%;
  background:var(--bar-tone,var(--brand))
}

.app-shell .digital-form-bar-track{
  overflow:hidden;
  height:8px;
  border-radius:999px;
  background:var(--surface-2)
}

.app-shell .digital-form-bar-track i{
  display:block;
  height:100%;
  border-radius:999px;
  background:var(--bar-tone,var(--brand));
  transition:width .4s ease
}

.app-shell .digital-form-bar-count{
  font-size:12.5px;
  font-weight:700;
  text-align:right
}

.app-shell .digital-form-bar-count small{
  color:var(--text-3);
  font-size:10.5px;
  font-weight:650
}

@media (max-width:1200px){
  .app-shell .digital-form-kpis{
    grid-template-columns:repeat(3,minmax(0,1fr))
  }
}

@media (max-width:991px){
  .app-shell .digital-form-dash-grid{
    grid-template-columns:1fr
  }
}

@media (max-width:640px){
  .app-shell .digital-form-kpis{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

  .app-shell .digital-form-bar{
    grid-template-columns:100px minmax(0,1fr) 72px
  }
}

/* Digital Forms — one submission. Two Bootstrap columns of widget boxes, with the details,
   the fill link, the decision and the uploads all stacked inside a single box. */

.app-shell .digital-form-show-grid{
  display:grid;
  grid-template-columns:minmax(0,400px) minmax(0,1fr);
  align-items:start;
  gap:14px
}

.app-shell .digital-form-show-side{
  display:grid;
  gap:14px;
  min-width:0
}

.app-shell .digital-form-facts{
  padding:6px 15px 12px
}

.app-shell .digital-form-facts small{
  display:block;
  margin-top:2px;
  color:var(--text-3);
  font-size:11.5px;
  font-weight:500
}

.app-shell .digital-form-warn-inset{
  margin:0 15px 14px
}

.app-shell .digital-form-link-block{
  display:grid;
  gap:12px;
  padding:15px
}

.app-shell .digital-form-link-row{
  display:flex;
  align-items:center;
  gap:8px
}

.app-shell .digital-form-link-row .finput{
  flex:1;
  min-width:0;
  font-size:12px
}

.app-shell .digital-form-link-row .btn-ghost{
  flex:none;
  width:42px;
  padding:0;
  justify-content:center
}

.app-shell .digital-form-link-row .btn-ghost.is-copied{
  border-color:var(--brand);
  background:var(--brand-weak);
  color:var(--brand)
}

.app-shell .digital-form-qr{
  display:grid;
  justify-items:center;
  gap:6px;
  text-align:center
}

.app-shell .digital-form-qr>div{
  padding:8px;
  border:1px solid var(--border);
  border-radius:11px;
  background:var(--surface)
}

.app-shell .digital-form-qr img{
  display:block
}

.app-shell .digital-form-qr small{
  color:var(--text-3);
  font-size:11.5px
}

.app-shell .digital-form-decision{
  display:grid;
  gap:12px;
  padding:15px
}

.app-shell .digital-form-decision form{
  display:grid;
  gap:9px
}

.app-shell .btn-primary.is-block,.app-shell .btn-ghost.is-block{
  width:100%;
  justify-content:center
}

.app-shell .digital-form-docs{
  display:grid;
  gap:8px;
  padding:15px
}

.app-shell .digital-form-doc{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border:1px solid var(--border-2);
  border-radius:11px;
  background:var(--surface-2)
}

.app-shell .digital-form-doc-thumb{
  overflow:hidden;
  width:44px;
  height:44px;
  flex:none;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface)
}

.app-shell .digital-form-doc-thumb img{
  display:block;
  width:100%;
  height:100%;
  -o-object-fit:cover;
     object-fit:cover;
  transition:transform .2s ease
}

.app-shell .digital-form-doc-thumb:hover img{
  transform:scale(1.08)
}

.app-shell .digital-form-doc-icon{
  display:grid;
  width:36px;
  height:36px;
  flex:none;
  place-items:center;
  border-radius:9px;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text-3)
}

.app-shell .digital-form-doc-info{
  flex:1;
  min-width:0
}

.app-shell .digital-form-doc-info a{
  display:block;
  overflow:hidden;
  color:var(--brand);
  font-size:12.5px;
  font-weight:700;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .digital-form-doc-info small{
  display:block;
  overflow:hidden;
  color:var(--text-3);
  font-size:11px;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .digital-form-doc form{
  margin:0
}

.app-shell .digital-form-show-grid .digital-form-preview-stage{
  min-height:720px
}

.app-shell .digital-form-show-grid .digital-form-preview-stage iframe{
  height:760px
}

@media (max-width:1180px){
  .app-shell .digital-form-show-grid{
    grid-template-columns:1fr
  }
}

/* Digital Forms — template builder. Two Bootstrap columns, a callout box, block buttons and
   two dialogs with no header shell. */

.app-shell .digital-form-builder-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(300px,360px);
  align-items:start;
  gap:14px
}

.app-shell .digital-form-builder-fields{
  display:grid;
  gap:13px;
  padding:15px
}

.app-shell .digital-form-builder-meta{
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
  gap:13px
}

.app-shell .digital-form-builder-side{
  position:sticky;
  top:14px
}

.app-shell .digital-form-builder-panel{
  display:grid;
  gap:12px;
  padding:15px
}

.app-shell .digital-form-builder-panel .settings-check small{
  display:block;
  margin-top:2px;
  color:var(--text-3);
  font-size:11.5px;
  font-weight:500
}

.app-shell .digital-form-note{
  padding:11px 13px;
  border:1px solid var(--border);
  border-left:3px solid var(--brand);
  border-radius:10px;
  background:var(--surface-2);
  color:var(--text-2);
  font-size:12px
}

.app-shell .digital-form-note strong{
  display:block;
  margin-bottom:5px;
  font-size:12.5px
}

.app-shell .digital-form-note ol{
  margin:0;
  padding-left:17px;
  display:grid;
  gap:3px
}

.app-shell .digital-form-builder-buttons{
  display:grid;
  gap:8px
}

.app-shell .digital-form-builder-list-head small{
  display:block;
  margin-top:3px;
  color:var(--text-3);
  font-size:11.5px
}

.app-shell .digital-form-column-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) 42px;
  gap:7px;
  margin-top:8px
}

.app-shell .digital-form-column-row .btn-ghost{
  padding:0;
  justify-content:center
}

.app-shell .digital-form-builder-preview{
  width:100%;
  height:650px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface)
}

@media (max-width:1180px){
  .app-shell .digital-form-builder-grid{
    grid-template-columns:1fr
  }

  .app-shell .digital-form-builder-side{
    position:static
  }
}

@media (max-width:700px){
  .app-shell .digital-form-builder-meta,.app-shell .digital-form-column-row{
    grid-template-columns:1fr
  }
}

.app-shell .digital-form-list-empty{
  margin:0;
  color:var(--text-3);
  font-size:12px
}

.app-shell .digital-form-field-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:9px;
  padding:8px 10px;
  border:1px solid var(--border-2);
  border-radius:10px;
  background:var(--surface-2)
}

.app-shell .digital-form-field-row + .digital-form-field-row{
  margin-top:6px
}

.app-shell .digital-form-field-row>div:first-child{
  min-width:0
}

.app-shell .digital-form-field-row strong{
  display:block;
  overflow:hidden;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12px;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .digital-form-field-row small{
  display:block;
  margin-top:2px;
  overflow:hidden;
  color:var(--text-3);
  font-size:11px;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .digital-form-field-actions{
  display:flex;
  gap:4px;
  flex:none
}

.app-shell .digital-form-field-actions .act[disabled]{
  opacity:.4;
  cursor:not-allowed
}

/* The icon buttons on these rows are outside every existing .act scope, so their SVGs had no
   size of their own and were drawn as large as the button. */

.app-shell .digital-form-field-actions .act,
.app-shell .digital-form-row-actions .act,
.app-shell .digital-form-doc .act{
  width:30px;
  height:30px;
  min-width:30px
}

.app-shell .digital-form-field-actions .act svg,
.app-shell .digital-form-row-actions .act svg,
.app-shell .digital-form-doc .act svg{
  display:block;
  width:15px;
  height:15px;
  stroke-width:2
}

.app-shell .digital-form-field-actions .act:hover:not([disabled]),
.app-shell .digital-form-row-actions .act:hover,
.app-shell .digital-form-doc .act:hover{
  border-color:color-mix(in srgb,var(--brand) 45%,var(--border));
  background:var(--brand-weak);
  color:var(--brand)
}

.app-shell .digital-form-field-actions .act.is-danger,
.app-shell .digital-form-doc .act.is-danger{
  border-color:color-mix(in srgb,var(--danger) 26%,var(--border));
  color:var(--danger)
}

.app-shell .digital-form-field-actions .act.is-danger:hover,
.app-shell .digital-form-doc .act.is-danger:hover{
  border-color:var(--danger);
  background:var(--danger-weak);
  color:var(--danger)
}

/* Notification templates. Three widget boxes of Bootstrap tabs this stack does not style, with
   the tags run together into one unreadable comma-separated line. */

.app-shell .notif-group{
  overflow:hidden
}

.app-shell .notif-group + .notif-group{
  margin-top:14px
}

.app-shell .notif-panes>.tab-pane{
  display:none;
  padding:15px
}

.app-shell .notif-panes>.tab-pane.active{
  display:block
}

.app-shell .notif-tags-block{
  margin-bottom:14px;
  padding:11px 13px;
  border:1px solid var(--border-2);
  border-radius:11px;
  background:var(--surface-2)
}

.app-shell .notif-tags{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin-top:7px
}

.app-shell .notif-tag{
  padding:3px 9px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--surface);
  color:var(--text-2);
  cursor:pointer;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px;
  transition:border-color .15s ease,background .15s ease,color .15s ease
}

.app-shell .notif-tag:hover{
  border-color:color-mix(in srgb,var(--brand) 45%,var(--border));
  background:var(--brand-weak);
  color:var(--brand)
}

.app-shell .notif-tag.is-copied{
  border-color:var(--brand);
  background:var(--brand);
  color:#fff
}

.app-shell .notif-tags-block .fhelp{
  display:block;
  margin-top:8px
}

.app-shell .notif-fields{
  display:grid;
  gap:13px
}

.app-shell .notif-field-pair{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:13px
}

.app-shell .notif-field-pair.hide{
  display:none!important
}

.app-shell .notif-autosend{
  display:grid;
  gap:7px;
  padding:12px 13px;
  border:1px solid var(--border-2);
  border-radius:11px;
  background:var(--surface-2)
}

.app-shell .notif-autosend-options{
  display:flex;
  flex-wrap:wrap;
  gap:9px 20px
}

.app-shell .notif-note{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0 15px 15px;
  padding:10px 13px;
  border:1px solid color-mix(in srgb,var(--warn) 32%,transparent);
  border-radius:10px;
  background:var(--warn-weak);
  color:color-mix(in srgb,var(--warn) 80%,var(--text));
  font-size:12.5px;
  font-weight:650
}

.app-shell .notif-note svg{
  flex:none
}

.app-shell .notif-actions{
  display:flex;
  justify-content:flex-end;
  margin-top:14px;
  padding:12px 15px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface-2)
}

@media (max-width:820px){
  .app-shell .notif-field-pair{
    grid-template-columns:1fr
  }
}

/* Telegram templates. The listing was a striped Bootstrap table led by an Actions dropdown,
   and both dialogs carried a \3c style> block whose quick-tag rules matched only the create
   modal's class names, leaving the edit modal's chips unstyled. */

/* The shell's own `body.app-ui .modal-dialog` rule sets 760px and outranks a plain
   `.app-shell .telegram-template-dialog`, so this has to match .modal-dialog too — the same
   shape every other wide dialog here uses. */

.app-shell .modal-dialog.telegram-template-dialog{
  width:min(1320px,calc(100vw - 32px));
  max-width:none;
  margin:20px auto
}

.app-shell .telegram-template-meta{
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) auto;
  align-items:end;
  gap:13px;
  margin-bottom:14px
}

.app-shell .telegram-active-check{
  padding-bottom:11px
}

.app-shell .telegram-message-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px
}

.app-shell .telegram-message-field{
  display:grid;
  gap:6px;
  min-width:0
}

/* Each column is its own grid, so a label that wrapped on one side pushed that textarea
   down and left the two boxes starting at different heights. */

.app-shell .telegram-message-head{
  display:flex;
  min-height:34px;
  align-items:center;
  justify-content:space-between;
  gap:9px
}

.app-shell .telegram-message-field textarea.finput{
  min-height:260px;
  resize:vertical
}

.app-shell .telegram-message-head .flabel{
  margin:0
}

.app-shell .telegram-tag-picker{
  position:relative
}

.app-shell .telegram-tag-picker .btn-ghost{
  height:30px;
  padding:0 11px;
  border-radius:999px;
  font-size:11.5px
}

.app-shell .telegram-tag-menu{
  overflow-y:auto;
  max-height:360px;
  min-width:290px;
  padding-top:0
}

.app-shell .telegram-tag-menu .tag-search-wrap{
  position:sticky;
  top:0;
  z-index:2;
  padding:7px 10px;
  border-bottom:1px solid var(--border-2);
  background:var(--surface)
}

.app-shell .telegram-tag-menu .tag-cat{
  padding:7px 12px 3px;
  color:var(--text-3);
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase
}

.app-shell .telegram-tag-menu .tag-item>a{
  display:block;
  padding:6px 12px;
  color:var(--text-2);
  white-space:normal
}

.app-shell .telegram-tag-menu .tag-item>a:hover{
  background:var(--brand-weak);
  color:var(--brand)
}

.app-shell .telegram-tag-menu .tag-item strong{
  display:block;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11.5px
}

.app-shell .telegram-tag-menu .tag-item small{
  display:block;
  color:var(--text-3);
  font-size:11px;
  line-height:1.3
}

.app-shell .telegram-tag-menu .tag-no-result{
  display:none;
  padding:9px 12px;
  color:var(--text-3);
  font-size:12px
}

.app-shell .quick-tags{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:5px;
  margin-top:5px
}

.app-shell .quick-tags-label,.app-shell .tags-used-label{
  color:var(--text-3);
  font-size:11px;
  font-weight:700
}

.app-shell .quick-tag,.app-shell .quick-tag-edit{
  padding:2px 10px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--surface-2);
  color:var(--text-2);
  cursor:pointer;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px;
  transition:border-color .15s ease,background .15s ease,color .15s ease
}

.app-shell .quick-tag:hover,.app-shell .quick-tag-edit:hover{
  border-color:var(--brand);
  background:var(--brand);
  color:#fff
}

.app-shell .tags-used{
  display:none;
  flex-wrap:wrap;
  align-items:center;
  gap:4px;
  margin-top:5px
}

.app-shell .tag-badge{
  display:inline-flex;
  align-items:center;
  gap:3px;
  padding:1px 9px;
  border-radius:999px;
  font-size:11px;
  font-weight:700
}

.app-shell .tag-badge.ok{
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .tag-badge.bad{
  background:var(--danger-weak);
  color:var(--danger)
}

.app-shell .telegram-preview{
  margin-top:14px;
  padding:13px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface-2)
}

.app-shell .telegram-preview-head{
  display:flex;
  align-items:center;
  gap:7px;
  margin-bottom:10px;
  color:var(--text-2);
  font-size:13px
}

.app-shell .telegram-preview-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px
}

.app-shell .telegram-preview-pane{
  min-height:150px;
  margin-top:5px;
  padding:11px 13px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface);
  font-size:12.5px;
  line-height:1.7;
  white-space:pre-wrap;
  overflow-wrap:anywhere
}

@media (max-width:900px){
  .app-shell .telegram-template-meta,.app-shell .telegram-message-grid,.app-shell .telegram-preview-grid{
    grid-template-columns:1fr
  }
}

.app-shell .tag-badge svg{
  width:11px;
  height:11px;
  flex:none
}

/* Telegram schedule & activity. Five KPI tiles, a day strip and three tables, all drawn from
   inline style strings and a \3c style> block of hard-coded hexes that never followed the theme. */

.app-shell .tg-horizon{
  display:flex;
  align-items:center;
  gap:9px;
  margin:0
}

.app-shell .tg-horizon label{
  margin:0;
  color:var(--text-3);
  font-size:12px;
  font-weight:700
}

.app-shell .tg-horizon .finput{
  width:auto;
  min-width:130px
}

.app-shell .tg-kpis{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:12px;
  margin-bottom:14px
}

.app-shell .tg-kpi{
  display:flex;
  align-items:center;
  gap:11px;
  padding:14px 15px;
  border:1px solid var(--border);
  border-radius:13px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

.app-shell .tg-kpi>span:last-child{
  min-width:0
}

.app-shell .tg-kpi-icon{
  display:grid;
  width:40px;
  height:40px;
  flex:none;
  place-items:center;
  border-radius:11px;
  background:color-mix(in srgb,var(--kpi-tone,var(--brand)) 14%,var(--surface));
  color:var(--kpi-tone,var(--brand))
}

.app-shell .tg-kpi strong{
  display:block;
  font-size:25px;
  font-weight:800;
  line-height:1.05
}

.app-shell .tg-kpi small{
  display:block;
  margin-top:2px;
  color:var(--text-3);
  font-size:11.5px
}

.app-shell .tg-kpi.is-alert strong{
  color:var(--kpi-tone)
}

.app-shell .tg-kpi-eyebrow{
  color:var(--text-3);
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase
}

.app-shell .tg-kpi-pair{
  display:flex;
  align-items:baseline;
  gap:9px;
  margin-top:2px
}

.app-shell .tg-kpi-pair strong{
  display:inline;
  font-size:20px
}

.app-shell .tg-kpi-pair small{
  display:inline;
  margin:0
}

.app-shell .tg-kpi-pair i{
  width:1px;
  height:13px;
  background:var(--border)
}

#tg-day-strip{
  display:flex;
  gap:8px;
  overflow-x:auto;
  margin-bottom:14px;
  padding-bottom:6px;
  -webkit-overflow-scrolling:touch
}

.app-shell #tg-day-strip .tg-day{
  display:grid;
  flex:1 0 92px;
  justify-items:center;
  gap:1px;
  min-width:92px;
  padding:8px 12px;
  border:1px solid var(--border);
  border-radius:11px;
  background:var(--surface);
  cursor:pointer;
  text-align:center;
  transition:border-color .15s ease,box-shadow .15s ease,background .15s ease
}

.app-shell #tg-day-strip .tg-day:hover{
  background:var(--surface-2)
}

.app-shell #tg-day-strip .tg-day.tg-day-active{
  border-color:var(--brand);
  background:var(--brand-weak);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--brand) 22%,transparent)
}

.app-shell #tg-day-strip .tg-day-top{
  color:var(--text-2);
  font-size:11.5px;
  font-weight:700
}

.app-shell #tg-day-strip .tg-day-sub{
  min-height:13px;
  color:var(--text-3);
  font-size:10.5px
}

.app-shell #tg-day-strip .tg-day-cnt{
  color:var(--border);
  font-size:18px;
  font-weight:800;
  line-height:1.2
}

.app-shell #tg-day-strip .tg-day-cnt.has{
  color:var(--brand)
}

.app-shell #tg-day-strip .tg-day-risk{
  display:inline-flex;
  align-items:center;
  gap:3px;
  color:var(--warn);
  font-size:10px;
  font-weight:700
}

.app-shell .tg-card{
  overflow:hidden
}

.app-shell .tg-panes>.tab-pane{
  display:none
}

.app-shell .tg-panes>.tab-pane.active{
  display:block
}

.app-shell .tg-legend{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 16px;
  padding:12px 15px;
  border-bottom:1px solid var(--border-2);
  color:var(--text-3);
  font-size:11.5px
}

.app-shell .tg-legend>span{
  display:inline-flex;
  align-items:center;
  gap:6px
}

.app-shell .tg-legend-label{
  color:var(--text-2);
  font-weight:800
}

.app-shell .tg-day-col{
  display:none
}

.app-shell .tg-contact-link{
  color:var(--brand);
  font-size:12.5px;
  font-weight:700
}

.app-shell .tg-sub{
  display:block;
  margin-top:2px;
  color:var(--text-3);
  font-size:11px
}

.app-shell .tg-sub.is-inline{
  display:inline;
  margin:0
}

.app-shell .tg-muted{
  color:var(--text-3);
  opacity:.75
}

.app-shell .tg-chip-row{
  margin-top:4px
}

.app-shell .tg-channel-line{
  margin-top:3px
}

.app-shell .tg-flag{
  display:inline-flex;
  align-items:center;
  gap:4px;
  margin-top:3px;
  font-size:11px;
  font-weight:700
}

.app-shell .tg-flag.is-warn{
  color:var(--warn)
}

.app-shell .tg-flag.is-ok{
  color:var(--brand)
}

.app-shell .tg-preview{
  overflow:hidden;
  max-height:3.6em;
  margin-top:4px;
  color:var(--text-3);
  font-size:11.5px;
  line-height:1.5;
  white-space:pre-line
}

.app-shell .tg-risk-list{
  display:grid;
  justify-items:start;
  gap:3px
}

.app-shell .tg-history-filter-grid{
  grid-template-columns:repeat(4,minmax(130px,1fr)) minmax(190px,1.2fr);
  align-items:end
}

.app-shell .tg-enroll-filter-grid{
  grid-template-columns:minmax(180px,240px)
}

.app-shell .tg-msg-facts{
  padding:0 0 12px
}

.app-shell .tg-msg-body{
  overflow-y:auto;
  min-height:70px;
  max-height:46vh;
  margin-top:5px;
  padding:12px 13px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface-2);
  font-size:12.5px;
  line-height:1.6;
  white-space:pre-line
}

@media (max-width:1250px){
  .app-shell .tg-kpis{
    grid-template-columns:repeat(3,minmax(0,1fr))
  }
}

@media (max-width:1080px){
  .app-shell .tg-history-filter-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}

@media (max-width:700px){
  .app-shell .tg-kpis{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

  .app-shell .tg-history-filter-grid{
    grid-template-columns:1fr
  }

  .app-shell #tg-day-strip .tg-day{
    min-width:80px;
    padding:7px 10px
  }
}

/* Nika Chat. The screen shipped its own design system in a \3c style> block — a :root palette of
   its own, AdminLTE selectors that mean nothing here, and a height that assumed the old 57px
   navbar. Under this shell it has a definite height from the scroll container, so it fills it. */

.app-shell .chat-page{
  display:flex;
  height:100%;
  min-height:0
}

.app-shell .chat{
  display:flex;
  overflow:hidden;
  width:100%;
  min-height:0;
  border-top:1px solid var(--border);
  background:var(--surface)
}

.app-shell .chat-side{
  display:flex;
  width:330px;
  min-width:0;
  min-height:0;
  flex:0 0 auto;
  flex-direction:column;
  border-right:1px solid var(--border)
}

.app-shell .chat-tabs{
  display:flex;
  gap:4px;
  padding:10px;
  border-bottom:1px solid var(--border)
}

.app-shell .chat-tab{
  flex:1;
  padding:8px 6px;
  border:0;
  border-radius:9px;
  background:transparent;
  color:var(--text-3);
  cursor:pointer;
  font-family:inherit;
  font-size:12.5px;
  font-weight:700;
  text-align:center
}

.app-shell .chat-tab:hover{
  background:var(--surface-2);
  color:var(--text)
}

.app-shell .chat-tab.is-active{
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .chat-connect{
  display:flex;
  align-items:center;
  gap:8px;
  margin:8px 10px 0;
  padding:9px 12px;
  border:1px solid color-mix(in srgb,var(--blue) 32%,transparent);
  border-radius:9px;
  background:color-mix(in srgb,var(--blue) 10%,var(--surface));
  color:color-mix(in srgb,var(--blue) 80%,var(--text));
  font-size:11.5px;
  font-weight:700;
  line-height:1.35
}

.app-shell .chat-connect svg{
  flex:none
}

.app-shell .chat-newbar{
  display:none;
  padding:8px 10px;
  border-bottom:1px solid var(--border)
}

.app-shell .chat-newbar.show{
  display:block
}

.app-shell .chat-newbtn{
  display:flex;
  width:100%;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:8px;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface);
  color:var(--text);
  cursor:pointer;
  font-family:inherit;
  font-size:12.5px;
  font-weight:700
}

.app-shell .chat-newbtn:hover{
  background:var(--surface-2)
}

.app-shell .chat-picker{
  display:none;
  margin-top:8px
}

.app-shell .chat-picker.show{
  display:block
}

.app-shell .chat-picker input,.app-shell .chat-assign-pop input{
  width:100%;
  padding:8px 10px;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface);
  color:var(--text);
  font-family:inherit;
  font-size:12.5px;
  outline:none
}

.app-shell .chat-picker__results{
  overflow:auto;
  max-height:180px;
  margin-top:6px;
  border:1px solid var(--border);
  border-radius:9px
}

.app-shell .chat-picker__opt{
  padding:8px 10px;
  cursor:pointer;
  font-size:12.5px
}

.app-shell .chat-picker__opt:hover{
  background:var(--surface-2)
}

.app-shell .chat-search{
  position:relative;
  display:flex;
  align-items:center;
  flex:0 0 auto;
  padding:8px 10px;
  border-bottom:1px solid var(--border)
}

.app-shell .chat-search>svg{
  position:absolute;
  left:21px;
  color:var(--text-3);
  pointer-events:none
}

.app-shell .chat-search input{
  width:100%;
  padding:8px 10px 8px 32px;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface);
  color:var(--text);
  font-family:inherit;
  font-size:12.5px;
  outline:none
}

.app-shell .chat-search input:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 3px var(--brand-weak)
}

.app-shell .chat-list{
  overflow-y:auto;
  flex:1 1 auto;
  min-height:0
}

.app-shell .chat-item{
  display:flex;
  gap:10px;
  padding:11px 12px;
  border-bottom:1px solid var(--border-2);
  cursor:pointer
}

.app-shell .chat-item:hover{
  background:var(--surface-2)
}

.app-shell .chat-item.is-active{
  background:var(--brand-weak)
}

.app-shell .chat-ava{
  display:flex;
  overflow:hidden;
  width:38px;
  height:38px;
  flex:0 0 auto;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:var(--surface-2);
  color:var(--text-3);
  font-size:13px;
  font-weight:800
}

.app-shell .chat-ava img{
  width:100%;
  height:100%;
  -o-object-fit:cover;
     object-fit:cover
}

.app-shell .chat-item__meta{
  flex:1;
  min-width:0
}

.app-shell .chat-item__top{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:6px
}

.app-shell .chat-item__name{
  overflow:hidden;
  color:var(--text);
  font-size:13px;
  font-weight:700;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .chat-item__time{
  flex:0 0 auto;
  color:var(--text-3);
  font-size:10.5px
}

.app-shell .chat-item__prev{
  overflow:hidden;
  color:var(--text-3);
  font-size:11.5px;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .chat-item__tags{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:4px;
  margin-top:3px
}

.app-shell .chat-badge{
  display:inline-block;
  padding:1px 8px;
  border-radius:999px;
  background:var(--surface-2);
  color:var(--text-3);
  font-size:10px;
  font-weight:700
}

.app-shell .chat-badge.is-personal{
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .chat-badge.is-group{
  background:color-mix(in srgb,var(--blue) 14%,var(--surface));
  color:color-mix(in srgb,var(--blue) 80%,var(--text))
}

.app-shell .chat-badge.is-bot,.app-shell .chat-badge.is-assignee{
  overflow:hidden;
  max-width:150px;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .chat-badge.is-bot{
  background:color-mix(in srgb,var(--teal) 14%,var(--surface));
  color:var(--teal)
}

.app-shell .chat-badge.is-assignee{
  background:var(--warn-weak);
  color:color-mix(in srgb,var(--warn) 80%,var(--text))
}

.app-shell .chat-unread{
  padding:1px 7px;
  border-radius:999px;
  background:var(--brand);
  color:#fff;
  font-size:10px;
  font-weight:800
}

.app-shell .chat-main{
  position:relative;
  display:flex;
  flex:1;
  min-width:0;
  flex-direction:column
}

.app-shell .chat-head{
  display:flex;
  align-items:center;
  gap:8px;
  padding:11px 15px;
  border-bottom:1px solid var(--border)
}

.app-shell .chat-head__name{
  font-size:13.5px;
  font-weight:700
}

.app-shell .chat-head__spacer{
  flex:1
}

.app-shell .chat-body{
  display:flex;
  overflow-y:auto;
  flex:1;
  flex-direction:column;
  gap:8px;
  padding:16px;
  background:var(--surface-2)
}

.app-shell .bubble{
  max-width:72%;
  padding:8px 12px;
  border-radius:13px;
  font-size:13.5px;
  line-height:1.5;
  white-space:pre-wrap;
  word-break:break-word
}

.app-shell .bubble.in{
  align-self:flex-start;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text)
}

.app-shell .bubble.out{
  align-self:flex-end;
  background:var(--brand);
  color:#fff
}

.app-shell .bubble img{
  display:block;
  max-width:220px;
  max-height:220px;
  margin-bottom:4px;
  border-radius:9px
}

.app-shell .bubble a.file{
  color:inherit;
  text-decoration:underline
}

.app-shell .bubble__meta{
  margin-top:3px;
  font-size:10px;
  opacity:.65
}

.app-shell .chat-empty{
  margin:auto;
  color:var(--text-3);
  font-size:13px;
  text-align:center
}

.app-shell .chat-day{
  align-self:center;
  margin:6px 0
}

.app-shell .chat-day span{
  display:inline-block;
  padding:2px 12px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--surface);
  color:var(--text-3);
  font-size:10.5px;
  font-weight:700
}

.app-shell .chat-compose{
  display:flex;
  align-items:center;
  gap:9px;
  padding:12px 14px;
  border-top:1px solid var(--border);
  background:var(--surface)
}

.app-shell .chat-attach{
  display:inline-flex;
  width:42px;
  height:42px;
  flex:0 0 auto;
  align-items:center;
  justify-content:center;
  margin:0;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface);
  color:var(--text-3);
  cursor:pointer
}

.app-shell .chat-attach:hover{
  border-color:var(--brand);
  background:var(--brand-weak);
  color:var(--brand)
}

.app-shell .chat-compose textarea{
  box-sizing:border-box;
  height:42px;
  flex:1 1 auto;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface);
  color:var(--text);
  font-family:inherit;
  font-size:13.5px;
  line-height:20px;
  resize:none
}

.app-shell .chat-compose textarea:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 3px var(--brand-weak);
  outline:none
}

.app-shell .chat-compose button.send{
  display:inline-flex;
  height:42px;
  flex:0 0 auto;
  align-items:center;
  gap:7px;
  padding:0 18px;
  border:0;
  border-radius:9px;
  background:var(--brand);
  color:#fff;
  cursor:pointer;
  font-family:inherit;
  font-size:13.5px;
  font-weight:700
}

.app-shell .chat-compose button.send:hover{
  background:var(--brand-strong)
}

.app-shell .chat-compose button:disabled{
  cursor:default;
  opacity:.5
}

.app-shell .chat-rec{
  display:none;
  height:42px;
  flex:1 1 auto;
  align-items:center;
  gap:10px;
  padding:0 14px;
  border:1px solid color-mix(in srgb,var(--danger) 30%,transparent);
  border-radius:9px;
  background:var(--danger-weak)
}

.app-shell .chat-compose.recording>*:not(.chat-rec){
  display:none!important
}

.app-shell .chat-compose.recording .chat-rec{
  display:flex
}

.app-shell .chat-rec-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--danger);
  animation:chat-pulse 1s ease-in-out infinite
}

@keyframes chat-pulse{
  50%{
    opacity:.3
  }
}

.app-shell .chat-rec-time{
  color:var(--danger);
  font-size:13.5px;
  font-weight:700;
  font-variant-numeric:tabular-nums
}

.app-shell .chat-wave{
  display:flex;
  overflow:hidden;
  height:26px;
  flex:1 1 auto;
  align-items:center;
  justify-content:center;
  gap:3px
}

.app-shell .chat-wave span{
  width:3px;
  height:20%;
  border-radius:2px;
  background:var(--danger);
  animation:chat-wave .85s ease-in-out infinite
}

.app-shell .chat-wave span:nth-child(2n){
  animation-duration:.7s
}

.app-shell .chat-wave span:nth-child(3n){
  animation-duration:1s
}

.app-shell .chat-wave span:nth-child(1){
  animation-delay:-.9s
}

.app-shell .chat-wave span:nth-child(2){
  animation-delay:-.2s
}

.app-shell .chat-wave span:nth-child(3){
  animation-delay:-.5s
}

.app-shell .chat-wave span:nth-child(4){
  animation-delay:-.7s
}

.app-shell .chat-wave span:nth-child(5){
  animation-delay:-.1s
}

.app-shell .chat-wave span:nth-child(6){
  animation-delay:-.6s
}

.app-shell .chat-wave span:nth-child(7){
  animation-delay:-.3s
}

.app-shell .chat-wave span:nth-child(8){
  animation-delay:-.8s
}

.app-shell .chat-wave span:nth-child(9){
  animation-delay:-.4s
}

.app-shell .chat-wave span:nth-child(10){
  animation-delay:-.15s
}

.app-shell .chat-wave span:nth-child(11){
  animation-delay:-.65s
}

.app-shell .chat-wave span:nth-child(12){
  animation-delay:-.35s
}

@keyframes chat-wave{
  0%,100%{
    height:18%
  }

  50%{
    height:100%
  }
}

.app-shell .chat-wave.live span{
  transition:height .07s linear;
  animation:none
}

.app-shell .chat-rec-btn{
  display:inline-flex;
  height:32px;
  align-items:center;
  gap:5px;
  padding:0 12px;
  border:0;
  border-radius:8px;
  cursor:pointer;
  font-family:inherit;
  font-weight:700
}

.app-shell .chat-rec-btn.cancel{
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text-3)
}

.app-shell .chat-rec-btn.go{
  background:var(--brand);
  color:#fff
}

.app-shell .chat-drop{
  position:absolute;
  z-index:20;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(16,24,40,.55);
  backdrop-filter:blur(2px);
  inset:0;
  pointer-events:none
}

.app-shell .chat-main.dragging .chat-drop{
  display:flex
}

.app-shell .chat-drop__inner{
  display:grid;
  justify-items:center;
  gap:7px;
  padding:22px 34px;
  border:2px dashed #fff;
  border-radius:15px;
  background:rgba(16,24,40,.35);
  color:#fff;
  font-size:15px;
  font-weight:700
}

.app-shell .bubble.pending{
  position:relative;
  overflow:hidden
}

.app-shell .bubble.pending.is-img{
  min-width:200px;
  min-height:140px;
  padding:0;
  background:var(--surface-2)
}

.app-shell .bubble.pending.is-img img{
  display:block;
  width:100%;
  max-width:280px;
  max-height:340px;
  margin:0;
  border-radius:13px;
  opacity:.6
}

.app-shell .bubble.pending.is-file{
  min-width:200px;
  padding:10px 12px 10px 12px;
  padding-right:54px
}

.app-shell .bubble.pending .up-file{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13.5px;
  white-space:nowrap;
  opacity:.85
}

.app-shell .bubble.pending.is-file .up-overlay{
  justify-content:flex-end;
  padding-right:8px
}

.app-shell .bubble.pending.is-file .up-ring{
  width:36px;
  height:36px
}

.app-shell .bubble.pending.is-file .up-ring::after{
  inset:4px
}

.app-shell .bubble.pending.is-file .up-ring span{
  font-size:10px
}

.app-shell .bubble.pending.is-file .up-spin{
  inset:-2px
}

.app-shell .up-overlay{
  position:absolute;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  inset:0;
  pointer-events:none
}

.app-shell .up-ring{
  position:relative;
  width:56px;
  height:56px;
  border-radius:50%;
  background:conic-gradient(#fff var(--pct,0%),rgba(255,255,255,.3) 0);
  box-shadow:0 1px 8px rgba(0,0,0,.35);
  transition:background .2s ease
}

.app-shell .up-ring::after{
  position:absolute;
  border-radius:50%;
  background:rgba(16,24,40,.62);
  content:'';
  inset:5px
}

.app-shell .up-ring span{
  position:absolute;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:12px;
  font-weight:800;
  font-variant-numeric:tabular-nums;
  inset:0
}

.app-shell .up-spin{
  position:absolute;
  border:2px solid transparent;
  border-top-color:rgba(255,255,255,.9);
  border-radius:50%;
  animation:up-spin .9s linear infinite;
  inset:-3px
}

@keyframes up-spin{
  to{
    transform:rotate(360deg)
  }
}

.app-shell .bubble.pending.failed .up-ring{
  background:var(--danger)
}

.app-shell .bubble.pending.failed .up-spin{
  display:none
}

.chat-modal{
  position:fixed;
  z-index:1050;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(16,24,40,.5);
  backdrop-filter:blur(2px);
  inset:0
}

.chat-modal.is-open{
  display:flex!important
}

.chat-modal__box{
  display:flex;
  overflow:hidden;
  width:min(440px,92%);
  flex-direction:column;
  border:1px solid var(--border);
  border-radius:15px;
  background:var(--surface);
  box-shadow:0 20px 50px rgba(16,24,40,.28)
}

.chat-modal__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 16px;
  border-bottom:1px solid var(--border);
  font-weight:700
}

.chat-modal__x{
  display:inline-flex;
  border:0;
  background:transparent;
  color:var(--text-3);
  cursor:pointer;
  line-height:1
}

.chat-modal__preview{
  display:flex;
  overflow:auto;
  max-height:52vh;
  align-items:center;
  justify-content:center;
  padding:16px;
  background:var(--surface-2)
}

.chat-modal__preview img{
  display:block;
  max-width:100%;
  max-height:46vh;
  border-radius:11px
}

.chat-modal__preview .up-file{
  display:flex;
  align-items:center;
  gap:10px;
  padding:20px;
  color:var(--text);
  font-size:13.5px
}

.chat-modal__caption{
  margin:14px 16px 0;
  padding:9px 12px;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface);
  color:var(--text);
  font-family:inherit;
  font-size:13.5px;
  outline:none
}

.chat-modal__caption:focus{
  border-color:var(--brand);
  box-shadow:0 0 0 3px var(--brand-weak)
}

.chat-modal__foot{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  padding:14px 16px
}

.chat-modal__btn{
  display:inline-flex;
  height:38px;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:0 18px;
  border:0;
  border-radius:9px;
  cursor:pointer;
  font-family:inherit;
  font-weight:700
}

.chat-modal__btn.ghost{
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text-2)
}

.chat-modal__btn.go{
  min-width:118px;
  background:var(--brand);
  color:#fff
}

.chat-modal__btn:disabled{
  cursor:default;
  opacity:.7
}

.chat-modal__spin{
  display:inline-block;
  width:14px;
  height:14px;
  border:2px solid rgba(255,255,255,.4);
  border-top-color:#fff;
  border-radius:50%;
  animation:up-spin .7s linear infinite
}

.chat-modal.sending .chat-modal__preview{
  opacity:.6
}

.app-shell .chat-reach{
  display:flex;
  align-items:center;
  gap:7px;
  padding:9px 14px;
  border-top:1px solid color-mix(in srgb,var(--danger) 30%,transparent);
  background:var(--danger-weak);
  color:var(--danger);
  font-size:11.5px;
  font-weight:700;
  line-height:1.4
}

.app-shell .chat-reach svg{
  flex:none
}

.app-shell .chat-back{
  display:none;
  margin:0;
  padding:0 4px 0 0;
  border:0;
  background:transparent;
  color:var(--text);
  cursor:pointer;
  line-height:1
}

.app-shell .chat-assign{
  position:relative;
  display:inline-flex;
  align-items:center;
  font-size:12px
}

.app-shell .chat-assign-btn{
  display:inline-flex;
  max-width:200px;
  align-items:center;
  gap:5px;
  padding:6px 10px;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface);
  color:var(--text);
  cursor:pointer;
  font-family:inherit;
  font-size:11.5px;
  font-weight:700
}

.app-shell .chat-assign-btn:hover{
  background:var(--surface-2)
}

.app-shell .chat-assign-btn>span{
  overflow:hidden;
  max-width:120px;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .chat-assign-pop{
  position:absolute;
  top:calc(100% + 6px);
  right:0;
  z-index:40;
  display:none;
  overflow:hidden;
  width:240px;
  border:1px solid var(--border);
  border-radius:11px;
  background:var(--surface);
  box-shadow:var(--shadow-md)
}

.app-shell .chat-assign.open .chat-assign-pop{
  display:block
}

.app-shell .chat-assign-pop input{
  border:0;
  border-bottom:1px solid var(--border);
  border-radius:0
}

.app-shell .chat-assign-list{
  overflow-y:auto;
  max-height:260px
}

.app-shell .chat-assign-opt{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:8px 12px;
  cursor:pointer;
  font-size:12.5px
}

.app-shell .chat-assign-opt:hover{
  background:var(--surface-2)
}

.app-shell .chat-assign-opt.is-current{
  background:var(--brand-weak);
  font-weight:700
}

.app-shell .chat-assign-opt.clear{
  border-bottom:1px solid var(--border);
  color:var(--danger)
}

@media (max-width:820px){
  .app-shell .chat-side{
    width:100%;
    flex:1 1 auto
  }

  .app-shell .chat.has-thread .chat-side{
    display:none
  }

  .app-shell .chat:not(.has-thread) .chat-main{
    display:none
  }

  .app-shell .chat-back{
    display:inline-flex;
    align-items:center
  }

  .app-shell .chat-head{
    padding:10px 12px
  }

  .app-shell .chat-body{
    padding:12px
  }

  .app-shell .bubble{
    max-width:82%
  }

  .app-shell .chat-compose{
    gap:8px;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom))
  }

  .app-shell .chat-compose textarea{
    font-size:16px
  }

  .app-shell .chat-compose button.send{
    padding:0 14px
  }

  .chat-modal__box{
    width:94%
  }
}

.app-shell .chat-ico{
  display:inline-block;
  width:12px;
  height:12px;
  margin-right:4px;
  vertical-align:-1px
}

.app-shell .chat-assign-opt .chat-ico,.app-shell .chat-modal__preview .chat-ico{
  width:14px;
  height:14px
}

.app-shell .chat-failed{
  color:var(--danger)
}

/* Restaurant bookings. A half-width location select floating above the page, an AdminLTE
   box for today's table, and four status swatches stacked in a narrow column of their own
   that left a tall empty panel down the right. */

.app-shell .booking-location{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0
}

.app-shell .booking-location>span{
  color:var(--text-3);
  font-size:12px;
  font-weight:700;
  white-space:nowrap
}

.app-shell .booking-location .select2-container{
  min-width:220px
}

.app-shell .booking-today-label{
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:var(--text-2);
  font-size:12.5px;
  font-weight:800
}

.app-shell .booking-calendar-card{
  overflow:hidden
}

.app-shell .booking-legend{
  display:flex;
  flex-wrap:wrap;
  gap:6px
}

.app-shell .booking-calendar-body{
  padding:15px
}

.app-shell .booking-calendar-hint{
  display:flex;
  align-items:center;
  gap:8px;
  padding:11px 15px;
  border-top:1px solid var(--border-2);
  background:var(--surface-2);
  color:var(--text-3);
  font-size:12px
}

.app-shell .booking-calendar-hint svg{
  flex:none
}

/* FullCalendar ships its own chrome; these bring its buttons and grid onto the shell. */

.app-shell #calendar .fc-toolbar h2{
  font-size:19px;
  font-weight:800
}

.app-shell #calendar .fc-button{
  height:32px;
  padding:0 11px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface);
  background-image:none;
  box-shadow:none;
  color:var(--text-2);
  font-size:12.5px;
  font-weight:700;
  text-shadow:none
}

.app-shell #calendar .fc-button:hover{
  background:var(--surface-2)
}

.app-shell #calendar .fc-button.fc-state-active,.app-shell #calendar .fc-button.fc-state-down{
  border-color:var(--brand);
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell #calendar .fc-button.fc-state-disabled{
  opacity:.45
}

.app-shell #calendar .fc-day-header{
  padding:7px 0;
  border-color:var(--border-2);
  background:var(--surface-2);
  color:var(--text-3);
  font-size:11px;
  font-weight:800;
  text-transform:uppercase
}

.app-shell #calendar .fc-widget-content,.app-shell #calendar .fc-widget-header,.app-shell #calendar .fc-row{
  border-color:var(--border-2)
}

.app-shell #calendar .fc-day-number{
  padding:5px 7px;
  color:var(--text-2);
  font-size:12px;
  font-weight:700
}

.app-shell #calendar .fc-other-month .fc-day-number{
  color:var(--text-3);
  opacity:.55
}

.app-shell #calendar .fc-today{
  background:var(--brand-weak)!important
}

/* The id-scoped rules win over the .fc .fc-event pill above, so they have to carry the fill
   too — otherwise a timed event falls back to FullCalendar's bare orange-dot style with
   near-invisible text on the highlighted day. */

.app-shell #calendar .fc-event,
.app-shell #calendar .fc-day-grid-event{
  margin:2px 6px;
  padding:2px 7px;
  border:0;
  border-radius:7px;
  background:var(--brand);
  color:#fff;
  font-size:11.5px;
  font-weight:650;
  overflow:hidden
}

.app-shell #calendar .fc-event:hover{
  filter:brightness(1.06);
  color:#fff
}

.app-shell #calendar .fc-event .fc-content{
  display:flex;
  align-items:center;
  gap:5px;
  min-width:0
}

.app-shell #calendar .fc-event .fc-time{
  flex:none;
  font-weight:750;
  opacity:.9
}

.app-shell #calendar .fc-event .fc-title{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#fff
}

/* Hide the bullet FullCalendar draws for timed month events — the filled pill is the marker. */

.app-shell #calendar .fc-event .fc-event-dot{
  display:none
}

@media (max-width:760px){
  .app-shell .booking-location{
    width:100%
  }

  .app-shell .booking-location .select2-container{
    width:100%!important;
    min-width:0
  }
}

.app-shell .modal-dialog.booking-form-dialog{
  width:min(720px,calc(100vw - 32px));
  max-width:none
}

.app-shell .booking-form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:13px
}

.app-shell .booking-form-grid>.is-wide{
  grid-column:1/-1
}

.app-shell .booking-form-grid #restaurant_module_span:empty{
  display:none
}

.app-shell .booking-form-grid #restaurant_module_span .form-group{
  margin:0
}

.app-shell .booking-customer-row{
  display:flex;
  align-items:center;
  gap:8px
}

.app-shell .booking-customer-row .finput,.app-shell .booking-customer-row .select2-container{
  flex:1;
  min-width:0
}

.app-shell .booking-customer-row .btn-ghost{
  width:42px;
  flex:none;
  justify-content:center;
  padding:0
}

@media (max-width:640px){
  .app-shell .booking-form-grid{
    grid-template-columns:1fr
  }
}

.app-shell .modal-dialog.booking-detail-dialog{
  width:min(640px,calc(100vw - 32px));
  max-width:none
}

.app-shell .booking-detail-facts{
  padding:0 0 12px
}

.app-shell .booking-detail-facts>.is-wide{
  grid-column:1/-1
}

.app-shell .booking-detail-status{
  padding-top:12px;
  border-top:1px solid var(--border-2)
}

.app-shell .booking-status-row{
  display:flex;
  align-items:center;
  gap:8px
}

.app-shell .booking-status-row .finput,.app-shell .booking-status-row .select2-container{
  flex:1;
  min-width:0
}

.app-shell .booking-status-row .btn-primary{
  flex:none
}

.app-shell .booking-detail-footer-spacer{
  flex:1
}

@media (max-width:600px){
  .app-shell .booking-detail-footer{
    flex-wrap:wrap
  }

  .app-shell .booking-detail-footer-spacer{
    display:none
  }
}

/* The table and service-staff selects are injected from a partial shared with the POS screen.
   These rules named .booking-module-field, which that partial never wrote — it arrived in
   Bootstrap column classes this stack does not define, so the fields stacked at a shrunken
   width and none of this applied. The partial now names what it is, and this matches it. */

.app-shell .booking-module-fields{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:13px
}

.app-shell .booking-module-fields:empty{
  display:none
}

.app-shell .booking-module-fields .restaurant-pos-field{
  display:grid;
  gap:5px;
  min-width:0;
  padding:0
}

.app-shell .booking-module-fields .restaurant-pos-field .form-group{
  margin:0
}

.app-shell .booking-module-fields .restaurant-pos-field .pos-meta-label{
  display:block;
  margin:0 0 5px
}

.app-shell .booking-module-fields .restaurant-pos-field .pos-meta-label>span{
  color:var(--text-2);
  font-size:12px;
  font-weight:700;
  letter-spacing:0;
  text-transform:none
}

.app-shell .booking-module-fields .form-control,.app-shell .booking-module-fields .select2-container{
  width:100%!important;
  min-width:0
}

.app-shell .booking-module-fields .input-group-btn{
  display:none
}

@media (max-width:640px){
  .app-shell .booking-module-fields{
    grid-template-columns:1fr
  }
}

/* Restaurant floor and kitchen screens. They keep their own full-bleed layout — no rail, no
   module bar — but until now loaded none of the design system, so their controls fell back to
   the old palette and every order was an AdminLTE `small-box` with coloured footer strips. */

.app-shell.restaurant-kiosk{
  width:100%;
  max-width:1600px;
  margin:0 auto;
  padding:0 16px 24px
}

.app-shell .restaurant-kiosk-page{
  display:flex;
  min-height:0;
  flex-direction:column;
  gap:14px;
  padding:0
}

.app-shell .order-staff-filter{
  display:flex;
  align-items:center;
  gap:9px;
  margin:0
}

.app-shell .order-staff-filter label{
  margin:0;
  color:var(--text-3);
  font-size:12px;
  font-weight:700;
  white-space:nowrap
}

.app-shell .order-staff-filter .select2-container{
  min-width:230px
}

.app-shell .order-section{
  overflow:hidden;
  position:relative
}

.app-shell .order-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:12px;
  padding:15px
}

.app-shell .order-card{
  display:flex;
  flex-direction:column;
  gap:9px;
  padding:13px;
  border:1px solid var(--border);
  border-radius:13px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

.app-shell .order-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:9px
}

.app-shell .order-card-head strong{
  font-size:15px;
  font-weight:800
}

.app-shell .order-card-product{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:9px;
  padding-bottom:9px;
  border-bottom:1px solid var(--border-2)
}

.app-shell .order-card-product strong{
  font-size:13.5px;
  line-height:1.35
}

.app-shell .order-card-product small{
  display:block;
  margin-top:2px;
  color:var(--text-3);
  font-size:11.5px;
  font-weight:500
}

.app-shell .order-card-qty{
  flex:none;
  padding:2px 9px;
  border-radius:999px;
  background:var(--brand-weak);
  color:var(--brand-strong);
  font-size:12px;
  font-weight:800
}

.app-shell .order-card-modifiers{
  display:grid;
  gap:2px;
  margin:0;
  padding-left:15px;
  color:var(--text-3);
  font-size:11.5px
}

.app-shell .order-card-facts{
  display:grid;
  gap:4px;
  margin:0
}

.app-shell .order-card-facts>div{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px
}

.app-shell .order-card-facts dt{
  margin:0;
  color:var(--text-3);
  font-size:11px;
  font-weight:700;
  white-space:nowrap
}

.app-shell .order-card-facts dd{
  margin:0;
  overflow:hidden;
  color:var(--text-2);
  font-size:12px;
  text-align:right;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .order-card-note{
  margin:0;
  padding:8px 10px;
  border-radius:9px;
  background:var(--surface-2);
  color:var(--text-2);
  font-size:11.5px;
  line-height:1.5
}

.app-shell .order-card-actions{
  display:flex;
  gap:7px;
  margin-top:auto;
  padding-top:9px;
  border-top:1px solid var(--border-2)
}

.app-shell .order-card-actions>*{
  flex:1;
  height:36px;
  justify-content:center;
  padding:0 10px;
  font-size:12.5px
}

.app-shell .order-empty{
  display:grid;
  grid-column:1/-1;
  justify-items:center;
  gap:8px;
  padding:34px 12px;
  color:var(--text-3);
  font-size:13px;
  text-align:center
}

.app-shell .order-empty>span{
  display:grid;
  width:44px;
  height:44px;
  place-items:center;
  border-radius:12px;
  background:var(--surface-2)
}

.app-shell .order-section .overlay{
  position:absolute;
  z-index:5;
  display:grid;
  place-items:center;
  background:color-mix(in srgb,var(--surface) 72%,transparent);
  inset:0
}

.app-shell .order-section .overlay.hide{
  display:none!important
}

.app-shell .order-spinner{
  display:block;
  width:26px;
  height:26px;
  border:3px solid var(--border);
  border-top-color:var(--brand);
  border-radius:50%;
  animation:up-spin .8s linear infinite
}

@media (max-width:640px){
  .app-shell.restaurant-kiosk{
    padding:0 10px 18px
  }

  .app-shell .order-grid{
    grid-template-columns:1fr;
    padding:11px
  }

  .app-shell .order-staff-filter{
    width:100%
  }

  .app-shell .order-staff-filter .select2-container{
    width:100%!important;
    min-width:0
  }
}

.app-shell .restaurant-kiosk-bar{
  display:flex;
  justify-content:flex-end;
  padding:12px 0 0
}

.app-shell .restaurant-kiosk-bar .btn-ghost{
  height:36px;
  padding:0 13px
}

/* Business settings: a quiet operational workspace with one navigation rail, a readable
   two-column form rhythm, and actions that remain available on long configuration panes. */

.app-shell .business-settings-page{
  max-width:1510px
}

.app-shell .settings-page-head{
  margin-bottom:18px;
  padding:5px 2px 18px;
  border-bottom:1px solid var(--border-2)
}

.app-shell .settings-page-heading{
  min-width:0
}

.app-shell .settings-page-heading h1{
  margin:3px 0 0;
  color:var(--text);
  font-size:27px;
  font-weight:850;
  letter-spacing:-.035em;
  line-height:1.15
}

.app-shell .settings-page-heading p{
  max-width:680px;
  margin:6px 0 0;
  color:var(--text-3);
  font-size:13px;
  line-height:1.55
}

.app-shell .settings-layout{
  display:grid;
  grid-template-columns:256px minmax(0,1fr);
  align-items:start;
  gap:18px
}

.app-shell .settings-nav{
  position:sticky;
  top:14px;
  overflow:hidden;
  border:1px solid #dce4df;
  border-radius:16px;
  background:var(--surface);
  box-shadow:0 8px 28px rgba(18,35,25,.055)
}

.app-shell .settings-nav-head{
  padding:15px 13px 13px;
  border-bottom:1px solid var(--border-2);
  background:linear-gradient(145deg,#fbfdfb 0%,#f4f8f5 100%)
}

.app-shell .settings-nav-title{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:13px
}

.app-shell .settings-nav-title>div{
  display:grid;
  gap:1px;
  min-width:0
}

.app-shell .settings-nav-title strong{
  color:var(--text);
  font-size:13.5px;
  font-weight:820
}

.app-shell .settings-nav-title small{
  color:var(--text-3);
  font-size:10.5px;
  font-weight:650
}

.app-shell .settings-nav-mark{
  display:grid;
  width:34px;
  height:34px;
  flex:none;
  place-items:center;
  border:1px solid #cce7d5;
  border-radius:10px;
  background:#e9f6ed;
  color:var(--brand-strong)
}

.app-shell .settings-nav .list-group{
  display:flex;
  max-height:calc(100vh - 285px);
  flex-direction:column;
  gap:2px;
  overflow-y:auto;
  margin:0;
  padding:21px 8px 9px;
  border:0;
  border-radius:0;
  background:transparent;
  scrollbar-width:thin
}

.app-shell .settings-nav .list-group-item{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  position:relative;
  gap:10px;
  min-height:39px;
  padding:8px 10px;
  border:1px solid transparent;
  border-radius:9px;
  background:transparent;
  color:#66736c;
  font-size:12.5px;
  font-weight:690;
  text-align:left;
  text-decoration:none;
  transition:border-color .15s ease,background .15s ease,color .15s ease,box-shadow .15s ease
}

.app-shell .settings-nav .list-group-item svg{
  flex:none;
  width:16px;
  height:16px;
  color:#98a49d;
  transition:color .15s ease
}

.app-shell .settings-nav .list-group-item>span{
  flex:1;
  overflow:hidden;
  text-align:left;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .settings-nav .list-group-item .settings-nav-chevron{
  width:13px;
  height:13px;
  opacity:0;
  transform:translateX(-3px);
  transition:.15s ease
}

.app-shell .settings-nav .list-group-item:hover{
  border-color:var(--border);
  background:var(--surface-2);
  color:var(--text)
}

.app-shell .settings-nav .list-group-item:hover .settings-nav-chevron{
  opacity:.55;
  transform:none
}

.app-shell .settings-nav .list-group-item.active{
  border-color:transparent;
  background:#f0f5f1;
  color:#1e2a23;
  box-shadow:none
}

.app-shell .settings-nav .list-group-item.active svg{
  color:#27864a
}

.app-shell .settings-nav .list-group-item.active .settings-nav-chevron{
  opacity:.7;
  color:#27864a;
  transform:none
}

.app-shell .settings-nav .list-group-item:nth-child(1)::before,.app-shell .settings-nav .list-group-item:nth-child(5)::before,.app-shell .settings-nav .list-group-item:nth-child(9)::before,.app-shell .settings-nav .list-group-item:nth-child(12)::before,.app-shell .settings-nav .list-group-item:nth-child(14)::before{
  position:absolute;
  bottom:100%;
  left:8px;
  color:#9aa69f;
  font-size:9px;
  font-weight:850;
  letter-spacing:.11em;
  text-transform:uppercase
}

.app-shell .settings-nav .list-group-item:nth-child(1)::before{
  content:"General"
}

.app-shell .settings-nav .list-group-item:nth-child(5)::before{
  content:"Operations"
}

.app-shell .settings-nav .list-group-item:nth-child(9)::before{
  content:"Workspace"
}

.app-shell .settings-nav .list-group-item:nth-child(12)::before{
  content:"Communication"
}

.app-shell .settings-nav .list-group-item:nth-child(14)::before{
  content:"Extensions"
}

.app-shell .settings-nav .list-group-item:nth-child(5),.app-shell .settings-nav .list-group-item:nth-child(9),.app-shell .settings-nav .list-group-item:nth-child(12),.app-shell .settings-nav .list-group-item:nth-child(14){
  margin-top:23px
}

.app-shell .settings-workspace{
  min-width:0;
  overflow:hidden;
  border:1px solid #dce4df;
  border-radius:16px;
  background:var(--surface);
  box-shadow:0 8px 28px rgba(18,35,25,.05)
}

.app-shell .settings-workspace-head{
  display:flex;
  align-items:center;
  gap:11px;
  min-height:70px;
  padding:13px 20px;
  border-bottom:1px solid var(--border-2);
  background:linear-gradient(90deg,#fff 0%,#fbfdfb 72%,#f2f8f4 100%)
}

.app-shell .settings-workspace-head>div:nth-child(2){
  min-width:0
}

.app-shell .settings-workspace-head span{
  display:block;
  color:var(--brand-strong);
  font-size:9.5px;
  font-weight:850;
  letter-spacing:.1em;
  text-transform:uppercase
}

.app-shell .settings-workspace-head h2{
  margin:2px 0 0;
  color:var(--text);
  font-size:18px;
  font-weight:830;
  letter-spacing:-.02em
}

.app-shell .settings-workspace-icon{
  display:grid;
  width:40px;
  height:40px;
  flex:none;
  place-items:center;
  border-radius:12px;
  background:#e7f5eb;
  color:#228648
}

.app-shell .settings-workspace-head .settings-save-state{
  display:inline-flex;
  margin-left:auto!important;
  align-items:center;
  gap:7px!important;
  padding:6px 10px;
  border:1px solid #dce8df;
  border-radius:999px;
  background:#f6faf7;
  color:#7b8981!important;
  font-size:10.5px!important;
  font-weight:700!important;
  line-height:1;
  letter-spacing:0!important;
  text-transform:none!important;
  white-space:nowrap
}

.app-shell .settings-save-state i{
  display:block;
  width:6px;
  height:6px;
  flex:none;
  border-radius:50%;
  background:#2e9b52
}

.app-shell .settings-save-state.is-dirty{
  border-color:#f0dfb7;
  background:#fff9eb;
  color:#906820!important
}

.app-shell .settings-save-state.is-dirty i{
  background:#dfa52c;
  box-shadow:0 0 0 3px #f9ebc8
}

.app-shell .settings-panes{
  min-width:0
}

.app-shell .settings-pane{
  display:none;
  padding:20px
}

.app-shell .settings-pane.active{
  display:block;
  animation:settings-pane-in .22s ease both
}

@keyframes settings-pane-in{
  from{
    opacity:0;
    transform:translateY(3px)
  }

  to{
    opacity:1;
    transform:none
  }
}

.app-shell .settings-section{
  padding:0 0 22px
}

.app-shell .settings-section+.settings-section{
  padding-top:22px;
  border-top:1px solid var(--border-2)
}

.app-shell .settings-section-head{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-bottom:16px
}

.app-shell .settings-section-head>div{
  min-width:0;
  padding-top:1px
}

.app-shell .settings-section-head h3{
  margin:0;
  color:#25312a;
  font-size:14px;
  font-weight:820;
  letter-spacing:-.01em
}

.app-shell .settings-section-head p{
  margin:3px 0 0;
  color:#929d97;
  font-size:11.5px;
  line-height:1.45
}

.app-shell .settings-section-icon{
  display:grid;
  width:31px;
  height:31px;
  flex:none;
  place-items:center;
  border-radius:9px;
  background:#e9f6ed;
  color:#248748
}

.app-shell .settings-section-icon.is-blue{
  background:#edf4fc;
  color:#3a78ad
}

.app-shell .settings-section-icon.is-amber{
  background:#fff4df;
  color:#aa7424
}

.app-shell .settings-section-icon.is-neutral{
  background:var(--surface-3);
  color:#67736c
}

.app-shell .settings-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:15px 18px
}

.app-shell .settings-grid + .settings-grid{
  margin-top:15px
}

.app-shell .settings-identity-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(310px,.72fr);
  align-items:stretch;
  gap:18px
}

.app-shell .settings-identity-grid>.settings-grid{
  grid-template-columns:1fr;
  align-content:start
}

.app-shell .settings-logo-card{
  display:grid;
  grid-template-columns:88px minmax(0,1fr);
  align-items:center;
  gap:15px;
  min-width:0;
  padding:14px;
  border:1px solid #dfe6e2;
  border-radius:13px;
  background:linear-gradient(145deg,#fff 0%,#f8faf8 100%)
}

.app-shell .settings-logo-preview{
  display:grid;
  width:88px;
  height:88px;
  overflow:hidden;
  place-items:center;
  border:1px solid #dce5df;
  border-radius:18px;
  background:var(--surface);
  color:#92a098;
  box-shadow:0 4px 12px rgba(18,35,25,.06)
}

.app-shell .settings-logo-preview.has-new-logo{
  border-color:#b9d8c3;
  box-shadow:0 0 0 3px #e9f5ed
}

.app-shell .settings-logo-preview img{
  width:100%;
  height:100%;
  -o-object-fit:contain;
     object-fit:contain;
  padding:7px
}

.app-shell .settings-logo-preview span{
  display:grid;
  width:36px;
  height:36px;
  place-items:center;
  border-radius:11px;
  background:#eef4f0;
  color:#789083
}

.app-shell .settings-logo-editor{
  min-width:0
}

.app-shell .settings-logo-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:7px
}

.app-shell .settings-logo-heading strong{
  color:#334039;
  font-size:11.5px;
  font-weight:780
}

.app-shell .settings-logo-heading span{
  color:#9aa59f;
  font-size:8.5px;
  font-weight:800;
  letter-spacing:.06em
}

.app-shell .settings-logo-card .file-upload-picker{
  min-height:56px;
  grid-template-columns:32px minmax(0,1fr) auto;
  padding:7px 9px;
  background:var(--surface)
}

.app-shell .settings-logo-card .file-upload-icon{
  width:32px;
  height:32px
}

.app-shell .settings-logo-card .file-upload-copy strong{
  font-size:10.5px
}

.app-shell .settings-logo-card .file-upload-copy small{
  font-size:9.5px
}

.app-shell .settings-logo-card .file-upload-action{
  min-height:30px;
  padding:0 9px;
  font-size:9.5px
}

.app-shell .settings-logo-card .file-upload-help{
  margin-top:5px;
  font-size:9.5px
}

.app-shell .settings-cell{
  min-width:0
}

.app-shell .settings-field{
  margin:0
}

.app-shell .settings-field + .settings-field{
  margin-top:12px
}

.app-shell .settings-field > label{
  display:inline-block;
  margin:0 5px 6px 0;
  color:#55625b;
  font-size:11.5px;
  font-weight:740;
  vertical-align:middle
}

.app-shell .settings-field > label + i{
  margin-bottom:5px;
  vertical-align:middle
}

.app-shell .settings-field > label + i + br{
  display:none
}

.app-shell .settings-control{
  display:block
}

.app-shell .settings-pane .form-control{
  width:100%;
  min-height:42px;
  border-color:#dce3df;
  background:#fbfcfb;
  transition:border-color .15s ease,box-shadow .15s ease,background .15s ease
}

.app-shell .settings-pane .form-control:focus{
  border-color:#79b98d;
  background:var(--surface);
  box-shadow:0 0 0 3px rgba(42,151,79,.1)
}

.app-shell .settings-pane h4{
  margin:0 0 14px;
  padding-bottom:10px;
  border-bottom:1px solid var(--border-2);
  font-size:14px;
  font-weight:800
}

.app-shell .settings-pane .checkbox,.app-shell .settings-pane .checkbox-inline{
  margin:0;
  padding:0
}

.app-shell .settings-pane .checkbox label,.app-shell .settings-pane .checkbox-inline{
  display:flex;
  align-items:flex-start;
  gap:8px;
  color:var(--text-2);
  font-size:12.5px;
  font-weight:650
}

.app-shell .settings-pane .help-block{
  margin:3px 0 0;
  color:#97a29c;
  font-size:10.5px;
  line-height:1.4
}

.app-shell .settings-advanced{
  overflow:hidden;
  margin-top:0;
  border:1px solid #e1e7e3;
  border-radius:12px;
  background:#fbfcfb
}

.app-shell .settings-advanced summary{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 13px;
  cursor:pointer;
  list-style:none;
  -webkit-user-select:none;
     -moz-user-select:none;
          user-select:none
}

.app-shell .settings-advanced summary::-webkit-details-marker{
  display:none
}

.app-shell .settings-advanced summary>span:nth-child(2){
  display:grid;
  gap:2px;
  min-width:0
}

.app-shell .settings-advanced summary strong{
  color:#4e5c54;
  font-size:12px;
  font-weight:780
}

.app-shell .settings-advanced summary small{
  overflow:hidden;
  color:#98a39d;
  font-size:10.5px;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .settings-advanced-chevron{
  margin-left:auto;
  color:#87938c;
  transition:transform .2s ease
}

.app-shell .settings-advanced[open] .settings-advanced-chevron{
  transform:rotate(180deg)
}

.app-shell .settings-advanced>.settings-grid{
  padding:15px;
  border-top:1px solid var(--border-2);
  background:var(--surface)
}

.app-shell .settings-expiry-card{
  display:grid;
  grid-template-columns:minmax(230px,.8fr) minmax(280px,1.2fr);
  gap:15px 18px;
  padding:15px;
  border:1px solid #e1e7e3;
  border-radius:13px;
  background:#fafcfb
}

.app-shell .settings-expiry-enable{
  display:flex;
  align-items:flex-end
}

.app-shell .settings-expiry-enable .checkbox{
  width:100%
}

.app-shell .settings-expiry-enable .checkbox label{
  min-height:42px;
  align-items:center;
  padding:8px 11px;
  border:1px solid #dce5df;
  border-radius:10px;
  background:var(--surface);
  cursor:pointer
}

.app-shell .settings-expiry-enable .checkbox label>span:last-child{
  display:grid;
  gap:1px;
  min-width:0
}

.app-shell .settings-expiry-enable .checkbox strong{
  color:#425048;
  font-size:11.5px;
  font-weight:760
}

.app-shell .settings-expiry-enable .checkbox small{
  overflow:hidden;
  color:#98a39d;
  font-size:9.5px;
  font-weight:500;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .settings-expiry-policy{
  display:grid;
  grid-column:1/-1;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:15px 18px;
  padding-top:15px;
  border-top:1px solid var(--border-2)
}

.app-shell .settings-control-inline .settings-control-suffix{
  display:flex;
  min-width:54px;
  align-items:center;
  justify-content:center;
  align-self:stretch;
  padding:0 11px;
  border:1px solid #dce3df;
  border-left:0;
  border-radius:0 9px 9px 0;
  background:#f2f5f3;
  color:#68756d
}

.app-shell .settings-control-inline:has(.settings-control-suffix) .form-control{
  border-radius:9px 0 0 9px
}

.app-shell .settings-product-options,.app-shell .settings-sale-options{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px
}

.app-shell .settings-sale-options{
  grid-template-columns:repeat(2,minmax(0,1fr))
}

.app-shell .settings-product-option,.app-shell .settings-sale-option{
  min-width:0
}

.app-shell .settings-product-option .checkbox,.app-shell .settings-sale-option .checkbox{
  height:100%
}

.app-shell .settings-product-option .checkbox label,.app-shell .settings-sale-option .checkbox label{
  min-height:48px;
  height:100%;
  align-items:center;
  padding:10px 11px;
  border:1px solid #e1e7e3;
  border-radius:10px;
  background:#fafcfb;
  cursor:pointer;
  transition:border-color .15s ease,background .15s ease,box-shadow .15s ease
}

.app-shell .settings-product-option .checkbox label:hover,.app-shell .settings-sale-option .checkbox label:hover{
  border-color:#c7d9cd;
  background:#f6faf7
}

.app-shell .settings-product-option .checkbox label>span,.app-shell .settings-sale-option .checkbox label>span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .settings-product-option .checkbox label>i,.app-shell .settings-sale-option .checkbox label>i{
  margin-left:auto;
  flex:none
}

.app-shell .settings-product-option .checkbox:has(input:checked) label,.app-shell .settings-product-option .checkbox:has(.checked) label,.app-shell .settings-sale-option .checkbox:has(input:checked) label,.app-shell .settings-sale-option .checkbox:has(.checked) label{
  border-color:#c8dece;
  background:#f2f8f4;
  box-shadow:inset 0 0 0 1px rgba(39,134,74,.04)
}

.app-shell .settings-sale-required-option,.app-shell .settings-payment-link-toggle{
  margin-top:12px;
  padding:11px 12px;
  border:1px solid #e1e7e3;
  border-radius:11px;
  background:#fafcfb
}

.app-shell .settings-sale-required-option .checkbox label,.app-shell .settings-payment-link-toggle .checkbox label{
  align-items:center;
  cursor:pointer
}

.app-shell .settings-sale-required-option .checkbox label>span:last-child,.app-shell .settings-payment-link-toggle .checkbox label>span:last-child{
  display:grid;
  gap:2px;
  min-width:0
}

.app-shell .settings-sale-required-option strong,.app-shell .settings-payment-link-toggle strong{
  color:#46534b;
  font-size:11.5px;
  font-weight:760
}

.app-shell .settings-sale-required-option small,.app-shell .settings-payment-link-toggle small{
  color:#95a098;
  font-size:9.5px;
  font-weight:500
}

.app-shell .settings-payment-link-toggle{
  margin:0 0 13px;
  background:#f5f9f6
}

.app-shell .settings-payment-providers{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px
}

.app-shell .settings-payment-provider{
  overflow:hidden;
  border:1px solid #dfe6e2;
  border-radius:13px;
  background:var(--surface)
}

.app-shell .settings-payment-provider>header{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 13px;
  border-bottom:1px solid var(--border-2);
  background:#fafcfb
}

.app-shell .settings-payment-provider>header>div{
  display:grid;
  gap:1px;
  min-width:0
}

.app-shell .settings-payment-provider>header strong{
  color:#344139;
  font-size:12px;
  font-weight:800
}

.app-shell .settings-payment-provider>header small{
  color:#96a19a;
  font-size:9.5px;
  font-weight:600
}

.app-shell .settings-provider-icon{
  display:grid;
  width:32px;
  height:32px;
  flex:none;
  place-items:center;
  border-radius:9px
}

.app-shell .settings-provider-icon.is-razorpay{
  background:#edf6ff;
  color:#3475b7
}

.app-shell .settings-provider-icon.is-stripe{
  background:#f0efff;
  color:#635bce
}

.app-shell .settings-provider-fields{
  display:grid;
  gap:12px;
  padding:13px
}

.app-shell .settings-denomination-layout{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(300px,.9fr);
  align-items:stretch;
  gap:14px
}

.app-shell .settings-denomination-input{
  align-self:center
}

.app-shell .settings-denomination-preview{
  min-height:94px;
  padding:12px 13px;
  border:1px solid #dfe7e2;
  border-radius:12px;
  background:linear-gradient(145deg,#f8fbf9,#f2f7f4)
}

.app-shell .settings-denomination-preview-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:9px
}

.app-shell .settings-denomination-preview-head>span{
  color:#536058;
  font-size:10px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase
}

.app-shell .settings-denomination-preview-head small{
  color:#8c9991;
  font-size:9px;
  font-weight:600
}

.app-shell .settings-denomination-preview-head strong{
  color:#27834a;
  font-weight:850
}

.app-shell .settings-denomination-chips{
  display:flex;
  flex-wrap:wrap;
  gap:6px
}

.app-shell .settings-denomination-chip{
  display:inline-flex;
  min-height:27px;
  align-items:center;
  padding:4px 9px;
  border:1px solid #cfe1d5;
  border-radius:8px;
  background:var(--surface);
  color:#326044;
  box-shadow:0 1px 2px rgba(20,48,31,.04);
  font-size:10.5px;
  font-weight:750
}

.app-shell .settings-denomination-empty{
  align-self:center;
  color:#98a39d;
  font-size:10px;
  line-height:1.5
}

.app-shell .settings-payment-strict-card{
  display:flex;
  align-items:center;
  gap:11px;
  margin-top:14px;
  padding:12px 13px;
  border:1px solid #dfe6e2;
  border-radius:12px;
  background:#fafcfb;
  transition:border-color .15s ease,background .15s ease
}

.app-shell .settings-payment-strict-card:has(input:checked),.app-shell .settings-payment-strict-card:has(.checked){
  border-color:#bed9c7;
  background:#f1f8f3
}

.app-shell .settings-payment-strict-icon{
  display:grid;
  width:32px;
  height:32px;
  flex:none;
  place-items:center;
  border-radius:9px;
  background:#eef4f0;
  color:#5f7768
}

.app-shell .settings-payment-strict-card .checkbox{
  min-width:0;
  flex:1
}

.app-shell .settings-payment-strict-card .checkbox label{
  align-items:center;
  cursor:pointer
}

.app-shell .settings-payment-strict-card .checkbox label>i{
  margin-left:auto;
  flex:none
}

.app-shell .settings-payment-strict-badge{
  flex:none;
  padding:5px 8px;
  border:1px solid #d7e4db;
  border-radius:999px;
  background:var(--surface);
  color:#688173;
  font-size:8.5px;
  font-weight:800;
  letter-spacing:.035em;
  text-transform:uppercase
}

.app-shell .settings-reward-hero{
  display:grid;
  grid-template-columns:minmax(320px,1fr) minmax(280px,1fr);
  align-items:stretch;
  gap:14px
}

.app-shell .settings-reward-toggle{
  display:flex;
  align-items:center;
  gap:11px;
  min-width:0;
  padding:13px;
  border:1px solid #dfe6e2;
  border-radius:13px;
  background:linear-gradient(145deg,#f8fcf9,#f1f8f3);
  transition:border-color .15s ease,box-shadow .15s ease
}

.app-shell .settings-reward-toggle:has(input:checked),.app-shell .settings-reward-toggle:has(.checked){
  border-color:#bcd9c5;
  box-shadow:inset 0 0 0 1px rgba(39,134,74,.05)
}

.app-shell .settings-reward-hero-icon{
  display:grid;
  width:38px;
  height:38px;
  flex:none;
  place-items:center;
  border-radius:11px;
  background:#e4f3e9;
  color:#258348
}

.app-shell .settings-reward-toggle .checkbox{
  min-width:0;
  flex:1
}

.app-shell .settings-reward-toggle .checkbox label{
  align-items:center;
  cursor:pointer
}

.app-shell .settings-reward-status{
  flex:none;
  padding:5px 8px;
  border:1px solid #dce4df;
  border-radius:999px;
  background:var(--surface);
  color:#8c9791;
  font-size:8.5px;
  font-weight:850;
  letter-spacing:.045em;
  text-transform:uppercase
}

.app-shell .settings-reward-status .is-on{
  display:none
}

.app-shell .settings-reward-program:has(#enable_rp:checked) .settings-reward-status{
  border-color:#cde2d4;
  background:#f5fbf7;
  color:#267a45
}

.app-shell .settings-reward-program:has(#enable_rp:checked) .settings-reward-status .is-on{
  display:inline
}

.app-shell .settings-reward-program:has(#enable_rp:checked) .settings-reward-status .is-off{
  display:none
}

.app-shell .settings-reward-name{
  align-self:center
}

.app-shell .settings-reward-rate-card{
  display:grid;
  grid-template-columns:36px minmax(0,1fr);
  align-items:center;
  gap:12px;
  padding:13px;
  border:1px solid #dfe6e2;
  border-radius:12px;
  background:#fafcfb
}

.app-shell .settings-reward-rate-icon{
  display:grid;
  width:36px;
  height:36px;
  place-items:center;
  border-radius:10px;
  background:#e9f6ed;
  color:#27844a
}

.app-shell .settings-reward-rate-card .settings-control-suffix{
  min-width:90px;
  white-space:nowrap
}

.app-shell .settings-reward-limits{
  margin-top:14px
}

.app-shell .settings-reward-expiry-card{
  display:grid;
  grid-template-columns:minmax(300px,.9fr) minmax(300px,1.1fr);
  align-items:center;
  gap:18px;
  padding:14px;
  border:1px solid #e1e7e3;
  border-radius:13px;
  background:#fafcfb
}

.app-shell .settings-reward-expiry-control{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(120px,.45fr);
  gap:0
}

.app-shell .settings-reward-expiry-control>.form-control:first-child{
  border-top-right-radius:0;
  border-bottom-right-radius:0
}

.app-shell .settings-reward-expiry-control>.form-control:last-child{
  border-left:0;
  border-top-left-radius:0;
  border-bottom-left-radius:0;
  background:#f3f6f4
}

.app-shell .settings-reward-expiry-control:focus-within>.form-control{
  border-color:#79b98d
}

.app-shell .settings-reward-expiry-note{
  display:flex;
  align-items:flex-start;
  gap:8px;
  padding:10px 11px;
  border:1px solid #efe1bf;
  border-radius:10px;
  background:#fff9ed;
  color:#8a6b30;
  font-size:10px;
  font-weight:620;
  line-height:1.5
}

.app-shell .settings-reward-expiry-note>svg{
  flex:none;
  margin-top:1px
}

.app-shell .settings-modules-overview{
  padding-bottom:18px
}

.app-shell .settings-modules-summary{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px;
  border:1px solid #dbe6df;
  border-radius:13px;
  background:linear-gradient(145deg,#f5faf7,#edf6f0)
}

.app-shell .settings-modules-summary-icon{
  display:grid;
  width:40px;
  height:40px;
  flex:none;
  place-items:center;
  border-radius:11px;
  background:#dff0e5;
  color:#268049
}

.app-shell .settings-modules-summary>div{
  display:grid;
  min-width:0;
  flex:1;
  gap:2px
}

.app-shell .settings-modules-summary>div>span{
  color:#27804a;
  font-size:8.5px;
  font-weight:850;
  letter-spacing:.07em;
  text-transform:uppercase
}

.app-shell .settings-modules-summary>div>strong{
  color:#2f3b34;
  font-size:12.5px;
  font-weight:800
}

.app-shell .settings-modules-summary>div>small{
  color:#89958e;
  font-size:9.5px;
  font-weight:520;
  line-height:1.45
}

.app-shell .settings-modules-count{
  display:grid;
  min-width:76px;
  flex:none;
  place-items:center;
  padding:8px 10px;
  border:1px solid #cee1d4;
  border-radius:10px;
  background:var(--surface)
}

.app-shell .settings-modules-count>strong{
  color:#267f48;
  font-size:18px;
  font-weight:850;
  line-height:1
}

.app-shell .settings-modules-count>small{
  margin-top:3px;
  color:#86938b;
  font-size:8px;
  font-weight:750;
  white-space:nowrap
}

.app-shell .settings-module-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px
}

.app-shell .settings-module-card{
  min-width:0
}

.app-shell .settings-module-card .checkbox,.app-shell .settings-module-card .checkbox label{
  height:100%
}

.app-shell .settings-module-card .checkbox label{
  min-height:72px;
  align-items:center;
  padding:11px 12px;
  border:1px solid #e0e7e3;
  border-radius:11px;
  background:#fafcfb;
  cursor:pointer;
  transition:border-color .15s ease,background .15s ease,box-shadow .15s ease,transform .15s ease
}

.app-shell .settings-module-card .checkbox label:hover{
  border-color:#c9d9cf;
  background:#f7faf8;
  box-shadow:0 4px 12px rgba(24,48,34,.045);
  transform:translateY(-1px)
}

.app-shell .settings-module-card .settings-option-copy{
  flex:1
}

.app-shell .settings-module-card .checkbox label>i{
  flex:none
}

.app-shell .settings-module-card:has(input:checked) .checkbox label,.app-shell .settings-module-card:has(.checked) .checkbox label{
  border-color:#bdd9c6;
  background:#f0f8f3;
  box-shadow:inset 0 0 0 1px rgba(39,134,74,.04)
}

.app-shell .settings-module-icon{
  display:grid;
  width:32px;
  height:32px;
  flex:none;
  place-items:center;
  border-radius:9px;
  background:#eef3f0;
  color:#738179;
  transition:background .15s ease,color .15s ease
}

.app-shell .settings-module-card:has(input:checked) .settings-module-icon,.app-shell .settings-module-card:has(.checked) .settings-module-icon{
  background:#dff0e5;
  color:#28824a
}

.app-shell .settings-module-state{
  min-width:31px;
  flex:none;
  padding:4px 6px;
  border:1px solid #dce3df;
  border-radius:999px;
  background:var(--surface);
  color:#929c96;
  text-align:center;
  font-size:7.5px;
  font-weight:850;
  letter-spacing:.045em;
  text-transform:uppercase
}

.app-shell .settings-module-state .is-enabled{
  display:none
}

.app-shell .settings-module-card:has(input:checked) .settings-module-state,.app-shell .settings-module-card:has(.checked) .settings-module-state{
  border-color:#c9dfd0;
  color:#287d47
}

.app-shell .settings-module-card:has(input:checked) .settings-module-state .is-enabled,.app-shell .settings-module-card:has(.checked) .settings-module-state .is-enabled{
  display:inline
}

.app-shell .settings-module-card:has(input:checked) .settings-module-state .is-disabled,.app-shell .settings-module-card:has(.checked) .settings-module-state .is-disabled{
  display:none
}

.app-shell .settings-modules-empty{
  display:grid;
  min-height:180px;
  place-items:center;
  align-content:center;
  gap:8px;
  color:#89968e;
  text-align:center
}

.app-shell .settings-modules-empty>strong{
  font-size:12px;
  font-weight:750
}

.app-shell .settings-labels-overview{
  padding-bottom:18px
}

.app-shell .settings-labels-summary{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px;
  border:1px solid #dfe5e1;
  border-radius:13px;
  background:linear-gradient(145deg,#f8faf9,#f1f6f3)
}

.app-shell .settings-labels-summary-icon{
  display:grid;
  width:40px;
  height:40px;
  flex:none;
  place-items:center;
  border-radius:11px;
  background:#e3f1e8;
  color:#2b804b
}

.app-shell .settings-labels-summary>div{
  display:grid;
  min-width:0;
  flex:1;
  gap:2px
}

.app-shell .settings-labels-summary>div>span{
  color:#2b7e4b;
  font-size:8.5px;
  font-weight:850;
  letter-spacing:.07em;
  text-transform:uppercase
}

.app-shell .settings-labels-summary>div>strong{
  color:#303c35;
  font-size:12.5px;
  font-weight:800
}

.app-shell .settings-labels-summary>div>small{
  color:#89958e;
  font-size:9.5px;
  font-weight:520;
  line-height:1.45
}

.app-shell .settings-labels-count{
  display:grid;
  min-width:88px;
  flex:none;
  place-items:center;
  padding:8px 10px;
  border:1px solid #d4e2d8;
  border-radius:10px;
  background:var(--surface)
}

.app-shell .settings-labels-count>strong{
  color:#287f49;
  font-size:18px;
  font-weight:850;
  line-height:1
}

.app-shell .settings-labels-count>small{
  margin-top:3px;
  color:#87938c;
  font-size:8px;
  font-weight:750;
  white-space:nowrap
}

.app-shell .settings-label-groups{
  display:grid;
  gap:9px
}

.app-shell .settings-label-group{
  overflow:hidden;
  border:1px solid #e0e6e2;
  border-radius:12px;
  background:var(--surface);
  transition:border-color .15s ease,box-shadow .15s ease
}

.app-shell .settings-label-group[open]{
  border-color:#cddbd2;
  box-shadow:0 5px 16px rgba(20,45,30,.045)
}

.app-shell .settings-label-group>summary{
  display:flex;
  min-height:62px;
  align-items:center;
  gap:11px;
  padding:10px 12px;
  cursor:pointer;
  list-style:none;
  background:#fafcfb;
  -webkit-user-select:none;
     -moz-user-select:none;
          user-select:none
}

.app-shell .settings-label-group>summary::-webkit-details-marker{
  display:none
}

.app-shell .settings-label-group[open]>summary{
  border-bottom:1px solid #e8ece9;
  background:#f6faf7
}

.app-shell .settings-label-group-icon{
  display:grid;
  width:34px;
  height:34px;
  flex:none;
  place-items:center;
  border-radius:9px;
  background:#edf3ef;
  color:#687970
}

.app-shell .settings-label-group[open] .settings-label-group-icon{
  background:#e1f1e7;
  color:#29814a
}

.app-shell .settings-label-group-copy{
  display:grid;
  min-width:0;
  flex:1;
  gap:2px
}

.app-shell .settings-label-group-copy h4{
  margin:0;
  padding:0;
  border:0;
  color:#3a473f;
  font-size:11.5px;
  font-weight:800
}

.app-shell .settings-label-group-copy small{
  overflow:hidden;
  color:#929d97;
  font-size:9.5px;
  font-weight:520;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .settings-label-group-count{
  min-width:38px;
  flex:none;
  padding:4px 6px;
  border:1px solid #dce3df;
  border-radius:999px;
  background:var(--surface);
  color:#78857d;
  text-align:center;
  font-size:8px;
  font-weight:700
}

.app-shell .settings-label-group-count>strong{
  color:#378157;
  font-weight:850
}

.app-shell .settings-label-group-chevron{
  flex:none;
  color:#8d9992;
  transition:transform .2s ease
}

.app-shell .settings-label-group[open] .settings-label-group-chevron{
  transform:rotate(180deg)
}

.app-shell .settings-custom-label-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  padding:12px;
  background:var(--surface)
}

.app-shell .settings-label-field{
  min-width:0;
  padding:10px;
  border:1px solid #e5eae7;
  border-radius:10px;
  background:#fbfcfb
}

.app-shell .settings-label-field:focus-within{
  border-color:#bcd7c5;
  background:var(--surface);
  box-shadow:0 0 0 2px rgba(42,151,79,.06)
}

.app-shell .settings-label-field-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin-bottom:6px
}

.app-shell .settings-label-field-head>label{
  overflow:hidden;
  margin:0;
  color:#5c6961;
  font-size:10.5px;
  font-weight:750;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .settings-label-field-head>span{
  flex:none;
  color:#318151;
  font-size:7.5px;
  font-weight:850;
  letter-spacing:.045em;
  text-transform:uppercase
}

.app-shell .settings-label-field>.form-control{
  min-height:38px
}

.app-shell .settings-label-product-control{
  display:grid;
  grid-template-columns:minmax(0,1fr) 112px
}

.app-shell .settings-label-product-control>.form-control{
  min-height:38px;
  border-top-right-radius:0;
  border-bottom-right-radius:0
}

.app-shell .settings-label-product-control>select{
  min-width:0;
  border:1px solid #dce3df;
  border-left:0;
  border-radius:0 9px 9px 0;
  background:#f3f6f4;
  padding:0 9px;
  color:#647168;
  font-family:inherit;
  font-size:10px;
  font-weight:650;
  outline:0
}

.app-shell .settings-label-product-control:focus-within>.form-control,.app-shell .settings-label-product-control:focus-within>select{
  border-color:#79b98d
}

.app-shell .custom_label_product_dropdown{
  margin-top:7px
}

.app-shell .custom_label_product_dropdown textarea{
  display:block;
  width:100%;
  min-height:58px;
  resize:vertical;
  padding:8px 10px;
  border:1px solid #dce3df;
  border-radius:8px;
  background:var(--surface);
  color:var(--text);
  font-family:inherit;
  font-size:10.5px;
  line-height:1.45;
  outline:0
}

.app-shell .custom_label_product_dropdown textarea:focus{
  border-color:#79b98d;
  box-shadow:0 0 0 2px rgba(42,151,79,.07)
}

.app-shell .settings-label-options{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:7px
}

.app-shell .settings-label-options>label{
  display:flex;
  align-items:center;
  gap:5px;
  margin:0;
  padding:5px 7px;
  border:1px solid #e0e6e2;
  border-radius:7px;
  background:var(--surface);
  color:#6c7871;
  cursor:pointer;
  font-size:9px;
  font-weight:650
}

.app-shell .settings-label-options>label:has(input:checked){
  border-color:#c7ddce;
  background:#eff8f2;
  color:#2e7950
}

.app-shell .settings-label-option-check{
  width:14px;
  height:14px;
  margin:0;
  accent-color:#2f9b56
}

.app-shell .settings-sms-provider-select{
  display:grid;
  grid-template-columns:minmax(260px,.8fr) minmax(320px,1.2fr);
  align-items:end;
  gap:14px
}

.app-shell .settings-sms-provider-note{
  display:flex;
  min-height:42px;
  align-items:center;
  gap:8px;
  padding:9px 11px;
  border:1px solid #dce6df;
  border-radius:10px;
  background:#f7faf8;
  color:#738078;
  font-size:9.5px;
  font-weight:600;
  line-height:1.45
}

.app-shell .settings-sms-provider-note>svg{
  flex:none;
  color:#39865a
}

.app-shell .settings-sms-credentials{
  grid-template-columns:repeat(3,minmax(0,1fr))
}

.app-shell .settings-sms-request-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px 16px
}

.app-shell .settings-sms-advanced-list{
  display:grid;
  gap:9px;
  margin-top:16px
}

.app-shell .settings-sms-advanced{
  overflow:hidden;
  border:1px solid #e0e6e2;
  border-radius:11px;
  background:var(--surface)
}

.app-shell .settings-sms-advanced>summary{
  display:flex;
  min-height:58px;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  cursor:pointer;
  list-style:none;
  background:#fafcfb;
  -webkit-user-select:none;
     -moz-user-select:none;
          user-select:none
}

.app-shell .settings-sms-advanced>summary::-webkit-details-marker{
  display:none
}

.app-shell .settings-sms-advanced[open]>summary{
  border-bottom:1px solid #e7ece8;
  background:#f6faf7
}

.app-shell .settings-sms-advanced>summary>span:nth-child(2){
  display:grid;
  min-width:0;
  flex:1;
  gap:2px
}

.app-shell .settings-sms-advanced>summary strong{
  color:#3e4a43;
  font-size:11.5px;
  font-weight:800
}

.app-shell .settings-sms-advanced>summary small{
  color:#929d97;
  font-size:9.5px;
  font-weight:520
}

.app-shell .settings-sms-advanced>summary>svg{
  flex:none;
  color:#8b9790;
  transition:transform .2s ease
}

.app-shell .settings-sms-advanced[open]>summary>svg{
  transform:rotate(180deg)
}

.app-shell .settings-sms-advanced-icon{
  display:grid;
  width:32px;
  height:32px;
  flex:none;
  place-items:center;
  border-radius:9px;
  background:#e8f1fb;
  color:#447dad
}

.app-shell .settings-sms-advanced-icon.is-amber{
  background:#fff2dc;
  color:#a77228
}

.app-shell .settings-sms-pairs{
  display:grid;
  gap:0;
  padding:4px 12px 10px
}

.app-shell .settings-sms-pair{
  display:grid;
  grid-template-columns:26px repeat(2,minmax(0,1fr));
  align-items:end;
  gap:10px;
  padding:9px 0;
  border-bottom:1px solid #edf0ee
}

.app-shell .settings-sms-pair:last-child{
  border-bottom:0
}

.app-shell .settings-sms-pair>span{
  display:grid;
  width:24px;
  height:24px;
  place-items:center;
  align-self:center;
  border-radius:7px;
  background:#f0f4f1;
  color:#7e8b83;
  font-size:7.5px;
  font-weight:850
}

.app-shell .settings-sms-pair .form-control{
  min-height:38px
}

.app-shell .settings-sms-test{
  display:grid;
  grid-template-columns:34px minmax(180px,1fr) minmax(180px,.7fr) auto;
  align-items:center;
  gap:10px;
  margin-top:14px;
  padding:12px;
  border:1px solid #dbe6df;
  border-radius:12px;
  background:linear-gradient(145deg,#f5faf7,#eef6f1)
}

.app-shell .settings-sms-test-icon{
  display:grid;
  width:34px;
  height:34px;
  place-items:center;
  border-radius:9px;
  background:#def0e5;
  color:#288149
}

.app-shell .settings-sms-test>div{
  display:grid;
  min-width:0;
  gap:2px
}

.app-shell .settings-sms-test>div>strong{
  color:#3c4941;
  font-size:11px;
  font-weight:800
}

.app-shell .settings-sms-test>div>small{
  color:#8c9891;
  font-size:9px;
  font-weight:520;
  line-height:1.4
}

.app-shell .settings-sms-test>.form-control{
  min-height:38px;
  background:var(--surface)
}

.app-shell .settings-sms-test>.btn-ghost{
  min-height:38px;
  white-space:nowrap
}

.app-shell .settings-purchase-options{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px
}

.app-shell .settings-purchase-option{
  min-width:0
}

.app-shell .settings-purchase-option .checkbox{
  height:100%
}

.app-shell .settings-purchase-option .checkbox label{
  min-height:82px;
  height:100%;
  align-items:flex-start;
  padding:13px;
  border:1px solid #dfe6e2;
  border-radius:12px;
  background:linear-gradient(145deg,#fff,#fafcfb);
  cursor:pointer;
  transition:border-color .15s ease,background .15s ease,box-shadow .15s ease,transform .15s ease
}

.app-shell .settings-purchase-option .checkbox label:hover{
  border-color:#bfd6c7;
  background:#f7fbf8;
  box-shadow:0 5px 14px rgba(23,55,36,.05);
  transform:translateY(-1px)
}

.app-shell .settings-purchase-option .checkbox label>i{
  margin-left:auto;
  flex:none
}

.app-shell .settings-purchase-option .checkbox:has(input:checked) label,.app-shell .settings-purchase-option .checkbox:has(.checked) label{
  border-color:#bcd9c5;
  background:#f0f8f3;
  box-shadow:inset 0 0 0 1px rgba(39,134,74,.05)
}

.app-shell .settings-option-copy{
  display:grid;
  min-width:0;
  gap:4px;
  line-height:1.35
}

.app-shell .settings-option-copy strong{
  color:#425048;
  font-size:11.5px;
  font-weight:780
}

.app-shell .settings-option-copy small{
  color:#909c95;
  font-size:9.5px;
  font-weight:520;
  line-height:1.5
}

.app-shell .settings-purchase-flow{
  display:grid;
  grid-template-columns:minmax(0,1fr) 38px minmax(0,1fr);
  align-items:stretch
}

.app-shell .settings-purchase-stage{
  position:relative;
  min-width:0;
  padding:14px 48px 14px 14px;
  border:1px solid #dfe6e2;
  border-radius:13px;
  background:#fafcfb
}

.app-shell .settings-purchase-stage-number{
  position:absolute;
  top:12px;
  right:12px;
  display:grid;
  width:27px;
  height:27px;
  place-items:center;
  border-radius:8px;
  background:#e8f3ec;
  color:#328252;
  font-size:8.5px;
  font-weight:850;
  letter-spacing:.04em
}

.app-shell .settings-purchase-stage .checkbox,.app-shell .settings-purchase-stage .checkbox label{
  height:100%
}

.app-shell .settings-purchase-stage .checkbox label{
  align-items:flex-start;
  cursor:pointer
}

.app-shell .settings-purchase-stage .checkbox label>i{
  margin-left:auto;
  flex:none
}

.app-shell .settings-purchase-stage:has(input:checked),.app-shell .settings-purchase-stage:has(.checked){
  border-color:#bfd9c7;
  background:#f2f8f4
}

.app-shell .settings-purchase-flow-arrow{
  display:grid;
  place-items:center;
  color:#9aa69f
}

.app-shell .settings-purchase-currency-grid{
  display:grid;
  grid-template-columns:minmax(260px,1.15fr) repeat(2,minmax(190px,1fr));
  align-items:end;
  gap:14px
}

.app-shell .settings-purchase-currency-toggle{
  height:100%;
  padding:12px;
  border:1px solid #dfe6e2;
  border-radius:12px;
  background:#fafcfb
}

.app-shell .settings-purchase-currency-toggle .checkbox,.app-shell .settings-purchase-currency-toggle .checkbox label{
  height:100%
}

.app-shell .settings-purchase-currency-toggle .checkbox label{
  align-items:flex-start;
  cursor:pointer
}

.app-shell .settings-purchase-currency-toggle .checkbox label>i{
  margin-left:auto;
  flex:none
}

.app-shell .settings-purchase-currency-toggle:has(input:checked),.app-shell .settings-purchase-currency-toggle:has(.checked){
  border-color:#bfd9c7;
  background:#f2f8f4
}

.app-shell .settings-actions{
  margin-top:4px
}

.app-shell .settings-actions .btn-primary{
  min-width:158px;
  justify-content:center
}

@media (max-width:1050px){
  .app-shell .settings-identity-grid,.app-shell .settings-denomination-layout,.app-shell .settings-reward-hero,.app-shell .settings-sms-provider-select{
    grid-template-columns:1fr
  }

  .app-shell .settings-logo-card{
    max-width:none
  }

  .app-shell .settings-sms-credentials{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

  .app-shell .settings-sms-sender{
    grid-column:1/-1
  }

  .app-shell .settings-sms-test{
    grid-template-columns:34px minmax(0,1fr) auto
  }

  .app-shell .settings-sms-test>.form-control{
    grid-column:2/3
  }

  .app-shell .settings-sms-test>.btn-ghost{
    grid-column:3;
    grid-row:1/3
  }

  .app-shell .settings-purchase-options{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

  .app-shell .settings-purchase-currency-grid{
    grid-template-columns:1fr 1fr
  }

  .app-shell .settings-purchase-currency-toggle{
    grid-column:1/-1
  }

  .app-shell .settings-product-options{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}

@media (max-width:900px){
  .app-shell .settings-layout{
    grid-template-columns:1fr
  }

  .app-shell .settings-nav{
    position:static
  }

  .app-shell .settings-nav .list-group{
    max-height:none;
    flex-direction:row;
    overflow-x:auto;
    padding:8px
  }

  .app-shell .settings-nav .list-group-item{
    flex:none
  }

  .app-shell .settings-nav .list-group-item::before{
    display:none
  }

  .app-shell .settings-nav .list-group-item:nth-child(5),.app-shell .settings-nav .list-group-item:nth-child(9),.app-shell .settings-nav .list-group-item:nth-child(12),.app-shell .settings-nav .list-group-item:nth-child(14){
    margin-top:0
  }
}

@media (max-width:640px){
  .app-shell .settings-workspace-head{
    padding:12px 14px
  }

  .app-shell .settings-save-state{
    display:none
  }

  .app-shell .settings-pane{
    padding:15px
  }

  .app-shell .settings-grid,.app-shell .settings-expiry-card,.app-shell .settings-expiry-policy,.app-shell .settings-product-options,.app-shell .settings-sale-options,.app-shell .settings-payment-providers,.app-shell .settings-purchase-options,.app-shell .settings-purchase-currency-grid,.app-shell .settings-reward-expiry-card,.app-shell .settings-module-grid,.app-shell .settings-custom-label-grid,.app-shell .settings-sms-credentials,.app-shell .settings-sms-request-grid{
    grid-template-columns:1fr
  }

  .app-shell .settings-expiry-policy,.app-shell .settings-sms-sender{
    grid-column:auto
  }

  .app-shell .settings-logo-card{
    grid-template-columns:72px minmax(0,1fr);
    align-items:start
  }

  .app-shell .settings-logo-preview{
    width:72px;
    height:72px;
    border-radius:15px
  }

  .app-shell .settings-logo-card .file-upload-picker{
    grid-template-columns:30px minmax(0,1fr)
  }

  .app-shell .settings-logo-card .file-upload-action{
    grid-column:1/-1;
    justify-content:center
  }

  .app-shell .settings-payment-strict-card{
    align-items:flex-start;
    flex-wrap:wrap
  }

  .app-shell .settings-payment-strict-badge{
    margin-left:43px
  }

  .app-shell .settings-reward-toggle{
    align-items:flex-start;
    flex-wrap:wrap
  }

  .app-shell .settings-reward-status{
    margin-left:49px
  }

  .app-shell .settings-reward-rate-card{
    grid-template-columns:1fr
  }

  .app-shell .settings-reward-rate-icon{
    display:none
  }

  .app-shell .settings-modules-summary,.app-shell .settings-labels-summary{
    align-items:flex-start;
    flex-wrap:wrap
  }

  .app-shell .settings-modules-count,.app-shell .settings-labels-count{
    margin-left:52px
  }

  .app-shell .settings-label-group-copy small{
    white-space:normal
  }

  .app-shell .settings-sms-pair{
    grid-template-columns:24px minmax(0,1fr)
  }

  .app-shell .settings-sms-pair>.settings-field:last-child{
    grid-column:2
  }

  .app-shell .settings-sms-test{
    grid-template-columns:34px minmax(0,1fr)
  }

  .app-shell .settings-sms-test>.form-control,.app-shell .settings-sms-test>.btn-ghost{
    grid-column:1/-1;
    grid-row:auto
  }

  .app-shell .settings-sms-test>.btn-ghost{
    justify-content:center
  }

  .app-shell .settings-purchase-flow{
    grid-template-columns:1fr;
    gap:9px
  }

  .app-shell .settings-purchase-flow-arrow{
    display:none
  }

  .app-shell .settings-purchase-currency-toggle{
    grid-column:auto
  }

  .app-shell .settings-actions .btn-primary{
    width:100%
  }
}

/* Three of the input-group addons held real content rather than an icon: a unit suffix, a
   separator between two controls, and a checkbox that enables the select beside it. */

.app-shell .settings-control-inline{
  display:flex;
  align-items:center;
  gap:9px
}

.app-shell .settings-control-inline .form-control{
  flex:1;
  min-width:0
}

.app-shell .settings-control-inline:has(>.settings-control-suffix){
  align-items:stretch;
  gap:0
}

.app-shell .settings-control-inline:has(>.settings-control-suffix)>.form-control{
  border-top-right-radius:0;
  border-bottom-right-radius:0
}

.app-shell .settings-control-inline:has(>.settings-control-suffix)>.settings-control-suffix{
  min-width:50px;
  border-top-left-radius:0;
  border-bottom-left-radius:0;
  transition:border-color .15s ease,background .15s ease,color .15s ease
}

.app-shell .settings-control-inline:has(>.settings-control-suffix):focus-within>.settings-control-suffix{
  border-color:#79b98d;
  background:#f0f8f3;
  color:var(--brand-strong)
}

.app-shell .settings-control-inline .settings-check{
  flex:none;
  margin:0
}

.app-shell .settings-control-suffix,.app-shell .settings-control-sep{
  flex:none;
  color:var(--text-3);
  font-size:12.5px;
  font-weight:700
}

/* Custom labels put a real control in the addon — a field type or a "required" toggle — so
   these stay beside the input rather than being dropped. */

.app-shell .settings-control>.input-group-addon{
  display:flex;
  flex:none;
  align-items:center;
  padding:0 10px;
  border:1px solid var(--border);
  border-left:0;
  border-radius:0 9px 9px 0;
  background:var(--surface-2);
  color:var(--text-2);
  font-size:12px;
  white-space:nowrap
}

.app-shell .settings-control:has(>.input-group-addon){
  display:flex;
  align-items:stretch
}

.app-shell .settings-control:has(>.input-group-addon)>.form-control{
  flex:1;
  min-width:0;
  border-radius:9px 0 0 9px
}

.app-shell .settings-control>.input-group-addon label{
  display:flex;
  align-items:center;
  gap:6px;
  margin:0;
  font-size:11.5px;
  font-weight:650
}

.app-shell .settings-control>.input-group-addon select{
  border:0;
  background:transparent;
  color:inherit;
  font-size:11.5px
}

/* The browser's own file control has no styling in common with anything else on the page. */

.app-shell .settings-pane input[type=file]:not(.file-upload-input){
  display:block;
  width:100%;
  margin-top:7px;
  padding:5px 7px;
  border:1px solid #dbe4de;
  border-radius:8px;
  background:var(--surface);
  color:var(--text-3);
  font-size:10.5px
}

.app-shell .settings-pane input[type=file]:not(.file-upload-input)::file-selector-button{
  margin-right:8px;
  padding:6px 10px;
  border:0;
  border-radius:6px;
  background:#e8f5ec;
  color:#19733b;
  cursor:pointer;
  font-family:inherit;
  font-size:10.5px;
  font-weight:750
}

.app-shell .settings-pane input[type=file]:not(.file-upload-input)::file-selector-button:hover{
  background:var(--brand-strong)
}

.app-shell .settings-pane .help-block i{
  font-style:normal
}

/* Business locations ----------------------------------------------------- */

.app-shell .business-locations-page{
  max-width:1540px
}

.app-shell .location-directory-overview{
  display:grid;
  grid-template-columns:minmax(330px,1.45fr) repeat(3,minmax(150px,.55fr));
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

.app-shell .location-directory-intro{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:12px;
  padding:15px 18px;
  border-right:1px solid var(--border-2)
}

.app-shell .location-directory-intro>span{
  display:grid;
  width:40px;
  height:40px;
  place-items:center;
  border-radius:11px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .location-directory-intro small,.app-shell .location-directory-intro strong,.app-shell .location-directory-intro p{
  display:block
}

.app-shell .location-directory-intro small{
  color:var(--brand-strong);
  font-size:9.5px;
  font-weight:850;
  letter-spacing:.09em
}

.app-shell .location-directory-intro strong{
  margin-top:2px;
  color:var(--text);
  font-size:14px;
  font-weight:800
}

.app-shell .location-directory-intro p{
  margin:3px 0 0;
  color:var(--text-3);
  font-size:11.5px;
  line-height:1.45
}

.app-shell .location-state-card{
  position:relative;
  display:flex;
  min-width:0;
  align-items:center;
  gap:10px;
  padding:14px 16px;
  border:0;
  border-right:1px solid var(--border-2);
  background:var(--surface);
  color:var(--text-2);
  text-align:left;
  cursor:pointer;
  transition:background .15s ease,color .15s ease,box-shadow .15s ease
}

.app-shell .location-state-card:last-child{
  border-right:0
}

.app-shell .location-state-card:hover{
  background:var(--surface-2);
  color:var(--text)
}

.app-shell .location-state-card.is-active{
  background:var(--surface-2);
  box-shadow:inset 0 -3px var(--brand)
}

.app-shell .location-state-card i{
  display:grid;
  width:34px;
  height:34px;
  flex:none;
  place-items:center;
  border-radius:9px;
  background:var(--surface-3);
  color:var(--text-3);
  font-style:normal
}

.app-shell .location-state-card.is-enabled i{
  background:#e9f7ee;
  color:#238d49
}

.app-shell .location-state-card.is-disabled i{
  background:#fff0ed;
  color:#c45645
}

.app-shell .location-state-card span,.app-shell .location-state-card strong,.app-shell .location-state-card small{
  display:block;
  min-width:0
}

.app-shell .location-state-card strong{
  color:var(--text);
  font-size:16px;
  font-weight:850;
  line-height:1.1
}

.app-shell .location-state-card small{
  margin-top:3px;
  color:var(--text-3);
  font-size:10.5px;
  font-weight:650;
  white-space:nowrap
}

.app-shell .business-location-list-card{
  margin-top:0
}

.app-shell .business-location-table-wrap{
  overflow-x:auto;
  border-radius:0 0 14px 14px
}

.app-shell .business-location-table{
  min-width:1280px
}

.app-shell .business-location-table th{
  white-space:nowrap
}

.app-shell .business-location-table td{
  padding-top:12px!important;
  padding-bottom:12px!important;
  vertical-align:middle!important
}

.app-shell .business-location-table td:nth-child(1){
  min-width:210px
}

.app-shell .business-location-table td:nth-child(2){
  min-width:105px;
  color:var(--text-2);
  font-size:11.5px;
  font-weight:750
}

.app-shell .business-location-table td:nth-child(3){
  min-width:255px;
  white-space:normal
}

.app-shell .business-location-table td:nth-child(4),.app-shell .business-location-table td:nth-child(5){
  min-width:135px
}

.app-shell .business-location-table td:nth-child(6),.app-shell .business-location-table td:nth-child(7){
  min-width:175px;
  white-space:normal
}

.app-shell .business-location-table td:nth-child(8){
  min-width:95px
}

.app-shell .business-location-table td:last-child{
  width:86px
}

.app-shell .business-location-identity{
  display:flex;
  min-width:0;
  align-items:center;
  gap:10px
}

.app-shell .business-location-identity>span{
  display:grid;
  width:34px;
  height:34px;
  flex:none;
  place-items:center;
  border:1px solid color-mix(in srgb,var(--brand) 18%,var(--border));
  border-radius:9px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .business-location-identity strong{
  overflow:hidden;
  color:var(--text);
  font-size:12.5px;
  font-weight:780;
  line-height:1.35;
  text-overflow:ellipsis
}

.app-shell .business-location-address{
  display:flex;
  min-width:0;
  flex-direction:column;
  gap:3px
}

.app-shell .business-location-address strong{
  color:var(--text-2);
  font-size:11.5px;
  font-weight:650;
  line-height:1.4
}

.app-shell .business-location-address small{
  color:var(--text-3);
  font-size:10.5px;
  line-height:1.35
}

.app-shell .business-location-status{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 8px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--surface-2);
  color:var(--text-3);
  font-size:10.5px;
  font-weight:750;
  white-space:nowrap
}

.app-shell .business-location-status i{
  width:6px;
  height:6px;
  flex:none;
  border-radius:50%;
  background:currentColor
}

.app-shell .business-location-status.is-active{
  border-color:#cde6d5;
  background:#f1faf4;
  color:#258148
}

.app-shell .business-location-status.is-inactive{
  border-color:#ecd9d4;
  background:#fff6f3;
  color:#b85747
}

.app-shell .business-location-row-actions{
  justify-content:flex-end
}

.app-shell .business-location-row-actions .act{
  width:32px;
  height:32px
}

.app-shell .business-location-action-menu{
  min-width:196px
}

.app-shell .business-location-action-menu .table-action-icon{
  width:16px;
  height:16px;
  flex:0 0 16px
}

.app-shell .business-location-action-menu>li>button>*{
  pointer-events:none
}

@media (max-width:1050px){
  .app-shell .location-directory-overview{
    grid-template-columns:1fr repeat(3,minmax(135px,.5fr))
  }

  .app-shell .location-directory-intro p{
    display:none
  }
}

@media (max-width:760px){
  .app-shell .location-directory-overview{
    grid-template-columns:repeat(3,1fr)
  }

  .app-shell .location-directory-intro{
    grid-column:1/-1;
    border-right:0;
    border-bottom:1px solid var(--border-2)
  }

  .app-shell .location-state-card{
    justify-content:center;
    padding:12px 9px
  }

  .app-shell .location-state-card i{
    display:none
  }

  .app-shell .location-state-card span{
    text-align:center
  }

  .app-shell .business-location-table{
    min-width:1180px
  }
}

/* Business location form ------------------------------------------------ */

.app-shell .modal-dialog.business-location-form-dialog{
  width:min(1040px,calc(100vw - 32px));
  max-width:none;
  margin:16px auto
}

.app-shell .business-location-form-modal{
  display:block;
  height:auto;
  max-height:none
}

.app-shell .business-location-form{
  display:block
}

.app-shell .business-location-form-head{
  padding:15px 18px
}

.app-shell .business-location-form-heading{
  display:flex;
  min-width:0;
  align-items:center;
  gap:12px
}

.app-shell .business-location-form-heading>span{
  display:grid;
  width:40px;
  height:40px;
  flex:none;
  place-items:center;
  border-radius:11px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .business-location-form-heading small{
  display:block;
  color:var(--brand-strong);
  font-size:9px;
  font-weight:850;
  letter-spacing:.1em
}

.app-shell .business-location-form-heading h4{
  margin-top:1px;
  font-size:16px
}

.app-shell .business-location-form-heading p{
  margin:2px 0 0;
  color:var(--text-3);
  font-size:11px;
  line-height:1.4
}

.app-shell .business-location-form-body{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:12px;
  padding:14px 16px 22px;
  overflow:visible;
  background:var(--surface-2)
}

.app-shell .business-location-form-body>*{
  flex:0 0 auto
}

.app-shell .business-location-form-section,.app-shell .business-location-optional-section{
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:13px;
  background:var(--surface);
  box-shadow:0 2px 8px rgba(20,38,28,.025)
}

.app-shell .business-location-form-section{
  padding:15px 16px 16px
}

.app-shell .business-location-section-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:13px
}

.app-shell .business-location-section-head>span{
  display:grid;
  width:32px;
  height:32px;
  flex:none;
  place-items:center;
  border-radius:9px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .business-location-section-head>span.is-blue{
  background:#eaf3ff;
  color:#3979bc
}

.app-shell .business-location-section-head>span.is-violet{
  background:#f2edff;
  color:#7554ba
}

.app-shell .business-location-section-head>span.is-amber{
  background:#fff3dd;
  color:#bc7925
}

.app-shell .business-location-section-head>span.is-emerald{
  background:#e9f7ee;
  color:#258a49
}

.app-shell .business-location-section-head h5{
  margin:0;
  color:var(--text);
  font-size:13px;
  font-weight:800
}

.app-shell .business-location-section-head p{
  margin:2px 0 0;
  color:var(--text-3);
  font-size:10.5px;
  line-height:1.4
}

.app-shell .business-location-section-head>i{
  margin-left:auto;
  color:var(--text-3)
}

.app-shell .business-location-form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px 14px
}

.app-shell .business-location-form-grid.is-three{
  grid-template-columns:repeat(3,minmax(0,1fr))
}

.app-shell .business-location-form-grid .is-wide{
  grid-column:1/-1
}

.app-shell .business-location-form-grid.is-three .is-wide-two{
  grid-column:span 2
}

.app-shell .location-form-field{
  min-width:0
}

.app-shell .location-form-field>label{
  display:inline-block;
  margin:0 0 6px;
  color:var(--text-2);
  font-size:11px;
  font-weight:750;
  line-height:1.35
}

.app-shell .location-form-field>label em{
  color:var(--danger);
  font-style:normal
}

.app-shell .location-form-field>label+i{
  margin-left:3px;
  color:var(--text-3)
}

.app-shell .location-form-field>.form-control,.app-shell .location-form-field>.select2-container .select2-selection--single{
  height:40px
}

.app-shell .location-form-field>small{
  display:block;
  margin-top:5px;
  color:var(--text-3);
  font-size:9.5px;
  line-height:1.4
}

.app-shell .business-location-optional-section>summary{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 15px;
  cursor:pointer;
  list-style:none;
  transition:background .15s ease
}

.app-shell .business-location-optional-section>summary::-webkit-details-marker{
  display:none
}

.app-shell .business-location-optional-section>summary:hover{
  background:var(--surface-2)
}

.app-shell .business-location-optional-icon{
  display:grid;
  width:32px;
  height:32px;
  flex:none;
  place-items:center;
  border-radius:9px;
  background:#e9f4ff;
  color:#3f80bd
}

.app-shell .business-location-optional-icon.is-slate{
  background:var(--surface-3);
  color:var(--text-2)
}

.app-shell .business-location-optional-section>summary>span:nth-child(2){
  display:grid;
  min-width:0;
  gap:2px
}

.app-shell .business-location-optional-section>summary strong{
  color:var(--text);
  font-size:12px;
  font-weight:800
}

.app-shell .business-location-optional-section>summary small{
  color:var(--text-3);
  font-size:10px
}

.app-shell .business-location-optional-chevron{
  margin-left:auto;
  color:var(--text-3);
  transition:transform .18s ease
}

.app-shell .business-location-optional-section[open] .business-location-optional-chevron{
  transform:rotate(180deg)
}

.app-shell .business-location-optional-body{
  padding:14px 15px 16px;
  border-top:1px solid var(--border-2);
  background:color-mix(in srgb,var(--surface-2) 60%,var(--surface))
}

.app-shell .business-location-integration-note{
  grid-column:1/-1;
  display:flex;
  align-items:center;
  gap:8px;
  padding:9px 11px;
  border:1px solid #d8e8de;
  border-radius:9px;
  background:#f3faf5;
  color:#467055;
  font-size:10.5px;
  line-height:1.45
}

.app-shell .business-location-integration-note>svg{
  flex:none;
  color:var(--brand)
}

.app-shell .business-location-integration-note code{
  margin-left:auto;
  padding:3px 6px;
  border:1px solid #d6e4da;
  border-radius:6px;
  background:var(--surface);
  color:var(--text-2);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:9.5px;
  white-space:nowrap
}

.app-shell .business-location-payment-section{
  padding-bottom:0
}

.app-shell .business-location-payment-table{
  margin:0 -16px;
  overflow-x:auto;
  border-top:1px solid var(--border-2)
}

.app-shell .business-location-payment-table .table{
  min-width:560px
}

.app-shell .business-location-payment-table .table>thead>tr>th{
  padding:8px 16px;
  background:var(--surface-2);
  font-size:9.5px
}

.app-shell .business-location-payment-table .table>tbody>tr>td{
  padding:9px 16px
}

.app-shell .business-location-payment-table .table>tbody>tr>td:first-child{
  width:38%
}

.app-shell .business-location-payment-table .table>tbody>tr>td:nth-child(2){
  width:100px
}

.app-shell .business-location-payment-table .table strong{
  color:var(--text-2);
  font-size:11.5px;
  font-weight:700
}

.app-shell .business-location-payment-table .form-control{
  height:34px;
  font-size:11px
}

.app-shell .business-location-form-footer{
  justify-content:space-between;
  padding:11px 18px;
  background:var(--surface)
}

.app-shell .business-location-form-footer>span{
  color:var(--text-3);
  font-size:10.5px;
  font-weight:650
}

.app-shell .business-location-form-footer>span i{
  color:var(--danger);
  font-style:normal
}

.app-shell .business-location-form-footer>div{
  display:flex;
  align-items:center;
  gap:8px
}

.app-shell .business-location-form-footer .btn-ghost,.app-shell .business-location-form-footer .btn-primary{
  height:40px;
  min-width:90px;
  justify-content:center
}

.app-shell .business-location-form-footer .btn-primary{
  min-width:112px
}

@media (max-width:760px){
  .app-shell .modal-dialog.business-location-form-dialog{
    width:calc(100vw - 20px);
    margin:10px auto
  }

  .app-shell .business-location-form-grid,.app-shell .business-location-form-grid.is-three{
    grid-template-columns:1fr
  }

  .app-shell .business-location-form-grid.is-three .is-wide-two{
    grid-column:auto
  }

  .app-shell .business-location-form-head{
    padding:12px 14px
  }

  .app-shell .business-location-form-heading p{
    display:none
  }

  .app-shell .business-location-form-body{
    padding:10px
  }

  .app-shell .business-location-form-section{
    padding:13px
  }

  .app-shell .business-location-integration-note{
    align-items:flex-start;
    flex-wrap:wrap
  }

  .app-shell .business-location-integration-note code{
    width:100%;
    margin-left:0;
    overflow-x:auto
  }

  .app-shell .business-location-form-footer{
    padding:10px 12px
  }

  .app-shell .business-location-form-footer>span{
    display:none
  }

  .app-shell .business-location-form-footer>div{
    width:100%
  }

  .app-shell .business-location-form-footer .btn-ghost,.app-shell .business-location-form-footer .btn-primary{
    flex:1
  }
}

/* Location receipt settings -------------------------------------------- */

.app-shell .location-settings-page{
  max-width:1260px;
  padding-bottom:40px
}

.app-shell .location-settings-context{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

.app-shell .location-settings-context-icon{
  display:grid;
  width:42px;
  height:42px;
  flex:none;
  place-items:center;
  border-radius:12px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .location-settings-context-copy{
  min-width:0
}

.app-shell .location-settings-context-copy>small{
  display:block;
  color:var(--brand-strong);
  font-size:9px;
  font-weight:850;
  letter-spacing:.09em
}

.app-shell .location-settings-context-copy>strong{
  display:block;
  margin-top:2px;
  color:var(--text);
  font-size:14px;
  font-weight:820
}

.app-shell .location-settings-context-copy>p{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:5px 13px;
  margin:4px 0 0;
  color:var(--text-3)
}

.app-shell .location-settings-context-copy>p>span{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:10.5px;
  font-weight:650
}

.app-shell .location-settings-context-mode{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-left:auto;
  padding:7px 10px;
  border:1px solid #d9e9de;
  border-radius:999px;
  background:#f3faf5;
  color:#2b7d47;
  font-size:10.5px;
  font-weight:750;
  white-space:nowrap
}

.app-shell .location-receipt-settings-form{
  margin:0
}

.app-shell .location-settings-workspace{
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:15px;
  background:var(--surface);
  box-shadow:var(--shadow-md)
}

.app-shell .location-settings-workspace-head{
  display:flex;
  align-items:center;
  gap:11px;
  padding:16px 18px;
  border-bottom:1px solid var(--border-2);
  background:linear-gradient(90deg,var(--surface) 0%,var(--surface) 70%,#f2f8f4 100%)
}

.app-shell .location-settings-workspace-head>span:first-child{
  display:grid;
  width:40px;
  height:40px;
  flex:none;
  place-items:center;
  border-radius:11px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .location-settings-workspace-head>div{
  min-width:0
}

.app-shell .location-settings-workspace-head small{
  display:block;
  color:var(--brand-strong);
  font-size:9px;
  font-weight:850;
  letter-spacing:.1em
}

.app-shell .location-settings-workspace-head h2{
  margin:2px 0 0;
  color:var(--text);
  font-size:17px;
  font-weight:830;
  letter-spacing:-.02em
}

.app-shell .location-settings-workspace-head p{
  margin:3px 0 0;
  color:var(--text-3);
  font-size:10.5px
}

.app-shell .location-settings-scope{
  display:inline-flex;
  margin-left:auto;
  padding:6px 9px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--surface);
  color:var(--text-3);
  font-size:9.5px;
  font-weight:750;
  white-space:nowrap
}

.app-shell .location-settings-workspace-body{
  display:grid;
  gap:0;
  padding:0 18px
}

.app-shell .location-settings-group{
  padding:18px 0 20px
}

.app-shell .location-settings-group+.location-settings-group{
  border-top:1px solid var(--border-2)
}

.app-shell .location-settings-group-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:15px
}

.app-shell .location-settings-group-head>span{
  display:grid;
  width:32px;
  height:32px;
  flex:none;
  place-items:center;
  border-radius:9px;
  background:#fff2de;
  color:#b87523
}

.app-shell .location-settings-group-head.is-blue>span{
  background:#eaf3ff;
  color:#3979bc
}

.app-shell .location-settings-group-head h3{
  margin:0;
  color:var(--text);
  font-size:13px;
  font-weight:810
}

.app-shell .location-settings-group-head p{
  margin:2px 0 0;
  color:var(--text-3);
  font-size:10.5px
}

.app-shell .location-settings-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px
}

.app-shell .location-settings-grid.is-three{
  grid-template-columns:repeat(3,minmax(0,1fr))
}

.app-shell .location-settings-field{
  min-width:0;
  padding:12px;
  border:1px solid var(--border);
  border-radius:11px;
  background:var(--surface-2);
  transition:border-color .15s ease,background .15s ease,box-shadow .15s ease
}

.app-shell .location-settings-field:focus-within{
  border-color:color-mix(in srgb,var(--brand) 48%,var(--border));
  background:var(--surface);
  box-shadow:0 0 0 3px rgba(35,151,73,.07)
}

.app-shell .location-settings-field>label{
  display:inline-block;
  margin:0 0 7px;
  color:var(--text-2);
  font-size:11px;
  font-weight:760
}

.app-shell .location-settings-field>label em{
  color:var(--danger);
  font-style:normal
}

.app-shell .location-settings-field>label+i{
  margin-left:3px;
  color:var(--text-3)
}

.app-shell .location-settings-field>.form-control,.app-shell .location-settings-field>.select2-container .select2-selection--single{
  height:40px;
  background:var(--surface)
}

.app-shell .location-settings-field>small{
  display:block;
  margin-top:6px;
  color:var(--text-3);
  font-size:9.5px;
  line-height:1.45
}

.app-shell .location-settings-field.hide{
  display:none!important
}

.app-shell .location-settings-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:13px 18px;
  border-top:1px solid var(--border);
  background:var(--surface-2)
}

.app-shell .location-settings-actions>span{
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:var(--text-3);
  font-size:10.5px;
  font-weight:650
}

.app-shell .location-settings-actions>span svg{
  color:var(--brand)
}

.app-shell .location-settings-actions>div{
  display:flex;
  align-items:center;
  gap:8px
}

.app-shell .location-settings-actions .btn-ghost,.app-shell .location-settings-actions .btn-primary{
  height:40px;
  min-width:94px;
  justify-content:center
}

.app-shell .location-settings-actions .btn-primary{
  min-width:116px
}

@media (max-width:900px){
  .app-shell .location-settings-grid.is-three{
    grid-template-columns:1fr 1fr
  }

  .app-shell .location-settings-grid.is-three>.location-settings-field:last-child{
    grid-column:1/-1
  }
}

@media (max-width:640px){
  .app-shell .location-settings-context{
    align-items:flex-start
  }

  .app-shell .location-settings-context-mode{
    display:none
  }

  .app-shell .location-settings-workspace-head{
    padding:14px
  }

  .app-shell .location-settings-scope{
    display:none
  }

  .app-shell .location-settings-workspace-body{
    padding:0 14px
  }

  .app-shell .location-settings-grid,.app-shell .location-settings-grid.is-three{
    grid-template-columns:1fr
  }

  .app-shell .location-settings-grid.is-three>.location-settings-field:last-child{
    grid-column:auto
  }

  .app-shell .location-settings-actions{
    align-items:stretch;
    flex-direction:column
  }

  .app-shell .location-settings-actions>span{
    justify-content:center
  }

  .app-shell .location-settings-actions>div{
    width:100%
  }

  .app-shell .location-settings-actions .btn-ghost,.app-shell .location-settings-actions .btn-primary{
    flex:1
  }
}

/* Invoice settings ------------------------------------------------------ */

.app-shell .invoice-settings-page{
  max-width:1460px;
  padding-bottom:42px
}

.app-shell .invoice-settings-overview{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

.app-shell .invoice-settings-overview>span{
  display:grid;
  width:42px;
  height:42px;
  flex:none;
  place-items:center;
  border-radius:12px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .invoice-settings-overview>div:nth-child(2){
  min-width:0
}

.app-shell .invoice-settings-overview small{
  display:block;
  color:var(--brand-strong);
  font-size:9px;
  font-weight:850;
  letter-spacing:.1em
}

.app-shell .invoice-settings-overview strong{
  display:block;
  margin-top:2px;
  color:var(--text);
  font-size:14px;
  font-weight:820
}

.app-shell .invoice-settings-overview p{
  margin:3px 0 0;
  color:var(--text-3);
  font-size:10.5px
}

.app-shell .invoice-settings-overview-facts{
  display:flex;
  align-items:center;
  gap:7px;
  margin-left:auto;
  flex-wrap:wrap;
  justify-content:flex-end
}

.app-shell .invoice-settings-overview-facts>span{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:6px 9px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--surface-2);
  color:var(--text-3);
  font-size:10px;
  font-weight:650;
  white-space:nowrap
}

.app-shell .invoice-settings-overview-facts b{
  color:var(--text);
  font-size:11px;
  font-weight:850
}

.app-shell .invoice-settings-overview-facts svg{
  color:var(--brand)
}

.app-shell .invoice-settings-workspace{
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:15px;
  background:var(--surface);
  box-shadow:var(--shadow-md)
}

.app-shell .invoice-settings-tabs{
  display:flex;
  gap:5px;
  padding:6px;
  border-bottom:1px solid var(--border);
  background:var(--surface-2)
}

.app-shell .invoice-settings-tabs>a{
  display:flex;
  min-width:220px;
  align-items:center;
  gap:10px;
  padding:9px 13px;
  border:1px solid transparent;
  border-radius:10px;
  color:var(--text-3);
  text-decoration:none;
  transition:border-color .15s ease,background .15s ease,color .15s ease,box-shadow .15s ease
}

.app-shell .invoice-settings-tabs>a:hover{
  color:var(--text);
  background:color-mix(in srgb,var(--surface) 70%,transparent)
}

.app-shell .invoice-settings-tabs>a.active{
  border-color:var(--border);
  background:var(--surface);
  color:var(--text);
  box-shadow:var(--shadow-sm)
}

.app-shell .invoice-settings-tabs>a>span:first-child{
  display:grid;
  width:30px;
  height:30px;
  flex:none;
  place-items:center;
  border-radius:8px;
  background:var(--surface-3);
  color:var(--text-3)
}

.app-shell .invoice-settings-tabs>a.active>span:first-child{
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .invoice-settings-tabs>a>span:last-child{
  display:grid;
  gap:2px
}

.app-shell .invoice-settings-tabs strong{
  font-size:11.5px;
  font-weight:800
}

.app-shell .invoice-settings-tabs small{
  font-size:9.5px;
  color:var(--text-3)
}

.app-shell .invoice-settings-tab-content{
  padding:0
}

.app-shell .invoice-settings-pane-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:17px 18px;
  border-bottom:1px solid var(--border-2)
}

.app-shell .invoice-settings-pane-head>div{
  min-width:0
}

.app-shell .invoice-settings-pane-head small{
  display:block;
  color:var(--brand-strong);
  font-size:9px;
  font-weight:850;
  letter-spacing:.09em
}

.app-shell .invoice-settings-pane-head h2{
  margin:3px 0 0;
  color:var(--text);
  font-size:15px;
  font-weight:820
}

.app-shell .invoice-settings-pane-head p{
  margin:3px 0 0;
  color:var(--text-3);
  font-size:10.5px
}

.app-shell .invoice-settings-pane-head>.btn-primary{
  flex:none
}

.app-shell .invoice-scheme-list-card{
  border:0;
  border-radius:0;
  box-shadow:none
}

.app-shell .invoice-scheme-list-card>.table-toolbar{
  border-radius:0;
  background:var(--surface)
}

.app-shell .invoice-scheme-list-card .data-table-content{
  border-radius:0
}

.app-shell .invoice-scheme-table-wrap{
  overflow-x:auto
}

.app-shell .invoice-scheme-table{
  min-width:980px
}

.app-shell .invoice-scheme-table td{
  padding-top:12px!important;
  padding-bottom:12px!important;
  vertical-align:middle!important
}

.app-shell .invoice-scheme-table td:nth-child(1){
  min-width:220px
}

.app-shell .invoice-scheme-table td:nth-child(2){
  min-width:110px
}

.app-shell .invoice-scheme-table td:nth-child(3){
  min-width:130px
}

.app-shell .invoice-scheme-table td:nth-child(4),.app-shell .invoice-scheme-table td:nth-child(5),.app-shell .invoice-scheme-table td:nth-child(6){
  font-variant-numeric:tabular-nums
}

.app-shell .invoice-scheme-table td:last-child{
  width:82px
}

.app-shell .invoice-scheme-identity{
  display:flex;
  align-items:center;
  gap:10px
}

.app-shell .invoice-scheme-identity>span{
  display:grid;
  width:32px;
  height:32px;
  flex:none;
  place-items:center;
  border:1px solid color-mix(in srgb,var(--brand) 18%,var(--border));
  border-radius:9px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .invoice-scheme-identity>div{
  display:flex;
  min-width:0;
  align-items:center;
  gap:7px;
  flex-wrap:wrap
}

.app-shell .invoice-scheme-identity strong{
  color:var(--text);
  font-size:12px;
  font-weight:780
}

.app-shell .invoice-default-badge{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:3px 6px;
  border-radius:999px;
  background:#e9f7ee;
  color:#247e45;
  font-size:8.5px;
  font-weight:800;
  text-transform:uppercase
}

.app-shell .invoice-prefix{
  display:inline-flex;
  padding:4px 7px;
  border:1px solid var(--border);
  border-radius:6px;
  background:var(--surface-2);
  color:var(--text-2);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:10.5px;
  font-weight:700
}

.app-shell .invoice-number-type{
  display:inline-flex;
  padding:4px 7px;
  border-radius:7px;
  background:#eef4fb;
  color:#3e6f9d;
  font-size:10.5px;
  font-weight:700
}

.app-shell .invoice-scheme-row-actions{
  justify-content:flex-end
}

.app-shell .invoice-scheme-row-actions .act{
  width:32px;
  height:32px
}

.app-shell .invoice-scheme-action-menu{
  min-width:190px
}

.app-shell .invoice-scheme-action-menu .table-action-icon{
  width:16px;
  height:16px;
  flex:0 0 16px
}

.app-shell .invoice-scheme-action-menu>li>button>*{
  pointer-events:none
}

.app-shell .invoice-scheme-default-state{
  display:flex;
  min-height:35px;
  align-items:center;
  gap:9px;
  padding:8px 10px;
  border-radius:7px;
  background:#f2faf4;
  color:#277f48;
  font-size:12px;
  font-weight:700
}

.app-shell .invoice-layout-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  padding:16px 18px 20px;
  background:var(--surface-2)
}

.app-shell .invoice-layout-card{
  display:flex;
  min-width:0;
  min-height:230px;
  flex-direction:column;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:13px;
  background:var(--surface);
  color:inherit;
  text-decoration:none;
  box-shadow:var(--shadow-sm);
  transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease
}

.app-shell .invoice-layout-card:hover{
  border-color:color-mix(in srgb,var(--brand) 34%,var(--border));
  box-shadow:var(--shadow-md);
  transform:translateY(-2px)
}

.app-shell .invoice-layout-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 15px 8px
}

.app-shell .invoice-layout-card-head>span{
  display:grid;
  width:38px;
  height:38px;
  place-items:center;
  border-radius:10px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .invoice-layout-card-head>b{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:5px 7px;
  border:1px solid #cee5d5;
  border-radius:999px;
  background:#f2faf4;
  color:#267e47;
  font-size:8.5px;
  font-weight:800;
  text-transform:uppercase
}

.app-shell .invoice-layout-card-copy{
  padding:5px 15px 13px
}

.app-shell .invoice-layout-card-copy strong{
  display:block;
  color:var(--text);
  font-size:13px;
  font-weight:800
}

.app-shell .invoice-layout-card-copy small{
  display:block;
  margin-top:3px;
  color:var(--text-3);
  font-size:10px
}

.app-shell .invoice-layout-usage{
  flex:1;
  padding:12px 15px;
  border-top:1px solid var(--border-2);
  background:var(--surface-2)
}

.app-shell .invoice-layout-usage>span{
  display:block;
  margin-bottom:7px;
  color:var(--text-3);
  font-size:8.5px;
  font-weight:850;
  letter-spacing:.07em;
  text-transform:uppercase
}

.app-shell .invoice-layout-usage>small{
  color:var(--text-3);
  font-size:10.5px
}

.app-shell .invoice-layout-usage>div{
  display:flex;
  flex-wrap:wrap;
  gap:5px
}

.app-shell .invoice-layout-usage i{
  display:inline-flex;
  padding:4px 6px;
  border:1px solid var(--border);
  border-radius:6px;
  background:var(--surface);
  color:var(--text-2);
  font-size:9px;
  font-style:normal;
  font-weight:650
}

.app-shell .invoice-layout-card>footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 15px;
  border-top:1px solid var(--border);
  color:var(--brand-strong);
  font-size:10.5px;
  font-weight:750
}

.app-shell .invoice-layout-empty{
  display:flex;
  min-height:300px;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  padding:38px 20px;
  background:var(--surface-2);
  text-align:center
}

.app-shell .invoice-layout-empty>span{
  display:grid;
  width:52px;
  height:52px;
  place-items:center;
  border-radius:14px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .invoice-layout-empty h3{
  margin:12px 0 3px;
  color:var(--text);
  font-size:14px;
  font-weight:800
}

.app-shell .invoice-layout-empty p{
  max-width:420px;
  margin:0 0 14px;
  color:var(--text-3);
  font-size:10.5px;
  line-height:1.5
}

@media (max-width:980px){
  .app-shell .invoice-layout-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

  .app-shell .invoice-settings-overview-facts>span:last-child{
    display:none
  }
}

@media (max-width:640px){
  .app-shell .invoice-settings-overview{
    align-items:flex-start
  }

  .app-shell .invoice-settings-overview-facts{
    display:none
  }

  .app-shell .invoice-settings-tabs>a{
    min-width:0;
    flex:1;
    padding:9px
  }

  .app-shell .invoice-settings-tabs small{
    display:none
  }

  .app-shell .invoice-settings-pane-head{
    align-items:flex-start;
    padding:14px
  }

  .app-shell .invoice-settings-pane-head p{
    display:none
  }

  .app-shell .invoice-layout-grid{
    grid-template-columns:1fr;
    padding:12px
  }

  .app-shell .invoice-layout-card{
    min-height:210px
  }
}

/* Invoice scheme form --------------------------------------------------- */

.app-shell .modal-dialog.invoice-scheme-form-dialog{
  width:min(820px,calc(100vw - 32px));
  max-width:none;
  margin:20px auto
}

.app-shell .invoice-scheme-form-modal{
  display:block;
  height:auto;
  max-height:none
}

.app-shell .invoice-scheme-form{
  display:block
}

.app-shell .invoice-scheme-form-head{
  padding:15px 18px
}

.app-shell .invoice-scheme-form-heading{
  display:flex;
  min-width:0;
  align-items:center;
  gap:12px
}

.app-shell .invoice-scheme-form-heading>span{
  display:grid;
  width:40px;
  height:40px;
  flex:none;
  place-items:center;
  border-radius:11px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .invoice-scheme-form-heading small{
  display:block;
  color:var(--brand-strong);
  font-size:9px;
  font-weight:850;
  letter-spacing:.1em
}

.app-shell .invoice-scheme-form-heading h4{
  margin-top:1px;
  font-size:16px
}

.app-shell .invoice-scheme-form-heading p{
  margin:2px 0 0;
  color:var(--text-3);
  font-size:10.5px
}

.app-shell .invoice-scheme-form-body{
  display:grid;
  gap:12px;
  padding:14px;
  background:var(--surface-2)
}

.app-shell .invoice-scheme-pattern-section,.app-shell .invoice-scheme-config-section{
  padding:15px;
  border:1px solid var(--border);
  border-radius:13px;
  background:var(--surface);
  box-shadow:0 2px 8px rgba(20,38,28,.025)
}

.app-shell .invoice-scheme-section-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:13px
}

.app-shell .invoice-scheme-section-head>span{
  display:grid;
  width:32px;
  height:32px;
  flex:none;
  place-items:center;
  border-radius:9px;
  background:#fff2de;
  color:#b87523
}

.app-shell .invoice-scheme-section-head.is-blue>span{
  background:#eaf3ff;
  color:#3979bc
}

.app-shell .invoice-scheme-section-head h5{
  margin:0;
  color:var(--text);
  font-size:12.5px;
  font-weight:810
}

.app-shell .invoice-scheme-section-head p{
  margin:2px 0 0;
  color:var(--text-3);
  font-size:10px
}

.app-shell .invoice-scheme-pattern-layout{
  display:grid;
  grid-template-columns:minmax(0,1.65fr) minmax(210px,.75fr);
  gap:12px
}

.app-shell .invoice-scheme-patterns{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px
}

.app-shell .invoice-scheme-patterns .option-div{
  position:relative;
  min-width:0;
  padding:12px 13px;
  border:1px solid var(--border);
  border-radius:11px;
  background:var(--surface-2);
  color:var(--text-2);
  cursor:pointer;
  transition:border-color .15s ease,background .15s ease,box-shadow .15s ease,transform .15s ease
}

.app-shell .invoice-scheme-patterns .option-div:hover{
  border-color:color-mix(in srgb,var(--brand) 38%,var(--border));
  background:var(--surface);
  transform:translateY(-1px)
}

.app-shell .invoice-scheme-patterns .option-div.active{
  border-color:color-mix(in srgb,var(--brand) 55%,var(--border));
  background:#f1faf4;
  box-shadow:0 0 0 3px rgba(34,145,69,.07)
}

.app-shell .invoice-scheme-patterns .option-div>input,.app-shell .invoice-scheme-patterns .option-div>.iradio_square-blue{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  overflow:hidden;
  opacity:0;
  pointer-events:none
}

.app-shell .invoice-pattern-check{
  position:absolute;
  top:10px;
  right:10px;
  display:grid;
  width:20px;
  height:20px;
  place-items:center;
  border:1px solid var(--border);
  border-radius:50%;
  background:var(--surface);
  color:transparent;
  opacity:1!important
}

.app-shell .invoice-scheme-patterns .option-div.active .invoice-pattern-check{
  border-color:var(--brand);
  background:var(--brand);
  color:#fff
}

.app-shell .invoice-scheme-patterns .option-div>small{
  display:block;
  color:var(--text-3);
  font-size:8.5px;
  font-weight:850;
  letter-spacing:.08em
}

.app-shell .invoice-scheme-patterns .option-div>strong{
  display:block;
  margin-top:7px;
  color:var(--text);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:15px;
  font-weight:800;
  letter-spacing:.03em
}

.app-shell .invoice-scheme-patterns .option-div>p{
  margin:7px 24px 0 0;
  color:var(--text-3);
  font-size:9.5px;
  line-height:1.45
}

.app-shell .invoice-scheme-preview{
  display:flex;
  min-width:0;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  padding:14px;
  border-radius:11px;
  background:linear-gradient(145deg,#183d27,#225735);
  color:#fff;
  text-align:center;
  box-shadow:0 9px 22px rgba(24,61,39,.16)
}

.app-shell .invoice-scheme-preview>span{
  display:grid;
  width:30px;
  height:30px;
  place-items:center;
  border-radius:9px;
  background:rgba(255,255,255,.11);
  color:#bce4c7
}

.app-shell .invoice-scheme-preview>small{
  margin-top:8px;
  color:#a9cbb3;
  font-size:8.5px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase
}

.app-shell .invoice-scheme-preview>strong{
  margin-top:4px;
  overflow-wrap:anywhere;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:19px;
  font-weight:800;
  letter-spacing:.04em
}

.app-shell .invoice-scheme-preview>p{
  margin:6px 0 0;
  color:#a9cbb3;
  font-size:9px;
  line-height:1.45
}

.app-shell .invoice-scheme-form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px
}

.app-shell .invoice-scheme-form-grid.is-three{
  grid-template-columns:repeat(3,minmax(0,1fr))
}

.app-shell .invoice-scheme-sequence-grid{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid var(--border-2)
}

.app-shell .invoice-scheme-field{
  min-width:0
}

.app-shell .invoice-scheme-field>label{
  display:inline-block;
  margin:0 0 6px;
  color:var(--text-2);
  font-size:10.5px;
  font-weight:760
}

.app-shell .invoice-scheme-field>label em{
  color:var(--danger);
  font-style:normal
}

.app-shell .invoice-scheme-field>label+i{
  margin-left:3px;
  color:var(--text-3)
}

.app-shell .invoice-scheme-field>.form-control,.app-shell .invoice-scheme-field>.select2-container .select2-selection--single{
  height:40px
}

.app-shell .invoice-scheme-field>small{
  display:block;
  margin-top:5px;
  color:var(--text-3);
  font-size:9px;
  line-height:1.4
}

.app-shell .invoice-scheme-default-toggle{
  display:flex;
  min-width:0;
  align-items:center;
  gap:9px;
  margin:0;
  padding:10px 11px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface-2);
  cursor:pointer;
  transition:border-color .15s ease,background .15s ease
}

.app-shell .invoice-scheme-default-toggle:hover,.app-shell .invoice-scheme-default-toggle:has(input:checked),.app-shell .invoice-scheme-default-toggle:has(.checked){
  border-color:#bdd9c5;
  background:#f1faf4
}

.app-shell .invoice-scheme-default-toggle>span:nth-of-type(1){
  display:grid;
  width:30px;
  height:30px;
  flex:none;
  place-items:center;
  border-radius:8px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .invoice-scheme-default-toggle>span:last-child{
  display:grid;
  min-width:0;
  gap:2px
}

.app-shell .invoice-scheme-default-toggle strong{
  color:var(--text-2);
  font-size:10.5px;
  font-weight:770
}

.app-shell .invoice-scheme-default-toggle small{
  color:var(--text-3);
  font-size:8.5px;
  line-height:1.35
}

.app-shell .invoice-scheme-form-footer{
  justify-content:space-between;
  padding:11px 18px;
  background:var(--surface)
}

.app-shell .invoice-scheme-form-footer>span{
  color:var(--text-3);
  font-size:10px;
  font-weight:650
}

.app-shell .invoice-scheme-form-footer>span i{
  color:var(--danger);
  font-style:normal
}

.app-shell .invoice-scheme-form-footer>div{
  display:flex;
  align-items:center;
  gap:8px
}

.app-shell .invoice-scheme-form-footer .btn-ghost,.app-shell .invoice-scheme-form-footer .btn-primary{
  height:40px;
  min-width:90px;
  justify-content:center
}

.app-shell .invoice-scheme-form-footer .btn-primary{
  min-width:110px
}

@media (max-width:680px){
  .app-shell .modal-dialog.invoice-scheme-form-dialog{
    width:calc(100vw - 20px);
    margin:10px auto
  }

  .app-shell .invoice-scheme-form-heading p{
    display:none
  }

  .app-shell .invoice-scheme-pattern-layout,.app-shell .invoice-scheme-form-grid,.app-shell .invoice-scheme-form-grid.is-three{
    grid-template-columns:1fr
  }

  .app-shell .invoice-scheme-form-body{
    padding:10px
  }

  .app-shell .invoice-scheme-pattern-section,.app-shell .invoice-scheme-config-section{
    padding:13px
  }

  .app-shell .invoice-scheme-form-footer>span{
    display:none
  }

  .app-shell .invoice-scheme-form-footer>div{
    width:100%
  }

  .app-shell .invoice-scheme-form-footer .btn-ghost,.app-shell .invoice-scheme-form-footer .btn-primary{
    flex:1
  }
}

/* Invoice layout editor ------------------------------------------------ */

.app-shell .invoice-layout-editor-page{
  max-width:1480px
}

.app-shell .invoice-layout-editor-intro{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
  padding:14px 16px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

.app-shell .invoice-layout-editor-intro>span{
  display:grid;
  width:40px;
  height:40px;
  flex:none;
  place-items:center;
  border-radius:11px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .invoice-layout-editor-intro>div{
  min-width:0;
  flex:1
}

.app-shell .invoice-layout-editor-intro small{
  display:block;
  color:var(--brand-strong);
  font-size:8.5px;
  font-weight:850;
  letter-spacing:.09em
}

.app-shell .invoice-layout-editor-intro strong{
  display:block;
  margin-top:2px;
  color:var(--text);
  font-size:13px;
  font-weight:810
}

.app-shell .invoice-layout-editor-intro p{
  margin:2px 0 0;
  color:var(--text-3);
  font-size:10px;
  line-height:1.45
}

.app-shell .invoice-layout-editor-intro>b{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:6px 9px;
  border:1px solid #cde5d4;
  border-radius:999px;
  background:#f1faf4;
  color:#267f47;
  font-size:9px;
  font-weight:800;
  text-transform:uppercase
}

.app-shell .invoice-layout-editor-intro .btn-ghost{
  height:38px;
  flex:none;
  padding:0 13px
}

.app-shell .invoice-layout-editor-form{
  display:grid;
  gap:14px
}

.app-shell .invoice-layout-editor-form>.box,.app-shell .invoice-layout-editor-form>.box-solid{
  margin:0;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

.app-shell .invoice-layout-editor-form>.box>.box-body,.app-shell .invoice-layout-editor-form>.box-solid>.box-body{
  padding:18px
}

.app-shell .invoice-layout-section-head{
  display:flex;
  align-items:center;
  gap:11px;
  padding:14px 18px;
  border-bottom:1px solid var(--border-2);
  background:linear-gradient(90deg,#f8fcf9,var(--surface))
}

.app-shell .invoice-layout-section-head>span{
  display:grid;
  width:34px;
  height:34px;
  flex:none;
  place-items:center;
  border-radius:9px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .invoice-layout-section-head.is-blue>span{
  background:#eaf3ff;
  color:#3979bc
}

.app-shell .invoice-layout-section-head.is-violet>span{
  background:#f2edff;
  color:#7554ba
}

.app-shell .invoice-layout-section-head.is-amber>span{
  background:#fff3dd;
  color:#b97724
}

.app-shell .invoice-layout-section-head.is-emerald>span{
  background:#e9f7ee;
  color:#258a49
}

.app-shell .invoice-layout-section-head small{
  display:block;
  color:var(--text-3);
  font-size:9px;
  font-weight:850;
  letter-spacing:.09em
}

.app-shell .invoice-layout-section-head h2{
  margin:1px 0 0;
  color:var(--text);
  font-size:14px;
  font-weight:820;
  line-height:1.25
}

.app-shell .invoice-layout-section-head p{
  margin:2px 0 0;
  color:var(--text-3);
  font-size:10.5px;
  line-height:1.4
}

.app-shell .invoice-layout-editor-form>.box>.box-header,.app-shell .invoice-layout-editor-form>.box-solid>.box-header{
  padding:14px 18px;
  border-bottom:1px solid var(--border-2);
  background:linear-gradient(90deg,#f8fcf9,var(--surface))
}

.app-shell .invoice-layout-editor-form>.box>.box-header .box-title,.app-shell .invoice-layout-editor-form>.box-solid>.box-header .box-title{
  margin:0;
  color:var(--text);
  font-size:13px;
  font-weight:810
}

.app-shell .invoice-layout-editor-form .row{
  margin-right:-7px;
  margin-left:-7px
}

.app-shell .invoice-layout-editor-form [class*="col-"]{
  padding-right:7px;
  padding-left:7px
}

.app-shell .invoice-layout-editor-form .form-group{
  margin-bottom:14px
}

.app-shell .invoice-layout-editor-form .form-group>label,.app-shell .invoice-layout-editor-form .form-group>label+ i{
  color:var(--text-2);
  font-size:12px;
  font-weight:750
}

.app-shell .invoice-layout-editor-form .form-control{
  height:40px;
  border-color:var(--border);
  border-radius:8px;
  background:var(--surface-2);
  box-shadow:none;
  color:var(--text);
  font-size:12.5px;
  transition:border-color .15s ease,box-shadow .15s ease,background .15s ease
}

.app-shell .invoice-layout-editor-form textarea.form-control{
  height:auto;
  min-height:84px;
  padding-top:10px;
  line-height:1.5
}

.app-shell .invoice-layout-editor-form .form-control:focus{
  border-color:color-mix(in srgb,var(--brand) 55%,var(--border));
  background:var(--surface);
  box-shadow:0 0 0 3px rgba(34,145,69,.08)
}

.app-shell .invoice-layout-editor-form .help-block{
  margin:5px 0 0;
  color:var(--text-3);
  font-size:10.5px;
  font-style:normal;
  line-height:1.45
}

.app-shell .invoice-layout-editor-form input[type="file"]{
  display:block;
  width:100%;
  min-height:40px;
  padding:7px 9px;
  border:1px dashed color-mix(in srgb,var(--brand) 28%,var(--border));
  border-radius:9px;
  background:#f8fcf9;
  color:var(--text-2);
  font-size:11.5px
}

.app-shell .invoice-layout-editor-form input[type="file"]::file-selector-button{
  margin:-4px 9px -4px -5px;
  padding:7px 10px;
  border:0;
  border-radius:6px;
  background:var(--brand-weak);
  color:var(--brand-strong);
  font-size:11px;
  font-weight:750;
  cursor:pointer
}

.app-shell .invoice-layout-editor-form .checkbox{
  margin:0 0 12px
}

.app-shell .invoice-layout-editor-form .checkbox>label{
  display:flex;
  min-height:40px;
  align-items:center;
  gap:8px;
  padding:9px 10px;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface-2);
  color:var(--text-2);
  font-size:11.5px;
  font-weight:680;
  line-height:1.35;
  cursor:pointer;
  transition:border-color .15s ease,background .15s ease
}

.app-shell .invoice-layout-editor-form .checkbox>label:hover{
  border-color:color-mix(in srgb,var(--brand) 36%,var(--border));
  background:#f8fcf9
}

.app-shell .invoice-layout-editor-form .checkbox>label>.icheckbox_square-blue{
  flex:none;
  margin:0
}

.app-shell .invoice-layout-editor-form h4{
  margin:8px 0 12px;
  padding-bottom:7px;
  border-bottom:1px solid var(--border-2);
  color:var(--text);
  font-size:11.5px;
  font-weight:800
}

.app-shell .invoice-layout-editor-form hr{
  margin:10px 0 16px;
  border-color:var(--border-2)
}

.app-shell .invoice-layout-editor-form .mce-tinymce,.app-shell .invoice-layout-editor-form .tox-tinymce{
  overflow:hidden;
  border:1px solid var(--border)!important;
  border-radius:10px!important;
  box-shadow:none!important
}

.app-shell .invoice-layout-editor-form .select2-container .select2-selection--single{
  height:40px;
  border-color:var(--border);
  border-radius:8px;
  background:var(--surface-2)
}

.app-shell .invoice-layout-editor-form .select2-container--default .select2-selection--single .select2-selection__rendered{
  line-height:38px
}

.app-shell .invoice-layout-editor-form .select2-container--default .select2-selection--single .select2-selection__arrow{
  height:38px
}

.app-shell .invoice-layout-editor-form #columnize-taxes{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  margin:0 0 14px
}

.app-shell .invoice-layout-editor-form #columnize-taxes.hide{
  display:none
}

.app-shell .invoice-layout-editor-form #columnize-taxes>[class*="col-"]{
  width:auto;
  padding:0
}

.app-shell .invoice-layout-editor-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 16px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

.app-shell .invoice-layout-editor-actions>span{
  display:flex;
  align-items:center;
  gap:7px;
  color:var(--text-3);
  font-size:10px
}

.app-shell .invoice-layout-editor-actions>span svg{
  color:var(--brand-strong)
}

.app-shell .invoice-layout-editor-actions>div{
  display:flex;
  align-items:center;
  gap:8px
}

.app-shell .invoice-layout-editor-actions .btn-ghost,.app-shell .invoice-layout-editor-actions .btn-primary{
  height:42px;
  min-width:96px;
  justify-content:center
}

@media (max-width:760px){
  .app-shell .invoice-layout-editor-intro{
    align-items:flex-start;
    flex-wrap:wrap
  }

  .app-shell .invoice-layout-editor-intro>div{
    width:calc(100% - 54px);
    flex:none
  }

  .app-shell .invoice-layout-editor-intro .btn-ghost{
    margin-left:52px
  }

  .app-shell .invoice-layout-section-head p{
    display:none
  }

  .app-shell .invoice-layout-editor-form>.box>.box-body,.app-shell .invoice-layout-editor-form>.box-solid>.box-body{
    padding:14px
  }

  .app-shell .invoice-layout-editor-form #columnize-taxes{
    grid-template-columns:1fr 1fr
  }

  .app-shell .invoice-layout-editor-actions{
    align-items:stretch;
    flex-direction:column
  }

  .app-shell .invoice-layout-editor-actions>span{
    justify-content:center
  }

  .app-shell .invoice-layout-editor-actions>div{
    width:100%
  }

  .app-shell .invoice-layout-editor-actions .btn-ghost,.app-shell .invoice-layout-editor-actions .btn-primary{
    flex:1
  }
}

/* Compact section workspace */

.app-shell .invoice-layout-editor-form.is-sectionized{
  display:grid;
  grid-template-columns:220px minmax(0,1fr);
  align-items:start;
  gap:12px
}

.app-shell .invoice-layout-editor-nav{
  grid-column:1;
  grid-row:1;
  position:sticky;
  top:74px;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:13px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

.app-shell .invoice-layout-editor-nav>header{
  padding:12px 13px;
  border-bottom:1px solid var(--border-2);
  background:var(--surface-2)
}

.app-shell .invoice-layout-editor-nav>header small{
  display:block;
  color:var(--brand-strong);
  font-size:8px;
  font-weight:850;
  letter-spacing:.08em
}

.app-shell .invoice-layout-editor-nav>header strong{
  display:block;
  margin-top:2px;
  color:var(--text);
  font-size:12.5px;
  font-weight:790
}

.app-shell .invoice-layout-editor-nav>[data-layout-sections]{
  display:grid;
  padding:6px
}

.app-shell .invoice-layout-editor-nav button{
  display:flex;
  width:100%;
  min-width:0;
  align-items:center;
  gap:8px;
  padding:7px 8px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:var(--text-3);
  text-align:left;
  cursor:pointer;
  transition:background .14s ease,color .14s ease
}

.app-shell .invoice-layout-editor-nav button:hover{
  background:var(--surface-2);
  color:var(--text)
}

.app-shell .invoice-layout-editor-nav button.is-active{
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .invoice-layout-editor-nav button i{
  display:grid;
  width:22px;
  height:22px;
  flex:none;
  place-items:center;
  border:1px solid var(--border);
  border-radius:6px;
  background:var(--surface);
  color:var(--text-3);
  font-size:10px;
  font-style:normal;
  font-weight:800
}

.app-shell .invoice-layout-editor-nav button.is-active i{
  border-color:color-mix(in srgb,var(--brand) 25%,var(--border));
  color:var(--brand-strong)
}

.app-shell .invoice-layout-editor-nav button span{
  overflow:hidden;
  font-size:11.5px;
  font-weight:700;
  line-height:1.3;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .invoice-layout-editor-form.is-sectionized>.box,.app-shell .invoice-layout-editor-form.is-sectionized>.box-solid{
  grid-column:2;
  grid-row:1;
  display:none;
  min-width:0
}

.app-shell .invoice-layout-editor-form.is-sectionized>.box.is-active,.app-shell .invoice-layout-editor-form.is-sectionized>.box-solid.is-active{
  display:block
}

.app-shell .invoice-layout-editor-form.is-sectionized>.invoice-layout-editor-actions{
  grid-column:2;
  grid-row:2
}

.app-shell .invoice-layout-editor-form.is-sectionized>.box>.box-body,.app-shell .invoice-layout-editor-form.is-sectionized>.box-solid>.box-body{
  padding:13px 14px 5px
}

.app-shell .invoice-layout-editor-form.is-sectionized .invoice-layout-section-head{
  padding:11px 14px
}

.app-shell .invoice-layout-editor-form.is-sectionized .invoice-layout-section-head>span{
  width:30px;
  height:30px
}

.app-shell .invoice-layout-editor-form.is-sectionized .invoice-layout-section-head h2{
  font-size:13.5px
}

.app-shell .invoice-layout-editor-form.is-sectionized .form-group{
  margin-bottom:9px
}

.app-shell .invoice-layout-editor-form.is-sectionized .form-control{
  height:38px;
  font-size:12.5px
}

.app-shell .invoice-layout-editor-form.is-sectionized textarea.form-control{
  height:auto;
  min-height:72px
}

.app-shell .invoice-layout-editor-form.is-sectionized .checkbox{
  margin-bottom:8px
}

.app-shell .invoice-layout-editor-form.is-sectionized .checkbox>label{
  min-height:36px;
  padding:7px 9px;
  font-size:11.5px
}

.app-shell .invoice-layout-editor-form.is-sectionized h4{
  margin:5px 0 9px;
  padding-bottom:5px;
  font-size:12px
}

.app-shell .invoice-layout-editor-form.is-sectionized>.box-solid:not(.box)>div{
  padding:10px!important
}

.app-shell .invoice-layout-editor-form.is-sectionized>.box-solid:not(.box) .box-header{
  margin:-10px -10px 10px;
  padding:11px 14px;
  border-bottom:1px solid var(--border-2);
  background:var(--surface-2)
}

.app-shell .invoice-layout-editor-form.is-sectionized>.box-solid:not(.box) .box-header .box-title{
  font-size:12px;
  font-weight:800
}

.app-shell .invoice-layout-editor-form.is-sectionized>.box-solid:not(.box) .tw-align-middle:has(> [class*="col-"]){
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
  padding:0!important
}

.app-shell .invoice-layout-editor-form.is-sectionized>.box-solid:not(.box) .tw-align-middle:has(> [class*="col-"])>[class*="col-"]{
  width:auto;
  float:none;
  padding:0
}

.app-shell .invoice-layout-editor-form.is-sectionized>.box-solid:not(.box) .tw-align-middle:has(> [class*="col-"])>.clearfix,.app-shell .invoice-layout-editor-form.is-sectionized>.box-solid:not(.box) .tw-align-middle:has(> [class*="col-"])>h4{
  grid-column:1/-1
}

.app-shell .invoice-layout-editor-form.is-sectionized>.box-solid:not(.box) .tw-align-middle>.row{
  grid-column:1/-1;
  margin:0
}

.app-shell .invoice-layout-editor-form.is-sectionized .mce-tinymce,.app-shell .invoice-layout-editor-form.is-sectionized .tox-tinymce{
  min-height:520px;
  max-height:none
}

/* The invoice logo, shown rather than named.

   The row is a thumbnail of what is stored beside the control that replaces it: a file input on
   its own reads "No file chosen" whether the layout has a logo or not, which is the one thing
   this screen has to answer. The picture sits on a chequered ground so a white mark on a white
   card is still visible as a mark. */

.app-shell .invoice-logo-field{
  display:flex;
  gap:12px;
  align-items:center;
  padding:10px;
  border:1px dashed var(--border);
  border-radius:10px;
  background:var(--surface-2)
}

.app-shell .invoice-logo-preview{
  display:grid;
  flex:none;
  width:74px;
  height:74px;
  place-items:center;
  overflow:hidden;
  margin:0;
  padding:5px;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface);
  background-image:linear-gradient(45deg,#eef2ef 25%,transparent 25%,transparent 75%,#eef2ef 75%),linear-gradient(45deg,#eef2ef 25%,transparent 25%,transparent 75%,#eef2ef 75%);
  background-position:0 0,7px 7px;
  background-size:14px 14px
}

.app-shell .invoice-logo-preview img{
  max-width:100%;
  max-height:100%;
  -o-object-fit:contain;
     object-fit:contain
}

.app-shell .invoice-logo-preview span{
  color:var(--text-3);
  font-size:10px;
  font-weight:700;
  text-align:center
}

.app-shell .invoice-logo-body{
  display:grid;
  min-width:0;
  gap:5px
}

.app-shell .invoice-logo-body>strong{
  overflow:hidden;
  color:var(--text);
  font-size:12px;
  font-weight:750;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .invoice-logo-body input[type=file]{
  max-width:100%;
  font-size:11.5px
}

.app-shell .invoice-logo-body .help-block{
  margin:0;
  color:var(--text-3);
  font-size:10.5px;
  line-height:1.45
}

@media (max-width:980px){
  .app-shell .invoice-layout-editor-form.is-sectionized{
    grid-template-columns:185px minmax(0,1fr)
  }

  .app-shell .invoice-layout-editor-nav button span{
    font-size:11px
  }
}

@media (max-width:720px){
  .app-shell .invoice-layout-editor-form.is-sectionized{
    display:block
  }

  .app-shell .invoice-layout-editor-nav{
    position:static;
    margin-bottom:10px
  }

  .app-shell .invoice-layout-editor-nav>header{
    display:none
  }

  .app-shell .invoice-layout-editor-nav>[data-layout-sections]{
    display:flex;
    overflow-x:auto
  }

  .app-shell .invoice-layout-editor-nav button{
    width:auto;
    flex:none
  }

  .app-shell .invoice-layout-editor-nav button span{
    max-width:135px
  }

  .app-shell .invoice-layout-editor-form.is-sectionized>.invoice-layout-editor-actions{
    margin-top:10px
  }

  .app-shell .invoice-layout-editor-form.is-sectionized>.box-solid:not(.box) .tw-align-middle:has(> [class*="col-"]){
    grid-template-columns:1fr 1fr
  }
}

/* The legacy layout fields carry Bootstrap column names, but this page runs inside the
   modern shell. Recreate the intended 12-column relationships explicitly. */

.app-shell .invoice-layout-editor-form.is-sectionized .box-body>.row,.app-shell .invoice-layout-editor-form.is-sectionized .box-body>.box-header+.row{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  -moz-column-gap:12px;
       column-gap:12px;
  margin-right:0;
  margin-left:0
}

.app-shell .invoice-layout-editor-form.is-sectionized .row>[class*="col-"]{
  width:auto!important;
  min-width:0;
  float:none!important;
  padding-right:0;
  padding-left:0
}

.app-shell .invoice-layout-editor-form.is-sectionized .row>.col-sm-12,.app-shell .invoice-layout-editor-form.is-sectionized .row>.col-md-12{
  grid-column:span 12
}

.app-shell .invoice-layout-editor-form.is-sectionized .row>.col-sm-6{
  grid-column:span 6
}

.app-shell .invoice-layout-editor-form.is-sectionized .row>.col-sm-5{
  grid-column:span 5
}

.app-shell .invoice-layout-editor-form.is-sectionized .row>.col-sm-4{
  grid-column:span 4
}

.app-shell .invoice-layout-editor-form.is-sectionized .row>.col-sm-3,.app-shell .invoice-layout-editor-form.is-sectionized .row>.col-md-3{
  grid-column:span 3
}

.app-shell .invoice-layout-editor-form.is-sectionized .row>.clearfix{
  display:none
}

.app-shell .invoice-layout-editor-form.is-sectionized #columnize-taxes>[class*="col-"]{
  grid-column:auto
}

@media (max-width:760px){
  .app-shell .invoice-layout-editor-form.is-sectionized .row>.col-sm-3,.app-shell .invoice-layout-editor-form.is-sectionized .row>.col-sm-4,.app-shell .invoice-layout-editor-form.is-sectionized .row>.col-sm-5,.app-shell .invoice-layout-editor-form.is-sectionized .row>.col-sm-6{
    grid-column:span 6
  }
}

@media (max-width:520px){
  .app-shell .invoice-layout-editor-form.is-sectionized .row>[class*="col-"]{
    grid-column:1/-1!important
  }
}

/* Barcode settings ----------------------------------------------------- */

.app-shell .barcode-settings-page{
  max-width:1480px
}

.app-shell .barcode-settings-overview{
  display:flex;
  min-height:82px;
  align-items:center;
  gap:13px;
  margin-bottom:14px;
  padding:14px 16px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

.app-shell .barcode-settings-overview>span:first-child{
  display:grid;
  width:42px;
  height:42px;
  flex:none;
  place-items:center;
  border-radius:11px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .barcode-settings-overview>div:nth-child(2){
  min-width:0;
  flex:1
}

.app-shell .barcode-settings-overview small{
  display:block;
  color:var(--brand-strong);
  font-size:9px;
  font-weight:850;
  letter-spacing:.09em
}

.app-shell .barcode-settings-overview strong{
  display:block;
  margin-top:2px;
  color:var(--text);
  font-size:14px;
  font-weight:820
}

.app-shell .barcode-settings-overview p{
  margin:2px 0 0;
  color:var(--text-3);
  font-size:10.5px;
  line-height:1.45
}

.app-shell .barcode-settings-facts{
  display:flex;
  align-items:center;
  gap:7px
}

.app-shell .barcode-settings-facts>span{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:7px 9px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--surface-2);
  color:var(--text-3);
  font-size:10px;
  font-weight:700;
  white-space:nowrap
}

.app-shell .barcode-settings-facts b{
  color:var(--text);
  font-size:12px;
  font-weight:850
}

.app-shell .barcode-settings-facts .is-ready{
  border-color:#cee5d5;
  background:#f1faf4;
  color:#267f47
}

.app-shell .barcode-settings-facts .is-attention{
  border-color:#eedeba;
  background:#fff9eb;
  color:#9a6a20
}

.app-shell .barcode-settings-workspace{
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

.app-shell .barcode-settings-list-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 16px;
  border-bottom:1px solid var(--border-2)
}

.app-shell .barcode-settings-list-head small{
  display:block;
  color:var(--brand-strong);
  font-size:8.5px;
  font-weight:850;
  letter-spacing:.08em
}

.app-shell .barcode-settings-list-head h2{
  margin:2px 0 0;
  color:var(--text);
  font-size:14px;
  font-weight:820
}

.app-shell .barcode-settings-list-head p{
  margin:3px 0 0;
  color:var(--text-3);
  font-size:10px;
  line-height:1.45
}

.app-shell .barcode-settings-list-card{
  margin:0;
  border:0;
  border-radius:0;
  box-shadow:none
}

.app-shell .barcode-settings-list-card .table-toolbar{
  border-top:0
}

.app-shell .barcode-settings-list-card .data-table-content{
  border-radius:0
}

.app-shell .barcode-settings-table-wrap{
  overflow-x:auto
}

.app-shell .barcode-settings-table{
  min-width:760px
}

.app-shell .barcode-settings-table td{
  padding-top:12px!important;
  padding-bottom:12px!important;
  vertical-align:middle!important
}

.app-shell .barcode-settings-table td:nth-child(1){
  width:36%;
  min-width:250px
}

.app-shell .barcode-settings-table td:nth-child(2){
  min-width:320px
}

.app-shell .barcode-settings-table td:last-child{
  width:84px
}

.app-shell .barcode-settings-identity{
  display:flex;
  min-width:0;
  align-items:center;
  gap:10px
}

.app-shell .barcode-settings-identity>span{
  display:grid;
  width:34px;
  height:34px;
  flex:none;
  place-items:center;
  border:1px solid color-mix(in srgb,var(--brand) 18%,var(--border));
  border-radius:9px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .barcode-settings-identity>div{
  display:flex;
  min-width:0;
  align-items:center;
  gap:7px;
  flex-wrap:wrap
}

.app-shell .barcode-settings-identity strong{
  color:var(--text);
  font-size:12.5px;
  font-weight:780
}

.app-shell .barcode-settings-default-badge{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:3px 6px;
  border-radius:999px;
  background:#e9f7ee;
  color:#247e45;
  font-size:8.5px;
  font-weight:800;
  text-transform:uppercase
}

.app-shell .barcode-settings-description{
  color:var(--text-2);
  font-size:11.5px;
  line-height:1.45
}

.app-shell .barcode-settings-row-actions{
  justify-content:flex-end
}

.app-shell .barcode-settings-row-actions .act{
  width:32px;
  height:32px
}

.app-shell .barcode-settings-action-menu{
  min-width:190px
}

.app-shell .barcode-settings-action-menu .table-action-icon{
  width:16px;
  height:16px;
  flex:0 0 16px
}

.app-shell .barcode-settings-action-menu>li>button>*{
  pointer-events:none
}

.app-shell .barcode-settings-default-state{
  display:flex;
  min-height:35px;
  align-items:center;
  gap:9px;
  padding:8px 10px;
  border-radius:7px;
  background:#f2faf4;
  color:#277f48;
  font-size:12px;
  font-weight:700
}

.app-shell .barcode-settings-empty{
  display:flex;
  min-height:220px;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  padding:30px 18px;
  text-align:center
}

.app-shell .barcode-settings-empty>span{
  display:grid;
  width:50px;
  height:50px;
  place-items:center;
  border-radius:14px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .barcode-settings-empty svg{
  width:25px;
  height:25px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round
}

.app-shell .barcode-settings-empty strong{
  margin-top:11px;
  color:var(--text);
  font-size:13px;
  font-weight:800
}

.app-shell .barcode-settings-empty small{
  margin-top:3px;
  color:var(--text-3);
  font-size:10.5px
}

.app-shell .barcode-settings-table td.dataTables_empty{
  padding:0!important
}

@media (max-width:720px){
  .app-shell .barcode-settings-overview{
    align-items:flex-start;
    flex-wrap:wrap
  }

  .app-shell .barcode-settings-overview>div:nth-child(2){
    width:calc(100% - 56px);
    flex:none
  }

  .app-shell .barcode-settings-overview p{
    display:none
  }

  .app-shell .barcode-settings-facts{
    width:100%;
    padding-left:55px
  }

  .app-shell .barcode-settings-list-head p{
    display:none
  }
}

/* Barcode sticker setting form ---------------------------------------- */

.app-shell .barcode-setting-form-page{
  max-width:1480px
}

.app-shell .barcode-setting-form{
  display:grid;
  gap:12px
}

.app-shell .barcode-form-section{
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

.app-shell .barcode-form-section-head{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 15px;
  border-bottom:1px solid var(--border-2);
  background:linear-gradient(90deg,#f8fcf9,var(--surface))
}

.app-shell .barcode-form-section-head>span{
  display:grid;
  width:34px;
  height:34px;
  flex:none;
  place-items:center;
  border-radius:9px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .barcode-form-section-head.is-blue>span{
  background:#eaf3ff;
  color:#3979bc
}

.app-shell .barcode-form-section-head.is-violet>span{
  background:#f2edff;
  color:#7554ba
}

.app-shell .barcode-form-section-head>div{
  min-width:0;
  flex:1
}

.app-shell .barcode-form-section-head small{
  display:block;
  color:var(--brand-strong);
  font-size:9px;
  font-weight:850;
  letter-spacing:.08em
}

.app-shell .barcode-form-section-head h2{
  margin:1px 0 0;
  color:var(--text);
  font-size:14px;
  font-weight:820
}

.app-shell .barcode-form-section-head p{
  margin:2px 0 0;
  color:var(--text-3);
  font-size:10.5px;
  line-height:1.4
}

.app-shell .barcode-form-section-head>b{
  padding:5px 8px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--surface);
  color:var(--text-3);
  font-size:8.5px;
  font-weight:850;
  letter-spacing:.08em
}

.app-shell .barcode-form-identity-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);
  gap:12px;
  padding:14px 15px
}

.app-shell .barcode-form-field{
  min-width:0
}

.app-shell .barcode-form-field>label{
  display:block;
  margin:0 0 6px;
  color:var(--text-2);
  font-size:12px;
  font-weight:750
}

.app-shell .barcode-form-field>label em{
  color:var(--danger);
  font-style:normal
}

.app-shell .barcode-form-field>.form-control,.app-shell .barcode-measure-input>.form-control{
  height:40px;
  border-color:var(--border);
  border-radius:8px;
  background:var(--surface-2);
  box-shadow:none;
  color:var(--text);
  font-size:12.5px
}

.app-shell .barcode-form-field>.form-control:focus,.app-shell .barcode-measure-input>.form-control:focus{
  border-color:color-mix(in srgb,var(--brand) 55%,var(--border));
  background:var(--surface);
  box-shadow:0 0 0 3px rgba(34,145,69,.08)
}

.app-shell .barcode-format-options{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  padding:14px 15px
}

.app-shell .barcode-format-options.is-two{
  grid-template-columns:repeat(2,minmax(0,1fr))
}

.app-shell .barcode-format-option{
  position:relative;
  display:flex;
  min-width:0;
  align-items:center;
  gap:10px;
  margin:0;
  padding:11px 38px 11px 11px;
  border:1px solid var(--border);
  border-radius:11px;
  background:var(--surface-2);
  cursor:pointer;
  transition:border-color .15s ease,background .15s ease,box-shadow .15s ease
}

.app-shell .barcode-format-option:hover{
  border-color:color-mix(in srgb,var(--brand) 34%,var(--border));
  background:var(--surface)
}

.app-shell .barcode-format-option:has(input:checked){
  border-color:#b8d9c1;
  background:#f1faf4;
  box-shadow:0 0 0 3px rgba(34,145,69,.06)
}

.app-shell .barcode-format-option>input{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  opacity:0
}

.app-shell .barcode-format-option::after{
  position:absolute;
  top:50%;
  right:12px;
  display:grid;
  width:19px;
  height:19px;
  place-items:center;
  border:1px solid var(--border);
  border-radius:50%;
  background:var(--surface);
  color:transparent;
  font-size:11px;
  font-weight:900;
  content:'✓';
  transform:translateY(-50%)
}

.app-shell .barcode-format-option:has(input:checked)::after{
  border-color:var(--brand);
  background:var(--brand);
  color:#fff
}

.app-shell .barcode-format-option>span:first-of-type{
  display:grid;
  width:32px;
  height:32px;
  flex:none;
  place-items:center;
  border-radius:9px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .barcode-format-option>span:last-child{
  display:grid;
  min-width:0;
  gap:2px
}

.app-shell .barcode-format-option strong{
  color:var(--text-2);
  font-size:11.5px;
  font-weight:780
}

.app-shell .barcode-format-option small{
  color:var(--text-3);
  font-size:9.5px;
  line-height:1.35
}

.app-shell .barcode-measurement-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  padding:14px 15px
}

.app-shell .barcode-measurement-group{
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:11px;
  background:var(--surface-2)
}

.app-shell .barcode-measurement-group>header{
  display:flex;
  align-items:center;
  gap:9px;
  padding:10px 11px;
  border-bottom:1px solid var(--border);
  background:var(--surface)
}

.app-shell .barcode-measurement-group>header>span{
  display:grid;
  width:30px;
  height:30px;
  flex:none;
  place-items:center;
  border-radius:8px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .barcode-measurement-group>header>span.is-blue{
  background:#eaf3ff;
  color:#3979bc
}

.app-shell .barcode-measurement-group>header>span.is-amber{
  background:#fff3dd;
  color:#b97724
}

.app-shell .barcode-measurement-group>header strong{
  display:block;
  color:var(--text);
  font-size:12.5px;
  font-weight:800
}

.app-shell .barcode-measurement-group>header small{
  display:block;
  margin-top:1px;
  color:var(--text-3);
  font-size:9px
}

.app-shell .barcode-measurement-fields{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  padding:11px
}

.app-shell .barcode-measurement-fields .barcode-form-field.is-wide{
  grid-column:1/-1
}

.app-shell .barcode-measure-input{
  position:relative
}

.app-shell .barcode-measure-input>.form-control{
  width:100%;
  padding-right:36px
}

.app-shell .barcode-measure-input>span{
  position:absolute;
  top:1px;
  right:1px;
  display:grid;
  width:34px;
  height:38px;
  place-items:center;
  border-left:1px solid var(--border);
  border-radius:0 7px 7px 0;
  background:var(--surface);
  color:var(--text-3);
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  pointer-events:none
}

.app-shell .barcode-form-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:13px 15px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

.app-shell .barcode-form-actions>span{
  color:var(--text-3);
  font-size:10.5px;
  font-weight:650
}

.app-shell .barcode-form-actions>span i{
  color:var(--danger);
  font-style:normal
}

.app-shell .barcode-form-actions>div{
  display:flex;
  align-items:center;
  gap:8px
}

.app-shell .barcode-form-actions .btn-ghost,.app-shell .barcode-form-actions .btn-primary{
  height:42px;
  min-width:96px;
  justify-content:center
}

@media (max-width:1050px){
  .app-shell .barcode-measurement-grid{
    grid-template-columns:1fr 1fr
  }

  .app-shell .barcode-measurement-group:last-child{
    grid-column:1/-1
  }

  .app-shell .barcode-format-options{
    grid-template-columns:1fr 1fr
  }

  .app-shell .barcode-format-option:last-child{
    grid-column:1/-1
  }
}

@media (max-width:680px){
  .app-shell .barcode-form-section-head p{
    display:none
  }

  .app-shell .barcode-form-identity-grid,.app-shell .barcode-format-options,.app-shell .barcode-format-options.is-two,.app-shell .barcode-measurement-grid{
    grid-template-columns:1fr
  }

  .app-shell .barcode-format-option:last-child,.app-shell .barcode-measurement-group:last-child{
    grid-column:auto
  }

  .app-shell .barcode-form-actions{
    align-items:stretch;
    flex-direction:column
  }

  .app-shell .barcode-form-actions>span{
    text-align:center
  }

  .app-shell .barcode-form-actions>div{
    width:100%
  }

  .app-shell .barcode-form-actions .btn-ghost,.app-shell .barcode-form-actions .btn-primary{
    flex:1
  }
}

/* Printer settings ----------------------------------------------------- */

.app-shell .printer-settings-page{
  max-width:1480px
}

.app-shell .printer-settings-overview{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  overflow:hidden;
  margin-bottom:14px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

.app-shell .printer-settings-intro{
  display:flex;
  min-width:0;
  align-items:center;
  gap:12px;
  padding:15px 17px
}

.app-shell .printer-settings-intro>span{
  display:grid;
  width:42px;
  height:42px;
  flex:none;
  place-items:center;
  border-radius:11px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .printer-settings-intro>div{
  min-width:0
}

.app-shell .printer-settings-intro small{
  display:block;
  color:var(--brand-strong);
  font-size:9px;
  font-weight:850;
  letter-spacing:.09em
}

.app-shell .printer-settings-intro strong{
  display:block;
  margin-top:2px;
  color:var(--text);
  font-size:14px;
  font-weight:820
}

.app-shell .printer-settings-intro p{
  margin:2px 0 0;
  color:var(--text-3);
  font-size:10.5px;
  line-height:1.45
}

.app-shell .printer-settings-facts{
  display:grid;
  grid-template-columns:repeat(3,minmax(112px,1fr));
  border-left:1px solid var(--border-2)
}

.app-shell .printer-settings-facts>div{
  display:grid;
  grid-template-columns:32px auto;
  grid-template-rows:auto auto;
  align-content:center;
  -moz-column-gap:9px;
       column-gap:9px;
  min-width:112px;
  padding:12px 15px;
  border-right:1px solid var(--border-2)
}

.app-shell .printer-settings-facts>div:last-child{
  border-right:0
}

.app-shell .printer-settings-facts span{
  display:grid;
  grid-row:1/3;
  width:32px;
  height:32px;
  place-items:center;
  border-radius:9px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .printer-settings-facts span.is-blue{
  background:#eaf3ff;
  color:#3979bc
}

.app-shell .printer-settings-facts span.is-violet{
  background:#f2edff;
  color:#7554ba
}

.app-shell .printer-settings-facts b{
  align-self:end;
  color:var(--text);
  font-size:15px;
  font-weight:850;
  line-height:1.1
}

.app-shell .printer-settings-facts small{
  align-self:start;
  margin-top:2px;
  color:var(--text-3);
  font-size:9.5px;
  font-weight:650;
  white-space:nowrap
}

.app-shell .printer-settings-workspace{
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

.app-shell .printer-settings-list-head{
  padding:14px 16px;
  border-bottom:1px solid var(--border-2)
}

.app-shell .printer-settings-list-head small{
  display:block;
  color:var(--brand-strong);
  font-size:8.5px;
  font-weight:850;
  letter-spacing:.08em
}

.app-shell .printer-settings-list-head h2{
  margin:2px 0 0;
  color:var(--text);
  font-size:14px;
  font-weight:820
}

.app-shell .printer-settings-list-head p{
  margin:3px 0 0;
  color:var(--text-3);
  font-size:10px;
  line-height:1.45
}

.app-shell .printer-settings-list-card{
  margin:0;
  border:0;
  border-radius:0;
  box-shadow:none
}

.app-shell .printer-settings-list-card .table-toolbar{
  border-top:0
}

.app-shell .printer-settings-list-card .data-table-content{
  border-radius:0
}

.app-shell .printer-settings-table-wrap{
  overflow-x:auto
}

.app-shell .printer-settings-table{
  min-width:970px
}

.app-shell .printer-settings-table td{
  padding-top:11px!important;
  padding-bottom:11px!important;
  vertical-align:middle!important
}

.app-shell .printer-settings-table td:nth-child(1){
  width:25%;
  min-width:220px
}

.app-shell .printer-settings-table td:nth-child(2){
  width:130px
}

.app-shell .printer-settings-table td:nth-child(3){
  min-width:145px
}

.app-shell .printer-settings-table td:nth-child(4){
  width:125px
}

.app-shell .printer-settings-table td:nth-child(5){
  min-width:240px
}

.app-shell .printer-settings-table td:last-child{
  width:84px
}

.app-shell .printer-settings-identity,.app-shell .printer-settings-endpoint{
  display:flex;
  min-width:0;
  align-items:center;
  gap:10px
}

.app-shell .printer-settings-identity>span,.app-shell .printer-settings-endpoint>span{
  display:grid;
  width:34px;
  height:34px;
  flex:none;
  place-items:center;
  border:1px solid color-mix(in srgb,var(--brand) 18%,var(--border));
  border-radius:9px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .printer-settings-identity>div,.app-shell .printer-settings-endpoint>div{
  min-width:0
}

.app-shell .printer-settings-identity strong,.app-shell .printer-settings-endpoint strong{
  display:block;
  overflow:hidden;
  color:var(--text);
  font-size:12px;
  font-weight:780;
  line-height:1.3;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .printer-settings-identity small,.app-shell .printer-settings-endpoint small{
  display:block;
  margin-top:2px;
  color:var(--text-3);
  font-size:9.5px
}

.app-shell .printer-settings-endpoint>span{
  border-color:#dce8f7;
  background:#edf5ff;
  color:#3979bc
}

.app-shell .printer-settings-connection{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 8px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--surface-2);
  color:var(--text-2);
  font-size:10.5px;
  font-weight:750;
  white-space:nowrap
}

.app-shell .printer-settings-connection i{
  width:6px;
  height:6px;
  flex:none;
  border-radius:50%;
  background:currentColor
}

.app-shell .printer-settings-connection.is-network{
  border-color:#cce1f5;
  background:#f1f7fe;
  color:#3476b6
}

.app-shell .printer-settings-connection.is-windows{
  border-color:#d6e2f5;
  background:#f3f7fd;
  color:#496fa5
}

.app-shell .printer-settings-connection.is-linux{
  border-color:#eadfc9;
  background:#fff9ee;
  color:#9a702f
}

.app-shell .printer-settings-profile{
  display:inline-flex;
  padding:5px 8px;
  border-radius:7px;
  background:var(--surface-3);
  color:var(--text-2);
  font-size:10.5px;
  font-weight:700;
  white-space:nowrap
}

.app-shell .printer-settings-characters{
  display:flex;
  align-items:baseline;
  gap:4px;
  color:var(--text-3)
}

.app-shell .printer-settings-characters b{
  color:var(--text);
  font-size:13px;
  font-weight:820
}

.app-shell .printer-settings-characters small{
  font-size:9.5px
}

.app-shell .printer-settings-row-actions{
  justify-content:flex-end
}

.app-shell .printer-settings-row-actions .act{
  width:32px;
  height:32px
}

.app-shell .printer-settings-action-menu{
  min-width:180px
}

.app-shell .printer-settings-action-menu .table-action-icon{
  width:16px;
  height:16px;
  flex:0 0 16px
}

.app-shell .printer-settings-action-menu>li>button>*{
  pointer-events:none
}

.app-shell .printer-settings-no-actions{
  display:block;
  color:var(--text-3);
  text-align:right
}

.app-shell .printer-settings-empty{
  display:flex;
  min-height:230px;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  padding:30px 18px;
  text-align:center
}

.app-shell .printer-settings-empty>span{
  display:grid;
  width:52px;
  height:52px;
  place-items:center;
  border-radius:14px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .printer-settings-empty svg{
  width:25px;
  height:25px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round
}

.app-shell .printer-settings-empty strong{
  margin-top:11px;
  color:var(--text);
  font-size:13px;
  font-weight:800
}

.app-shell .printer-settings-empty small{
  max-width:390px;
  margin-top:3px;
  color:var(--text-3);
  font-size:10.5px;
  line-height:1.5
}

.app-shell .printer-settings-empty>a{
  display:inline-flex;
  align-items:center;
  gap:5px;
  margin-top:13px;
  padding:7px 10px;
  border:1px solid #b9ddc4;
  border-radius:8px;
  background:#f1faf4;
  color:var(--brand-strong);
  font-size:10.5px;
  font-weight:750;
  text-decoration:none
}

.app-shell .printer-settings-empty>a:hover{
  border-color:var(--brand);
  background:var(--brand);
  color:#fff
}

.app-shell .printer-settings-empty>a svg{
  width:14px;
  height:14px;
  stroke-width:2
}

.app-shell .printer-settings-table td.dataTables_empty{
  padding:0!important
}

@media (max-width:1050px){
  .app-shell .printer-settings-overview{
    grid-template-columns:1fr
  }

  .app-shell .printer-settings-facts{
    border-top:1px solid var(--border-2);
    border-left:0
  }

  .app-shell .printer-settings-facts>div{
    justify-content:center
  }
}

@media (max-width:620px){
  .app-shell .printer-settings-intro p,.app-shell .printer-settings-list-head p{
    display:none
  }

  .app-shell .printer-settings-facts{
    grid-template-columns:repeat(3,1fr)
  }

  .app-shell .printer-settings-facts>div{
    display:flex;
    min-width:0;
    align-items:center;
    justify-content:center;
    gap:5px;
    padding:10px 6px
  }

  .app-shell .printer-settings-facts span{
    display:none
  }

  .app-shell .printer-settings-facts small{
    margin:0
  }

  .app-shell .printer-settings-list-head{
    padding:12px 14px
  }
}

/* Printer setup form --------------------------------------------------- */

.app-shell .printer-form-page{
  max-width:1240px
}

.app-shell .printer-setup-form{
  display:grid;
  gap:12px
}

.app-shell .printer-form-section{
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

.app-shell .printer-form-section-head{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 15px;
  border-bottom:1px solid var(--border-2);
  background:linear-gradient(90deg,#f8fcf9,var(--surface))
}

.app-shell .printer-form-section-head>span{
  display:grid;
  width:36px;
  height:36px;
  flex:none;
  place-items:center;
  border-radius:10px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .printer-form-section-head.is-blue>span{
  background:#eaf3ff;
  color:#3979bc
}

.app-shell .printer-form-section-head>div{
  min-width:0;
  flex:1
}

.app-shell .printer-form-section-head small{
  display:block;
  color:var(--brand-strong);
  font-size:9px;
  font-weight:850;
  letter-spacing:.09em
}

.app-shell .printer-form-section-head h2{
  margin:1px 0 0;
  color:var(--text);
  font-size:14px;
  font-weight:820
}

.app-shell .printer-form-section-head p{
  margin:2px 0 0;
  color:var(--text-3);
  font-size:10.5px;
  line-height:1.4
}

.app-shell .printer-form-section-head>b{
  padding:5px 8px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--surface);
  color:var(--text-3);
  font-size:8.5px;
  font-weight:850;
  letter-spacing:.08em
}

.app-shell .printer-identity-grid{
  display:grid;
  grid-template-columns:minmax(280px,1.5fr) minmax(220px,1fr) minmax(190px,.7fr);
  gap:12px;
  padding:15px
}

.app-shell .printer-connection-grid{
  display:grid;
  grid-template-columns:minmax(230px,.85fr) minmax(300px,1.4fr) minmax(160px,.55fr);
  gap:12px;
  padding:15px 15px 12px
}

.app-shell .printer-form-field{
  min-width:0
}

.app-shell .printer-form-field>label{
  display:block;
  margin:0 0 6px;
  color:var(--text-2);
  font-size:12px;
  font-weight:750
}

.app-shell .printer-form-field>label em{
  color:var(--danger);
  font-style:normal
}

.app-shell .printer-form-field>small{
  display:block;
  margin-top:5px;
  color:var(--text-3);
  font-size:9.5px;
  line-height:1.4
}

.app-shell .printer-form-field>.form-control,.app-shell .printer-input-with-icon>.form-control,.app-shell .printer-number-control>.form-control{
  width:100%;
  height:42px;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface-2);
  box-shadow:none;
  color:var(--text);
  font-size:12.5px
}

.app-shell .printer-form-field>.form-control:focus,.app-shell .printer-input-with-icon>.form-control:focus,.app-shell .printer-number-control>.form-control:focus{
  border-color:color-mix(in srgb,var(--brand) 55%,var(--border));
  background:var(--surface);
  box-shadow:0 0 0 3px rgba(34,145,69,.08)
}

.app-shell .printer-form-field>.select2-container{
  display:block;
  width:100%!important
}

.app-shell .printer-form-field>.select2-container .select2-selection--single{
  height:42px;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface-2)
}

.app-shell .printer-form-field>.select2-container .select2-selection--single .select2-selection__rendered{
  padding-left:12px;
  color:var(--text);
  font-size:12.5px;
  line-height:40px
}

.app-shell .printer-form-field>.select2-container .select2-selection--single .select2-selection__arrow{
  height:40px;
  right:5px
}

.app-shell .printer-input-with-icon{
  position:relative
}

.app-shell .printer-input-with-icon>svg{
  position:absolute;
  top:13px;
  left:12px;
  z-index:1;
  color:var(--text-3);
  pointer-events:none
}

.app-shell .printer-input-with-icon>.form-control{
  padding-left:38px
}

.app-shell .printer-input-with-icon:focus-within>svg{
  color:var(--brand-strong)
}

.app-shell .printer-number-control{
  display:flex;
  align-items:stretch
}

.app-shell .printer-number-control>.form-control{
  min-width:0;
  border-radius:9px 0 0 9px
}

.app-shell .printer-number-control>span{
  display:flex;
  min-width:54px;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border);
  border-left:0;
  border-radius:0 9px 9px 0;
  background:var(--surface);
  color:var(--text-3);
  font-size:9.5px;
  font-weight:800;
  text-transform:uppercase
}

.app-shell .printer-number-control:focus-within>span{
  border-color:color-mix(in srgb,var(--brand) 55%,var(--border));
  background:#f1faf4;
  color:var(--brand-strong)
}

.app-shell .printer-form-field.is-path{
  grid-column:2/4
}

.app-shell .printer-form-field.hide{
  display:none!important
}

.app-shell .printer-connection-guide{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin:0 15px 15px;
  padding:11px 12px;
  border:1px solid #dbe7f5;
  border-radius:10px;
  background:#f5f9fe
}

.app-shell .printer-connection-guide>span{
  display:grid;
  width:30px;
  height:30px;
  flex:none;
  place-items:center;
  border-radius:8px;
  background:#e6f1fc;
  color:#3979bc
}

.app-shell .printer-connection-guide strong{
  display:block;
  color:var(--text-2);
  font-size:11.5px;
  font-weight:780
}

.app-shell .printer-connection-guide p{
  margin:2px 0 0;
  color:var(--text-3);
  font-size:10px;
  line-height:1.5
}

.app-shell .printer-connection-guide code{
  padding:1px 4px;
  border-radius:4px;
  background:#e5eef9;
  color:#326da8;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:9.5px
}

.app-shell .printer-form-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:13px 15px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

.app-shell .printer-form-actions>span{
  color:var(--text-3);
  font-size:10.5px;
  font-weight:650
}

.app-shell .printer-form-actions>span i{
  color:var(--danger);
  font-style:normal
}

.app-shell .printer-form-actions>div{
  display:flex;
  align-items:center;
  gap:8px
}

.app-shell .printer-form-actions .btn-ghost,.app-shell .printer-form-actions .btn-primary{
  height:42px;
  min-width:96px;
  justify-content:center
}

@media (max-width:920px){
  .app-shell .printer-identity-grid{
    grid-template-columns:1fr 1fr
  }

  .app-shell .printer-form-field.is-name{
    grid-column:1/-1
  }

  .app-shell .printer-connection-grid{
    grid-template-columns:1fr 1fr
  }

  .app-shell .printer-form-field.is-type{
    grid-column:1/-1
  }

  .app-shell .printer-form-field.is-path{
    grid-column:1/-1
  }
}

@media (max-width:600px){
  .app-shell .printer-form-section-head p{
    display:none
  }

  .app-shell .printer-identity-grid,.app-shell .printer-connection-grid{
    grid-template-columns:1fr
  }

  .app-shell .printer-form-field.is-name,.app-shell .printer-form-field.is-type,.app-shell .printer-form-field.is-path{
    grid-column:auto
  }

  .app-shell .printer-form-actions{
    align-items:stretch;
    flex-direction:column
  }

  .app-shell .printer-form-actions>span{
    text-align:center
  }

  .app-shell .printer-form-actions>div{
    width:100%
  }

  .app-shell .printer-form-actions .btn-ghost,.app-shell .printer-form-actions .btn-primary{
    flex:1
  }
}

/* Tax rate settings ---------------------------------------------------- */

.app-shell .tax-settings-page{
  max-width:1480px
}

.app-shell .tax-settings-overview{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  overflow:hidden;
  margin-bottom:14px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

.app-shell .tax-settings-intro{
  display:flex;
  min-width:0;
  align-items:center;
  gap:12px;
  padding:15px 17px
}

.app-shell .tax-settings-intro>span{
  display:grid;
  width:42px;
  height:42px;
  flex:none;
  place-items:center;
  border-radius:11px;
  background:#fff3dd;
  color:#ae7323
}

.app-shell .tax-settings-intro>div{
  min-width:0
}

.app-shell .tax-settings-intro small{
  display:block;
  color:var(--brand-strong);
  font-size:9px;
  font-weight:850;
  letter-spacing:.09em
}

.app-shell .tax-settings-intro strong{
  display:block;
  margin-top:2px;
  color:var(--text);
  font-size:14px;
  font-weight:820
}

.app-shell .tax-settings-intro p{
  margin:2px 0 0;
  color:var(--text-3);
  font-size:10.5px;
  line-height:1.45
}

.app-shell .tax-settings-facts{
  display:grid;
  grid-template-columns:repeat(3,minmax(120px,1fr));
  border-left:1px solid var(--border-2)
}

.app-shell .tax-settings-facts>div{
  display:flex;
  min-width:120px;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  padding:13px 16px;
  border-right:1px solid var(--border-2)
}

.app-shell .tax-settings-facts>div:last-child{
  border-right:0
}

.app-shell .tax-settings-facts b{
  color:var(--text);
  font-size:17px;
  font-weight:850;
  line-height:1.1
}

.app-shell .tax-settings-facts small{
  margin-top:3px;
  color:var(--text-3);
  font-size:9.5px;
  font-weight:650;
  white-space:nowrap
}

.app-shell .tax-settings-workspace{
  overflow:hidden;
  margin-bottom:14px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

.app-shell .tax-settings-workspace:last-of-type{
  margin-bottom:0
}

.app-shell .tax-settings-section-head{
  display:flex;
  align-items:center;
  gap:10px;
  padding:13px 16px;
  border-bottom:1px solid var(--border-2);
  background:linear-gradient(90deg,#f8fcf9,var(--surface))
}

.app-shell .tax-settings-section-head>span{
  display:grid;
  width:36px;
  height:36px;
  flex:none;
  place-items:center;
  border-radius:10px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .tax-settings-section-head.is-blue>span{
  background:#eaf3ff;
  color:#3979bc
}

.app-shell .tax-settings-section-head>div{
  min-width:0;
  flex:1
}

.app-shell .tax-settings-section-head small{
  display:block;
  color:var(--brand-strong);
  font-size:8.5px;
  font-weight:850;
  letter-spacing:.08em
}

.app-shell .tax-settings-section-head h2{
  margin:1px 0 0;
  color:var(--text);
  font-size:14px;
  font-weight:820
}

.app-shell .tax-settings-section-head p{
  margin:2px 0 0;
  color:var(--text-3);
  font-size:10px;
  line-height:1.45
}

.app-shell .tax-settings-section-head .btn-primary{
  height:38px;
  flex:none;
  padding:0 12px;
  font-size:11px
}

.app-shell .tax-settings-list-card{
  margin:0;
  border:0;
  border-radius:0;
  box-shadow:none
}

.app-shell .tax-settings-list-card .table-toolbar{
  border-top:0
}

.app-shell .tax-settings-list-card .data-table-content{
  border-radius:0
}

.app-shell .tax-settings-table-wrap{
  overflow-x:auto
}

.app-shell .tax-settings-table{
  min-width:680px
}

.app-shell .tax-settings-table td{
  padding-top:11px!important;
  padding-bottom:11px!important;
  vertical-align:middle!important
}

.app-shell .tax-rates-table td:nth-child(1){
  width:58%;
  min-width:300px
}

.app-shell .tax-rates-table td:nth-child(2){
  width:190px
}

.app-shell .tax-groups-table{
  min-width:820px
}

.app-shell .tax-groups-table td:nth-child(1){
  width:28%;
  min-width:220px
}

.app-shell .tax-groups-table td:nth-child(2){
  width:150px
}

.app-shell .tax-groups-table td:nth-child(3){
  min-width:300px
}

.app-shell .tax-settings-table td:last-child{
  width:84px
}

.app-shell .tax-settings-identity{
  display:flex;
  min-width:0;
  align-items:center;
  gap:10px
}

.app-shell .tax-settings-identity>span{
  display:grid;
  width:34px;
  height:34px;
  flex:none;
  place-items:center;
  border:1px solid #eadfc9;
  border-radius:9px;
  background:#fff8eb;
  color:#a66d21
}

.app-shell .tax-settings-group-identity>span{
  border-color:#dce8f7;
  background:#edf5ff;
  color:#3979bc
}

.app-shell .tax-settings-identity>div{
  display:flex;
  min-width:0;
  align-items:center;
  gap:7px;
  flex-wrap:wrap
}

.app-shell .tax-settings-identity strong{
  color:var(--text);
  font-size:12.5px;
  font-weight:780
}

.app-shell .tax-settings-group-identity>div{
  display:block
}

.app-shell .tax-settings-group-identity small{
  display:block;
  margin-top:2px;
  color:var(--text-3);
  font-size:9.5px
}

.app-shell .tax-settings-group-only{
  display:inline-flex;
  padding:3px 6px;
  border-radius:999px;
  background:#f1f5f3;
  color:var(--text-3);
  font-size:8px;
  font-weight:800;
  text-transform:uppercase
}

.app-shell .tax-settings-rate{
  display:inline-flex;
  align-items:baseline;
  gap:3px;
  padding:6px 9px;
  border:1px solid #eadfc9;
  border-radius:8px;
  background:#fff9ee;
  color:#99681f
}

.app-shell .tax-settings-rate.is-group{
  border-color:#d5e4f5;
  background:#f2f7fd;
  color:#3974ae
}

.app-shell .tax-settings-rate b{
  font-size:12.5px;
  font-weight:850
}

.app-shell .tax-settings-rate small{
  font-size:9.5px;
  font-weight:800
}

.app-shell .tax-settings-sub-taxes{
  display:flex;
  align-items:center;
  gap:5px;
  flex-wrap:wrap
}

.app-shell .tax-settings-sub-taxes>span{
  display:inline-flex;
  padding:4px 7px;
  border:1px solid var(--border);
  border-radius:7px;
  background:var(--surface-2);
  color:var(--text-2);
  font-size:9.5px;
  font-weight:700
}

.app-shell .tax-settings-sub-taxes>i{
  color:var(--text-3);
  font-size:10px;
  font-style:normal;
  font-weight:800
}

.app-shell .tax-settings-sub-taxes.is-empty{
  color:var(--text-3);
  font-size:10.5px;
  font-style:italic
}

.app-shell .tax-settings-row-actions{
  justify-content:flex-end
}

.app-shell .tax-settings-row-actions .act{
  width:32px;
  height:32px
}

.app-shell .tax-settings-action-menu{
  min-width:180px
}

.app-shell .tax-settings-action-menu .table-action-icon{
  width:16px;
  height:16px;
  flex:0 0 16px
}

.app-shell .tax-settings-action-menu>li>button>*{
  pointer-events:none
}

.app-shell .tax-settings-no-actions{
  display:block;
  color:var(--text-3);
  text-align:right
}

.app-shell .tax-settings-empty{
  display:flex;
  min-height:170px;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  padding:24px 16px;
  text-align:center
}

.app-shell .tax-settings-empty>span{
  display:grid;
  width:46px;
  height:46px;
  place-items:center;
  border-radius:13px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .tax-settings-empty svg{
  width:23px;
  height:23px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round
}

.app-shell .tax-settings-empty strong{
  margin-top:9px;
  color:var(--text);
  font-size:12.5px;
  font-weight:800
}

.app-shell .tax-settings-empty small{
  max-width:390px;
  margin-top:3px;
  color:var(--text-3);
  font-size:10px;
  line-height:1.45
}

.app-shell .tax-settings-table td.dataTables_empty{
  padding:0!important
}

@media (max-width:900px){
  .app-shell .tax-settings-overview{
    grid-template-columns:1fr
  }

  .app-shell .tax-settings-facts{
    border-top:1px solid var(--border-2);
    border-left:0
  }
}

@media (max-width:620px){
  .app-shell .tax-settings-intro p,.app-shell .tax-settings-section-head p{
    display:none
  }

  .app-shell .tax-settings-facts>div{
    min-width:0;
    padding:10px 5px
  }

  .app-shell .tax-settings-section-head{
    align-items:flex-start;
    flex-wrap:wrap
  }

  .app-shell .tax-settings-section-head>div{
    width:calc(100% - 46px);
    flex:none
  }

  .app-shell .tax-settings-section-head .btn-primary{
    width:100%;
    justify-content:center
  }
}

/* Restaurant table directory ------------------------------------------ */

.app-shell .restaurant-tables-page{
  max-width:1480px
}

.app-shell .restaurant-tables-overview{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  overflow:hidden;
  margin-bottom:14px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

.app-shell .restaurant-tables-intro{
  display:flex;
  min-width:0;
  align-items:center;
  gap:12px;
  padding:15px 17px
}

.app-shell .restaurant-tables-intro>span{
  display:grid;
  width:42px;
  height:42px;
  flex:none;
  place-items:center;
  border-radius:11px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .restaurant-tables-intro>div{
  min-width:0
}

.app-shell .restaurant-tables-intro small{
  display:block;
  color:var(--brand-strong);
  font-size:9px;
  font-weight:850;
  letter-spacing:.09em
}

.app-shell .restaurant-tables-intro strong{
  display:block;
  margin-top:2px;
  color:var(--text);
  font-size:14px;
  font-weight:820
}

.app-shell .restaurant-tables-intro p{
  margin:2px 0 0;
  color:var(--text-3);
  font-size:10.5px;
  line-height:1.45
}

.app-shell .restaurant-tables-facts{
  display:grid;
  grid-template-columns:repeat(3,minmax(120px,1fr));
  border-left:1px solid var(--border-2)
}

.app-shell .restaurant-tables-facts>div{
  display:flex;
  min-width:120px;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  padding:13px 16px;
  border-right:1px solid var(--border-2)
}

.app-shell .restaurant-tables-facts>div:last-child{
  border-right:0
}

.app-shell .restaurant-tables-facts b{
  color:var(--text);
  font-size:17px;
  font-weight:850;
  line-height:1.1
}

.app-shell .restaurant-tables-facts small{
  margin-top:3px;
  color:var(--text-3);
  font-size:9.5px;
  font-weight:650;
  white-space:nowrap
}

.app-shell .restaurant-tables-workspace{
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

.app-shell .restaurant-tables-section-head{
  display:flex;
  align-items:center;
  gap:10px;
  padding:13px 16px;
  border-bottom:1px solid var(--border-2);
  background:linear-gradient(90deg,#f8fcf9,var(--surface))
}

.app-shell .restaurant-tables-section-head>span{
  display:grid;
  width:36px;
  height:36px;
  flex:none;
  place-items:center;
  border-radius:10px;
  background:#eaf3ff;
  color:#3979bc
}

.app-shell .restaurant-tables-section-head>div{
  min-width:0
}

.app-shell .restaurant-tables-section-head small{
  display:block;
  color:var(--brand-strong);
  font-size:8.5px;
  font-weight:850;
  letter-spacing:.08em
}

.app-shell .restaurant-tables-section-head h2{
  margin:1px 0 0;
  color:var(--text);
  font-size:14px;
  font-weight:820
}

.app-shell .restaurant-tables-section-head p{
  margin:2px 0 0;
  color:var(--text-3);
  font-size:10px;
  line-height:1.45
}

.app-shell .restaurant-tables-list-card{
  margin:0;
  border:0;
  border-radius:0;
  box-shadow:none
}

.app-shell .restaurant-tables-list-card .table-toolbar{
  border-top:0
}

.app-shell .restaurant-tables-list-card .data-table-content{
  border-radius:0
}

.app-shell .restaurant-tables-table-wrap{
  overflow-x:auto
}

.app-shell .restaurant-tables-table{
  min-width:850px
}

.app-shell .restaurant-tables-table td{
  padding-top:11px!important;
  padding-bottom:11px!important;
  vertical-align:middle!important
}

.app-shell .restaurant-tables-table td:nth-child(1){
  width:27%;
  min-width:230px
}

.app-shell .restaurant-tables-table td:nth-child(2){
  width:27%;
  min-width:230px
}

.app-shell .restaurant-tables-table td:nth-child(3){
  min-width:280px
}

.app-shell .restaurant-tables-table td:last-child{
  width:84px
}

.app-shell .restaurant-table-identity{
  display:flex;
  min-width:0;
  align-items:center;
  gap:10px
}

.app-shell .restaurant-table-identity>span{
  display:grid;
  width:34px;
  height:34px;
  flex:none;
  place-items:center;
  border:1px solid color-mix(in srgb,var(--brand) 18%,var(--border));
  border-radius:9px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .restaurant-table-identity>div{
  min-width:0
}

.app-shell .restaurant-table-identity strong{
  display:block;
  overflow:hidden;
  color:var(--text);
  font-size:12.5px;
  font-weight:780;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .restaurant-table-identity small{
  display:block;
  margin-top:2px;
  color:var(--text-3);
  font-size:9px
}

.app-shell .restaurant-table-location{
  display:inline-flex;
  max-width:100%;
  align-items:center;
  gap:6px;
  padding:6px 8px;
  border:1px solid #d8e6f6;
  border-radius:8px;
  background:#f4f8fd;
  color:#3974ae
}

.app-shell .restaurant-table-location svg{
  flex:none
}

.app-shell .restaurant-table-location b{
  overflow:hidden;
  font-size:10.5px;
  font-weight:750;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .restaurant-table-description{
  display:block;
  max-width:520px;
  color:var(--text-2);
  font-size:11px;
  line-height:1.45
}

.app-shell .restaurant-table-description.is-empty{
  color:var(--text-3);
  font-style:italic
}

.app-shell .restaurant-table-row-actions{
  justify-content:flex-end
}

.app-shell .restaurant-table-row-actions .act{
  width:32px;
  height:32px
}

.app-shell .restaurant-table-action-menu{
  min-width:180px
}

.app-shell .restaurant-table-action-menu .table-action-icon{
  width:16px;
  height:16px;
  flex:0 0 16px
}

.app-shell .restaurant-table-action-menu>li>button>*{
  pointer-events:none
}

.app-shell .restaurant-table-no-actions{
  display:block;
  color:var(--text-3);
  text-align:right
}

.app-shell .restaurant-tables-empty{
  display:flex;
  min-height:230px;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  padding:30px 18px;
  text-align:center
}

.app-shell .restaurant-tables-empty>span{
  display:grid;
  width:52px;
  height:52px;
  place-items:center;
  border-radius:14px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .restaurant-tables-empty svg{
  width:25px;
  height:25px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round
}

.app-shell .restaurant-tables-empty strong{
  margin-top:11px;
  color:var(--text);
  font-size:13px;
  font-weight:800
}

.app-shell .restaurant-tables-empty small{
  max-width:390px;
  margin-top:3px;
  color:var(--text-3);
  font-size:10.5px;
  line-height:1.5
}

.app-shell .restaurant-tables-table td.dataTables_empty{
  padding:0!important
}

@media (max-width:900px){
  .app-shell .restaurant-tables-overview{
    grid-template-columns:1fr
  }

  .app-shell .restaurant-tables-facts{
    border-top:1px solid var(--border-2);
    border-left:0
  }
}

@media (max-width:620px){
  .app-shell .restaurant-tables-intro p,.app-shell .restaurant-tables-section-head p{
    display:none
  }

  .app-shell .restaurant-tables-facts>div{
    min-width:0;
    padding:10px 5px
  }
}

/* Restaurant table modal ---------------------------------------------- */

body.app-ui .restaurant-table-modal-dialog{
  width:min(820px,calc(100vw - 24px));
  max-width:none;
  margin:8vh auto
}

body.app-ui .restaurant-table-modal{
  overflow:hidden;
  border:0!important;
  border-radius:16px!important;
  background:var(--surface);
  box-shadow:0 26px 72px rgba(15,28,21,.3)
}

body.app-ui .restaurant-table-modal>form{
  display:block
}

body.app-ui .restaurant-table-modal-header{
  display:flex;
  align-items:center;
  gap:11px;
  padding:15px 17px;
  border-bottom:1px solid var(--border-2);
  background:linear-gradient(90deg,#f4fbf6,var(--surface))
}

body.app-ui .restaurant-table-modal-header>span{
  display:grid;
  width:42px;
  height:42px;
  flex:none;
  place-items:center;
  border-radius:11px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

body.app-ui .restaurant-table-modal-header.is-edit>span{
  background:#eaf3ff;
  color:#3979bc
}

body.app-ui .restaurant-table-modal-header>div{
  min-width:0;
  flex:1
}

body.app-ui .restaurant-table-modal-header small{
  display:block;
  color:var(--brand-strong);
  font-size:9px;
  font-weight:850;
  letter-spacing:.09em
}

body.app-ui .restaurant-table-modal-header h4{
  margin:1px 0 0;
  color:var(--text);
  font-size:16px;
  font-weight:820;
  line-height:1.3
}

body.app-ui .restaurant-table-modal-header p{
  margin:2px 0 0;
  color:var(--text-3);
  font-size:10.5px;
  line-height:1.4
}

body.app-ui .restaurant-table-modal-close{
  display:grid;
  width:34px;
  height:34px;
  flex:none;
  place-items:center;
  padding:0;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface-2);
  color:var(--text-3);
  cursor:pointer;
  transition:background .15s ease,color .15s ease,border-color .15s ease
}

body.app-ui .restaurant-table-modal-close:hover{
  border-color:#d3ded7;
  background:var(--surface-3);
  color:var(--text)
}

body.app-ui .restaurant-table-modal-body{
  display:grid;
  gap:12px;
  padding:14px;
  background:#f8faf9
}

body.app-ui .restaurant-table-form-section{
  padding:14px;
  border:1px solid var(--border);
  border-radius:13px;
  background:var(--surface);
  box-shadow:0 2px 8px rgba(20,38,28,.025)
}

body.app-ui .restaurant-table-form-section-head{
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:13px;
  padding-bottom:11px;
  border-bottom:1px solid var(--border-2)
}

body.app-ui .restaurant-table-form-section-head>span{
  display:grid;
  width:32px;
  height:32px;
  flex:none;
  place-items:center;
  border-radius:9px;
  background:#eaf3ff;
  color:#3979bc
}

body.app-ui .restaurant-table-form-section-head>div{
  min-width:0
}

body.app-ui .restaurant-table-form-section-head strong{
  display:block;
  color:var(--text);
  font-size:12.5px;
  font-weight:810
}

body.app-ui .restaurant-table-form-section-head small{
  display:block;
  margin-top:2px;
  color:var(--text-3);
  font-size:9.5px;
  line-height:1.4
}

body.app-ui .restaurant-table-field-grid{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:12px
}

body.app-ui .restaurant-table-field-grid.is-edit{
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)
}

body.app-ui .restaurant-table-field{
  min-width:0
}

body.app-ui .restaurant-table-field.is-description{
  padding:13px 14px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface)
}

body.app-ui .restaurant-table-field>label{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin:0 0 6px;
  color:var(--text-2);
  font-size:12px;
  font-weight:750
}

body.app-ui .restaurant-table-field>label em{
  color:var(--danger);
  font-style:normal
}

body.app-ui .restaurant-table-field>label span{
  padding:2px 6px;
  border-radius:999px;
  background:var(--surface-3);
  color:var(--text-3);
  font-size:8px;
  font-weight:800;
  letter-spacing:.03em;
  text-transform:uppercase
}

body.app-ui .restaurant-table-field>small{
  display:block;
  margin-top:5px;
  color:var(--text-3);
  font-size:9.5px;
  line-height:1.4
}

body.app-ui .restaurant-table-input-wrap,body.app-ui .restaurant-table-select-wrap,body.app-ui .restaurant-table-textarea-wrap{
  position:relative
}

body.app-ui .restaurant-table-input-wrap>svg,body.app-ui .restaurant-table-select-wrap>svg,body.app-ui .restaurant-table-textarea-wrap>svg{
  position:absolute;
  top:13px;
  left:12px;
  z-index:2;
  color:var(--text-3);
  pointer-events:none
}

body.app-ui .restaurant-table-textarea-wrap>svg{
  top:12px
}

body.app-ui .restaurant-table-input-wrap>.form-control,body.app-ui .restaurant-table-textarea-wrap>.form-control{
  width:100%;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface-2);
  box-shadow:none;
  color:var(--text);
  font-size:12.5px;
  transition:border-color .15s ease,background .15s ease,box-shadow .15s ease
}

body.app-ui .restaurant-table-input-wrap>.form-control{
  height:42px;
  padding-left:38px
}

body.app-ui .restaurant-table-textarea-wrap>.form-control{
  min-height:68px;
  padding:11px 12px 10px 38px;
  line-height:1.45;
  resize:vertical
}

body.app-ui .restaurant-table-input-wrap>.form-control:focus,body.app-ui .restaurant-table-textarea-wrap>.form-control:focus{
  border-color:color-mix(in srgb,var(--brand) 55%,var(--border));
  background:var(--surface);
  box-shadow:0 0 0 3px rgba(34,145,69,.08)
}

body.app-ui .restaurant-table-input-wrap:focus-within>svg,body.app-ui .restaurant-table-textarea-wrap:focus-within>svg,body.app-ui .restaurant-table-select-wrap:focus-within>svg{
  color:var(--brand-strong)
}

body.app-ui .restaurant-table-select-wrap>.select2-container{
  display:block;
  width:100%!important
}

body.app-ui .restaurant-table-select-wrap>.select2-container .select2-selection--single{
  height:42px;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface-2);
  box-shadow:none
}

body.app-ui .restaurant-table-select-wrap>.select2-container .select2-selection--single .select2-selection__rendered{
  padding-right:32px;
  padding-left:38px;
  color:var(--text);
  font-size:12.5px;
  line-height:40px
}

body.app-ui .restaurant-table-select-wrap>.select2-container .select2-selection--single .select2-selection__placeholder{
  color:var(--text-3)
}

body.app-ui .restaurant-table-select-wrap>.select2-container .select2-selection--single .select2-selection__arrow{
  height:40px;
  right:6px
}

body.app-ui .restaurant-table-select-wrap:focus-within>.select2-container .select2-selection--single{
  border-color:color-mix(in srgb,var(--brand) 55%,var(--border));
  background:var(--surface);
  box-shadow:0 0 0 3px rgba(34,145,69,.08)
}

body.app-ui .restaurant-table-modal-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 15px;
  border-top:1px solid var(--border);
  background:var(--surface)
}

body.app-ui .restaurant-table-modal-footer>span{
  color:var(--text-3);
  font-size:9.5px;
  font-weight:650
}

body.app-ui .restaurant-table-modal-footer>span i{
  color:var(--danger);
  font-style:normal
}

body.app-ui .restaurant-table-modal-footer>div{
  display:flex;
  align-items:center;
  gap:8px
}

body.app-ui .restaurant-table-modal-footer .btn-ghost,body.app-ui .restaurant-table-modal-footer .btn-primary{
  height:40px;
  min-width:94px;
  justify-content:center
}

@media (max-width:620px){
  body.app-ui .restaurant-table-modal-dialog{
    width:calc(100vw - 12px);
    margin:6px auto
  }

  body.app-ui .restaurant-table-modal-header{
    padding:12px
  }

  body.app-ui .restaurant-table-modal-header p{
    display:none
  }

  body.app-ui .restaurant-table-modal-body{
    padding:10px
  }

  body.app-ui .restaurant-table-field-grid,body.app-ui .restaurant-table-field-grid.is-edit{
    grid-template-columns:1fr
  }

  body.app-ui .restaurant-table-modal-footer{
    align-items:stretch;
    flex-direction:column;
    padding:10px 12px
  }

  body.app-ui .restaurant-table-modal-footer>span{
    text-align:center
  }

  body.app-ui .restaurant-table-modal-footer>div{
    width:100%
  }

  body.app-ui .restaurant-table-modal-footer .btn-ghost,body.app-ui .restaurant-table-modal-footer .btn-primary{
    flex:1
  }
}

/* Modifier set directory ---------------------------------------------- */

.app-shell .modifier-sets-page{
  max-width:1480px
}

.app-shell .modifier-sets-overview{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  overflow:hidden;
  margin-bottom:14px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

.app-shell .modifier-sets-intro{
  display:flex;
  min-width:0;
  align-items:center;
  gap:12px;
  padding:15px 17px
}

.app-shell .modifier-sets-intro>span{
  display:grid;
  width:42px;
  height:42px;
  flex:none;
  place-items:center;
  border-radius:11px;
  background:#f0eafe;
  color:#7954b5
}

.app-shell .modifier-sets-intro>div{
  min-width:0
}

.app-shell .modifier-sets-intro small{
  display:block;
  color:var(--brand-strong);
  font-size:9px;
  font-weight:850;
  letter-spacing:.09em
}

.app-shell .modifier-sets-intro strong{
  display:block;
  margin-top:2px;
  color:var(--text);
  font-size:14px;
  font-weight:820
}

.app-shell .modifier-sets-intro p{
  margin:2px 0 0;
  color:var(--text-3);
  font-size:10.5px;
  line-height:1.45
}

.app-shell .modifier-sets-facts{
  display:grid;
  grid-template-columns:repeat(3,minmax(120px,1fr));
  border-left:1px solid var(--border-2)
}

.app-shell .modifier-sets-facts>div{
  display:flex;
  min-width:120px;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  padding:13px 16px;
  border-right:1px solid var(--border-2)
}

.app-shell .modifier-sets-facts>div:last-child{
  border-right:0
}

.app-shell .modifier-sets-facts b{
  color:var(--text);
  font-size:17px;
  font-weight:850;
  line-height:1.1
}

.app-shell .modifier-sets-facts small{
  margin-top:3px;
  color:var(--text-3);
  font-size:9.5px;
  font-weight:650;
  white-space:nowrap
}

.app-shell .modifier-sets-workspace{
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

.app-shell .modifier-sets-section-head{
  display:flex;
  align-items:center;
  gap:10px;
  padding:13px 16px;
  border-bottom:1px solid var(--border-2);
  background:linear-gradient(90deg,#faf8fd,var(--surface))
}

.app-shell .modifier-sets-section-head>span{
  display:grid;
  width:36px;
  height:36px;
  flex:none;
  place-items:center;
  border-radius:10px;
  background:#f0eafe;
  color:#7954b5
}

.app-shell .modifier-sets-section-head>div{
  min-width:0
}

.app-shell .modifier-sets-section-head small{
  display:block;
  color:var(--brand-strong);
  font-size:8.5px;
  font-weight:850;
  letter-spacing:.08em
}

.app-shell .modifier-sets-section-head h2{
  margin:1px 0 0;
  color:var(--text);
  font-size:14px;
  font-weight:820
}

.app-shell .modifier-sets-section-head p{
  margin:2px 0 0;
  color:var(--text-3);
  font-size:10px;
  line-height:1.45
}

.app-shell .modifier-sets-list-card{
  margin:0;
  border:0;
  border-radius:0;
  box-shadow:none
}

.app-shell .modifier-sets-list-card .table-toolbar{
  border-top:0
}

.app-shell .modifier-sets-list-card .data-table-content{
  border-radius:0
}

.app-shell .modifier-sets-table-wrap{
  overflow-x:auto
}

.app-shell .modifier-sets-table{
  min-width:920px
}

.app-shell .modifier-sets-table td{
  padding-top:11px!important;
  padding-bottom:11px!important;
  vertical-align:middle!important
}

.app-shell .modifier-sets-table td:nth-child(1){
  width:25%;
  min-width:230px
}

.app-shell .modifier-sets-table td:nth-child(2){
  width:31%;
  min-width:280px
}

.app-shell .modifier-sets-table td:nth-child(3){
  min-width:300px
}

.app-shell .modifier-sets-table td:last-child{
  width:84px
}

.app-shell .modifier-set-identity{
  display:flex;
  min-width:0;
  align-items:center;
  gap:10px
}

.app-shell .modifier-set-identity>span{
  display:grid;
  width:34px;
  height:34px;
  flex:none;
  place-items:center;
  border:1px solid #dfd4f2;
  border-radius:9px;
  background:#f3eefb;
  color:#7451ad
}

.app-shell .modifier-set-identity>div{
  min-width:0
}

.app-shell .modifier-set-identity strong{
  display:block;
  overflow:hidden;
  color:var(--text);
  font-size:12.5px;
  font-weight:780;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .modifier-set-identity small{
  display:block;
  margin-top:2px;
  color:var(--text-3);
  font-size:9px
}

.app-shell .modifier-set-tags{
  display:flex;
  align-items:center;
  gap:5px;
  flex-wrap:wrap
}

.app-shell .modifier-set-tags>span{
  display:inline-flex;
  max-width:150px;
  overflow:hidden;
  padding:4px 7px;
  border:1px solid #dfd4f2;
  border-radius:7px;
  background:#f7f3fc;
  color:#68489d;
  font-size:9.5px;
  font-weight:700;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .modifier-set-tags.is-products>span{
  border-color:#d8e6f6;
  background:#f3f8fd;
  color:#3974ae
}

.app-shell .modifier-set-tags>i{
  color:var(--text-3);
  font-size:9px;
  font-style:normal;
  font-weight:800
}

.app-shell .modifier-set-tags.is-empty{
  color:var(--text-3);
  font-size:10.5px;
  font-style:italic
}

.app-shell .modifier-set-row-actions{
  justify-content:flex-end
}

.app-shell .modifier-set-row-actions .act{
  width:32px;
  height:32px
}

.app-shell .modifier-set-action-menu{
  min-width:205px
}

.app-shell .modifier-set-action-menu .table-action-icon{
  width:16px;
  height:16px;
  flex:0 0 16px
}

.app-shell .modifier-set-action-menu>li>button>*{
  pointer-events:none
}

.app-shell .modifier-set-no-actions{
  display:block;
  color:var(--text-3);
  text-align:right
}

.app-shell .modifier-sets-empty{
  display:flex;
  min-height:230px;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  padding:30px 18px;
  text-align:center
}

.app-shell .modifier-sets-empty>span{
  display:grid;
  width:52px;
  height:52px;
  place-items:center;
  border-radius:14px;
  background:#f0eafe;
  color:#7954b5
}

.app-shell .modifier-sets-empty svg{
  width:25px;
  height:25px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round
}

.app-shell .modifier-sets-empty strong{
  margin-top:11px;
  color:var(--text);
  font-size:13px;
  font-weight:800
}

.app-shell .modifier-sets-empty small{
  max-width:430px;
  margin-top:3px;
  color:var(--text-3);
  font-size:10.5px;
  line-height:1.5
}

.app-shell .modifier-sets-table td.dataTables_empty{
  padding:0!important
}

@media (max-width:900px){
  .app-shell .modifier-sets-overview{
    grid-template-columns:1fr
  }

  .app-shell .modifier-sets-facts{
    border-top:1px solid var(--border-2);
    border-left:0
  }
}

@media (max-width:620px){
  .app-shell .modifier-sets-intro p,.app-shell .modifier-sets-section-head p{
    display:none
  }

  .app-shell .modifier-sets-facts>div{
    min-width:0;
    padding:10px 5px
  }
}

/* Modifier set composer modal ----------------------------------------- */

body.app-ui .modifier-set-modal-dialog{
  width:min(900px,calc(100vw - 24px));
  max-width:none;
  margin:5vh auto
}

body.app-ui .modifier-set-modal{
  overflow:hidden;
  border:0!important;
  border-radius:16px!important;
  background:var(--surface);
  box-shadow:0 26px 72px rgba(15,28,21,.3)
}

body.app-ui .modifier-set-modal>form{
  display:block
}

body.app-ui .modifier-set-modal-header{
  display:flex;
  align-items:center;
  gap:11px;
  padding:15px 17px;
  border-bottom:1px solid var(--border-2);
  background:linear-gradient(90deg,#faf7fe,var(--surface))
}

body.app-ui .modifier-set-modal-header>span{
  display:grid;
  width:42px;
  height:42px;
  flex:none;
  place-items:center;
  border-radius:11px;
  background:#eee7fa;
  color:#7551ae
}

body.app-ui .modifier-set-modal-header.is-edit>span{
  background:#eaf3ff;
  color:#3979bc
}

body.app-ui .modifier-set-modal-header>div{
  min-width:0;
  flex:1
}

body.app-ui .modifier-set-modal-header small{
  display:block;
  color:#7150a4;
  font-size:9px;
  font-weight:850;
  letter-spacing:.09em
}

body.app-ui .modifier-set-modal-header h4{
  margin:1px 0 0;
  color:var(--text);
  font-size:16px;
  font-weight:820;
  line-height:1.3
}

body.app-ui .modifier-set-modal-header p{
  margin:2px 0 0;
  color:var(--text-3);
  font-size:10.5px;
  line-height:1.4
}

body.app-ui .modifier-set-modal-close{
  display:grid;
  width:34px;
  height:34px;
  flex:none;
  place-items:center;
  padding:0;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface-2);
  color:var(--text-3);
  cursor:pointer;
  transition:background .15s ease,color .15s ease,border-color .15s ease
}

body.app-ui .modifier-set-modal-close:hover{
  border-color:#d3ded7;
  background:var(--surface-3);
  color:var(--text)
}

body.app-ui .modifier-set-modal-body{
  display:grid;
  grid-template-columns:minmax(220px,.72fr) minmax(0,1.55fr);
  gap:12px;
  padding:14px;
  background:#f8faf9
}

body.app-ui .modifier-set-name-section,body.app-ui .modifier-options-section{
  min-width:0;
  padding:14px;
  border:1px solid var(--border);
  border-radius:13px;
  background:var(--surface);
  box-shadow:0 2px 8px rgba(20,38,28,.025)
}

body.app-ui .modifier-set-section-head{
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:13px;
  padding-bottom:11px;
  border-bottom:1px solid var(--border-2)
}

body.app-ui .modifier-set-section-head>span{
  display:grid;
  width:32px;
  height:32px;
  flex:none;
  place-items:center;
  border-radius:9px;
  background:#eee7fa;
  color:#7551ae
}

body.app-ui .modifier-set-section-head.is-amber>span{
  background:#fff2de;
  color:#b87523
}

body.app-ui .modifier-set-section-head>div{
  min-width:0;
  flex:1
}

body.app-ui .modifier-set-section-head strong{
  display:block;
  color:var(--text);
  font-size:12.5px;
  font-weight:810
}

body.app-ui .modifier-set-section-head small{
  display:block;
  margin-top:2px;
  color:var(--text-3);
  font-size:9.5px;
  line-height:1.4
}

body.app-ui .modifier-options-head-actions{
  display:flex;
  align-items:center;
  gap:6px
}

body.app-ui .modifier-options-head-actions>b{
  display:inline-flex;
  align-items:center;
  gap:3px;
  padding:4px 7px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--surface-2);
  color:var(--text-3);
  font-size:8.5px;
  font-weight:800;
  white-space:nowrap
}

body.app-ui .modifier-add-option{
  display:inline-flex;
  height:30px;
  align-items:center;
  justify-content:center;
  gap:4px;
  padding:0 8px;
  border:1px solid #bcdcc5;
  border-radius:8px;
  background:#f1faf4;
  color:var(--brand-strong);
  font-size:9.5px;
  font-weight:780;
  white-space:nowrap;
  cursor:pointer;
  transition:border-color .15s ease,background .15s ease,color .15s ease
}

body.app-ui .modifier-add-option:hover{
  border-color:var(--brand);
  background:var(--brand);
  color:#fff
}

body.app-ui .modifier-set-field{
  min-width:0
}

body.app-ui .modifier-set-field>label{
  display:block;
  margin:0 0 6px;
  color:var(--text-2);
  font-size:12px;
  font-weight:750
}

body.app-ui .modifier-set-field>label em{
  color:var(--danger);
  font-style:normal
}

body.app-ui .modifier-set-input-wrap{
  position:relative
}

body.app-ui .modifier-set-input-wrap>svg{
  position:absolute;
  top:13px;
  left:12px;
  z-index:1;
  color:var(--text-3);
  pointer-events:none
}

body.app-ui .modifier-set-input-wrap>.form-control{
  width:100%;
  height:42px;
  padding-left:38px;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface-2);
  box-shadow:none;
  color:var(--text);
  font-size:12.5px;
  transition:border-color .15s ease,background .15s ease,box-shadow .15s ease
}

body.app-ui .modifier-set-input-wrap>.form-control:focus{
  border-color:color-mix(in srgb,var(--brand) 55%,var(--border));
  background:var(--surface);
  box-shadow:0 0 0 3px rgba(34,145,69,.08)
}

body.app-ui .modifier-set-input-wrap:focus-within>svg{
  color:var(--brand-strong)
}

body.app-ui .modifier-options-table-wrap{
  overflow-x:auto
}

body.app-ui .modifier-options-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0 7px
}

body.app-ui .modifier-options-table thead th{
  padding:0 7px 2px;
  color:var(--text-3);
  font-size:8.5px;
  font-weight:850;
  letter-spacing:.06em;
  text-align:left;
  text-transform:uppercase
}

body.app-ui .modifier-options-table thead th:nth-child(2){
  width:190px
}

body.app-ui .modifier-options-table thead th:last-child{
  width:40px
}

body.app-ui .modifier-options-table tbody td{
  padding:0 4px;
  vertical-align:middle
}

body.app-ui .modifier-options-table tbody td:first-child{
  padding-left:0
}

body.app-ui .modifier-options-table tbody td:last-child{
  padding-right:0
}

body.app-ui .modifier-price-control{
  display:flex;
  align-items:stretch
}

body.app-ui .modifier-price-control>.form-control{
  min-width:0;
  height:42px;
  border:1px solid var(--border);
  border-radius:9px 0 0 9px;
  background:var(--surface-2);
  box-shadow:none;
  color:var(--text);
  font-size:12.5px;
  text-align:right
}

body.app-ui .modifier-price-control>span{
  display:flex;
  min-width:42px;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border);
  border-left:0;
  border-radius:0 9px 9px 0;
  background:var(--surface);
  color:var(--text-3);
  font-size:10px;
  font-weight:800
}

body.app-ui .modifier-price-control:focus-within>.form-control{
  border-color:color-mix(in srgb,var(--brand) 55%,var(--border));
  background:var(--surface);
  box-shadow:0 0 0 3px rgba(34,145,69,.08)
}

body.app-ui .modifier-price-control:focus-within>span{
  border-color:color-mix(in srgb,var(--brand) 55%,var(--border));
  background:#f1faf4;
  color:var(--brand-strong)
}

body.app-ui .modifier-row-action{
  display:grid;
  width:34px;
  height:34px;
  place-items:center;
  padding:0;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface);
  cursor:pointer;
  transition:border-color .15s ease,background .15s ease,color .15s ease,transform .15s ease
}

body.app-ui .modifier-row-action:hover{
  transform:translateY(-1px)
}

body.app-ui .modifier-row-action.is-add{
  border-color:#bcdcc5;
  background:#f1faf4;
  color:var(--brand-strong)
}

body.app-ui .modifier-row-action.is-add:hover{
  border-color:var(--brand);
  background:var(--brand);
  color:#fff
}

body.app-ui .modifier-row-action.is-remove{
  border-color:#ead6d3;
  background:#fff7f5;
  color:#b95245
}

body.app-ui .modifier-row-action.is-remove:hover{
  border-color:#ce6658;
  background:#ce6658;
  color:#fff
}

body.app-ui .modifier-row-action:disabled,body.app-ui .modifier-row-action:disabled:hover{
  border-color:var(--border);
  background:var(--surface-2);
  color:var(--text-3);
  opacity:.55;
  cursor:not-allowed;
  transform:none
}

body.app-ui .modifier-options-hint{
  display:flex;
  align-items:center;
  gap:5px;
  margin:8px 3px 0;
  color:var(--text-3);
  font-size:9.5px;
  line-height:1.4
}

body.app-ui .modifier-options-hint svg{
  flex:none;
  color:#b87523
}

body.app-ui .modifier-options-hint b{
  color:var(--text-2);
  font-weight:800
}

body.app-ui .modifier-set-modal-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 15px;
  border-top:1px solid var(--border);
  background:var(--surface)
}

body.app-ui .modifier-set-modal-footer>span{
  color:var(--text-3);
  font-size:9.5px;
  font-weight:650
}

body.app-ui .modifier-set-modal-footer>span i{
  color:var(--danger);
  font-style:normal
}

body.app-ui .modifier-set-modal-footer>div{
  display:flex;
  align-items:center;
  gap:8px
}

body.app-ui .modifier-set-modal-footer .btn-ghost,body.app-ui .modifier-set-modal-footer .btn-primary{
  height:40px;
  min-width:94px;
  justify-content:center
}

@media (max-width:760px){
  body.app-ui .modifier-set-modal-dialog{
    width:calc(100vw - 12px);
    margin:6px auto
  }

  body.app-ui .modifier-set-modal-header{
    padding:12px
  }

  body.app-ui .modifier-set-modal-header p{
    display:none
  }

  body.app-ui .modifier-set-modal-body{
    grid-template-columns:1fr;
    padding:10px
  }

  body.app-ui .modifier-options-table{
    min-width:520px
  }

  body.app-ui .modifier-set-modal-footer{
    align-items:stretch;
    flex-direction:column;
    padding:10px 12px
  }

  body.app-ui .modifier-set-modal-footer>span{
    text-align:center
  }

  body.app-ui .modifier-set-modal-footer>div{
    width:100%
  }

  body.app-ui .modifier-set-modal-footer .btn-ghost,body.app-ui .modifier-set-modal-footer .btn-primary{
    flex:1
  }
}

/* Tax rate modal ------------------------------------------------------- */

body.app-ui .tax-rate-modal-dialog{
  width:min(760px,calc(100vw - 24px));
  max-width:none;
  margin:8vh auto
}

body.app-ui .tax-rate-modal{
  overflow:hidden;
  border:0!important;
  border-radius:16px!important;
  background:var(--surface);
  box-shadow:0 26px 72px rgba(15,28,21,.3)
}

body.app-ui .tax-rate-modal-header{
  display:flex;
  align-items:center;
  gap:11px;
  padding:15px 17px;
  border-bottom:1px solid var(--border-2);
  background:linear-gradient(90deg,#fffaf0,var(--surface))
}

body.app-ui .tax-rate-modal-header>span{
  display:grid;
  width:42px;
  height:42px;
  flex:none;
  place-items:center;
  border-radius:11px;
  background:#fff0d2;
  color:#a96e20
}

body.app-ui .tax-rate-modal-header>div{
  min-width:0;
  flex:1
}

body.app-ui .tax-rate-modal-header small{
  display:block;
  color:#9a6a24;
  font-size:8.5px;
  font-weight:850;
  letter-spacing:.09em
}

body.app-ui .tax-rate-modal-header h4{
  margin:1px 0 0;
  color:var(--text);
  font-size:16px;
  font-weight:820;
  line-height:1.3
}

body.app-ui .tax-rate-modal-header p{
  margin:2px 0 0;
  color:var(--text-3);
  font-size:10.5px;
  line-height:1.4
}

body.app-ui .tax-rate-modal-close{
  display:grid;
  width:34px;
  height:34px;
  flex:none;
  place-items:center;
  padding:0;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface-2);
  color:var(--text-3);
  cursor:pointer;
  transition:background .15s ease,color .15s ease
}

body.app-ui .tax-rate-modal-close:hover{
  background:var(--surface-3);
  color:var(--text)
}

body.app-ui .tax-rate-modal-body{
  display:grid;
  gap:13px;
  padding:17px;
  background:#fbfcfb
}

body.app-ui .tax-rate-field-grid{
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(210px,.75fr);
  gap:12px
}

body.app-ui .tax-rate-modal-field{
  min-width:0
}

body.app-ui .tax-rate-modal-field>label{
  display:block;
  margin:0 0 6px;
  color:var(--text-2);
  font-size:12px;
  font-weight:750
}

body.app-ui .tax-rate-modal-field>label em{
  color:var(--danger);
  font-style:normal
}

body.app-ui .tax-rate-modal-field>small{
  display:block;
  margin-top:5px;
  color:var(--text-3);
  font-size:9.5px;
  line-height:1.4
}

body.app-ui .tax-rate-modal-field>small b{
  color:var(--text-2);
  font-weight:800
}

body.app-ui .tax-rate-input-with-icon{
  position:relative
}

body.app-ui .tax-rate-input-with-icon>svg{
  position:absolute;
  top:13px;
  left:12px;
  z-index:1;
  color:var(--text-3);
  pointer-events:none
}

body.app-ui .tax-rate-input-with-icon>.form-control,body.app-ui .tax-rate-percent-control>.form-control{
  width:100%;
  height:42px;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface);
  box-shadow:none;
  color:var(--text);
  font-size:12.5px
}

body.app-ui .tax-rate-input-with-icon>.form-control{
  padding-left:38px
}

body.app-ui .tax-rate-input-with-icon:focus-within>svg{
  color:var(--brand-strong)
}

body.app-ui .tax-rate-input-with-icon>.form-control:focus,body.app-ui .tax-rate-percent-control>.form-control:focus{
  border-color:color-mix(in srgb,var(--brand) 55%,var(--border));
  box-shadow:0 0 0 3px rgba(34,145,69,.08)
}

body.app-ui .tax-rate-percent-control{
  display:flex;
  align-items:stretch
}

body.app-ui .tax-rate-percent-control>.form-control{
  min-width:0;
  border-radius:9px 0 0 9px;
  text-align:right
}

body.app-ui .tax-rate-percent-control>span{
  display:flex;
  width:46px;
  flex:none;
  align-items:center;
  justify-content:center;
  border:1px solid #eadfc9;
  border-left:0;
  border-radius:0 9px 9px 0;
  background:#fff8eb;
  color:#9d6a21;
  font-size:13px;
  font-weight:850
}

body.app-ui .tax-rate-percent-control:focus-within>span{
  border-color:color-mix(in srgb,var(--brand) 55%,var(--border));
  background:#f1faf4;
  color:var(--brand-strong)
}

body.app-ui .tax-rate-scope-option{
  position:relative;
  display:grid;
  grid-template-columns:20px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  margin:0;
  padding:12px;
  border:1px solid var(--border);
  border-radius:11px;
  background:var(--surface);
  cursor:pointer;
  transition:border-color .15s ease,background .15s ease,box-shadow .15s ease
}

body.app-ui .tax-rate-scope-option:hover{
  border-color:#c9ddd0;
  background:#f9fcfa
}

body.app-ui .tax-rate-scope-option:has(.tax-rate-toggle-input:checked){
  border-color:#b8d9c1;
  background:#f1faf4;
  box-shadow:0 0 0 3px rgba(34,145,69,.05)
}

body.app-ui .tax-rate-toggle-input{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  opacity:0
}

body.app-ui .tax-rate-toggle-mark{
  display:grid;
  width:20px;
  height:20px;
  place-items:center;
  border:1px solid var(--border);
  border-radius:6px;
  background:var(--surface-2);
  color:transparent
}

body.app-ui .tax-rate-toggle-input:checked+.tax-rate-toggle-mark{
  border-color:var(--brand);
  background:var(--brand);
  color:#fff
}

body.app-ui .tax-rate-scope-copy{
  min-width:0
}

body.app-ui .tax-rate-scope-copy strong{
  display:block;
  color:var(--text-2);
  font-size:11.5px;
  font-weight:780
}

body.app-ui .tax-rate-scope-copy small{
  display:block;
  margin-top:2px;
  color:var(--text-3);
  font-size:9.5px;
  line-height:1.45
}

body.app-ui .tax-rate-scope-icon{
  color:var(--text-3)
}

body.app-ui .tax-rate-scope-option:has(.tax-rate-toggle-input:checked) .tax-rate-scope-icon{
  color:var(--brand-strong)
}

body.app-ui .tax-rate-modal-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 17px;
  border-top:1px solid var(--border-2);
  background:var(--surface)
}

body.app-ui .tax-rate-modal-footer>span{
  display:inline-flex;
  align-items:center;
  gap:5px;
  color:var(--text-3);
  font-size:9.5px;
  font-weight:650
}

body.app-ui .tax-rate-modal-footer>span i{
  color:var(--danger);
  font-style:normal
}

body.app-ui .tax-rate-modal-footer>div{
  display:flex;
  align-items:center;
  gap:8px
}

body.app-ui .tax-rate-modal-footer .btn-ghost,body.app-ui .tax-rate-modal-footer .btn-primary{
  height:40px;
  min-width:94px;
  justify-content:center
}

@media (max-width:580px){
  body.app-ui .tax-rate-modal-dialog{
    width:calc(100vw - 12px);
    margin:6px auto
  }

  body.app-ui .tax-rate-modal-header{
    padding:12px
  }

  body.app-ui .tax-rate-modal-header p{
    display:none
  }

  body.app-ui .tax-rate-modal-body{
    padding:12px
  }

  body.app-ui .tax-rate-field-grid{
    grid-template-columns:1fr
  }

  body.app-ui .tax-rate-modal-footer{
    align-items:stretch;
    flex-direction:column;
    padding:10px 12px
  }

  body.app-ui .tax-rate-modal-footer>span{
    text-align:center
  }

  body.app-ui .tax-rate-modal-footer>div{
    width:100%
  }

  body.app-ui .tax-rate-modal-footer .btn-ghost,body.app-ui .tax-rate-modal-footer .btn-primary{
    flex:1
  }
}

/* Tax group modal ------------------------------------------------------ */

body.app-ui .tax-group-modal-dialog{
  width:min(820px,calc(100vw - 24px))
}

body.app-ui .tax-group-modal-header{
  background:linear-gradient(90deg,#f4f9ff,var(--surface))
}

body.app-ui .tax-group-modal-header>span{
  background:#e6f1fc;
  color:#3979bc
}

body.app-ui .tax-group-modal-header small{
  color:#3974ae
}

body.app-ui .tax-group-modal-body{
  gap:12px
}

body.app-ui .tax-group-composer{
  display:grid;
  grid-template-columns:minmax(250px,.85fr) minmax(360px,1.35fr);
  gap:12px
}

body.app-ui .tax-group-rates-field>.select2-container{
  display:block;
  width:100%!important
}

body.app-ui .tax-group-rates-field>.select2-container .select2-selection--multiple{
  min-height:42px;
  padding:3px 7px;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface);
  box-shadow:none
}

body.app-ui .tax-group-rates-field>.select2-container.select2-container--focus .select2-selection--multiple{
  border-color:color-mix(in srgb,var(--brand) 55%,var(--border));
  box-shadow:0 0 0 3px rgba(34,145,69,.08)
}

body.app-ui .tax-group-rates-field>.select2-container .select2-selection__rendered{
  display:flex;
  align-items:center;
  gap:4px;
  flex-wrap:wrap;
  padding:0
}

body.app-ui .tax-group-rates-field>.select2-container .select2-selection__choice{
  display:inline-flex;
  align-items:center;
  margin:2px 0;
  padding:4px 7px;
  border:1px solid #cfe0f3;
  border-radius:6px;
  background:#edf5ff;
  color:#356d9f;
  font-size:10px;
  font-weight:700
}

body.app-ui .tax-group-rates-field>.select2-container .select2-selection__choice__remove{
  margin-right:5px;
  color:#6d91b4;
  font-weight:900
}

body.app-ui .tax-group-rates-field>.select2-container .select2-search--inline .select2-search__field{
  height:28px;
  margin:1px 0;
  padding:0 4px;
  color:var(--text);
  font-size:11.5px
}

body.app-ui .tax-group-calculation,body.app-ui .tax-group-empty-rates{
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 12px;
  border:1px solid #d9e7f6;
  border-radius:10px;
  background:#f4f9ff
}

body.app-ui .tax-group-calculation>span,body.app-ui .tax-group-empty-rates>span{
  display:grid;
  width:30px;
  height:30px;
  flex:none;
  place-items:center;
  border-radius:8px;
  background:#e4f0fc;
  color:#3979bc
}

body.app-ui .tax-group-calculation>div,body.app-ui .tax-group-empty-rates>div{
  min-width:0;
  flex:1
}

body.app-ui .tax-group-calculation strong,body.app-ui .tax-group-empty-rates strong{
  display:block;
  color:var(--text-2);
  font-size:11.5px;
  font-weight:780
}

body.app-ui .tax-group-calculation small,body.app-ui .tax-group-empty-rates small{
  display:block;
  margin-top:2px;
  color:var(--text-3);
  font-size:9.5px;
  line-height:1.4
}

body.app-ui .tax-group-calculation>b{
  padding:5px 8px;
  border:1px solid #cfe0f3;
  border-radius:999px;
  background:var(--surface);
  color:#3974ae;
  font-size:9px;
  font-weight:800;
  white-space:nowrap
}

body.app-ui .tax-group-empty-rates{
  border-color:#eddab7;
  background:#fff9ee
}

body.app-ui .tax-group-empty-rates>span{
  background:#ffefd0;
  color:#a66c1f
}

body.app-ui .tax-group-modal-footer .btn-primary:disabled{
  opacity:.5;
  box-shadow:none;
  cursor:not-allowed
}

@media (max-width:680px){
  body.app-ui .tax-group-composer{
    grid-template-columns:1fr
  }

  body.app-ui .tax-group-modal-footer>span{
    display:none
  }
}

/* Package subscriptions ---------------------------------------------- */

.app-shell .subscription-page{
  max-width:1480px
}

.app-shell .subscription-current{
  overflow:hidden;
  margin-bottom:12px;
  border:1px solid #cfe3d5;
  border-radius:16px;
  background:linear-gradient(115deg,#f4fbf6 0%,var(--surface) 58%);
  box-shadow:var(--shadow-sm)
}

.app-shell .subscription-current:has(.subscription-current-main){
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(430px,.8fr)
}

.app-shell .subscription-current-main{
  display:flex;
  min-width:0;
  align-items:flex-start;
  gap:14px;
  padding:20px 22px
}

.app-shell .subscription-plan-mark{
  display:grid;
  width:48px;
  height:48px;
  flex:none;
  place-items:center;
  border-radius:13px;
  background:var(--brand);
  color:#fff;
  box-shadow:0 8px 20px rgba(29,137,65,.2)
}

.app-shell .subscription-current-copy{
  min-width:0;
  flex:1
}

.app-shell .subscription-eyebrow{
  display:flex;
  align-items:center;
  gap:8px
}

.app-shell .subscription-eyebrow>span{
  color:var(--brand-strong);
  font-size:9px;
  font-weight:850;
  letter-spacing:.09em;
  text-transform:uppercase
}

.app-shell .subscription-eyebrow>b{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:4px 7px;
  border:1px solid #bfe0c8;
  border-radius:999px;
  background:var(--surface);
  color:#228347;
  font-size:9px;
  font-weight:800
}

.app-shell .subscription-eyebrow>b i{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#28a858;
  box-shadow:0 0 0 3px rgba(40,168,88,.1)
}

.app-shell .subscription-current-copy h2{
  margin:5px 0 0;
  color:var(--text);
  font-size:24px;
  font-weight:850;
  letter-spacing:-.025em
}

.app-shell .subscription-current-copy p{
  margin:3px 0 0;
  color:var(--text-3);
  font-size:11px;
  line-height:1.5
}

.app-shell .subscription-progress{
  height:6px;
  margin-top:14px;
  overflow:hidden;
  border-radius:999px;
  background:#deebe2
}

.app-shell .subscription-progress>span{
  display:block;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#1c954c,#55bf76)
}

.app-shell .subscription-current-copy>small{
  display:block;
  margin-top:6px;
  color:var(--text-3);
  font-size:9.5px;
  font-weight:650
}

.app-shell .subscription-current-dates{
  display:grid;
  grid-template-columns:minmax(130px,1fr) 30px minmax(130px,1fr) 108px;
  align-items:center;
  padding:15px 18px;
  border-left:1px solid #dce9e0;
  background:rgba(255,255,255,.58)
}

.app-shell .subscription-current-dates>div:not(.subscription-days-left){
  display:grid;
  grid-template-columns:30px minmax(0,1fr);
  grid-template-rows:auto auto;
  -moz-column-gap:8px;
       column-gap:8px
}

.app-shell .subscription-current-dates>div>span{
  display:grid;
  grid-row:1/3;
  width:30px;
  height:30px;
  place-items:center;
  border-radius:8px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .subscription-current-dates small{
  color:var(--text-3);
  font-size:9px;
  font-weight:650
}

.app-shell .subscription-current-dates strong{
  margin-top:1px;
  color:var(--text);
  font-size:11px;
  font-weight:780;
  white-space:nowrap
}

.app-shell .subscription-current-dates>i{
  height:1px;
  margin:0 7px;
  background:#cddbd1
}

.app-shell .subscription-days-left{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  padding:9px;
  border:1px solid #cbe1d1;
  border-radius:11px;
  background:var(--surface)
}

.app-shell .subscription-days-left b{
  color:var(--brand-strong);
  font-size:19px;
  font-weight:850;
  line-height:1
}

.app-shell .subscription-days-left small{
  margin-top:3px
}

.app-shell .subscription-no-plan{
  display:flex;
  align-items:center;
  gap:13px;
  padding:18px 20px
}

.app-shell .subscription-no-plan>span{
  display:grid;
  width:44px;
  height:44px;
  flex:none;
  place-items:center;
  border-radius:12px;
  background:#fff0dc;
  color:#a86b1d
}

.app-shell .subscription-no-plan>div{
  min-width:0;
  flex:1
}

.app-shell .subscription-no-plan small{
  color:#9c6d2c;
  font-size:8.5px;
  font-weight:850;
  letter-spacing:.09em
}

.app-shell .subscription-no-plan h2{
  margin:2px 0 0;
  color:var(--text);
  font-size:16px;
  font-weight:820
}

.app-shell .subscription-no-plan p{
  margin:2px 0 0;
  color:var(--text-3);
  font-size:10.5px
}

.app-shell .subscription-queue{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-bottom:12px
}

.app-shell .subscription-queue article{
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 13px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

.app-shell .subscription-queue article>span{
  display:grid;
  width:34px;
  height:34px;
  flex:none;
  place-items:center;
  border-radius:9px;
  background:#eaf3ff;
  color:#3979bc
}

.app-shell .subscription-queue article>span.is-amber{
  background:#fff1d8;
  color:#a66c1e
}

.app-shell .subscription-queue article>div{
  min-width:0;
  flex:1
}

.app-shell .subscription-queue article small{
  display:block;
  color:var(--brand-strong);
  font-size:8px;
  font-weight:850;
  letter-spacing:.08em
}

.app-shell .subscription-queue article strong{
  display:block;
  margin-top:1px;
  color:var(--text);
  font-size:12px;
  font-weight:800
}

.app-shell .subscription-queue article p{
  margin:1px 0 0;
  color:var(--text-3);
  font-size:9.5px
}

.app-shell .subscription-queue article>a,.app-shell .subscription-waiting-badge{
  padding:6px 9px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface-2);
  color:var(--text-2);
  font-size:9.5px;
  font-weight:750;
  text-decoration:none;
  white-space:nowrap
}

.app-shell .subscription-queue article>a:hover{
  border-color:var(--brand);
  color:var(--brand-strong)
}

.app-shell .subscription-waiting-badge{
  border-color:#efd9b3;
  background:#fff9ec;
  color:#9a6a20
}

.app-shell .subscription-workspace{
  overflow:hidden;
  margin-bottom:12px;
  border:1px solid var(--border);
  border-radius:15px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

.app-shell .subscription-section-head{
  display:flex;
  align-items:center;
  gap:10px;
  padding:13px 16px;
  border-bottom:1px solid var(--border-2);
  background:linear-gradient(90deg,#f5f9fe,var(--surface))
}

.app-shell .subscription-section-head>span{
  display:grid;
  width:38px;
  height:38px;
  flex:none;
  place-items:center;
  border-radius:10px;
  background:#e8f2ff;
  color:#3979bc
}

.app-shell .subscription-section-head.is-green{
  background:linear-gradient(90deg,#f6fbf8,var(--surface))
}

.app-shell .subscription-section-head.is-green>span{
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .subscription-section-head>div{
  min-width:0
}

.app-shell .subscription-section-head small{
  display:block;
  color:var(--brand-strong);
  font-size:8.5px;
  font-weight:850;
  letter-spacing:.09em
}

.app-shell .subscription-section-head h2{
  margin:1px 0 0;
  color:var(--text);
  font-size:14px;
  font-weight:820
}

.app-shell .subscription-section-head p{
  margin:2px 0 0;
  color:var(--text-3);
  font-size:10px;
  line-height:1.45
}

.app-shell .subscription-history-card{
  margin:0;
  border:0;
  border-radius:0;
  box-shadow:none
}

.app-shell .subscription-history-card .table-toolbar{
  border-top:0
}

.app-shell .subscription-history-card .data-table-content{
  border-radius:0
}

.app-shell .subscription-table-wrap{
  overflow-x:auto
}

.app-shell .subscription-history-table{
  min-width:1000px
}

.app-shell .subscription-history-table td{
  padding-top:11px!important;
  padding-bottom:11px!important;
  vertical-align:middle!important
}

.app-shell .subscription-history-table td:nth-child(1){
  width:19%;
  min-width:180px
}

.app-shell .subscription-history-table td:nth-child(2){
  width:24%;
  min-width:230px
}

.app-shell .subscription-history-table td:nth-child(3){
  width:20%;
  min-width:190px
}

.app-shell .subscription-history-table td:nth-child(4){
  width:120px
}

.app-shell .subscription-history-table td:nth-child(5){
  min-width:170px
}

.app-shell .subscription-history-table td:last-child{
  width:78px;
  text-align:right
}

.app-shell .subscription-plan-cell{
  display:flex;
  min-width:0;
  align-items:center;
  gap:9px
}

.app-shell .subscription-plan-cell>span{
  display:grid;
  width:32px;
  height:32px;
  flex:none;
  place-items:center;
  border-radius:8px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .subscription-plan-cell svg,.app-shell .subscription-empty svg{
  width:16px;
  height:16px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round
}

.app-shell .subscription-plan-cell strong,.app-shell .subscription-period strong,.app-shell .subscription-billing strong,.app-shell .subscription-created strong{
  display:block;
  color:var(--text);
  font-size:11px;
  font-weight:760;
  line-height:1.35
}

.app-shell .subscription-period strong span{
  padding:0 3px;
  color:var(--text-3)
}

.app-shell .subscription-period small,.app-shell .subscription-billing small,.app-shell .subscription-created small{
  display:block;
  margin-top:2px;
  overflow:hidden;
  max-width:250px;
  color:var(--text-3);
  font-size:9px;
  line-height:1.35;
  text-overflow:ellipsis;
  white-space:nowrap;
  text-transform:capitalize
}

.app-shell .subscription-status{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 8px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--surface-2);
  color:var(--text-2);
  font-size:9.5px;
  font-weight:750;
  text-transform:capitalize;
  white-space:nowrap
}

.app-shell .subscription-status i{
  width:6px;
  height:6px;
  border-radius:50%;
  background:currentColor
}

.app-shell .subscription-status.is-approved{
  border-color:#cce4d3;
  background:#f1faf4;
  color:#247f45
}

.app-shell .subscription-status.is-waiting{
  border-color:#ecd9b8;
  background:#fff9ed;
  color:#9a6a20
}

.app-shell .subscription-status.is-declined{
  border-color:#efcdcd;
  background:#fff4f4;
  color:#b34d4d
}

.app-shell .subscription-history-table .btn-modal{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  height:31px;
  padding:0 9px;
  border:1px solid var(--border)!important;
  border-radius:8px!important;
  background:var(--surface)!important;
  color:var(--text-2)!important;
  font-size:10px!important;
  font-weight:750!important;
  box-shadow:none!important
}

.app-shell .subscription-history-table .btn-modal:hover{
  border-color:var(--brand)!important;
  background:var(--brand-weak)!important;
  color:var(--brand-strong)!important
}

.app-shell .subscription-empty{
  display:flex;
  min-height:190px;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  padding:28px;
  text-align:center
}

.app-shell .subscription-empty>span{
  display:grid;
  width:46px;
  height:46px;
  place-items:center;
  border-radius:13px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .subscription-empty strong{
  margin-top:9px;
  color:var(--text);
  font-size:12px;
  font-weight:800
}

.app-shell .subscription-empty small{
  margin-top:3px;
  color:var(--text-3);
  font-size:10px
}

.app-shell .subscription-history-table td.dataTables_empty{
  padding:0!important
}

.app-shell .subscription-package-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  padding:14px;
  background:#fafcfb
}

.app-shell .subscription-package-card{
  position:relative;
  display:flex;
  min-width:0;
  overflow:hidden;
  flex-direction:column;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  box-shadow:0 2px 7px rgba(20,37,27,.035);
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease
}

.app-shell .subscription-package-card:hover{
  transform:translateY(-2px);
  border-color:#c6dbcc;
  box-shadow:0 10px 25px rgba(20,37,27,.08)
}

.app-shell .subscription-package-card.is-popular{
  border-color:#a9d6b5
}

.app-shell .subscription-package-topline{
  height:3px;
  background:transparent
}

.app-shell .subscription-package-card.is-popular .subscription-package-topline{
  background:linear-gradient(90deg,#1b9149,#73c98e)
}

.app-shell .subscription-package-card>header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:13px 14px 0
}

.app-shell .subscription-package-icon{
  display:grid;
  width:36px;
  height:36px;
  place-items:center;
  border-radius:10px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .subscription-package-badges{
  display:flex;
  align-items:center;
  gap:5px
}

.app-shell .subscription-package-badges b{
  padding:4px 7px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--surface-2);
  color:var(--text-3);
  font-size:8px;
  font-weight:850;
  text-transform:uppercase
}

.app-shell .subscription-package-badges b.is-current{
  border-color:#badcc3;
  background:#f0faf3;
  color:#247f45
}

.app-shell .subscription-package-badges b.is-popular{
  border-color:#d9ceef;
  background:#f7f3ff;
  color:#7254a9
}

.app-shell .subscription-package-name{
  padding:11px 14px 0
}

.app-shell .subscription-package-name h3{
  margin:0;
  color:var(--text);
  font-size:15px;
  font-weight:830
}

.app-shell .subscription-package-name p{
  min-height:29px;
  margin:3px 0 0;
  color:var(--text-3);
  font-size:9.5px;
  line-height:1.45
}

.app-shell .subscription-package-price{
  display:flex;
  min-height:56px;
  align-items:flex-end;
  gap:5px;
  padding:10px 14px 11px
}

.app-shell .subscription-package-price strong{
  color:var(--text);
  font-size:20px;
  font-weight:850;
  line-height:1.2
}

.app-shell .subscription-package-price span{
  padding-bottom:2px;
  color:var(--text-3);
  font-size:9px;
  font-weight:650
}

.app-shell .subscription-package-rule{
  height:1px;
  margin:0 14px;
  background:var(--border-2)
}

.app-shell .subscription-package-features{
  display:grid;
  gap:8px;
  margin:0;
  padding:12px 14px 14px;
  list-style:none
}

.app-shell .subscription-package-features li{
  display:flex;
  align-items:flex-start;
  gap:7px;
  color:var(--text-2);
  font-size:10px;
  line-height:1.4
}

.app-shell .subscription-package-features li>svg{
  flex:none;
  margin-top:1px;
  padding:2px;
  border-radius:50%;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .subscription-package-features li b{
  color:var(--text);
  font-weight:780
}

.app-shell .subscription-package-card>footer{
  margin-top:auto;
  padding:0 14px 14px
}

.app-shell .subscription-package-action{
  display:flex;
  height:39px;
  align-items:center;
  justify-content:center;
  gap:7px;
  border:1px solid #b7d9c0;
  border-radius:9px;
  background:#f3faf5;
  color:var(--brand-strong);
  font-size:10.5px;
  font-weight:800;
  text-decoration:none;
  transition:background .15s ease,color .15s ease,box-shadow .15s ease
}

.app-shell .subscription-package-card.is-popular .subscription-package-action,.app-shell .subscription-package-action:hover{
  border-color:var(--brand);
  background:var(--brand);
  color:#fff;
  box-shadow:0 6px 14px rgba(25,143,70,.16)
}

.app-shell .subscription-packages-empty{
  grid-column:1/-1;
  display:flex;
  min-height:180px;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  text-align:center
}

.app-shell .subscription-packages-empty>span{
  display:grid;
  width:48px;
  height:48px;
  place-items:center;
  border-radius:13px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .subscription-packages-empty strong{
  margin-top:9px;
  color:var(--text);
  font-size:12.5px;
  font-weight:800
}

.app-shell .subscription-packages-empty small{
  margin-top:3px;
  color:var(--text-3);
  font-size:10px
}

@media (max-width:1100px){
  .app-shell .subscription-current:has(.subscription-current-main){
    grid-template-columns:1fr
  }

  .app-shell .subscription-current-dates{
    border-top:1px solid #dce9e0;
    border-left:0
  }

  .app-shell .subscription-package-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}

@media (max-width:720px){
  .app-shell .subscription-current-main{
    padding:16px
  }

  .app-shell .subscription-current-dates{
    grid-template-columns:1fr 20px 1fr
  }

  .app-shell .subscription-days-left{
    display:none
  }

  .app-shell .subscription-queue{
    grid-template-columns:1fr
  }

  .app-shell .subscription-section-head p{
    display:none
  }

  .app-shell .subscription-package-grid{
    grid-template-columns:1fr
  }

  .app-shell .subscription-no-plan{
    align-items:flex-start;
    flex-wrap:wrap
  }

  .app-shell .subscription-no-plan .btn-primary{
    width:100%;
    justify-content:center
  }
}

/* Subscription detail receipt ---------------------------------------- */

body.app-ui .subscription-detail-dialog{
  width:min(860px,calc(100vw - 24px));
  max-width:none;
  margin:5vh auto
}

body.app-ui .subscription-detail-modal{
  overflow:hidden;
  border:0!important;
  border-radius:17px!important;
  background:var(--surface);
  box-shadow:0 28px 80px rgba(12,25,17,.34)
}

body.app-ui .subscription-detail-header{
  display:flex;
  align-items:center;
  gap:11px;
  padding:15px 17px;
  border-bottom:1px solid var(--border-2);
  background:linear-gradient(90deg,#f5fbf7,var(--surface))
}

body.app-ui .subscription-detail-header>span:first-child{
  display:grid;
  width:42px;
  height:42px;
  flex:none;
  place-items:center;
  border-radius:11px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

body.app-ui .subscription-detail-header>div{
  min-width:0;
  flex:1
}

body.app-ui .subscription-detail-header>div small{
  display:block;
  color:var(--brand-strong);
  font-size:8.5px;
  font-weight:850;
  letter-spacing:.09em
}

body.app-ui .subscription-detail-header h4{
  margin:1px 0 0;
  color:var(--text);
  font-size:16px;
  font-weight:830;
  line-height:1.25
}

body.app-ui .subscription-detail-header p{
  margin:2px 0 0;
  color:var(--text-3);
  font-size:10px;
  line-height:1.4
}

body.app-ui .subscription-detail-status{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 8px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--surface);
  color:var(--text-2);
  font-size:9px;
  font-weight:800;
  text-transform:capitalize;
  white-space:nowrap
}

body.app-ui .subscription-detail-status i{
  width:6px;
  height:6px;
  border-radius:50%;
  background:currentColor
}

body.app-ui .subscription-detail-status.is-approved{
  border-color:#c7e1ce;
  background:#f0faf3;
  color:#247f45
}

body.app-ui .subscription-detail-status.is-waiting{
  border-color:#ead6b2;
  background:#fff8eb;
  color:#98681f
}

body.app-ui .subscription-detail-status.is-declined{
  border-color:#edcaca;
  background:#fff3f3;
  color:#b24a4a
}

body.app-ui .subscription-detail-close{
  display:grid;
  width:34px;
  height:34px;
  flex:none;
  place-items:center;
  padding:0;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface-2);
  color:var(--text-3);
  cursor:pointer;
  transition:background .15s ease,color .15s ease
}

body.app-ui .subscription-detail-close:hover{
  background:var(--surface-3);
  color:var(--text)
}

body.app-ui .subscription-detail-body{
  display:grid;
  gap:11px;
  padding:14px!important;
  background:#fafcfb
}

body.app-ui .subscription-detail-hero{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:15px;
  padding:15px 16px;
  border:1px solid #cfe3d5;
  border-radius:13px;
  background:linear-gradient(110deg,#f3faf5,#fff)
}

body.app-ui .subscription-detail-plan{
  display:flex;
  min-width:0;
  align-items:center;
  gap:11px
}

body.app-ui .subscription-detail-plan>span{
  display:grid;
  width:40px;
  height:40px;
  flex:none;
  place-items:center;
  border-radius:10px;
  background:var(--brand);
  color:#fff;
  box-shadow:0 6px 15px rgba(29,137,65,.17)
}

body.app-ui .subscription-detail-plan small,body.app-ui .subscription-detail-price small{
  display:block;
  color:var(--brand-strong);
  font-size:8px;
  font-weight:850;
  letter-spacing:.09em
}

body.app-ui .subscription-detail-plan h3{
  margin:2px 0 0;
  color:var(--text);
  font-size:17px;
  font-weight:840;
  line-height:1.25
}

body.app-ui .subscription-detail-plan p{
  margin:1px 0 0;
  color:var(--text-3);
  font-size:9.5px
}

body.app-ui .subscription-detail-price{
  text-align:right
}

body.app-ui .subscription-detail-price strong{
  display:block;
  margin-top:2px;
  color:var(--text);
  font-size:21px;
  font-weight:850;
  line-height:1.2
}

body.app-ui .subscription-detail-price>span{
  display:inline-flex;
  margin-top:3px;
  padding:3px 6px;
  border-radius:999px;
  background:#e9f7ed;
  color:#267f47;
  font-size:8px;
  font-weight:750
}

body.app-ui .subscription-detail-period{
  display:grid;
  grid-template-columns:minmax(0,1fr) 32px minmax(0,1fr) auto;
  align-items:center;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:11px;
  background:var(--surface)
}

body.app-ui .subscription-detail-period>div:not(.subscription-detail-trial){
  display:grid;
  grid-template-columns:30px minmax(0,1fr);
  grid-template-rows:auto auto;
  -moz-column-gap:8px;
       column-gap:8px
}

body.app-ui .subscription-detail-period>div>span{
  display:grid;
  grid-row:1/3;
  width:30px;
  height:30px;
  place-items:center;
  border-radius:8px;
  background:#eaf3ff;
  color:#3979bc
}

body.app-ui .subscription-detail-period small{
  color:var(--text-3);
  font-size:8.5px;
  font-weight:680;
  text-transform:uppercase
}

body.app-ui .subscription-detail-period strong{
  margin-top:1px;
  color:var(--text);
  font-size:10.5px;
  font-weight:780
}

body.app-ui .subscription-detail-period>i{
  height:1px;
  margin:0 7px;
  background:var(--border)
}

body.app-ui .subscription-detail-trial{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  flex-direction:column;
  padding-left:13px;
  border-left:1px solid var(--border-2)
}

body.app-ui .subscription-detail-parties{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px
}

body.app-ui .subscription-detail-parties>section,body.app-ui .subscription-detail-payment{
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface)
}

body.app-ui .subscription-detail-parties header,body.app-ui .subscription-detail-payment>header{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-bottom:1px solid var(--border-2);
  background:var(--surface-2)
}

body.app-ui .subscription-detail-parties header>span,body.app-ui .subscription-detail-payment>header>span{
  display:grid;
  width:30px;
  height:30px;
  flex:none;
  place-items:center;
  border-radius:8px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

body.app-ui .subscription-detail-parties header>span.is-blue,body.app-ui .subscription-detail-payment>header>span{
  background:#eaf3ff;
  color:#3979bc
}

body.app-ui .subscription-detail-parties header small,body.app-ui .subscription-detail-payment>header small{
  display:block;
  color:var(--brand-strong);
  font-size:7.5px;
  font-weight:850;
  letter-spacing:.08em
}

body.app-ui .subscription-detail-parties header strong,body.app-ui .subscription-detail-payment>header strong{
  display:block;
  margin-top:1px;
  color:var(--text);
  font-size:11px;
  font-weight:790
}

body.app-ui .subscription-detail-parties dl,body.app-ui .subscription-detail-payment dl,body.app-ui .subscription-detail-discount dl{
  margin:0
}

body.app-ui .subscription-detail-parties dl{
  display:grid;
  padding:5px 12px 8px
}

body.app-ui .subscription-detail-parties dl>div{
  display:grid;
  grid-template-columns:110px minmax(0,1fr);
  gap:8px;
  padding:7px 0;
  border-bottom:1px solid var(--border-2)
}

body.app-ui .subscription-detail-parties dl>div:last-child{
  border-bottom:0
}

body.app-ui .subscription-detail-parties dt,body.app-ui .subscription-detail-payment dt,body.app-ui .subscription-detail-discount dt{
  color:var(--text-3);
  font-size:9px;
  font-weight:680
}

body.app-ui .subscription-detail-parties dd,body.app-ui .subscription-detail-payment dd,body.app-ui .subscription-detail-discount dd{
  min-width:0;
  margin:0;
  color:var(--text-2);
  font-size:9.5px;
  font-weight:720;
  line-height:1.4
}

body.app-ui .subscription-detail-discount{
  display:flex;
  align-items:center;
  gap:9px;
  padding:10px 12px;
  border:1px solid #ecd9b7;
  border-radius:11px;
  background:#fff9ed
}

body.app-ui .subscription-detail-discount>span{
  display:grid;
  width:32px;
  height:32px;
  flex:none;
  place-items:center;
  border-radius:8px;
  background:#ffedca;
  color:#a66b1c
}

body.app-ui .subscription-detail-discount>div{
  min-width:0;
  flex:1
}

body.app-ui .subscription-detail-discount>div strong{
  display:block;
  color:var(--text);
  font-size:10.5px;
  font-weight:790
}

body.app-ui .subscription-detail-discount>div small{
  display:block;
  margin-top:1px;
  color:#946b2e;
  font-size:8.5px
}

body.app-ui .subscription-detail-discount dl{
  display:flex;
  gap:18px
}

body.app-ui .subscription-detail-discount dl>div{
  text-align:right
}

body.app-ui .subscription-detail-discount dd{
  margin-top:2px;
  color:#8c5d18;
  font-weight:800
}

body.app-ui .subscription-detail-payment dl{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr))
}

body.app-ui .subscription-detail-payment dl>div{
  display:grid;
  grid-template-columns:95px minmax(0,1fr);
  gap:8px;
  padding:9px 12px;
  border-right:1px solid var(--border-2);
  border-bottom:1px solid var(--border-2)
}

body.app-ui .subscription-detail-payment dl>div:nth-child(2n){
  border-right:0
}

body.app-ui .subscription-detail-payment dl>div:nth-last-child(-n+2){
  border-bottom:0
}

body.app-ui .subscription-payment-method{
  text-transform:capitalize
}

body.app-ui .subscription-transaction-id{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

body.app-ui .subscription-detail-footer{
  display:flex!important;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 16px!important;
  border-top:1px solid var(--border-2)!important;
  background:var(--surface)!important;
  text-align:left!important
}

body.app-ui .subscription-detail-footer>span{
  display:inline-flex;
  align-items:center;
  gap:5px;
  color:var(--text-3);
  font-size:9px;
  font-weight:650
}

body.app-ui .subscription-detail-footer>span svg{
  color:var(--brand-strong)
}

body.app-ui .subscription-detail-footer>div{
  display:flex;
  align-items:center;
  gap:8px
}

body.app-ui .subscription-detail-footer .btn-ghost,body.app-ui .subscription-detail-footer .btn-primary{
  height:38px;
  min-width:88px;
  justify-content:center
}

@media (max-width:680px){
  body.app-ui .subscription-detail-dialog{
    width:calc(100vw - 12px);
    margin:6px auto
  }

  body.app-ui .subscription-detail-header{
    padding:12px
  }

  body.app-ui .subscription-detail-header p,body.app-ui .subscription-detail-status{
    display:none
  }

  body.app-ui .subscription-detail-body{
    padding:10px!important
  }

  body.app-ui .subscription-detail-parties{
    grid-template-columns:1fr
  }

  body.app-ui .subscription-detail-period{
    grid-template-columns:1fr 20px 1fr
  }

  .app-shell .subscription-detail-trial{
    display:none
  }

  body.app-ui .subscription-detail-payment dl{
    grid-template-columns:1fr
  }

  body.app-ui .subscription-detail-payment dl>div{
    border-right:0;
    border-bottom:1px solid var(--border-2)!important
  }

  body.app-ui .subscription-detail-payment dl>div:last-child{
    border-bottom:0!important
  }

  body.app-ui .subscription-detail-footer{
    align-items:stretch;
    flex-direction:column
  }

  body.app-ui .subscription-detail-footer>span{
    text-align:center
  }

  body.app-ui .subscription-detail-footer>div{
    width:100%
  }

  body.app-ui .subscription-detail-footer .btn-ghost,body.app-ui .subscription-detail-footer .btn-primary{
    flex:1
  }
}

@media print{
  body.app-ui .subscription-detail-dialog{
    width:100%;
    margin:0
  }

  body.app-ui .subscription-detail-modal{
    box-shadow:none
  }

  body.app-ui .subscription-detail-body{
    padding:0!important;
    background:var(--surface)
  }

  body.app-ui .subscription-detail-hero,body.app-ui .subscription-detail-period,body.app-ui .subscription-detail-parties,body.app-ui .subscription-detail-payment,body.app-ui .subscription-detail-discount{
    -moz-column-break-inside:avoid;
         break-inside:avoid
  }
}

/* Superadmin business directory -------------------------------------- */

.app-shell .superadmin-businesses-page{
  max-width:1540px
}

.app-shell .superadmin-business-summary{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin:16px 0
}

.app-shell .superadmin-business-summary>article{
  display:flex;
  min-width:0;
  align-items:center;
  gap:12px;
  padding:14px 15px;
  border:1px solid var(--border);
  border-radius:13px;
  background:var(--surface);
  box-shadow:0 5px 18px -14px rgba(16,32,24,.38)
}

.app-shell .superadmin-business-summary>article>span{
  display:grid;
  width:39px;
  height:39px;
  flex:none;
  place-items:center;
  border-radius:10px
}

.app-shell .superadmin-business-summary>article>span.is-blue{
  background:#eaf3ff;
  color:#3979bc
}

.app-shell .superadmin-business-summary>article>span.is-green{
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .superadmin-business-summary>article>span.is-violet{
  background:#f0eafe;
  color:#7954b5
}

.app-shell .superadmin-business-summary>article>span.is-amber{
  background:#fff2de;
  color:#b87523
}

.app-shell .superadmin-business-summary>article>div{
  display:grid;
  min-width:0;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-rows:auto auto
}

.app-shell .superadmin-business-summary small{
  grid-column:1;
  color:var(--text-3);
  font-size:8px;
  font-weight:850;
  letter-spacing:.065em;
  white-space:nowrap
}

.app-shell .superadmin-business-summary strong{
  grid-column:2;
  grid-row:1/3;
  align-self:center;
  margin-left:12px;
  color:var(--text);
  font-size:22px;
  font-weight:880;
  letter-spacing:-.03em
}

.app-shell .superadmin-business-summary p{
  grid-column:1;
  overflow:hidden;
  margin:2px 0 0;
  color:var(--text-2);
  font-size:10.5px;
  font-weight:650;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .superadmin-business-filters{
  overflow:hidden;
  margin-bottom:14px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

.app-shell .superadmin-business-filters>header{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-bottom:1px solid var(--border-2);
  background:linear-gradient(90deg,#f7fbf8,var(--surface))
}

.app-shell .superadmin-business-filters>header>span,.app-shell .superadmin-business-section-head>span{
  display:grid;
  width:34px;
  height:34px;
  flex:none;
  place-items:center;
  border-radius:9px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .superadmin-business-filters>header>div{
  min-width:0;
  flex:1
}

.app-shell .superadmin-business-filters>header small,.app-shell .superadmin-business-section-head small{
  display:block;
  color:var(--brand-strong);
  font-size:8px;
  font-weight:850;
  letter-spacing:.08em
}

.app-shell .superadmin-business-filters>header h2,.app-shell .superadmin-business-section-head h2{
  margin:1px 0 0;
  color:var(--text);
  font-size:13.5px;
  font-weight:820
}

.app-shell .superadmin-business-filters>header p,.app-shell .superadmin-business-section-head p{
  margin:2px 0 0;
  color:var(--text-3);
  font-size:9.5px;
  line-height:1.4
}

.app-shell .superadmin-business-filters>header .btn-ghost{
  height:34px;
  padding:0 10px;
  font-size:10.5px
}

.app-shell .superadmin-business-filter-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:10px;
  padding:13px 14px 14px
}

.app-shell .superadmin-business-filter-grid>label{
  display:block;
  min-width:0;
  margin:0
}

.app-shell .superadmin-business-filter-grid>label>span{
  display:block;
  margin-bottom:5px;
  color:var(--text-2);
  font-size:10px;
  font-weight:740
}

.app-shell .superadmin-business-filter-grid .select2-container{
  width:100%!important
}

.app-shell .superadmin-business-filter-grid .select2-selection--single{
  height:38px!important;
  border:1px solid var(--border)!important;
  border-radius:9px!important;
  background:var(--surface-2)!important
}

.app-shell .superadmin-business-filter-grid .select2-selection__rendered{
  padding-left:11px!important;
  color:var(--text-2)!important;
  font-size:11px!important;
  line-height:36px!important
}

.app-shell .superadmin-business-filter-grid .select2-selection__arrow{
  height:36px!important;
  right:5px!important
}

.app-shell .superadmin-business-filter-grid .select2-container--open .select2-selection--single{
  border-color:var(--brand)!important;
  background:var(--surface)!important;
  box-shadow:0 0 0 3px rgba(34,145,69,.08)!important
}

.app-shell .superadmin-business-workspace{
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

.app-shell .superadmin-business-section-head{
  display:flex;
  align-items:center;
  gap:10px;
  padding:13px 15px;
  border-bottom:1px solid var(--border-2);
  background:linear-gradient(90deg,#f9fbfa,var(--surface))
}

.app-shell .superadmin-business-section-head>div{
  min-width:0;
  flex:1
}

.app-shell .superadmin-business-section-head>b{
  display:inline-flex;
  align-items:center;
  padding:5px 8px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--surface);
  color:var(--text-3);
  font-size:9px;
  font-weight:800;
  white-space:nowrap
}

.app-shell .superadmin-business-list-card{
  margin:0;
  border:0;
  border-radius:0;
  box-shadow:none
}

.app-shell .superadmin-business-list-card .table-toolbar{
  border-top:0
}

.app-shell .superadmin-business-list-card .data-table-content{
  border-radius:0
}

.app-shell .superadmin-business-table-wrap{
  overflow-x:auto
}

.app-shell .superadmin-business-table{
  min-width:1160px
}

.app-shell .superadmin-business-table td{
  padding-top:11px!important;
  padding-bottom:11px!important;
  vertical-align:middle!important
}

.app-shell .superadmin-business-table td:nth-child(1){
  min-width:250px
}

.app-shell .superadmin-business-table td:nth-child(2){
  min-width:145px
}

.app-shell .superadmin-business-table td:nth-child(3){
  min-width:190px
}

.app-shell .superadmin-business-table td:nth-child(4){
  min-width:170px
}

.app-shell .superadmin-business-table td:nth-child(5){
  width:90px
}

.app-shell .superadmin-business-table td:nth-child(6){
  min-width:155px
}

.app-shell .superadmin-business-table td:last-child{
  width:150px
}

.app-shell .superadmin-business-identity{
  display:flex;
  min-width:0;
  align-items:center;
  gap:10px
}

.app-shell .superadmin-business-identity>span{
  display:grid;
  width:35px;
  height:35px;
  flex:none;
  place-items:center;
  border:1px solid #bfdec8;
  border-radius:9px;
  background:var(--brand-weak);
  color:var(--brand-strong);
  font-size:12px;
  font-weight:850
}

.app-shell .superadmin-business-identity>div{
  min-width:0
}

.app-shell .superadmin-business-identity strong,.app-shell .superadmin-business-contact strong,.app-shell .superadmin-business-address strong,.app-shell .superadmin-business-plan strong,.app-shell .superadmin-business-created strong{
  display:block;
  overflow:hidden;
  color:var(--text);
  font-size:11.5px;
  font-weight:780;
  line-height:1.35;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .superadmin-business-identity small,.app-shell .superadmin-business-contact small,.app-shell .superadmin-business-address small,.app-shell .superadmin-business-plan small,.app-shell .superadmin-business-created small{
  display:block;
  overflow:hidden;
  margin-top:2px;
  color:var(--text-3);
  font-size:9px;
  line-height:1.35;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .superadmin-business-contact,.app-shell .superadmin-business-address,.app-shell .superadmin-business-plan,.app-shell .superadmin-business-created{
  min-width:0
}

.app-shell .superadmin-business-plan strong{
  color:var(--brand-strong)
}

.app-shell .superadmin-business-status{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:5px 8px;
  border:1px solid var(--border);
  border-radius:999px;
  font-size:9px;
  font-weight:800;
  white-space:nowrap
}

.app-shell .superadmin-business-status>i{
  width:5px;
  height:5px;
  border-radius:50%;
  background:currentColor
}

.app-shell .superadmin-business-status.is-active{
  border-color:#c9e4d0;
  background:#f2faf4;
  color:#23723b
}

.app-shell .superadmin-business-status.is-inactive{
  border-color:#e5d9d5;
  background:#fbf7f5;
  color:#9a5c49
}

.app-shell .superadmin-business-no-plan{
  display:inline-flex;
  padding:5px 7px;
  border-radius:7px;
  background:var(--surface-3);
  color:var(--text-3);
  font-size:9px;
  font-weight:700;
  white-space:nowrap
}

.app-shell .superadmin-business-row-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  white-space:nowrap
}

.app-shell .superadmin-business-manage{
  display:inline-flex;
  height:32px;
  align-items:center;
  gap:6px;
  padding:0 9px;
  border:1px solid #badcc4;
  border-radius:8px;
  background:var(--brand-weak);
  color:var(--brand-strong);
  font-size:10px;
  font-weight:800;
  text-decoration:none
}

.app-shell .superadmin-business-manage:hover{
  border-color:var(--brand);
  background:var(--brand);
  color:#fff
}

.app-shell .superadmin-business-action-menu{
  min-width:205px
}

.app-shell .superadmin-business-action-menu .table-action-icon{
  width:16px;
  height:16px;
  flex:0 0 16px
}

.app-shell .superadmin-business-action-menu>li>button>*{
  pointer-events:none
}

.app-shell .superadmin-business-empty{
  display:flex;
  min-height:230px;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  padding:30px 18px;
  text-align:center
}

.app-shell .superadmin-business-empty>span{
  display:grid;
  width:50px;
  height:50px;
  place-items:center;
  border-radius:13px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .superadmin-business-empty svg{
  width:24px;
  height:24px;
  fill:none;
  stroke:currentColor;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-width:1.7
}

.app-shell .superadmin-business-empty strong{
  margin-top:10px;
  color:var(--text);
  font-size:13px;
  font-weight:800
}

.app-shell .superadmin-business-empty small{
  max-width:420px;
  margin-top:3px;
  color:var(--text-3);
  font-size:10.5px;
  line-height:1.5
}

.app-shell .superadmin-business-table td.dataTables_empty{
  padding:0!important
}

@media (max-width:1120px){
  .app-shell .superadmin-business-summary{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

  .app-shell .superadmin-business-filter-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))
  }
}

@media (max-width:760px){
  .app-shell .superadmin-business-filter-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

  .app-shell .superadmin-business-filters>header p,.app-shell .superadmin-business-section-head p{
    display:none
  }
}

@media (max-width:520px){
  .app-shell .superadmin-business-summary{
    grid-template-columns:1fr
  }

  .app-shell .superadmin-business-filter-grid{
    grid-template-columns:1fr
  }

  .app-shell .superadmin-business-section-head>b{
    display:none
  }
}

/* Superadmin business profile ---------------------------------------- */

.app-shell .superadmin-business-profile-page{
  max-width:1540px
}

.app-shell .superadmin-business-profile-hero{
  display:grid;
  grid-template-columns:minmax(310px,1.05fr) minmax(560px,1.8fr) minmax(210px,.72fr);
  align-items:stretch;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:15px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

.app-shell .superadmin-business-profile-identity{
  display:flex;
  min-width:0;
  align-items:center;
  gap:14px;
  padding:17px 18px;
  border-right:1px solid var(--border-2);
  background:linear-gradient(135deg,#f3faf5,var(--surface))
}

.app-shell .superadmin-business-profile-logo{
  display:grid;
  width:64px;
  height:64px;
  flex:none;
  overflow:hidden;
  place-items:center;
  border:1px solid #b9ddc4;
  border-radius:15px;
  background:var(--brand-weak);
  box-shadow:0 10px 22px -16px rgba(30,119,59,.7);
  color:var(--brand-strong)
}

.app-shell .superadmin-business-profile-logo img{
  width:100%;
  height:100%;
  -o-object-fit:contain;
     object-fit:contain;
  padding:6px;
  background:var(--surface)
}

.app-shell .superadmin-business-profile-logo span{
  font-size:23px;
  font-weight:900
}

.app-shell .superadmin-business-profile-identity>div:last-child{
  min-width:0
}

.app-shell .superadmin-business-profile-identity small,.app-shell .superadmin-business-current-plan small{
  display:block;
  color:var(--brand-strong);
  font-size:8px;
  font-weight:850;
  letter-spacing:.085em
}

.app-shell .superadmin-business-profile-identity h2{
  overflow:hidden;
  margin:2px 0 0;
  color:var(--text);
  font-size:18px;
  font-weight:850;
  letter-spacing:-.025em;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .superadmin-business-profile-identity p{
  overflow:hidden;
  margin:3px 0 0;
  color:var(--text-3);
  font-size:10px;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .superadmin-business-profile-badges{
  display:flex;
  align-items:center;
  gap:5px;
  margin-top:9px;
  flex-wrap:wrap
}

.app-shell .superadmin-business-profile-badges>span{
  display:inline-flex;
  height:24px;
  align-items:center;
  gap:5px;
  padding:0 7px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--surface);
  color:var(--text-3);
  font-size:8.5px;
  font-weight:750;
  white-space:nowrap
}

.app-shell .superadmin-business-profile-badges>span>i{
  width:5px;
  height:5px;
  border-radius:50%;
  background:currentColor
}

.app-shell .superadmin-business-profile-badges>span.is-active{
  border-color:#c8e3cf;
  background:#f1faf4;
  color:#24733c
}

.app-shell .superadmin-business-profile-badges>span.is-inactive{
  border-color:#eadbd6;
  background:#fcf6f4;
  color:#a45d49
}

.app-shell .superadmin-business-profile-facts{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  margin:0;
  padding:8px
}

.app-shell .superadmin-business-profile-facts>div{
  min-width:0;
  padding:9px 10px;
  border-right:1px solid var(--border-2);
  border-bottom:1px solid var(--border-2)
}

.app-shell .superadmin-business-profile-facts>div:nth-child(3n){
  border-right:0
}

.app-shell .superadmin-business-profile-facts>div:nth-last-child(-n+3){
  border-bottom:0
}

.app-shell .superadmin-business-profile-facts dt{
  display:flex;
  align-items:center;
  gap:5px;
  color:var(--text-3);
  font-size:8.5px;
  font-weight:700
}

.app-shell .superadmin-business-profile-facts dt svg{
  color:#87968d
}

.app-shell .superadmin-business-profile-facts dd{
  overflow:hidden;
  margin:4px 0 0;
  color:var(--text);
  font-size:10.5px;
  font-weight:750;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .superadmin-business-current-plan{
  display:flex;
  min-width:0;
  align-items:center;
  gap:10px;
  padding:15px;
  border-left:1px solid var(--border-2);
  background:linear-gradient(145deg,#fffaf0,#fff)
}

.app-shell .superadmin-business-current-plan>span{
  display:grid;
  width:38px;
  height:38px;
  flex:none;
  place-items:center;
  border-radius:10px;
  background:#fff0d6;
  color:#ad701e
}

.app-shell .superadmin-business-current-plan>div{
  min-width:0
}

.app-shell .superadmin-business-current-plan small{
  color:#a66b1e
}

.app-shell .superadmin-business-current-plan strong,.app-shell .superadmin-business-current-plan p{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .superadmin-business-current-plan strong{
  margin-top:2px;
  color:var(--text);
  font-size:12px;
  font-weight:820
}

.app-shell .superadmin-business-current-plan p{
  margin:2px 0 0;
  color:var(--text-3);
  font-size:8.8px
}

.app-shell .superadmin-business-profile-section{
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:15px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

.app-shell .superadmin-business-profile-section>header{
  display:flex;
  min-height:65px;
  align-items:center;
  gap:11px;
  padding:12px 15px;
  border-bottom:1px solid var(--border-2);
  background:linear-gradient(90deg,#fafcfb,var(--surface))
}

.app-shell .superadmin-business-profile-section>header>span{
  display:grid;
  width:37px;
  height:37px;
  flex:none;
  place-items:center;
  border-radius:10px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .superadmin-business-profile-section>header>span.is-blue{
  background:#eaf3ff;
  color:#3979bc
}

.app-shell .superadmin-business-profile-section>header>span.is-amber{
  background:#fff2de;
  color:#b87523
}

.app-shell .superadmin-business-profile-section>header>span.is-violet{
  background:#f0eafe;
  color:#7954b5
}

.app-shell .superadmin-business-profile-section>header>div{
  min-width:0;
  flex:1
}

.app-shell .superadmin-business-profile-section>header small{
  display:block;
  color:var(--brand-strong);
  font-size:8px;
  font-weight:850;
  letter-spacing:.08em
}

.app-shell .superadmin-business-profile-section>header h2{
  margin:1px 0 0;
  color:var(--text);
  font-size:13.5px;
  font-weight:830
}

.app-shell .superadmin-business-profile-section>header p{
  margin:2px 0 0;
  color:var(--text-3);
  font-size:9.5px
}

.app-shell .superadmin-business-profile-section>header>b{
  display:inline-flex;
  padding:5px 8px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--surface);
  color:var(--text-3);
  font-size:8.5px;
  font-weight:800;
  white-space:nowrap
}

.app-shell .superadmin-business-profile-table-wrap{
  overflow-x:auto
}

.app-shell .superadmin-business-profile-table{
  margin:0!important
}

.app-shell .superadmin-business-profile-table th{
  height:39px!important;
  padding:0 14px!important;
  background:var(--surface-2)!important;
  color:var(--text-3)!important;
  font-size:8.5px!important;
  letter-spacing:.045em!important;
  text-transform:uppercase!important
}

.app-shell .superadmin-business-profile-table td{
  padding:10px 14px!important;
  border-color:var(--border-2)!important;
  color:var(--text-2);
  font-size:10.5px;
  vertical-align:middle!important
}

.app-shell .superadmin-business-profile-table td strong,.app-shell .superadmin-business-profile-table td small{
  display:block
}

.app-shell .superadmin-business-profile-table td strong{
  color:var(--text);
  font-weight:720
}

.app-shell .superadmin-business-profile-table td small{
  margin-top:2px;
  color:var(--text-3);
  font-size:8.5px
}

.app-shell .superadmin-business-profile-table td code{
  display:inline-flex;
  padding:4px 6px;
  border:1px solid var(--border);
  border-radius:6px;
  background:var(--surface-2);
  color:var(--text-2);
  font-size:9px;
  font-weight:750
}

.app-shell .superadmin-business-profile-table.is-locations{
  min-width:780px
}

.app-shell .superadmin-business-profile-table.is-subscriptions{
  min-width:980px
}

.app-shell .superadmin-business-location-name,.app-shell .superadmin-business-plan-name{
  display:flex;
  align-items:center;
  gap:9px
}

.app-shell .superadmin-business-location-name>span,.app-shell .superadmin-business-plan-name>span{
  display:grid;
  width:31px;
  height:31px;
  flex:none;
  place-items:center;
  border:1px solid #c9e2d0;
  border-radius:8px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .superadmin-business-plan-name>span{
  border-color:#ecd9b7;
  background:#fff7e9;
  color:#a96d1f
}

.app-shell .superadmin-business-location-name>div{
  min-width:0
}

.app-shell .superadmin-business-profile-table i{
  margin:0 3px;
  color:var(--text-3);
  font-style:normal
}

.app-shell .superadmin-business-payment-method{
  display:inline-flex!important;
  width:-moz-max-content;
  width:max-content;
  padding:4px 7px;
  border-radius:999px;
  background:var(--brand-weak);
  color:var(--brand-strong)!important;
  font-size:8.5px;
  text-transform:capitalize
}

.app-shell .superadmin-business-profile-empty{
  display:flex;
  min-height:105px;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  color:var(--text-3);
  text-align:center
}

.app-shell .superadmin-business-profile-empty svg{
  margin-bottom:7px;
  color:#91a098
}

.app-shell .superadmin-business-profile-empty strong{
  color:var(--text)!important;
  font-size:11px!important;
  font-weight:780!important
}

.app-shell .superadmin-business-profile-empty small{
  max-width:380px;
  margin-top:3px!important;
  font-size:9px!important
}

.app-shell .superadmin-business-profile-section.is-users>header{
  border-bottom:0
}

.app-shell .superadmin-business-users-card{
  margin:0;
  border:0;
  border-radius:0;
  box-shadow:none
}

.app-shell .superadmin-business-users-card .table-toolbar{
  border-top:1px solid var(--border-2)
}

.app-shell .superadmin-business-users-card .data-table-content{
  border-radius:0
}

.app-shell .superadmin-business-profile-table.is-users-table{
  min-width:760px
}

.app-shell .superadmin-business-profile-table.is-users-table td:last-child{
  text-align:right
}

.app-shell .superadmin-user-password-action{
  display:inline-flex;
  height:31px;
  align-items:center;
  gap:6px;
  padding:0 9px;
  border:1px solid #bfdcc7;
  border-radius:8px;
  background:var(--brand-weak);
  color:var(--brand-strong);
  font-size:9px;
  font-weight:780;
  text-decoration:none;
  white-space:nowrap
}

.app-shell .superadmin-user-password-action:hover{
  border-color:var(--brand);
  background:var(--brand);
  color:#fff
}

@media (max-width:1180px){
  .app-shell .superadmin-business-profile-hero{
    grid-template-columns:minmax(300px,1fr) minmax(540px,1.7fr)
  }

  .app-shell .superadmin-business-current-plan{
    grid-column:1/-1;
    border-top:1px solid var(--border-2);
    border-left:0;
    padding:11px 17px
  }
}

@media (max-width:820px){
  .app-shell .superadmin-business-profile-hero{
    grid-template-columns:1fr
  }

  .app-shell .superadmin-business-profile-identity{
    border-right:0;
    border-bottom:1px solid var(--border-2)
  }

  .app-shell .superadmin-business-current-plan{
    grid-column:auto
  }

  .app-shell .superadmin-business-profile-section>header p{
    display:none
  }
}

@media (max-width:540px){
  .app-shell .superadmin-business-profile-facts{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

  .app-shell .superadmin-business-profile-facts>div,.app-shell .superadmin-business-profile-facts>div:nth-child(3n){
    border-right:1px solid var(--border-2);
    border-bottom:1px solid var(--border-2)
  }

  .app-shell .superadmin-business-profile-facts>div:nth-child(2n){
    border-right:0
  }

  .app-shell .superadmin-business-profile-facts>div:nth-last-child(-n+2){
    border-bottom:0
  }

  .app-shell .superadmin-business-profile-section>header>b{
    display:none
  }
}

/* Superadmin package subscription directory -------------------------- */

.app-shell .superadmin-subscriptions-page{
  max-width:1540px
}

.app-shell .superadmin-subscription-summary{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin:16px 0
}

.app-shell .superadmin-subscription-summary>article{
  display:flex;
  min-width:0;
  align-items:center;
  gap:12px;
  padding:14px 15px;
  border:1px solid var(--border);
  border-radius:13px;
  background:var(--surface);
  box-shadow:0 5px 18px -14px rgba(16,32,24,.38)
}

.app-shell .superadmin-subscription-summary>article>span{
  display:grid;
  width:39px;
  height:39px;
  flex:none;
  place-items:center;
  border-radius:10px
}

.app-shell .superadmin-subscription-summary>article>span.is-blue{
  background:#eaf3ff;
  color:#3979bc
}

.app-shell .superadmin-subscription-summary>article>span.is-green{
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .superadmin-subscription-summary>article>span.is-amber{
  background:#fff2de;
  color:#b87523
}

.app-shell .superadmin-subscription-summary>article>span.is-red{
  background:#fdebea;
  color:#b85953
}

.app-shell .superadmin-subscription-summary>article>div{
  display:grid;
  min-width:0;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-rows:auto auto
}

.app-shell .superadmin-subscription-summary small{
  grid-column:1;
  color:var(--text-3);
  font-size:8px;
  font-weight:850;
  letter-spacing:.065em;
  white-space:nowrap
}

.app-shell .superadmin-subscription-summary strong{
  grid-column:2;
  grid-row:1/3;
  align-self:center;
  margin-left:12px;
  color:var(--text);
  font-size:22px;
  font-weight:880;
  letter-spacing:-.03em
}

.app-shell .superadmin-subscription-summary p{
  grid-column:1;
  overflow:hidden;
  margin:2px 0 0;
  color:var(--text-2);
  font-size:10.5px;
  font-weight:650;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .superadmin-subscription-filters{
  overflow:hidden;
  margin-bottom:14px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

.app-shell .superadmin-subscription-filters>header{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-bottom:1px solid var(--border-2);
  background:linear-gradient(90deg,#f7fbf8,var(--surface))
}

.app-shell .superadmin-subscription-filters>header>span,.app-shell .superadmin-subscription-section-head>span{
  display:grid;
  width:34px;
  height:34px;
  flex:none;
  place-items:center;
  border-radius:9px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .superadmin-subscription-filters>header>div{
  min-width:0;
  flex:1
}

.app-shell .superadmin-subscription-filters>header small,.app-shell .superadmin-subscription-section-head small{
  display:block;
  color:var(--brand-strong);
  font-size:8px;
  font-weight:850;
  letter-spacing:.08em
}

.app-shell .superadmin-subscription-filters>header h2,.app-shell .superadmin-subscription-section-head h2{
  margin:1px 0 0;
  color:var(--text);
  font-size:13.5px;
  font-weight:820
}

.app-shell .superadmin-subscription-filters>header p,.app-shell .superadmin-subscription-section-head p{
  margin:2px 0 0;
  color:var(--text-3);
  font-size:9.5px;
  line-height:1.4
}

.app-shell .superadmin-subscription-filters>header .btn-ghost{
  height:34px;
  padding:0 10px;
  font-size:10.5px
}

.app-shell .superadmin-subscription-filter-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  padding:13px 14px 14px
}

.app-shell .superadmin-subscription-filter-grid>label{
  display:block;
  min-width:0;
  margin:0
}

.app-shell .superadmin-subscription-filter-grid>label>span{
  display:block;
  margin-bottom:5px;
  color:var(--text-2);
  font-size:10px;
  font-weight:740
}

.app-shell .superadmin-subscription-filter-grid .select2-container{
  width:100%!important
}

.app-shell .superadmin-subscription-filter-grid .select2-selection--single{
  height:38px!important;
  border:1px solid var(--border)!important;
  border-radius:9px!important;
  background:var(--surface-2)!important
}

.app-shell .superadmin-subscription-filter-grid .select2-selection__rendered{
  padding-left:11px!important;
  color:var(--text-2)!important;
  font-size:11px!important;
  line-height:36px!important
}

.app-shell .superadmin-subscription-filter-grid .select2-selection__arrow{
  height:36px!important;
  right:5px!important
}

.app-shell .superadmin-subscription-filter-grid .select2-container--open .select2-selection--single{
  border-color:var(--brand)!important;
  background:var(--surface)!important;
  box-shadow:0 0 0 3px rgba(34,145,69,.08)!important
}

.app-shell .superadmin-subscription-date-control{
  position:relative
}

.app-shell .superadmin-subscription-date-control>svg{
  position:absolute;
  top:11px;
  left:11px;
  z-index:2;
  color:#8a9890;
  pointer-events:none
}

.app-shell .superadmin-subscription-date-control>.finput{
  height:38px;
  padding-left:35px;
  border-radius:9px;
  background:var(--surface-2);
  font-size:11px;
  cursor:pointer
}

.app-shell .superadmin-subscription-workspace{
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

.app-shell .superadmin-subscription-section-head{
  display:flex;
  align-items:center;
  gap:10px;
  padding:13px 15px;
  border-bottom:1px solid var(--border-2);
  background:linear-gradient(90deg,#f9fbfa,var(--surface))
}

.app-shell .superadmin-subscription-section-head>div{
  min-width:0;
  flex:1
}

.app-shell .superadmin-subscription-section-head>b{
  display:inline-flex;
  align-items:center;
  padding:5px 8px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--surface);
  color:var(--text-3);
  font-size:9px;
  font-weight:800;
  white-space:nowrap
}

.app-shell .superadmin-subscription-list-card{
  margin:0;
  border:0;
  border-radius:0;
  box-shadow:none
}

.app-shell .superadmin-subscription-list-card .table-toolbar{
  border-top:0
}

.app-shell .superadmin-subscription-list-card .data-table-content{
  border-radius:0
}

.app-shell .superadmin-subscription-table-wrap{
  overflow-x:auto
}

.app-shell .superadmin-subscription-table{
  min-width:1120px
}

.app-shell .superadmin-subscription-table td{
  padding-top:11px!important;
  padding-bottom:11px!important;
  vertical-align:middle!important
}

.app-shell .superadmin-subscription-table td:nth-child(1){
  min-width:220px
}

.app-shell .superadmin-subscription-table td:nth-child(2){
  width:105px
}

.app-shell .superadmin-subscription-table td:nth-child(3){
  min-width:220px
}

.app-shell .superadmin-subscription-table td:nth-child(4){
  min-width:175px
}

.app-shell .superadmin-subscription-table td:nth-child(5){
  min-width:160px
}

.app-shell .superadmin-subscription-table td:nth-child(6){
  min-width:155px
}

.app-shell .superadmin-subscription-table td:last-child{
  width:64px
}

.app-shell .superadmin-subscription-identity{
  display:flex;
  min-width:0;
  align-items:center;
  gap:10px
}

.app-shell .superadmin-subscription-identity>span{
  display:grid;
  width:35px;
  height:35px;
  flex:none;
  place-items:center;
  border:1px solid #bfdec8;
  border-radius:9px;
  background:var(--brand-weak);
  color:var(--brand-strong);
  font-size:12px;
  font-weight:850
}

.app-shell .superadmin-subscription-identity>div,.app-shell .superadmin-subscription-period,.app-shell .superadmin-subscription-billing,.app-shell .superadmin-subscription-payment,.app-shell .superadmin-subscription-created{
  min-width:0
}

.app-shell .superadmin-subscription-identity strong,.app-shell .superadmin-subscription-period strong,.app-shell .superadmin-subscription-billing strong,.app-shell .superadmin-subscription-payment strong,.app-shell .superadmin-subscription-created strong{
  display:block;
  overflow:hidden;
  color:var(--text);
  font-size:11px;
  font-weight:780;
  line-height:1.35;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .superadmin-subscription-identity small,.app-shell .superadmin-subscription-period small,.app-shell .superadmin-subscription-billing small,.app-shell .superadmin-subscription-payment small,.app-shell .superadmin-subscription-created small{
  display:block;
  overflow:hidden;
  margin-top:2px;
  color:var(--text-3);
  font-size:8.8px;
  line-height:1.4;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .superadmin-subscription-period strong{
  display:flex;
  align-items:center;
  gap:7px
}

.app-shell .superadmin-subscription-period strong>span{
  color:#9aa59f;
  font-weight:500
}

.app-shell .superadmin-subscription-billing strong{
  color:var(--brand-strong);
  font-size:11.5px
}

.app-shell .superadmin-subscription-payment strong{
  text-transform:capitalize
}

.app-shell .superadmin-subscription-status{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:5px 8px;
  border:1px solid var(--border);
  border-radius:999px;
  font-size:9px;
  font-weight:800;
  white-space:nowrap
}

.app-shell .superadmin-subscription-status>i{
  width:5px;
  height:5px;
  border-radius:50%;
  background:currentColor
}

.app-shell .superadmin-subscription-status.is-approved{
  border-color:#c9e4d0;
  background:#f2faf4;
  color:#23723b
}

.app-shell .superadmin-subscription-status.is-waiting{
  border-color:#ead9b9;
  background:#fff9ed;
  color:#9a691d
}

.app-shell .superadmin-subscription-status.is-declined{
  border-color:#ead5d2;
  background:#fcf4f3;
  color:#a4554f
}

.app-shell .superadmin-subscription-row-actions{
  display:flex;
  justify-content:flex-end
}

.app-shell .superadmin-subscription-action-group>.act{
  display:grid;
  width:32px;
  height:32px;
  place-items:center;
  padding:0;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface);
  color:var(--text-2)
}

.app-shell .superadmin-subscription-action-menu{
  min-width:205px
}

.app-shell .superadmin-subscription-action-menu .table-action-icon{
  width:16px;
  height:16px;
  flex:0 0 16px
}

.app-shell .superadmin-subscription-action-menu>li>button>*{
  pointer-events:none
}

.app-shell .superadmin-subscription-empty{
  display:flex;
  min-height:230px;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  padding:30px 18px;
  text-align:center
}

.app-shell .superadmin-subscription-empty>span{
  display:grid;
  width:50px;
  height:50px;
  place-items:center;
  border-radius:13px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .superadmin-subscription-empty svg{
  width:24px;
  height:24px;
  fill:none;
  stroke:currentColor;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-width:1.7
}

.app-shell .superadmin-subscription-empty strong{
  margin-top:10px;
  color:var(--text);
  font-size:13px;
  font-weight:800
}

.app-shell .superadmin-subscription-empty small{
  max-width:420px;
  margin-top:3px;
  color:var(--text-3);
  font-size:10.5px;
  line-height:1.5
}

.app-shell .superadmin-subscription-table td.dataTables_empty{
  padding:0!important
}

@media (max-width:1000px){
  .app-shell .superadmin-subscription-summary{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}

@media (max-width:760px){
  .app-shell .superadmin-subscription-filter-grid{
    grid-template-columns:1fr
  }

  .app-shell .superadmin-subscription-filters>header p,.app-shell .superadmin-subscription-section-head p{
    display:none
  }
}

@media (max-width:520px){
  .app-shell .superadmin-subscription-summary{
    grid-template-columns:1fr
  }

  .app-shell .superadmin-subscription-section-head>b{
    display:none
  }
}

/* Superadmin package catalog */

.app-shell .superadmin-packages-page{
  max-width:1540px
}

.app-shell .superadmin-package-summary{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin:16px 0
}

.app-shell .superadmin-package-summary>article{
  display:flex;
  min-width:0;
  align-items:center;
  gap:12px;
  padding:14px 15px;
  border:1px solid var(--border);
  border-radius:13px;
  background:var(--surface);
  box-shadow:0 5px 18px -14px rgba(16,32,24,.38)
}

.app-shell .superadmin-package-summary>article>span{
  display:grid;
  width:39px;
  height:39px;
  flex:none;
  place-items:center;
  border-radius:10px
}

.app-shell .superadmin-package-summary>article>span.is-blue{
  background:#eaf3ff;
  color:#3979bc
}

.app-shell .superadmin-package-summary>article>span.is-green{
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .superadmin-package-summary>article>span.is-amber{
  background:#fff2de;
  color:#b87523
}

.app-shell .superadmin-package-summary>article>span.is-violet{
  background:#f0eafe;
  color:#7954b5
}

.app-shell .superadmin-package-summary>article>div{
  display:grid;
  min-width:0;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-rows:auto auto
}

.app-shell .superadmin-package-summary small{
  grid-column:1;
  color:var(--text-3);
  font-size:8px;
  font-weight:850;
  letter-spacing:.065em;
  white-space:nowrap
}

.app-shell .superadmin-package-summary strong{
  grid-column:2;
  grid-row:1/3;
  align-self:center;
  margin-left:12px;
  color:var(--text);
  font-size:22px;
  font-weight:880;
  letter-spacing:-.03em
}

.app-shell .superadmin-package-summary p{
  grid-column:1;
  overflow:hidden;
  margin:2px 0 0;
  color:var(--text-2);
  font-size:10.5px;
  font-weight:650;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .superadmin-package-catalog{
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:15px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

.app-shell .superadmin-package-catalog-head{
  display:grid;
  grid-template-columns:38px minmax(0,1fr) auto;
  align-items:center;
  gap:11px;
  padding:14px 16px;
  border-bottom:1px solid var(--border);
  background:linear-gradient(90deg,#fbfdfb,#f7faf8)
}

.app-shell .superadmin-package-catalog-head>span{
  display:grid;
  width:38px;
  height:38px;
  place-items:center;
  border-radius:10px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .superadmin-package-catalog-head small{
  display:block;
  margin-bottom:1px;
  color:var(--brand-strong);
  font-size:8px;
  font-weight:850;
  letter-spacing:.08em
}

.app-shell .superadmin-package-catalog-head h2{
  margin:0;
  color:var(--text);
  font-size:15px;
  font-weight:850;
  letter-spacing:-.02em
}

.app-shell .superadmin-package-catalog-head p{
  margin:2px 0 0;
  color:var(--text-3);
  font-size:10.5px
}

.app-shell .superadmin-package-catalog-head>b{
  padding:6px 9px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--surface);
  color:var(--text-2);
  font-size:9px;
  font-weight:750
}

.app-shell .superadmin-package-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  padding:16px
}

.app-shell .superadmin-package-card{
  position:relative;
  display:flex;
  min-width:0;
  overflow:hidden;
  flex-direction:column;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  box-shadow:0 4px 16px -13px rgba(16,32,24,.46)
}

.app-shell .superadmin-package-card:before{
  position:absolute;
  top:0;
  right:0;
  left:0;
  height:3px;
  background:#d8e3dc;
  content:""
}

.app-shell .superadmin-package-card.is-popular{
  border-color:#b9d9c2;
  box-shadow:0 12px 28px -22px rgba(24,121,61,.48)
}

.app-shell .superadmin-package-card.is-popular:before{
  background:linear-gradient(90deg,var(--brand),#65c785)
}

.app-shell .superadmin-package-card>header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  padding:18px 18px 12px
}

.app-shell .superadmin-package-title{
  display:flex;
  min-width:0;
  align-items:center;
  gap:10px
}

.app-shell .superadmin-package-title>span{
  display:grid;
  width:38px;
  height:38px;
  flex:none;
  place-items:center;
  border-radius:10px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .superadmin-package-title small{
  display:block;
  color:var(--brand-strong);
  font-size:8px;
  font-weight:850;
  letter-spacing:.075em
}

.app-shell .superadmin-package-title h3{
  overflow:hidden;
  margin:2px 0 0;
  color:var(--text);
  font-size:17px;
  font-weight:880;
  letter-spacing:-.025em;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .superadmin-package-badges{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:5px;
  flex-wrap:wrap
}

.app-shell .superadmin-package-badges em{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:4px 7px;
  border-radius:999px;
  font-size:8.5px;
  font-style:normal;
  font-weight:800;
  line-height:1
}

.app-shell .superadmin-package-badges em i{
  width:5px;
  height:5px;
  border-radius:50%;
  background:currentColor
}

.app-shell .superadmin-package-badges .is-active{
  background:#e9f7ed;
  color:#237d42
}

.app-shell .superadmin-package-badges .is-inactive{
  background:#f7eeee;
  color:#a65651
}

.app-shell .superadmin-package-badges .is-popular{
  background:#fff3d9;
  color:#9c681c
}

.app-shell .superadmin-package-price-row{
  display:flex;
  min-height:58px;
  align-items:flex-end;
  justify-content:space-between;
  gap:10px;
  padding:0 18px 12px
}

.app-shell .superadmin-package-price{
  display:flex;
  min-width:0;
  align-items:baseline;
  gap:6px
}

.app-shell .superadmin-package-price strong{
  color:var(--text);
  font-size:24px;
  font-weight:900;
  letter-spacing:-.04em
}

.app-shell .superadmin-package-price span{
  color:var(--text-3);
  font-size:10px;
  font-weight:650
}

.app-shell .superadmin-package-flags{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:5px;
  flex-wrap:wrap
}

.app-shell .superadmin-package-flags span{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:4px 6px;
  border:1px solid var(--border);
  border-radius:6px;
  background:#fafcfb;
  color:var(--text-2);
  font-size:8.5px;
  font-weight:700
}

.app-shell .superadmin-package-description{
  min-height:35px;
  margin:0;
  padding:0 18px 13px;
  color:var(--text-2);
  font-size:11px;
  line-height:1.45
}

.app-shell .superadmin-package-limits{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  margin:0 18px;
  border:1px solid var(--border);
  border-radius:11px;
  background:#f8faf9
}

.app-shell .superadmin-package-limits>div{
  display:grid;
  min-width:0;
  grid-template-columns:24px minmax(0,1fr);
  grid-template-rows:auto auto;
  -moz-column-gap:7px;
       column-gap:7px;
  padding:10px;
  border-right:1px solid var(--border)
}

.app-shell .superadmin-package-limits>div:last-child{
  border-right:0
}

.app-shell .superadmin-package-limits span{
  display:grid;
  width:24px;
  height:24px;
  grid-row:1/3;
  place-items:center;
  align-self:center;
  border-radius:7px;
  background:var(--surface);
  color:var(--brand-strong);
  box-shadow:inset 0 0 0 1px var(--border)
}

.app-shell .superadmin-package-limits small{
  overflow:hidden;
  color:var(--text-3);
  font-size:8px;
  font-weight:700;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .superadmin-package-limits strong{
  overflow:hidden;
  color:var(--text);
  font-size:10.5px;
  font-weight:800;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .superadmin-package-meta{
  display:flex;
  align-items:center;
  gap:15px;
  padding:12px 18px;
  border-bottom:1px solid var(--border)
}

.app-shell .superadmin-package-meta span{
  display:inline-flex;
  align-items:center;
  gap:5px;
  color:var(--text-3);
  font-size:9.5px
}

.app-shell .superadmin-package-meta svg{
  color:var(--brand-strong)
}

.app-shell .superadmin-package-meta b{
  color:var(--text);
  font-weight:800
}

.app-shell .superadmin-package-features{
  flex:1;
  padding:13px 18px 15px
}

.app-shell .superadmin-package-features-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:9px
}

.app-shell .superadmin-package-features-head strong{
  color:var(--text);
  font-size:10.5px;
  font-weight:820
}

.app-shell .superadmin-package-features-head span{
  color:var(--text-3);
  font-size:8.5px;
  font-weight:700
}

.app-shell .superadmin-package-feature-list,.app-shell .superadmin-package-more>div{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:7px 12px
}

.app-shell .superadmin-package-feature-list>span,.app-shell .superadmin-package-more>div>span{
  display:flex;
  min-width:0;
  align-items:center;
  gap:6px;
  color:var(--text-2);
  font-size:9.5px;
  font-weight:620;
  line-height:1.3
}

.app-shell .superadmin-package-feature-list svg,.app-shell .superadmin-package-more>div svg{
  flex:none;
  color:var(--brand)
}

.app-shell .superadmin-package-no-features{
  margin:0;
  padding:12px;
  border:1px dashed var(--border);
  border-radius:9px;
  background:#fafcfb;
  color:var(--text-3);
  font-size:9.5px;
  text-align:center
}

.app-shell .superadmin-package-more{
  margin-top:9px
}

.app-shell .superadmin-package-more summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:7px 9px;
  border:1px solid var(--border);
  border-radius:8px;
  background:#fafcfb;
  color:var(--brand-strong);
  cursor:pointer;
  font-size:9px;
  font-weight:750;
  list-style:none
}

.app-shell .superadmin-package-more summary::-webkit-details-marker{
  display:none
}

.app-shell .superadmin-package-more[open] summary svg{
  transform:rotate(180deg)
}

.app-shell .superadmin-package-more>div{
  padding:10px 3px 1px
}

.app-shell .superadmin-package-card>footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px 10px 18px;
  border-top:1px solid var(--border);
  background:#fbfcfb
}

.app-shell .superadmin-package-card>footer>span{
  color:var(--text-3);
  font-size:8.5px;
  font-weight:650
}

.app-shell .superadmin-package-card>footer>div{
  display:flex;
  align-items:center;
  gap:6px
}

.app-shell .superadmin-package-edit,.app-shell .superadmin-package-delete{
  display:inline-flex;
  height:31px;
  align-items:center;
  justify-content:center;
  gap:6px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--surface);
  font-size:9.5px;
  font-weight:760;
  transition:border-color .16s ease,background .16s ease,color .16s ease
}

.app-shell .superadmin-package-edit{
  padding:0 10px;
  color:var(--brand-strong)
}

.app-shell .superadmin-package-edit:hover{
  border-color:#add0b7;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .superadmin-package-delete{
  width:31px;
  color:#b6534f
}

.app-shell .superadmin-package-delete:hover{
  border-color:#efc8c5;
  background:#fff2f1;
  color:#a53e39
}

.app-shell .superadmin-package-empty{
  display:flex;
  min-height:330px;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  padding:32px;
  text-align:center
}

.app-shell .superadmin-package-empty>span{
  display:grid;
  width:48px;
  height:48px;
  place-items:center;
  border-radius:13px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .superadmin-package-empty strong{
  margin-top:12px;
  color:var(--text);
  font-size:15px;
  font-weight:850
}

.app-shell .superadmin-package-empty p{
  max-width:380px;
  margin:4px 0 14px;
  color:var(--text-3);
  font-size:10.5px
}

.app-shell .superadmin-package-pagination{
  padding:0 16px 16px
}

@media (max-width:1100px){
  .app-shell .superadmin-package-summary{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

  .app-shell .superadmin-package-grid{
    grid-template-columns:1fr
  }
}

@media (max-width:640px){
  .app-shell .superadmin-package-summary{
    grid-template-columns:1fr
  }

  .app-shell .superadmin-package-catalog-head>b{
    display:none
  }

  .app-shell .superadmin-package-grid{
    padding:10px
  }

  .app-shell .superadmin-package-card>header,.app-shell .superadmin-package-price-row{
    align-items:flex-start;
    flex-direction:column
  }

  .app-shell .superadmin-package-limits{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

  .app-shell .superadmin-package-limits>div:nth-child(2){
    border-right:0
  }

  .app-shell .superadmin-package-limits>div:nth-child(-n+2){
    border-bottom:1px solid var(--border)
  }

  .app-shell .superadmin-package-feature-list,.app-shell .superadmin-package-more>div{
    grid-template-columns:1fr
  }
}

/* Superadmin package builder */

.app-shell .superadmin-package-builder-page{
  max-width:1480px
}

.app-shell .superadmin-package-builder-form{
  margin-top:16px
}

.app-shell .superadmin-package-builder-layout{
  display:grid;
  grid-template-columns:238px minmax(0,1fr);
  align-items:start;
  gap:14px
}

.app-shell .superadmin-package-builder-guide{
  position:sticky;
  top:76px;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

.app-shell .superadmin-package-builder-guide>header{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:15px;
  border-bottom:1px solid var(--border);
  background:linear-gradient(135deg,#fbfdfb,#f3f8f5)
}

.app-shell .superadmin-package-builder-guide>header>span{
  display:grid;
  width:36px;
  height:36px;
  flex:none;
  place-items:center;
  border-radius:10px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .superadmin-package-builder-guide>header small{
  display:block;
  color:var(--brand-strong);
  font-size:8px;
  font-weight:850;
  letter-spacing:.075em
}

.app-shell .superadmin-package-builder-guide>header strong{
  display:block;
  margin-top:1px;
  color:var(--text);
  font-size:13px;
  font-weight:850
}

.app-shell .superadmin-package-builder-guide>header p{
  margin:2px 0 0;
  color:var(--text-3);
  font-size:10px;
  line-height:1.4
}

.app-shell .superadmin-package-builder-guide nav{
  display:grid;
  gap:3px;
  padding:8px
}

.app-shell .superadmin-package-builder-guide nav a{
  display:flex;
  align-items:center;
  gap:9px;
  padding:8px;
  border:1px solid transparent;
  border-radius:9px;
  color:var(--text-2);
  transition:background .16s ease,border-color .16s ease,color .16s ease
}

.app-shell .superadmin-package-builder-guide nav a:focus{
  outline:0!important;
  box-shadow:none!important
}

.app-shell .superadmin-package-builder-guide nav a:focus-visible{
  border-color:#8dc89e!important;
  outline:2px solid rgba(33,145,71,.18)!important;
  outline-offset:1px!important
}

.app-shell .superadmin-package-builder-guide nav a:hover{
  background:#f7faf8;
  color:var(--text)
}

.app-shell .superadmin-package-builder-guide nav a.is-active{
  border-color:#c3ddca;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .superadmin-package-builder-guide nav a>b{
  display:grid;
  width:23px;
  height:23px;
  flex:none;
  place-items:center;
  border:1px solid var(--border);
  border-radius:7px;
  background:var(--surface);
  color:var(--text-3);
  font-size:9px;
  font-weight:800
}

.app-shell .superadmin-package-builder-guide nav a.is-active>b{
  border-color:#acd1b7;
  color:var(--brand-strong)
}

.app-shell .superadmin-package-builder-guide nav span{
  min-width:0
}

.app-shell .superadmin-package-builder-guide nav strong{
  display:block;
  font-size:10.5px;
  font-weight:780
}

.app-shell .superadmin-package-builder-guide nav small{
  display:block;
  overflow:hidden;
  margin-top:1px;
  color:var(--text-3);
  font-size:8.5px;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .superadmin-package-builder-note{
  display:flex;
  align-items:flex-start;
  gap:7px;
  margin:3px 9px 9px;
  padding:9px;
  border:1px solid #c8e1cf;
  border-radius:9px;
  background:#f4fbf6;
  color:var(--brand-strong)
}

.app-shell .superadmin-package-builder-note svg{
  flex:none;
  margin-top:1px
}

.app-shell .superadmin-package-builder-note p{
  margin:0;
  font-size:8.5px;
  line-height:1.45
}

.app-shell .superadmin-package-builder-workspace{
  display:grid;
  min-width:0;
  gap:12px
}

.app-shell .superadmin-package-builder-section{
  scroll-margin-top:76px;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  box-shadow:0 5px 18px -15px rgba(16,32,24,.42)
}

.app-shell .superadmin-package-builder-section>header{
  display:grid;
  grid-template-columns:36px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  padding:13px 15px;
  border-bottom:1px solid var(--border);
  background:linear-gradient(90deg,#fbfdfb,#f7faf8)
}

.app-shell .superadmin-package-builder-section>header>span{
  display:grid;
  width:36px;
  height:36px;
  place-items:center;
  border-radius:10px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .superadmin-package-builder-section>header.is-blue>span{
  background:#eaf3ff;
  color:#3979bc
}

.app-shell .superadmin-package-builder-section>header.is-amber>span{
  background:#fff2de;
  color:#b87523
}

.app-shell .superadmin-package-builder-section>header.is-violet>span{
  background:#f0eafe;
  color:#7954b5
}

.app-shell .superadmin-package-builder-section>header.is-green>span{
  background:#e9f7ed;
  color:#258148
}

.app-shell .superadmin-package-builder-section>header.is-teal>span{
  background:#e5f6f2;
  color:#23826d
}

.app-shell .superadmin-package-builder-section>header small{
  display:block;
  color:var(--brand-strong);
  font-size:8px;
  font-weight:850;
  letter-spacing:.08em
}

.app-shell .superadmin-package-builder-section>header h2{
  margin:1px 0 0;
  color:var(--text);
  font-size:14px;
  font-weight:870;
  letter-spacing:-.02em
}

.app-shell .superadmin-package-builder-section>header p{
  margin:2px 0 0;
  color:var(--text-3);
  font-size:10px
}

.app-shell .superadmin-package-builder-section>header>b{
  padding:4px 7px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--surface);
  color:var(--text-3);
  font-size:8px;
  font-weight:750
}

.app-shell .superadmin-package-builder-fields{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:13px;
  padding:15px
}

.app-shell .superadmin-package-builder-fields.is-four{
  grid-template-columns:repeat(4,minmax(0,1fr))
}

.app-shell .superadmin-package-builder-field{
  display:flex;
  min-width:0;
  flex-direction:column;
  gap:5px
}

.app-shell .superadmin-package-builder-field.is-wide{
  grid-column:1/-1
}

.app-shell .superadmin-package-builder-field>label,.app-shell .superadmin-package-limit-field>label{
  display:flex;
  align-items:center;
  gap:4px;
  margin:0;
  color:var(--text-2);
  font-size:11px;
  font-weight:760
}

.app-shell .superadmin-package-builder-field>label em,.app-shell .superadmin-package-limit-field>label em{
  color:#d54b45;
  font-style:normal
}

.app-shell .superadmin-package-builder-field>small{
  color:var(--text-3);
  font-size:9px;
  line-height:1.4
}

.app-shell .superadmin-package-builder-control,.app-shell .superadmin-package-builder-select{
  position:relative;
  display:flex;
  height:40px;
  align-items:center;
  border:1px solid var(--border);
  border-radius:9px;
  background:#f8faf9;
  transition:border-color .16s ease,box-shadow .16s ease,background .16s ease
}

.app-shell .superadmin-package-builder-control:focus-within,.app-shell .superadmin-package-builder-select:focus-within{
  border-color:#79bd8d;
  background:var(--surface);
  box-shadow:0 0 0 3px rgba(33,145,71,.09)
}

.app-shell .superadmin-package-builder-control>svg,.app-shell .superadmin-package-builder-select>svg{
  position:absolute;
  left:11px;
  z-index:2;
  color:#84948a;
  pointer-events:none
}

.app-shell .superadmin-package-builder-control .form-control,.app-shell .superadmin-package-builder-select .form-control{
  width:100%;
  height:38px;
  padding:0 11px 0 35px;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:var(--text);
  font-size:11px
}

.app-shell .superadmin-package-builder-select .select2-container{
  width:100%!important;
  margin-left:25px
}

.app-shell .superadmin-package-builder-select .select2-selection{
  height:38px!important;
  border:0!important;
  background:transparent!important
}

.app-shell .superadmin-package-builder-select .select2-selection__rendered{
  padding-left:10px!important;
  font-size:11px!important;
  line-height:38px!important
}

.app-shell .superadmin-package-builder-select .select2-selection__arrow{
  height:38px!important
}

.app-shell .superadmin-package-price-control{
  display:flex;
  height:40px;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:9px;
  background:#f8faf9
}

.app-shell .superadmin-package-price-control:focus-within{
  border-color:#79bd8d;
  background:var(--surface);
  box-shadow:0 0 0 3px rgba(33,145,71,.09)
}

.app-shell .superadmin-package-price-control>span{
  display:flex;
  align-items:center;
  padding:0 10px;
  border-right:1px solid var(--border);
  background:#f1f5f2;
  color:var(--text-2);
  font-size:10px;
  font-weight:800;
  white-space:nowrap
}

.app-shell .superadmin-package-price-control .form-control{
  height:38px;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  font-size:11px
}

.app-shell .superadmin-package-limit-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  padding:15px
}

.app-shell .superadmin-package-limit-field{
  display:grid;
  grid-template-columns:34px minmax(0,1fr);
  grid-template-rows:auto 40px auto;
  -moz-column-gap:9px;
       column-gap:9px;
  padding:11px;
  border:1px solid var(--border);
  border-radius:11px;
  background:#fafcfb
}

.app-shell .superadmin-package-limit-field>span{
  display:grid;
  width:34px;
  height:34px;
  grid-row:1/3;
  place-items:center;
  align-self:center;
  border-radius:9px;
  background:var(--surface);
  color:var(--brand-strong);
  box-shadow:inset 0 0 0 1px var(--border)
}

.app-shell .superadmin-package-limit-field .form-control{
  height:36px;
  padding:0;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:var(--text);
  font-size:18px;
  font-weight:850
}

.app-shell .superadmin-package-limit-field>small{
  grid-column:2;
  color:var(--text-3);
  font-size:8.5px
}

.app-shell .superadmin-package-choice-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  padding:15px
}

.app-shell .superadmin-package-choice{
  display:flex;
  min-width:0;
  align-items:flex-start;
  gap:9px;
  margin:0;
  padding:11px;
  border:1px solid var(--border);
  border-radius:10px;
  background:#fafcfb;
  cursor:pointer;
  transition:border-color .16s ease,background .16s ease
}

.app-shell .superadmin-package-choice:hover{
  border-color:#bfd7c6;
  background:#f6faf7
}

.app-shell .superadmin-package-choice.is-wide{
  grid-column:1/-1
}

.app-shell .superadmin-package-choice .icheckbox_square-blue{
  flex:none;
  margin-top:1px
}

.app-shell .superadmin-package-choice>span{
  min-width:0
}

.app-shell .superadmin-package-choice strong{
  display:block;
  color:var(--text);
  font-size:10.5px;
  font-weight:780
}

.app-shell .superadmin-package-choice small{
  display:block;
  margin-top:2px;
  color:var(--text-3);
  font-size:8.5px;
  line-height:1.4
}

.app-shell .superadmin-package-update-impact{
  border-color:#ead7b5;
  background:#fffaf1
}

.app-shell .superadmin-package-update-impact:hover{
  border-color:#dcbc82;
  background:#fff7e8
}

.app-shell .superadmin-package-update-impact strong{
  color:#8a5b17
}

.app-shell .superadmin-package-custom-link{
  display:grid;
  grid-column:1/-1;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  padding:12px;
  border:1px dashed #b9d8c2;
  border-radius:10px;
  background:#f7fbf8
}

.app-shell .superadmin-package-feature-options{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  padding:15px
}

.app-shell .superadmin-package-feature-choice{
  display:flex;
  min-width:0;
  align-items:center;
  gap:9px;
  margin:0;
  padding:10px;
  border:1px solid var(--border);
  border-radius:9px;
  background:#fafcfb;
  cursor:pointer
}

.app-shell .superadmin-package-feature-choice:hover{
  border-color:#bfd7c6;
  background:#f6faf7
}

.app-shell .superadmin-package-feature-choice .icheckbox_square-blue{
  flex:none
}

.app-shell .superadmin-package-feature-choice>span{
  min-width:0
}

.app-shell .superadmin-package-feature-choice strong{
  display:block;
  overflow:hidden;
  color:var(--text-2);
  font-size:10px;
  font-weight:740;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .superadmin-package-feature-choice small{
  display:block;
  margin-top:1px;
  color:var(--text-3);
  font-size:8px
}

.app-shell .superadmin-package-feature-value{
  display:grid;
  gap:7px;
  padding:10px;
  border:1px solid #e9d8b9;
  border-radius:9px;
  background:#fffbf3
}

.app-shell .superadmin-package-feature-value>div{
  display:flex;
  min-width:0;
  align-items:center;
  gap:6px
}

.app-shell .superadmin-package-feature-value>div>span{
  display:grid;
  width:27px;
  height:27px;
  flex:none;
  place-items:center;
  border-radius:7px;
  background:#fff2de;
  color:#b87523
}

.app-shell .superadmin-package-feature-value label{
  overflow:hidden;
  margin:0;
  color:var(--text-2);
  font-size:10px;
  font-weight:750;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .superadmin-package-feature-value>.form-control{
  height:34px;
  border:1px solid var(--border)!important;
  border-radius:7px!important;
  background:var(--surface)!important;
  box-shadow:none!important;
  font-size:10px
}

.app-shell .superadmin-package-feature-value>.form-control:focus{
  border-color:#79bd8d!important;
  box-shadow:0 0 0 3px rgba(33,145,71,.08)!important
}

.app-shell .superadmin-package-builder-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 0
}

.app-shell .superadmin-package-builder-actions>span{
  display:flex;
  align-items:center;
  gap:6px;
  color:var(--text-3);
  font-size:9px
}

.app-shell .superadmin-package-builder-actions>span svg{
  color:var(--brand-strong)
}

.app-shell .superadmin-package-builder-actions>div{
  display:flex;
  align-items:center;
  gap:8px
}

.app-shell .superadmin-package-builder-form label.error{
  margin:2px 0 0;
  color:#c34540;
  font-size:9px;
  font-weight:650
}

@media (max-width:1180px){
  .app-shell .superadmin-package-builder-fields.is-four{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

  .app-shell .superadmin-package-limit-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

  .app-shell .superadmin-package-feature-options{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}

@media (max-width:900px){
  .app-shell .superadmin-package-builder-layout{
    grid-template-columns:1fr
  }

  .app-shell .superadmin-package-builder-guide{
    position:static
  }

  .app-shell .superadmin-package-builder-guide nav{
    grid-template-columns:repeat(3,minmax(0,1fr))
  }

  .app-shell .superadmin-package-builder-note{
    display:none
  }
}

@media (max-width:640px){
  .app-shell .superadmin-package-builder-guide nav{
    display:flex;
    overflow-x:auto
  }

  .app-shell .superadmin-package-builder-guide nav a{
    min-width:170px
  }

  .app-shell .superadmin-package-builder-fields,.app-shell .superadmin-package-builder-fields.is-four,.app-shell .superadmin-package-limit-grid,.app-shell .superadmin-package-choice-grid,.app-shell .superadmin-package-custom-link,.app-shell .superadmin-package-feature-options{
    grid-template-columns:1fr
  }

  .app-shell .superadmin-package-builder-section>header>b{
    display:none
  }

  .app-shell .superadmin-package-builder-actions{
    align-items:stretch;
    flex-direction:column
  }

  .app-shell .superadmin-package-builder-actions>div{
    width:100%
  }

  .app-shell .superadmin-package-builder-actions .btn-ghost,.app-shell .superadmin-package-builder-actions .btn-primary{
    flex:1;
    justify-content:center
  }
}

/* Superadmin coupon management -------------------------------------- */

.app-shell .superadmin-coupons-page,.app-shell .superadmin-coupon-form-page{
  max-width:1540px
}

.app-shell .superadmin-coupon-summary{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin:16px 0
}

.app-shell .superadmin-coupon-summary>article{
  display:flex;
  min-width:0;
  align-items:center;
  gap:12px;
  padding:14px 15px;
  border:1px solid var(--border);
  border-radius:13px;
  background:var(--surface);
  box-shadow:0 5px 18px -14px rgba(16,32,24,.38)
}

.app-shell .superadmin-coupon-summary>article>span{
  display:grid;
  width:39px;
  height:39px;
  flex:none;
  place-items:center;
  border-radius:10px
}

.app-shell .superadmin-coupon-summary .is-blue{
  background:#eaf3ff;
  color:#3979bc
}

.app-shell .superadmin-coupon-summary .is-green{
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .superadmin-coupon-summary .is-amber{
  background:#fff2de;
  color:#b87523
}

.app-shell .superadmin-coupon-summary .is-red{
  background:#fdebea;
  color:#bd4d48
}

.app-shell .superadmin-coupon-summary>article>div{
  display:grid;
  min-width:0;
  flex:1;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-rows:auto auto
}

.app-shell .superadmin-coupon-summary small{
  grid-column:1;
  color:var(--text-3);
  font-size:8px;
  font-weight:850;
  letter-spacing:.065em
}

.app-shell .superadmin-coupon-summary strong{
  grid-column:2;
  grid-row:1/3;
  align-self:center;
  margin-left:10px;
  color:var(--text);
  font-size:22px;
  font-weight:880
}

.app-shell .superadmin-coupon-summary p{
  grid-column:1;
  overflow:hidden;
  margin:2px 0 0;
  color:var(--text-2);
  font-size:10.5px;
  font-weight:650;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .superadmin-coupon-workspace{
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

.app-shell .superadmin-coupon-section-head{
  display:flex;
  align-items:center;
  gap:10px;
  padding:13px 15px;
  border-bottom:1px solid var(--border-2);
  background:linear-gradient(90deg,#f9fbfa,var(--surface))
}

.app-shell .superadmin-coupon-section-head>span{
  display:grid;
  width:34px;
  height:34px;
  flex:none;
  place-items:center;
  border-radius:9px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .superadmin-coupon-section-head>div{
  min-width:0;
  flex:1
}

.app-shell .superadmin-coupon-section-head small{
  display:block;
  color:var(--brand-strong);
  font-size:8px;
  font-weight:850;
  letter-spacing:.08em
}

.app-shell .superadmin-coupon-section-head h2{
  margin:1px 0 0;
  color:var(--text);
  font-size:13.5px;
  font-weight:820
}

.app-shell .superadmin-coupon-section-head p{
  margin:2px 0 0;
  color:var(--text-3);
  font-size:9.5px
}

.app-shell .superadmin-coupon-section-head>b{
  padding:5px 8px;
  border:1px solid var(--border);
  border-radius:999px;
  color:var(--text-3);
  font-size:9px;
  font-weight:800
}

.app-shell .superadmin-coupon-list-card{
  margin:0;
  border:0;
  border-radius:0;
  box-shadow:none
}

.app-shell .superadmin-coupon-list-card .table-toolbar{
  border-top:0
}

.app-shell .superadmin-coupon-list-card .data-table-content{
  border-radius:0
}

.app-shell .superadmin-coupon-table-wrap{
  overflow-x:auto
}

.app-shell .superadmin-coupon-table{
  min-width:1250px
}

.app-shell .superadmin-coupon-table td{
  padding-top:10px!important;
  padding-bottom:10px!important;
  vertical-align:middle!important
}

.app-shell .superadmin-coupon-table td:first-child{
  min-width:180px
}

.app-shell .superadmin-coupon-table td:nth-child(5),.app-shell .superadmin-coupon-table td:nth-child(6){
  min-width:170px
}

.app-shell .superadmin-coupon-table td:last-child{
  width:135px
}

.app-shell .superadmin-coupon-code{
  display:flex;
  align-items:center;
  gap:9px
}

.app-shell .superadmin-coupon-code>span{
  display:grid;
  width:34px;
  height:34px;
  flex:none;
  place-items:center;
  border:1px solid #c9e2d0;
  border-radius:9px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .superadmin-coupon-code strong,.app-shell .superadmin-coupon-code small{
  display:block
}

.app-shell .superadmin-coupon-code strong{
  color:var(--text);
  font-size:11px;
  font-weight:850;
  letter-spacing:.025em
}

.app-shell .superadmin-coupon-code small{
  margin-top:1px;
  color:var(--text-3);
  font-size:8.5px
}

.app-shell .superadmin-coupon-type,.app-shell .superadmin-coupon-status,.app-shell .superadmin-coupon-no-expiry,.app-shell .superadmin-coupon-scope-all{
  display:inline-flex;
  align-items:center;
  padding:5px 7px;
  border:1px solid var(--border);
  border-radius:999px;
  font-size:8.8px;
  font-weight:780;
  white-space:nowrap
}

.app-shell .superadmin-coupon-type.is-percentage{
  border-color:#d8ccf0;
  background:#f5f1fc;
  color:#6f4aa5
}

.app-shell .superadmin-coupon-type.is-fixed{
  border-color:#d8e5f3;
  background:#f1f7fc;
  color:#376e9e
}

.app-shell .superadmin-coupon-discount{
  color:var(--text);
  font-size:12px;
  font-weight:850
}

.app-shell .superadmin-coupon-status{
  gap:5px
}

.app-shell .superadmin-coupon-status>i{
  width:5px;
  height:5px;
  border-radius:50%;
  background:currentColor
}

.app-shell .superadmin-coupon-status.is-active{
  border-color:#c9e4d0;
  background:#f2faf4;
  color:#23723b
}

.app-shell .superadmin-coupon-status.is-inactive{
  border-color:#eadbd6;
  background:#fcf6f4;
  color:#a45d49
}

.app-shell .superadmin-coupon-expiry strong,.app-shell .superadmin-coupon-expiry small{
  display:block
}

.app-shell .superadmin-coupon-expiry strong{
  color:var(--text);
  font-size:10.5px;
  font-weight:760
}

.app-shell .superadmin-coupon-expiry small{
  margin-top:2px;
  color:var(--text-3);
  font-size:8.5px
}

.app-shell .superadmin-coupon-expiry.is-expired strong,.app-shell .superadmin-coupon-expiry.is-expired small{
  color:#af514b
}

.app-shell .superadmin-coupon-no-expiry,.app-shell .superadmin-coupon-scope-all{
  background:var(--surface-2);
  color:var(--text-3)
}

.app-shell .superadmin-coupon-scope{
  display:flex;
  max-width:210px;
  gap:4px;
  flex-wrap:wrap
}

.app-shell .superadmin-coupon-scope>span{
  display:inline-flex;
  max-width:120px;
  overflow:hidden;
  padding:4px 6px;
  border:1px solid var(--border);
  border-radius:6px;
  background:var(--surface-2);
  color:var(--text-2);
  font-size:8px;
  font-weight:700;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .superadmin-coupon-row-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:6px
}

.app-shell .superadmin-coupon-edit{
  display:inline-flex;
  height:32px;
  align-items:center;
  gap:6px;
  padding:0 9px;
  border:1px solid #badcc4;
  border-radius:8px;
  background:var(--brand-weak);
  color:var(--brand-strong);
  font-size:9.5px;
  font-weight:800
}

.app-shell .superadmin-coupon-edit:hover{
  border-color:var(--brand);
  background:var(--brand);
  color:#fff
}

.app-shell .superadmin-coupon-action-menu{
  min-width:175px
}

.app-shell .superadmin-coupon-empty{
  display:flex;
  min-height:220px;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  padding:28px;
  text-align:center
}

.app-shell .superadmin-coupon-empty>span{
  display:grid;
  width:50px;
  height:50px;
  place-items:center;
  border-radius:13px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .superadmin-coupon-empty svg{
  width:24px;
  height:24px;
  fill:none;
  stroke:currentColor;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-width:1.7
}

.app-shell .superadmin-coupon-empty strong{
  margin-top:10px;
  color:var(--text);
  font-size:13px;
  font-weight:800
}

.app-shell .superadmin-coupon-empty small{
  max-width:390px;
  margin-top:3px;
  color:var(--text-3);
  font-size:10px;
  line-height:1.5
}

.app-shell .superadmin-coupon-table td.dataTables_empty{
  padding:0!important
}

.app-shell .superadmin-coupon-form{
  margin-top:16px
}

.app-shell .superadmin-coupon-form-layout{
  display:grid;
  grid-template-columns:238px minmax(0,1fr);
  align-items:start;
  gap:14px
}

.app-shell .superadmin-coupon-form-guide{
  position:sticky;
  top:76px;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

.app-shell .superadmin-coupon-form-guide>header{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:15px;
  border-bottom:1px solid var(--border);
  background:linear-gradient(135deg,#fbfdfb,#f3f8f5)
}

.app-shell .superadmin-coupon-form-guide>header>span{
  display:grid;
  width:36px;
  height:36px;
  flex:none;
  place-items:center;
  border-radius:10px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .superadmin-coupon-form-guide>header small{
  display:block;
  color:var(--brand-strong);
  font-size:8px;
  font-weight:850;
  letter-spacing:.075em
}

.app-shell .superadmin-coupon-form-guide>header strong{
  display:block;
  margin-top:1px;
  color:var(--text);
  font-size:13px;
  font-weight:850
}

.app-shell .superadmin-coupon-form-guide>header p{
  margin:2px 0 0;
  color:var(--text-3);
  font-size:9px;
  line-height:1.4
}

.app-shell .superadmin-coupon-form-guide>ol{
  display:grid;
  gap:3px;
  margin:0;
  padding:8px;
  list-style:none
}

.app-shell .superadmin-coupon-form-guide>ol>li{
  display:flex;
  align-items:center;
  gap:9px;
  padding:9px;
  border-radius:9px;
  color:var(--text-2)
}

.app-shell .superadmin-coupon-form-guide>ol>li:first-child{
  border:1px solid #c3ddca;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .superadmin-coupon-form-guide>ol b{
  display:grid;
  width:24px;
  height:24px;
  flex:none;
  place-items:center;
  border:1px solid var(--border);
  border-radius:7px;
  background:var(--surface);
  color:var(--text-3);
  font-size:9px
}

.app-shell .superadmin-coupon-form-guide>ol strong,.app-shell .superadmin-coupon-form-guide>ol small{
  display:block
}

.app-shell .superadmin-coupon-form-guide>ol strong{
  font-size:10.5px;
  font-weight:780
}

.app-shell .superadmin-coupon-form-guide>ol small{
  margin-top:1px;
  color:var(--text-3);
  font-size:8.5px
}

.app-shell .superadmin-coupon-form-guide>div{
  display:flex;
  align-items:flex-start;
  gap:7px;
  margin:3px 9px 9px;
  padding:9px;
  border:1px solid #c8e1cf;
  border-radius:9px;
  background:#f4fbf6;
  color:var(--brand-strong)
}

.app-shell .superadmin-coupon-form-guide>div svg{
  flex:none;
  margin-top:1px
}

.app-shell .superadmin-coupon-form-guide>div p{
  margin:0;
  font-size:8.5px;
  line-height:1.45
}

.app-shell .superadmin-coupon-form-workspace{
  display:grid;
  min-width:0;
  gap:12px
}

.app-shell .superadmin-coupon-form-section{
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  box-shadow:0 5px 18px -15px rgba(16,32,24,.42)
}

.app-shell .superadmin-coupon-form-section>header{
  display:grid;
  grid-template-columns:36px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  padding:13px 15px;
  border-bottom:1px solid var(--border);
  background:linear-gradient(90deg,#fbfdfb,#f7faf8)
}

.app-shell .superadmin-coupon-form-section>header>span{
  display:grid;
  width:36px;
  height:36px;
  place-items:center;
  border-radius:10px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .superadmin-coupon-form-section>header.is-blue>span{
  background:#eaf3ff;
  color:#3979bc
}

.app-shell .superadmin-coupon-form-section>header.is-amber>span{
  background:#fff2de;
  color:#b87523
}

.app-shell .superadmin-coupon-form-section>header small{
  display:block;
  color:var(--brand-strong);
  font-size:8px;
  font-weight:850;
  letter-spacing:.08em
}

.app-shell .superadmin-coupon-form-section>header h2{
  margin:1px 0 0;
  color:var(--text);
  font-size:14px;
  font-weight:850
}

.app-shell .superadmin-coupon-form-section>header p{
  margin:2px 0 0;
  color:var(--text-3);
  font-size:9.5px
}

.app-shell .superadmin-coupon-form-section>header>b{
  padding:4px 7px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--surface);
  color:var(--text-3);
  font-size:8px;
  font-weight:750
}

.app-shell .superadmin-coupon-form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:13px;
  padding:15px
}

.app-shell .superadmin-coupon-form-grid.is-offer{
  grid-template-columns:1.2fr 1fr 1fr
}

.app-shell .superadmin-coupon-field{
  display:flex;
  min-width:0;
  flex-direction:column;
  gap:5px
}

.app-shell .superadmin-coupon-field>label{
  margin:0;
  color:var(--text-2);
  font-size:11px;
  font-weight:760
}

.app-shell .superadmin-coupon-field>label em{
  color:var(--danger);
  font-style:normal
}

.app-shell .superadmin-coupon-field>small{
  color:var(--text-3);
  font-size:9px;
  line-height:1.4
}

.app-shell .superadmin-coupon-control,.app-shell .superadmin-coupon-select{
  position:relative;
  display:flex;
  min-width:0;
  height:40px;
  align-items:center;
  border:1px solid var(--border);
  border-radius:9px;
  background:#f8faf9
}

.app-shell .superadmin-coupon-control:focus-within,.app-shell .superadmin-coupon-select:focus-within{
  border-color:#79bd8d;
  background:var(--surface);
  box-shadow:0 0 0 3px rgba(33,145,71,.09)
}

.app-shell .superadmin-coupon-control>svg,.app-shell .superadmin-coupon-select>svg{
  position:absolute;
  left:11px;
  z-index:3;
  color:#84948a;
  pointer-events:none
}

.app-shell .superadmin-coupon-control>.form-control,.app-shell .superadmin-coupon-select>.form-control{
  width:100%;
  height:38px;
  padding:0 11px 0 35px;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:var(--text);
  font-size:11px
}

.app-shell .superadmin-coupon-control>span{
  padding:0 10px;
  border-left:1px solid var(--border);
  color:var(--text-3);
  font-size:9px;
  font-weight:750;
  white-space:nowrap
}

.app-shell .superadmin-coupon-control>button{
  display:grid;
  width:34px;
  height:34px;
  flex:none;
  place-items:center;
  border:0;
  background:transparent;
  color:var(--text-3)
}

.app-shell .superadmin-coupon-control>button:hover{
  color:var(--danger)
}

.app-shell .superadmin-coupon-select{
  padding-left:25px
}

.app-shell .superadmin-coupon-select:after{
  position:absolute;
  right:13px;
  top:20px;
  z-index:2;
  width:7px;
  height:7px;
  margin-top:-5px;
  border-right:1.5px solid #87958d;
  border-bottom:1.5px solid #87958d;
  content:"";
  pointer-events:none;
  transform:rotate(45deg);
  transition:margin .15s ease,transform .15s ease
}

.app-shell .superadmin-coupon-select:focus-within:after{
  margin-top:-1px;
  transform:rotate(225deg)
}

.app-shell .superadmin-coupon-select.is-multiple{
  height:auto;
  min-height:40px;
  align-items:flex-start
}

.app-shell .superadmin-coupon-select>.select2-container{
  display:block;
  width:100%!important;
  min-width:0
}

.app-shell .superadmin-coupon-select .select2-selection{
  min-height:38px!important;
  border:0!important;
  background:transparent!important
}

.app-shell .superadmin-coupon-select .select2-selection__rendered{
  padding-right:32px!important;
  padding-left:10px!important;
  color:var(--text)!important;
  font-size:11px!important;
  line-height:36px!important
}

.app-shell .superadmin-coupon-select .select2-selection__arrow{
  right:5px!important;
  height:36px!important
}

.app-shell .superadmin-coupon-select .select2-selection__arrow b{
  display:none
}

.app-shell .superadmin-coupon-select .select2-selection--multiple{
  height:auto!important;
  min-height:38px!important;
  align-items:flex-start!important;
  padding:5px 32px 5px 5px!important;
  overflow:visible
}

.app-shell .superadmin-coupon-select .select2-selection--multiple .select2-selection__rendered{
  display:flex;
  overflow:visible;
  width:100%;
  min-height:28px;
  height:auto;
  align-items:center;
  gap:4px;
  flex-wrap:wrap
}

.app-shell .superadmin-coupon-select .select2-selection--multiple .select2-selection__choice{
  display:inline-flex!important;
  height:25px!important;
  max-width:100%;
  align-items:center;
  margin:0!important;
  padding:0 8px!important;
  border:1px solid #c8e1cf!important;
  border-radius:7px!important;
  background:var(--brand-weak)!important;
  color:var(--brand-strong)!important;
  font-size:9.5px!important;
  font-weight:750!important
}

.app-shell .superadmin-coupon-select .select2-selection--multiple .select2-selection__choice__remove{
  margin-right:5px!important;
  color:#6ea57f!important;
  font-size:13px!important
}

.app-shell .superadmin-coupon-select .select2-selection--multiple .select2-search--inline{
  min-width:24px;
  flex:1
}

.app-shell .superadmin-coupon-select .select2-selection--multiple .select2-search__field{
  height:25px!important;
  min-width:24px!important;
  font-size:10.5px!important
}

.app-shell .superadmin-coupon-select .select2-selection__placeholder{
  color:#929e97!important
}

.superadmin-coupon-dropdown.select2-dropdown-panel{
  border:1px solid #c9d8ce!important;
  border-radius:10px!important;
  outline:3px solid rgba(33,145,71,.08)!important;
  box-shadow:0 16px 34px -18px rgba(16,32,24,.42),0 5px 12px -8px rgba(16,32,24,.18)!important
}

.superadmin-coupon-dropdown .select2-results__options{
  max-height:220px!important;
  padding:6px!important
}

.superadmin-coupon-dropdown .select2-results__option{
  position:relative;
  min-height:36px!important;
  margin:1px 0;
  padding:9px 38px 9px 11px!important;
  border:1px solid transparent;
  border-radius:8px!important;
  background:var(--surface)!important;
  color:#4e5b53!important;
  font-size:11px!important;
  font-weight:650!important
}

.superadmin-coupon-dropdown.is-multiple .select2-results__option:after{
  position:absolute;
  right:11px;
  top:50%;
  display:grid;
  width:17px;
  height:17px;
  place-items:center;
  margin-top:-8.5px;
  border:1px solid #cad5ce;
  border-radius:5px;
  background:var(--surface);
  color:#fff;
  content:"";
  font-size:11px;
  font-weight:900;
  line-height:1
}

.superadmin-coupon-dropdown .select2-results__option:before{
  display:none!important
}

.superadmin-coupon-dropdown .select2-results__option:hover,.superadmin-coupon-dropdown .select2-results__option--highlighted[aria-selected]{
  border-color:#dbe7df!important;
  background:#f5f8f6!important;
  color:#17211c!important
}

.superadmin-coupon-dropdown .select2-results__option[aria-selected=true]{
  border-color:#bdddc7!important;
  background:#edf8f0!important;
  color:#176c36!important;
  font-weight:800!important
}

.superadmin-coupon-dropdown.is-multiple .select2-results__option[aria-selected=true]:after{
  border-color:#2f9b51;
  background:#2f9b51;
  content:"\2713"
}

.superadmin-coupon-dropdown .select2-results__message{
  padding:16px!important;
  color:#7f8b84!important;
  text-align:center
}

.superadmin-coupon-dropdown .select2-search--dropdown{
  padding:7px!important
}

.superadmin-coupon-dropdown .select2-search__field{
  height:34px!important;
  border-radius:8px!important;
  font-size:11px!important
}

.app-shell .superadmin-coupon-active-choice{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0;
  padding:12px;
  border:1px solid #c8e1cf;
  border-radius:10px;
  background:#f5fbf7;
  cursor:pointer
}

.app-shell .superadmin-coupon-active-choice>span{
  min-width:0
}

.app-shell .superadmin-coupon-active-choice strong,.app-shell .superadmin-coupon-active-choice small{
  display:block
}

.app-shell .superadmin-coupon-active-choice strong{
  color:var(--text);
  font-size:10.5px;
  font-weight:780
}

.app-shell .superadmin-coupon-active-choice small{
  margin-top:2px;
  color:var(--text-3);
  font-size:8.5px
}

.app-shell .superadmin-coupon-form-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 0
}

.app-shell .superadmin-coupon-form-actions>span{
  display:flex;
  align-items:center;
  gap:6px;
  color:var(--text-3);
  font-size:9px
}

.app-shell .superadmin-coupon-form-actions>span svg{
  color:var(--brand-strong)
}

.app-shell .superadmin-coupon-form-actions>div{
  display:flex;
  gap:8px
}

.app-shell .superadmin-coupon-form label.error{
  margin:2px 0 0;
  color:#c34540;
  font-size:9px;
  font-weight:650
}

@media (max-width:1100px){
  .app-shell .superadmin-coupon-summary{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

  .app-shell .superadmin-coupon-form-grid.is-offer{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

  .app-shell .superadmin-coupon-field.is-code{
    grid-column:1/-1
  }
}

@media (max-width:820px){
  .app-shell .superadmin-coupon-form-layout{
    grid-template-columns:1fr
  }

  .app-shell .superadmin-coupon-form-guide{
    position:static
  }

  .app-shell .superadmin-coupon-form-guide>ol{
    grid-template-columns:repeat(3,minmax(0,1fr))
  }

  .app-shell .superadmin-coupon-form-guide>div{
    display:none
  }

  .app-shell .superadmin-coupon-section-head p{
    display:none
  }
}

@media (max-width:600px){
  .app-shell .superadmin-coupon-summary,.app-shell .superadmin-coupon-form-grid,.app-shell .superadmin-coupon-form-grid.is-offer,.app-shell .superadmin-coupon-form-guide>ol{
    grid-template-columns:1fr
  }

  .app-shell .superadmin-coupon-field.is-code{
    grid-column:auto
  }

  .app-shell .superadmin-coupon-form-section>header>b{
    display:none
  }

  .app-shell .superadmin-coupon-form-actions{
    align-items:stretch;
    flex-direction:column
  }

  .app-shell .superadmin-coupon-form-actions>div{
    width:100%
  }

  .app-shell .superadmin-coupon-form-actions .btn-ghost,.app-shell .superadmin-coupon-form-actions .btn-primary{
    flex:1;
    justify-content:center
  }
}

/* Superadmin subscription modals ------------------------------------ */

body.app-ui .superadmin-subscription-modal-dialog{
  width:min(760px,calc(100vw - 24px));
  margin:42px auto
}

body.app-ui .superadmin-subscription-modal-dialog.is-compact{
  width:min(690px,calc(100vw - 24px))
}

body.app-ui .superadmin-subscription-modal{
  overflow:hidden;
  border:0!important;
  border-radius:16px!important;
  background:var(--surface);
  box-shadow:0 24px 72px rgba(15,31,22,.28)!important
}

body.app-ui .superadmin-subscription-modal-header{
  display:flex;
  min-height:78px;
  align-items:center;
  gap:12px;
  padding:14px 17px;
  border-bottom:1px solid var(--border-2);
  background:linear-gradient(100deg,#f3faf5 0%,var(--surface) 70%)
}

body.app-ui .superadmin-subscription-modal-header>span{
  display:grid;
  width:42px;
  height:42px;
  flex:none;
  place-items:center;
  border-radius:11px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

body.app-ui .superadmin-subscription-modal-header>div{
  min-width:0;
  flex:1
}

body.app-ui .superadmin-subscription-modal-header small{
  display:block;
  color:var(--brand-strong);
  font-size:8.5px;
  font-weight:850;
  letter-spacing:.09em
}

body.app-ui .superadmin-subscription-modal-header h4{
  margin:1px 0 0;
  color:var(--text);
  font-size:16px;
  font-weight:830;
  line-height:1.3
}

body.app-ui .superadmin-subscription-modal-header p{
  margin:2px 0 0;
  color:var(--text-3);
  font-size:10.5px;
  line-height:1.4
}

body.app-ui .superadmin-subscription-modal-header p strong{
  color:var(--text-2);
  font-weight:780
}

body.app-ui .superadmin-subscription-modal-close{
  display:grid;
  width:34px;
  height:34px;
  flex:none;
  place-items:center;
  padding:0;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface-2);
  color:var(--text-3);
  cursor:pointer;
  transition:background .15s ease,color .15s ease
}

body.app-ui .superadmin-subscription-modal-close:hover{
  background:var(--surface-3);
  color:var(--text)
}

body.app-ui .superadmin-subscription-modal-body{
  display:grid;
  gap:11px;
  padding:14px;
  background:#f8faf9
}

body.app-ui .superadmin-subscription-modal-section{
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface)
}

body.app-ui .superadmin-subscription-modal-section>header{
  display:flex;
  align-items:center;
  gap:9px;
  padding:11px 12px;
  border-bottom:1px solid var(--border-2);
  background:linear-gradient(90deg,#fafcfb,var(--surface))
}

body.app-ui .superadmin-subscription-modal-section>header>span{
  display:grid;
  width:31px;
  height:31px;
  flex:none;
  place-items:center;
  border-radius:8px;
  background:#fff2de;
  color:#af7220
}

body.app-ui .superadmin-subscription-modal-section>header strong,body.app-ui .superadmin-subscription-modal-section>header small{
  display:block
}

body.app-ui .superadmin-subscription-modal-section>header strong{
  color:var(--text);
  font-size:11.5px;
  font-weight:800
}

body.app-ui .superadmin-subscription-modal-section>header small{
  margin-top:2px;
  color:var(--text-3);
  font-size:9px
}

body.app-ui .superadmin-subscription-modal-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:13px;
  padding:14px
}

body.app-ui .superadmin-subscription-modal-field{
  min-width:0
}

body.app-ui .superadmin-subscription-modal-field.is-wide{
  grid-column:1/-1
}

body.app-ui .superadmin-subscription-modal-field>label{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  margin:0 0 6px;
  color:var(--text-2);
  font-size:11.5px;
  font-weight:750
}

body.app-ui .superadmin-subscription-modal-field>label em{
  color:var(--danger);
  font-style:normal
}

body.app-ui .superadmin-subscription-modal-field>label span{
  padding:3px 6px;
  border-radius:999px;
  background:var(--surface-3);
  color:var(--text-3);
  font-size:8px;
  font-weight:700
}

body.app-ui .superadmin-subscription-modal-field>small{
  display:block;
  margin-top:5px;
  color:var(--text-3);
  font-size:9px;
  line-height:1.4
}

body.app-ui .superadmin-subscription-control{
  position:relative
}

body.app-ui .superadmin-subscription-control>svg{
  position:absolute;
  top:13px;
  left:12px;
  z-index:2;
  color:#89978f;
  pointer-events:none
}

body.app-ui .superadmin-subscription-control>.form-control{
  width:100%;
  height:42px;
  padding-left:38px;
  border:1px solid var(--border);
  border-radius:9px;
  background-color:var(--surface-2);
  box-shadow:none;
  color:var(--text);
  font-size:12px;
  transition:border-color .15s ease,background-color .15s ease,box-shadow .15s ease
}

body.app-ui .superadmin-subscription-control>select.form-control{
  padding-right:32px;
  background-position:calc(100% - 11px) 50%!important;
  background-size:11px 11px!important;
  background-repeat:no-repeat!important
}

body.app-ui .superadmin-subscription-control:focus-within>svg{
  color:var(--brand-strong)
}

body.app-ui .superadmin-subscription-control>.form-control:focus{
  border-color:#72b087;
  background-color:var(--surface);
  box-shadow:0 0 0 3px rgba(34,145,69,.08)
}

body.app-ui .superadmin-subscription-control>.datepicker[readonly]{
  cursor:pointer
}

body.app-ui .superadmin-subscription-date-section>header>span{
  background:#eaf3ff;
  color:#3979bc
}

body.app-ui .superadmin-subscription-modal-note{
  display:flex;
  align-items:flex-start;
  gap:9px;
  padding:10px 11px;
  border:1px solid #d7e7dc;
  border-radius:10px;
  background:#f3f9f5;
  color:#567063
}

body.app-ui .superadmin-subscription-modal-note>span{
  display:grid;
  width:26px;
  height:26px;
  flex:none;
  place-items:center;
  border-radius:7px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

body.app-ui .superadmin-subscription-modal-note p{
  margin:0;
  padding-top:4px;
  font-size:9.5px;
  line-height:1.45
}

body.app-ui .superadmin-subscription-modal-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 17px;
  border-top:1px solid var(--border-2);
  background:var(--surface)
}

body.app-ui .superadmin-subscription-modal-footer>span{
  display:inline-flex;
  align-items:center;
  gap:5px;
  color:var(--text-3);
  font-size:9.5px;
  font-weight:650
}

body.app-ui .superadmin-subscription-modal-footer>span i{
  color:var(--danger);
  font-style:normal
}

body.app-ui .superadmin-subscription-modal-footer>div{
  display:flex;
  align-items:center;
  gap:8px
}

body.app-ui .superadmin-subscription-modal-footer .btn-ghost,body.app-ui .superadmin-subscription-modal-footer .btn-primary{
  height:40px;
  min-width:96px;
  justify-content:center
}

@media (max-width:620px){
  body.app-ui .superadmin-subscription-modal-dialog{
    width:calc(100vw - 12px);
    margin:6px auto
  }

  body.app-ui .superadmin-subscription-modal-header{
    padding:12px
  }

  body.app-ui .superadmin-subscription-modal-header p{
    display:none
  }

  body.app-ui .superadmin-subscription-modal-body{
    padding:10px
  }

  body.app-ui .superadmin-subscription-modal-grid{
    grid-template-columns:1fr;
    padding:12px
  }

  body.app-ui .superadmin-subscription-modal-field.is-wide{
    grid-column:auto
  }

  body.app-ui .superadmin-subscription-modal-footer{
    align-items:stretch;
    flex-direction:column;
    padding:10px 12px
  }

  body.app-ui .superadmin-subscription-modal-footer>span{
    text-align:center
  }

  body.app-ui .superadmin-subscription-modal-footer>div{
    width:100%
  }

  body.app-ui .superadmin-subscription-modal-footer .btn-ghost,body.app-ui .superadmin-subscription-modal-footer .btn-primary{
    flex:1
  }
}

/* Superadmin business action intent --------------------------------- */

.app-shell .superadmin-business-action-menu>li>.table-action-warning{
  color:#a66a18
}

.app-shell .superadmin-business-action-menu>li>.table-action-warning .table-action-icon{
  color:#b7791f
}

.app-shell .superadmin-business-action-menu>li>.table-action-warning:hover{
  background:#fff7e8;
  color:#8d5914
}

.app-shell .superadmin-business-action-menu>li>.table-action-activate{
  color:var(--brand-strong)
}

.app-shell .superadmin-business-action-menu>li>.table-action-activate .table-action-icon{
  color:var(--brand)
}

.app-shell .superadmin-business-action-menu>li>.table-action-activate:hover{
  background:var(--brand-weak);
  color:var(--brand-strong)
}

/* Superadmin new business setup -------------------------------------- */

.app-shell .superadmin-business-create-page{
  max-width:1450px
}

.app-shell .superadmin-business-create-form{
  margin-top:16px
}

.app-shell .superadmin-business-create-layout{
  display:grid;
  grid-template-columns:238px minmax(0,1fr);
  align-items:start;
  gap:15px
}

.app-shell .superadmin-business-create-guide{
  position:sticky;
  top:14px;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:15px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

.app-shell .superadmin-business-create-guide>header{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:14px;
  border-bottom:1px solid var(--border-2);
  background:linear-gradient(145deg,#fbfdfb,#f3f8f5)
}

.app-shell .superadmin-business-create-guide>header>span{
  display:grid;
  width:36px;
  height:36px;
  flex:none;
  place-items:center;
  border-radius:10px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .superadmin-business-create-guide>header>div{
  min-width:0
}

.app-shell .superadmin-business-create-guide>header small{
  display:block;
  color:var(--brand-strong);
  font-size:8px;
  font-weight:850;
  letter-spacing:.08em
}

.app-shell .superadmin-business-create-guide>header strong{
  display:block;
  margin-top:2px;
  color:var(--text);
  font-size:13px;
  font-weight:820
}

.app-shell .superadmin-business-create-guide>header p{
  margin:3px 0 0;
  color:var(--text-3);
  font-size:9px;
  line-height:1.45
}

.app-shell .superadmin-business-create-guide nav{
  display:grid;
  gap:3px;
  padding:8px
}

.app-shell .superadmin-business-create-guide nav>a{
  display:flex;
  align-items:center;
  gap:9px;
  padding:9px;
  border:1px solid transparent;
  border-radius:9px;
  color:var(--text-2);
  text-decoration:none;
  transition:border-color .15s ease,background .15s ease,color .15s ease
}

.app-shell .superadmin-business-create-guide nav>a:hover{
  border-color:#dce7df;
  background:#f6faf7;
  color:var(--brand-strong)
}

.app-shell .superadmin-business-create-guide nav>a.is-active{
  position:relative;
  border-color:#bcdcc5;
  background:linear-gradient(90deg,#edf8f0,#f7fbf8);
  color:var(--brand-strong);
  box-shadow:inset 0 0 0 1px rgba(34,145,69,.025)
}

.app-shell .superadmin-business-create-guide nav>a.is-active::before{
  position:absolute;
  width:3px;
  border-radius:0 3px 3px 0;
  background:var(--brand);
  content:"";
  inset:7px auto 7px -1px
}

.app-shell .superadmin-business-create-guide nav>a>b{
  display:grid;
  width:25px;
  height:25px;
  flex:none;
  place-items:center;
  border:1px solid var(--border);
  border-radius:7px;
  background:var(--surface-2);
  color:var(--text-3);
  font-size:9px;
  font-weight:850
}

.app-shell .superadmin-business-create-guide nav>a:hover>b{
  border-color:#bcdcc5;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .superadmin-business-create-guide nav>a.is-active>b{
  border-color:#8fc49f;
  background:var(--brand);
  color:#fff;
  box-shadow:0 4px 10px -6px rgba(26,121,57,.7)
}

.app-shell .superadmin-business-create-guide nav>a.is-active strong{
  color:var(--brand-strong)
}

.app-shell .superadmin-business-create-guide nav>a>span{
  min-width:0
}

.app-shell .superadmin-business-create-guide nav strong,.app-shell .superadmin-business-create-guide nav small{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .superadmin-business-create-guide nav strong{
  font-size:10.5px;
  font-weight:760
}

.app-shell .superadmin-business-create-guide nav small{
  margin-top:2px;
  color:var(--text-3);
  font-size:8.5px
}

.app-shell .superadmin-business-create-note{
  display:flex;
  align-items:flex-start;
  gap:7px;
  margin:4px 9px 10px;
  padding:9px;
  border:1px solid #d6e7db;
  border-radius:9px;
  background:#f4faf6;
  color:var(--brand-strong)
}

.app-shell .superadmin-business-create-note svg{
  flex:none;
  margin-top:1px
}

.app-shell .superadmin-business-create-note p{
  margin:0;
  color:#607369;
  font-size:8.5px;
  line-height:1.45
}

.app-shell .superadmin-business-create-workspace{
  display:grid;
  min-width:0;
  gap:12px
}

.app-shell .superadmin-business-create-section{
  scroll-margin-top:14px;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:15px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

.app-shell .superadmin-business-create-section>header{
  display:flex;
  min-height:67px;
  align-items:center;
  gap:11px;
  padding:12px 15px;
  border-bottom:1px solid var(--border-2);
  background:linear-gradient(90deg,#f7fbf8,var(--surface))
}

.app-shell .superadmin-business-create-section>header>span{
  display:grid;
  width:38px;
  height:38px;
  flex:none;
  place-items:center;
  border-radius:10px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .superadmin-business-create-section>header>div{
  min-width:0;
  flex:1
}

.app-shell .superadmin-business-create-section>header small{
  display:block;
  color:var(--brand-strong);
  font-size:8px;
  font-weight:850;
  letter-spacing:.08em
}

.app-shell .superadmin-business-create-section>header h2{
  margin:1px 0 0;
  color:var(--text);
  font-size:14px;
  font-weight:830;
  letter-spacing:-.01em
}

.app-shell .superadmin-business-create-section>header p{
  margin:2px 0 0;
  color:var(--text-3);
  font-size:9.5px;
  line-height:1.4
}

.app-shell .superadmin-business-create-section>header>b{
  display:inline-flex;
  padding:4px 7px;
  border:1px solid #cbe3d2;
  border-radius:999px;
  background:#f4faf6;
  color:var(--brand-strong);
  font-size:8px;
  font-weight:820;
  white-space:nowrap
}

.app-shell .superadmin-business-create-section>header.is-blue{
  background:linear-gradient(90deg,#f5f9fe,var(--surface))
}

.app-shell .superadmin-business-create-section>header.is-blue>span{
  background:#eaf3ff;
  color:#3979bc
}

.app-shell .superadmin-business-create-section>header.is-blue small{
  color:#3979bc
}

.app-shell .superadmin-business-create-section>header.is-blue>b{
  border-color:#d8e6f6;
  background:#f3f8fd;
  color:#3974ae
}

.app-shell .superadmin-business-create-section>header.is-violet{
  background:linear-gradient(90deg,#faf8fd,var(--surface))
}

.app-shell .superadmin-business-create-section>header.is-violet>span{
  background:#f0eafe;
  color:#7954b5
}

.app-shell .superadmin-business-create-section>header.is-violet small{
  color:#7954b5
}

.app-shell .superadmin-business-create-section>header.is-violet>b{
  border-color:#dfd4f2;
  background:#f7f3fc;
  color:#68489d
}

.app-shell .superadmin-business-create-section>header.is-amber{
  background:linear-gradient(90deg,#fffbf3,var(--surface))
}

.app-shell .superadmin-business-create-section>header.is-amber>span{
  background:#fff2de;
  color:#b87523
}

.app-shell .superadmin-business-create-section>header.is-amber small{
  color:#a96d1f
}

.app-shell .superadmin-business-create-section>header.is-amber>b{
  border-color:#ecd9b7;
  background:#fff9ed;
  color:#9b671f
}

.app-shell .superadmin-business-create-section-body{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:13px 15px;
  padding:15px
}

.app-shell .superadmin-business-create-section-body.is-three{
  grid-template-columns:repeat(3,minmax(0,1fr))
}

.app-shell .superadmin-business-field{
  min-width:0
}

.app-shell .superadmin-business-field.is-wide{
  grid-column:1/-1
}

.app-shell .superadmin-business-field.is-span-two{
  grid-column:span 2
}

.app-shell .superadmin-business-field>label{
  display:block;
  margin:0 0 6px;
  color:var(--text-2);
  font-size:10.5px;
  font-weight:740
}

.app-shell .superadmin-business-field>label>em{
  color:var(--danger);
  font-style:normal
}

.app-shell .superadmin-business-field>small{
  display:block;
  margin-top:5px;
  color:var(--text-3);
  font-size:8.5px;
  line-height:1.4
}

.app-shell .superadmin-business-control,.app-shell .superadmin-business-select-control{
  position:relative;
  min-width:0
}

.app-shell .superadmin-business-control>svg,.app-shell .superadmin-business-select-control>svg{
  position:absolute;
  top:12px;
  left:11px;
  z-index:3;
  color:#8d9992;
  pointer-events:none
}

.app-shell .superadmin-business-control>.form-control{
  width:100%;
  height:40px;
  padding:0 11px 0 36px;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface-2);
  box-shadow:none;
  color:var(--text);
  font-size:11.5px;
  transition:border-color .15s ease,background .15s ease,box-shadow .15s ease
}

.app-shell .superadmin-business-control>.form-control:focus{
  border-color:#73b187;
  background:var(--surface);
  box-shadow:0 0 0 3px rgba(34,145,69,.08)
}

.app-shell .superadmin-business-control:focus-within>svg,.app-shell .superadmin-business-select-control:focus-within>svg{
  color:var(--brand-strong)
}

.app-shell .superadmin-business-select-control>.select2-container{
  display:block;
  width:100%!important
}

.app-shell .superadmin-business-select-control .select2-selection--single{
  height:40px!important;
  border:1px solid var(--border)!important;
  border-radius:9px!important;
  background:var(--surface-2)!important;
  box-shadow:none!important
}

.app-shell .superadmin-business-select-control .select2-selection__rendered{
  padding-right:30px!important;
  padding-left:36px!important;
  color:var(--text)!important;
  font-size:11.5px!important;
  line-height:38px!important
}

.app-shell .superadmin-business-select-control .select2-selection__placeholder{
  color:#99a39d!important
}

.app-shell .superadmin-business-select-control .select2-selection__arrow{
  height:38px!important;
  right:5px!important
}

.app-shell .superadmin-business-select-control .select2-container--open .select2-selection--single{
  border-color:#73b187!important;
  background:var(--surface)!important;
  box-shadow:0 0 0 3px rgba(34,145,69,.08)!important
}

.app-shell .superadmin-business-logo-field .file-upload-picker{
  min-height:60px;
  border-color:#cbded1;
  background:#f8fcf9
}

.app-shell .superadmin-business-logo-field .file-upload-icon{
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .superadmin-business-logo-field .file-upload-help{
  font-size:8.5px
}

.app-shell .superadmin-business-field.is-password .superadmin-business-control>.form-control{
  padding-right:42px
}

.app-shell .superadmin-password-toggle{
  position:absolute;
  top:5px;
  right:5px;
  z-index:3;
  display:grid;
  width:30px;
  height:30px;
  place-items:center;
  padding:0;
  border:0;
  border-radius:7px;
  background:transparent;
  color:var(--text-3);
  cursor:pointer
}

.app-shell .superadmin-password-toggle:hover,.app-shell .superadmin-password-toggle.is-visible{
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .superadmin-business-subscription-tip{
  display:flex;
  grid-column:1/-1;
  align-items:flex-start;
  gap:8px;
  padding:9px 10px;
  border:1px solid #ecd9b7;
  border-radius:9px;
  background:#fffaf0;
  color:#9b671f
}

.app-shell .superadmin-business-subscription-tip svg{
  flex:none;
  margin-top:1px
}

.app-shell .superadmin-business-subscription-tip p{
  margin:0;
  font-size:8.8px;
  line-height:1.45
}

.app-shell .superadmin-business-field-error{
  display:block;
  margin:5px 0 0;
  color:var(--danger);
  font-size:8.8px;
  font-weight:650
}

.app-shell .superadmin-business-field:has(.superadmin-business-field-error) .form-control,.app-shell .superadmin-business-field:has(.superadmin-business-field-error) .select2-selection--single{
  border-color:#e2a09a!important;
  background:#fffafa!important
}

@media (max-width:980px){
  .app-shell .superadmin-business-create-layout{
    grid-template-columns:1fr
  }

  .app-shell .superadmin-business-create-guide{
    position:static
  }

  .app-shell .superadmin-business-create-guide nav{
    grid-template-columns:repeat(4,minmax(0,1fr))
  }

  .app-shell .superadmin-business-create-note{
    display:none
  }
}

@media (max-width:760px){
  .app-shell .superadmin-business-create-guide nav{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

  .app-shell .superadmin-business-create-section-body,.app-shell .superadmin-business-create-section-body.is-three{
    grid-template-columns:1fr
  }

  .app-shell .superadmin-business-field.is-span-two{
    grid-column:auto
  }
}

@media (max-width:520px){
  .app-shell .superadmin-business-create-section>header p,.app-shell .superadmin-business-create-section>header>b{
    display:none
  }

  .app-shell .superadmin-business-create-guide nav{
    grid-template-columns:1fr
  }
}

/* Superadmin platform settings ------------------------------------- */

.app-shell .superadmin-settings-page{
  max-width:1540px
}

.app-shell .superadmin-settings-form{
  margin-top:16px
}

.app-shell .superadmin-settings-layout{
  display:grid;
  grid-template-columns:250px minmax(0,1fr);
  align-items:start;
  gap:14px
}

.app-shell .superadmin-settings-nav{
  position:sticky;
  top:76px;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

.app-shell .superadmin-settings-nav>header{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:15px;
  border-bottom:1px solid var(--border);
  background:linear-gradient(135deg,#fbfdfb,#f1f8f4)
}

.app-shell .superadmin-settings-nav>header>span{
  display:grid;
  width:36px;
  height:36px;
  flex:none;
  place-items:center;
  border-radius:10px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .superadmin-settings-nav>header small{
  display:block;
  color:var(--brand-strong);
  font-size:8px;
  font-weight:850;
  letter-spacing:.08em
}

.app-shell .superadmin-settings-nav>header strong{
  display:block;
  margin-top:1px;
  color:var(--text);
  font-size:13px;
  font-weight:850
}

.app-shell .superadmin-settings-nav>header p{
  margin:2px 0 0;
  color:var(--text-3);
  font-size:9px
}

.app-shell .superadmin-settings-nav>nav{
  display:grid;
  gap:3px;
  padding:8px
}

.app-shell .superadmin-settings-nav>nav>button{
  display:grid;
  width:100%;
  grid-template-columns:29px minmax(0,1fr) 15px;
  align-items:center;
  gap:8px;
  padding:8px;
  border:1px solid transparent;
  border-radius:9px;
  background:transparent;
  color:var(--text-2);
  text-align:left;
  cursor:pointer;
  transition:border-color .14s ease,background .14s ease,color .14s ease
}

.app-shell .superadmin-settings-nav>nav>button>span{
  display:grid;
  width:29px;
  height:29px;
  place-items:center;
  border-radius:8px;
  background:var(--surface-2);
  color:#89958e
}

.app-shell .superadmin-settings-nav>nav>button>div{
  min-width:0
}

.app-shell .superadmin-settings-nav>nav strong,.app-shell .superadmin-settings-nav>nav small{
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .superadmin-settings-nav>nav strong{
  font-size:10.5px;
  font-weight:770
}

.app-shell .superadmin-settings-nav>nav small{
  margin-top:1px;
  color:var(--text-3);
  font-size:8px
}

.app-shell .superadmin-settings-nav>nav>button>svg{
  color:#a1aba5;
  transition:transform .14s ease
}

.app-shell .superadmin-settings-nav>nav>button:hover{
  background:#f6f9f7;
  color:var(--text)
}

.app-shell .superadmin-settings-nav>nav>button.is-active{
  border-color:#bfdcc7;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .superadmin-settings-nav>nav>button.is-active>span{
  background:var(--surface);
  color:var(--brand-strong);
  box-shadow:0 2px 7px rgba(25,105,52,.08)
}

.app-shell .superadmin-settings-nav>nav>button.is-active>svg{
  color:var(--brand-strong);
  transform:translateX(2px)
}

.app-shell .superadmin-settings-nav-note{
  display:flex;
  align-items:flex-start;
  gap:7px;
  margin:3px 9px 9px;
  padding:9px;
  border:1px solid #c8e1cf;
  border-radius:9px;
  background:#f4fbf6;
  color:var(--brand-strong)
}

.app-shell .superadmin-settings-nav-note svg{
  flex:none;
  margin-top:1px
}

.app-shell .superadmin-settings-nav-note p{
  margin:0;
  font-size:8.5px;
  line-height:1.45
}

.app-shell .superadmin-settings-workspace{
  min-width:0;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  box-shadow:0 5px 18px -15px rgba(16,32,24,.42)
}

.app-shell .superadmin-settings-workspace-head{
  display:grid;
  grid-template-columns:38px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  padding:14px 16px;
  border-bottom:1px solid var(--border);
  background:linear-gradient(90deg,#fbfdfb,#f7faf8)
}

.app-shell .superadmin-settings-workspace-head>span{
  display:grid;
  width:38px;
  height:38px;
  place-items:center;
  border-radius:10px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .superadmin-settings-workspace-head small{
  display:block;
  color:var(--brand-strong);
  font-size:8px;
  font-weight:850;
  letter-spacing:.08em
}

.app-shell .superadmin-settings-workspace-head h2{
  margin:1px 0 0;
  color:var(--text);
  font-size:14px;
  font-weight:850
}

.app-shell .superadmin-settings-workspace-head p{
  margin:2px 0 0;
  color:var(--text-3);
  font-size:9.5px
}

.app-shell .superadmin-settings-workspace-head>b{
  padding:5px 8px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--surface);
  color:var(--text-3);
  font-size:8px;
  font-weight:780
}

.app-shell .superadmin-settings-panels{
  padding:16px
}

.app-shell .superadmin-settings-panel{
  display:none!important
}

.app-shell .superadmin-settings-panel.is-active{
  display:block!important
}

.app-shell .superadmin-settings-panel>.row{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:13px;
  margin:0
}

.app-shell .superadmin-settings-panel>.row+.row{
  margin-top:14px
}

.app-shell .superadmin-settings-panel .col-xs-12{
  grid-column:span 12
}

.app-shell .superadmin-settings-panel .col-xs-8{
  grid-column:span 8
}

.app-shell .superadmin-settings-panel .col-xs-6{
  grid-column:span 6
}

.app-shell .superadmin-settings-panel .col-xs-4,.app-shell .superadmin-settings-panel .col-md-4{
  grid-column:span 4
}

.app-shell .superadmin-settings-panel .col-xs-3{
  grid-column:span 3
}

.app-shell .superadmin-settings-panel [class*=col-]{
  width:auto;
  min-width:0;
  padding:0;
  float:none
}

.app-shell .superadmin-settings-panel .clearfix{
  display:none
}

.app-shell .superadmin-settings-panel .form-group{
  margin:0
}

.app-shell .superadmin-settings-panel .form-group>label:not(:has(input)){
  display:block;
  margin:0 0 6px;
  color:var(--text-2);
  font-size:10.5px;
  font-weight:760
}

.app-shell .superadmin-settings-panel .form-control{
  width:100%;
  height:40px;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface-2);
  box-shadow:none;
  color:var(--text);
  font-size:11.5px;
  transition:border-color .15s ease,background .15s ease,box-shadow .15s ease
}

.app-shell .superadmin-settings-panel textarea.form-control{
  min-height:112px;
  height:auto;
  padding:10px 11px;
  line-height:1.55;
  resize:vertical
}

.app-shell .superadmin-settings-panel .form-control:focus{
  border-color:#73b187;
  background:var(--surface);
  box-shadow:0 0 0 3px rgba(34,145,69,.08)
}

.app-shell .superadmin-settings-panel .input-group{
  display:flex;
  width:100%;
  align-items:stretch
}

.app-shell .superadmin-settings-panel .input-group-addon{
  display:grid;
  width:38px;
  flex:none;
  place-items:center;
  padding:0;
  border:1px solid var(--border);
  border-right:0;
  border-radius:9px 0 0 9px;
  background:#f2f6f4;
  color:#87938c
}

.app-shell .superadmin-settings-panel .input-group>.form-control,.app-shell .superadmin-settings-panel .input-group>.select2-container .select2-selection{
  border-radius:0 9px 9px 0!important
}

.app-shell .superadmin-settings-panel .input-group>.select2-container{
  min-width:0;
  flex:1
}

.app-shell .superadmin-settings-panel .select2-container{
  width:100%!important
}

.app-shell .superadmin-settings-panel .select2-selection--single{
  height:40px!important;
  border:1px solid var(--border)!important;
  border-radius:9px!important;
  background:var(--surface-2)!important
}

.app-shell .superadmin-settings-panel .select2-selection__rendered{
  padding-left:11px!important;
  color:var(--text)!important;
  font-size:11.5px!important;
  line-height:38px!important
}

.app-shell .superadmin-settings-panel .select2-selection__arrow{
  height:38px!important
}

.app-shell .superadmin-settings-panel .form-group>label:has(input),.app-shell .superadmin-settings-panel .form-group>label:has(.icheckbox_square-blue){
  display:flex;
  min-height:42px;
  align-items:center;
  gap:8px;
  margin:0;
  padding:10px;
  border:1px solid var(--border);
  border-radius:9px;
  background:#f8faf9;
  color:var(--text-2);
  font-size:10.5px;
  font-weight:720;
  cursor:pointer
}

.app-shell .superadmin-settings-panel .help-block{
  margin:5px 0 0;
  color:var(--text-3);
  font-size:9px;
  line-height:1.45
}

.app-shell .superadmin-settings-panel h4{
  grid-column:1/-1;
  margin:5px 0 0;
  padding:10px 0 8px;
  border-bottom:1px solid var(--border-2);
  color:var(--text);
  font-size:12px;
  font-weight:850
}

.app-shell .superadmin-settings-panel h4 small{
  color:var(--text-3);
  font-size:9px;
  font-weight:600
}

.app-shell .superadmin-settings-panel hr{
  margin:4px 0 10px;
  border-color:var(--border-2)
}

.app-shell .superadmin-settings-panel code{
  display:block;
  margin-top:10px;
  padding:12px 14px;
  border:1px solid #c7dfcf;
  border-radius:9px;
  background:#f3faf5;
  color:#176b36;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:10.5px;
  line-height:1.5;
  word-break:break-all
}

.app-shell .superadmin-settings-panel mark{
  padding:2px 5px;
  border-radius:5px;
  background:#fff1cf;
  color:#865d18
}

.app-shell #settings-cron>div>div{
  padding:4px 2px;
  color:var(--text-2);
  font-size:11px;
  line-height:1.65
}

.app-shell #settings-code textarea{
  min-height:220px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:10.5px
}

.app-shell #settings-payments>.row{
  align-items:start
}

.app-shell #settings-payments>.row>[class*=col-]:not(:has(.form-group)){
  padding:11px;
  border:1px solid var(--border);
  border-radius:9px;
  background:#f8faf9;
  color:var(--text-2);
  font-size:9px;
  line-height:1.55
}

.app-shell .superadmin-settings-panel .mce-tinymce{
  overflow:hidden;
  border:1px solid var(--border)!important;
  border-radius:10px!important;
  box-shadow:none!important
}

.app-shell .superadmin-settings-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-top:12px;
  padding:12px 14px;
  border:1px solid var(--border);
  border-radius:13px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

.app-shell .superadmin-settings-actions>span{
  display:flex;
  align-items:center;
  gap:6px;
  color:var(--text-3);
  font-size:9px
}

.app-shell .superadmin-settings-actions>span svg{
  color:var(--brand-strong)
}

@media (max-width:1080px){
  .app-shell .superadmin-settings-layout{
    grid-template-columns:220px minmax(0,1fr)
  }

  .app-shell .superadmin-settings-panel .col-xs-4,.app-shell .superadmin-settings-panel .col-md-4,.app-shell .superadmin-settings-panel .col-xs-3{
    grid-column:span 6
  }
}

@media (max-width:820px){
  .app-shell .superadmin-settings-layout{
    grid-template-columns:1fr
  }

  .app-shell .superadmin-settings-nav{
    position:static
  }

  .app-shell .superadmin-settings-nav>nav{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

  .app-shell .superadmin-settings-nav-note{
    display:none
  }
}

@media (max-width:620px){
  .app-shell .superadmin-settings-nav>nav{
    grid-template-columns:1fr
  }

  .app-shell .superadmin-settings-panel .col-xs-8,.app-shell .superadmin-settings-panel .col-xs-6,.app-shell .superadmin-settings-panel .col-xs-4,.app-shell .superadmin-settings-panel .col-md-4,.app-shell .superadmin-settings-panel .col-xs-3{
    grid-column:span 12
  }

  .app-shell .superadmin-settings-workspace-head>b,.app-shell .superadmin-settings-workspace-head p{
    display:none
  }

  .app-shell .superadmin-settings-actions{
    align-items:stretch;
    flex-direction:column;
    gap:10px
  }

  .app-shell .superadmin-settings-actions .btn-primary{
    justify-content:center
  }
}

/* Superadmin communicator ------------------------------------------- */

.app-shell .superadmin-communicator-page{
  max-width:1540px
}

.app-shell .superadmin-communicator-summary{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin:16px 0
}

.app-shell .superadmin-communicator-summary>article{
  display:flex;
  min-width:0;
  align-items:center;
  gap:12px;
  padding:14px 15px;
  border:1px solid var(--border);
  border-radius:13px;
  background:var(--surface);
  box-shadow:0 5px 18px -14px rgba(16,32,24,.38)
}

.app-shell .superadmin-communicator-summary>article>span{
  display:grid;
  width:39px;
  height:39px;
  flex:none;
  place-items:center;
  border-radius:10px
}

.app-shell .superadmin-communicator-summary .is-green{
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .superadmin-communicator-summary .is-blue{
  background:#eaf3ff;
  color:#3979bc
}

.app-shell .superadmin-communicator-summary .is-amber{
  background:#fff2de;
  color:#b87523
}

.app-shell .superadmin-communicator-summary .is-violet{
  background:#f1ecfd;
  color:#6d3fc4
}

.app-shell .superadmin-communicator-summary>article>div{
  display:grid;
  min-width:0;
  flex:1;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-rows:auto auto
}

.app-shell .superadmin-communicator-summary small{
  grid-column:1;
  color:var(--text-3);
  font-size:10px;
  font-weight:850;
  letter-spacing:.065em
}

.app-shell .superadmin-communicator-summary strong{
  grid-column:2;
  grid-row:1/3;
  align-self:center;
  margin-left:10px;
  color:var(--text);
  font-size:22px;
  font-weight:880;
  white-space:nowrap
}

.app-shell .superadmin-communicator-summary strong.is-date{
  font-size:15px;
  font-weight:800
}

.app-shell .superadmin-communicator-summary p{
  grid-column:1;
  overflow:hidden;
  margin:2px 0 0;
  color:var(--text-2);
  font-size:11.5px;
  font-weight:650;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .superadmin-communicator-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 268px;
  align-items:start;
  gap:14px
}

.app-shell .superadmin-communicator-compose{
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  box-shadow:0 5px 18px -15px rgba(16,32,24,.42)
}

.app-shell .superadmin-communicator-section-head{
  display:flex;
  align-items:center;
  gap:10px;
  padding:13px 15px;
  border-bottom:1px solid var(--border-2);
  background:linear-gradient(90deg,#f9fbfa,var(--surface))
}

.app-shell .superadmin-communicator-section-head>span{
  display:grid;
  width:34px;
  height:34px;
  flex:none;
  place-items:center;
  border-radius:9px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .superadmin-communicator-section-head>div{
  min-width:0;
  flex:1
}

.app-shell .superadmin-communicator-section-head small{
  display:block;
  color:var(--brand-strong);
  font-size:10px;
  font-weight:850;
  letter-spacing:.08em
}

.app-shell .superadmin-communicator-section-head h2{
  margin:1px 0 0;
  color:var(--text);
  font-size:15px;
  font-weight:820
}

.app-shell .superadmin-communicator-section-head p{
  margin:2px 0 0;
  color:var(--text-3);
  font-size:11.5px
}

.app-shell .superadmin-communicator-section-head>b{
  padding:5px 8px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--surface);
  color:var(--text-3);
  font-size:10.5px;
  font-weight:800;
  white-space:nowrap
}

.app-shell .superadmin-communicator-compose-body{
  display:grid;
  gap:14px;
  padding:15px
}

.app-shell .superadmin-communicator-field{
  margin:0;
  min-width:0
}

.app-shell .superadmin-communicator-field>label{
  display:block;
  margin:0 0 6px;
  color:var(--text-2);
  font-size:12.5px;
  font-weight:760
}

.app-shell .superadmin-communicator-field-label{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:6px
}

.app-shell .superadmin-communicator-field-label>label{
  margin:0;
  color:var(--text-2);
  font-size:12.5px;
  font-weight:760
}

.app-shell .superadmin-communicator-select-tools{
  display:flex;
  gap:5px
}

.app-shell .superadmin-communicator-select-tools .btn-sm{
  height:30px;
  padding:0 10px;
  border-radius:7px;
  font-size:11.5px
}

.app-shell .superadmin-communicator-field .form-control{
  height:42px;
  border:1px solid var(--border);
  border-radius:9px;
  background:#f8faf9;
  color:var(--text);
  font-size:12.5px
}

.app-shell .superadmin-communicator-field .form-control:focus{
  border-color:#79bd8d;
  background:var(--surface);
  box-shadow:0 0 0 3px rgba(33,145,71,.09)
}

.app-shell .superadmin-communicator-field textarea.form-control{
  height:auto
}

.app-shell .superadmin-communicator-hint{
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:6px;
  color:var(--text-3);
  font-size:11px;
  line-height:1.45
}

.app-shell .superadmin-communicator-hint svg{
  flex:none;
  color:var(--brand-strong)
}

.app-shell .superadmin-communicator-hint em{
  font-style:normal;
  font-weight:750
}

.app-shell .superadmin-communicator-compose label.error{
  display:block;
  margin:4px 0 0;
  color:#c34540;
  font-size:10.5px;
  font-weight:650
}

.app-shell .superadmin-communicator-recipients+.select2-container{
  width:100%!important
}

.app-shell .superadmin-communicator-field .select2-container--default .select2-selection--multiple{
  min-height:42px;
  padding:5px;
  border:1px solid var(--border)!important;
  border-radius:9px!important;
  background:#f8faf9!important
}

.app-shell .superadmin-communicator-field .select2-container--default.select2-container--focus .select2-selection--multiple{
  border-color:#79bd8d!important;
  background:var(--surface)!important;
  box-shadow:0 0 0 3px rgba(33,145,71,.09)
}

.app-shell .superadmin-communicator-field .select2-selection--multiple .select2-selection__rendered{
  display:flex;
  width:100%;
  align-items:center;
  gap:4px;
  flex-wrap:wrap;
  padding:0!important
}

.app-shell .superadmin-communicator-field .select2-selection--multiple .select2-selection__choice{
  display:inline-flex!important;
  height:25px;
  max-width:100%;
  align-items:center;
  margin:0!important;
  padding:0 8px!important;
  border:1px solid #c8e1cf!important;
  border-radius:7px!important;
  background:var(--brand-weak)!important;
  color:var(--brand-strong)!important;
  font-size:11px!important;
  font-weight:750!important
}

.app-shell .superadmin-communicator-field .select2-selection--multiple .select2-selection__choice__remove{
  margin-right:5px!important;
  color:#6ea57f!important;
  font-size:13px!important
}

.app-shell .superadmin-communicator-field .select2-search__field{
  height:26px!important;
  font-size:11.5px!important
}

.app-shell .superadmin-communicator-editor .tox-tinymce{
  overflow:hidden;
  min-height:260px;
  border:1px solid var(--border)!important;
  border-radius:10px!important;
  box-shadow:none!important
}

.app-shell .superadmin-communicator-editor .mce-tinymce{
  overflow:hidden;
  border:1px solid var(--border)!important;
  border-radius:10px!important;
  box-shadow:none!important
}

.app-shell .superadmin-communicator-editor .tox .tox-menubar{
  padding:2px 6px;
  border-color:var(--border)!important;
  background:var(--surface)!important
}

.app-shell .superadmin-communicator-editor .tox .tox-toolbar,.app-shell .superadmin-communicator-editor .tox .tox-toolbar__primary,.app-shell .superadmin-communicator-editor .tox .tox-toolbar-overlord{
  border-color:var(--border)!important;
  background:var(--surface-2)!important
}

.app-shell .superadmin-communicator-editor .tox .tox-edit-area__iframe{
  background:var(--surface)
}

.app-shell .superadmin-communicator-editor .tox .tox-statusbar{
  border-color:var(--border)!important;
  background:var(--surface-2)!important
}

.app-shell .superadmin-communicator-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 15px;
  border-top:1px solid var(--border-2);
  background:#fbfdfc
}

.app-shell .superadmin-communicator-actions>span{
  display:flex;
  align-items:center;
  gap:6px;
  color:var(--text-3);
  font-size:11px
}

.app-shell .superadmin-communicator-actions>span svg{
  flex:none;
  color:var(--brand-strong)
}

.app-shell .superadmin-communicator-guide{
  position:sticky;
  top:76px;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

.app-shell .superadmin-communicator-guide>header{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:15px;
  border-bottom:1px solid var(--border);
  background:linear-gradient(135deg,#fbfdfb,#f3f8f5)
}

.app-shell .superadmin-communicator-guide>header>span{
  display:grid;
  width:36px;
  height:36px;
  flex:none;
  place-items:center;
  border-radius:10px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .superadmin-communicator-guide>header small{
  display:block;
  color:var(--brand-strong);
  font-size:10px;
  font-weight:850;
  letter-spacing:.075em
}

.app-shell .superadmin-communicator-guide>header strong{
  display:block;
  margin-top:2px;
  color:var(--text);
  font-size:14.5px;
  font-weight:850
}

.app-shell .superadmin-communicator-guide>header p{
  margin:3px 0 0;
  color:var(--text-3);
  font-size:11px;
  line-height:1.4
}

.app-shell .superadmin-communicator-guide>ul{
  display:grid;
  gap:3px;
  margin:0;
  padding:8px;
  list-style:none
}

.app-shell .superadmin-communicator-guide>ul>li{
  display:flex;
  align-items:flex-start;
  gap:9px;
  padding:9px;
  border-radius:9px;
  color:var(--text-2)
}

.app-shell .superadmin-communicator-guide>ul>li:hover{
  background:var(--surface-2)
}

.app-shell .superadmin-communicator-guide>ul b{
  display:grid;
  width:24px;
  height:24px;
  flex:none;
  place-items:center;
  border:1px solid var(--border);
  border-radius:7px;
  background:var(--surface);
  color:var(--brand-strong)
}

.app-shell .superadmin-communicator-guide>ul strong,.app-shell .superadmin-communicator-guide>ul small{
  display:block
}

.app-shell .superadmin-communicator-guide>ul strong{
  font-size:12px;
  font-weight:780
}

.app-shell .superadmin-communicator-guide>ul small{
  margin-top:2px;
  color:var(--text-3);
  font-size:10.5px;
  line-height:1.4
}

.app-shell .superadmin-communicator-guide>div{
  display:flex;
  align-items:flex-start;
  gap:7px;
  margin:3px 9px 9px;
  padding:9px;
  border:1px solid #c8e1cf;
  border-radius:9px;
  background:#f4fbf6;
  color:var(--brand-strong)
}

.app-shell .superadmin-communicator-guide>div svg{
  flex:none;
  margin-top:1px
}

.app-shell .superadmin-communicator-guide>div p{
  margin:0;
  font-size:10.5px;
  line-height:1.45
}

.app-shell .superadmin-communicator-workspace{
  overflow:hidden;
  margin-top:14px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

.app-shell .superadmin-communicator-list-card{
  margin:0;
  border:0;
  border-radius:0;
  box-shadow:none
}

.app-shell .superadmin-communicator-list-card .table-toolbar{
  border-top:0
}

.app-shell .superadmin-communicator-list-card .data-table-content{
  border-radius:0
}

.app-shell .superadmin-communicator-table-wrap{
  overflow-x:auto
}

.app-shell .superadmin-communicator-table{
  min-width:720px
}

.app-shell .superadmin-communicator-table td{
  padding-top:10px!important;
  padding-bottom:10px!important;
  vertical-align:top!important
}

.app-shell .superadmin-communicator-table td:first-child{
  width:260px
}

.app-shell .superadmin-communicator-table td:last-child{
  width:170px;
  color:var(--text-2);
  font-size:11.5px;
  white-space:nowrap
}

.app-shell .superadmin-communicator-history-subject strong,.app-shell .superadmin-communicator-history-subject small{
  display:block
}

.app-shell .superadmin-communicator-history-subject strong{
  color:var(--text);
  font-size:12.5px;
  font-weight:820
}

.app-shell .superadmin-communicator-history-subject small{
  margin-top:2px;
  color:var(--text-3);
  font-size:10.5px;
  font-weight:700
}

.app-shell .superadmin-communicator-history-message{
  margin:0;
  color:var(--text-2);
  font-size:11.5px;
  line-height:1.55
}

.app-shell .superadmin-communicator-empty{
  display:flex;
  min-height:200px;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  padding:28px;
  text-align:center
}

.app-shell .superadmin-communicator-empty>span{
  display:grid;
  width:50px;
  height:50px;
  place-items:center;
  border-radius:13px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .superadmin-communicator-empty svg{
  width:24px;
  height:24px;
  fill:none;
  stroke:currentColor;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-width:1.7
}

.app-shell .superadmin-communicator-empty strong{
  margin-top:10px;
  color:var(--text);
  font-size:14.5px;
  font-weight:800
}

.app-shell .superadmin-communicator-empty small{
  max-width:420px;
  margin-top:4px;
  color:var(--text-3);
  font-size:11.5px;
  line-height:1.5
}

.app-shell .superadmin-communicator-table td.dataTables_empty{
  padding:0!important
}

@media (max-width:1100px){
  .app-shell .superadmin-communicator-summary{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}

@media (max-width:900px){
  .app-shell .superadmin-communicator-layout{
    grid-template-columns:1fr
  }

  .app-shell .superadmin-communicator-guide{
    position:static
  }

  .app-shell .superadmin-communicator-guide>ul{
    grid-template-columns:repeat(3,minmax(0,1fr))
  }

  .app-shell .superadmin-communicator-guide>div{
    display:none
  }
}

@media (max-width:600px){
  .app-shell .superadmin-communicator-summary,.app-shell .superadmin-communicator-guide>ul{
    grid-template-columns:1fr
  }

  .app-shell .superadmin-communicator-section-head p,.app-shell .superadmin-communicator-section-head>b{
    display:none
  }

  .app-shell .superadmin-communicator-actions{
    align-items:stretch;
    flex-direction:column;
    gap:10px
  }

  .app-shell .superadmin-communicator-actions .btn-primary{
    justify-content:center
  }
}

/* Superadmin dashboard ---------------------------------------------- */

.app-shell .superadmin-dashboard-page{
  max-width:1540px
}

.app-shell .superadmin-dashboard-range-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin:16px 0 12px;
  padding:11px 14px;
  border:1px solid var(--border);
  border-radius:13px;
  background:var(--surface);
  box-shadow:0 5px 18px -15px rgba(16,32,24,.42)
}

.app-shell .superadmin-dashboard-range-bar>div:first-child{
  display:flex;
  min-width:0;
  align-items:center;
  gap:10px
}

.app-shell .superadmin-dashboard-range-bar>div:first-child>span{
  display:grid;
  width:33px;
  height:33px;
  flex:none;
  place-items:center;
  border-radius:9px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .superadmin-dashboard-range-bar small{
  display:block;
  color:var(--brand-strong);
  font-size:10px;
  font-weight:850;
  letter-spacing:.08em
}

.app-shell .superadmin-dashboard-range-bar strong{
  display:block;
  margin-top:1px;
  color:var(--text);
  font-size:13px;
  font-weight:800
}

.app-shell .superadmin-dashboard-range{
  display:flex;
  gap:3px;
  padding:3px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface-2)
}

.app-shell .superadmin-dashboard-range label{
  position:relative;
  margin:0;
  padding:0;
  border-radius:8px;
  cursor:pointer
}

.app-shell .superadmin-dashboard-range label input{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0
}

.app-shell .superadmin-dashboard-range label span{
  display:flex;
  height:32px;
  align-items:center;
  padding:0 13px;
  border-radius:8px;
  color:var(--text-2);
  font-size:11.5px;
  font-weight:750;
  white-space:nowrap
}

.app-shell .superadmin-dashboard-range label:hover span{
  background:var(--surface);
  color:var(--text)
}

.app-shell .superadmin-dashboard-range label.is-active span{
  border:1px solid #bcdcc6;
  background:var(--surface);
  color:var(--brand-strong);
  box-shadow:0 2px 6px -4px rgba(16,32,24,.4)
}

.app-shell .superadmin-dashboard-range label input:focus-visible+span{
  outline:2px solid var(--brand);
  outline-offset:1px
}

.app-shell .superadmin-dashboard-summary{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:11px
}

.app-shell .superadmin-dashboard-summary>article{
  display:flex;
  min-width:0;
  flex-direction:column;
  padding:14px 15px 11px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  box-shadow:0 5px 18px -14px rgba(16,32,24,.38)
}

.app-shell .superadmin-dashboard-summary>article>header{
  display:flex;
  align-items:center;
  gap:9px
}

.app-shell .superadmin-dashboard-summary>article>header>span{
  display:grid;
  width:36px;
  height:36px;
  flex:none;
  place-items:center;
  border-radius:10px
}

.app-shell .superadmin-dashboard-summary .is-green{
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .superadmin-dashboard-summary .is-blue{
  background:#eaf3ff;
  color:#3979bc
}

.app-shell .superadmin-dashboard-summary .is-violet{
  background:#f1ecfd;
  color:#6d3fc4
}

.app-shell .superadmin-dashboard-summary .is-red{
  background:#fdebea;
  color:#bd4d48
}

.app-shell .superadmin-dashboard-summary>article>header>small{
  min-width:0;
  color:var(--text-3);
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase
}

.app-shell .superadmin-dashboard-summary>article>strong{
  display:block;
  margin:12px 0 12px;
  min-height:32px;
  color:var(--text);
  font-size:28px;
  font-weight:880;
  line-height:1.15
}

.app-shell .superadmin-dashboard-summary>article>a{
  display:inline-flex;
  align-items:center;
  gap:5px;
  margin-top:auto;
  padding-top:11px;
  border-top:1px solid var(--border-2);
  color:var(--brand-strong);
  font-size:11px;
  font-weight:780
}

.app-shell .superadmin-dashboard-summary>article>a:hover{
  color:var(--brand)
}

.app-shell .superadmin-dashboard-loading{
  display:inline-block;
  width:19px;
  height:19px;
  border:2.5px solid var(--border);
  border-top-color:var(--brand);
  border-radius:50%;
  animation:superadmin-dashboard-spin .7s linear infinite
}

@keyframes superadmin-dashboard-spin{
  to{
    transform:rotate(360deg)
  }
}

.app-shell .superadmin-dashboard-strip{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:11px;
  margin-top:11px
}

.app-shell .superadmin-dashboard-strip>article{
  display:flex;
  min-width:0;
  align-items:center;
  gap:10px;
  padding:11px 13px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface)
}

.app-shell .superadmin-dashboard-strip>article>span{
  display:grid;
  width:32px;
  height:32px;
  flex:none;
  place-items:center;
  border-radius:9px;
  background:var(--surface-2);
  color:var(--text-2)
}

.app-shell .superadmin-dashboard-strip .is-green{
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .superadmin-dashboard-strip .is-blue{
  background:#eaf3ff;
  color:#3979bc
}

.app-shell .superadmin-dashboard-strip .is-amber{
  background:#fff2de;
  color:#b87523
}

.app-shell .superadmin-dashboard-strip>article>div{
  min-width:0
}

.app-shell .superadmin-dashboard-strip small{
  display:block;
  overflow:hidden;
  color:var(--text-3);
  font-size:9.5px;
  font-weight:800;
  letter-spacing:.05em;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .superadmin-dashboard-strip strong{
  display:block;
  margin-top:2px;
  color:var(--text);
  font-size:15px;
  font-weight:850
}

.app-shell .superadmin-dashboard-chart-card,.app-shell .superadmin-dashboard-panel{
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

.app-shell .superadmin-dashboard-chart-card{
  margin-top:12px
}

.app-shell .superadmin-dashboard-chart-card>header,.app-shell .superadmin-dashboard-panel>header{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-bottom:1px solid var(--border-2);
  background:linear-gradient(90deg,#f9fbfa,var(--surface))
}

.app-shell .superadmin-dashboard-chart-card>header>span,.app-shell .superadmin-dashboard-panel>header>span{
  display:grid;
  width:34px;
  height:34px;
  flex:none;
  place-items:center;
  border-radius:9px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .superadmin-dashboard-panel>header>span.is-blue{
  background:#eaf3ff;
  color:#3979bc
}

.app-shell .superadmin-dashboard-panel>header>span.is-amber{
  background:#fff2de;
  color:#b87523
}

.app-shell .superadmin-dashboard-chart-card>header>div,.app-shell .superadmin-dashboard-panel>header>div{
  min-width:0;
  flex:1
}

.app-shell .superadmin-dashboard-chart-card h2,.app-shell .superadmin-dashboard-panel h2{
  margin:0;
  color:var(--text);
  font-size:15px;
  font-weight:820
}

.app-shell .superadmin-dashboard-chart-card header p,.app-shell .superadmin-dashboard-panel header p{
  margin:2px 0 0;
  color:var(--text-3);
  font-size:11px
}

.app-shell .superadmin-dashboard-chart-card header em{
  padding:6px 10px;
  border:1px solid #c8e1cf;
  border-radius:999px;
  background:#f4fbf6;
  color:var(--brand-strong);
  font-size:11.5px;
  font-style:normal;
  font-weight:820;
  white-space:nowrap
}

.app-shell .superadmin-dashboard-panel header a{
  display:inline-flex;
  align-items:center;
  gap:5px;
  color:var(--brand-strong);
  font-size:11px;
  font-weight:780;
  white-space:nowrap
}

.app-shell .superadmin-dashboard-panel header a:hover{
  color:var(--brand)
}

.app-shell .superadmin-dashboard-chart-canvas{
  padding:12px 14px 14px
}

.app-shell .superadmin-dashboard-chart-canvas>div{
  width:100%!important
}

.app-shell .superadmin-dashboard-panels{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:12px
}

.app-shell .superadmin-dashboard-panel>ul{
  margin:0;
  padding:7px;
  list-style:none
}

.app-shell .superadmin-dashboard-panel>ul>li{
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 8px;
  border-radius:10px
}

.app-shell .superadmin-dashboard-panel>ul>li+li{
  border-top:1px solid var(--border-2)
}

.app-shell .superadmin-dashboard-panel>ul>li:hover{
  background:var(--surface-2)
}

.app-shell .superadmin-dashboard-panel>ul b{
  display:grid;
  width:34px;
  height:34px;
  flex:none;
  place-items:center;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--brand-weak);
  color:var(--brand-strong);
  font-size:12.5px;
  font-weight:850
}

.app-shell .superadmin-dashboard-panel>ul b.is-amber{
  border-color:#f0dcbe;
  background:#fff5e7;
  color:#a76a1c
}

.app-shell .superadmin-dashboard-panel>ul b i{
  font-size:9px;
  font-style:normal;
  font-weight:750
}

.app-shell .superadmin-dashboard-panel>ul>li>div{
  min-width:0;
  flex:1
}

.app-shell .superadmin-dashboard-panel>ul strong{
  display:block;
  overflow:hidden;
  color:var(--text);
  font-size:12.5px;
  font-weight:790;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .superadmin-dashboard-panel>ul small{
  display:block;
  overflow:hidden;
  margin-top:2px;
  color:var(--text-3);
  font-size:10.5px;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .superadmin-dashboard-panel>ul time{
  flex:none;
  color:var(--text-2);
  font-size:11px;
  font-weight:700;
  white-space:nowrap
}

.app-shell .superadmin-dashboard-empty{
  display:flex;
  min-height:150px;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  padding:24px;
  text-align:center
}

.app-shell .superadmin-dashboard-empty strong{
  color:var(--text);
  font-size:13px;
  font-weight:800
}

.app-shell .superadmin-dashboard-empty small{
  max-width:330px;
  margin-top:4px;
  color:var(--text-3);
  font-size:11px;
  line-height:1.5
}

@media (max-width:1180px){
  .app-shell .superadmin-dashboard-summary,.app-shell .superadmin-dashboard-strip{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}

@media (max-width:900px){
  .app-shell .superadmin-dashboard-panels{
    grid-template-columns:1fr
  }
}

@media (max-width:640px){
  .app-shell .superadmin-dashboard-summary,.app-shell .superadmin-dashboard-strip{
    grid-template-columns:1fr
  }

  .app-shell .superadmin-dashboard-range{
    width:100%;
    overflow-x:auto
  }

  .app-shell .superadmin-dashboard-range label{
    flex:1
  }

  .app-shell .superadmin-dashboard-range label span{
    justify-content:center;
    padding:0 9px
  }

  .app-shell .superadmin-dashboard-chart-card header em,.app-shell .superadmin-dashboard-panel header p{
    display:none
  }
}

/* AI Assistance ------------------------------------------------------ */

.app-shell .ai-tools-page,.app-shell .ai-tool-form-page,.app-shell .ai-history-page{
  max-width:1540px
}

.app-shell .ai-token-card{
  display:flex;
  align-items:center;
  gap:12px;
  margin:16px 0;
  padding:13px 15px;
  border:1px solid var(--border);
  border-radius:13px;
  background:var(--surface);
  box-shadow:0 5px 18px -15px rgba(16,32,24,.42)
}

.app-shell .ai-token-card>span{
  display:grid;
  width:38px;
  height:38px;
  flex:none;
  place-items:center;
  border-radius:10px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .ai-token-card>div{
  min-width:0;
  flex:none
}

.app-shell .ai-token-card small{
  display:block;
  color:var(--brand-strong);
  font-size:9.5px;
  font-weight:850;
  letter-spacing:.08em
}

.app-shell .ai-token-card strong{
  display:block;
  margin-top:1px;
  color:var(--text);
  font-size:17px;
  font-weight:860
}

.app-shell .ai-token-card strong em{
  color:var(--text-3);
  font-size:12px;
  font-style:normal;
  font-weight:700
}

.app-shell .ai-token-card p{
  margin:2px 0 0;
  color:var(--text-3);
  font-size:11px
}

.app-shell .ai-token-meter{
  position:relative;
  overflow:hidden;
  height:8px;
  flex:1;
  min-width:80px;
  border-radius:999px;
  background:var(--surface-3)
}

.app-shell .ai-token-meter>i{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,var(--brand),var(--brand-strong))
}

.app-shell .ai-token-card>b{
  flex:none;
  color:var(--brand-strong);
  font-size:12.5px;
  font-weight:850
}

.app-shell .ai-tool-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  margin-top:14px
}

.app-shell .ai-tool-card{
  position:relative;
  display:flex;
  min-width:0;
  flex-direction:column;
  padding:15px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  box-shadow:0 5px 18px -15px rgba(16,32,24,.42);
  transition:border-color .15s,box-shadow .15s,transform .15s
}

.app-shell .ai-tool-card:hover{
  border-color:color-mix(in srgb,var(--brand) 34%,var(--border));
  box-shadow:0 14px 30px -22px rgba(16,32,24,.55);
  transform:translateY(-1px)
}

.app-shell .ai-tool-card>span{
  display:grid;
  width:38px;
  height:38px;
  place-items:center;
  border-radius:11px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .ai-tool-card h2{
  margin:11px 0 0;
  color:var(--text);
  font-size:14.5px;
  font-weight:830;
  line-height:1.3
}

.app-shell .ai-tool-card h2 a{
  color:inherit;
  text-decoration:none
}

.app-shell .ai-tool-card h2 a:after{
  position:absolute;
  inset:0;
  content:""
}

.app-shell .ai-tool-card p{
  margin:4px 0 0;
  color:var(--text-2);
  font-size:11.5px;
  line-height:1.5
}

.app-shell .ai-tool-card>footer{
  margin-top:12px;
  padding-top:11px;
  border-top:1px solid var(--border-2)
}

.app-shell .ai-tool-open{
  display:inline-flex;
  align-items:center;
  gap:5px;
  color:var(--brand-strong);
  font-size:11.5px;
  font-weight:790
}

.app-shell .ai-tool-card:hover .ai-tool-open{
  color:var(--brand)
}

.app-shell .ai-tool-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 276px;
  align-items:start;
  gap:14px;
  margin-top:16px
}

.app-shell .ai-tool-form{
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  box-shadow:0 5px 18px -15px rgba(16,32,24,.42)
}

.app-shell .ai-section-head{
  display:flex;
  align-items:center;
  gap:10px;
  padding:13px 15px;
  border-bottom:1px solid var(--border-2);
  background:linear-gradient(90deg,#f9fbfa,var(--surface))
}

.app-shell .ai-section-head>span{
  display:grid;
  width:36px;
  height:36px;
  flex:none;
  place-items:center;
  border-radius:10px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .ai-section-head>div{
  min-width:0;
  flex:1
}

.app-shell .ai-section-head small{
  display:block;
  color:var(--brand-strong);
  font-size:9.5px;
  font-weight:850;
  letter-spacing:.08em
}

.app-shell .ai-section-head h2{
  margin:1px 0 0;
  color:var(--text);
  font-size:15px;
  font-weight:830
}

.app-shell .ai-section-head p{
  margin:2px 0 0;
  color:var(--text-3);
  font-size:11px
}

.app-shell .ai-tool-fields{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:13px;
  padding:15px
}

.app-shell .ai-field{
  grid-column:1/-1;
  min-width:0
}

.app-shell .ai-field.is-half{
  grid-column:auto
}

.app-shell .ai-tool-form .form-control{
  width:100%;
  min-height:42px;
  border:1px solid var(--border);
  border-radius:9px;
  background:#f8faf9;
  color:var(--text);
  font-size:12.5px
}

.app-shell .ai-tool-form .form-control:focus{
  border-color:#79bd8d;
  background:var(--surface);
  box-shadow:0 0 0 3px rgba(33,145,71,.09)
}

.app-shell .ai-tool-form textarea.form-control{
  min-height:84px;
  padding:10px 12px;
  line-height:1.55;
  resize:vertical
}

.app-shell .ai-tool-form label.error{
  display:block;
  margin:4px 0 0;
  color:#c34540;
  font-size:10.5px;
  font-weight:650
}

.app-shell .ai-tool-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 15px;
  border-top:1px solid var(--border-2);
  background:#fbfdfc
}

.app-shell .ai-tool-actions>span{
  display:flex;
  align-items:center;
  gap:6px;
  color:var(--text-3);
  font-size:11px
}

.app-shell .ai-tool-actions>span svg{
  flex:none;
  color:var(--brand-strong)
}

.app-shell .ai-tool-actions>div{
  display:flex;
  gap:8px
}

.app-shell .ai-tool-guide{
  position:sticky;
  top:76px;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

.app-shell .ai-tool-guide>header{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:15px;
  border-bottom:1px solid var(--border);
  background:linear-gradient(135deg,#fbfdfb,#f3f8f5)
}

.app-shell .ai-tool-guide>header>span{
  display:grid;
  width:36px;
  height:36px;
  flex:none;
  place-items:center;
  border-radius:10px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .ai-tool-guide>header small{
  display:block;
  color:var(--brand-strong);
  font-size:9.5px;
  font-weight:850;
  letter-spacing:.075em
}

.app-shell .ai-tool-guide>header strong{
  display:block;
  margin-top:2px;
  color:var(--text);
  font-size:14px;
  font-weight:850
}

.app-shell .ai-tool-guide>header p{
  margin:3px 0 0;
  color:var(--text-3);
  font-size:11px;
  line-height:1.45
}

.app-shell .ai-tool-guide>ul{
  display:grid;
  gap:3px;
  margin:0;
  padding:8px;
  list-style:none
}

.app-shell .ai-tool-guide>ul>li{
  display:flex;
  align-items:flex-start;
  gap:9px;
  padding:9px;
  border-radius:9px;
  color:var(--text-2)
}

.app-shell .ai-tool-guide>ul>li:hover{
  background:var(--surface-2)
}

.app-shell .ai-tool-guide>ul b{
  display:grid;
  width:24px;
  height:24px;
  flex:none;
  place-items:center;
  border:1px solid var(--border);
  border-radius:7px;
  background:var(--surface);
  color:var(--brand-strong);
  font-size:10.5px;
  font-weight:850
}

.app-shell .ai-tool-guide>ul strong,.app-shell .ai-tool-guide>ul small{
  display:block
}

.app-shell .ai-tool-guide>ul strong{
  font-size:12px;
  font-weight:790
}

.app-shell .ai-tool-guide>ul small{
  margin-top:2px;
  color:var(--text-3);
  font-size:10.5px;
  line-height:1.4
}

.app-shell .ai-tool-guide>div{
  display:flex;
  align-items:flex-start;
  gap:7px;
  margin:3px 9px 9px;
  padding:9px;
  border:1px solid #c8e1cf;
  border-radius:9px;
  background:#f4fbf6;
  color:var(--brand-strong)
}

.app-shell .ai-tool-guide>div svg{
  flex:none;
  margin-top:1px
}

.app-shell .ai-tool-guide>div p{
  margin:0;
  font-size:10.5px;
  line-height:1.45
}

.app-shell .ai-output-list{
  display:grid;
  gap:12px;
  margin-top:14px
}

.app-shell .ai-output-card{
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

.app-shell .ai-output-card>header{
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 14px;
  border-bottom:1px solid var(--border-2);
  background:linear-gradient(90deg,#f9fbfa,var(--surface))
}

.app-shell .ai-output-card>header>span{
  display:grid;
  width:32px;
  height:32px;
  flex:none;
  place-items:center;
  border-radius:9px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .ai-output-card>header>div{
  min-width:0;
  flex:1
}

.app-shell .ai-output-card small{
  display:block;
  color:var(--brand-strong);
  font-size:9px;
  font-weight:850;
  letter-spacing:.08em
}

.app-shell .ai-output-card strong{
  display:block;
  color:var(--text);
  font-size:13px;
  font-weight:820
}

.app-shell .ai-output-body{
  padding:15px;
  color:var(--text);
  font-size:13px;
  line-height:1.7;
  white-space:normal;
  word-break:break-word
}

.app-shell .ai-output-body p{
  margin:0 0 10px
}

.app-shell .ai-output-body h1,.app-shell .ai-output-body h2,.app-shell .ai-output-body h3{
  margin:14px 0 6px;
  font-size:14px;
  font-weight:830
}

.app-shell .ai-output-body ul,.app-shell .ai-output-body ol{
  margin:0 0 10px;
  padding-left:20px
}

.app-shell .ai-history-card{
  margin-top:12px
}

.app-shell .ai-history-table-wrap{
  overflow-x:auto
}

.app-shell .ai-history-table{
  min-width:960px
}

.app-shell .ai-history-table td{
  padding-top:10px!important;
  padding-bottom:10px!important;
  color:var(--text-2);
  font-size:11.5px;
  line-height:1.55;
  vertical-align:top!important
}

.app-shell .ai-history-table td:nth-child(1){
  max-width:280px
}

.app-shell .ai-history-table td:nth-child(2){
  max-width:440px
}

.app-shell .ai-history-table td:last-child{
  white-space:nowrap
}

.app-shell .ai-history-empty{
  display:flex;
  min-height:200px;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  padding:28px;
  text-align:center
}

.app-shell .ai-history-empty>span{
  display:grid;
  width:50px;
  height:50px;
  place-items:center;
  border-radius:13px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .ai-history-empty svg{
  width:24px;
  height:24px;
  fill:none;
  stroke:currentColor;
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-width:1.7
}

.app-shell .ai-history-empty strong{
  margin-top:10px;
  color:var(--text);
  font-size:14px;
  font-weight:800
}

.app-shell .ai-history-empty small{
  max-width:400px;
  margin-top:4px;
  color:var(--text-3);
  font-size:11.5px;
  line-height:1.5
}

.app-shell .ai-history-table td.dataTables_empty{
  padding:0!important
}

@media (max-width:1180px){
  .app-shell .ai-tool-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}

@media (max-width:900px){
  .app-shell .ai-tool-layout{
    grid-template-columns:1fr
  }

  .app-shell .ai-tool-guide{
    position:static
  }

  .app-shell .ai-tool-guide>ul{
    grid-template-columns:repeat(3,minmax(0,1fr))
  }

  .app-shell .ai-tool-guide>div{
    display:none
  }
}

@media (max-width:640px){
  .app-shell .ai-tool-grid,.app-shell .ai-tool-fields,.app-shell .ai-tool-guide>ul{
    grid-template-columns:1fr
  }

  .app-shell .ai-field.is-half{
    grid-column:auto
  }

  .app-shell .ai-token-card{
    align-items:flex-start;
    flex-direction:column
  }

  .app-shell .ai-token-meter{
    width:100%
  }

  .app-shell .ai-tool-actions{
    align-items:stretch;
    flex-direction:column
  }

  .app-shell .ai-tool-actions>div{
    width:100%
  }

  .app-shell .ai-tool-actions .btn-ghost,.app-shell .ai-tool-actions .btn-primary{
    flex:1;
    justify-content:center
  }
}

/* Report screens ------------------------------------------------------
   Every report is a filter card over a table or a chart. These rules are shared by all of
   them so a report reads the same whichever one you opened, and so the legacy DataTables
   controls the report JS still builds sit inside the card rather than beside it. */

/* Reports are wide by nature — twenty columns of transactions, a year of months across.
   They use the whole window rather than the reading-width column the rest of the app
   is held to, so a table scrolls sideways only when it genuinely cannot fit. */

.app-shell .report-screen{
  max-width:none
}

/* The filter fields are wrapped in a form, which would otherwise break the card's grid. */

.app-shell .report-screen .report-filter-form,.app-shell .report-screen form.contents{
  display:contents
}

.app-shell .report-filter-actions{
  display:flex;
  align-items:flex-end;
  justify-content:flex-end;
  grid-column:1/-1
}

.app-shell .report-check-field{
  display:flex;
  min-height:42px;
  align-items:center;
  gap:9px;
  margin:0;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:9px;
  background:#f8faf9;
  color:var(--text-2);
  font-size:12px;
  font-weight:700;
  cursor:pointer
}

.app-shell .report-screen .form-control{
  min-height:42px;
  border:1px solid var(--border);
  border-radius:9px;
  background:#f8faf9;
  color:var(--text);
  font-size:12.5px
}

.app-shell .report-screen .form-control:focus{
  border-color:#79bd8d;
  background:var(--surface);
  box-shadow:0 0 0 3px rgba(33,145,71,.09)
}

.app-shell .report-summary{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:11px;
  margin-top:12px
}

.app-shell .report-summary>article,.app-shell .report-summary>.report-summary-tile{
  min-width:0;
  padding:13px 15px;
  border:1px solid var(--border);
  border-radius:13px;
  background:var(--surface);
  box-shadow:0 5px 18px -15px rgba(16,32,24,.42)
}

.app-shell .report-summary small{
  display:block;
  overflow:hidden;
  color:var(--text-3);
  font-size:10px;
  font-weight:800;
  letter-spacing:.05em;
  text-overflow:ellipsis;
  text-transform:uppercase;
  white-space:nowrap
}

.app-shell .report-summary strong{
  display:block;
  min-height:26px;
  margin-top:5px;
  color:var(--text);
  font-size:20px;
  font-weight:870
}

.app-shell .report-table-card,.app-shell .report-chart-card{
  overflow:hidden;
  margin-top:12px;
  padding:0
}

.app-shell .report-chart-card>header{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-bottom:1px solid var(--border-2);
  background:linear-gradient(90deg,#f9fbfa,var(--surface))
}

.app-shell .report-chart-card>header>span{
  display:grid;
  width:32px;
  height:32px;
  flex:none;
  place-items:center;
  border-radius:9px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .report-chart-card>header>div{
  min-width:0;
  flex:1
}

.app-shell .report-chart-card h2{
  margin:0;
  color:var(--text);
  font-size:14.5px;
  font-weight:820
}

.app-shell .report-chart-card header p{
  margin:2px 0 0;
  color:var(--text-3);
  font-size:11.5px
}

.app-shell .report-chart-canvas{
  padding:12px 14px 14px
}

.app-shell .report-chart-canvas>div{
  width:100%!important
}

/* Reports whose table is printed straight into the page rather than built by DataTables. */

.app-shell .report-table-card>table{
  width:100%;
  margin:0
}

.app-shell .report-table-card>table>thead th{
  padding:11px 14px;
  border-bottom:1px solid var(--border);
  background:var(--surface-2);
  color:var(--text-3);
  font-size:11px;
  font-weight:800;
  letter-spacing:.04em;
  text-align:left;
  text-transform:uppercase
}

.app-shell .report-table-card>table>tbody td{
  padding:10px 14px;
  border-top:1px solid var(--border-2);
  color:var(--text-2);
  font-size:12.5px
}

.app-shell .report-table-card>table>tfoot td{
  padding:12px 14px;
  border-top:1px solid var(--border);
  background:var(--surface-2);
  color:var(--text);
  font-size:13px;
  font-weight:820
}

/* The register report's totals row is emitted by the report JS with legacy colour classes. */

.app-shell .report-table-card table.dataTable tfoot td,.app-shell .report-table-card .footer-total td{
  background:var(--surface-2);
  color:var(--text);
  font-size:12.5px;
  font-weight:800
}

@media (max-width:1100px){
  .app-shell .report-summary{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}

@media (max-width:640px){
  .app-shell .report-summary{
    grid-template-columns:1fr
  }

  .app-shell .report-filter-actions{
    justify-content:stretch
  }

  .app-shell .report-filter-actions .btn-primary{
    flex:1;
    justify-content:center
  }
}

/* Advanced Reports on the shared shell ---------------------------------
   The module's screens are laid out with the legacy `tw-` utilities, which were served by
   the old stylesheet the new shell deliberately does not load. Rather than rewrite fifty
   screens at once, the utilities they actually use are defined here, scoped to the shell,
   so those screens keep their layout while moving onto the real chrome. */

.app-shell .tw-flex{
  display:flex
}

.app-shell .tw-inline-flex{
  display:inline-flex
}

.app-shell .tw-inline-block{
  display:inline-block
}

.app-shell .tw-flow-root{
  display:flow-root
}

.app-shell .tw-items-center{
  align-items:center
}

.app-shell .tw-items-baseline{
  align-items:baseline
}

.app-shell .tw-justify-center{
  justify-content:center
}

.app-shell .tw-flex-1{
  flex:1 1 0%
}

.app-shell .tw-flex-none{
  flex:none
}

.app-shell .tw-flex-grow{
  flex-grow:1
}

.app-shell .tw-shrink-0{
  flex-shrink:0
}

.app-shell .tw-gap-1{
  gap:.25rem
}

.app-shell .tw-gap-2{
  gap:.5rem
}

.app-shell .tw-gap-2\.5{
  gap:.625rem
}

.app-shell .tw-gap-4{
  gap:1rem
}

.app-shell .tw-w-5{
  width:1.25rem
}

.app-shell .tw-w-6{
  width:1.5rem
}

.app-shell .tw-w-10{
  width:2.5rem
}

.app-shell .tw-w-12{
  width:3rem
}

.app-shell .tw-w-full{
  width:100%
}

.app-shell .tw-w-1\/2{
  width:50%
}

.app-shell .tw-min-w-0{
  min-width:0
}

.app-shell .tw-min-w-full{
  min-width:100%
}

.app-shell .tw-h-5{
  height:1.25rem
}

.app-shell .tw-h-6{
  height:1.5rem
}

.app-shell .tw-h-10{
  height:2.5rem
}

.app-shell .tw-h-12{
  height:3rem
}

.app-shell .tw-size-5{
  width:1.25rem;
  height:1.25rem
}

.app-shell .tw-p-4{
  padding:1rem
}

.app-shell .tw-p-5{
  padding:1.25rem
}

.app-shell .tw-py-2{
  padding-top:.5rem;
  padding-bottom:.5rem
}

.app-shell .tw-px-5{
  padding-left:1.25rem;
  padding-right:1.25rem
}

.app-shell .tw-mb-4{
  margin-bottom:1rem
}

.app-shell .tw-mt-1{
  margin-top:.25rem
}

.app-shell .tw-mt-0\.5{
  margin-top:.125rem
}

.app-shell .tw--my-2{
  margin-top:-.5rem;
  margin-bottom:-.5rem
}

.app-shell .tw--mx-4{
  margin-left:-1rem;
  margin-right:-1rem
}

.app-shell .tw--mx-5{
  margin-left:-1.25rem;
  margin-right:-1.25rem
}

.app-shell .tw-text-xs{
  font-size:.75rem;
  line-height:1rem
}

.app-shell .tw-text-sm{
  font-size:.875rem;
  line-height:1.25rem
}

.app-shell .tw-text-base{
  font-size:1rem;
  line-height:1.5rem
}

.app-shell .tw-text-lg{
  font-size:1.125rem;
  line-height:1.75rem
}

.app-shell .tw-text-xl{
  font-size:1.25rem;
  line-height:1.75rem
}

.app-shell .tw-text-2xl{
  font-size:1.5rem;
  line-height:2rem
}

.app-shell .tw-text-3xl{
  font-size:1.875rem;
  line-height:2.25rem
}

.app-shell .tw-font-medium{
  font-weight:500
}

.app-shell .tw-font-semibold{
  font-weight:600
}

.app-shell .tw-font-bold{
  font-weight:700
}

.app-shell .tw-font-mono{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace
}

.app-shell .tw-tracking-tight{
  letter-spacing:-.025em
}

.app-shell .tw-truncate{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .tw-align-middle{
  vertical-align:middle
}

.app-shell .tw-overflow-x-auto{
  overflow-x:auto
}

.app-shell .tw-rounded-full{
  border-radius:9999px
}

.app-shell .tw-rounded-xl{
  border-radius:.75rem
}

.app-shell .tw-bg-white{
  background-color:var(--surface)
}

.app-shell .tw-bg-gray-100{
  background-color:var(--surface-2)
}

.app-shell .tw-bg-sky-100{
  background-color:#e0f2fe
}

.app-shell .tw-bg-green-100{
  background-color:#dcfce7
}

.app-shell .tw-bg-emerald-100{
  background-color:#d1fae5
}

.app-shell .tw-bg-yellow-100{
  background-color:#fef9c3
}

.app-shell .tw-bg-red-100{
  background-color:#fee2e2
}

.app-shell .tw-bg-orange-100{
  background-color:#ffedd5
}

.app-shell .tw-bg-blue-100{
  background-color:#dbeafe
}

.app-shell .tw-bg-teal-100{
  background-color:#ccfbf1
}

.app-shell .tw-bg-purple-100{
  background-color:#f3e8ff
}

.app-shell .tw-text-black{
  color:var(--text)
}

.app-shell .tw-text-gray-900{
  color:var(--text)
}

.app-shell .tw-text-gray-700{
  color:var(--text-2)
}

.app-shell .tw-text-gray-600{
  color:var(--text-2)
}

.app-shell .tw-text-gray-500{
  color:var(--text-3)
}

.app-shell .tw-text-sky-500{
  color:#0ea5e9
}

.app-shell .tw-text-green-500{
  color:#22c55e
}

.app-shell .tw-text-emerald-500{
  color:#10b981
}

.app-shell .tw-text-yellow-500{
  color:#eab308
}

.app-shell .tw-text-red-500{
  color:#ef4444
}

.app-shell .tw-text-orange-500{
  color:#f97316
}

.app-shell .tw-text-blue-500{
  color:#3b82f6
}

.app-shell .tw-text-teal-500{
  color:#14b8a6
}

.app-shell .tw-text-purple-500{
  color:#a855f7
}

.app-shell .tw-border-2{
  border-width:2px
}

.app-shell .tw-border-gray-200{
  border-color:var(--border)
}

.app-shell .tw-ring-1{
  box-shadow:0 0 0 1px var(--border)
}

.app-shell .tw-ring-gray-200{
  --tw-ring-color:var(--border)
}

.app-shell .tw-shadow-sm{
  box-shadow:0 1px 2px rgba(16,32,24,.05)
}

.app-shell .tw-shadow-md{
  box-shadow:0 4px 14px -8px rgba(16,32,24,.35)
}

.app-shell .tw-ring-1.tw-shadow-sm{
  box-shadow:0 0 0 1px var(--border),0 1px 2px rgba(16,32,24,.05)
}

.app-shell .tw-transition-all{
  transition-property:all;
  transition-duration:.2s
}

.app-shell .tw-duration-200{
  transition-duration:.2s
}

/* The module's screens open with an AdminLTE page header and lay their cards out on the
   Bootstrap grid; both are given the shell's own spacing rather than left unstyled. */

.app-shell .content-header{
  padding:0 0 4px
}

.app-shell .content-header>h1{
  margin:0;
  color:var(--text);
  font-size:24px;
  font-weight:850;
  letter-spacing:-.01em
}

.app-shell .content-header>h1>small{
  display:block;
  margin-top:3px;
  color:var(--text-3);
  font-size:12.5px;
  font-weight:600
}

.app-shell .content{
  padding:0
}

/* Module report screens render their AdminLTE sections straight into <main> rather
   than through the page wrapper, so they carry the page's own gutters here. */

/* The page head is a direct child of <main> on these screens, so it carries the page's
   gutters itself and leaves a gap before the content below it. Without this the heading sat
   flush against the module bar and the first card started on the subtitle's last line. */

.app-shell main>.content-header{
  padding:16px 16px 4px
}

.app-shell main>*:not(.content):not(script):not(style):not(.modal):not(.print_section){
  padding-left:16px;
  padding-right:16px
}

.app-shell main>*:first-child{
  padding-top:18px
}

.app-shell main>.content{
  padding:14px 16px 26px
}

@media (max-width:640px){
  .app-shell main>.content-header{
    padding:12px 12px 4px
  }

  .app-shell main>*:not(.content):not(script):not(style):not(.modal):not(.print_section){
    padding-left:7px;
    padding-right:7px
  }

  .app-shell main>*:first-child{
    padding-top:14px
  }

  .app-shell main>.content{
    padding:12px 12px 18px
  }
}

.app-shell .box{
  overflow:hidden;
  margin-bottom:14px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  box-shadow:var(--shadow-sm)
}

.app-shell .box>.box-header{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-bottom:1px solid var(--border-2);
  background:linear-gradient(90deg,#f9fbfa,var(--surface))
}

.app-shell .box>.box-header .box-title{
  margin:0;
  color:var(--text);
  font-size:14.5px;
  font-weight:820
}

.app-shell .box>.box-body{
  padding:14px
}

.app-shell .box>.box-footer{
  padding:12px 14px;
  border-top:1px solid var(--border-2);
  background:var(--surface-2)
}

/* A report's table is wider than the window it opens in. Without this the whole shell
   scrolled sideways instead — carrying the rail and the header off the screen with it. */

.app-shell>div{
  min-width:0
}

.app-shell main.scroll{
  min-width:0;
  overflow-x:auto
}

.app-shell main>.content,.app-shell main>.content-header{
  min-width:0;
  max-width:100%
}

/* The shared filter card as the legacy screens use it: a card with a labelled head and the
   Bootstrap column fields inside, rather than a collapse panel that opened on a link. */

.app-shell .legacy-filter-card{
  padding:0;
  margin-bottom:14px
}

.app-shell .legacy-filter-card .filter-card-head{
  display:flex;
  align-items:center;
  gap:8px;
  padding:11px 14px;
  border-bottom:1px solid var(--border-2);
  background:linear-gradient(90deg,#f9fbfa,var(--surface));
  color:var(--text);
  font-size:13.5px;
  font-weight:800
}

.app-shell .legacy-filter-card .filter-card-head svg{
  flex:none;
  color:var(--brand-strong)
}

.app-shell .legacy-filter-card .filter-card-body{
  padding:14px 6px 2px;
  margin:0
}

.app-shell .legacy-filter-card .form-group{
  margin-bottom:12px
}

.app-shell .legacy-filter-card label{
  display:block;
  margin-bottom:6px;
  color:var(--text-2);
  font-size:12px;
  font-weight:750
}

.app-shell .legacy-filter-card .form-control{
  min-height:42px;
  border:1px solid var(--border);
  border-radius:9px;
  background:#f8faf9;
  color:var(--text);
  font-size:12.5px
}

.app-shell .legacy-filter-card .form-control:focus{
  border-color:#79bd8d;
  background:var(--surface);
  box-shadow:0 0 0 3px rgba(33,145,71,.09)
}

/* Advanced Reports summary cards.
   Every screen in the module builds its figures from one component, so styling it here
   settles all of them at once: cards of equal height in a row, a label that reads as a
   label, and the figure as the largest thing on the card. */

.app-shell .ar-stat-card{
  display:flex;
  height:calc(100% - 14px);
  min-width:0;
  flex-direction:column;
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  box-shadow:0 5px 18px -15px rgba(16,32,24,.42);
  transition:border-color .15s,box-shadow .15s
}

.app-shell .ar-stat-card:hover{
  border-color:color-mix(in srgb,var(--brand) 26%,var(--border));
  box-shadow:0 14px 30px -22px rgba(16,32,24,.5)
}

.app-shell .ar-stat-card-inner{
  display:flex;
  flex:1;
  align-items:center;
  padding:14px 15px
}

.app-shell .ar-stat-icon{
  display:grid;
  width:40px;
  height:40px;
  flex:none;
  place-items:center;
  border-radius:11px
}

.app-shell .ar-stat-icon svg{
  width:19px;
  height:19px
}

.app-shell .ar-stat-body{
  display:flex;
  min-width:0;
  flex-direction:column;
  gap:1px
}

/* The card is three lines: what it is, the figure, and the note under it. The module
   writes them as three paragraphs, so they are styled by their order rather than by
   classes none of them carry. */

.app-shell .ar-stat-body>p{
  margin:0
}

.app-shell .ar-stat-body>p:first-child{
  overflow:hidden;
  color:var(--text-3);
  font-size:11.5px;
  font-weight:750;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .ar-stat-body>p:nth-child(2){
  margin-top:3px;
  color:var(--text);
  font-family:inherit;
  font-size:22px;
  font-weight:870;
  letter-spacing:-.015em;
  line-height:1.15
}

.app-shell .ar-stat-body>p:nth-child(2) .display_currency{
  font-family:inherit
}

.app-shell .ar-stat-body>p:nth-child(3){
  margin-top:4px;
  overflow:hidden;
  color:var(--text-3);
  font-size:10.5px;
  font-weight:600;
  text-overflow:ellipsis;
  white-space:nowrap
}

/* Section headings the module writes between two runs of cards. */

.app-shell main>.content h4,.app-shell main>.content h3.report-section-title{
  display:flex;
  align-items:center;
  gap:8px;
  margin:6px 0 10px;
  color:var(--text);
  font-size:15px;
  font-weight:830
}

/* Legacy DataTables toolbars ------------------------------------------
   Report screens build their tables with DataTables' own controls rather than the shared
   toolbar component. The app sets one global `dom` for those:

       <"datatable-header"<"datatable-header-left"lf><"datatable-header-right"B>>rtip

   so the length menu, the search box and the export buttons sit two levels inside the
   wrapper, in named divs. Without Bootstrap's stylesheet those divs are plain blocks, which
   is why the toolbar came out as three stacked rows. They are laid out here as one row. */

.app-shell main>.content .dataTables_wrapper,.app-shell .report-screen .dataTables_wrapper{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  padding:0
}

/* Everything that is not a control belongs on its own row under the toolbar. */

.app-shell main>.content .dataTables_wrapper>*,.app-shell .report-screen .dataTables_wrapper>*{
  order:5;
  width:100%;
  min-width:0
}

/* Search first, then page size, then exports — the order every other table in the app uses. */

.app-shell main>.content .dataTables_wrapper>.dataTables_filter,.app-shell .report-screen .dataTables_wrapper>.dataTables_filter{
  order:1;
  width:auto;
  margin:0;
  padding:11px 0 11px 13px
}

.app-shell main>.content .dataTables_wrapper>.dataTables_length,.app-shell .report-screen .dataTables_wrapper>.dataTables_length{
  order:2;
  width:auto;
  margin-left:auto;
  padding:11px 0
}

.app-shell main>.content .dataTables_wrapper>.dt-buttons,.app-shell .report-screen .dataTables_wrapper>.dt-buttons{
  order:3;
  width:auto;
  margin:0;
  padding:11px 13px 11px 10px
}

/* A wrapper whose controls are in the shared header div keeps that row full width. */

.app-shell main>.content .dataTables_wrapper>.datatable-header,.app-shell .report-screen .dataTables_wrapper>.datatable-header{
  order:0
}

.app-shell main>.content .dataTables_wrapper>table,.app-shell .report-screen .dataTables_wrapper>table,
.app-shell main>.content .dataTables_wrapper>.dataTables_scroll,.app-shell .report-screen .dataTables_wrapper>.dataTables_scroll{
  order:6;
  margin:0;
  border-top:1px solid var(--border-2)
}

.app-shell main>.content .dataTables_wrapper>.dataTables_info,.app-shell .report-screen .dataTables_wrapper>.dataTables_info{
  order:7;
  width:auto;
  margin-right:auto
}

.app-shell main>.content .dataTables_wrapper>.dataTables_paginate,.app-shell .report-screen .dataTables_wrapper>.dataTables_paginate{
  order:8;
  width:auto
}

/* The count and the pager in one div, which is how the house dom string builds them:
   `<'data-table-buttons-source'B>rt<'data-table-footer'ip>`. The two rules above order
   .dataTables_info and .dataTables_paginate as direct children of the wrapper, which is the
   legacy layout — wrapped in .data-table-footer neither of them is a child any more, so the
   footer fell to the catch-all order:5 above and drew before the table at order:6. A report
   opened on "Showing 1 to 25 of 1,151 entries" and forty-seven page numbers, above a table
   nobody had read yet. It ends the wrapper, where every other listing puts it. */

.app-shell main>.content .dataTables_wrapper>.data-table-footer,.app-shell .report-screen .dataTables_wrapper>.data-table-footer{
  order:9;
  width:100%
}

.app-shell .datatable-header{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  padding:11px 13px;
  border-bottom:1px solid var(--border-2)
}

/* Search, then the exports, then how many rows to show — the order the toolbar component uses,
   which is what every newer listing in the app looks like.

   The default dom hands them over in two groups, `<"datatable-header-left"lf>` and
   `<"datatable-header-right"B>`, which puts the length menu in with the search and the exports
   on their own. Ordering inside a group can only ever reach that group's own edges, so the page
   size could sit against the search box or against the exports, but never after them.
   `display:contents` drops the two group boxes and leaves their contents as children of the
   header, where one order covers all three. */

.app-shell .datatable-header-left,.app-shell .datatable-header-right{
  display:contents
}

.app-shell .datatable-header .dataTables_filter{
  order:1
}

.app-shell .datatable-header .dt-buttons{
  order:2;
  margin-left:auto
}

.app-shell .datatable-header .dataTables_length{
  order:3
}

/*
 * The head of a listing on a phone: what you type in and how many rows, then the exports.
 *
 * Laid out for a desktop it stacked into three rows — a full-width search, five export buttons
 * wrapping across two lines, and the page size alone underneath — which is most of a phone screen
 * before a single row of data. The search and the page size are one line: one is wide, the other
 * is 68 pixels. The exports take the line under them, where wrapping is what they are for.
 */

@media (max-width:760px){
  .app-shell .datatable-header{
    gap:8px;
    padding:10px
  }

  .app-shell .datatable-header .dataTables_filter{
    order:1;
    min-width:0;
    flex:1 1 auto
  }

  /* The input fills the line, which means the label around it has to as well: it is an
     inline-flex box, so left alone it shrinks to the input's own width and the row ends in a
     gap the size of whatever the input did not ask for. */

  .app-shell .datatable-header .dataTables_filter label{
    width:100%
  }

  .app-shell .datatable-header .dataTables_filter input{
    width:100%;
    min-width:0
  }

  .app-shell .datatable-header .dataTables_length{
    order:2;
    flex:none;
    margin-left:0
  }

  .app-shell .datatable-header .dt-buttons{
    order:3;
    flex:1 1 100%;
    margin-left:0
  }

  /*
   * Five exports on one line, not four and a straggler.
   *
   * At their desktop size they came to a little more than a phone is wide, so Columns dropped to
   * a row of its own and the toolbar was three rows again. They share the line instead and the
   * longest name gives way — which is what the Products toolbar does, where the last one reads
   * "Colum…" rather than taking a row to be read in full.
   */

  .app-shell .datatable-header .dt-buttons{
    flex-wrap:nowrap;
    gap:5px
  }

  .app-shell .datatable-header .dt-buttons>a,
  .app-shell .datatable-header .dt-buttons>button,
  .app-shell .datatable-header .dt-buttons>div.dt-button{
    min-width:0;
    flex:1 1 auto;
    justify-content:center;
    gap:5px;
    padding:0 8px;
    font-size:11.5px;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis
  }

  .app-shell .datatable-header .dt-buttons>a>span,
  .app-shell .datatable-header .dt-buttons>button>span{
    overflow:hidden;
    text-overflow:ellipsis
  }

  .app-shell .datatable-header .dt-buttons svg{
    flex:none
  }
}

/* The page size is the select and nothing else — the shape the toolbar component gives it on
   Products, Contacts and every newer listing. The label wrapping it holds no text of its own any
   more (see lengthMenu in common.js), so it is only there to be the control's box. */

.app-shell .dataTables_length label{
  display:inline-flex;
  align-items:center;
  gap:0;
  margin:0;
  color:var(--text-3);
  font-size:12px;
  font-weight:700;
  white-space:nowrap
}

/*
 * The page size is 34 whichever control it turns out to be.
 *
 * It is a bare <select> on most screens and a select2 box on others, and the two are sized by
 * different rules in different parts of this file — the app's own select2 default is 42, which is
 * where the extra height came from. Chasing which one a given screen renders, and which rule
 * reaches it, took several passes and got it wrong each time; stated with weight, for both
 * shapes, it cannot be a different height from the buttons it stands beside.
 */

.app-shell .dataTables_length select,
.app-shell .dataTables_length .select2-container,
.app-shell .dataTables_length .select2-container--default .select2-selection--single{
  height:34px!important;
  min-height:34px!important;
  max-height:34px!important
}

.app-shell .dataTables_length .select2-container--default .select2-selection--single{
  border-radius:9px
}

.app-shell .dataTables_length .select2-container--default .select2-selection--single .select2-selection__rendered{
  line-height:32px!important;
  font-size:12px
}

.app-shell .dataTables_length .select2-container--default .select2-selection--single .select2-selection__arrow{
  height:32px!important
}

.app-shell .dataTables_filter input{
  min-width:min(320px,60vw);
  height:34px;
  border-radius:9px;
  font-size:12.5px
}

/* Exports: the shared javascript strips Bootstrap's button classes off these, which left
   them as plain links. They are the same ghost buttons the rest of the app uses. */

/*
 * The exports and the page size beside them are one row of controls, so they are one rule.
 *
 * They were two, each setting its own 34 — and they still came out different heights, because a
 * number repeated in two places is a number that can disagree: a native select draws itself from
 * its own font metrics unless the platform control is taken off it, and `box-sizing` decides
 * whether the border is inside the 34 or added to it. Written once, for both, neither question
 * can have two answers.
 */

.app-shell .dt-buttons>a,.app-shell .dt-buttons>button,.app-shell .dt-buttons>div.dt-button,.app-shell .dataTables_length select{
  box-sizing:border-box;
  display:inline-flex;
  height:34px;
  min-height:34px;
  max-height:34px;
  align-items:center;
  gap:6px;
  padding:0 11px;
  border:1px solid var(--border);
  border-radius:9px;
  background-color:var(--surface-2);
  color:var(--text-2)!important;
  font-size:12px;
  font-weight:700;
  line-height:1;
  text-decoration:none!important;
  cursor:pointer;
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none
}

/* What is left is what makes it a select rather than a button: its width, and the arrow it needs
   drawn back on now the platform control is off it. It follows the shared rule so these win. */

.app-shell .dataTables_length select{
  width:68px;
  min-width:0;
  padding:0 24px 0 10px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' 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
}

.app-shell .dt-buttons>a:hover,.app-shell .dt-buttons>button:hover,.app-shell .dt-buttons>div.dt-button:hover{
  border-color:var(--text-3);
  background:var(--surface-3);
  color:var(--text)!important
}

.app-shell .dt-buttons>a i,.app-shell .dt-buttons>button i{
  color:var(--text-3)
}

/* A cell holding a name and the code that identifies it.

   Three pairs of columns on the product sell report were one fact each — a product and its SKU,
   a customer and their contact code, an invoice and its date — six columns on a report that
   already scrolled sideways. Each pair is one cell: the thing on top, what identifies it
   underneath, which is how every other listing in the application writes a name that needs a
   code with it. */

/* A value stays on the line it starts on.

   A report's columns squeeze to fit the card, and what gives first is the text inside them: a date
   broke into "21-08-2026" over "11:05", a tax rate fell underneath its own figure, and a row three
   lines tall carried one number. Values do not wrap; the table scrolls sideways instead, the same
   as the Products and All Sale listings. The exceptions are the cells that hold sentences rather
   than values, which say so with .report-cell-wrap. */

/* Only where there is something to scroll. A table told not to wrap, in a box that cannot scroll
   sideways, is a table with its last columns off the edge of the card and no way to reach them —
   so this asks for one of the three wrappers that do: the report's own, Bootstrap's, or the one
   DataTables builds when scrollX is on. */

.app-shell .report-table-wrap table.dataTable tbody td,.app-shell .table-responsive table.dataTable tbody td,.app-shell .dataTables_scroll table.dataTable tbody td,
.app-shell .report-table-wrap table.dataTable thead th,.app-shell .table-responsive table.dataTable thead th,.app-shell .dataTables_scroll table.dataTable thead th{
  white-space:nowrap
}

.app-shell .report-table-wrap table.dataTable tbody td.report-cell-wrap,.app-shell .table-responsive table.dataTable tbody td.report-cell-wrap,.app-shell .dataTables_scroll table.dataTable tbody td.report-cell-wrap{
  min-width:200px;
  max-width:340px;
  white-space:normal
}

.app-shell .report-cell-lead{
  display:block;
  color:var(--text);
  font-weight:650
}

.app-shell .report-cell-meta{
  display:block;
  margin-top:2px;
  color:var(--text-3);
  font-size:11px;
  font-weight:600;
  white-space:nowrap
}

/* Some of these are carried for what they hold rather than for what they say — the tax cell keeps
   its span on every row so the footer can sum it, named rate or not. An empty one takes no line. */

.app-shell .report-cell-meta:empty{
  display:none
}

.app-shell a.report-cell-lead{
  color:var(--brand-strong);
  text-decoration:none
}

.app-shell a.report-cell-lead:hover{
  text-decoration:underline
}

/* Report tables read like the app's other listings: a tinted header row, banded body,
   a totals row that looks like a total, and a footer that sits on the card. */

.app-shell main>.content table.dataTable thead th,.app-shell .report-screen table.dataTable thead th,
.app-shell main>.content table.dataTable thead td,.app-shell .report-screen table.dataTable thead td{
  padding:12px 14px;
  border-bottom:1px solid var(--border);
  background:var(--surface-2);
  color:var(--text-3);
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.045em;
  text-transform:uppercase;
  white-space:nowrap
}

.app-shell main>.content table.dataTable tbody td,.app-shell .report-screen table.dataTable tbody td{
  padding:11px 14px;
  color:var(--text-2);
  font-size:12.5px
}

.app-shell main>.content table.dataTable tfoot th,.app-shell .report-screen table.dataTable tfoot th,
.app-shell main>.content table.dataTable tfoot td,.app-shell .report-screen table.dataTable tfoot td{
  padding:12px 14px;
  border-top:1px solid var(--border);
  background:var(--surface-2);
  color:var(--text);
  font-size:12.5px;
  font-weight:820
}

.app-shell main>.content table.dataTable tbody td.dataTables_empty,.app-shell .report-screen table.dataTable tbody td.dataTables_empty{
  padding:26px 14px;
  color:var(--text-3);
  font-size:12.5px;
  text-align:center
}

.app-shell main>.content .dataTables_info,.app-shell .report-screen .dataTables_info{
  padding:11px 14px;
  color:var(--text-3);
  font-size:12px
}

.app-shell main>.content .dataTables_paginate,.app-shell .report-screen .dataTables_paginate{
  padding:9px 12px
}

/* The module prints the table's name above the toolbar in a legacy box header. */

.app-shell main>.content .box-header .box-title,.app-shell main>.content .box-title{
  margin:0;
  color:var(--text);
  font-size:14.5px;
  font-weight:820
}

/* A filter card whose fields are wrapped in a form: the form was the card's only grid
   child, so every field stacked full width inside it and the controls squeezed to nothing.
   The form carries no layout of its own, so its fields lay out as the card's own. */

.app-shell .legacy-filter-card .filter-card-body>form{
  display:contents
}

.app-shell .legacy-filter-card .input-group{
  align-items:stretch
}

.app-shell .legacy-filter-card .input-group>.form-control,.app-shell .legacy-filter-card .input-group>.select2-container{
  min-width:0;
  flex:1
}

/* The addon leads the control on these screens, so its rounded corners are on the left. */

.app-shell .legacy-filter-card .input-group-addon{
  height:auto;
  min-height:42px;
  border-right:0;
  border-left:1px solid var(--border);
  border-radius:9px 0 0 9px
}

.app-shell .legacy-filter-card .input-group>.form-control{
  border-radius:0 9px 9px 0
}

.app-shell .legacy-filter-card .input-group .select2-selection{
  border-radius:0 9px 9px 0!important
}

/* The action row and the quick-date row sit under the fields, full width. */

.app-shell .legacy-filter-card .filter-card-body>form>.col-md-12{
  flex:0 0 100%;
  width:100%
}

.app-shell .legacy-filter-card .btn+.btn{
  margin-left:7px
}

.app-shell .legacy-filter-card .quick-date,.app-shell .legacy-filter-card .btn-default{
  margin-top:2px
}

/* AdminLTE info boxes ---------------------------------------------------
   Several module reports build their headline figures from AdminLTE's `info-box`, which
   colours the whole box and writes its label in white with an inline style. With no
   AdminLTE stylesheet those boxes had no card, no tile and no spacing, and the white label
   sat invisible on the page background — the figures ran into each other. The card is the
   app's own; the variant colour stays, on the icon and the bar. */

.app-shell .info-box{
  display:flex;
  min-height:96px;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
  padding:14px 15px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  box-shadow:0 5px 18px -15px rgba(16,32,24,.42)
}

.app-shell .info-box-icon{
  display:grid;
  width:44px;
  height:44px;
  flex:none;
  place-items:center;
  border-radius:12px;
  background:var(--surface-2);
  color:var(--text-2);
  font-size:17px
}

.app-shell .info-box-icon>i,.app-shell .info-box-icon>svg{
  font-size:17px
}

.app-shell .info-box-content{
  display:flex;
  min-width:0;
  flex:1;
  flex-direction:column
}

/* The label carries an inline white colour, which is why it has to be overridden here. */

.app-shell .info-box-text{
  overflow:hidden;
  color:var(--text-3)!important;
  font-size:11.5px;
  font-weight:750;
  text-overflow:ellipsis;
  text-transform:none;
  white-space:nowrap
}

.app-shell .info-box-number{
  margin-top:3px;
  color:var(--text)!important;
  font-size:22px;
  font-weight:870;
  letter-spacing:-.015em;
  line-height:1.15
}

.app-shell .info-box .progress{
  overflow:hidden;
  height:5px;
  margin:9px 0 0;
  border-radius:999px;
  background:var(--surface-3)
}

.app-shell .info-box .progress-bar{
  display:block;
  height:100%;
  border-radius:999px;
  background:var(--brand)
}

.app-shell .progress-description{
  margin-top:5px;
  overflow:hidden;
  color:var(--text-3)!important;
  font-size:10.5px;
  font-weight:600;
  text-overflow:ellipsis;
  white-space:nowrap
}

/* AdminLTE's colour names, kept so a screen still reads the way its author intended. */

.app-shell .info-box.bg-green>.info-box-icon{
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .info-box.bg-green .progress-bar{
  background:var(--brand)
}

.app-shell .info-box.bg-blue>.info-box-icon,.app-shell .info-box.bg-aqua>.info-box-icon{
  background:#eaf3ff;
  color:#3979bc
}

.app-shell .info-box.bg-blue .progress-bar,.app-shell .info-box.bg-aqua .progress-bar{
  background:#3979bc
}

.app-shell .info-box.bg-yellow>.info-box-icon,.app-shell .info-box.bg-orange>.info-box-icon{
  background:#fff2de;
  color:#b87523
}

.app-shell .info-box.bg-yellow .progress-bar,.app-shell .info-box.bg-orange .progress-bar{
  background:#d3902f
}

.app-shell .info-box.bg-red>.info-box-icon{
  background:#fdebea;
  color:#bd4d48
}

.app-shell .info-box.bg-red .progress-bar{
  background:#c9564f
}

.app-shell .info-box.bg-purple>.info-box-icon{
  background:#f1ecfd;
  color:#6d3fc4
}

.app-shell .info-box.bg-purple .progress-bar{
  background:#6d3fc4
}

.app-shell .info-box.bg-teal>.info-box-icon{
  background:#ccfbf1;
  color:#0f766e
}

.app-shell .info-box.bg-teal .progress-bar{
  background:#0f9488
}

/* The boxes themselves must not carry the flat AdminLTE fill on this shell. */

.app-shell .info-box.bg-green,.app-shell .info-box.bg-blue,.app-shell .info-box.bg-aqua,.app-shell .info-box.bg-yellow,.app-shell .info-box.bg-orange,.app-shell .info-box.bg-red,.app-shell .info-box.bg-purple,.app-shell .info-box.bg-teal{
  background:var(--surface)
}

/* Panels these screens build with AdminLTE's box variants: the coloured top border is how
   the module tells one panel from another, so it is kept as a hairline. */

.app-shell .box.box-success{
  border-top:2px solid color-mix(in srgb,var(--brand) 55%,var(--border))
}

.app-shell .box.box-primary{
  border-top:2px solid #6f9fd8
}

.app-shell .box.box-warning{
  border-top:2px solid #dda43c
}

.app-shell .box.box-danger{
  border-top:2px solid #cf6b64
}

.app-shell .box.box-info{
  border-top:2px solid #57aebc
}

.app-shell .box>.box-header.with-border{
  border-bottom:1px solid var(--border-2)
}

.app-shell .box>.box-header .box-tools{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:6px
}

.app-shell .box>.box-header .box-tools .btn{
  height:32px;
  padding:0 10px;
  border:1px solid var(--border);
  border-radius:9px;
  background:var(--surface-2);
  color:var(--text-2);
  font-size:12px
}

.app-shell .box>.box-header .box-tools .btn:hover{
  border-color:var(--text-3);
  background:var(--surface-3);
  color:var(--text)
}

/* AdminLTE small boxes -------------------------------------------------
   The other headline-figure shape the module reports use — twenty-four screens — where the
   colour class carries the whole card and a watermark icon sits in the corner. Same
   treatment as the info boxes: the app's card, the variant colour kept on the icon. */

.app-shell .small-box{
  position:relative;
  overflow:hidden;
  margin-bottom:14px;
  padding:15px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  box-shadow:0 5px 18px -15px rgba(16,32,24,.42)
}

.app-shell .small-box>.inner{
  position:relative;
  z-index:2;
  min-width:0
}

.app-shell .small-box h3{
  margin:0;
  color:var(--text)!important;
  font-size:24px;
  font-weight:870;
  letter-spacing:-.015em;
  line-height:1.15
}

.app-shell .small-box p{
  margin:4px 0 0;
  overflow:hidden;
  color:var(--text-3)!important;
  font-size:11.5px;
  font-weight:700;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .small-box>.icon{
  position:absolute;
  top:14px;
  right:14px;
  z-index:1;
  display:grid;
  width:40px;
  height:40px;
  place-items:center;
  border-radius:11px;
  background:var(--surface-2);
  color:var(--text-2);
  font-size:17px
}

.app-shell .small-box>.small-box-footer{
  display:inline-flex;
  align-items:center;
  gap:5px;
  margin-top:10px;
  color:var(--brand-strong);
  font-size:11.5px;
  font-weight:780
}

.app-shell .small-box.bg-green>.icon{
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .small-box.bg-blue>.icon,.app-shell .small-box.bg-aqua>.icon{
  background:#eaf3ff;
  color:#3979bc
}

.app-shell .small-box.bg-yellow>.icon,.app-shell .small-box.bg-orange>.icon{
  background:#fff2de;
  color:#b87523
}

.app-shell .small-box.bg-red>.icon{
  background:#fdebea;
  color:#bd4d48
}

.app-shell .small-box.bg-purple>.icon{
  background:#f1ecfd;
  color:#6d3fc4
}

.app-shell .small-box.bg-teal>.icon{
  background:#ccfbf1;
  color:#0f766e
}

.app-shell .small-box.bg-green,.app-shell .small-box.bg-blue,.app-shell .small-box.bg-aqua,.app-shell .small-box.bg-yellow,.app-shell .small-box.bg-orange,.app-shell .small-box.bg-red,.app-shell .small-box.bg-purple,.app-shell .small-box.bg-teal{
  background:var(--surface)
}

.app-shell .report-table-wrap{
  overflow-x:auto
}

/* Module report screens carry their own \3c style> blocks written for AdminLTE's coloured
   boxes — several force `color: white !important` on the figures inside them. On a white
   card that is an invisible number, which is what an "empty" stat card really was. Those
   blocks are in the page, after this stylesheet, so they are answered here with a rule
   that outranks them rather than by editing fifteen screens' CSS. */

body.app-ui .app-shell .small-box .inner h3,
body.app-ui .app-shell .small-box .inner p,
body.app-ui .app-shell .small-box h3,
body.app-ui .app-shell .small-box p,
body.app-ui .app-shell .info-box .info-box-text,
body.app-ui .app-shell .info-box .info-box-number,
body.app-ui .app-shell .info-box .progress-description{
  color:var(--text)!important
}

body.app-ui .app-shell .small-box .inner p,
body.app-ui .app-shell .small-box p,
body.app-ui .app-shell .info-box .info-box-text,
body.app-ui .app-shell .info-box .progress-description{
  color:var(--text-3)!important
}

/* A row that a screen hides and then shows again comes back as display:block, and its
   columns stack in one tall pile. Rows on these screens are always the grid. */

.app-shell main>.content .row{
  display:flex!important
}

/* Charts on report screens ---------------------------------------------
   Chart.js keeps its aspect ratio by default, so a canvas in a half-width card grew to
   whatever height that width implied — a doughnut filled the window. The module's asset
   partial turns that default off, which makes the canvas fill its box instead, and the box
   is sized here. Clamping the canvas with max-height alone would have squashed the drawing
   rather than resized it. */

.app-shell main>.content canvas,.app-shell .report-screen canvas{
  height:300px!important;
  max-height:300px!important;
  width:100%!important
}

/* Doughnut and pie charts read better a little shorter, level with a line chart beside them. */

.app-shell main>.content .chart-square canvas{
  height:260px!important;
  max-height:260px!important
}

/* A canvas the screen has already wrapped in a sized box keeps that box's height. */

.app-shell main>.content [style*="height:"]>canvas,.app-shell main>.content [style*="height: "]>canvas{
  height:100%!important;
  max-height:100%!important
}

/* Module "modern widgets" ----------------------------------------------
   Nineteen module screens build their headline figures from `.modern-widget`, each variant
   given a bright gradient and white text with a shadow, written inline in the page. Six of
   them side by side read as a paint chart rather than a set of figures, and the meaning of
   a colour — red for brands, pink for transactions — was decoration, not information.

   They are the same card as everywhere else: white, one tinted tile for the icon, the
   figure as the largest thing on it. The variant keeps its hue, on the tile only. Written
   with the same weight the page's own rules use, because those are all !important. */

body.app-ui .app-shell .modern-widget{
  display:flex!important;
  height:auto!important;
  min-height:84px!important;
  align-items:center!important;
  gap:12px!important;
  margin:0 0 14px!important;
  padding:14px 15px!important;
  border:1px solid var(--border)!important;
  border-radius:14px!important;
  background:var(--surface)!important;
  box-shadow:0 5px 18px -15px rgba(16,32,24,.42)!important;
  color:var(--text)!important;
  font-family:inherit!important;
  text-shadow:none!important
}

body.app-ui .app-shell .modern-widget *{
  color:inherit!important;
  text-shadow:none!important
}

body.app-ui .app-shell .modern-widget-icon{
  display:grid!important;
  width:40px!important;
  height:40px!important;
  flex:none!important;
  place-items:center!important;
  border-radius:11px!important;
  background:var(--surface-2)!important;
  color:var(--text-2)!important;
  font-size:17px!important;
  opacity:1!important
}

body.app-ui .app-shell .modern-widget-content{
  display:flex!important;
  min-width:0!important;
  flex:1!important;
  flex-direction:column!important
}

body.app-ui .app-shell .modern-widget-text{
  overflow:hidden!important;
  color:var(--text-3)!important;
  font-size:11px!important;
  font-weight:800!important;
  letter-spacing:.04em!important;
  text-overflow:ellipsis!important;
  text-transform:uppercase!important;
  white-space:nowrap!important
}

body.app-ui .app-shell .modern-widget-number{
  margin-top:3px!important;
  color:var(--text)!important;
  font-size:22px!important;
  font-weight:870!important;
  letter-spacing:-.015em!important;
  line-height:1.15!important
}

/* The hue each screen chose, kept where it still means something: the icon. */

body.app-ui .app-shell .widget-brands .modern-widget-icon{
  background:#fdebea!important;
  color:#bd4d48!important
}

body.app-ui .app-shell .widget-transactions .modern-widget-icon{
  background:#f6ecfb!important;
  color:#8a4aa8!important
}

body.app-ui .app-shell .widget-sales .modern-widget-icon{
  background:#eaf3ff!important;
  color:#3979bc!important
}

body.app-ui .app-shell .widget-quantity .modern-widget-icon{
  background:#ccfbf1!important;
  color:#0f766e!important
}

body.app-ui .app-shell .widget-profit .modern-widget-icon{
  background:var(--brand-weak)!important;
  color:var(--brand-strong)!important
}

body.app-ui .app-shell .widget-average .modern-widget-icon{
  background:#fff2de!important;
  color:#b87523!important
}

body.app-ui .app-shell .widget-customers .modern-widget-icon{
  background:#eaf3ff!important;
  color:#3979bc!important
}

body.app-ui .app-shell .widget-products .modern-widget-icon{
  background:#f1ecfd!important;
  color:#6d3fc4!important
}

body.app-ui .app-shell .widget-suppliers .modern-widget-icon{
  background:#fff2de!important;
  color:#b87523!important
}

body.app-ui .app-shell .widget-expenses .modern-widget-icon{
  background:#fdebea!important;
  color:#bd4d48!important
}

/* The remaining variants these screens use. */

body.app-ui .app-shell .widget-categories .modern-widget-icon,body.app-ui .app-shell .widget-category .modern-widget-icon{
  background:#f1ecfd!important;
  color:#6d3fc4!important
}

body.app-ui .app-shell .widget-discount .modern-widget-icon{
  background:#fdebea!important;
  color:#bd4d48!important
}

body.app-ui .app-shell .widget-margin .modern-widget-icon{
  background:var(--brand-weak)!important;
  color:var(--brand-strong)!important
}

body.app-ui .app-shell .widget-purchases .modern-widget-icon{
  background:#eaf3ff!important;
  color:#3979bc!important
}

body.app-ui .app-shell .widget-qty .modern-widget-icon{
  background:#ccfbf1!important;
  color:#0f766e!important
}

body.app-ui .app-shell .widget-stock .modern-widget-icon{
  background:#ccfbf1!important;
  color:#0f766e!important
}

body.app-ui .app-shell .widget-tax .modern-widget-icon{
  background:#fff2de!important;
  color:#b87523!important
}

/* col-xl-* appears on these rows too; without it a six-across strip fell back to full width. */

@media (min-width:1280px){
  .app-shell .col-xl-1{
    width:8.333333%
  }

  .app-shell .col-xl-2{
    width:16.666667%
  }

  .app-shell .col-xl-3{
    width:25%
  }

  .app-shell .col-xl-4{
    width:33.333333%
  }

  .app-shell .col-xl-5{
    width:41.666667%
  }

  .app-shell .col-xl-6{
    width:50%
  }

  .app-shell .col-xl-7{
    width:58.333333%
  }

  .app-shell .col-xl-8{
    width:66.666667%
  }

  .app-shell .col-xl-9{
    width:75%
  }

  .app-shell .col-xl-10{
    width:83.333333%
  }

  .app-shell .col-xl-11{
    width:91.666667%
  }

  .app-shell .col-xl-12{
    width:100%
  }
}

/* "Show 10 entries" and "Search:" read as controls rather than sentences.

   The length label holds no text of its own any more — it is the box around the select and
   nothing else — so a gap here only opened a space beside a control with nothing next to it. */

.app-shell .dataTables_length label{
  gap:0;
  color:var(--text-3);
  font-size:11.5px;
  font-weight:700
}

.app-shell .dataTables_filter label{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin:0;
  color:var(--text-3);
  font-size:11.5px;
  font-weight:700
}

.app-shell .dataTables_filter input{
  margin:0
}

/* Reports that are a page of figures rather than a table --------------- */

.app-shell .report-toolbar{
  display:flex;
  align-items:flex-end;
  gap:12px;
  flex-wrap:wrap;
  padding:13px 15px
}

.app-shell .report-toolbar>.field,.app-shell .report-toolbar>div:first-child{
  min-width:260px;
  flex:0 1 320px
}

.app-shell .report-pair{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px
}

.app-shell .report-figure-card,.app-shell .report-overall-card{
  overflow:hidden;
  padding:0
}

.app-shell .report-figure-card>header,.app-shell .report-overall-card>header{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-bottom:1px solid var(--border-2);
  background:linear-gradient(90deg,#f9fbfa,var(--surface))
}

.app-shell .report-figure-card>header>span,.app-shell .report-overall-card>header>span{
  display:grid;
  width:32px;
  height:32px;
  flex:none;
  place-items:center;
  border-radius:9px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .report-figure-card>header>span.is-blue{
  background:#eaf3ff;
  color:#3979bc
}

.app-shell .report-figure-card h2,.app-shell .report-overall-card h2{
  margin:0;
  color:var(--text);
  font-size:14.5px;
  font-weight:820
}

.app-shell .report-overall-card header p{
  margin:2px 0 0;
  color:var(--text-3);
  font-size:11px;
  line-height:1.45
}

.app-shell .report-figure-card dl{
  margin:0;
  padding:6px 0
}

.app-shell .report-figure-card dl>div{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  padding:10px 15px
}

.app-shell .report-figure-card dl>div+div{
  border-top:1px solid var(--border-2)
}

.app-shell .report-figure-card dt{
  min-width:0;
  color:var(--text-2);
  font-size:12.5px;
  font-weight:700
}

/* The explanation that used to be a tooltip icon; this stack loads no icon font. */

.app-shell .report-figure-card dt small{
  display:block;
  margin-top:2px;
  color:var(--text-3);
  font-size:10.5px;
  font-weight:600
}

.app-shell .report-figure-card dd{
  margin:0;
  color:var(--text);
  font-size:14px;
  font-weight:840;
  white-space:nowrap
}

.app-shell .report-overall-figures{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  padding:15px
}

.app-shell .report-overall-figures>div{
  padding:13px 15px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface-2)
}

.app-shell .report-overall-figures small{
  display:block;
  color:var(--text-3);
  font-size:11px;
  font-weight:750
}

.app-shell .report-overall-figures strong{
  display:block;
  margin-top:4px;
  color:var(--text);
  font-size:22px;
  font-weight:870
}

.app-shell .report-figure-loading{
  display:inline-block;
  width:15px;
  height:15px;
  border:2px solid var(--border);
  border-top-color:var(--brand);
  border-radius:50%;
  vertical-align:-2px;
  animation:superadmin-dashboard-spin .7s linear infinite
}

.app-shell .report-actions{
  display:flex;
  justify-content:flex-end;
  padding-top:2px
}

@media (max-width:820px){
  .app-shell .report-pair,.app-shell .report-overall-figures{
    grid-template-columns:1fr
  }
}

/* The explanation that used to hide behind a tooltip icon beside a column heading. */

.app-shell .report-table-note{
  margin:0;
  padding:11px 15px;
  border-top:1px solid var(--border-2);
  background:var(--surface-2);
  color:var(--text-3);
  font-size:11px;
  line-height:1.5
}

/* Reports with several tables behind a tab strip. The Bootstrap hooks stay — the report's
   javascript builds each table when its tab is first shown. */

.app-shell .report-tabbed-card{
  overflow:hidden;
  padding:0
}

/* A track with the current view raised out of it.

   They were folder tabs — square-shouldered boxes hung off a rule, the shape a desktop application
   used to draw and the only place in this product still drawing it. Every other set of tabs here
   is a track with one of them lifted: the invoice settings, the till's Order/Products switch, the
   contact profile. This is that, so a report reads like the rest of the application.

   The strip scrolls sideways rather than wrapping: five views on a narrow screen would otherwise
   become two rows, and the second row reads as a different kind of thing from the first. */

.app-shell .report-tab-strip{
  display:flex;
  gap:4px;
  margin:0;
  padding:8px;
  list-style:none;
  border-bottom:1px solid var(--border-2);
  background:var(--surface-2);
  overflow-x:auto;
  scrollbar-width:thin;
  -webkit-overflow-scrolling:touch
}

.app-shell .report-tab-strip>li{
  margin:0
}

.app-shell .report-tab-strip>li>a{
  display:inline-flex;
  align-items:center;
  gap:7px;
  height:36px;
  padding:0 15px;
  border:1px solid transparent;
  border-radius:9px;
  color:var(--text-3);
  font-size:12.5px;
  font-weight:700;
  text-decoration:none;
  white-space:nowrap;
  transition:background .14s ease,color .14s ease,border-color .14s ease,box-shadow .14s ease
}

.app-shell .report-tab-strip>li>a:hover{
  background:color-mix(in srgb,var(--surface) 72%,transparent);
  color:var(--text)
}

.app-shell .report-tab-strip>li>a:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:1px
}

/* The current one is lifted off the track: a white box with an edge and a shadow, named in the
   brand so it is the one thing on the strip you cannot mistake. */

.app-shell .report-tab-strip>li.active>a{
  border-color:var(--border);
  background:var(--surface);
  color:var(--brand-strong);
  box-shadow:var(--shadow-sm)
}

@media (max-width:640px){
  .app-shell .report-tab-strip{
    gap:3px;
    padding:6px
  }

  .app-shell .report-tab-strip>li>a{
    height:32px;
    padding:0 11px;
    font-size:12px
  }
}

.app-shell .report-tabbed-card .tab-content>.tab-pane{
  display:none;
  padding:0
}

.app-shell .report-tabbed-card .tab-content>.tab-pane.active{
  display:block
}

/* Panes that hold more than a bare table — their own filters, stat tiles, a heading — need the
   card's gutters back, which the rule above takes away for table-only tabs. */

.app-shell .report-tabbed-card-padded .tab-content>.tab-pane{
  padding:14px 14px 2px
}

.app-shell .report-tabbed-card-padded .small-box{
  margin-bottom:12px
}

/* Profit & loss ------------------------------------------------------
   The two halves of the statement were `col-md-6` divs inside a container that is not a row,
   so they took half the width each and still stacked, leaving the right half of the screen
   empty. Two columns that fold to one, and the three totals the report exists to give you
   read as figures rather than as grey headings above their own formulas. */

.app-shell .report-pl-figures{
  margin-top:12px
}

.app-shell .report-pl-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
  gap:14px;
  align-items:start
}

.app-shell .report-pl-card{
  overflow:hidden;
  padding:0
}

.app-shell .report-pl-card>header{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-bottom:1px solid var(--border-2);
  background:linear-gradient(90deg,#f9fbfa,var(--surface))
}

.app-shell .report-pl-card>header>span{
  display:grid;
  width:32px;
  height:32px;
  flex:none;
  place-items:center;
  border-radius:9px;
  background:var(--surface-2);
  color:var(--text-2)
}

.app-shell .report-pl-card>header h2{
  margin:0;
  color:var(--text);
  font-size:13.5px;
  font-weight:800
}

.app-shell .report-pl-card>header p{
  margin:1px 0 0;
  color:var(--text-3);
  font-size:11.5px
}

.app-shell .report-pl-table{
  width:100%;
  margin:0;
  border-collapse:collapse
}

.app-shell .report-pl-table th,.app-shell .report-pl-table td{
  padding:9px 14px;
  border:0;
  border-bottom:1px solid var(--border-2);
  vertical-align:middle
}

.app-shell .report-pl-table tr:last-child th,.app-shell .report-pl-table tr:last-child td{
  border-bottom:0
}

.app-shell .report-pl-table th{
  width:60%;
  color:var(--text-2);
  font-size:12.5px;
  font-weight:700;
  text-align:left
}

.app-shell .report-pl-table th small{
  display:block;
  color:var(--text-3);
  font-size:11px;
  font-weight:600
}

.app-shell .report-pl-table td{
  color:var(--text);
  font-size:13px;
  font-weight:750;
  text-align:right;
  font-variant-numeric:tabular-nums
}

.app-shell .report-pl-table ul{
  margin:3px 0 0;
  padding-left:15px;
  color:var(--text-3);
  font-size:11.5px;
  font-weight:600
}

.app-shell .report-pl-totals{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:14px;
  margin-top:14px
}

.app-shell .report-pl-total{
  padding:15px 16px
}

.app-shell .report-pl-total.is-primary{
  border-color:#bfe0cb;
  background:linear-gradient(180deg,var(--brand-weak),var(--surface))
}

.app-shell .report-pl-total-label{
  margin:0;
  color:var(--text-3);
  font-size:11px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase
}

.app-shell .report-pl-total-figure{
  margin:5px 0 0;
  color:var(--text);
  font-size:25px;
  font-weight:870;
  letter-spacing:-.015em;
  font-variant-numeric:tabular-nums
}

.app-shell .report-pl-total-figure.is-negative{
  color:var(--danger)
}

.app-shell .report-pl-total-formula{
  margin:8px 0 0;
  color:var(--text-3);
  font-size:11px;
  font-weight:600;
  line-height:1.5
}

/* Two times side by side, as one control. */

.app-shell .report-time-range{
  display:flex;
  align-items:center;
  gap:8px
}

.app-shell .report-time-range .form-control{
  min-width:0;
  flex:1
}

.app-shell .report-time-range>span{
  flex:none;
  color:var(--text-3);
  font-size:12px
}

.app-shell .report-card-head{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border-bottom:1px solid var(--border-2);
  background:linear-gradient(90deg,#f9fbfa,var(--surface))
}

.app-shell .report-card-head>span{
  display:grid;
  width:32px;
  height:32px;
  flex:none;
  place-items:center;
  border-radius:9px;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .report-card-head h2{
  margin:0;
  color:var(--text);
  font-size:14.5px;
  font-weight:820
}

.app-shell .report-card-head p{
  margin:2px 0 0;
  color:var(--text-3);
  font-size:11.5px
}

/* The count that disagrees with the movements is the point of the row. */

.app-shell .report-stock-mismatch{
  color:var(--danger)!important;
  font-weight:820
}

/* Tabs whose panes are bare tables rather than wrapped ones. */

.app-shell .report-tab-tables>.tab-pane>table{
  width:100%
}

.app-shell .report-tab-tables{
  overflow-x:auto
}

/* The stock breakdown a row expands into. */

.app-shell .report-stock-details{
  padding:12px 14px;
  border-top:1px solid var(--border-2);
  background:var(--surface-2)
}

.app-shell .report-stock-details .table{
  margin:0;
  background:var(--surface)
}

/* Stat cards a screen wrote entirely as inline styles — a gradient fill with white text and
   a 40px icon glyph. Nothing there could be reached from a stylesheet, so the markup now
   carries this class instead and reads like every other figure in the app. */

.app-shell .ar-inline-stat{
  display:flex;
  height:auto!important;
  min-height:84px;
  align-items:center;
  gap:12px;
  padding:14px 15px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  box-shadow:0 5px 18px -15px rgba(16,32,24,.42);
  color:var(--text)
}

.app-shell .ar-inline-stat>i{
  display:grid;
  width:40px;
  height:40px;
  flex:none;
  place-items:center;
  border-radius:11px;
  background:var(--surface-2);
  color:var(--text-2);
  font-size:17px!important;
  margin:0!important;
  opacity:1!important
}

.app-shell .ar-inline-stat>div{
  min-width:0;
  flex:1
}

.app-shell .ar-inline-stat>div>div:first-child{
  color:var(--text-3)!important;
  font-size:11px!important;
  font-weight:800!important;
  letter-spacing:.04em!important;
  text-transform:uppercase
}

.app-shell .ar-inline-stat>div>div:last-child{
  margin-top:3px;
  color:var(--text)!important;
  font-size:22px!important;
  font-weight:870!important
}

/* Customer Lifetime Value ---------------------------------------------
   The screen came with four gradient tiles and ten more behind its top-ten list, each a
   different hue. None of that colour carried meaning — rank is already given by the number
   and the order — so the tiles take the same tints as every other figure in the app and
   only the first three ranks are marked. */

.app-shell .clv-summary-card{
  border:1px solid var(--border)!important;
  border-radius:14px!important;
  background:var(--surface)!important;
  box-shadow:0 5px 18px -15px rgba(16,32,24,.42)!important
}

.app-shell .clv-summary-icon{
  background:var(--surface-2);
  color:var(--text-2)
}

.app-shell .clv-summary-icon.is-violet{
  background:#f1ecfd;
  color:#6d3fc4
}

.app-shell .clv-summary-icon.is-green{
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .clv-summary-icon.is-blue{
  background:#eaf3ff;
  color:#3979bc
}

.app-shell .clv-summary-icon.is-red{
  background:#fdebea;
  color:#bd4d48
}

.app-shell .clv-top-card{
  border:1px solid var(--border);
  border-radius:13px;
  background:var(--surface)
}

.app-shell .clv-top-card:hover{
  border-color:color-mix(in srgb,var(--brand) 30%,var(--border))
}

.app-shell .clv-top-rank{
  border:1px solid var(--border);
  background:var(--surface-2);
  color:var(--text-3)
}

/* First, second and third are worth marking; tenth is not. */

.app-shell .clv-top-card.is-first .clv-top-rank{
  border-color:#e6cf95;
  background:#fdf6e3;
  color:#8a6b1f
}

.app-shell .clv-top-card.is-second .clv-top-rank{
  border-color:#d3d8dd;
  background:#f4f6f8;
  color:#5b6670
}

.app-shell .clv-top-card.is-third .clv-top-rank{
  border-color:#e3c6b2;
  background:#fbf1ea;
  color:#8a5a37
}

.app-shell .clv-top-name{
  color:var(--text)!important;
  font-size:12.5px!important;
  font-weight:780!important
}

.app-shell .clv-top-amount{
  color:var(--text)!important;
  font-size:17px!important;
  font-weight:860!important
}

.app-shell .clv-top-freq{
  color:var(--text-3)!important;
  font-size:10.5px!important
}

/* Recognition screens: the weekly and monthly winner panels were purple and pink gradient
   fills. They keep a tint so the two are still told apart, at the weight the rest of the
   app uses. */

.app-shell .weekly-winner{
  background:#f1ecfd!important;
  border:1px solid #ddd0f5!important;
  color:var(--text)!important
}

.app-shell .monthly-winner{
  background:var(--brand-weak)!important;
  border:1px solid #c8e1cf!important;
  color:var(--text)!important
}

.app-shell .weekly-winner *,.app-shell .monthly-winner *{
  color:var(--text)!important;
  text-shadow:none!important
}

.app-shell .weekly-winner small,.app-shell .monthly-winner small,
.app-shell .weekly-winner .winner-label,.app-shell .monthly-winner .winner-label{
  color:var(--text-3)!important
}

/* The three winner cards: white text on a gradient before, so once the fill went the text
   went with it. Each keeps a tint that tells the periods apart. */

.app-shell .winner-card{
  border:1px solid var(--border);
  box-shadow:none
}

.app-shell .winner-card *{
  color:var(--text)!important;
  text-shadow:none!important;
  opacity:1!important
}

.app-shell .winner-card .winner-period{
  color:var(--text-3)!important;
  font-size:11px!important;
  font-weight:800!important;
  letter-spacing:.05em;
  text-transform:uppercase
}

.app-shell .winner-card .winner-icon{
  display:grid;
  width:40px;
  height:40px;
  flex:none;
  place-items:center;
  margin-right:12px;
  border-radius:11px;
  background:var(--surface);
  color:var(--text-2)
}

.app-shell .weekly-winner{
  background:#f1ecfd!important;
  border-color:#ddd0f5!important
}

.app-shell .weekly-winner .winner-icon{
  color:#6d3fc4
}

.app-shell .monthly-winner{
  background:var(--brand-weak)!important;
  border-color:#c8e1cf!important
}

.app-shell .monthly-winner .winner-icon{
  color:var(--brand-strong)
}

.app-shell .yearly-winner{
  background:#fff2de!important;
  border-color:#f0dcbe!important
}

.app-shell .yearly-winner .winner-icon{
  color:#b87523
}

/* Ageing report: the chart sat loose above the table with the tab's own name repeated over
   it in Verdana, and each bucket drawn in a different hue. */

/* The chart sits inside the tab card, so it carries no border of its own — two nested
   bordered boxes read as a card inside a card. */

.app-shell .ageing-chart-card{
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none
}

.app-shell .ageing-chart-canvas{
  padding:14px 14px 4px
}

.app-shell .canvasoverlay{
  display:none
}

.app-shell .report-note{
  margin:2px 0 0;
  color:var(--text-3);
  font-size:11.5px;
  line-height:1.55
}

/* The ageing tables lay their controls out in their own wrapper: length, exports, search.
   Same toolbar as everywhere else — search first, page size and exports to the right. */

/* The page sets `justify-content: space-between` on this row in its own \3c style>, which is
   what spread the three controls across the width, so these are written to outrank it. */

body.app-ui .app-shell .ageingfilter{
  display:flex!important;
  align-items:center;
  justify-content:flex-start!important;
  gap:10px;
  flex-wrap:wrap;
  margin:0!important;
  padding:11px 13px;
  border-bottom:1px solid var(--border-2)
}

body.app-ui .app-shell .ageingfilter .dataTables_filter{
  order:1;
  margin:0
}

body.app-ui .app-shell .ageingfilter .dataTables_length{
  order:2;
  margin:0 0 0 auto
}

body.app-ui .app-shell .ageingfilter .dt-buttons{
  order:3;
  margin:0
}

body.app-ui .app-shell .ageingfilter .dataTables_processing{
  order:4
}

/* Detail dialogs on the module reports ---------------------------------
   These were built from AdminLTE boxes with a coloured top border each, four figures drawn
   as icon glyphs in green, amber, blue and red, and a size set inline on every cell. */

.app-shell .ar-detail-grid,body.app-ui .ar-detail-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-bottom:12px
}

body.app-ui .ar-detail-panel{
  overflow:hidden;
  margin-bottom:12px;
  border:1px solid var(--border);
  border-radius:13px;
  background:var(--surface)
}

body.app-ui .ar-detail-panel>header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:11px 14px;
  border-bottom:1px solid var(--border-2);
  background:linear-gradient(90deg,#f9fbfa,var(--surface));
  color:var(--text);
  font-size:13px;
  font-weight:820
}

body.app-ui .ar-detail-panel>header>b{
  padding:4px 9px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--surface);
  color:var(--text-3);
  font-size:10.5px;
  font-weight:800
}

body.app-ui .ar-detail-panel dl{
  margin:0;
  padding:4px 0
}

body.app-ui .ar-detail-panel dl>div{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:14px;
  padding:9px 14px
}

body.app-ui .ar-detail-panel dl>div+div{
  border-top:1px solid var(--border-2)
}

body.app-ui .ar-detail-panel dt{
  color:var(--text-3);
  font-size:11.5px;
  font-weight:700
}

body.app-ui .ar-detail-panel dd{
  margin:0;
  color:var(--text);
  font-size:12.5px;
  font-weight:760;
  text-align:right
}

body.app-ui .ar-detail-figures{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr))
}

body.app-ui .ar-detail-figures>div{
  padding:12px 14px;
  border-top:1px solid var(--border-2)
}

body.app-ui .ar-detail-figures>div:nth-child(-n+2){
  border-top:0
}

body.app-ui .ar-detail-figures>div:nth-child(odd){
  border-right:1px solid var(--border-2)
}

body.app-ui .ar-detail-figures small{
  display:block;
  color:var(--text-3);
  font-size:10.5px;
  font-weight:750
}

body.app-ui .ar-detail-figures strong{
  display:block;
  margin-top:3px;
  color:var(--text);
  font-size:19px;
  font-weight:860
}

body.app-ui .ar-detail-table{
  max-height:360px;
  overflow:auto
}

body.app-ui .ar-detail-table table.table{
  margin:0
}

body.app-ui .ar-detail-table thead th{
  position:sticky;
  top:0;
  z-index:2;
  background:var(--surface-2)
}

body.app-ui .ar-detail-product{
  max-width:240px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

body.app-ui .ar-detail-status{
  display:inline-flex;
  align-items:center;
  padding:3px 8px;
  border:1px solid var(--border);
  border-radius:999px;
  background:var(--surface-2);
  color:var(--text-2);
  font-size:10.5px;
  font-weight:780;
  text-transform:capitalize
}

body.app-ui .ar-detail-status.label-success{
  border-color:#c8e1cf;
  background:var(--brand-weak);
  color:var(--brand-strong)
}

body.app-ui .ar-detail-status.label-danger{
  border-color:#eec9c6;
  background:#fdebea;
  color:#bd4d48
}

body.app-ui .ar-detail-status.label-warning{
  border-color:#f0dcbe;
  background:#fff2de;
  color:#b87523
}

body.app-ui .ar-detail-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:11px 14px;
  border-top:1px solid var(--border-2);
  background:var(--surface-2);
  color:var(--text-3);
  font-size:11.5px
}

body.app-ui .ar-detail-foot>b{
  color:var(--text);
  font-size:13px;
  font-weight:850
}

@media (max-width:720px){
  body.app-ui .ar-detail-grid{
    grid-template-columns:1fr
  }
}

/* ===================================================== generated dark layer
 *
 * Most of this stylesheet reads from the theme tokens and follows dark mode by itself. A long
 * tail of components was written in literals instead — near-white card faces, near-black
 * headings, pale status chips — and those stayed light while the shell went dark. That is how
 * a white "Order status overview" card ended up on a dark Sales Order page.
 *
 * The layer below is generated from the rules above by measuring each colour rather than
 * matching a list of them: a hex is restated only when it is unmistakably neutral — low
 * saturation, and light enough for a surface or dark enough for ink — or a pale tint whose hue
 * says which status it means. Anything saturated is left alone, so brand green, chart colours
 * and semantic text keep their values on both grounds.
 *
 * The light rules are untouched; this only adds. Regenerate rather than hand-edit — it is
 * derived from the rules above and drifts if the two are maintained apart.
 */

[data-theme="dark"] body.app-ui .sells-page.sales-order-page .sells-stage.is-active[data-status="ordered"] {
  background: var(--surface-2);
}

[data-theme="dark"] body.app-ui .sells-page.sales-order-page .sells-stage.is-active[data-status="partial"] {
  background: var(--surface);
}

[data-theme="dark"] body.app-ui .sells-page.sales-order-page .sells-stage.is-active[data-status="completed"] {
  background: var(--surface);
}

[data-theme="dark"] body.app-ui .edit_pso_status_modal .modal-content {
  border: 1px solid var(--border);
}

[data-theme="dark"] body.app-ui .edit_pso_status_modal .so-modal-header {
  border-bottom: 1px solid var(--border);
}

[data-theme="dark"] body.app-ui .edit_pso_status_modal .so-modal-header__icon {
  background: var(--surface-2);
}

[data-theme="dark"] body.app-ui .edit_pso_status_modal .so-modal-header h4 {
  color: var(--text);
}

[data-theme="dark"] body.app-ui .edit_pso_status_modal .so-modal-header p {
  color: var(--text-3);
}

[data-theme="dark"] body.app-ui .edit_pso_status_modal .so-modal-close {
  color: var(--text-2);
  background: var(--surface-2);
}

[data-theme="dark"] body.app-ui .edit_pso_status_modal .so-modal-label {
  color: var(--text-2);
}

[data-theme="dark"] body.app-ui .edit_pso_status_modal .so-status-option {
  border: 1px solid var(--border);
}

[data-theme="dark"] body.app-ui .edit_pso_status_modal .so-status-option__copy strong {
  color: var(--text);
}

[data-theme="dark"] body.app-ui .edit_pso_status_modal .so-status-option__copy small {
  color: var(--text-3);
}

[data-theme="dark"] body.app-ui .edit_pso_status_modal .so-status-option.is-blue .so-status-option__icon {
  background: var(--surface-2);
}

[data-theme="dark"] body.app-ui .edit_pso_status_modal .so-status-option.is-amber .so-status-option__icon {
  background: var(--danger-weak);
}

[data-theme="dark"] body.app-ui .edit_pso_status_modal .so-status-option.is-green .so-status-option__icon {
  background: var(--surface-2);
}

[data-theme="dark"] body.app-ui .edit_pso_status_modal .so-status-option:has(input:checked) {
  background: var(--surface);
}

[data-theme="dark"] body.app-ui .edit_pso_status_modal .so-modal-footer {
  border-top: 1px solid var(--border);
  background: var(--surface);
}

[data-theme="dark"] /* ============================================================
   Reusable components (used 5+ times) — edit once,
[data-theme="dark"] applies everywhere.
   One-off layout stays as Tailwind utilities in the markup.

   ALL scoped under `.app-shell` (the new layout's permanent root wrapper) so clean
   semantic names (.card,
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .nav-item) never collide with
   Bootstrap/AdminLTE still loaded on un-migrated pages — the extra
   ancestor gives higher specificity,
[data-theme="dark"] so these always win inside .app-shell
   and have zero effect outside it. Keep this neutral scope as the app's
   stable style-isolation boundary after the migration is complete.
   ============================================================ */
@layer components {
  background: var(--surface-2);
  background: var(--surface)
}

.expense-document-title{
  display:flex;
  background: var(--surface)
}

.expense-quick-section{
  padding:16px;
}

[data-theme="dark"] .app-shell .form-control.error {
  background: var(--surface);
}

[data-theme="dark"] .app-shell .form-submit-spinner {
  border-top-color: var(--border-2);
}

[data-theme="dark"] .app-shell .contact-form-modal-body .more_btn.contact-person-card-toggle:hover {
  background: var(--surface);
}

[data-theme="dark"] .app-shell .note-submit-spinner {
  border-top-color: var(--border-2);
}

[data-theme="dark"] .select2-container--default .select2-results__group {
  color: var(--text-3,var(--text-3));
}

[data-theme="dark"] .select2-compact-actions {
  border-bottom: 1px solid var(--border,var(--border));
}

[data-theme="dark"] .select2-compact-action {
  border: 1px solid var(--border,var(--border));
  background: var(--surface,var(--surface));
}

[data-theme="dark"] .select2-compact-action:hover {
  background: var(--brand-weak,var(--surface-2));
}

[data-theme="dark"] body.app-ui .confirm-dialog .swal-button--loading:after {
  border-top-color: var(--border-2);
}

[data-theme="dark"] .app-shell .pr-workflow-steps .is-ordered i {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .pr-workflow-steps .is-partial i {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .pr-workflow-steps .is-completed i {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .pr-workflow-steps>button.is-ordered.is-active {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .pr-workflow-steps>button.is-partial.is-active {
  background: var(--surface);
}

[data-theme="dark"] .app-shell .pr-workflow-steps>button.is-completed.is-active {
  background: var(--surface);
}

[data-theme="dark"] .app-shell .pr-status-badge.is-ordered {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .pr-status-badge.is-partial {
  background: var(--surface);
}

[data-theme="dark"] .app-shell .pr-status-badge.is-completed {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .po-stage-options .is-ordered i {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .po-stage-options .is-partial i {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .po-stage-options .is-completed i {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .po-stage-options>button.is-ordered.is-active {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .po-stage-options>button.is-partial.is-active {
  background: var(--surface);
}

[data-theme="dark"] .app-shell .po-stage-options>button.is-completed.is-active {
  background: var(--surface);
}

[data-theme="dark"] .app-shell .po-status-badge.is-ordered {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .po-status-badge.is-partial {
  background: var(--surface);
}

[data-theme="dark"] .app-shell .po-status-badge.is-completed {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .po-shipping-badge.is-ordered {
  background: var(--surface);
}

[data-theme="dark"] .app-shell .po-shipping-badge.is-packed {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .po-shipping-badge.is-shipped {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .po-shipping-badge.is-delivered {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .po-status-choice.is-ordered>i {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .po-status-choice.is-partial>i {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .po-status-choice.is-completed>i {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .po-status-choice.is-ordered:has(input:checked) {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .po-status-choice.is-partial:has(input:checked) {
  background: var(--surface);
}

[data-theme="dark"] .app-shell .po-status-choice.is-completed:has(input:checked) {
  background: var(--surface);
}

[data-theme="dark"] .app-shell .po-modal-status.is-ordered {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .po-modal-status.is-partial {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .po-modal-status.is-completed {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .po-detail-grand-total {
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .product-detail-download:hover {
  background: var(--surface-2);
}

[data-theme="dark"] body.app-ui .sale-detail-chip.is-success {
  background: var(--surface-2);
}

[data-theme="dark"] body.app-ui .sale-detail-chip.is-warning {
  background: var(--surface-2);
}

[data-theme="dark"] body.app-ui .sale-detail-chip.is-danger {
  background: var(--surface-2);
}

[data-theme="dark"] body.app-ui .sale-detail-chip.is-info {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .po-line-remove:hover {
  background: color-mix(in srgb,var(--danger-weak) 72%,var(--surface));
}

[data-theme="dark"] body.app-ui .payment-row-actions .delete_payment {
  background: var(--surface);
}

[data-theme="dark"] body.app-ui .return-location-lock>div {
  background: var(--surface);
}

[data-theme="dark"] body.app-ui .stock-adjustment-total-card {
  background: linear-gradient(145deg,var(--surface),var(--brand-weak));
}

[data-theme="dark"] body.app-ui .balance-sheet-panel.is-liabilities>header>span {
  background: var(--surface-2);
}

[data-theme="dark"] body.app-ui .partner-payment-overview__icon.is-green {
  background: var(--surface-2);
}

[data-theme="dark"] body.app-ui .partner-payment-overview__icon.is-orange {
  background: var(--surface-2);
}

[data-theme="dark"] body.app-ui .partner-payment-overview__icon.is-blue {
  background: var(--surface-2);
}

[data-theme="dark"] body.app-ui .partner-payment-section-head {
  background: var(--surface);
}

[data-theme="dark"] body.app-ui .partner-payment-section-head > span:first-child {
  background: var(--surface-2);
}

[data-theme="dark"] body.app-ui .partner-transaction-amount.is-deposit > span {
  background: var(--surface-2);
}

[data-theme="dark"] body.app-ui .partner-transaction-amount.is-withdrawal > span {
  background: var(--surface-2);
}

[data-theme="dark"] body.app-ui .partner-payment-note {
  color: var(--text-2);
}

[data-theme="dark"] body.app-ui .partner-payment-modal-head > div > span {
  background: var(--surface-2);
}

[data-theme="dark"] body.app-ui .partner-payment-modal-body {
  background: var(--surface);
}

[data-theme="dark"] body.app-ui .partner-payment-form-head > span {
  background: var(--surface-2);
}

[data-theme="dark"] body.app-ui .partner-payment-direction-help {
  color: var(--text-2);
  background: var(--surface-2);
}

[data-theme="dark"] .final-account-overview {
  border: 1px solid var(--ui-border,var(--border));
}

[data-theme="dark"] .final-account-overview>div {
  border-right: 1px solid var(--border);
}

[data-theme="dark"] .final-account-overview__icon.is-blue {
  background: var(--surface-2);
}

[data-theme="dark"] .final-account-overview__icon.is-green {
  background: var(--surface-2);
}

[data-theme="dark"] .final-account-overview__icon.is-orange {
  background: var(--surface-2);
}

[data-theme="dark"] .final-account-overview p {
  color: var(--text-2);
}

[data-theme="dark"] .final-account-overview strong {
  color: var(--text);
}

[data-theme="dark"] .final-account-overview small {
  color: var(--text-3);
}

[data-theme="dark"] .final-account-card {
  border: 1px solid var(--border);
}

[data-theme="dark"] .final-account-section-head {
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

[data-theme="dark"] .final-account-section-head>span:first-child {
  background: var(--surface-2);
}

[data-theme="dark"] .final-account-section-head h2 {
  color: var(--text);
}

[data-theme="dark"] .final-account-section-head p {
  color: var(--text-3);
}

[data-theme="dark"] .final-account-count {
  border: 1px solid var(--border);
  color: var(--text-2);
}

[data-theme="dark"] .final-account-table td {
  color: var(--text-2);
}

[data-theme="dark"] .final-period-cell strong,
[data-theme="dark"] .final-partner-cell strong {
  color: var(--text);
}

[data-theme="dark"] .final-period-cell small,
[data-theme="dark"] .final-partner-cell small {
  color: var(--text-3);
}

[data-theme="dark"] .final-partner-cell>span {
  background: var(--surface-2);
}

[data-theme="dark"] .final-status.is-draft {
  background: var(--surface-2);
}

[data-theme="dark"] .final-status.is-distributed,
[data-theme="dark"] .final-locked {
  background: var(--surface-2);
}

[data-theme="dark"] .final-account-empty strong {
  color: var(--text-2);
}

[data-theme="dark"] .final-account-modal-head {
  border-bottom: 1px solid var(--border);
}

[data-theme="dark"] .final-account-modal-head>div>span {
  background: var(--surface-2);
}

[data-theme="dark"] .final-account-modal-head h4 {
  color: var(--text);
}

[data-theme="dark"] .final-account-modal-head p {
  color: var(--text-3);
}

[data-theme="dark"] .final-account-modal-body {
  background: var(--surface);
}

[data-theme="dark"] .final-account-modal-footer {
  border-top: 1px solid var(--border);
}

[data-theme="dark"] .final-account-form-card {
  border: 1px solid var(--border);
}

[data-theme="dark"] .final-account-form-head {
  border-bottom: 1px solid var(--border);
}

[data-theme="dark"] .final-account-form-head>span {
  background: var(--surface-2);
}

[data-theme="dark"] .final-account-form-head strong {
  color: var(--text);
}

[data-theme="dark"] .final-account-form-head p {
  color: var(--text-3);
}

[data-theme="dark"] .final-account-warning {
  background: var(--surface-2);
}

[data-theme="dark"] .partner-money-input.is-readonly {
  background: var(--surface-2);
}

@media(max-width:760px) {
  [data-theme="dark"] .final-account-overview>div {
    border-bottom: 1px solid var(--border);
  }
}

[data-theme="dark"] .partner-estimate-summary {
  border: 1px solid var(--border, var(--border));
}

[data-theme="dark"] .partner-estimate-summary > div {
  border-left: 1px solid var(--border);
}

[data-theme="dark"] .partner-estimate-summary small,
[data-theme="dark"] .partner-share-estimate small {
  color: var(--text-3);
}

[data-theme="dark"] .partner-estimate-summary strong {
  color: var(--text);
}

[data-theme="dark"] .partner-estimate-summary p,
[data-theme="dark"] .partner-share-estimate p {
  color: var(--text-3);
}

[data-theme="dark"] .partner-estimate-summary__intro > span,
[data-theme="dark"] .partner-estimate-card header > span,
[data-theme="dark"] .partner-share-estimate > div > span {
  background: var(--surface-2);
}

[data-theme="dark"] .partner-estimate-card {
  border: 1px solid var(--border);
}

[data-theme="dark"] .partner-estimate-card header {
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

[data-theme="dark"] .partner-estimate-card header > span.is-orange {
  background: var(--surface-2);
}

[data-theme="dark"] .partner-estimate-card header > span.is-blue {
  background: var(--surface-2);
}

[data-theme="dark"] .partner-estimate-card h2 {
  color: var(--text);
}

[data-theme="dark"] .partner-estimate-card header p {
  color: var(--text-3);
}

[data-theme="dark"] .partner-estimate-card dl > div {
  border-bottom: 1px solid var(--border);
}

[data-theme="dark"] .partner-estimate-card dt {
  color: var(--text-2);
}

[data-theme="dark"] .partner-estimate-card dt small {
  color: var(--text-3);
}

[data-theme="dark"] .partner-estimate-card dd {
  color: var(--text);
}

[data-theme="dark"] .partner-estimate-card footer {
  background: var(--surface);
  border-top: 1px solid var(--border);
  color: var(--text-2);
}

[data-theme="dark"] .partner-estimate-inventory__grid > div {
  border: 1px solid var(--border);
  background: var(--surface);
}

[data-theme="dark"] .partner-estimate-inventory__grid > span {
  color: var(--text-3);
}

[data-theme="dark"] .partner-estimate-inventory__grid small {
  color: var(--text-3);
}

[data-theme="dark"] .partner-estimate-inventory__grid strong {
  color: var(--text);
}

[data-theme="dark"] .partner-estimate-inventory__grid p {
  color: var(--text-3);
}

[data-theme="dark"] .partner-estimate-inventory__grid .is-profit {
  background: var(--surface);
}

[data-theme="dark"] .partner-share-estimate {
  border: 1px solid var(--border);
  background: linear-gradient(100deg,var(--surface),var(--surface));
}

[data-theme="dark"] .partner-share-estimate > div strong {
  color: var(--text);
}

[data-theme="dark"] .partner-share-estimate dt {
  color: var(--text-3);
}

[data-theme="dark"] .partner-estimate-note {
  color: var(--text-3);
}

@media (max-width: 1050px) {
  [data-theme="dark"] .partner-estimate-summary > div:nth-child(3) {
    border-top: 1px solid var(--border);
  }

  [data-theme="dark"] .partner-estimate-summary > div:nth-child(4) {
    border-top: 1px solid var(--border);
  }
}

@media (max-width: 700px) {
  [data-theme="dark"] .partner-estimate-summary > div {
    border-top: 1px solid var(--border);
  }
}

[data-theme="dark"] .partner-assets-summary {
  border: 1px solid var(--border);
}

[data-theme="dark"] .partner-assets-summary>div {
  border-left: 1px solid var(--border);
}

[data-theme="dark"] .partner-assets-summary__intro>span {
  background: var(--surface-2);
}

[data-theme="dark"] .partner-assets-summary small {
  color: var(--text-3);
}

[data-theme="dark"] .partner-assets-summary strong {
  color: var(--text);
}

[data-theme="dark"] .partner-assets-summary p {
  color: var(--text-3);
}

[data-theme="dark"] .partner-assets-summary .is-highlight {
  background: linear-gradient(110deg,var(--surface),var(--surface));
}

[data-theme="dark"] .partner-assets-card {
  border: 1px solid var(--border);
}

[data-theme="dark"] .partner-assets-card .partner-directory-head {
  border-bottom: 1px solid var(--border);
}

[data-theme="dark"] .partner-assets-table td {
  color: var(--text-2);
}

[data-theme="dark"] .partner-asset-identity>span {
  background: var(--surface-2);
}

[data-theme="dark"] .partner-asset-identity strong,
[data-theme="dark"] .partner-asset-location strong,
[data-theme="dark"] .partner-asset-valuation strong {
  color: var(--text);
}

[data-theme="dark"] .partner-asset-identity small,
[data-theme="dark"] .partner-asset-location small,
[data-theme="dark"] .partner-asset-valuation small {
  color: var(--text-3);
}

[data-theme="dark"] .partner-asset-status.is-active {
  background: var(--surface-2);
}

[data-theme="dark"] .partner-asset-status.is-consumed {
  background: var(--surface-2);
}

[data-theme="dark"] .partner-asset-status.is-sold {
  background: var(--surface-2);
}

[data-theme="dark"] .partner-asset-status.is-missing {
  background: var(--surface-2);
}

[data-theme="dark"] .partner-assets-empty strong {
  color: var(--text-2);
}

[data-theme="dark"] .partner-asset-value-help {
  background: var(--surface-2);
  color: var(--text-2);
}

[data-theme="dark"] .partner-rate-input>span {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
}

@media(max-width:900px) {
  [data-theme="dark"] .partner-assets-summary>div:nth-child(3) {
    border-top: 1px solid var(--border);
  }

  [data-theme="dark"] .partner-assets-summary>div:nth-child(4) {
    border-top: 1px solid var(--border);
  }
}

@media(max-width:600px) {
  [data-theme="dark"] .partner-assets-summary>div {
    border-top: 1px solid var(--border);
  }
}

[data-theme="dark"] .manufacturing-nav {
  border: 1px solid var(--border);
  background: var(--surface);
}

[data-theme="dark"] .manufacturing-nav__brand,
[data-theme="dark"] .manufacturing-nav__item {
  color: var(--text-2);
}

[data-theme="dark"] .manufacturing-nav__brand {
  color: var(--text);
}

[data-theme="dark"] .manufacturing-nav__item.is-active {
  border: 1px solid var(--border);
  color: var(--text);
}

[data-theme="dark"] .manufacturing-overview-card {
  border: 1px solid var(--border);
}

[data-theme="dark"] .manufacturing-overview-icon {
  background: var(--surface-2);
}

[data-theme="dark"] .manufacturing-overview-icon.is-blue {
  background: var(--surface-2);
}

[data-theme="dark"] .manufacturing-overview-card strong {
  color: var(--text);
}

[data-theme="dark"] .manufacturing-overview-card p {
  color: var(--text-3);
}

[data-theme="dark"] .manufacturing-price-action.has-selection {
  background: var(--surface);
}

[data-theme="dark"] .manufacturing-toggle-field {
  border: 1px solid var(--border);
}

[data-theme="dark"] .manufacturing-toggle-copy strong {
  color: var(--text);
}

[data-theme="dark"] .manufacturing-toggle-copy small {
  color: var(--text-3);
}

[data-theme="dark"] .manufacturing-table td {
  color: var(--text-2);
}

[data-theme="dark"] .manufacturing-table tbody tr:hover td {
  background: var(--surface);
}

[data-theme="dark"] .manufacturing-recipe-cell>span {
  background: var(--surface-2);
}

[data-theme="dark"] .manufacturing-recipe-cell strong {
  color: var(--text);
}

[data-theme="dark"] .manufacturing-recipe-cell small {
  color: var(--text-3);
}

[data-theme="dark"] .manufacturing-modal__header {
  border-bottom: 1px solid var(--border);
}

[data-theme="dark"] .manufacturing-modal__header>span {
  background: var(--surface-2);
}

[data-theme="dark"] .manufacturing-modal__header h3 {
  color: var(--text);
}

[data-theme="dark"] .manufacturing-modal__header p {
  color: var(--text-3);
}

[data-theme="dark"] .manufacturing-modal__header .close {
  background: var(--surface-2);
  color: var(--text-2);
}

[data-theme="dark"] .manufacturing-modal__footer {
  border-top: 1px solid var(--border);
  background: var(--surface);
}

[data-theme="dark"] .manufacturing-document-head h2 {
  color: var(--text);
}

[data-theme="dark"] .manufacturing-info-card {
  border: 1px solid var(--border);
}

[data-theme="dark"] .manufacturing-info-card small {
  color: var(--text-3);
}

[data-theme="dark"] .manufacturing-info-card strong {
  color: var(--text);
}

[data-theme="dark"] .manufacturing-info-card p {
  color: var(--text-2);
}

[data-theme="dark"] .manufacturing-metric {
  border: 1px solid var(--border);
  background: var(--surface);
}

[data-theme="dark"] .manufacturing-metric span {
  color: var(--text-3);
}

[data-theme="dark"] .manufacturing-metric strong {
  color: var(--text);
}

[data-theme="dark"] .manufacturing-document-section {
  border: 1px solid var(--border);
}

[data-theme="dark"] .manufacturing-document-section__head {
  border-bottom: 1px solid var(--border);
}

[data-theme="dark"] .manufacturing-document-section__head small {
  color: var(--text-3);
}

[data-theme="dark"] .manufacturing-empty {
  color: var(--text-3);
}

[data-theme="dark"] .manufacturing-empty strong {
  color: var(--text-2);
}

[data-theme="dark"] .manufacturing-setting-option {
  border: 1px solid var(--border);
  background: var(--surface);
}

[data-theme="dark"] .manufacturing-setting-option strong {
  color: var(--text);
}

[data-theme="dark"] .manufacturing-setting-option small {
  color: var(--text-3);
}

[data-theme="dark"] .manufacturing-report-stat {
  border: 1px solid var(--border);
}

[data-theme="dark"] .manufacturing-report-stat span {
  color: var(--text-3);
}

[data-theme="dark"] .manufacturing-report-stat strong {
  color: var(--text);
}

[data-theme="dark"] .manufacturing-report-link {
  border: 1px solid var(--border);
  color: var(--text);
}

[data-theme="dark"] .manufacturing-report-link:hover {
  background: var(--surface);
}

[data-theme="dark"] .manufacturing-version {
  color: var(--text-3);
}

[data-theme="dark"] .manufacturing-form-steps {
  border: 1px solid var(--border);
}

[data-theme="dark"] .manufacturing-form-steps>div {
  color: var(--text-3);
}

[data-theme="dark"] .manufacturing-form-steps>div:not(:last-child):after {
  background: var(--surface-3);
}

[data-theme="dark"] .manufacturing-form-steps span {
  background: var(--surface-2);
}

[data-theme="dark"] .manufacturing-form-steps strong {
  color: var(--text);
}

[data-theme="dark"] .manufacturing-form-steps .is-active {
  background: var(--surface);
}

[data-theme="dark"] .manufacturing-quantity-control>span,
[data-theme="dark"] .manufacturing-addon-control>span,
[data-theme="dark"] .manufacturing-line-quantity>span,
[data-theme="dark"] .manufacturing-percent-control>span {
  border: 1px solid var(--border);
  color: var(--text-3);
}

[data-theme="dark"] .manufacturing-recipe-empty {
  border: 1px dashed var(--border);
  background: linear-gradient(180deg,var(--surface),var(--surface));
  color: var(--text-3);
}

[data-theme="dark"] .manufacturing-recipe-empty strong {
  color: var(--text);
}

[data-theme="dark"] .manufacturing-ingredient-table-wrap {
  border: 1px solid var(--border);
}

[data-theme="dark"] .manufacturing-ingredient-table th {
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-3);
}

[data-theme="dark"] .manufacturing-ingredient-table td {
  border-bottom: 1px solid var(--border);
  color: var(--text);
}

[data-theme="dark"] .manufacturing-ingredient-name>span {
  background: var(--surface-2);
}

[data-theme="dark"] .manufacturing-ingredient-table .ingredient_group_row td {
  background: var(--surface);
}

[data-theme="dark"] .manufacturing-ingredient-total-row td {
  background: var(--surface);
}

[data-theme="dark"] .manufacturing-cost-summary {
  border: 1px solid var(--border);
  background: var(--surface);
}

[data-theme="dark"] .manufacturing-cost-summary>div {
  border-top: 1px solid var(--border);
  color: var(--text-3);
}

[data-theme="dark"] .manufacturing-cost-summary>div strong {
  color: var(--text);
}

[data-theme="dark"] .manufacturing-cost-summary .manufacturing-grand-total {
  background: var(--surface-2);
}

[data-theme="dark"] .manufacturing-finalize-option {
  border: 1px solid var(--border);
}

[data-theme="dark"] .manufacturing-finalize-option small {
  color: var(--text-3);
}

[data-theme="dark"] .manufacturing-recipe-product-banner {
  border: 1px solid var(--border);
  background: var(--surface);
}

[data-theme="dark"] .manufacturing-recipe-product-banner>span {
  background: var(--surface-2);
}

[data-theme="dark"] .manufacturing-recipe-product-banner small {
  color: var(--text-3);
}

[data-theme="dark"] .manufacturing-recipe-product-banner strong {
  color: var(--text);
}

[data-theme="dark"] .manufacturing-recipe-search label {
  color: var(--text-2);
}

[data-theme="dark"] .manufacturing-recipe-search small {
  color: var(--text-3);
}

[data-theme="dark"] .manufacturing-search-control {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-3);
}

[data-theme="dark"] .manufacturing-search-control input {
  color: var(--text);
}

[data-theme="dark"] .manufacturing-recipe-lines-wrap {
  border-top: 1px solid var(--border);
}

[data-theme="dark"] .manufacturing-recipe-lines tbody td {
  color: var(--text);
}

[data-theme="dark"] .manufacturing-recipe-ingredient-name>span {
  background: var(--surface-2);
}

[data-theme="dark"] .manufacturing-recipe-ingredient-name strong {
  color: var(--text);
}

[data-theme="dark"] .manufacturing-recipe-empty-row {
  color: var(--text-3);
}

[data-theme="dark"] .manufacturing-recipe-group-head {
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

[data-theme="dark"] .manufacturing-recipe-group-head>div>span {
  background: var(--surface-2);
}

[data-theme="dark"] .manufacturing-recipe-group-head strong {
  color: var(--text);
}

[data-theme="dark"] .manufacturing-recipe-group-head small {
  color: var(--text-3);
}

[data-theme="dark"] .manufacturing-recipe-cost-summary {
  border: 1px solid var(--border);
  background: var(--surface);
}

[data-theme="dark"] .manufacturing-recipe-cost-summary>div {
  border-top: 1px solid var(--border);
  color: var(--text-2);
}

[data-theme="dark"] .manufacturing-recipe-cost-summary>div strong {
  color: var(--text);
}

[data-theme="dark"] .manufacturing-recipe-cost-summary .is-total {
  background: var(--surface-2);
}

[data-theme="dark"] .manufacturing-document-date small {
  color: var(--text-3);
}

[data-theme="dark"] .manufacturing-document-date strong {
  color: var(--text);
}

[data-theme="dark"] .manufacturing-document-date span {
  color: var(--text-3);
}

[data-theme="dark"] .manufacturing-detail-list dt {
  color: var(--text-3);
}

[data-theme="dark"] .manufacturing-detail-list dd {
  color: var(--text);
}

[data-theme="dark"] .manufacturing-status {
  background: var(--surface-2);
  color: var(--text-2);
}

[data-theme="dark"] .manufacturing-status.is-final,
[data-theme="dark"] .manufacturing-status.is-received,
[data-theme="dark"] .manufacturing-status.is-completed {
  background: var(--surface-2);
}

[data-theme="dark"] .manufacturing-status.is-pending {
  background: var(--surface-2);
}

[data-theme="dark"] .manufacturing-production-view-table th {
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-3);
}

[data-theme="dark"] .manufacturing-production-view-table td {
  border-bottom: 1px solid var(--border);
  color: var(--text-2);
}

[data-theme="dark"] .manufacturing-production-view-table td strong {
  color: var(--text);
}

[data-theme="dark"] .manufacturing-production-view-table td small {
  color: var(--text-3);
}

[data-theme="dark"] .manufacturing-production-view-table tr.is-group td {
  background: var(--surface-2);
}

[data-theme="dark"] .manufacturing-production-totals {
  border: 1px solid var(--border);
}

[data-theme="dark"] .manufacturing-production-totals>div {
  border-bottom: 1px solid var(--border);
  color: var(--text-2);
}

[data-theme="dark"] .manufacturing-production-totals strong {
  color: var(--text);
}

[data-theme="dark"] .manufacturing-production-totals .is-total {
  background: var(--surface-2);
}

@media print {
  [data-theme="dark"] .manufacturing-production-files a {
    color: var(--text);
  }
}

[data-theme="dark"] .manufacturing-modal-section {
  border: 1px solid var(--border);
  background: var(--surface);
}

[data-theme="dark"] .manufacturing-section-head {
  border-bottom: 1px solid var(--border);
}

[data-theme="dark"] .manufacturing-section-head>span {
  background: var(--surface-2);
}

[data-theme="dark"] .manufacturing-section-head strong {
  color: var(--text);
}

[data-theme="dark"] .manufacturing-section-head p {
  color: var(--text-3);
}

[data-theme="dark"] .manufacturing-choice-field>.flabel {
  color: var(--text-2);
}

[data-theme="dark"] .manufacturing-choice-field .field-help {
  color: var(--text-3);
}

[data-theme="dark"] .manufacturing-select-dropdown .select2-results__option[aria-disabled=true] {
  color: var(--text-3);
}

[data-theme="dark"] .manufacturing-nav__brand-icon {
  background: var(--surface-2);
}

[data-theme="dark"] .manufacturing-autocomplete .manufacturing-product-result__content {
  color: var(--text);
}

[data-theme="dark"] .manufacturing-product-result__icon {
  background: var(--surface-2);
}

[data-theme="dark"] .manufacturing-product-result__content small {
  color: var(--text-3);
}

[data-theme="dark"] /* Manufacturing: quantity and unit are one compound field,
[data-theme="dark"] not two stacked controls. */
body.app-ui .manufacturing-quantity-control.has-unit,
[data-theme="dark"] body.app-ui .manufacturing-line-quantity {
  border: 1px solid var(--border);
  background: var(--surface);
}

[data-theme="dark"] body.app-ui .manufacturing-quantity-control.has-unit>span,
[data-theme="dark"] body.app-ui .manufacturing-line-quantity>span {
  background: var(--surface);
}

[data-theme="dark"] body.app-ui .manufacturing-quantity-control.has-unit>span.is-select:hover,
[data-theme="dark"] body.app-ui .manufacturing-line-quantity>span.is-select:hover {
  background: var(--surface-2);
}

[data-theme="dark"] /* Manufacturing report: preserve the original totals while presenting them as a compact report. */
body.app-ui .manufacturing-report-document {
  border: 1px solid var(--border);
}

[data-theme="dark"] body.app-ui .manufacturing-report-page .manufacturing-document-meta-copy {
  border: 1px solid var(--border);
  background: var(--surface);
}

[data-theme="dark"] body.app-ui .manufacturing-report-page .manufacturing-document-meta-copy>div+div {
  border-top: 1px solid var(--border);
}

[data-theme="dark"] body.app-ui .manufacturing-report-page .manufacturing-document-meta-copy small {
  color: var(--text-3);
}

[data-theme="dark"] body.app-ui .manufacturing-report-page .manufacturing-document-meta-copy strong {
  color: var(--text);
}

[data-theme="dark"] body.app-ui .manufacturing-report-page .manufacturing-report-stat__icon {
  background: var(--surface-2);
}

[data-theme="dark"] body.app-ui .manufacturing-report-page .manufacturing-report-stat__icon.is-amber {
  background: var(--surface-2);
}

[data-theme="dark"] body.app-ui .manufacturing-report-page .manufacturing-report-stat__icon.is-blue {
  background: var(--surface-2);
}

[data-theme="dark"] body.app-ui .manufacturing-report-page .manufacturing-report-stat>small {
  color: var(--text-3);
}

[data-theme="dark"] /* ---- All Sales listing (sells-page) ---- */
body.app-ui .sells-page .sells-stage-board,
[data-theme="dark"] body.app-ui .sells-page .sells-filter-card,
[data-theme="dark"] body.app-ui .sells-page .sells-list-card {
  border: 1px solid var(--border);
}

[data-theme="dark"] body.app-ui .sells-page .sells-stage-intro {
  border-right: 1px solid var(--border);
  background: var(--surface);
}

[data-theme="dark"] body.app-ui .sells-page .sells-stage-intro__icon {
  background: var(--surface-2);
}

[data-theme="dark"] body.app-ui .sells-page .sells-eyebrow {
  color: var(--text-3);
}

[data-theme="dark"] body.app-ui .sells-page .sells-stage-intro strong {
  color: var(--text);
}

[data-theme="dark"] body.app-ui .sells-page .sells-stage-intro small {
  color: var(--text-3);
}

[data-theme="dark"] body.app-ui .sells-page .sells-stage {
  border-right: 1px solid var(--border);
}

[data-theme="dark"] body.app-ui .sells-page .sells-stage:hover {
  background: var(--surface);
}

[data-theme="dark"] body.app-ui .sells-page .sells-stage strong {
  color: var(--text);
}

[data-theme="dark"] body.app-ui .sells-page .sells-stage small {
  color: var(--text-3);
}

[data-theme="dark"] body.app-ui .sells-page .sells-stage__number.is-green {
  background: var(--surface-2);
}

[data-theme="dark"] body.app-ui .sells-page .sells-stage__number.is-amber {
  background: var(--danger-weak);
}

[data-theme="dark"] body.app-ui .sells-page .sells-stage__number.is-blue {
  background: var(--surface-2);
}

[data-theme="dark"] body.app-ui .sells-page .sells-stage__number.is-red {
  background: var(--surface-2);
}

[data-theme="dark"] body.app-ui .sells-page .sells-stage.is-active[data-payment-status="paid"] {
  background: var(--surface);
}

[data-theme="dark"] body.app-ui .sells-page .sells-stage.is-active[data-payment-status="partial"] {
  background: var(--surface);
}

[data-theme="dark"] body.app-ui .sells-page .sells-stage.is-active[data-payment-status="due"] {
  background: var(--surface-2);
}

[data-theme="dark"] body.app-ui .sells-page .sells-stage.is-active[data-payment-status="overdue"] {
  background: var(--surface-2);
}

[data-theme="dark"] body.app-ui .sells-page .sells-filter-card__header {
  border-bottom: 1px solid var(--border);
}

[data-theme="dark"] body.app-ui .sells-page .sells-section-heading__icon {
  background: var(--surface-2);
}

[data-theme="dark"] body.app-ui .sells-page .sells-section-heading strong {
  color: var(--text);
}

[data-theme="dark"] body.app-ui .sells-page .sells-section-heading small {
  color: var(--text-3);
}

[data-theme="dark"] body.app-ui .sells-page .sells-clearable-range>button {
  border: 1px solid var(--border);
  color: var(--text-2);
}

[data-theme="dark"] body.app-ui .sells-page .sells-clearable-range>button:hover {
  background: var(--surface-2);
}

[data-theme="dark"] body.app-ui .sells-page .sells-invoice-cell__icon {
  background: var(--surface-2);
}

[data-theme="dark"] body.app-ui .sells-page .sells-invoice-cell strong {
  color: var(--text);
}

[data-theme="dark"] body.app-ui .sells-page .sells-invoice-cell small {
  color: var(--text-3);
}

[data-theme="dark"] body.app-ui .sells-page .sells-date-cell strong {
  color: var(--text);
}

[data-theme="dark"] body.app-ui .sells-page .sells-party-cell strong {
  color: var(--text);
}

[data-theme="dark"] body.app-ui .sells-page .sells-party-cell small {
  color: var(--text-2);
}

[data-theme="dark"] body.app-ui .sells-page .sells-party-cell .sells-location {
  color: var(--text-3);
}

[data-theme="dark"] body.app-ui .sells-page .sells-payment-stack small {
  color: var(--text-3);
}

[data-theme="dark"] body.app-ui .sells-page .sells-payment-stack small strong {
  color: var(--text);
}

[data-theme="dark"] body.app-ui .sells-page .sells-ship-stack small {
  color: var(--text-3);
}

[data-theme="dark"] body.app-ui .sells-page .sells-ship-stack small strong {
  color: var(--text);
}

[data-theme="dark"] body.app-ui .sells-page .sells-ship-stack .sells-ship-note {
  border-top-color: var(--border-2);
}

[data-theme="dark"] body.app-ui .sells-page .sells-ship-stack .sells-ship-note strong {
  color: var(--text);
}

[data-theme="dark"] body.app-ui .sells-page .sells-ship-none {
  color: var(--text-3);
}

[data-theme="dark"] body.app-ui .sells-page .sells-staff-stack,
[data-theme="dark"] body.app-ui .sells-page .sells-agent-stack {
  color: var(--text);
}

[data-theme="dark"] body.app-ui .sells-page .sells-staff-table {
  color: var(--text-3);
}

[data-theme="dark"] body.app-ui .sells-page .sells-agent-stack small {
  color: var(--text-3);
}

[data-theme="dark"] body.app-ui .sells-page .sells-agent-stack small .agent-commission {
  color: var(--text);
}

[data-theme="dark"] body.app-ui .sells-page .sells-amount-cell {
  color: var(--text);
}

[data-theme="dark"] body.app-ui .sells-page .sells-due-stack small {
  color: var(--text-3);
}

[data-theme="dark"] body.app-ui .sells-page .sells-user-cell>span:first-child {
  background: var(--surface-2);
  color: var(--text-2);
}

[data-theme="dark"] body.app-ui .sells-page .sells-user-cell strong {
  color: var(--text);
}

[data-theme="dark"] body.app-ui .sells-page .sells-user-cell small {
  color: var(--text-3);
}

[data-theme="dark"] body.app-ui .sells-page .sells-summary-strip {
  border-top: 1px solid var(--border);
  background: var(--surface);
}

[data-theme="dark"] body.app-ui .sells-page .sells-summary-item>span {
  color: var(--text-3);
}

[data-theme="dark"] body.app-ui .sells-page .sells-summary-item>strong {
  color: var(--text);
}

@media (max-width:1280px) {
  [data-theme="dark"] body.app-ui .sells-page .sells-stage-intro {
    border-bottom: 1px solid var(--border);
  }
}

@media (max-width:640px) {
  [data-theme="dark"] body.app-ui .sells-page .sells-stage {
    border-top: 1px solid var(--border);
  }
}

[data-theme="dark"] body.app-ui .invoice-url-modal {
  border: 1px solid var(--border);
}

[data-theme="dark"] body.app-ui .invoice-url-header {
  border-bottom: 1px solid var(--border);
}

[data-theme="dark"] body.app-ui .invoice-url-header__icon {
  background: var(--surface-2);
}

[data-theme="dark"] body.app-ui .invoice-url-header h4 {
  color: var(--text);
}

[data-theme="dark"] body.app-ui .invoice-url-header p {
  color: var(--text-3);
}

[data-theme="dark"] body.app-ui .invoice-url-header p strong {
  color: var(--text);
}

[data-theme="dark"] body.app-ui .invoice-url-close {
  color: var(--text-2);
  background: var(--surface-2);
}

[data-theme="dark"] body.app-ui .invoice-url-close:hover {
  background: var(--surface-2);
  color: var(--text);
}

[data-theme="dark"] body.app-ui .invoice-url-body>label {
  color: var(--text-2);
}

[data-theme="dark"] body.app-ui .invoice-url-control>button {
  border: 1px solid var(--border);
  color: var(--text);
}

[data-theme="dark"] body.app-ui .invoice-url-control>button:hover {
  background: var(--surface-2);
}

[data-theme="dark"] body.app-ui .invoice-url-body small {
  color: var(--text-3);
}

[data-theme="dark"] body.app-ui .invoice-url-footer {
  border-top: 1px solid var(--border);
}

[data-theme="dark"] body.app-ui .draft-list-page .sells-invoice-cell .label {
  color: var(--text-2);
}

[data-theme="dark"] body.app-ui .draft-list-page .sells-stage.is-active[data-sub-status="draft"] {
  background: var(--surface-2);
}

[data-theme="dark"] body.app-ui .draft-list-page .sells-stage.is-active[data-sub-status="proforma"] {
  background: var(--surface);
}

[data-theme="dark"] body.app-ui .draft-list-page .sells-stage.is-active[data-sub-status="quotation"] {
  background: var(--surface);
}

[data-theme="dark"] body.app-ui .sell-return-page .sell-return-note {
  color: var(--text-2);
}

[data-theme="dark"] body.app-ui .sell-return-page .sells-invoice-cell__icon {
  background: var(--surface-2);
}

[data-theme="dark"] body.app-ui .shipments-page .sells-stage__number.is-violet {
  background: var(--surface-2);
}

[data-theme="dark"] body.app-ui .shipments-page .sells-stage.is-active {
  background: var(--surface);
}

[data-theme="dark"] body.app-ui .shipments-page .shipments-status-cell {
  color: var(--text);
}

[data-theme="dark"] body.app-ui .discount-page .discount-name-cell {
  color: var(--text);
}

[data-theme="dark"] body.app-ui .discount-page .discount-scope {
  color: var(--text-3);
}

[data-theme="dark"] body.app-ui .discount-page .discount-scope>strong {
  color: var(--text);
}

[data-theme="dark"] body.app-ui .discount-page .discount-scope-all {
  color: var(--text-3);
}

[data-theme="dark"] body.app-ui .discount-page .discount-activate-action {
  border-color: color-mix(in srgb,#159a4d 30%,var(--border));
}

[data-theme="dark"] body.app-ui .discount-page .discount-selection-bar {
  border-top: 1px solid var(--border);
  background: var(--surface);
}

[data-theme="dark"] body.app-ui .discount-page .discount-deactivate-action:hover {
  background: var(--danger-weak);
}

[data-theme="dark"] body.app-ui .discount-modal {
  border: 1px solid var(--border);
}

[data-theme="dark"] body.app-ui .discount-modal-header {
  border-bottom: 1px solid var(--border);
}

[data-theme="dark"] body.app-ui .discount-modal-header__icon {
  background: var(--surface-2);
}

[data-theme="dark"] body.app-ui .discount-modal-header h4 {
  color: var(--text);
}

[data-theme="dark"] body.app-ui .discount-modal-header p {
  color: var(--text-3);
}

[data-theme="dark"] body.app-ui .discount-modal-close {
  color: var(--text-2);
  background: var(--surface-2);
}

[data-theme="dark"] body.app-ui .discount-modal-close:hover {
  background: var(--surface-2);
  color: var(--text);
}

[data-theme="dark"] body.app-ui .discount-field-grid label {
  color: var(--text-2);
}

[data-theme="dark"] body.app-ui .discount-field-hint {
  color: var(--text-3);
}

[data-theme="dark"] body.app-ui .discount-toggle {
  border: 1px solid var(--border);
  background: var(--surface);
}

[data-theme="dark"] body.app-ui .discount-modal-footer {
  border-top: 1px solid var(--border);
}

[data-theme="dark"] .app-shell .crm-stat-tile__icon.is-blue {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .crm-stat-tile__icon.is-amber {
  background: var(--danger-weak);
}

[data-theme="dark"] .app-shell .crm-stat-tile__icon.is-violet {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .crm-campaign-channel.is-email {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .crm-campaign-channel.is-sms {
  background: var(--surface-2);
}

[data-theme="dark"] body.app-ui .crm-campaign-view__icon.is-email {
  background: var(--surface-2);
}

[data-theme="dark"] body.app-ui .crm-campaign-view__status.is-draft {
  background: var(--surface-2);
}

[data-theme="dark"] body.app-ui .crm-campaign-view__subject>span {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .crm-advance-choice-card__icon.is-recurring {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .crm-status-chip.is-blue>span {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .crm-status-chip.is-amber>span {
  background: var(--danger-weak);
}

[data-theme="dark"] .app-shell .crm-status-chip.is-red>span {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .crm-status-chip.is-gray>span {
  background: var(--surface-2);
  color: var(--text-2);
}

[data-theme="dark"] .app-shell .crm-meter {
  background: var(--surface-3,var(--surface-2));
}

[data-theme="dark"] .app-shell .crm-kpi-ic.is-blue {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .crm-kpi-ic.is-amber {
  background: var(--danger-weak);
}

[data-theme="dark"] .app-shell .crm-kpi-ic.is-violet {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .crm-kpi-chip.is-warn {
  background: var(--danger-weak);
}

[data-theme="dark"] .app-shell .repair-chart-card>header>span.is-blue {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .repair-chart-card>header>span.is-amber {
  background: var(--danger-weak);
}

[data-theme="dark"] /* Credit note receipt (sell return),
[data-theme="dark"] printed from #receipt_section. */
body.app-ui .sell-return-receipt {
  color: var(--text);
}

[data-theme="dark"] body.app-ui .sell-return-receipt .credit-note-lines thead td {
  color: var(--text);
}

[data-theme="dark"] body.app-ui .sell-return-receipt .credit-note-lines tbody td {
  border-bottom: 1px solid var(--border);
}

[data-theme="dark"] body.app-ui .sell-return-receipt .credit-note-grand-total>th,
[data-theme="dark"] body.app-ui .sell-return-receipt .credit-note-grand-total>td {
  color: var(--text);
}

[data-theme="dark"] body.app-ui .sell-return-receipt hr {
  border-top: 1px solid var(--border);
}

[data-theme="dark"] /* Repair customer copy receipt. It is printed from #receipt_section,
[data-theme="dark"] so the rules are
   scoped to the receipt's own wrapper and apply on screen and on paper alike. */
body.app-ui .repair-customer-copy {
  color: var(--text);
}

[data-theme="dark"] body.app-ui .repair-customer-copy hr {
  border-top: 1px solid var(--border);
}

[data-theme="dark"] .app-shell .crm-stage-chip.is-int {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .crm-stage-chip.is-done {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .crm-followup-next.is-soon {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .crm-lead-stat-ic.is-blue {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .crm-lead-stat-ic.is-amber {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .crm-kanban-chip.is-tg {
  background: var(--blue-weak,var(--surface-2));
}

[data-theme="dark"] .app-shell .crm-kanban-chip.is-soon {
  background: var(--surface-2);
}

[data-theme="dark"] body.app-ui .crm-followup-log-view__type-icon.is-call {
  background: var(--surface-2);
}

[data-theme="dark"] body.app-ui .crm-followup-log-view__type-icon.is-sms {
  background: var(--surface-2);
}

[data-theme="dark"] body.app-ui .crm-followup-log-view__type-icon.is-email {
  background: var(--surface-2);
}

[data-theme="dark"] body.app-ui .crm-followup-log-view__type-icon.is-meeting {
  background: var(--surface-2);
}

[data-theme="dark"] body.app-ui .crm-followup-log-view__badge.is-call {
  background: var(--surface-2);
}

[data-theme="dark"] body.app-ui .crm-followup-log-view__badge.is-sms {
  background: var(--surface-2);
}

[data-theme="dark"] body.app-ui .crm-followup-log-view__badge.is-email {
  background: var(--surface-2);
}

[data-theme="dark"] body.app-ui .crm-followup-log-view__badge.is-meeting {
  background: var(--surface-2);
}

[data-theme="dark"] body.app-ui .crm-followup-log-window__point>span {
  background: var(--surface-2);
}

[data-theme="dark"] body.app-ui .crm-followup-log-window__point.is-end>span {
  background: var(--surface-2);
}

[data-theme="dark"] body.app-ui .crm-followup-view-status.is-completed {
  background: var(--surface-2);
}

[data-theme="dark"] body.app-ui .crm-followup-view-status.is-open {
  background: var(--surface-2);
}

[data-theme="dark"] body.app-ui .crm-followup-view-modal .fl-dot--call {
  background: var(--surface-2);
}

[data-theme="dark"] body.app-ui .crm-followup-view-modal .fl-dot--sms {
  background: var(--surface-2);
}

[data-theme="dark"] body.app-ui .crm-followup-view-modal .fl-dot--email {
  background: var(--surface-2);
}

[data-theme="dark"] body.app-ui .crm-followup-view-modal .fl-dot--meeting {
  background: var(--surface-2);
}

[data-theme="dark"] body.app-ui .crm-followup-view-modal .fl-actions .fl-edited {
  background: var(--surface-2);
}

[data-theme="dark"] body.app-ui .crm-followup-view-modal .fl-action--delete:hover {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .crm-report-metric.is-blue {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .crm-report-metric.is-green {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .crm-report-metric.is-red {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .crm-report-metric.is-teal {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .profile-module-table-wrap tbody tr:hover td,
[data-theme="dark"] .app-shell .profile-module-table tbody tr:hover td,
[data-theme="dark"] .app-shell .profile-tab-content table.dataTable tbody tr:hover td {
  background: var(--surface);
}

[data-theme="dark"] .app-shell .profile-ledger-statement .ledger-letterhead {
  background: linear-gradient(180deg,var(--surface),var(--surface));
}

[data-theme="dark"] .app-shell .profile-ledger-statement #ledger_table tbody tr:hover td {
  background: var(--surface);
}

[data-theme="dark"] .app-shell .profile-reward-balance {
  background: var(--surface);
}

[data-theme="dark"] .app-shell .profile-reward-balance>span {
  background: var(--danger-weak);
}

[data-theme="dark"] .app-shell .report-area>header {
  background: linear-gradient(90deg,var(--surface),var(--surface));
}

[data-theme="dark"] /* Payslip ------------------------------------------------------------------ */

/* Deliberately unscoped. printThis clones the modal body into an iframe with importCSS on
   and importStyle off: this file comes along,
[data-theme="dark"] an inline style element in the view does not,
[data-theme="dark"] and .app-shell is not an ancestor in there. The borders below used to live in such a
   block,
[data-theme="dark"] which is why the payslip printed with no borders at all. Colours are literal for
   the same reason — the iframe inherits none of the theme tokens. */
#payroll-view {
  color: var(--text);
}

[data-theme="dark"] /* Twenty-nine bold runs on one page. Every label was <strong> and every value was not,
[data-theme="dark"] which is backwards — you scan a payslip for its values — and with half the page bold,
[data-theme="dark"] nothing on it stood out. Labels are quiet now; bold is spent on the few things that
   should carry it: the ledger headings,
[data-theme="dark"] the two totals and net pay. */
#payroll-view strong {
  color: var(--text-2);
}

[data-theme="dark"] #payroll-view .payslip-ledger-head strong,
[data-theme="dark"] #payroll-view .payslip-line strong,
[data-theme="dark"] #payroll-view .payslip-net-line strong {
  color: var(--text);
}

[data-theme="dark"] #payroll-view .payslip-masthead strong {
  color: var(--text);
}

[data-theme="dark"] /* vertical-align matters here: the earnings and deductions cells are different heights,
[data-theme="dark"] and
   cells default to middle,
[data-theme="dark"] so a single deduction sat halfway down its cell instead of level
   with the first earning beside it. The padding is what kept the text off the rules. */

/* The payment table is nested inside a cell,
[data-theme="dark"] so the border rule above — which is
   deliberately direct-child,
[data-theme="dark"] to keep it off nested content — never reached it,
[data-theme="dark"] and it
   printed as unruled columns running into each other. */
#payroll-view .payslip-ledger-head {
  background: var(--surface-2);
}

[data-theme="dark"] #payroll-view .table th {
  background: var(--surface-2);
}

[data-theme="dark"] /* Payroll group document --------------------------------------------------- */

/* Unscoped for the same reason as the payslip: printThis clones this node into an iframe
   with importCSS on and importStyle off,
[data-theme="dark"] so this file travels but .app-shell is not an
   ancestor in there and literal colours are the only ones that survive. */
.payroll-group-doc {
  color: var(--text);
}

[data-theme="dark"] .payroll-group-masthead p {
  color: var(--text-2);
}

[data-theme="dark"] .payroll-group-meta p span {
  color: var(--text-2);
}

[data-theme="dark"] .payroll-group-table thead th {
  background: var(--surface-2);
  color: var(--text-2);
}

[data-theme="dark"] .payroll-group-table tfoot th,
[data-theme="dark"] .payroll-group-table tfoot td {
  background: var(--surface-2);
}

[data-theme="dark"] .payroll-group-bank dt {
  color: var(--text-2);
}

[data-theme="dark"] .payroll-group-muted {
  color: var(--text-3);
}

[data-theme="dark"] .app-shell .hrm-seg.is-warnish.is-on {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .hms-report-group.is-warn>header .section-icon {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .chat-drop__inner {
  border: 2px dashed var(--border-2);
}

[data-theme="dark"] .app-shell .up-ring {
  background: conic-gradient(var(--surface) var(--pct,0%),rgba(255,255,255,.3) 0);
}

[data-theme="dark"] .chat-modal__spin {
  border-top-color: var(--border-2);
}

[data-theme="dark"] .app-shell .settings-nav {
  border: 1px solid var(--border);
}

[data-theme="dark"] .app-shell .settings-nav-head {
  background: linear-gradient(145deg,var(--surface) 0%,var(--surface) 100%);
}

[data-theme="dark"] .app-shell .settings-nav-mark {
  border: 1px solid var(--border);
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .settings-nav .list-group-item {
  color: var(--text-2);
}

[data-theme="dark"] .app-shell .settings-nav .list-group-item.active {
  background: var(--surface-2);
  color: var(--text);
}

[data-theme="dark"] .app-shell .settings-workspace {
  border: 1px solid var(--border);
}

[data-theme="dark"] .app-shell .settings-workspace-head {
  background: linear-gradient(90deg,var(--surface) 0%,var(--surface) 72%,var(--surface) 100%);
}

[data-theme="dark"] .app-shell .settings-workspace-icon {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .settings-workspace-head .settings-save-state {
  border: 1px solid var(--border);
  background: var(--surface);
}

[data-theme="dark"] .app-shell .settings-save-state.is-dirty {
  background: var(--surface);
}

[data-theme="dark"] .app-shell .settings-section-head h3 {
  color: var(--text);
}

[data-theme="dark"] .app-shell .settings-section-head p {
  color: var(--text-3);
}

[data-theme="dark"] .app-shell .settings-section-icon {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .settings-section-icon.is-blue {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .settings-section-icon.is-amber {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .settings-section-icon.is-neutral {
  color: var(--text-2);
}

[data-theme="dark"] .app-shell .settings-logo-card {
  border: 1px solid var(--border);
  background: linear-gradient(145deg,var(--surface) 0%,var(--surface) 100%);
}

[data-theme="dark"] .app-shell .settings-logo-preview {
  border: 1px solid var(--border);
  color: var(--text-3);
}

[data-theme="dark"] .app-shell .settings-logo-preview.has-new-logo {
  border-color: var(--border);
}

[data-theme="dark"] .app-shell .settings-logo-preview span {
  background: var(--surface-2);
  color: var(--text-3);
}

[data-theme="dark"] .app-shell .settings-logo-heading strong {
  color: var(--text);
}

[data-theme="dark"] .app-shell .settings-field > label {
  color: var(--text-2);
}

[data-theme="dark"] .app-shell .settings-pane .form-control {
  border-color: var(--border);
  background: var(--surface);
}

[data-theme="dark"] .app-shell .settings-advanced {
  border: 1px solid var(--border);
  background: var(--surface);
}

[data-theme="dark"] .app-shell .settings-advanced summary strong {
  color: var(--text-2);
}

[data-theme="dark"] .app-shell .settings-advanced-chevron {
  color: var(--text-3);
}

[data-theme="dark"] .app-shell .settings-expiry-card {
  border: 1px solid var(--border);
  background: var(--surface);
}

[data-theme="dark"] .app-shell .settings-expiry-enable .checkbox label {
  border: 1px solid var(--border);
}

[data-theme="dark"] .app-shell .settings-expiry-enable .checkbox strong {
  color: var(--text-2);
}

[data-theme="dark"] .app-shell .settings-control-inline .settings-control-suffix {
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-2);
}

[data-theme="dark"] .app-shell .settings-product-option .checkbox label,
[data-theme="dark"] .app-shell .settings-sale-option .checkbox label {
  border: 1px solid var(--border);
  background: var(--surface);
}

[data-theme="dark"] .app-shell .settings-product-option .checkbox label:hover,
[data-theme="dark"] .app-shell .settings-sale-option .checkbox label:hover {
  border-color: var(--border);
  background: var(--surface);
}

[data-theme="dark"] .app-shell .settings-product-option .checkbox:has(input:checked) label,
[data-theme="dark"] .app-shell .settings-product-option .checkbox:has(.checked) label,
[data-theme="dark"] .app-shell .settings-sale-option .checkbox:has(input:checked) label,
[data-theme="dark"] .app-shell .settings-sale-option .checkbox:has(.checked) label {
  border-color: var(--border);
  background: var(--surface);
}

[data-theme="dark"] .app-shell .settings-sale-required-option,
[data-theme="dark"] .app-shell .settings-payment-link-toggle {
  border: 1px solid var(--border);
  background: var(--surface);
}

[data-theme="dark"] .app-shell .settings-sale-required-option strong,
[data-theme="dark"] .app-shell .settings-payment-link-toggle strong {
  color: var(--text-2);
}

[data-theme="dark"] .app-shell .settings-sale-required-option small,
[data-theme="dark"] .app-shell .settings-payment-link-toggle small {
  color: var(--text-3);
}

[data-theme="dark"] .app-shell .settings-payment-link-toggle {
  background: var(--surface);
}

[data-theme="dark"] .app-shell .settings-payment-provider {
  border: 1px solid var(--border);
}

[data-theme="dark"] .app-shell .settings-payment-provider>header {
  background: var(--surface);
}

[data-theme="dark"] .app-shell .settings-payment-provider>header strong {
  color: var(--text);
}

[data-theme="dark"] .app-shell .settings-provider-icon.is-razorpay {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .settings-provider-icon.is-stripe {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .settings-denomination-preview {
  border: 1px solid var(--border);
  background: linear-gradient(145deg,var(--surface),var(--surface-2));
}

[data-theme="dark"] .app-shell .settings-denomination-preview-head>span {
  color: var(--text-2);
}

[data-theme="dark"] .app-shell .settings-denomination-preview-head small {
  color: var(--text-3);
}

[data-theme="dark"] .app-shell .settings-denomination-chip {
  border: 1px solid var(--border);
}

[data-theme="dark"] .app-shell .settings-payment-strict-card {
  border: 1px solid var(--border);
  background: var(--surface);
}

[data-theme="dark"] .app-shell .settings-payment-strict-card:has(input:checked),
[data-theme="dark"] .app-shell .settings-payment-strict-card:has(.checked) {
  border-color: var(--border);
  background: var(--surface);
}

[data-theme="dark"] .app-shell .settings-payment-strict-icon {
  background: var(--surface-2);
  color: var(--text-2);
}

[data-theme="dark"] .app-shell .settings-payment-strict-badge {
  border: 1px solid var(--border);
  color: var(--text-3);
}

[data-theme="dark"] .app-shell .settings-reward-toggle {
  border: 1px solid var(--border);
  background: linear-gradient(145deg,var(--surface),var(--surface));
}

[data-theme="dark"] .app-shell .settings-reward-toggle:has(input:checked),
[data-theme="dark"] .app-shell .settings-reward-toggle:has(.checked) {
  border-color: var(--border);
}

[data-theme="dark"] .app-shell .settings-reward-hero-icon {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .settings-reward-status {
  border: 1px solid var(--border);
  color: var(--text-3);
}

[data-theme="dark"] .app-shell .settings-reward-program:has(#enable_rp:checked) .settings-reward-status {
  border-color: var(--border);
  background: var(--surface);
}

[data-theme="dark"] .app-shell .settings-reward-rate-card {
  border: 1px solid var(--border);
  background: var(--surface);
}

[data-theme="dark"] .app-shell .settings-reward-rate-icon {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .settings-reward-expiry-card {
  border: 1px solid var(--border);
  background: var(--surface);
}

[data-theme="dark"] .app-shell .settings-reward-expiry-control>.form-control:last-child {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .settings-reward-expiry-note {
  background: var(--surface);
}

[data-theme="dark"] .app-shell .settings-modules-summary {
  border: 1px solid var(--border);
  background: linear-gradient(145deg,var(--surface),var(--surface-2));
}

[data-theme="dark"] .app-shell .settings-modules-summary-icon {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .settings-modules-summary>div>strong {
  color: var(--text);
}

[data-theme="dark"] .app-shell .settings-modules-summary>div>small {
  color: var(--text-3);
}

[data-theme="dark"] .app-shell .settings-modules-count {
  border: 1px solid var(--border);
}

[data-theme="dark"] .app-shell .settings-modules-count>small {
  color: var(--text-3);
}

[data-theme="dark"] .app-shell .settings-module-card .checkbox label {
  border: 1px solid var(--border);
  background: var(--surface);
}

[data-theme="dark"] .app-shell .settings-module-card .checkbox label:hover {
  border-color: var(--border);
  background: var(--surface);
}

[data-theme="dark"] .app-shell .settings-module-card:has(input:checked) .checkbox label,
[data-theme="dark"] .app-shell .settings-module-card:has(.checked) .checkbox label {
  border-color: var(--border);
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .settings-module-icon {
  background: var(--surface-2);
  color: var(--text-3);
}

[data-theme="dark"] .app-shell .settings-module-card:has(input:checked) .settings-module-icon,
[data-theme="dark"] .app-shell .settings-module-card:has(.checked) .settings-module-icon {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .settings-module-state {
  border: 1px solid var(--border);
  color: var(--text-3);
}

[data-theme="dark"] .app-shell .settings-module-card:has(input:checked) .settings-module-state,
[data-theme="dark"] .app-shell .settings-module-card:has(.checked) .settings-module-state {
  border-color: var(--border);
}

[data-theme="dark"] .app-shell .settings-modules-empty {
  color: var(--text-3);
}

[data-theme="dark"] .app-shell .settings-labels-summary {
  border: 1px solid var(--border);
  background: linear-gradient(145deg,var(--surface),var(--surface-2));
}

[data-theme="dark"] .app-shell .settings-labels-summary-icon {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .settings-labels-summary>div>strong {
  color: var(--text);
}

[data-theme="dark"] .app-shell .settings-labels-summary>div>small {
  color: var(--text-3);
}

[data-theme="dark"] .app-shell .settings-labels-count {
  border: 1px solid var(--border);
}

[data-theme="dark"] .app-shell .settings-labels-count>small {
  color: var(--text-3);
}

[data-theme="dark"] .app-shell .settings-label-group {
  border: 1px solid var(--border);
}

[data-theme="dark"] .app-shell .settings-label-group[open] {
  border-color: var(--border);
}

[data-theme="dark"] .app-shell .settings-label-group>summary {
  background: var(--surface);
}

[data-theme="dark"] .app-shell .settings-label-group[open]>summary {
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

[data-theme="dark"] .app-shell .settings-label-group-icon {
  background: var(--surface-2);
  color: var(--text-3);
}

[data-theme="dark"] .app-shell .settings-label-group[open] .settings-label-group-icon {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .settings-label-group-copy h4 {
  color: var(--text);
}

[data-theme="dark"] .app-shell .settings-label-group-copy small {
  color: var(--text-3);
}

[data-theme="dark"] .app-shell .settings-label-group-count {
  border: 1px solid var(--border);
  color: var(--text-3);
}

[data-theme="dark"] .app-shell .settings-label-group-chevron {
  color: var(--text-3);
}

[data-theme="dark"] .app-shell .settings-label-field {
  border: 1px solid var(--border);
  background: var(--surface);
}

[data-theme="dark"] .app-shell .settings-label-field:focus-within {
  border-color: var(--border);
}

[data-theme="dark"] .app-shell .settings-label-field-head>label {
  color: var(--text-2);
}

[data-theme="dark"] .app-shell .settings-label-product-control>select {
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-2);
}

[data-theme="dark"] .app-shell .custom_label_product_dropdown textarea {
  border: 1px solid var(--border);
}

[data-theme="dark"] .app-shell .settings-label-options>label {
  border: 1px solid var(--border);
  color: var(--text-3);
}

[data-theme="dark"] .app-shell .settings-label-options>label:has(input:checked) {
  border-color: var(--border);
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .settings-sms-provider-note {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-3);
}

[data-theme="dark"] .app-shell .settings-sms-advanced {
  border: 1px solid var(--border);
}

[data-theme="dark"] .app-shell .settings-sms-advanced>summary {
  background: var(--surface);
}

[data-theme="dark"] .app-shell .settings-sms-advanced[open]>summary {
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

[data-theme="dark"] .app-shell .settings-sms-advanced>summary strong {
  color: var(--text);
}

[data-theme="dark"] .app-shell .settings-sms-advanced>summary small {
  color: var(--text-3);
}

[data-theme="dark"] .app-shell .settings-sms-advanced>summary>svg {
  color: var(--text-3);
}

[data-theme="dark"] .app-shell .settings-sms-advanced-icon {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .settings-sms-advanced-icon.is-amber {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .settings-sms-pair {
  border-bottom: 1px solid var(--border);
}

[data-theme="dark"] .app-shell .settings-sms-pair>span {
  background: var(--surface-2);
  color: var(--text-3);
}

[data-theme="dark"] .app-shell .settings-sms-test {
  border: 1px solid var(--border);
  background: linear-gradient(145deg,var(--surface),var(--surface-2));
}

[data-theme="dark"] .app-shell .settings-sms-test-icon {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .settings-sms-test>div>strong {
  color: var(--text);
}

[data-theme="dark"] .app-shell .settings-sms-test>div>small {
  color: var(--text-3);
}

[data-theme="dark"] .app-shell .settings-purchase-option .checkbox label {
  border: 1px solid var(--border);
  background: linear-gradient(145deg,var(--surface),var(--surface));
}

[data-theme="dark"] .app-shell .settings-purchase-option .checkbox label:hover {
  border-color: var(--border);
  background: var(--surface);
}

[data-theme="dark"] .app-shell .settings-purchase-option .checkbox:has(input:checked) label,
[data-theme="dark"] .app-shell .settings-purchase-option .checkbox:has(.checked) label {
  border-color: var(--border);
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .settings-option-copy strong {
  color: var(--text-2);
}

[data-theme="dark"] .app-shell .settings-option-copy small {
  color: var(--text-3);
}

[data-theme="dark"] .app-shell .settings-purchase-stage {
  border: 1px solid var(--border);
  background: var(--surface);
}

[data-theme="dark"] .app-shell .settings-purchase-stage-number {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .settings-purchase-stage:has(input:checked),
[data-theme="dark"] .app-shell .settings-purchase-stage:has(.checked) {
  border-color: var(--border);
  background: var(--surface);
}

[data-theme="dark"] .app-shell .settings-purchase-currency-toggle {
  border: 1px solid var(--border);
  background: var(--surface);
}

[data-theme="dark"] .app-shell .settings-purchase-currency-toggle:has(input:checked),
[data-theme="dark"] .app-shell .settings-purchase-currency-toggle:has(.checked) {
  border-color: var(--border);
  background: var(--surface);
}

[data-theme="dark"] .app-shell .settings-control-inline:has(>.settings-control-suffix):focus-within>.settings-control-suffix {
  background: var(--surface-2);
}

[data-theme="dark"] /* The browser's own file control has no styling in common with anything else on the page. */
.app-shell .settings-pane input[type=file]:not(.file-upload-input) {
  border: 1px solid var(--border);
}

[data-theme="dark"] .app-shell .settings-pane input[type=file]:not(.file-upload-input)::file-selector-button {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .location-state-card.is-enabled i {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .location-state-card.is-disabled i {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .business-location-status.is-active {
  border-color: var(--border);
  background: var(--surface);
}

[data-theme="dark"] .app-shell .business-location-status.is-inactive {
  border-color: var(--border);
  background: var(--surface);
}

[data-theme="dark"] .app-shell .business-location-section-head>span.is-blue {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .business-location-section-head>span.is-violet {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .business-location-section-head>span.is-amber {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .business-location-section-head>span.is-emerald {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .business-location-optional-icon {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .business-location-integration-note {
  border: 1px solid var(--border);
  background: var(--surface);
}

[data-theme="dark"] .app-shell .business-location-integration-note code {
  border: 1px solid var(--border);
}

[data-theme="dark"] .app-shell .location-settings-context-mode {
  border: 1px solid var(--border);
  background: var(--surface);
}

[data-theme="dark"] .app-shell .location-settings-workspace-head {
  background: linear-gradient(90deg,var(--surface) 0%,var(--surface) 70%,var(--surface) 100%);
}

[data-theme="dark"] .app-shell .location-settings-group-head>span {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .location-settings-group-head.is-blue>span {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .invoice-default-badge {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .invoice-number-type {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .invoice-scheme-default-state {
  background: var(--surface);
}

[data-theme="dark"] .app-shell .invoice-layout-card-head>b {
  border: 1px solid var(--border);
  background: var(--surface);
}

[data-theme="dark"] .app-shell .invoice-scheme-section-head>span {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .invoice-scheme-section-head.is-blue>span {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .invoice-scheme-patterns .option-div.active {
  background: var(--surface);
}

[data-theme="dark"] .app-shell .invoice-scheme-default-toggle:hover,
[data-theme="dark"] .app-shell .invoice-scheme-default-toggle:has(input:checked),
[data-theme="dark"] .app-shell .invoice-scheme-default-toggle:has(.checked) {
  border-color: var(--border);
  background: var(--surface);
}

[data-theme="dark"] .app-shell .invoice-layout-editor-intro>b {
  border: 1px solid var(--border);
  background: var(--surface);
}

[data-theme="dark"] .app-shell .invoice-layout-section-head {
  background: linear-gradient(90deg,var(--surface),var(--surface));
}

[data-theme="dark"] .app-shell .invoice-layout-section-head.is-blue>span {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .invoice-layout-section-head.is-violet>span {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .invoice-layout-section-head.is-amber>span {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .invoice-layout-section-head.is-emerald>span {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .invoice-layout-editor-form>.box>.box-header,
[data-theme="dark"] .app-shell .invoice-layout-editor-form>.box-solid>.box-header {
  background: linear-gradient(90deg,var(--surface),var(--surface));
}

[data-theme="dark"] .app-shell .invoice-layout-editor-form input[type="file"] {
  background: var(--surface);
}

[data-theme="dark"] .app-shell .invoice-layout-editor-form .checkbox>label:hover {
  background: var(--surface);
}

[data-theme="dark"] .app-shell .barcode-settings-facts .is-ready {
  border-color: var(--border);
  background: var(--surface);
}

[data-theme="dark"] .app-shell .barcode-settings-facts .is-attention {
  background: var(--surface);
}

[data-theme="dark"] .app-shell .barcode-settings-default-badge {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .barcode-settings-default-state {
  background: var(--surface);
}

[data-theme="dark"] .app-shell .barcode-form-section-head {
  background: linear-gradient(90deg,var(--surface),var(--surface));
}

[data-theme="dark"] .app-shell .barcode-form-section-head.is-blue>span {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .barcode-form-section-head.is-violet>span {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .barcode-format-option:has(input:checked) {
  border-color: var(--border);
  background: var(--surface);
}

[data-theme="dark"] .app-shell .barcode-measurement-group>header>span.is-blue {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .barcode-measurement-group>header>span.is-amber {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .printer-settings-facts span.is-blue {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .printer-settings-facts span.is-violet {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .printer-settings-endpoint>span {
  border-color: var(--border);
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .printer-settings-connection.is-network {
  background: var(--surface);
}

[data-theme="dark"] .app-shell .printer-settings-connection.is-windows {
  border-color: var(--border);
  background: var(--surface);
}

[data-theme="dark"] .app-shell .printer-settings-connection.is-linux {
  border-color: var(--border);
  background: var(--surface);
}

[data-theme="dark"] .app-shell .printer-settings-empty>a {
  background: var(--surface);
}

[data-theme="dark"] .app-shell .printer-form-section-head {
  background: linear-gradient(90deg,var(--surface),var(--surface));
}

[data-theme="dark"] .app-shell .printer-form-section-head.is-blue>span {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .printer-number-control:focus-within>span {
  background: var(--surface);
}

[data-theme="dark"] .app-shell .printer-connection-guide {
  border: 1px solid var(--border);
  background: var(--surface);
}

[data-theme="dark"] .app-shell .printer-connection-guide>span {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .printer-connection-guide code {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .tax-settings-intro>span {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .tax-settings-section-head {
  background: linear-gradient(90deg,var(--surface),var(--surface));
}

[data-theme="dark"] .app-shell .tax-settings-section-head.is-blue>span {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .tax-settings-identity>span {
  border: 1px solid var(--border);
  background: var(--surface);
}

[data-theme="dark"] .app-shell .tax-settings-group-identity>span {
  border-color: var(--border);
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .tax-settings-group-only {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .tax-settings-rate {
  border: 1px solid var(--border);
  background: var(--surface);
}

[data-theme="dark"] .app-shell .tax-settings-rate.is-group {
  border-color: var(--border);
  background: var(--surface);
}

[data-theme="dark"] .app-shell .restaurant-tables-section-head {
  background: linear-gradient(90deg,var(--surface),var(--surface));
}

[data-theme="dark"] .app-shell .restaurant-tables-section-head>span {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .restaurant-table-location {
  border: 1px solid var(--border);
  background: var(--surface);
}

[data-theme="dark"] body.app-ui .restaurant-table-modal-header {
  background: linear-gradient(90deg,var(--surface),var(--surface));
}

[data-theme="dark"] body.app-ui .restaurant-table-modal-header.is-edit>span {
  background: var(--surface-2);
}

[data-theme="dark"] body.app-ui .restaurant-table-modal-close:hover {
  border-color: var(--border);
}

[data-theme="dark"] body.app-ui .restaurant-table-modal-body {
  background: var(--surface);
}

[data-theme="dark"] body.app-ui .restaurant-table-form-section-head>span {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .modifier-sets-intro>span {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .modifier-sets-section-head {
  background: linear-gradient(90deg,var(--surface),var(--surface));
}

[data-theme="dark"] .app-shell .modifier-sets-section-head>span {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .modifier-set-identity>span {
  border: 1px solid var(--border);
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .modifier-set-tags>span {
  border: 1px solid var(--border);
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .modifier-set-tags.is-products>span {
  border-color: var(--border);
  background: var(--surface);
}

[data-theme="dark"] .app-shell .modifier-sets-empty>span {
  background: var(--surface-2);
}

[data-theme="dark"] body.app-ui .modifier-set-modal-header {
  background: linear-gradient(90deg,var(--surface),var(--surface));
}

[data-theme="dark"] body.app-ui .modifier-set-modal-header>span {
  background: var(--surface-3);
}

[data-theme="dark"] body.app-ui .modifier-set-modal-header.is-edit>span {
  background: var(--surface-2);
}

[data-theme="dark"] body.app-ui .modifier-set-modal-close:hover {
  border-color: var(--border);
}

[data-theme="dark"] body.app-ui .modifier-set-modal-body {
  background: var(--surface);
}

[data-theme="dark"] body.app-ui .modifier-set-section-head>span {
  background: var(--surface-3);
}

[data-theme="dark"] body.app-ui .modifier-set-section-head.is-amber>span {
  background: var(--surface-2);
}

[data-theme="dark"] body.app-ui .modifier-add-option {
  border: 1px solid var(--border);
  background: var(--surface);
}

[data-theme="dark"] body.app-ui .modifier-price-control:focus-within>span {
  background: var(--surface);
}

[data-theme="dark"] body.app-ui .modifier-row-action.is-add {
  border-color: var(--border);
  background: var(--surface);
}

[data-theme="dark"] body.app-ui .modifier-row-action.is-remove {
  border-color: var(--border);
  background: var(--surface);
}

[data-theme="dark"] body.app-ui .tax-rate-modal-header {
  background: linear-gradient(90deg,var(--surface),var(--surface));
}

[data-theme="dark"] body.app-ui .tax-rate-modal-header>span {
  background: var(--danger-weak);
}

[data-theme="dark"] body.app-ui .tax-rate-modal-body {
  background: var(--surface);
}

[data-theme="dark"] body.app-ui .tax-rate-percent-control>span {
  border: 1px solid var(--border);
  background: var(--surface);
}

[data-theme="dark"] body.app-ui .tax-rate-percent-control:focus-within>span {
  background: var(--surface);
}

[data-theme="dark"] body.app-ui .tax-rate-scope-option:hover {
  border-color: var(--border);
  background: var(--surface);
}

[data-theme="dark"] body.app-ui .tax-rate-scope-option:has(.tax-rate-toggle-input:checked) {
  border-color: var(--border);
  background: var(--surface);
}

[data-theme="dark"] body.app-ui .tax-group-modal-header {
  background: linear-gradient(90deg,var(--surface),var(--surface));
}

[data-theme="dark"] body.app-ui .tax-group-modal-header>span {
  background: var(--surface-2);
}

[data-theme="dark"] body.app-ui .tax-group-rates-field>.select2-container .select2-selection__choice {
  background: var(--surface-2);
}

[data-theme="dark"] body.app-ui .tax-group-calculation,
[data-theme="dark"] body.app-ui .tax-group-empty-rates {
  border: 1px solid var(--border);
  background: var(--surface);
}

[data-theme="dark"] body.app-ui .tax-group-calculation>span,
[data-theme="dark"] body.app-ui .tax-group-empty-rates>span {
  background: var(--surface-2);
}

[data-theme="dark"] body.app-ui .tax-group-empty-rates {
  background: var(--surface);
}

[data-theme="dark"] body.app-ui .tax-group-empty-rates>span {
  background: var(--danger-weak);
}

[data-theme="dark"] .app-shell .subscription-current {
  border: 1px solid var(--border);
  background: linear-gradient(115deg,var(--surface) 0%,var(--surface) 58%);
}

[data-theme="dark"] .app-shell .subscription-eyebrow>b {
  border: 1px solid var(--border);
}

[data-theme="dark"] .app-shell .subscription-progress {
  background: var(--surface-3);
}

[data-theme="dark"] .app-shell .subscription-current-dates {
  border-left: 1px solid var(--border);
}

[data-theme="dark"] .app-shell .subscription-days-left {
  border: 1px solid var(--border);
}

[data-theme="dark"] .app-shell .subscription-no-plan>span {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .subscription-queue article>span {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .subscription-queue article>span.is-amber {
  background: var(--danger-weak);
}

[data-theme="dark"] .app-shell .subscription-waiting-badge {
  background: var(--surface);
}

[data-theme="dark"] .app-shell .subscription-section-head {
  background: linear-gradient(90deg,var(--surface),var(--surface));
}

[data-theme="dark"] .app-shell .subscription-section-head>span {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .subscription-section-head.is-green {
  background: linear-gradient(90deg,var(--surface),var(--surface));
}

[data-theme="dark"] .app-shell .subscription-status.is-approved {
  border-color: var(--border);
  background: var(--surface);
}

[data-theme="dark"] .app-shell .subscription-status.is-waiting {
  background: var(--surface);
}

[data-theme="dark"] .app-shell .subscription-status.is-declined {
  border-color: var(--border);
  background: var(--surface);
}

[data-theme="dark"] .app-shell .subscription-package-grid {
  background: var(--surface);
}

[data-theme="dark"] .app-shell .subscription-package-card:hover {
  border-color: var(--border);
}

[data-theme="dark"] .app-shell .subscription-package-badges b.is-current {
  border-color: var(--border);
  background: var(--surface);
}

[data-theme="dark"] .app-shell .subscription-package-badges b.is-popular {
  border-color: var(--border);
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .subscription-package-action {
  border: 1px solid var(--border);
  background: var(--surface);
}

@media (max-width:1100px) {
  [data-theme="dark"] .app-shell .subscription-current-dates {
    border-top: 1px solid var(--border);
  }
}

[data-theme="dark"] body.app-ui .subscription-detail-header {
  background: linear-gradient(90deg,var(--surface),var(--surface));
}

[data-theme="dark"] body.app-ui .subscription-detail-status.is-approved {
  border-color: var(--border);
  background: var(--surface);
}

[data-theme="dark"] body.app-ui .subscription-detail-status.is-waiting {
  background: var(--surface);
}

[data-theme="dark"] body.app-ui .subscription-detail-status.is-declined {
  border-color: var(--border);
  background: var(--surface-2);
}

[data-theme="dark"] body.app-ui .subscription-detail-body {
  background: var(--surface);
}

[data-theme="dark"] body.app-ui .subscription-detail-hero {
  border: 1px solid var(--border);
  background: linear-gradient(110deg,var(--surface),var(--surface));
}

[data-theme="dark"] body.app-ui .subscription-detail-price>span {
  background: var(--surface-2);
}

[data-theme="dark"] body.app-ui .subscription-detail-period>div>span {
  background: var(--surface-2);
}

[data-theme="dark"] body.app-ui .subscription-detail-parties header>span.is-blue,
[data-theme="dark"] body.app-ui .subscription-detail-payment>header>span {
  background: var(--surface-2);
}

[data-theme="dark"] body.app-ui .subscription-detail-discount {
  background: var(--surface);
}

[data-theme="dark"] body.app-ui .subscription-detail-discount>span {
  background: var(--danger-weak);
}

[data-theme="dark"] .app-shell .superadmin-business-summary>article>span.is-blue {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .superadmin-business-summary>article>span.is-violet {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .superadmin-business-summary>article>span.is-amber {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .superadmin-business-filters>header {
  background: linear-gradient(90deg,var(--surface),var(--surface));
}

[data-theme="dark"] .app-shell .superadmin-business-section-head {
  background: linear-gradient(90deg,var(--surface),var(--surface));
}

[data-theme="dark"] .app-shell .superadmin-business-identity>span {
  border: 1px solid var(--border);
}

[data-theme="dark"] .app-shell .superadmin-business-status.is-active {
  border-color: var(--border);
  background: var(--surface);
}

[data-theme="dark"] .app-shell .superadmin-business-status.is-inactive {
  border-color: var(--border);
  background: var(--surface);
}

[data-theme="dark"] .app-shell .superadmin-business-manage {
  border: 1px solid var(--border);
}

[data-theme="dark"] .app-shell .superadmin-business-profile-identity {
  background: linear-gradient(135deg,var(--surface),var(--surface));
}

[data-theme="dark"] .app-shell .superadmin-business-profile-badges>span.is-active {
  border-color: var(--border);
  background: var(--surface);
}

[data-theme="dark"] .app-shell .superadmin-business-profile-badges>span.is-inactive {
  border-color: var(--border);
  background: var(--surface);
}

[data-theme="dark"] .app-shell .superadmin-business-profile-facts dt svg {
  color: var(--text-3);
}

[data-theme="dark"] .app-shell .superadmin-business-current-plan {
  background: linear-gradient(145deg,var(--surface),var(--surface));
}

[data-theme="dark"] .app-shell .superadmin-business-current-plan>span {
  background: var(--danger-weak);
}

[data-theme="dark"] .app-shell .superadmin-business-profile-section>header {
  background: linear-gradient(90deg,var(--surface),var(--surface));
}

[data-theme="dark"] .app-shell .superadmin-business-profile-section>header>span.is-blue {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .superadmin-business-profile-section>header>span.is-amber {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .superadmin-business-profile-section>header>span.is-violet {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .superadmin-business-location-name>span,
[data-theme="dark"] .app-shell .superadmin-business-plan-name>span {
  border: 1px solid var(--border);
}

[data-theme="dark"] .app-shell .superadmin-business-plan-name>span {
  background: var(--surface);
}

[data-theme="dark"] .app-shell .superadmin-business-profile-empty svg {
  color: var(--text-3);
}

[data-theme="dark"] .app-shell .superadmin-user-password-action {
  border: 1px solid var(--border);
}

[data-theme="dark"] .app-shell .superadmin-subscription-summary>article>span.is-blue {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .superadmin-subscription-summary>article>span.is-amber {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .superadmin-subscription-summary>article>span.is-red {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .superadmin-subscription-filters>header {
  background: linear-gradient(90deg,var(--surface),var(--surface));
}

[data-theme="dark"] .app-shell .superadmin-subscription-date-control>svg {
  color: var(--text-3);
}

[data-theme="dark"] .app-shell .superadmin-subscription-section-head {
  background: linear-gradient(90deg,var(--surface),var(--surface));
}

[data-theme="dark"] .app-shell .superadmin-subscription-identity>span {
  border: 1px solid var(--border);
}

[data-theme="dark"] .app-shell .superadmin-subscription-status.is-approved {
  border-color: var(--border);
  background: var(--surface);
}

[data-theme="dark"] .app-shell .superadmin-subscription-status.is-waiting {
  background: var(--surface);
}

[data-theme="dark"] .app-shell .superadmin-subscription-status.is-declined {
  border-color: var(--border);
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .superadmin-package-summary>article>span.is-blue {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .superadmin-package-summary>article>span.is-amber {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .superadmin-package-summary>article>span.is-violet {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .superadmin-package-catalog-head {
  background: linear-gradient(90deg,var(--surface),var(--surface));
}

[data-theme="dark"] .app-shell .superadmin-package-card:before {
  background: var(--surface-3);
}

[data-theme="dark"] .app-shell .superadmin-package-card.is-popular {
  border-color: var(--border);
}

[data-theme="dark"] .app-shell .superadmin-package-badges .is-active {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .superadmin-package-badges .is-inactive {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .superadmin-package-badges .is-popular {
  background: var(--danger-weak);
}

[data-theme="dark"] .app-shell .superadmin-package-flags span {
  background: var(--surface);
}

[data-theme="dark"] .app-shell .superadmin-package-limits {
  background: var(--surface);
}

[data-theme="dark"] .app-shell .superadmin-package-no-features {
  background: var(--surface);
}

[data-theme="dark"] .app-shell .superadmin-package-more summary {
  background: var(--surface);
}

[data-theme="dark"] .app-shell .superadmin-package-card>footer {
  background: var(--surface);
}

[data-theme="dark"] .app-shell .superadmin-package-delete:hover {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .superadmin-package-builder-guide>header {
  background: linear-gradient(135deg,var(--surface),var(--surface));
}

[data-theme="dark"] .app-shell .superadmin-package-builder-guide nav a:hover {
  background: var(--surface);
}

[data-theme="dark"] .app-shell .superadmin-package-builder-guide nav a.is-active {
  border-color: var(--border);
}

[data-theme="dark"] .app-shell .superadmin-package-builder-note {
  border: 1px solid var(--border);
  background: var(--surface);
}

[data-theme="dark"] .app-shell .superadmin-package-builder-section>header {
  background: linear-gradient(90deg,var(--surface),var(--surface));
}

[data-theme="dark"] .app-shell .superadmin-package-builder-section>header.is-blue>span {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .superadmin-package-builder-section>header.is-amber>span {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .superadmin-package-builder-section>header.is-violet>span {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .superadmin-package-builder-section>header.is-green>span {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .superadmin-package-builder-section>header.is-teal>span {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .superadmin-package-builder-control,
[data-theme="dark"] .app-shell .superadmin-package-builder-select {
  background: var(--surface);
}

[data-theme="dark"] .app-shell .superadmin-package-builder-control>svg,
[data-theme="dark"] .app-shell .superadmin-package-builder-select>svg {
  color: var(--text-3);
}

[data-theme="dark"] .app-shell .superadmin-package-price-control {
  background: var(--surface);
}

[data-theme="dark"] .app-shell .superadmin-package-price-control>span {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .superadmin-package-limit-field {
  background: var(--surface);
}

[data-theme="dark"] .app-shell .superadmin-package-choice {
  background: var(--surface);
}

[data-theme="dark"] .app-shell .superadmin-package-choice:hover {
  border-color: var(--border);
  background: var(--surface);
}

[data-theme="dark"] .app-shell .superadmin-package-update-impact {
  background: var(--surface);
}

[data-theme="dark"] .app-shell .superadmin-package-update-impact:hover {
  background: var(--surface);
}

[data-theme="dark"] .app-shell .superadmin-package-custom-link {
  border: 1px dashed var(--border);
  background: var(--surface);
}

[data-theme="dark"] .app-shell .superadmin-package-feature-choice {
  background: var(--surface);
}

[data-theme="dark"] .app-shell .superadmin-package-feature-choice:hover {
  border-color: var(--border);
  background: var(--surface);
}

[data-theme="dark"] .app-shell .superadmin-package-feature-value {
  background: var(--surface);
}

[data-theme="dark"] .app-shell .superadmin-package-feature-value>div>span {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .superadmin-coupon-summary .is-blue {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .superadmin-coupon-summary .is-amber {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .superadmin-coupon-summary .is-red {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .superadmin-coupon-section-head {
  background: linear-gradient(90deg,var(--surface),var(--surface));
}

[data-theme="dark"] .app-shell .superadmin-coupon-code>span {
  border: 1px solid var(--border);
}

[data-theme="dark"] .app-shell .superadmin-coupon-type.is-percentage {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .superadmin-coupon-type.is-fixed {
  border-color: var(--border);
  background: var(--surface);
}

[data-theme="dark"] .app-shell .superadmin-coupon-status.is-active {
  border-color: var(--border);
  background: var(--surface);
}

[data-theme="dark"] .app-shell .superadmin-coupon-status.is-inactive {
  border-color: var(--border);
  background: var(--surface);
}

[data-theme="dark"] .app-shell .superadmin-coupon-edit {
  border: 1px solid var(--border);
}

[data-theme="dark"] .app-shell .superadmin-coupon-form-guide>header {
  background: linear-gradient(135deg,var(--surface),var(--surface));
}

[data-theme="dark"] .app-shell .superadmin-coupon-form-guide>ol>li:first-child {
  border: 1px solid var(--border);
}

[data-theme="dark"] .app-shell .superadmin-coupon-form-guide>div {
  border: 1px solid var(--border);
  background: var(--surface);
}

[data-theme="dark"] .app-shell .superadmin-coupon-form-section>header {
  background: linear-gradient(90deg,var(--surface),var(--surface));
}

[data-theme="dark"] .app-shell .superadmin-coupon-form-section>header.is-blue>span {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .superadmin-coupon-form-section>header.is-amber>span {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .superadmin-coupon-control,
[data-theme="dark"] .app-shell .superadmin-coupon-select {
  background: var(--surface);
}

[data-theme="dark"] .app-shell .superadmin-coupon-control>svg,
[data-theme="dark"] .app-shell .superadmin-coupon-select>svg {
  color: var(--text-3);
}

[data-theme="dark"] .superadmin-coupon-dropdown.is-multiple .select2-results__option:after {
  border: 1px solid var(--border);
}

[data-theme="dark"] .app-shell .superadmin-coupon-active-choice {
  border: 1px solid var(--border);
  background: var(--surface);
}

[data-theme="dark"] body.app-ui .superadmin-subscription-modal-header {
  background: linear-gradient(100deg,var(--surface) 0%,var(--surface) 70%);
}

[data-theme="dark"] body.app-ui .superadmin-subscription-modal-body {
  background: var(--surface);
}

[data-theme="dark"] body.app-ui .superadmin-subscription-modal-section>header {
  background: linear-gradient(90deg,var(--surface),var(--surface));
}

[data-theme="dark"] body.app-ui .superadmin-subscription-modal-section>header>span {
  background: var(--surface-2);
}

[data-theme="dark"] body.app-ui .superadmin-subscription-control>svg {
  color: var(--text-3);
}

[data-theme="dark"] body.app-ui .superadmin-subscription-date-section>header>span {
  background: var(--surface-2);
}

[data-theme="dark"] body.app-ui .superadmin-subscription-modal-note {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-2);
}

[data-theme="dark"] .app-shell .superadmin-business-action-menu>li>.table-action-warning:hover {
  background: var(--surface);
}

[data-theme="dark"] .app-shell .superadmin-business-create-guide>header {
  background: linear-gradient(145deg,var(--surface),var(--surface));
}

[data-theme="dark"] .app-shell .superadmin-business-create-guide nav>a:hover {
  border-color: var(--border);
  background: var(--surface);
}

[data-theme="dark"] .app-shell .superadmin-business-create-guide nav>a.is-active {
  border-color: var(--border);
  background: linear-gradient(90deg,var(--surface-2),var(--surface));
}

[data-theme="dark"] .app-shell .superadmin-business-create-guide nav>a:hover>b {
  border-color: var(--border);
}

[data-theme="dark"] .app-shell .superadmin-business-create-note {
  border: 1px solid var(--border);
  background: var(--surface);
}

[data-theme="dark"] .app-shell .superadmin-business-create-note p {
  color: var(--text-2);
}

[data-theme="dark"] .app-shell .superadmin-business-create-section>header {
  background: linear-gradient(90deg,var(--surface),var(--surface));
}

[data-theme="dark"] .app-shell .superadmin-business-create-section>header>b {
  border: 1px solid var(--border);
  background: var(--surface);
}

[data-theme="dark"] .app-shell .superadmin-business-create-section>header.is-blue {
  background: linear-gradient(90deg,var(--surface),var(--surface));
}

[data-theme="dark"] .app-shell .superadmin-business-create-section>header.is-blue>span {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .superadmin-business-create-section>header.is-blue>b {
  border-color: var(--border);
  background: var(--surface);
}

[data-theme="dark"] .app-shell .superadmin-business-create-section>header.is-violet {
  background: linear-gradient(90deg,var(--surface),var(--surface));
}

[data-theme="dark"] .app-shell .superadmin-business-create-section>header.is-violet>span {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .superadmin-business-create-section>header.is-violet>b {
  border-color: var(--border);
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .superadmin-business-create-section>header.is-amber {
  background: linear-gradient(90deg,var(--surface),var(--surface));
}

[data-theme="dark"] .app-shell .superadmin-business-create-section>header.is-amber>span {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .superadmin-business-create-section>header.is-amber>b {
  background: var(--surface);
}

[data-theme="dark"] .app-shell .superadmin-business-control>svg,
[data-theme="dark"] .app-shell .superadmin-business-select-control>svg {
  color: var(--text-3);
}

[data-theme="dark"] .app-shell .superadmin-business-logo-field .file-upload-picker {
  border-color: var(--border);
  background: var(--surface);
}

[data-theme="dark"] .app-shell .superadmin-business-subscription-tip {
  background: var(--surface);
}

[data-theme="dark"] .app-shell .superadmin-settings-nav>header {
  background: linear-gradient(135deg,var(--surface),var(--surface));
}

[data-theme="dark"] .app-shell .superadmin-settings-nav>nav>button>span {
  color: var(--text-3);
}

[data-theme="dark"] .app-shell .superadmin-settings-nav>nav>button:hover {
  background: var(--surface);
}

[data-theme="dark"] .app-shell .superadmin-settings-nav>nav>button.is-active {
  border-color: var(--border);
}

[data-theme="dark"] .app-shell .superadmin-settings-nav-note {
  border: 1px solid var(--border);
  background: var(--surface);
}

[data-theme="dark"] .app-shell .superadmin-settings-workspace-head {
  background: linear-gradient(90deg,var(--surface),var(--surface));
}

[data-theme="dark"] .app-shell .superadmin-settings-panel .input-group-addon {
  background: var(--surface-2);
  color: var(--text-3);
}

[data-theme="dark"] .app-shell .superadmin-settings-panel .form-group>label:has(input),
[data-theme="dark"] .app-shell .superadmin-settings-panel .form-group>label:has(.icheckbox_square-blue) {
  background: var(--surface);
}

[data-theme="dark"] .app-shell .superadmin-settings-panel code {
  border: 1px solid var(--border);
  background: var(--surface);
}

[data-theme="dark"] .app-shell .superadmin-settings-panel mark {
  background: var(--danger-weak);
}

[data-theme="dark"] .app-shell #settings-payments>.row>[class*=col-]:not(:has(.form-group)) {
  background: var(--surface);
}

[data-theme="dark"] .app-shell .superadmin-communicator-summary .is-blue {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .superadmin-communicator-summary .is-amber {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .superadmin-communicator-summary .is-violet {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .superadmin-communicator-section-head {
  background: linear-gradient(90deg,var(--surface),var(--surface));
}

[data-theme="dark"] .app-shell .superadmin-communicator-field .form-control {
  background: var(--surface);
}

[data-theme="dark"] .app-shell .superadmin-communicator-actions {
  background: var(--surface);
}

[data-theme="dark"] .app-shell .superadmin-communicator-guide>header {
  background: linear-gradient(135deg,var(--surface),var(--surface));
}

[data-theme="dark"] .app-shell .superadmin-communicator-guide>div {
  border: 1px solid var(--border);
  background: var(--surface);
}

[data-theme="dark"] .app-shell .superadmin-dashboard-range label.is-active span {
  border: 1px solid var(--border);
}

[data-theme="dark"] .app-shell .superadmin-dashboard-summary .is-blue {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .superadmin-dashboard-summary .is-violet {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .superadmin-dashboard-summary .is-red {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .superadmin-dashboard-strip .is-blue {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .superadmin-dashboard-strip .is-amber {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .superadmin-dashboard-chart-card>header,
[data-theme="dark"] .app-shell .superadmin-dashboard-panel>header {
  background: linear-gradient(90deg,var(--surface),var(--surface));
}

[data-theme="dark"] .app-shell .superadmin-dashboard-panel>header>span.is-blue {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .superadmin-dashboard-panel>header>span.is-amber {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .superadmin-dashboard-chart-card header em {
  border: 1px solid var(--border);
  background: var(--surface);
}

[data-theme="dark"] .app-shell .superadmin-dashboard-panel>ul b.is-amber {
  background: var(--surface);
}

[data-theme="dark"] .app-shell .ai-section-head {
  background: linear-gradient(90deg,var(--surface),var(--surface));
}

[data-theme="dark"] .app-shell .ai-tool-form .form-control {
  background: var(--surface);
}

[data-theme="dark"] .app-shell .ai-tool-actions {
  background: var(--surface);
}

[data-theme="dark"] .app-shell .ai-tool-guide>header {
  background: linear-gradient(135deg,var(--surface),var(--surface));
}

[data-theme="dark"] .app-shell .ai-tool-guide>div {
  border: 1px solid var(--border);
  background: var(--surface);
}

[data-theme="dark"] .app-shell .ai-output-card>header {
  background: linear-gradient(90deg,var(--surface),var(--surface));
}

[data-theme="dark"] .app-shell .report-check-field {
  background: var(--surface);
}

[data-theme="dark"] .app-shell .report-screen .form-control {
  background: var(--surface);
}

[data-theme="dark"] .app-shell .report-chart-card>header {
  background: linear-gradient(90deg,var(--surface),var(--surface));
}

[data-theme="dark"] .app-shell .tw-bg-sky-100 {
  background-color: var(--surface-2);
}

[data-theme="dark"] .app-shell .tw-bg-green-100 {
  background-color: var(--surface-2);
}

[data-theme="dark"] .app-shell .tw-bg-emerald-100 {
  background-color: var(--brand-weak);
}

[data-theme="dark"] .app-shell .tw-bg-yellow-100 {
  background-color: var(--warn-weak);
}

[data-theme="dark"] .app-shell .tw-bg-red-100 {
  background-color: var(--surface-3);
}

[data-theme="dark"] .app-shell .tw-bg-orange-100 {
  background-color: var(--danger-weak);
}

[data-theme="dark"] .app-shell .tw-bg-blue-100 {
  background-color: var(--surface-3);
}

[data-theme="dark"] .app-shell .tw-bg-teal-100 {
  background-color: var(--brand-weak);
}

[data-theme="dark"] .app-shell .tw-bg-purple-100 {
  background-color: var(--surface-2);
}

[data-theme="dark"] .app-shell .box>.box-header {
  background: linear-gradient(90deg,var(--surface),var(--surface));
}

[data-theme="dark"] .app-shell .legacy-filter-card .filter-card-head {
  background: linear-gradient(90deg,var(--surface),var(--surface));
}

[data-theme="dark"] .app-shell .legacy-filter-card .form-control {
  background: var(--surface);
}

[data-theme="dark"] .app-shell .info-box.bg-blue>.info-box-icon,
[data-theme="dark"] .app-shell .info-box.bg-aqua>.info-box-icon {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .info-box.bg-yellow>.info-box-icon,
[data-theme="dark"] .app-shell .info-box.bg-orange>.info-box-icon {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .info-box.bg-red>.info-box-icon {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .info-box.bg-purple>.info-box-icon {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .info-box.bg-teal>.info-box-icon {
  background: var(--brand-weak);
}

[data-theme="dark"] .app-shell .small-box.bg-blue>.icon,
[data-theme="dark"] .app-shell .small-box.bg-aqua>.icon {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .small-box.bg-yellow>.icon,
[data-theme="dark"] .app-shell .small-box.bg-orange>.icon {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .small-box.bg-red>.icon {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .small-box.bg-purple>.icon {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .small-box.bg-teal>.icon {
  background: var(--brand-weak);
}

[data-theme="dark"] .app-shell .report-figure-card>header,
[data-theme="dark"] .app-shell .report-overall-card>header {
  background: linear-gradient(90deg,var(--surface),var(--surface));
}

[data-theme="dark"] .app-shell .report-figure-card>header>span.is-blue {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .report-pl-card>header {
  background: linear-gradient(90deg,var(--surface),var(--surface));
}

[data-theme="dark"] .app-shell .report-pl-total.is-primary {
  border-color: var(--border);
}

[data-theme="dark"] .app-shell .report-card-head {
  background: linear-gradient(90deg,var(--surface),var(--surface));
}

[data-theme="dark"] .app-shell .clv-summary-icon.is-violet {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .clv-summary-icon.is-blue {
  background: var(--surface-2);
}

[data-theme="dark"] .app-shell .clv-summary-icon.is-red {
  background: var(--surface-2);
}

[data-theme="dark"] /* First,
[data-theme="dark"] second and third are worth marking; tenth is not. */
.app-shell .clv-top-card.is-first .clv-top-rank {
  background: var(--surface);
}

[data-theme="dark"] .app-shell .clv-top-card.is-second .clv-top-rank {
  border-color: var(--border);
  background: var(--surface-2);
  color: var(--text-2);
}

[data-theme="dark"] .app-shell .clv-top-card.is-third .clv-top-rank {
  background: var(--surface-2);
}

[data-theme="dark"] body.app-ui .ar-detail-panel>header {
  background: linear-gradient(90deg,var(--surface),var(--surface));
}

[data-theme="dark"] body.app-ui .ar-detail-status.label-success {
  border-color: var(--border);
}

[data-theme="dark"] body.app-ui .ar-detail-status.label-danger {
  background: var(--surface-2);
}

[data-theme="dark"] body.app-ui .ar-detail-status.label-warning {
  background: var(--surface-2);
}

/* ---------------------------------------------------------- contact portal frame

   The customer-facing portal (a contact signing in to see their own sells, ledger and
   bookings) kept its AdminLTE frame long after the admin screens lost theirs. These are the
   few rules that frame needs — a header, a sidebar and a content column — written against
   the design tokens so the portal matches the rest of the system.

   Scoped to body.crm-portal: the class names below (.main-header, .main-sidebar,
   .content-wrapper) are generic enough that an unscoped rule would reach other pages. */

body.crm-portal{
  margin:0;
  background:var(--bg);
  color:var(--text)
}

body.crm-portal .main-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:900;
  display:flex;
  align-items:center;
  height:56px;
  background:var(--surface);
  border-bottom:1px solid var(--border)
}

body.crm-portal .main-header .logo{
  display:flex;
  align-items:center;
  width:230px;
  height:56px;
  padding:0 18px;
  color:var(--text);
  font-weight:700;
  font-size:15px;
  text-decoration:none;
  border-right:1px solid var(--border)
}

body.crm-portal .main-header .navbar{
  display:flex;
  flex:1;
  align-items:center;
  justify-content:space-between;
  min-width:0;
  margin:0;
  padding:0 14px;
  background:none;
  border:0
}

body.crm-portal .main-header .navbar-custom-menu{
  display:flex;
  align-items:center;
  gap:10px;
  margin-left:auto
}

body.crm-portal .sidebar-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius:9px;
  color:var(--text-2);
  text-decoration:none
}

body.crm-portal .sidebar-toggle:hover{
  background:var(--surface-3);
  color:var(--text)
}

body.crm-portal .navbar-nav{
  display:flex;
  align-items:center;
  gap:4px;
  margin:0;
  padding:0;
  list-style:none
}

body.crm-portal .navbar-nav>li{
  position:relative
}

body.crm-portal .navbar-nav>li>a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:38px;
  padding:0 10px;
  border-radius:9px;
  color:var(--text-2);
  font-size:13px;
  font-weight:600;
  text-decoration:none
}

body.crm-portal .navbar-nav>li>a:hover{
  background:var(--surface-3);
  color:var(--text)
}

body.crm-portal .user-image{
  width:26px;
  height:26px;
  border-radius:50%;
  -o-object-fit:cover;
     object-fit:cover
}

body.crm-portal .user-header{
  padding:12px 14px;
  border-bottom:1px solid var(--border);
  color:var(--text-2);
  font-size:12px
}

body.crm-portal .main-sidebar{
  position:fixed;
  top:56px;
  bottom:0;
  left:0;
  z-index:800;
  width:230px;
  overflow-y:auto;
  background:var(--surface);
  border-right:1px solid var(--border)
}

body.crm-portal .main-sidebar .sidebar{
  padding:12px 10px
}

body.crm-portal .main-sidebar .logo{
  display:none
}

body.crm-portal .sidebar-menu{
  margin:0;
  padding:0;
  list-style:none
}

body.crm-portal .sidebar-menu>li>a{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:2px;
  padding:9px 12px;
  border-radius:9px;
  color:var(--text-2);
  font-size:13px;
  font-weight:600;
  text-decoration:none
}

body.crm-portal .sidebar-menu>li>a:hover{
  background:var(--surface-3);
  color:var(--text)
}

body.crm-portal .sidebar-menu>li.active>a{
  background:var(--brand-weak);
  color:var(--brand-strong)
}

body.crm-portal .sidebar-menu .header{
  padding:12px 12px 6px;
  color:var(--text-3);
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase
}

body.crm-portal .sidebar-menu .treeview-menu{
  margin:0 0 4px;
  padding:0 0 0 14px;
  list-style:none
}

body.crm-portal .sidebar-menu .treeview-menu>li>a{
  display:block;
  padding:7px 12px;
  border-radius:8px;
  color:var(--text-2);
  font-size:12.5px;
  text-decoration:none
}

body.crm-portal .sidebar-menu .treeview-menu>li>a:hover{
  background:var(--surface-3);
  color:var(--text)
}

body.crm-portal .content-wrapper{
  min-height:calc(100vh - 56px);
  margin:56px 0 0 230px;
  padding:18px
}

body.crm-portal .content-header{
  padding:0 0 12px
}

body.crm-portal .content-header>h1{
  margin:0;
  font-size:19px;
  font-weight:700;
  letter-spacing:-.01em
}

body.crm-portal .main-footer{
  margin-left:230px;
  padding:12px 18px;
  border-top:1px solid var(--border);
  color:var(--text-3);
  font-size:12px
}

/* Narrow screens: the sidebar slides away and the content takes the full width. */

@media (max-width:991px){
  body.crm-portal .main-sidebar{
    transform:translateX(-100%);
    transition:transform .18s
  }

  body.crm-portal.sidebar-open .main-sidebar{
    transform:none
  }

  body.crm-portal .content-wrapper,body.crm-portal .main-footer{
    margin-left:0
  }

  body.crm-portal .main-header .logo{
    width:auto;
    border-right:0
  }
}

/* A <details> used as a dropdown. Replaces the daisyUI one whose show/hide lived in app.css. */

body.app-ui .ui-dropdown{
  position:relative;
  display:inline-block;
  margin:10px
}

body.app-ui .ui-dropdown>summary{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:9px;
  color:inherit;
  font-size:14px;
  font-weight:600;
  list-style:none;
  cursor:pointer;
  -webkit-user-select:none;
     -moz-user-select:none;
          user-select:none
}

body.app-ui .ui-dropdown>summary::-webkit-details-marker{
  display:none
}

body.app-ui .ui-dropdown>summary::after{
  content:"";
  width:0;
  height:0;
  border-top:4px solid currentColor;
  border-right:4px solid transparent;
  border-left:4px solid transparent
}

body.app-ui .ui-dropdown>summary:hover{
  background:rgba(255,255,255,.14)
}

body.app-ui .ui-dropdown-panel{
  position:absolute;
  z-index:1000;
  top:calc(100% + 6px);
  left:0;
  min-width:190px;
  margin:0;
  padding:6px;
  list-style:none;
  border:1px solid var(--border);
  border-radius:11px;
  background:var(--surface);
  box-shadow:var(--shadow-md)
}

body.app-ui .ui-dropdown-panel>li>a{
  display:block;
  padding:8px 10px;
  border-radius:8px;
  color:var(--text-2);
  font-size:13px;
  font-weight:600;
  text-decoration:none;
  cursor:pointer
}

body.app-ui .ui-dropdown-panel>li>a:hover{
  background:var(--surface-3);
  color:var(--text)
}

/* Bootstrap's container, which the compat layer never carried.

   .row sets margin:0 -8px and the columns pay it back with padding. That only balances when
   the row sits inside something with matching padding — Bootstrap's .container. Without it a
   row is 16px wider than its parent, which is a horizontal scrollbar on every page built this
   way. The admin screens never hit it because x-page supplies the padding; the guest pages
   (catalogue, shared invoice, job sheet) use .container directly. */

.app-shell .container{
  width:100%;
  max-width:1170px;
  margin-right:auto;
  margin-left:auto;
  padding-right:15px;
  padding-left:15px
}

.app-shell .container-fluid{
  width:100%;
  margin-right:auto;
  margin-left:auto;
  padding-right:15px;
  padding-left:15px
}

/* Equal-height product cards in the catalogue: the markup asks for it by class name. */

.app-shell .eq-height-row{
  display:flex;
  flex-wrap:wrap
}

.app-shell .eq-height-col{
  display:flex;
  flex-direction:column
}

.app-shell .eq-height-col>.box{
  flex:1
}

/* Guest pages sit inside .app-shell for the grid and table rules, but they are documents,
   not admin screens: a centred masthead rather than a title bar with actions on the right.
   .content-header is a flex row for the admin screens, which turns a centred <h2> into a
   shrink-wrapped 32px flex item. */

.app-shell.guest-shell .content-header{
  display:block;
  border-bottom:0;
  padding:0;
  margin:0
}

.app-shell.guest-shell .content-header>h1,.app-shell.guest-shell .content-header>h2,.app-shell.guest-shell .content-header>h3{
  margin:0;
  color:var(--text);
  font-weight:750
}

.app-shell.guest-shell .text-center{
  text-align:center
}

/* The shared invoice: what a customer sees when they open the link from a receipt.
 *
 * It is one thing on an otherwise empty page, so it is centred and given room to breathe
 * rather than being pinned to the top-left of a grey field. The sheet takes the width of the
 * receipt it holds — these are printed on 80mm rolls, so a wide card around a narrow receipt
 * reads as a mistake. */

.app-shell .invoice-public-page{
  display:flex;
  min-height:100vh;
  flex-direction:column;
  align-items:center;
  gap:14px;
  padding:24px 16px 40px
}

.app-shell .invoice-public-actions{
  display:flex;
  width:min(560px,100%);
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:8px
}

.app-shell .invoice-public-actions .btn-primary,.app-shell .invoice-public-actions .btn-ghost{
  height:38px
}

.app-shell .invoice-public-sheet{
  width:min(560px,100%);
  padding:22px 20px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  box-shadow:var(--shadow-md)
}

/* The receipt brings its own table widths; it only has to stop overflowing the sheet. */

.app-shell .invoice-public-sheet #invoice_content{
  min-width:0;
  overflow-x:auto
}

.app-shell .invoice-public-sheet img{
  max-width:100%;
  height:auto
}

@media (max-width:600px){
  .app-shell .invoice-public-page{
    padding:14px 10px 28px
  }

  .app-shell .invoice-public-sheet{
    padding:16px 13px
  }

  .app-shell .invoice-public-actions{
    justify-content:stretch
  }

  .app-shell .invoice-public-actions .btn-primary,.app-shell .invoice-public-actions .btn-ghost{
    flex:1;
    justify-content:center
  }
}

/* The same page with nothing to show: an expired link, and anything else this flow needs to
   say to someone who arrived from outside. Centred in the viewport rather than sitting under
   a toolbar that is not there. */

.app-shell .invoice-public-page.is-centred{
  justify-content:center;
  padding-bottom:24px
}

.app-shell .invoice-public-status{
  display:flex;
  width:min(460px,100%);
  align-items:center;
  flex-direction:column;
  gap:5px;
  padding:32px 26px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  box-shadow:var(--shadow-md);
  text-align:center
}

.app-shell .invoice-public-status-icon{
  display:grid;
  width:56px;
  height:56px;
  margin-bottom:9px;
  place-items:center;
  border-radius:17px;
  background:var(--warn-weak);
  color:var(--warn)
}

.app-shell .invoice-public-status-icon svg{
  width:27px;
  height:27px
}

.app-shell .invoice-public-status h1{
  margin:0;
  color:var(--text);
  font-size:17px;
  font-weight:800
}

.app-shell .invoice-public-status p{
  margin:0;
  max-width:36ch;
  color:var(--text-2);
  font-size:12.5px;
  line-height:1.6
}

/* Printing takes the receipt out of the page it was framed in. */

@media print{
  .app-shell .invoice-public-page{
    display:block;
    min-height:0;
    padding:0
  }

  .app-shell .invoice-public-sheet{
    width:auto;
    padding:0;
    border:0;
    border-radius:0;
    box-shadow:none
  }
}

/* Where the select2 panel opens, when the field owns it.

   The shared handler positions an open panel in page coordinates, which is right when select2
   has appended it to <body>. Several screens instead anchor it to the field's own wrapper
   (dropdownParent), because a panel appended to the body is treated as "elsewhere" by a
   dialog's focus trap and closes the moment it opens. For those the page coordinates are
   measured against the wrong origin, and the panel lands somewhere else entirely — on the Add
   Payment dialog it came to rest at the bottom of the dialog, well away from its field.

   .select-field is already position:relative, so the panel just has to sit under it. The
   manufacturing module worked this out for its own fields; this is the same rule for every
   field built by the select component.

   Match the panel, not the control. select2 keeps two containers, and when the panel opens it
   copies the control's class list onto the panel's container — so both answer to
   .select2-container--open. Sending "everything open" out of the flow took the control with it:
   on the job sheet the customer field emptied and its selection dropped below the box, with the
   panel under that again. The panel is the one holding a .select2-dropdown; the control holds a
   .select2-selection and stays where it was written, open or closed. */

.app-shell .select-field > .select2-container--open:has(> .select2-dropdown) {
  position: absolute !important;
  top: calc(100% + 5px) !important;
  left: 0 !important;
  width: 100% !important;
  z-index: 1060;
}

/* The control itself sits in the flow like any other field, whether or not its panel is open. */

.app-shell .select-field > .select2-container:not(:has(> .select2-dropdown)) {
  position: relative !important;
  top: auto !important;
  left: auto !important;
}

/* A receipt printed from the page itself, rather than through printThis.

   The row actions and the detail dialogs fetch a document, write it into #receipt_section and
   call window.print() on the page. Nothing loads print.css on that path — it goes into the
   printThis iframe only — so the document kept the screen's card chrome: bordered, filled
   blocks stacked down the sheet, and a products table free to run past the paper, which cut
   the last columns off a purchase.

   Same treatment as print.css gives the iframe, scoped to #receipt_section so it can reach
   nothing else, and only while printing. */

@media print {
  body.app-ui.printing-receipt #receipt_section [class*="-card"],
    body.app-ui.printing-receipt #receipt_section [class*="-panel"],
    body.app-ui.printing-receipt #receipt_section [class*="-overview"],
    body.app-ui.printing-receipt #receipt_section [class*="-totals"],
    body.app-ui.printing-receipt #receipt_section [class*="-payments"],
    body.app-ui.printing-receipt #receipt_section [class*="-note"] {
    margin: 0 0 9px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  /* Supplier, business and the reference details read across, not down. */

  body.app-ui.printing-receipt #receipt_section [class*="-overview"],
    body.app-ui.printing-receipt #receipt_section [class*="-note-grid"] {
    display: flex !important;
    gap: 20px !important;
    align-items: flex-start;
  }

  body.app-ui.printing-receipt #receipt_section [class*="-overview"] > [class*="-card"],
    body.app-ui.printing-receipt #receipt_section [class*="-note-grid"] > [class*="-note"] {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  body.app-ui.printing-receipt #receipt_section [class*="-section-label"],
    body.app-ui.printing-receipt #receipt_section [class*="-card-label"] {
    margin: 0 0 3px !important;
    padding: 0 !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: .04em;
    text-transform: uppercase;
  }

  /* The table has to fit the paper: cells wrap rather than forcing it wider than the page. */

  body.app-ui.printing-receipt #receipt_section table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: auto !important;
    border-collapse: collapse !important;
  }

  body.app-ui.printing-receipt #receipt_section table th,
    body.app-ui.printing-receipt #receipt_section table td {
    padding: 4px 6px !important;
    border: 0 !important;
    border-bottom: 1px solid #ddd !important;
    font-size: 11px !important;
    white-space: normal !important;
    word-break: break-word;
    background: transparent !important;
  }

  body.app-ui.printing-receipt #receipt_section table th {
    font-weight: 700 !important;
    text-align: left;
  }

  body.app-ui.printing-receipt #receipt_section table img {
    max-width: 46px !important;
    height: auto !important;
  }

  /* The activity log is a screen record, not part of the document. */

  body.app-ui.printing-receipt #receipt_section [class*="-activities"] {
    display: none !important;
  }

  /* The heading icon is decoration; the buttons are already excluded by .no-print. */

  body.app-ui.printing-receipt #receipt_section [class*="-header"] svg,
    body.app-ui.printing-receipt #receipt_section [class*="-heading"] svg {
    display: none !important;
  }
}

/* ---------------------------------------------------------- autocomplete fallback
   jQuery UI drops every suggestion list on <body> as a bare
   `.ui-autocomplete.ui-menu`, and no jQuery UI theme stylesheet is loaded any more.
   Screens that were migrated one at a time hooked their own panel class
   (.sell-product-autocomplete, .po-product-autocomplete, and so on); the ones that
   were not — the Product Sell Report filter, bulk edit, combo products, modifier
   sets, purchase return — had no styling at all, so the list rendered transparent
   and unbounded over the page beneath it.

   This is the panel every autocomplete gets when it asks for nothing else. It is
   wrapped in :where() so its specificity stays at `body.app-ui` alone and any
   screen-specific panel above still wins, and it carries no !important for the
   same reason. */

body.app-ui :where(.ui-autocomplete){
  box-sizing:border-box;
  max-width:calc(100vw - 32px);
  max-height:320px;
  margin:6px 0 0;
  padding:6px;
  overflow-x:hidden;
  overflow-y:auto;
  border:1px solid color-mix(in srgb,var(--brand) 34%,var(--border));
  border-radius:12px;
  background:var(--surface);
  color:var(--text);
  box-shadow:0 22px 48px -20px rgba(16,32,24,.42),0 8px 18px -12px rgba(21,154,77,.3);
  font-family:'Plus Jakarta Sans','Noto Sans Khmer',system-ui,sans-serif;
  font-size:12.5px;
  list-style:none;
  z-index:100000
}

body.app-ui :where(.ui-autocomplete .ui-menu-item){
  margin:0 0 3px;
  padding:0;
  border:0;
  background:transparent;
  list-style:none
}

body.app-ui :where(.ui-autocomplete .ui-menu-item:last-child){
  margin-bottom:0
}

/* jQuery UI 1.12 wraps each option in a <div class="ui-menu-item-wrapper">; the older
   markup some screens still render puts the <a> straight in the <li>. Both are the row. */

body.app-ui :where(.ui-autocomplete .ui-menu-item-wrapper,.ui-autocomplete .ui-menu-item>a){
  display:block;
  margin:0;
  padding:9px 11px;
  border:1px solid transparent;
  border-radius:9px;
  background:transparent;
  color:var(--text-2);
  line-height:1.45;
  text-decoration:none;
  white-space:normal;
  word-break:break-word;
  cursor:pointer
}

body.app-ui :where(.ui-autocomplete .ui-menu-item-wrapper.ui-state-active,.ui-autocomplete .ui-menu-item-wrapper:hover,.ui-autocomplete .ui-menu-item>a.ui-state-active,.ui-autocomplete .ui-menu-item>a:hover){
  border-color:color-mix(in srgb,var(--brand) 25%,var(--border));
  background:var(--brand-weak);
  color:var(--text);
  box-shadow:inset 3px 0 0 var(--brand)
}

/* "No results" and other non-selectable rows read as options unless they are dimmed. */

body.app-ui :where(.ui-autocomplete .ui-state-disabled){
  opacity:1
}

body.app-ui :where(.ui-autocomplete .ui-state-disabled .ui-menu-item-wrapper){
  background:transparent;
  color:var(--text-3);
  cursor:default
}

/* ------------------------------------------------------- CRM: Needs follow-up queue
   The third tab on CRM → Follow ups: the contacts nobody has written a follow-up for.
   It reuses the follow-up tables' cells and the leads listing's overdue palette, so the
   queue reads as the same screen rather than a fourth style of table. */

/* Two rows of one switch. The top row is work that exists, the bottom row work that is
   missing, and only one button across both is pressed at a time — they are one selection. */

.app-shell .crm-queue-groups{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:10px 22px;
  margin:0 0 10px
}

.app-shell .crm-queue-group{
  display:flex;
  min-width:0;
  flex-direction:column;
  gap:6px
}

.app-shell .crm-queue-group__label{
  color:var(--text-3);
  font-size:10px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase
}

.app-shell .crm-queue-caption{
  margin:0 0 12px;
  color:var(--text-3);
  font-size:12px
}

.app-shell .crm-queue-switch-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0 0 12px
}

/* One control, two states, each carrying its own total. It replaced a row of three counter
   tiles above a second row repeating the same two words — the count belongs on the thing you
   press, and the table now starts on the first screen. */

.app-shell .crm-queue-switch{
  display:inline-flex;
  padding:4px;
  border:1px solid var(--border);
  border-radius:12px;
  background:var(--surface-2);
  gap:4px
}

.app-shell .crm-queue-switch>button{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 13px;
  border:1px solid transparent;
  border-radius:9px;
  background:transparent;
  color:var(--text-2);
  font-size:12.5px;
  font-weight:700;
  line-height:1;
  cursor:pointer
}

.app-shell .crm-queue-switch>button:hover{
  color:var(--text)
}

.app-shell .crm-queue-switch>button:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:1px
}

.app-shell .crm-queue-switch>button.is-active{
  border-color:var(--border);
  background:var(--surface);
  color:var(--text);
  box-shadow:var(--shadow-sm)
}

.app-shell .crm-queue-switch>button svg{
  width:15px;
  height:15px;
  color:var(--text-3)
}

.app-shell .crm-queue-switch>button.is-active svg{
  color:var(--brand-strong)
}

.app-shell .crm-queue-switch>button em{
  padding:2px 7px;
  border-radius:6px;
  background:var(--surface);
  color:var(--text-3);
  font-size:11.5px;
  font-style:normal;
  font-weight:800
}

.app-shell .crm-queue-switch>button.is-active em{
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .crm-queue-hint{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin:0;
  color:var(--text-3);
  font-size:11.5px;
  font-weight:600
}

.app-shell .crm-queue-hint strong{
  color:var(--text-2);
  font-weight:800
}

/* The toolbar's filter slot has no layout of its own — every screen that uses it lays it out.
   Left to the default the three pickers stacked down the middle of the bar. */

.app-shell .crm-queue-toolbar .table-toolbar-filters{
  display:flex;
  flex:1 1 auto;
  flex-wrap:wrap;
  align-items:center;
  gap:8px
}

.app-shell .crm-queue-toolbar .crm-toolbar-select{
  min-width:160px
}

/* The console's filters, above the cards rather than inside one.
   Four of them beside a 360px search and six export buttons could not fit on one line, so they
   wrapped and pushed Print, CSV, Excel, PDF and Columns off the row. They also govern both tables
   here, and a toolbar belongs to one. Given their own band they lay out on a grid that keeps every
   picker the same width instead of leaving the last one stranded on a line of its own. */

.app-shell .crm-queue-filter-bar{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  align-items:center;
  gap:9px;
  margin:0 0 13px;
  padding:11px 13px;
  border:1px solid var(--border-2);
  border-radius:12px;
  background:var(--surface)
}

.app-shell .crm-queue-filter-bar .crm-toolbar-select{
  min-width:0
}

.app-shell .crm-queue-filter-bar .select2-container{
  width:100%!important
}

.app-shell .crm-queue-filter-bar .select2-container .select2-selection--single{
  height:38px
}

.app-shell .crm-queue-filter-bar .select2-container--default .select2-selection--single .select2-selection__rendered{
  line-height:36px;
  font-size:12px;
  font-weight:650
}

.app-shell .crm-queue-filter-bar .select2-container--default .select2-selection--single .select2-selection__arrow{
  height:36px
}

@media(max-width:520px){
  .app-shell .crm-queue-filter-bar{
    grid-template-columns:1fr
  }
}

/* The date spans, laid out rather than folded into a dropdown.
   Eight short labels are read faster on show than opened, and which one is on is visible without
   clicking. Lighter than the WORK ON switch above it on purpose: that one chooses *what work you
   are looking at*, this one only narrows it, and two identical-looking rows of buttons would read
   as one control with eleven options. */

.app-shell .crm-queue-range-bar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin:-4px 0 13px
}

.app-shell .crm-queue-range{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  min-width:0
}

/* `hidden` is an attribute, and a display rule outranks it — without this every list's spans drew
   at once, so Today sat above Yesterday, Next week and Last month all on one line. Only the group
   belonging to the list on screen is shown. */

.app-shell .crm-queue-range-bar[hidden],.app-shell .crm-queue-range[hidden]{
  display:none
}

.app-shell .crm-queue-range>button{
  padding:5px 11px;
  border:1px solid var(--border-2);
  border-radius:999px;
  background:var(--surface);
  color:var(--text-2);
  font-size:11.5px;
  font-weight:700;
  line-height:1.35;
  white-space:nowrap;
  cursor:pointer;
  transition:border-color .12s,background .12s,color .12s
}

.app-shell .crm-queue-range>button:hover{
  border-color:var(--border);
  background:var(--surface-2);
  color:var(--text)
}

.app-shell .crm-queue-range>button:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:1px
}

.app-shell .crm-queue-range>button.is-active{
  border-color:color-mix(in srgb,var(--brand) 35%,var(--border));
  background:var(--brand-weak);
  color:var(--brand-strong)
}

@media(max-width:640px){
  .app-shell .crm-queue-range-bar{
    align-items:flex-start;
    flex-direction:column;
    gap:7px
  }
}

/*
 * The console's type scale, set once here.
 *
 * Everything on the row had grown to roughly the same weight — a 13px bold title, a 13px bold log
 * count, a 12px date and an 11px pill all competing — so nothing led and the eye had to read every
 * cell to find the one it wanted. Three steps now: 11.5px for the two things a row is identified
 * by (who and what), 10.5px for the detail under them, 10px for the markers. The title came down
 * furthest because it was the loudest and is the least often what you are scanning for.
 */

.app-shell .crm-queue-table td{
  padding-top:11px!important;
  padding-bottom:11px!important;
  vertical-align:middle
}

/* The category under the title: a quiet second line, not a second title. */

.app-shell .crm-queue-table .followup-record-cell>span{
  color:var(--text-3);
  font-size:10.5px;
  font-weight:600
}

.app-shell .crm-queue-table .followup-record-cell{
  gap:3px;
  min-width:0;
  max-width:250px
}

.app-shell .crm-queue-table thead th:first-child,.app-shell .crm-queue-table tbody td:first-child{
  width:1%;
  white-space:nowrap
}

.app-shell .crm-queue-table thead th:last-child,.app-shell .crm-queue-table tbody td:last-child{
  width:1%;
  white-space:nowrap
}

.app-shell .crm-queue-owner{
  color:var(--text-2);
  font-size:12px;
  font-weight:650
}

.app-shell .crm-queue-unowned{
  color:var(--text-3);
  font-size:12px;
  font-style:italic
}

.app-shell .crm-queue-last{
  color:var(--text-2);
  font-size:11.5px;
  font-weight:650;
  white-space:nowrap
}

.app-shell .crm-queue-never{
  color:var(--text-3);
  font-size:11.5px;
  font-style:italic;
  white-space:nowrap
}

.app-shell .crm-queue-unplanned{
  color:var(--danger);
  font-size:11.5px;
  font-weight:700;
  white-space:nowrap
}

.app-shell .crm-queue-unnamed{
  color:var(--text-3);
  font-style:italic;
  font-weight:600
}

/* An empty list explains itself when a filter is the reason for it. */

.app-shell .crm-queue-empty{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:9px;
  padding:26px 0
}

.app-shell .crm-queue-empty strong{
  color:var(--text-2);
  font-size:12.5px;
  font-weight:700
}

/* ---------------------------------------------------------------- CRM: follow up calendar
   Every planned contact on a grid. Each entry is a log, and it is drawn as a chip — a dot in
   the channel's colour, the time, then who and what — rather than as a solid block of colour.
   A month of solid bars is unreadable at a glance; a column of dots is not, which is the whole
   reason Google's calendar looks the way it does. */

.app-shell .crm-calendar-panel .crm-panel-head{
  align-items:center;
  justify-content:space-between;
  gap:14px
}

.app-shell .crm-calendar-tools{
  margin-left:auto
}

.app-shell .crm-calendar-tools .crm-toolbar-select{
  min-width:200px
}

.app-shell .crm-calendar-legend{
  display:flex;
  flex-wrap:wrap;
  gap:15px;
  margin:0 0 14px;
  padding-bottom:13px;
  border-bottom:1px solid var(--border-2)
}

.app-shell .crm-calendar-legend span{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--text-3);
  font-size:11.5px;
  font-weight:700;
  text-transform:capitalize
}

.app-shell .crm-calendar-legend i{
  width:9px;
  height:9px;
  border-radius:50%
}

.app-shell #crm_followup_calendar{
  font-size:12.5px
}

/* The grid itself: quiet lines, a readable header, today marked but not shouting. */

.app-shell #crm_followup_calendar .fc-day-header{
  padding:9px 0;
  border-color:var(--border-2);
  color:var(--text-3);
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase
}

.app-shell #crm_followup_calendar .fc-day-number{
  padding:7px 9px;
  color:var(--text-2);
  font-size:12px;
  font-weight:700
}

.app-shell #crm_followup_calendar .fc-today .fc-day-number{
  display:inline-grid;
  min-width:23px;
  height:23px;
  place-items:center;
  margin:4px 5px;
  padding:0;
  border-radius:50%;
  background:var(--brand);
  color:#fff
}

.app-shell #crm_followup_calendar .fc-today{
  background:transparent!important
}

.app-shell #crm_followup_calendar .fc-day-top.fc-other-month{
  opacity:.35
}

.app-shell #crm_followup_calendar td,.app-shell #crm_followup_calendar th{
  border-color:var(--border-2)
}

.app-shell #crm_followup_calendar .fc-axis{
  color:var(--text-3);
  font-size:10.5px;
  font-weight:600
}

/* The chip. Transparent, so a month reads as a list of appointments rather than a wall of paint. */

.app-shell #crm_followup_calendar .fc-event{
  padding:1px 4px;
  border:0!important;
  border-radius:6px;
  background:transparent!important;
  color:var(--text)!important;
  font-size:11.5px;
  font-weight:600;
  cursor:pointer
}

.app-shell #crm_followup_calendar .fc-event:hover{
  background:var(--surface-2)!important
}

.app-shell #crm_followup_calendar .fc-content{
  display:flex;
  align-items:center;
  gap:6px;
  min-width:0
}

.app-shell #crm_followup_calendar .crm-cal-dot{
  width:8px;
  height:8px;
  flex:none;
  border-radius:50%
}

.app-shell #crm_followup_calendar .crm-cal-time{
  flex:none;
  color:var(--text-3);
  font-size:11px;
  font-variant-numeric:tabular-nums
}

.app-shell #crm_followup_calendar .crm-cal-title{
  overflow:hidden;
  color:var(--text-2);
  text-overflow:ellipsis;
  white-space:nowrap
}

/* In the timed grids the chip sits inside a block, so it keeps a tint to show its extent. */

.app-shell #crm_followup_calendar .fc-time-grid-event{
  padding:3px 5px;
  background:var(--surface)!important;
  box-shadow:inset 2px 0 0 var(--brand)
}

.app-shell #crm_followup_calendar .fc-time-grid-event .crm-cal-title{
  white-space:normal
}

/* A settled follow up is history: present, but not competing with live work. */

/* Settled work is history: it steps back, but it is not struck out. A won sale is a success,
   and a line through it reads as cancelled. */

.app-shell #crm_followup_calendar .fc-event-settled{
  opacity:.45
}

/* A contact already made, on a follow up that is still running. Faded rather than struck through:
   a call that happened is a good outcome, and a line through it reads as cancelled. */

.app-shell #crm_followup_calendar .fc-event-log-completed{
  opacity:.5
}

/* A contact that was dropped without being made. Hollow, so it is visibly not work that happened. */

.app-shell #crm_followup_calendar .fc-event-log-cancelled{
  opacity:.45;
  background:transparent!important;
  border-style:dashed!important
}

.app-shell #crm_followup_calendar .fc-event-log-cancelled .fc-title,.app-shell #crm_followup_calendar .fc-event-log-cancelled .fc-time{
  color:var(--text-3)!important
}

.app-shell #crm_followup_calendar .fc-list-item:hover td{
  background:var(--surface-2)
}

.app-shell #crm_followup_calendar .fc-list-heading td{
  padding:8px 12px;
  background:var(--surface-2);
  color:var(--text-2);
  font-size:11.5px;
  font-weight:800
}

.app-shell #crm_followup_calendar .fc-list-empty{
  padding:34px 0;
  color:var(--text-3);
  font-size:12.5px
}

@media(max-width:760px){
  .app-shell .crm-calendar-panel .crm-panel-head{
    align-items:stretch;
    flex-direction:column
  }

  .app-shell .crm-calendar-tools{
    margin-left:0
  }

  .app-shell #crm_followup_calendar .fc-toolbar{
    gap:8px
  }
}

.app-shell .crm-queue-overdue{
  display:inline-flex;
  align-items:center;
  width:-moz-max-content;
  width:max-content;
  padding:2px 8px;
  border-radius:7px;
  font-size:10px;
  font-weight:750;
  white-space:nowrap
}

.app-shell .crm-queue-overdue.is-due{
  background:#fdf3e0;
  color:#c07c10
}

.app-shell .crm-queue-overdue.is-late{
  background:var(--danger-weak);
  color:var(--danger)
}

.app-shell .crm-queue-overdue.is-never{
  background:transparent;
  color:var(--text-3)
}

.app-shell .crm-queue-create{
  white-space:nowrap
}

/* Contact cell on the Never followed up list: the name leads, and what would otherwise have been
   two more columns — type and phone — sit under it as quiet metadata. */

.app-shell .crm-queue-contact{
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0
}

.app-shell .crm-queue-contact__name{
  color:var(--text);
  font-size:11.5px;
  font-weight:720
}

.app-shell .crm-queue-contact__meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:7px
}

/* Why a name has no detail link: the contact was deleted. Muted, not a warning — the deletion is
   a fact about the record, not a fault in the row, and the follow up still has to be closed. */

.app-shell .crm-contact-gone{
  display:inline-flex;
  align-items:center;
  gap:4px;
  margin-top:3px;
  padding:2px 6px;
  border-radius:6px;
  background:var(--surface-3);
  color:var(--text-3);
  font-size:9.5px;
  font-weight:700;
  letter-spacing:.02em;
  white-space:nowrap;
  cursor:help
}

.app-shell .crm-contact-gone svg{
  width:11px;
  height:11px;
  flex:none
}

/* A retired lead. It stays on the list unless filtered out, so the row has to say which it is —
   muted rather than red, because being inactive is a decision somebody made, not a fault. */

.app-shell .crm-lead-inactive{
  display:inline-flex;
  align-items:center;
  padding:1px 6px;
  border-radius:6px;
  background:var(--surface-3);
  color:var(--text-3);
  font-size:9px;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  white-space:nowrap
}

.app-shell .crm-queue-added{
  display:flex;
  flex-direction:column;
  gap:1px;
  white-space:nowrap
}

.app-shell .crm-queue-added span{
  color:var(--text-2);
  font-size:12px
}

.app-shell .crm-queue-added small{
  color:var(--text-3);
  font-size:11px
}

/* The next contact's own words under its date — when to act, and what to say. */

.app-shell .crm-queue-window__to em{
  color:var(--text-2);
  font-style:normal;
  font-weight:700
}

/* These lists are worked down a row at a time, so more of them on screen is the point. */

.app-shell .crm-queue-table tbody td{
  padding-top:9px!important;
  padding-bottom:9px!important
}

/* Needs continuing lists cases, not contacts: when the case ran out, how much work was logged
   against it, and the two endings it can have. */

.app-shell .crm-queue-window{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px
}

/* The log count is a button: it opens the trail of every contact made on this follow up. */

.app-shell .crm-queue-activity{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:1px;
  padding:4px 8px;
  border:1px solid transparent;
  border-radius:8px;
  background:transparent;
  text-align:left;
  cursor:pointer
}

.app-shell button.crm-queue-activity:hover{
  border-color:color-mix(in srgb,var(--brand) 26%,var(--border));
  background:var(--brand-weak)
}

/* A contact still ahead of the follow up: it is being carried, not forgotten. */

.app-shell .crm-queue-planned{
  margin-top:2px;
  padding:1px 6px;
  border-radius:6px;
  background:var(--blue-weak);
  color:var(--blue);
  font-size:10px;
  font-style:normal;
  font-weight:700
}

.app-shell .followup-record-cell small{
  color:var(--text-3);
  font-size:10px
}

/* The two things on a row that open something: the follow up's title, and its log count. Both
   read as links so it is never a guess which of the two a click will show. */

/* The title is a button now, so it no longer inherits the containment the <strong> had and was
   spilling out of its column across the next one. It keeps to two lines and then trims. */

.app-shell .followup-record-open{
  display:-webkit-box;
  overflow:hidden;
  width:100%;
  max-width:100%;
  padding:0;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  border:0;
  background:none;
  color:var(--text);
  font-size:11.5px;
  font-weight:720;
  line-height:1.35;
  text-align:left;
  text-overflow:ellipsis;
  word-break:break-word;
  cursor:pointer
}

.app-shell .followup-record-open:hover{
  color:var(--brand-strong);
  text-decoration:underline
}

.app-shell .crm-queue-activity strong{
  color:var(--text);
  font-size:11.5px;
  font-weight:780
}

.app-shell .crm-queue-activity span{
  color:var(--text-3);
  font-size:10.5px
}

.app-shell .crm-queue-continue-actions{
  display:flex;
  align-items:center;
  gap:7px;
  white-space:nowrap
}

.app-shell .crm-queue-card[hidden]{
  display:none
}

.app-shell .crm-queue-window{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:2px;
  min-width:210px;
  max-width:320px
}

/* The date and how late it is, on one line. They were two columns saying one thing — the pill is
   only the date measured against today, and it means nothing sitting on its own. It wraps below
   the date rather than pushing the column wider when the row is narrow. */

.app-shell .crm-queue-window__head{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  max-width:100%
}

.app-shell .crm-queue-window__to{
  display:block;
  overflow:hidden;
  max-width:100%;
  text-overflow:ellipsis;
  color:var(--text-3);
  font-size:10.5px;
  white-space:nowrap
}

.app-shell .crm-queue-window__task{
  display:flex;
  align-items:baseline;
  gap:5px;
  overflow:hidden;
  max-width:100%;
  color:var(--text-3);
  font-size:11px;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .crm-queue-window__task b{
  flex:0 0 auto;
  font-weight:650;
  font-variant-numeric:tabular-nums
}

.app-shell .crm-queue-window__task.is-more{
  color:var(--text-3);
  font-weight:700
}

.app-shell .crm-queue-owner-cell{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px
}

/* The next hour still ahead carries no badge and no pulsing dot: every hour on a day reads as
   plain text, the same on the queue and on a contact's Follow up tab. Only its countdown is
   still set apart, and only as text. */

.app-shell .crm-queue-window__task.is-next-up em{
  font-size:10px;
  font-style:normal;
  font-weight:700;
  opacity:.8
}

/* The outcome on the hour it came of — "2:06 PM Task F · No answer". It used to sit in a
   separate green block above, which repeated the same event in different words. */

.app-shell .crm-queue-window__task i{
  flex:0 0 auto;
  color:var(--text-3);
  font-size:10px;
  font-style:normal;
  font-weight:700
}

.app-shell .crm-queue-window__task i::before{
  content:"\00b7 ";
  font-weight:400
}

.app-shell .crm-queue-window__task.is-past{
  color:var(--text-3);
  opacity:.65
}

.app-shell .crm-queue-window__task.is-past b{
  font-weight:600
}

.app-shell .crm-queue-window__task.is-collapsed{
  display:none
}

.app-shell .crm-queue-window__group{
  display:block;
  margin-top:3px;
  color:var(--text-3);
  font-size:9px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase
}

.app-shell .crm-queue-window__group.is-upcoming{
  color:var(--brand-strong)
}

/* Quiet, and last. Highlighted and first, it was the boldest thing in the cell while being
   the least actionable — the eye found history before it found the work. */

.app-shell .crm-queue-window__latest{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  -moz-column-gap:5px;
       column-gap:5px;
  row-gap:1px;
  width:100%;
  max-width:100%;
  margin-top:5px;
  padding:5px 0 0;
  border:0;
  border-top:1px solid var(--border);
  background:none
}

.app-shell .crm-queue-window__latest small{
  color:var(--text-3);
  font-size:8.5px;
  font-weight:700;
  letter-spacing:.05em;
  opacity:.8;
  text-transform:uppercase
}

.app-shell .crm-queue-window__latest b{
  color:var(--text-3);
  font-size:10px;
  font-weight:600
}

.app-shell .crm-queue-window__latest time{
  color:var(--text-3);
  font-size:9px;
  white-space:nowrap
}

.app-shell .crm-queue-window__latest>span{
  flex:1 0 100%;
  max-width:100%;
  overflow:hidden;
  color:var(--text-3);
  font-size:10px;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .crm-queue-task-more{
  display:block;
  width:-moz-fit-content;
  width:fit-content;
  margin:1px 0;
  padding:0;
  border:0;
  background:none;
  color:var(--blue);
  font-size:10.5px;
  font-weight:700;
  cursor:pointer
}

.app-shell .crm-queue-task-more:hover{
  text-decoration:underline
}

.app-shell .crm-queue-overdue.is-live{
  background:var(--brand-weak);
  color:var(--brand-strong)
}

.app-shell .crm-queue-overdue.is-upcoming{
  background:var(--blue-weak);
  color:var(--blue)
}

.app-shell .crm-close-case-body{
  display:grid;
  gap:9px;
  padding:16px 18px
}

/* The bulk bar only exists while something is ticked, so it sits under the card rather than
   holding an empty strip of surface open. */

.app-shell .crm-queue-bulk-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-top:12px;
  margin-bottom:12px;
  padding:11px 14px;
  border:1px solid color-mix(in srgb,var(--brand) 30%,var(--border));
  border-radius:11px;
  background:var(--brand-weak)
}

/* It is shown by clearing the `hidden` attribute, and a display rule outranks that. Both bars
   would otherwise stand open at once, each offering to act on the other list's selection. */

.app-shell .crm-queue-bulk-bar[hidden]{
  display:none
}

.app-shell .crm-queue-bulk-bar>span{
  color:var(--brand-strong);
  font-size:12.5px;
  font-weight:700
}

@media(max-width:760px){
  .app-shell .crm-queue-switch{
    width:100%
  }

  .app-shell .crm-queue-switch>button{
    flex:1;
    justify-content:center
  }
}

@media(max-width:640px){
  .app-shell .crm-queue-bulk-bar{
    align-items:stretch;
    flex-direction:column
  }

  .app-shell .crm-queue-toolbar .crm-toolbar-select{
    min-width:0;
    flex:1 1 45%
  }
}

/* ── In-use locks: Telegram templates & Auto Message plans ──────────────────────────────────
   A template a plan points at, and a message a customer is partway through, are setup someone
   built. The controls that would strand it are shown locked with the reason attached, rather
   than being offered and then refused by the server. */

.app-shell .telegram-usage-cell{
  display:flex;
  flex-wrap:wrap;
  gap:4px
}

.app-shell .repair-invoice-row-actions .table-action-menu>li>a.invoice-menu-button.is-locked{
  color:var(--text-3);
  cursor:not-allowed
}

.app-shell .repair-invoice-row-actions .table-action-menu>li>a.invoice-menu-button.is-locked:hover{
  background:var(--warn-weak);
  color:var(--warn)
}

.app-shell .telegram-template-lock-note{
  display:flex;
  align-items:flex-start;
  gap:9px;
  margin-bottom:14px;
  padding:10px 12px;
  border:1px solid color-mix(in srgb,var(--warn) 35%,transparent);
  border-radius:10px;
  background:var(--warn-weak);
  color:var(--text-2)
}

.app-shell .telegram-template-lock-note>svg{
  flex:none;
  margin-top:1px;
  color:var(--warn)
}

.app-shell .telegram-template-lock-note strong{
  display:block;
  font-size:12.5px;
  font-weight:650;
  line-height:1.5
}

.app-shell .telegram-template-lock-note small{
  display:block;
  margin-top:2px;
  color:var(--text-3);
  font-size:11.5px;
  font-weight:700
}

.app-shell .telegram-lock-hint{
  display:inline-flex;
  align-items:center;
  gap:5px;
  color:var(--warn)
}

.app-shell .settings-check.is-locked{
  cursor:not-allowed;
  opacity:.72
}

.app-shell .settings-check.is-locked>svg{
  color:var(--warn)
}

.app-shell .auto-message-live-note{
  border:1px solid color-mix(in srgb,var(--warn) 35%,transparent);
  background:var(--warn-weak);
  color:var(--text-2)
}

.app-shell .auto-message-live-note>svg{
  color:var(--warn)
}

.app-shell .auto-message-step.is-locked{
  border-color:color-mix(in srgb,var(--warn) 42%,var(--border))
}

.app-shell .auto-message-step-lock{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:3px 8px;
  border-radius:999px;
  background:var(--warn-weak);
  color:var(--warn);
  font-size:11px;
  font-weight:800;
  white-space:nowrap;
  cursor:help
}

.app-shell .auto-message-step-lock>svg{
  flex:none
}

/* Save stays idle until the form actually differs from what is stored, so the only click the
   button offers is one that changes something. */

.app-shell .form-submit-button.is-idle{
  opacity:.55;
  cursor:not-allowed
}

.app-shell .auto-message-step-remove[aria-disabled="true"]{
  border-color:var(--border);
  color:var(--text-3);
  cursor:not-allowed
}

.app-shell .auto-message-step-remove[aria-disabled="true"]:hover{
  border-color:var(--border);
  background:var(--surface)
}

.app-shell .auto-message-plan-card-actions .auto-message-plan-delete.is-locked{
  border-color:var(--border);
  color:var(--text-3);
  cursor:not-allowed
}

.app-shell .auto-message-plan-card-actions .auto-message-plan-delete.is-locked:hover{
  border-color:var(--border);
  background:var(--surface);
  color:var(--text-3)
}

/* A frozen message is read as facts, not as controls nobody may touch. */

.app-shell .auto-message-step-facts{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:10px 18px;
  padding:12px
}

.app-shell .auto-message-fact>span{
  display:block;
  color:var(--text-3);
  font-size:10.5px;
  font-weight:700;
  letter-spacing:.02em;
  text-transform:uppercase
}

.app-shell .auto-message-fact>strong{
  display:block;
  margin-top:3px;
  overflow:hidden;
  color:var(--text);
  font-size:12.5px;
  font-weight:700;
  text-overflow:ellipsis;
  white-space:nowrap
}

.app-shell .auto-message-step.is-frozen{
  background:var(--surface-2)
}

.app-shell .auto-message-step.is-frozen .auto-message-step-head{
  background:var(--surface)
}

/* ---------------------------------------------------------------------------------------
   One gutter per dialog edge, everywhere.

   Two were being paid for the same edge: the overlay's own padding and then a margin on the
   dialog inside it. Thirty-odd dialogs each set that margin themselves — 6px here, 10px
   there, 12px on the purchase order sheet — so on a 375px screen a fifth of the width and a
   band top and bottom went before the form started, and no two dialogs agreed on how much.

   The overlay keeps 4px so the sheet still reads as sitting over the page; the dialog gives
   up its margin. Stated last and with !important because it has to outrank the per-dialog
   rules above rather than be listed alongside them. Only .modal-dialog inside a .modal is
   touched, so the small centred confirm box (.swal-modal) keeps its own shape.

   A dialog whose height is written as calc(100dvh - <chrome>) now has more room than its
   number claims, never less — the chrome only ever shrinks here, so nothing can overflow. */

@media(max-width:680px){
  html body.app-ui .modal{
    padding:6px 4px;
    padding-left:4px!important;
    padding-right:4px!important
  }

  body.app-ui .modal>.modal-dialog{
    width:100%!important;
    margin:2px auto!important
  }

  /* And the same again one layer in: 18px of body padding either side of a 375px screen is
     another tenth of the width, before any field has been drawn.

     No !important here, deliberately. These are plain two-class selectors stated last, so
     they outrank the dozens of per-dialog paddings written the same way — but a dialog that
     says .modal-body.x-body, or !important, or names its content class through an ancestor,
     still wins. That is the line: a dialog laying its body out as a grid or a split pane sets
     0 on purpose, and this must not reach it. The shared form dialog's own three rules sit
     above these, so it is carried along too. */

  body.app-ui .modal-body{
    padding:12px
  }

  body.app-ui .modal-header,body.app-ui .modal-footer{
    padding:11px 12px
  }
}

/* ---------------------------------------------------------------------------
   Repair · notification settings
   A grid of switches: nine moments down, three channels across, twice over for
   the two audiences. Read as a table because that is what it is - the question
   is always "this moment, that channel", and a column of pills hides the shape.
   --------------------------------------------------------------------------- */

.app-shell .repair-notify-intro{
  margin:0 0 10px;
  color:var(--text-2);
  font-size:13px;
  max-width:70ch
}

/* What the three columns mean, said once. A header cell has no room for it and a tooltip is a thing
   nobody hovers over before ticking a box. */

.app-shell .repair-notify-legend{
  display:flex;
  flex-wrap:wrap;
  gap:6px 20px;
  margin:0 0 16px;
  padding:0;
  list-style:none
}

.app-shell .repair-notify-legend li{
  color:var(--text-3,#94a3b8);
  font-size:12.5px
}

.app-shell .repair-notify-legend b{
  color:var(--text-2);
  font-weight:600
}

.app-shell .repair-notify-warning{
  display:flex;
  gap:8px;
  align-items:flex-start;
  margin:0 0 14px;
  padding:9px 12px;
  border:1px solid var(--warning-border,#fcd34d);
  background:var(--warning-bg,#fffbeb);
  color:var(--warning-text,#92400e);
  border-radius:8px;
  font-size:12.5px
}

.app-shell .repair-notify-block+.repair-notify-block{
  margin-top:22px
}

.app-shell .repair-notify-table-wrap{
  overflow-x:auto;
  border:1px solid var(--border-2);
  border-radius:10px
}

.app-shell .repair-notify-table{
  width:100%;
  min-width:720px;
  border-collapse:collapse;
  font-size:13px
}

.app-shell .repair-notify-table thead th{
  background:var(--surface-2,#f8fafc);
  text-align:center;
  font-weight:600;
  color:var(--text-2);
  padding:9px 12px;
  border-bottom:1px solid var(--border-2);
  white-space:nowrap;
  width:120px
}

.app-shell .repair-notify-table th.repair-notify-moment{
  text-align:left;
  width:auto
}

.app-shell .repair-notify-table tbody th{
  text-align:left;
  font-weight:500;
  color:var(--text-1);
  padding:10px 12px
}

.app-shell .repair-notify-table td{
  padding:8px 12px;
  vertical-align:middle;
  text-align:center
}

.app-shell .repair-notify-table tbody tr+tr th,.app-shell .repair-notify-table tbody tr+tr td{
  border-top:1px solid var(--border-1,#f1f5f9)
}

.app-shell .repair-notify-table tbody tr:hover th,.app-shell .repair-notify-table tbody tr:hover td{
  background:var(--surface-2,#f8fafc)
}

/* Statuses come from the business's own rows and the rest are fixed, so the grid says which is which
   rather than leaving someone to guess why "Delayed" and "Invoice created" sit in one list. */

.app-shell .repair-notify-group th{
  background:var(--surface-2,#f8fafc);
  text-align:left;
  padding:11px 12px 8px
}

.app-shell .repair-notify-group-name{
  display:block;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--text-2)
}

.app-shell .repair-notify-group-help{
  display:block;
  margin-top:2px;
  font-weight:400;
  font-size:11.5px;
  letter-spacing:0;
  text-transform:none;
  color:var(--text-3,#94a3b8)
}

.app-shell .repair-notify-table tbody tr.repair-notify-group:hover th{
  background:var(--surface-2,#f8fafc)
}

/* The switch. The label text repeats the column head so a narrow screen, where the
   head has scrolled away, still says which channel is being turned on. */

.app-shell .repair-notify-switch{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin:0;
  cursor:pointer;
  -webkit-user-select:none;
     -moz-user-select:none;
          user-select:none
}

.app-shell .repair-notify-switch input{
  position:absolute;
  opacity:0;
  width:0;
  height:0
}

.app-shell .repair-notify-switch-track{
  flex:0 0 auto;
  width:34px;
  height:19px;
  border-radius:999px;
  background:var(--border-2,#e2e8f0);
  position:relative;
  transition:background .15s ease
}

.app-shell .repair-notify-switch-track::after{
  content:"";
  position:absolute;
  top:2px;
  left:2px;
  width:15px;
  height:15px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 1px 2px rgba(15,23,42,.25);
  transition:transform .15s ease
}

.app-shell .repair-notify-switch input:checked+.repair-notify-switch-track{
  background:var(--primary,#2563eb)
}

.app-shell .repair-notify-switch input:checked+.repair-notify-switch-track::after{
  transform:translateX(15px)
}

.app-shell .repair-notify-switch input:focus-visible+.repair-notify-switch-track{
  outline:2px solid var(--primary,#2563eb);
  outline-offset:2px
}

.app-shell .repair-settings-actions{
  margin-top:18px
}

@media (max-width:640px){
  .app-shell .repair-notify-table{
    min-width:520px
  }

  .app-shell .repair-notify-table thead th{
    width:84px;
    padding:8px 6px;
    font-size:12px
  }

  .app-shell .repair-notify-table td{
    padding:7px 6px
  }
}

.app-shell .group:last-child .group-last\:hidden.product-bulk-bar{
  display:none!important
}

.app-shell .\[\&\:\:-webkit-details-marker\]\:hidden.product-bulk-bar::-webkit-details-marker{
  display:none!important
}

.placeholder\:font-medium::-moz-placeholder {
  font-weight: 500;
}

.placeholder\:font-medium::placeholder {
  font-weight: 500;
}

.placeholder\:text-gray-500::-moz-placeholder {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity));
}

.placeholder\:text-gray-500::placeholder {
  --tw-text-opacity: 1;
  color: rgb(107 114 128 / var(--tw-text-opacity));
}

.last\:pb-0:last-child {
  padding-bottom: 0px;
}

.focus-within\:border-brand:focus-within {
  border-color: var(--brand);
}

.hover\:-translate-y-0:hover {
  --tw-translate-y: -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));
}

.hover\:-translate-y-0\.5:hover {
  --tw-translate-y: -0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:translate-y-0:hover {
  --tw-translate-y: 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));
}

.hover\:translate-y-0\.5:hover {
  --tw-translate-y: 0.125rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.hover\:scale-110:hover {
  --tw-scale-x: 1.1;
  --tw-scale-y: 1.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));
}

.hover\:border-\[var\(--brand\)\]:hover {
  border-color: var(--brand);
}

.hover\:border-bd2:hover {
  border-color: var(--border-2);
}

.hover\:border-brand:hover {
  border-color: var(--brand);
}

.hover\:border-green-300:hover {
  --tw-border-opacity: 1;
  border-color: rgb(134 239 172 / var(--tw-border-opacity));
}

.hover\:border-red-300:hover {
  --tw-border-opacity: 1;
  border-color: rgb(252 165 165 / var(--tw-border-opacity));
}

.hover\:bg-\[var\(--brand-weak\)\]:hover {
  background-color: var(--brand-weak);
}

.hover\:bg-blue-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(29 78 216 / var(--tw-bg-opacity));
}

.hover\:bg-brand-weak:hover {
  background-color: var(--brand-weak);
}

.hover\:bg-danger-weak:hover {
  background-color: var(--danger-weak);
}

.hover\:bg-gray-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
}

.hover\:bg-gray-50\/60:hover {
  background-color: rgb(249 250 251 / 0.6);
}

.hover\:bg-gray-50\/70:hover {
  background-color: rgb(249 250 251 / 0.7);
}

.hover\:bg-green-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(240 253 244 / var(--tw-bg-opacity));
}

.hover\:bg-red-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(254 242 242 / var(--tw-bg-opacity));
}

.hover\:bg-s2:hover {
  background-color: var(--surface-2);
}

.hover\:from-indigo-600:hover {
  --tw-gradient-from: #4f46e5 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(79 70 229 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.hover\:to-blue-600:hover {
  --tw-gradient-to: #2563eb var(--tw-gradient-to-position);
}

.hover\:text-\[\#467BF5\]:hover {
  --tw-text-opacity: 1;
  color: rgb(70 123 245 / var(--tw-text-opacity));
}

.hover\:text-brand:hover {
  color: var(--brand);
}

.hover\:text-brand-strong:hover {
  color: var(--brand-strong);
}

.hover\:text-gray-800:hover {
  --tw-text-opacity: 1;
  color: rgb(31 41 55 / var(--tw-text-opacity));
}

.hover\:text-green-700:hover {
  --tw-text-opacity: 1;
  color: rgb(21 128 61 / var(--tw-text-opacity));
}

.hover\:text-white:hover {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

.hover\:shadow-md:hover {
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}

.focus\:border-blue-500:focus {
  --tw-border-opacity: 1;
  border-color: rgb(59 130 246 / var(--tw-border-opacity));
}

.focus\:bg-gray-100:focus {
  --tw-bg-opacity: 1;
  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
}

.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.focus\:ring-2:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-\[var\(--brand\)\]:focus {
  --tw-ring-color: var(--brand);
}

.focus\:ring-blue-500:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity));
}

.focus\:ring-brand:focus {
  --tw-ring-color: var(--brand);
}

.focus\:ring-green-500:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(34 197 94 / var(--tw-ring-opacity));
}

.focus\:ring-green-500\/20:focus {
  --tw-ring-color: rgb(34 197 94 / 0.2);
}

.focus\:ring-red-200:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(254 202 202 / var(--tw-ring-opacity));
}

.focus\:ring-red-500\/20:focus {
  --tw-ring-color: rgb(239 68 68 / 0.2);
}

.focus\:ring-offset-2:focus {
  --tw-ring-offset-width: 2px;
}

.active\:from-indigo-700:active {
  --tw-gradient-from: #4338ca var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(67 56 202 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.active\:to-blue-700:active {
  --tw-gradient-to: #1d4ed8 var(--tw-gradient-to-position);
}

.disabled\:pointer-events-none:disabled {
  pointer-events: none;
}

.disabled\:cursor-not-allowed:disabled {
  cursor: not-allowed;
}

.disabled\:opacity-50:disabled {
  opacity: 0.5;
}

.group:last-child .group-last\:hidden {
  display: none;
}

.group[open] .group-open\: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));
}

.peer:checked ~ .peer-checked\:border-brand {
  border-color: var(--brand);
}

.peer:checked ~ .peer-checked\:bg-brand {
  background-color: var(--brand);
}

.peer:checked ~ .peer-checked\:bg-brand-weak {
  background-color: var(--brand-weak);
}

.peer:checked ~ .peer-checked\:bg-surface {
  background-color: var(--surface);
}

.peer:checked ~ .peer-checked\:text-brand {
  color: var(--brand);
}

.has-\[\:checked\]\:border-green-500:has(:checked) {
  --tw-border-opacity: 1;
  border-color: rgb(34 197 94 / var(--tw-border-opacity));
}

.has-\[\:checked\]\:bg-green-50\/60:has(:checked) {
  background-color: rgb(240 253 244 / 0.6);
}

.has-\[\:checked\]\:ring-1:has(:checked) {
  --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);
}

.has-\[\:checked\]\:ring-green-500\/10:has(:checked) {
  --tw-ring-color: rgb(34 197 94 / 0.1);
}

.selected .hs-combo-box-selected\:block {
  display: block;
}

.selected.hs-combo-box-selected\:block {
  display: block;
}

.complete .hs-file-upload-complete\:bg-green-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(22 163 74 / var(--tw-bg-opacity));
}

.complete.hs-file-upload-complete\:bg-green-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(22 163 74 / var(--tw-bg-opacity));
}

@media not all and (min-width: 768px) {
  .max-md\:left-0 {
    left: 0px;
  }

  .max-md\:right-auto {
    right: auto;
  }

  .max-md\:grid {
    display: grid;
  }

  .max-md\:w-full {
    width: 100%;
  }

  .max-md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .max-md\:flex-col-reverse {
    flex-direction: column-reverse;
  }

  .max-md\:items-stretch {
    align-items: stretch;
  }
}

@media not all and (min-width: 640px) {
  .max-sm\:grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}

@media (min-width: 640px) {
  .sm\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .sm\:-mx-5 {
    margin-left: -1.25rem;
    margin-right: -1.25rem;
  }

  .sm\:mt-6 {
    margin-top: 1.5rem;
  }

  .sm\:flex {
    display: flex;
  }

  .sm\:inline-flex {
    display: inline-flex;
  }

  .sm\:h-12 {
    height: 3rem;
  }

  .sm\:w-1\/2 {
    width: 50%;
  }

  .sm\:w-12 {
    width: 3rem;
  }

  .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-\[auto_minmax\(0\2c 1fr\)_minmax\(0\2c 1fr\)\] {
    grid-template-columns: auto minmax(0,1fr) minmax(0,1fr);
  }

  .sm\:grid-cols-\[minmax\(0\2c 3fr\)_minmax\(120px\2c 2fr\)\] {
    grid-template-columns: minmax(0,3fr) minmax(120px,2fr);
  }

  .sm\:flex-row {
    flex-direction: row;
  }

  .sm\:items-start {
    align-items: flex-start;
  }

  .sm\:items-center {
    align-items: center;
  }

  .sm\:justify-start {
    justify-content: flex-start;
  }

  .sm\:justify-between {
    justify-content: space-between;
  }

  .sm\:gap-12 {
    gap: 3rem;
  }

  .sm\:gap-5 {
    gap: 1.25rem;
  }

  .sm\:self-auto {
    align-self: auto;
  }

  .sm\:p-3 {
    padding: 0.75rem;
  }

  .sm\:p-5 {
    padding: 1.25rem;
  }

  .sm\:p-6 {
    padding: 1.5rem;
  }

  .sm\:px-5 {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .sm\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .sm\:text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 768px) {
  .md\:left-8 {
    left: 2rem;
  }

  .md\:right-10 {
    right: 2.5rem;
  }

  .md\:top-5 {
    top: 1.25rem;
  }

  .md\:top-8 {
    top: 2rem;
  }

  .md\:col-span-12 {
    grid-column: span 12 / span 12;
  }

  .md\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .md\:col-span-5 {
    grid-column: span 5 / span 5;
  }

  .md\:col-span-6 {
    grid-column: span 6 / span 6;
  }

  .md\:mb-0 {
    margin-bottom: 0px;
  }

  .md\:mt-5 {
    margin-top: 1.25rem;
  }

  .md\:mt-7 {
    margin-top: 1.75rem;
  }

  .md\:flex {
    display: flex;
  }

  .md\:h-12 {
    height: 3rem;
  }

  .md\:h-16 {
    height: 4rem;
  }

  .md\:w-1\/2 {
    width: 50%;
  }

  .md\:grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .md\:grid-cols-\[1fr_1fr_auto\] {
    grid-template-columns: 1fr 1fr auto;
  }

  .md\:flex-row {
    flex-direction: row;
  }

  .md\:items-end {
    align-items: flex-end;
  }

  .md\:gap-0 {
    gap: 0px;
  }

  .md\:p-6 {
    padding: 1.5rem;
  }

  .md\:text-3xl {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }

  .md\:text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }

  .md\:text-base {
    font-size: 1rem;
    line-height: 1.5rem;
  }

  .md\:text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }

  .md\:text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 1024px) {
  .lg\:col-span-1 {
    grid-column: span 1 / span 1;
  }

  .lg\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .lg\:col-span-5 {
    grid-column: span 5 / span 5;
  }

  .lg\:col-span-6 {
    grid-column: span 6 / span 6;
  }

  .lg\:col-span-7 {
    grid-column: span 7 / span 7;
  }

  .lg\:flex {
    display: flex;
  }

  .lg\:w-16 {
    width: 4rem;
  }

  .lg\:grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .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-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .lg\:flex-row {
    flex-direction: row;
  }

  .lg\:items-start {
    align-items: flex-start;
  }

  .lg\:items-center {
    align-items: center;
  }

  .lg\:p-5 {
    padding: 1.25rem;
  }

  .lg\:p-6 {
    padding: 1.5rem;
  }

  .lg\:px-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .lg\:text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
}

@media (min-width: 1280px) {
  .xl\:col-span-12 {
    grid-column: span 12 / span 12;
  }

  .xl\:col-span-2 {
    grid-column: span 2 / span 2;
  }

  .xl\:col-span-3 {
    grid-column: span 3 / span 3;
  }

  .xl\:col-span-5 {
    grid-column: span 5 / span 5;
  }

  .xl\:col-span-7 {
    grid-column: span 7 / span 7;
  }

  .xl\:block {
    display: block;
  }

  .xl\:grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }

  .xl\:grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .xl\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .xl\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .xl\:grid-cols-\[1\.2fr_\.72fr_1fr_1fr\] {
    grid-template-columns: 1.2fr .72fr 1fr 1fr;
  }

  .xl\:grid-cols-\[minmax\(0\2c 2fr\)_minmax\(320px\2c 1fr\)\] {
    grid-template-columns: minmax(0,2fr) minmax(320px,1fr);
  }

  .xl\:items-start {
    align-items: flex-start;
  }

  .xl\:items-stretch {
    align-items: stretch;
  }

  .xl\:divide-x > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-x-reverse: 0;
    border-right-width: calc(1px * var(--tw-divide-x-reverse));
    border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
  }

  .xl\:divide-y-0 > :not([hidden]) ~ :not([hidden]) {
    --tw-divide-y-reverse: 0;
    border-top-width: calc(0px * calc(1 - var(--tw-divide-y-reverse)));
    border-bottom-width: calc(0px * var(--tw-divide-y-reverse));
  }

  .xl\:bg-gray-100 {
    --tw-bg-opacity: 1;
    background-color: rgb(243 244 246 / var(--tw-bg-opacity));
  }

  .xl\:bg-none {
    background-image: none;
  }

  .xl\:pb-0 {
    padding-bottom: 0px;
  }
}

@media (min-width: 1536px) {
  .\32xl\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.dark\:border-neutral-600:where([data-theme="dark"], [data-theme="dark"] *) {
  --tw-border-opacity: 1;
  border-color: rgb(82 82 82 / var(--tw-border-opacity));
}

.dark\:border-neutral-700:where([data-theme="dark"], [data-theme="dark"] *) {
  --tw-border-opacity: 1;
  border-color: rgb(64 64 64 / var(--tw-border-opacity));
}

.dark\:bg-blue-500:where([data-theme="dark"], [data-theme="dark"] *) {
  --tw-bg-opacity: 1;
  background-color: rgb(59 130 246 / var(--tw-bg-opacity));
}

.dark\:bg-neutral-700:where([data-theme="dark"], [data-theme="dark"] *) {
  --tw-bg-opacity: 1;
  background-color: rgb(64 64 64 / var(--tw-bg-opacity));
}

.dark\:bg-neutral-800:where([data-theme="dark"], [data-theme="dark"] *) {
  --tw-bg-opacity: 1;
  background-color: rgb(38 38 38 / var(--tw-bg-opacity));
}

.dark\:bg-neutral-900:where([data-theme="dark"], [data-theme="dark"] *) {
  --tw-bg-opacity: 1;
  background-color: rgb(23 23 23 / var(--tw-bg-opacity));
}

.dark\:bg-opacity-80:where([data-theme="dark"], [data-theme="dark"] *) {
  --tw-bg-opacity: 0.8;
}

.dark\:fill-neutral-200:where([data-theme="dark"], [data-theme="dark"] *) {
  fill: #e5e5e5;
}

.dark\:text-blue-500:where([data-theme="dark"], [data-theme="dark"] *) {
  --tw-text-opacity: 1;
  color: rgb(59 130 246 / var(--tw-text-opacity));
}

.dark\:text-neutral-200:where([data-theme="dark"], [data-theme="dark"] *) {
  --tw-text-opacity: 1;
  color: rgb(229 229 229 / var(--tw-text-opacity));
}

.dark\:text-neutral-400:where([data-theme="dark"], [data-theme="dark"] *) {
  --tw-text-opacity: 1;
  color: rgb(163 163 163 / var(--tw-text-opacity));
}

.dark\:text-neutral-500:where([data-theme="dark"], [data-theme="dark"] *) {
  --tw-text-opacity: 1;
  color: rgb(115 115 115 / var(--tw-text-opacity));
}

.dark\:text-white:where([data-theme="dark"], [data-theme="dark"] *) {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity));
}

.dark\:hover\:bg-neutral-800:hover:where([data-theme="dark"], [data-theme="dark"] *) {
  --tw-bg-opacity: 1;
  background-color: rgb(38 38 38 / var(--tw-bg-opacity));
}

.dark\:hover\:text-neutral-200:hover:where([data-theme="dark"], [data-theme="dark"] *) {
  --tw-text-opacity: 1;
  color: rgb(229 229 229 / var(--tw-text-opacity));
}

.dark\:focus\:bg-neutral-800:focus:where([data-theme="dark"], [data-theme="dark"] *) {
  --tw-bg-opacity: 1;
  background-color: rgb(38 38 38 / var(--tw-bg-opacity));
}

.\[\&\:\:-webkit-details-marker\]\:hidden::-webkit-details-marker {
  display: none;
}

.\[\&\>\.form-group\]\:m-0>.form-group {
  margin: 0px;
}

.\[\&\>\.form-group\]\:w-full>.form-group {
  width: 100%;
}

@media (min-width: 640px) {
  .\[\&\>label\]\:sm\:col-span-3>label {
    grid-column: span 3 / span 3;
  }
}

.\[\&_\.form-control\]\:w-full .form-control {
  width: 100%;
}

.\[\&_img\]\:h-full img {
  height: 100%;
}

.\[\&_img\]\:w-full img {
  width: 100%;
}

.\[\&_img\]\:object-cover img {
  -o-object-fit: cover;
     object-fit: cover;
}