.hd-helpdesk-surface .hd-btn,
.hd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border-radius: .85rem;
    padding: .62rem 1.05rem;
    font-size: .875rem;
    line-height: 1.25rem;
    font-weight: 800;
    color: #ffffff !important;
    text-decoration: none !important;
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 12px 28px rgba(0,0,0,.22);
    transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.hd-helpdesk-surface .hd-btn:hover,
.hd-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 34px rgba(0,0,0,.30);
}
.hd-helpdesk-surface .hd-btn-sm,
.hd-btn-sm {
    border-radius: .65rem;
    padding: .42rem .78rem;
    font-size: .8125rem;
}
.hd-helpdesk-surface .hd-btn-blue,
.hd-btn-blue { background: #2563eb !important; }
.hd-helpdesk-surface .hd-btn-blue:hover,
.hd-btn-blue:hover { background: #1d4ed8 !important; }
.hd-helpdesk-surface .hd-btn-green,
.hd-btn-green { background: #16a34a !important; }
.hd-helpdesk-surface .hd-btn-green:hover,
.hd-btn-green:hover { background: #15803d !important; }
.hd-helpdesk-surface .hd-btn-amber,
.hd-btn-amber { background: #f59e0b !important; }
.hd-helpdesk-surface .hd-btn-amber:hover,
.hd-btn-amber:hover { background: #d97706 !important; }
.hd-helpdesk-surface .hd-btn-red,
.hd-btn-red { background: #dc2626 !important; }
.hd-helpdesk-surface .hd-btn-red:hover,
.hd-btn-red:hover { background: #b91c1c !important; }
.hd-helpdesk-surface .hd-btn-violet,
.hd-btn-violet { background: #7c3aed !important; }
.hd-helpdesk-surface .hd-btn-violet:hover,
.hd-btn-violet:hover { background: #6d28d9 !important; }

.hd-helpdesk-surface button[type="submit"],
.hd-helpdesk-surface button[data-flux-button][type="submit"] {
    background: #16a34a !important;
    color: #ffffff !important;
    border-color: rgba(255,255,255,.14) !important;
}
.hd-helpdesk-surface button[wire\:click^="reset"],
.hd-helpdesk-surface button[wire\:target^="reset"] {
    background: #f59e0b !important;
    color: #ffffff !important;
    border-color: rgba(255,255,255,.14) !important;
}
.hd-helpdesk-surface button[wire\:click^="edit"],
.hd-helpdesk-surface button[wire\:target^="edit"] {
    background: #2563eb !important;
    color: #ffffff !important;
    border-color: rgba(255,255,255,.14) !important;
}
.hd-helpdesk-surface button[wire\:click^="delete"],
.hd-helpdesk-surface button[wire\:target^="delete"] {
    background: #dc2626 !important;
    color: #ffffff !important;
    border-color: rgba(255,255,255,.14) !important;
}

.hd-select {
    width: 100%;
    min-height: 3.35rem;
    border-radius: 1rem;
    border: 1px solid #3f3f46 !important;
    background: #09090b !important;
    color: #f4f4f5 !important;
    padding: .78rem 3rem .78rem 1rem;
    font-weight: 800;
    outline: none;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 12px 26px rgba(0,0,0,.24);
}
.hd-select:focus {
    border-color: #60a5fa !important;
    box-shadow: 0 0 0 3px rgba(96,165,250,.38), inset 0 1px 0 rgba(255,255,255,.05);
}

.helpdesk-ticket-form,
.helpdesk-ticket-form * {
    -webkit-tap-highlight-color: transparent;
}
.helpdesk-ticket-form input,
.helpdesk-ticket-form textarea,
.helpdesk-ticket-form select,
.helpdesk-ticket-form .select2-container--default .select2-selection--single,
.helpdesk-ticket-form .select2-container--default .select2-selection--multiple,
.helpdesk-ticket-form .select2-container--default .select2-selection__rendered,
.helpdesk-ticket-form .select2-container--default .select2-selection__choice {
    background: #09090b !important;
    background-color: #09090b !important;
    color: #f4f4f5 !important;
    border-color: #3f3f46 !important;
    caret-color: #f4f4f5 !important;
    opacity: 1 !important;
}
.helpdesk-ticket-form input:disabled,
.helpdesk-ticket-form textarea:disabled,
.helpdesk-ticket-form select:disabled,
.helpdesk-ticket-form .select2-container--disabled .select2-selection--single,
.helpdesk-ticket-form .select2-container--disabled .select2-selection--multiple,
.helpdesk-ticket-form [disabled],
.helpdesk-ticket-form [aria-disabled="true"] {
    background: #09090b !important;
    background-color: #09090b !important;
    color: #a1a1aa !important;
    opacity: 1 !important;
}
.helpdesk-ticket-form input:-webkit-autofill,
.helpdesk-ticket-form input:-webkit-autofill:hover,
.helpdesk-ticket-form input:-webkit-autofill:focus,
.helpdesk-ticket-form textarea:-webkit-autofill,
.helpdesk-ticket-form textarea:-webkit-autofill:hover,
.helpdesk-ticket-form textarea:-webkit-autofill:focus,
.helpdesk-ticket-form select:-webkit-autofill,
.helpdesk-ticket-form select:-webkit-autofill:hover,
.helpdesk-ticket-form select:-webkit-autofill:focus {
    -webkit-text-fill-color: #f4f4f5 !important;
    box-shadow: 0 0 0 1000px #09090b inset !important;
    transition: background-color 9999s ease-in-out 0s;
}

.hd-helpdesk-surface .hd-btn,
.hd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border-radius: .85rem;
    padding: .62rem 1.05rem;
    font-size: .875rem;
    line-height: 1.25rem;
    font-weight: 800;
    color: #fff !important;
    text-decoration: none !important;
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 12px 28px rgba(0,0,0,.22);
    transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.hd-helpdesk-surface .hd-btn:hover,
.hd-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 34px rgba(0,0,0,.30);
}

.hd-btn-sm {
    border-radius: .65rem;
    padding: .42rem .78rem;
    font-size: .8125rem;
}

.hd-btn-blue { background: #2563eb !important; }
.hd-btn-blue:hover { background: #1d4ed8 !important; }

.hd-btn-green { background: #16a34a !important; }
.hd-btn-green:hover { background: #15803d !important; }

.hd-btn-amber { background: #f59e0b !important; }
.hd-btn-amber:hover { background: #d97706 !important; }

.hd-btn-red { background: #dc2626 !important; }
.hd-btn-red:hover { background: #b91c1c !important; }

.hd-btn-violet { background: #7c3aed !important; }
.hd-btn-violet:hover { background: #6d28d9 !important; }

.hd-helpdesk-surface button[type="submit"],
.hd-helpdesk-surface button[data-flux-button][type="submit"] {
    background: #16a34a !important;
    color: #fff !important;
    border-color: rgba(255,255,255,.14) !important;
}

.hd-helpdesk-surface button[wire\:click^="reset"],
.hd-helpdesk-surface button[wire\:target^="reset"] {
    background: #f59e0b !important;
    color: #fff !important;
    border-color: rgba(255,255,255,.14) !important;
}

.hd-helpdesk-surface button[wire\:click^="edit"],
.hd-helpdesk-surface button[wire\:target^="edit"] {
    background: #2563eb !important;
    color: #fff !important;
    border-color: rgba(255,255,255,.14) !important;
}

.hd-helpdesk-surface button[wire\:click^="delete"],
.hd-helpdesk-surface button[wire\:target^="delete"] {
    background: #dc2626 !important;
    color: #fff !important;
    border-color: rgba(255,255,255,.14) !important;
}

.hd-select {
    width: 100%;
    min-height: 3.35rem;
    border-radius: 1rem;
    border: 1px solid #3f3f46 !important;
    background: #09090b !important;
    color: #f4f4f5 !important;
    padding: .78rem 3rem .78rem 1rem;
    font-weight: 800;
    outline: none;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 12px 26px rgba(0,0,0,.24);
}

.hd-select:focus {
    border-color: #60a5fa !important;
    box-shadow:
        0 0 0 3px rgba(96,165,250,.38),
        inset 0 1px 0 rgba(255,255,255,.05);
}

.helpdesk-required-star {
    color: #ef4444 !important;
    font-weight: 800;
}

.helpdesk-ticket-form,
.helpdesk-ticket-form * {
    -webkit-tap-highlight-color: transparent;
}

.helpdesk-ticket-form input,
.helpdesk-ticket-form textarea,
.helpdesk-ticket-form select,
.helpdesk-ticket-form .select2-container--default .select2-selection--single,
.helpdesk-ticket-form .select2-container--default .select2-selection--multiple,
.helpdesk-ticket-form .select2-container--default .select2-selection__rendered,
.helpdesk-ticket-form .select2-container--default .select2-selection__choice {
    background: #09090b !important;
    color: #f4f4f5 !important;
    border-color: #3f3f46 !important;
    caret-color: #f4f4f5 !important;
    opacity: 1 !important;
}

.helpdesk-ticket-form input:disabled,
.helpdesk-ticket-form textarea:disabled,
.helpdesk-ticket-form select:disabled,
.helpdesk-ticket-form .select2-container--disabled .select2-selection--single,
.helpdesk-ticket-form .select2-container--disabled .select2-selection--multiple {
    background: #09090b !important;
    color: #a1a1aa !important;
    opacity: 1 !important;
}

.helpdesk-ticket-form input:-webkit-autofill,
.helpdesk-ticket-form input:-webkit-autofill:hover,
.helpdesk-ticket-form input:-webkit-autofill:focus,
.helpdesk-ticket-form textarea:-webkit-autofill,
.helpdesk-ticket-form textarea:-webkit-autofill:hover,
.helpdesk-ticket-form textarea:-webkit-autofill:focus,
.helpdesk-ticket-form select:-webkit-autofill,
.helpdesk-ticket-form select:-webkit-autofill:hover,
.helpdesk-ticket-form select:-webkit-autofill:focus {
    -webkit-text-fill-color: #f4f4f5 !important;
    box-shadow: 0 0 0 1000px #09090b inset !important;
    transition: background-color 9999s ease-in-out 0s;
}

.select2-container--default .select2-selection--single {
    position: relative;
}

.select2-container--default .select2-selection--single .select2-selection__clear {
    position: absolute !important;
    top: 50% !important;
    right: 2.25rem !important;
    transform: translateY(-50%);
    color: #f87171 !important;
    font-weight: 800 !important;
    z-index: 5;
}

/* Select2 base */
.helpdesk-ticket-form .select2-container {
    width: 100% !important;
}

.helpdesk-ticket-form .select2-container--default .select2-selection--single,
.helpdesk-ticket-form .select2-container--default .select2-selection--multiple {
    min-height: 3.35rem;
    border-radius: 1rem;
    border: 1px solid #d4d4d8 !important;
    background: #ffffff !important;
    color: #18181b !important;
    box-shadow: 0 10px 22px rgba(24, 24, 27, .08);
}

.helpdesk-ticket-form .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #18181b !important;
    line-height: 3.25rem;
    padding-left: 1rem;
    padding-right: 2.75rem;
    font-weight: 700;
}

.helpdesk-ticket-form .select2-container--default .select2-selection--multiple {
    align-items: center;
    padding: .4rem .65rem;
}

.helpdesk-ticket-form .select2-container--default .select2-selection--multiple .select2-selection__choice {
    border: 1px solid #2563eb !important;
    border-radius: 9999px !important;
    background: #dbeafe !important;
    color: #1e3a8a !important;
    font-weight: 700;
    padding: .2rem .55rem;
}

.helpdesk-ticket-form .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: #dc2626 !important;
    margin-right: .35rem;
}

.select2-dropdown {
    border: 1px solid #d4d4d8 !important;
    border-radius: .9rem !important;
    background: #ffffff !important;
    color: #18181b !important;
    overflow: hidden;
    box-shadow: 0 18px 42px rgba(24, 24, 27, .18);
}

.select2-search__field {
    border: 1px solid #d4d4d8 !important;
    border-radius: .7rem !important;
    background: #ffffff !important;
    color: #18181b !important;
}

.select2-container--default .select2-results__option {
    color: #18181b !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: #2563eb !important;
    color: #ffffff !important;
}

.select2-container--default .select2-results__option[aria-selected="true"] {
    background: #e0f2fe !important;
    color: #075985 !important;
}

/* Dark mode */
.dark .helpdesk-ticket-form .select2-container--default .select2-selection--single,
.dark .helpdesk-ticket-form .select2-container--default .select2-selection--multiple {
    border-color: #3f3f46 !important;
    background: #09090b !important;
    color: #f4f4f5 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 12px 26px rgba(0,0,0,.24);
}

.dark .helpdesk-ticket-form .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #f4f4f5 !important;
}

.dark .helpdesk-ticket-form .select2-container--default .select2-selection--multiple .select2-selection__choice {
    border-color: #60a5fa !important;
    background: #1d4ed8 !important;
    color: #ffffff !important;
}

.dark .select2-dropdown {
    border-color: #3f3f46 !important;
    background: #18181b !important;
    color: #f4f4f5 !important;
    box-shadow: 0 18px 42px rgba(0,0,0,.55);
}

.dark .select2-search__field {
    border-color: #3f3f46 !important;
    background: #09090b !important;
    color: #f4f4f5 !important;
}

.dark .select2-container--default .select2-results__option {
    color: #f4f4f5 !important;
}

.dark .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: #2563eb !important;
    color: #ffffff !important;
}

.dark .select2-container--default .select2-results__option[aria-selected="true"] {
    background: #27272a !important;
    color: #ffffff !important;
}

.select2-container--default .select2-results__option {
    background: rgb(9 9 11);
    color: rgb(244 244 245);
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background: rgb(37 99 235) !important;
    color: rgb(255 255 255) !important;
}

.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option--selected {
    background: rgb(30 64 175) !important;
    color: rgb(255 255 255) !important;
}

.select2-dropdown {
    border-color: rgb(63 63 70) !important;
    background: rgb(9 9 11) !important;
}

.select2-container--default .select2-selection--single {
    border: 1px solid rgb(63 63 70) !important;
    background: rgb(9 9 11) !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: rgb(244 244 245) !important;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: rgb(113 113 122) !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: rgb(161 161 170) transparent transparent transparent !important;
}

.select2-container--default.select2-container--open .select2-selection--single {
    border-color: rgb(59 130 246) !important;
    box-shadow: 0 0 0 2px rgb(59 130 246 / 0.35);
}

.select2-container--default .select2-selection--multiple {
    border: 1px solid rgb(63 63 70) !important;
    background: rgb(9 9 11) !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    border: 1px solid rgb(59 130 246 / 0.45) !important;
    background: rgb(30 64 175 / 0.35) !important;
    color: rgb(219 234 254) !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: rgb(191 219 254) !important;
}

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border-radius: 0.75rem !important;
}

.select2-dropdown {
    overflow: hidden;
    border-radius: 0.75rem !important;
}

.select2-container--open .select2-dropdown--below {
    margin-top: 0.35rem;
    border-radius: 0.75rem !important;
}

.select2-container--open .select2-dropdown--above {
    margin-bottom: 0.35rem;
    border-radius: 0.75rem !important;
}

.select2-container--default .select2-selection--single {
    position: relative;
    padding-right: 3.5rem;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-right: 3.5rem;
}

.select2-container--default .select2-selection--single .select2-selection__clear {
    position: absolute;
    right: 2rem;
    top: 50%;
    z-index: 3;
    margin: 0;
    transform: translateY(-50%);
    color: rgb(161 161 170);
    font-size: 1rem;
    line-height: 1;
}

.select2-container--default .select2-selection--single .select2-selection__clear:hover {
    color: rgb(248 113 113);
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    right: 0.75rem;
}

.select2-container--default .select2-selection--single {
    position: relative !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-left: 0.75rem !important;
    padding-right: 4.25rem !important;
}

.select2-container--default .select2-selection--single .select2-selection__clear {
    position: absolute !important;
    right: 2.35rem !important;
    top: 50% !important;
    float: none !important;
    margin: 0 !important;
    transform: translateY(-50%) !important;
}

.select2-container--default .select2-selection--single .select2-selection__clear span {
    color: rgb(161 161 170) !important;
    font-size: 1.1rem !important;
    line-height: 1 !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    right: 0.75rem !important;
}

.select2-container--default .select2-selection--single {
    display: flex !important;
    align-items: center !important;
    position: relative !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    flex: 1 1 auto !important;
    width: 100% !important;
    padding-right: 4.5rem !important;
}

.select2-container--default .select2-selection--single .select2-selection__clear {
    position: absolute !important;
    right: 2.25rem !important;
    top: 50% !important;
    z-index: 20 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 1.25rem !important;
    height: 1.25rem !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: translateY(-50%) !important;
    color: rgb(161 161 170) !important;
    cursor: pointer !important;
}

.select2-container--default .select2-selection--single .select2-selection__clear:hover {
    color: rgb(248 113 113) !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    position: absolute !important;
    right: 0.75rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

/* Helpdesk Flatpickr date picker */
.flatpickr-calendar {
    border: 1px solid rgb(63 63 70);
    background: rgb(24 24 27);
    color: rgb(244 244 245);
    box-shadow: 0 20px 45px rgb(0 0 0 / 0.35);
}

.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after,
.flatpickr-calendar.arrowBottom::before,
.flatpickr-calendar.arrowBottom::after {
    border-bottom-color: rgb(24 24 27);
    border-top-color: rgb(24 24 27);
}

.flatpickr-months,
.flatpickr-months .flatpickr-month,
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
    background: rgb(24 24 27);
    color: rgb(244 244 245);
}

.flatpickr-weekday,
span.flatpickr-weekday {
    color: rgb(161 161 170);
}

.flatpickr-day {
    color: rgb(228 228 231);
}

.flatpickr-day:hover,
.flatpickr-day:focus {
    border-color: rgb(59 130 246);
    background: rgb(39 39 42);
    color: rgb(255 255 255);
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    border-color: rgb(37 99 235);
    background: rgb(37 99 235);
    color: rgb(255 255 255);
}

.flatpickr-day.today {
    border-color: rgb(34 197 94);
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: rgb(113 113 122);
}
.hd-helpdesk-surface .hd-btn,
.hd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border-radius: .85rem;
    padding: .62rem 1.05rem;
    font-size: .875rem;
    line-height: 1.25rem;
    font-weight: 800;
    font-size: .95rem;
    color: #ffffff !important;
    text-decoration: none !important;
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 12px 28px rgba(0,0,0,.22);
    transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.hd-helpdesk-surface .hd-btn:hover,
.hd-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 34px rgba(0,0,0,.30);
}
.hd-helpdesk-surface .hd-btn-sm,
.hd-btn-sm {
    border-radius: .65rem;
    padding: .42rem .78rem;
    font-size: .8125rem;
}
.hd-helpdesk-surface .hd-btn-blue,
.hd-btn-blue { background: #2563eb !important; }
.hd-helpdesk-surface .hd-btn-blue:hover,
.hd-btn-blue:hover { background: #1d4ed8 !important; }
.hd-helpdesk-surface .hd-btn-green,
.hd-btn-green { background: #16a34a !important; }
.hd-helpdesk-surface .hd-btn-green:hover,
.hd-btn-green:hover { background: #15803d !important; }
.hd-helpdesk-surface .hd-btn-amber,
.hd-btn-amber { background: #f59e0b !important; }
.hd-helpdesk-surface .hd-btn-amber:hover,
.hd-btn-amber:hover { background: #d97706 !important; }
.hd-helpdesk-surface .hd-btn-red,
.hd-btn-red { background: #dc2626 !important; }
.hd-helpdesk-surface .hd-btn-red:hover,
.hd-btn-red:hover { background: #b91c1c !important; }
.hd-helpdesk-surface .hd-btn-violet,
.hd-btn-violet { background: #7c3aed !important; }
.hd-helpdesk-surface .hd-btn-violet:hover,
.hd-btn-violet:hover { background: #6d28d9 !important; }

.hd-helpdesk-surface button[type="submit"],
.hd-helpdesk-surface button[data-flux-button][type="submit"] {
    background: #16a34a !important;
    color: #ffffff !important;
    border-color: rgba(255,255,255,.14) !important;
}
.hd-helpdesk-surface button[wire\:click^="reset"],
.hd-helpdesk-surface button[wire\:target^="reset"] {
    background: #f59e0b !important;
    color: #ffffff !important;
    border-color: rgba(255,255,255,.14) !important;
}
.hd-helpdesk-surface button[wire\:click^="edit"],
.hd-helpdesk-surface button[wire\:target^="edit"] {
    background: #2563eb !important;
    color: #ffffff !important;
    border-color: rgba(255,255,255,.14) !important;
}
.hd-helpdesk-surface button[wire\:click^="delete"],
.hd-helpdesk-surface button[wire\:target^="delete"] {
    background: #dc2626 !important;
    color: #ffffff !important;
    border-color: rgba(255,255,255,.14) !important;
}

.hd-select-wrap {
    position: relative;
    width: 100%;
    max-width: 18rem;
}
.hd-select-wrap::after {
    position: absolute;
    top: 50%;
    right: 1rem;
    width: .55rem;
    height: .55rem;
    content: "";
    pointer-events: none;
    border-right: 2px solid #93c5fd;
    border-bottom: 2px solid #93c5fd;
    transform: translateY(-65%) rotate(45deg);
}
.hd-select {
    width: 100%;
    min-height: 2.75rem;
    appearance: none;
    -webkit-appearance: none;
    border-radius: .9rem;
    border: 1px solid rgba(96, 165, 250, .38) !important;
    background: linear-gradient(135deg, #030712 0%, #111827 54%, #0f172a 100%) !important;
    color: #f8fafc !important;
    padding: .62rem 2.45rem .62rem .9rem;
    font-weight: 800;
    outline: none;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 14px 30px rgba(2,6,23,.38);
}
.hd-select option {
    background: #020617 !important;
    color: #f8fafc !important;
}
.hd-select:focus {
    border-color: #60a5fa !important;
    box-shadow: 0 0 0 3px rgba(96,165,250,.38), inset 0 1px 0 rgba(255,255,255,.08), 0 14px 30px rgba(2,6,23,.38);
}
.hd-ticket-board-select-wrap {
    position: relative;
    max-width: 12.5rem;
}
.hd-ticket-board-select-wrap::after {
    position: absolute;
    top: 50%;
    right: .7rem;
    width: .45rem;
    height: .45rem;
    content: "";
    pointer-events: none;
    border-right: 2px solid #86efac;
    border-bottom: 2px solid #86efac;
    transform: translateY(-65%) rotate(45deg);
}
.hd-ticket-board-select {
    width: 100%;
    min-height: 2.35rem;
    appearance: none;
    -webkit-appearance: none;
    border-radius: .85rem;
    border: 1px solid rgba(34,197,94,.35) !important;
    background: linear-gradient(135deg, #052e16 0%, #064e3b 100%) !important;
    color: #ecfdf5 !important;
    padding: .48rem 2rem .48rem .75rem;
    font-size: .75rem;
    font-weight: 800;
    outline: none;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 22px rgba(0,0,0,.26);
}
.hd-ticket-board-select option {
    background: #052e16 !important;
    color: #ecfdf5 !important;
}
.hd-ticket-board-select:focus {
    border-color: #86efac !important;
    box-shadow: 0 0 0 3px rgba(34,197,94,.28), inset 0 1px 0 rgba(255,255,255,.08);
}

.helpdesk-ticket-form,
.helpdesk-ticket-form * {
    -webkit-tap-highlight-color: transparent;
}
.helpdesk-ticket-form input,
.helpdesk-ticket-form textarea,
.helpdesk-ticket-form select,
.helpdesk-ticket-form .select2-container--default .select2-selection--single,
.helpdesk-ticket-form .select2-container--default .select2-selection--multiple,
.helpdesk-ticket-form .select2-container--default .select2-selection__rendered,
.helpdesk-ticket-form .select2-container--default .select2-selection__choice {
    background: #09090b !important;
    background-color: #09090b !important;
    color: #f4f4f5 !important;
    border-color: #3f3f46 !important;
    caret-color: #f4f4f5 !important;
    opacity: 1 !important;
}
.helpdesk-ticket-form input:disabled,
.helpdesk-ticket-form textarea:disabled,
.helpdesk-ticket-form select:disabled,
.helpdesk-ticket-form .select2-container--disabled .select2-selection--single,
.helpdesk-ticket-form .select2-container--disabled .select2-selection--multiple,
.helpdesk-ticket-form [disabled],
.helpdesk-ticket-form [aria-disabled="true"] {
    background: #09090b !important;
    background-color: #09090b !important;
    color: #a1a1aa !important;
    opacity: 1 !important;
}
.helpdesk-ticket-form input:-webkit-autofill,
.helpdesk-ticket-form input:-webkit-autofill:hover,
.helpdesk-ticket-form input:-webkit-autofill:focus,
.helpdesk-ticket-form textarea:-webkit-autofill,
.helpdesk-ticket-form textarea:-webkit-autofill:hover,
.helpdesk-ticket-form textarea:-webkit-autofill:focus,
.helpdesk-ticket-form select:-webkit-autofill,
.helpdesk-ticket-form select:-webkit-autofill:hover,
.helpdesk-ticket-form select:-webkit-autofill:focus {
    -webkit-text-fill-color: #f4f4f5 !important;
    box-shadow: 0 0 0 1000px #09090b inset !important;
    transition: background-color 9999s ease-in-out 0s;
}

.hd-helpdesk-surface .hd-btn,
.hd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border-radius: .85rem;
    padding: .62rem 1.05rem;
    font-size: .875rem;
    line-height: 1.25rem;
    font-weight: 800;
    color: #ffffff !important;
    text-decoration: none !important;
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 12px 28px rgba(0,0,0,.22);
    transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.hd-helpdesk-surface .hd-btn:hover,
.hd-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 16px 34px rgba(0,0,0,.30);
}
.hd-helpdesk-surface .hd-btn-sm,
.hd-btn-sm {
    border-radius: .65rem;
    padding: .42rem .78rem;
    font-size: .8125rem;
}
.hd-helpdesk-surface .hd-btn-blue,
.hd-btn-blue { background: #2563eb !important; }
.hd-helpdesk-surface .hd-btn-blue:hover,
.hd-btn-blue:hover { background: #1d4ed8 !important; }
.hd-helpdesk-surface .hd-btn-green,
.hd-btn-green { background: #16a34a !important; }
.hd-helpdesk-surface .hd-btn-green:hover,
.hd-btn-green:hover { background: #15803d !important; }
.hd-helpdesk-surface .hd-btn-amber,
.hd-btn-amber { background: #f59e0b !important; }
.hd-helpdesk-surface .hd-btn-amber:hover,
.hd-btn-amber:hover { background: #d97706 !important; }
.hd-helpdesk-surface .hd-btn-red,
.hd-btn-red { background: #dc2626 !important; }
.hd-helpdesk-surface .hd-btn-red:hover,
.hd-btn-red:hover { background: #b91c1c !important; }
.hd-helpdesk-surface .hd-btn-violet,
.hd-btn-violet { background: #7c3aed !important; }
.hd-helpdesk-surface .hd-btn-violet:hover,
.hd-btn-violet:hover { background: #6d28d9 !important; }

.hd-helpdesk-surface button[type="submit"],
.hd-helpdesk-surface button[data-flux-button][type="submit"] {
    background: #16a34a !important;
    color: #ffffff !important;
    border-color: rgba(255,255,255,.14) !important;
}
.hd-helpdesk-surface button[wire\:click^="reset"],
.hd-helpdesk-surface button[wire\:target^="reset"] {
    background: #f59e0b !important;
    color: #ffffff !important;
    border-color: rgba(255,255,255,.14) !important;
}
.hd-helpdesk-surface button[wire\:click^="edit"],
.hd-helpdesk-surface button[wire\:target^="edit"] {
    background: #2563eb !important;
    color: #ffffff !important;
    border-color: rgba(255,255,255,.14) !important;
}
.hd-helpdesk-surface button[wire\:click^="delete"],
.hd-helpdesk-surface button[wire\:target^="delete"] {
    background: #dc2626 !important;
    color: #ffffff !important;
    border-color: rgba(255,255,255,.14) !important;
}

.hd-select {
    width: 100%;
    min-height: 3.35rem;
    border-radius: 1rem;
    border: 1px solid #3f3f46 !important;
    background: #09090b !important;
    color: #f4f4f5 !important;
    padding: .78rem 3rem .78rem 1rem;
    font-weight: 800;
    outline: none;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 12px 26px rgba(0,0,0,.24);
}
.hd-select:focus {
    border-color: #60a5fa !important;
    box-shadow: 0 0 0 3px rgba(96,165,250,.38), inset 0 1px 0 rgba(255,255,255,.05);
}

.helpdesk-ticket-form,
.helpdesk-ticket-form * {
    -webkit-tap-highlight-color: transparent;
}
.helpdesk-ticket-form input,
.helpdesk-ticket-form textarea,
.helpdesk-ticket-form select,
.helpdesk-ticket-form .select2-container--default .select2-selection--single,
.helpdesk-ticket-form .select2-container--default .select2-selection--multiple,
.helpdesk-ticket-form .select2-container--default .select2-selection__rendered,
.helpdesk-ticket-form .select2-container--default .select2-selection__choice {
    background: #09090b !important;
    background-color: #09090b !important;
    color: #f4f4f5 !important;
    border-color: #3f3f46 !important;
    caret-color: #f4f4f5 !important;
    opacity: 1 !important;
}
.helpdesk-ticket-form input:disabled,
.helpdesk-ticket-form textarea:disabled,
.helpdesk-ticket-form select:disabled,
.helpdesk-ticket-form .select2-container--disabled .select2-selection--single,
.helpdesk-ticket-form .select2-container--disabled .select2-selection--multiple,
.helpdesk-ticket-form [disabled],
.helpdesk-ticket-form [aria-disabled="true"] {
    background: #09090b !important;
    background-color: #09090b !important;
    color: #a1a1aa !important;
    opacity: 1 !important;
}
.helpdesk-ticket-form input:-webkit-autofill,
.helpdesk-ticket-form input:-webkit-autofill:hover,
.helpdesk-ticket-form input:-webkit-autofill:focus,
.helpdesk-ticket-form textarea:-webkit-autofill,
.helpdesk-ticket-form textarea:-webkit-autofill:hover,
.helpdesk-ticket-form textarea:-webkit-autofill:focus,
.helpdesk-ticket-form select:-webkit-autofill,
.helpdesk-ticket-form select:-webkit-autofill:hover,
.helpdesk-ticket-form select:-webkit-autofill:focus {
    -webkit-text-fill-color: #f4f4f5 !important;
    box-shadow: 0 0 0 1000px #09090b inset !important;
    transition: background-color 9999s ease-in-out 0s;
}


/* Backend theme integration: keep Core Helpdesk surfaces full-width and dark. */
.hd-helpdesk-surface {
    width: 100%;
}

.dark .hd-core-settings input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
.dark .hd-core-settings textarea,
.dark .hd-core-settings select,
.dark .hd-core-settings [data-flux-control] {
    background: #2b2b2b !important;
    border-color: #4b4b4b !important;
    color: #f4f4f5 !important;
}

.dark .hd-core-settings input::placeholder,
.dark .hd-core-settings textarea::placeholder {
    color: #9ca3af !important;
}

.dark .hd-core-settings [data-flux-field] label,
.dark .hd-core-settings [data-flux-label] {
    color: #f4f4f5 !important;
}

/* Coloured Settings cards remain cards at all common desktop widths. */
.hd-core-settings > .grid.md\:grid-cols-4.xl\:grid-cols-7 > a {
    min-height: 4.6rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}


/* ==========================================================================
   Helpdesk mobile / tablet responsive layer
   Keeps the Core desktop presentation while making every Helpdesk screen
   usable on touch devices and narrow viewports.
   ========================================================================== */

.hd-mobile-header {
    min-height: 3.75rem;
}

@media (max-width: 1023px) {
    .hd-helpdesk-surface {
        max-width: 100% !important;
        width: 100% !important;
    }

    .hd-helpdesk-surface > * {
        min-width: 0;
    }
}

@media (max-width: 767px) {
    html,
    body {
        overflow-x: hidden;
    }

    .hd-helpdesk-surface,
    .hd-helpdesk-surface.hd-mobile-ready {
        width: 100%;
        max-width: 100% !important;
        padding-left: .75rem;
        padding-right: .75rem;
        margin-left: auto;
        margin-right: auto;
        gap: 1rem;
    }

    /* Hero/page headers */
    .hd-helpdesk-surface .rounded-3xl {
        border-radius: 1.15rem;
    }

    .hd-helpdesk-surface .bg-gradient-to-br {
        padding: 1.1rem !important;
    }

    .hd-helpdesk-surface .bg-gradient-to-br h1 {
        font-size: 1.65rem !important;
        line-height: 1.15 !important;
    }

    .hd-helpdesk-surface .bg-gradient-to-br p {
        max-width: 100% !important;
    }

    /* All action rows become thumb-friendly full-width grids. */
    .hd-helpdesk-surface .hd-btn {
        min-height: 2.75rem;
        justify-content: center;
        width: 100%;
        padding-inline: .9rem;
    }

    .hd-helpdesk-surface .bg-gradient-to-br .flex.flex-wrap.gap-2 {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        gap: .55rem !important;
    }

    /* Dashboard metrics */
    .hd-helpdesk-surface .grid.md\:grid-cols-2,
    .hd-helpdesk-surface .grid.lg\:grid-cols-4,
    .hd-helpdesk-surface .grid.xl\:grid-cols-4 {
        grid-template-columns: 1fr !important;
    }

    /* Settings cards: two compact coloured cards per row, one on very small phones. */
    .hd-core-settings > .grid,
    .hd-helpdesk-surface[dusk="helpdesk-settings-manager"] > .grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: .55rem !important;
    }

    .hd-core-settings > .grid > a,
    .hd-helpdesk-surface[dusk="helpdesk-settings-manager"] > .grid > a {
        min-width: 0;
        min-height: 4.4rem;
        padding: .75rem !important;
        border-radius: .8rem !important;
    }

    .hd-core-settings > .grid > a .text-2xl,
    .hd-helpdesk-surface[dusk="helpdesk-settings-manager"] > .grid > a .text-2xl {
        font-size: 1.25rem !important;
    }

    /* Configuration forms */
    .hd-core-settings form .grid,
    .hd-helpdesk-surface form .grid {
        grid-template-columns: 1fr !important;
    }

    .hd-core-settings input,
    .hd-core-settings select,
    .hd-core-settings textarea,
    .hd-helpdesk-surface input,
    .hd-helpdesk-surface select,
    .hd-helpdesk-surface textarea {
        min-height: 2.8rem;
        font-size: 16px !important; /* prevents iOS input zoom */
    }

    .hd-helpdesk-surface textarea {
        min-height: 8rem;
    }

    /* Search/filter bars */
    .hd-helpdesk-surface .grid.md\:grid-cols-4,
    .hd-helpdesk-surface .grid.lg\:grid-cols-4,
    .hd-helpdesk-surface .grid.xl\:grid-cols-4 {
        grid-template-columns: 1fr !important;
    }

    /* Tables remain usable rather than crushing columns. */
    .hd-helpdesk-surface .overflow-x-auto,
    .hd-core-settings .overflow-x-auto {
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .hd-helpdesk-surface table,
    .hd-core-settings table {
        min-width: 760px;
    }

    .hd-helpdesk-surface th,
    .hd-helpdesk-surface td,
    .hd-core-settings th,
    .hd-core-settings td {
        white-space: nowrap;
    }

    /* Ticket list table gets a slightly smaller minimum than config tables. */
    .hd-helpdesk-surface[dusk="helpdesk-ticket-index"] table {
        min-width: 680px;
    }

    /* Action button groups wrap instead of overflowing. */
    .hd-helpdesk-surface td .flex,
    .hd-core-settings td .flex {
        flex-wrap: wrap;
    }

    /* Ticket show page */
    .hd-helpdesk-surface .xl\:grid-cols-\[minmax\(0\,1fr\)_20rem\],
    .hd-helpdesk-surface .lg\:grid-cols-\[minmax\(0\,1fr\)_20rem\] {
        grid-template-columns: 1fr !important;
    }

    /* Attachments/code blocks/content */
    .hd-helpdesk-surface pre,
    .hd-helpdesk-surface code,
    .hd-helpdesk-surface .prose {
        max-width: 100%;
        overflow-x: auto;
        word-break: break-word;
    }

    /* Kanban: touch-friendly horizontal lanes with scroll snapping. */
    [data-helpdesk-kanban-board] {
        display: flex !important;
        gap: .75rem !important;
        overflow-x: auto !important;
        overscroll-behavior-inline: contain;
        scroll-snap-type: x mandatory;
        scroll-padding-left: .75rem;
        padding-bottom: 1rem !important;
        margin-inline: -.75rem;
        padding-inline: .75rem;
        -webkit-overflow-scrolling: touch;
    }

    [data-helpdesk-kanban-board] > section {
        width: min(88vw, 330px) !important;
        min-width: min(88vw, 330px) !important;
        min-height: calc(100dvh - 16rem) !important;
        scroll-snap-align: start;
        border-radius: 1rem !important;
    }

    [data-helpdesk-kanban-column] {
        min-height: 24rem !important;
    }

    [data-helpdesk-kanban-ticket] {
        cursor: default !important;
        touch-action: pan-y;
    }

    .hd-kanban-mobile-move {
        display: block;
    }

    /* Board selector */
    .hd-select-wrap,
    .hd-ticket-board-select-wrap {
        width: 100% !important;
    }

    /* Modal/dialog safety */
    [role="dialog"],
    [data-flux-modal] {
        max-width: calc(100vw - 1.5rem) !important;
        max-height: calc(100dvh - 1.5rem) !important;
        overflow-y: auto;
    }
}

@media (max-width: 479px) {
    .hd-helpdesk-surface,
    .hd-helpdesk-surface.hd-mobile-ready {
        padding-left: .55rem;
        padding-right: .55rem;
    }

    .hd-helpdesk-surface .bg-gradient-to-br .flex.flex-wrap.gap-2 {
        grid-template-columns: 1fr;
    }

    .hd-core-settings > .grid,
    .hd-helpdesk-surface[dusk="helpdesk-settings-manager"] > .grid {
        grid-template-columns: 1fr !important;
    }

    [data-helpdesk-kanban-board] > section {
        width: 91vw !important;
        min-width: 91vw !important;
    }

    .hd-helpdesk-surface .text-3xl,
    .hd-helpdesk-surface .text-4xl {
        font-size: 1.55rem !important;
    }
}

/* Touch-only devices: rely on mobile status selector instead of requiring DnD. */
@media (hover: none) and (pointer: coarse) {
    [data-helpdesk-kanban-ticket] {
        -webkit-user-drag: none;
        user-select: none;
    }

    .hd-kanban-mobile-move {
        display: block !important;
    }
}