/* ==========================================================================
   DrapeTrack theme - "Rosé Pine"
   Loaded after bootstrap, style.css and custom.css; every colour, font, radius
   and shadow in the portal comes from the tokens below.
   ========================================================================== */

:root {
    --cl-background: #faf4ed;
    --cl-foreground: #575279;
    --cl-card: #fffaf3;
    --cl-card-foreground: #575279;

    --cl-primary: #575279;
    --cl-primary-hover: #433e63;
    --cl-primary-foreground: #ffffff;
    --cl-primary-soft: rgba(87, 82, 121, .10);

    /* Secondary is the soft grey-lavender of the reference; text on it stays ink. */
    --cl-secondary: #dfdad9;
    --cl-secondary-hover: #cecacd;
    --cl-secondary-foreground: #575279;
    --cl-secondary-soft: rgba(223, 218, 217, .55);

    --cl-accent: #ea9d34;
    --cl-accent-hover: #d08a27;
    --cl-accent-foreground: #ffffff;
    --cl-accent-soft: rgba(234, 157, 52, .14);

    --cl-destructive: #b4637a;
    --cl-destructive-hover: #9c5268;
    --cl-destructive-foreground: #ffffff;
    --cl-destructive-soft: rgba(180, 99, 122, .12);

    --cl-success: #286983;
    --cl-success-hover: #1f5368;
    --cl-success-soft: rgba(40, 105, 131, .12);

    --cl-info: #56949f;
    --cl-info-hover: #457a84;
    --cl-info-soft: rgba(86, 148, 159, .14);

    --cl-iris: #907aa9;
    /* Accents that still read on the dark stage backgrounds (ink is too close to them). */
    --cl-stage: #2a2740;
    --cl-stage-accent: #907aa9;
    --cl-stage-highlight: #ebbcba;

    --cl-muted: #f4ede8;
    --cl-muted-soft: rgba(152, 147, 165, .2);
    --cl-muted-foreground: #797593;

    --cl-border: #cecacd;
    --cl-border-soft: rgba(206, 202, 205, .6);
    --cl-input: #cecacd;
    --cl-ring: rgba(87, 82, 121, .25);

    --cl-radius: .5rem;
    --cl-radius-lg: .75rem;
    --cl-shadow: 0 1px 2px 0 rgba(87, 82, 121, .08);
    --cl-shadow-lg: 0 8px 24px 0 rgba(87, 82, 121, .14);

    --cl-font: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --cl-font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    /* Bootstrap's own variables, so anything not restyled below still follows. */
    --bs-primary: #575279;
    --bs-secondary: #dfdad9;
    --bs-success: #286983;
    --bs-info: #56949f;
    --bs-warning: #ea9d34;
    --bs-danger: #b4637a;
    --bs-light: #faf4ed;
    --bs-dark: #575279;
    --bs-primary-rgb: 87, 82, 121;
    --bs-secondary-rgb: 223, 218, 217;
    --bs-success-rgb: 40, 105, 131;
    --bs-info-rgb: 86, 148, 159;
    --bs-warning-rgb: 234, 157, 52;
    --bs-danger-rgb: 180, 99, 122;
    --bs-light-rgb: 250, 244, 237;
    --bs-dark-rgb: 87, 82, 121;
    --bs-body-color: #575279;
    --bs-body-bg: #faf4ed;
    --bs-body-font-family: var(--cl-font);
    --bs-font-sans-serif: var(--cl-font);
}

/* -------------------------------------------------------------------------
   Base
   ------------------------------------------------------------------------- */
html,
body {
    background-color: var(--cl-background);
    color: var(--cl-foreground);
    font-family: var(--cl-font);
}

body,
button,
input,
select,
textarea,
optgroup,
.btn,
.form-control,
.form-select,
.tooltip,
.popover,
.dropdown-menu,
.swal2-popup,
#toast-container,
.card .card-header .card-title {
    font-family: var(--cl-font);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--cl-font);
    color: var(--cl-foreground);
}

p,
label,
small,
strong,
li,
dt,
dd,
span {
    font-family: var(--cl-font);
}

a {
    color: var(--cl-primary);
}

a:hover,
a:focus {
    color: var(--cl-primary-hover);
}

hr {
    border-color: var(--cl-border);
    background-color: var(--cl-border);
    opacity: .55;
}

::selection {
    background: var(--cl-primary);
    color: var(--cl-primary-foreground);
}

::placeholder {
    color: var(--cl-muted-foreground) !important;
    opacity: .75;
}

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--cl-primary);
    outline-offset: 2px;
}

/* -------------------------------------------------------------------------
   Text, background and border utilities
   ------------------------------------------------------------------------- */
.text-primary,
.dropdown-menu > li > a.text-primary { color: var(--cl-primary) !important; }
.text-secondary { color: var(--cl-muted-foreground) !important; }
.text-success,
.dropdown-menu > li > a.text-success { color: var(--cl-success) !important; }
.text-info,
.dropdown-menu > li > a.text-info { color: var(--cl-info) !important; }
.text-warning,
.dropdown-menu > li > a.text-warning { color: var(--cl-accent) !important; }
.text-danger,
.dropdown-menu > li > a.text-danger { color: var(--cl-destructive) !important; }
.text-muted { color: var(--cl-muted-foreground) !important; }
.text-dark,
.text-body,
.text-black { color: var(--cl-foreground) !important; }
.text-light { color: var(--cl-background) !important; }
.text-white { color: #ffffff !important; }

.bg-primary,
.badge-primary { background-color: var(--cl-primary) !important; color: var(--cl-primary-foreground); }
.bg-secondary { background-color: var(--cl-secondary) !important; color: var(--cl-foreground); }
.bg-success,
.badge-success { background-color: var(--cl-success) !important; color: #ffffff; }
.bg-info,
.badge-info { background-color: var(--cl-info) !important; color: #ffffff; }
.bg-warning,
.badge-warning { background-color: var(--cl-accent) !important; color: var(--cl-accent-foreground) !important; }
.bg-danger,
.badge-danger { background-color: var(--cl-destructive) !important; color: var(--cl-destructive-foreground); }
.bg-light,
.bg-white,
.bg-body { background-color: var(--cl-background) !important; color: var(--cl-foreground); }
.bg-dark { background-color: var(--cl-foreground) !important; color: var(--cl-background); }
.bg-light-blue { background-color: var(--cl-info-soft) !important; }

a.bg-primary:focus, a.bg-primary:hover,
button.bg-primary:focus, button.bg-primary:hover { background-color: var(--cl-primary-hover) !important; }
a.bg-success:focus, a.bg-success:hover,
button.bg-success:focus, button.bg-success:hover { background-color: var(--cl-success-hover) !important; }
a.bg-info:focus, a.bg-info:hover,
button.bg-info:focus, button.bg-info:hover { background-color: var(--cl-info-hover) !important; }
a.bg-warning:focus, a.bg-warning:hover,
button.bg-warning:focus, button.bg-warning:hover { background-color: var(--cl-accent-hover) !important; }
a.bg-danger:focus, a.bg-danger:hover,
button.bg-danger:focus, button.bg-danger:hover { background-color: var(--cl-destructive-hover) !important; }

.border,
.border-top,
.border-bottom,
.border-start,
.border-end { border-color: var(--cl-border-soft) !important; }
.border-primary,
.border-primary-subtle { border-color: var(--cl-primary) !important; }
.border-secondary { border-color: var(--cl-border) !important; }
.border-success { border-color: var(--cl-success) !important; }
.border-info { border-color: var(--cl-info) !important; }
.border-warning { border-color: var(--cl-accent) !important; }
.border-danger { border-color: var(--cl-destructive) !important; }
/* Cards are always outlined in this theme, including the ones marked border-0. */
.card.border-0 { border: 1px solid var(--cl-border) !important; }

.shadow-sm { box-shadow: var(--cl-shadow) !important; }
.shadow,
.shadow-lg { box-shadow: var(--cl-shadow-lg) !important; }

.rounded,
.rounded-3 { border-radius: var(--cl-radius) !important; }
.rounded-4 { border-radius: var(--cl-radius-lg) !important; }
.rounded-top-4 { border-top-left-radius: var(--cl-radius-lg) !important; border-top-right-radius: var(--cl-radius-lg) !important; }
.rounded-bottom-4 { border-bottom-left-radius: var(--cl-radius-lg) !important; border-bottom-right-radius: var(--cl-radius-lg) !important; }

/* -------------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------------- */
.btn {
    border-radius: var(--cl-radius);
    font-weight: 500;
    box-shadow: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.btn:focus,
.btn.focus,
.btn:focus-visible,
.btn-check:focus + .btn {
    box-shadow: 0 0 0 .2rem var(--cl-ring) !important;
}

.btn:not([class*="btn-"]) {
    color: var(--cl-foreground);
}

.btn-primary,
.btn-primary.disabled,
.btn-primary:disabled {
    background-color: var(--cl-primary) !important;
    border: 1px solid var(--cl-primary-hover) !important;
    color: var(--cl-primary-foreground) !important;
    box-shadow: var(--cl-shadow);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary:active:focus,
.btn-primary.active:not(:disabled):not(.disabled),
.btn-primary:active:not(:disabled):not(.disabled),
.show > .btn-primary.dropdown-toggle,
.open > .dropdown-toggle.btn-primary {
    background-color: var(--cl-primary-hover) !important;
    border: 1px solid var(--cl-primary-hover) !important;
    color: var(--cl-primary-foreground) !important;
}

.btn-secondary,
.btn-secondary.disabled, .btn-secondary:disabled {
    background-color: var(--cl-secondary) !important;
    border: 1px solid var(--cl-secondary-hover) !important;
    color: var(--cl-secondary-foreground) !important;
    box-shadow: var(--cl-shadow);
}

.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active, .btn-secondary.active,
.show > .btn-secondary.dropdown-toggle {
    background-color: var(--cl-secondary-hover) !important;
    border: 1px solid var(--cl-secondary-hover) !important;
    color: var(--cl-secondary-foreground) !important;
}

.btn-success,
.btn-success.disabled, .btn-success:disabled {
    background-color: var(--cl-success) !important;
    border: 1px solid var(--cl-success-hover) !important;
    color: #ffffff !important;
    box-shadow: var(--cl-shadow);
}

.btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active,
.btn-success.active:not(:disabled):not(.disabled),
.btn-success:active:not(:disabled):not(.disabled),
.show > .btn-success.dropdown-toggle {
    background-color: var(--cl-success-hover) !important;
    border: 1px solid var(--cl-success-hover) !important;
    color: #ffffff !important;
}

.btn-info,
.btn-info.disabled, .btn-info:disabled {
    background-color: var(--cl-info) !important;
    border: 1px solid var(--cl-info-hover) !important;
    color: #ffffff !important;
    box-shadow: var(--cl-shadow);
}

.btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.active,
.btn-info.active:not(:disabled):not(.disabled),
.btn-info:active:not(:disabled):not(.disabled) {
    background-color: var(--cl-info-hover) !important;
    border: 1px solid var(--cl-info-hover) !important;
    color: #ffffff !important;
}

.btn-warning,
.btn-warning.disabled, .btn-warning:disabled {
    background-color: var(--cl-accent) !important;
    border: 1px solid var(--cl-accent-hover) !important;
    color: var(--cl-accent-foreground) !important;
    box-shadow: var(--cl-shadow);
}

.btn-warning:hover, .btn-warning:focus, .btn-warning:active, .btn-warning.active,
.btn-warning.active:not(:disabled):not(.disabled),
.btn-warning:active:not(:disabled):not(.disabled) {
    background-color: var(--cl-accent-hover) !important;
    border: 1px solid var(--cl-accent-hover) !important;
    color: var(--cl-accent-foreground) !important;
}

.btn-danger,
.btn-danger.disabled, .btn-danger:disabled {
    background-color: var(--cl-destructive) !important;
    border: 1px solid var(--cl-destructive-hover) !important;
    color: var(--cl-destructive-foreground) !important;
    box-shadow: var(--cl-shadow);
}

.btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger.active,
.btn-danger.active:not(:disabled):not(.disabled),
.btn-danger:active:not(:disabled):not(.disabled) {
    background-color: var(--cl-destructive-hover) !important;
    border: 1px solid var(--cl-destructive-hover) !important;
    color: var(--cl-destructive-foreground) !important;
}

.btn-dark {
    background-color: var(--cl-foreground) !important;
    border: 1px solid var(--cl-foreground) !important;
    color: var(--cl-background) !important;
}

/* "Outline" in the reference: paper background, border, ink text. */
.btn-light,
.btn-outline-secondary,
.btn-outline-light,
.btn-outline-dark,
.btn-outline-gray {
    background-color: var(--cl-background) !important;
    border: 1px solid var(--cl-border) !important;
    color: var(--cl-foreground) !important;
}

.btn-light:hover, .btn-light:focus, .btn-light:active,
.btn-outline-secondary:hover, .btn-outline-secondary:focus, .btn-outline-secondary:active,
.btn-outline-secondary:not(:disabled):not(.disabled):active,
.btn-outline-light:hover, .btn-outline-dark:hover, .btn-outline-gray:hover {
    background-color: var(--cl-secondary) !important;
    border-color: var(--cl-border) !important;
    color: var(--cl-foreground) !important;
}

.btn-outline-primary {
    background-color: var(--cl-background) !important;
    border: 1px solid var(--cl-primary) !important;
    color: var(--cl-primary) !important;
}

.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled).active,
.btn-check:checked + .btn-outline-primary {
    background-color: var(--cl-primary) !important;
    border-color: var(--cl-primary-hover) !important;
    color: var(--cl-primary-foreground) !important;
}

.btn-outline-success {
    background-color: var(--cl-background) !important;
    border: 1px solid var(--cl-success) !important;
    color: var(--cl-success) !important;
}

.btn-outline-success:hover, .btn-outline-success:focus, .btn-outline-success:active,
.btn-outline-success:not(:disabled):not(.disabled):active {
    background-color: var(--cl-success) !important;
    border-color: var(--cl-success-hover) !important;
    color: #ffffff !important;
}

.btn-outline-info {
    background-color: var(--cl-background) !important;
    border: 1px solid var(--cl-info) !important;
    color: var(--cl-info) !important;
}

.btn-outline-info:hover, .btn-outline-info:focus, .btn-outline-info:active,
.btn-outline-info:not(:disabled):not(.disabled):active {
    background-color: var(--cl-info) !important;
    border-color: var(--cl-info-hover) !important;
    color: #ffffff !important;
}

.btn-outline-warning {
    background-color: var(--cl-background) !important;
    border: 1px solid var(--cl-accent) !important;
    color: var(--cl-accent) !important;
}

.btn-outline-warning:hover, .btn-outline-warning:focus, .btn-outline-warning:active,
.btn-outline-warning:not(:disabled):not(.disabled):active {
    background-color: var(--cl-accent) !important;
    border-color: var(--cl-accent-hover) !important;
    color: var(--cl-accent-foreground) !important;
}

.btn-outline-danger {
    background-color: var(--cl-background) !important;
    border: 1px solid var(--cl-destructive) !important;
    color: var(--cl-destructive) !important;
}

.btn-outline-danger:hover, .btn-outline-danger:focus, .btn-outline-danger:active,
.btn-outline-danger:not(:disabled):not(.disabled):active {
    background-color: var(--cl-destructive) !important;
    border-color: var(--cl-destructive-hover) !important;
    color: var(--cl-destructive-foreground) !important;
}

.btn-link {
    color: var(--cl-primary);
}

.btn-link:hover {
    color: var(--cl-primary-hover);
}

.btn.disabled,
.btn:disabled {
    opacity: .55;
    box-shadow: none;
}

.btn-close {
    opacity: .7;
}

.btn-close:focus {
    box-shadow: 0 0 0 .2rem var(--cl-ring);
}

/* -------------------------------------------------------------------------
   Forms
   ------------------------------------------------------------------------- */
label,
.form-label,
.col-form-label,
.form-check-label {
    color: var(--cl-foreground);
}

.form-control,
.form-select,
.form-control-sm,
.form-select-sm,
textarea,
.select2-container .select2-selection--single,
.select2-container--default .select2-selection--multiple,
.iti input,
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    background-color: var(--cl-background) !important;
    border: 1px solid var(--cl-input) !important;
    border-radius: var(--cl-radius) !important;
    color: var(--cl-foreground) !important;
    box-shadow: none;
}

.form-control:focus,
.form-select:focus,
textarea:focus,
.iti input:focus,
.select2-container--focus .select2-selection--single,
.select2-container--open .select2-selection--single,
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
    border-color: var(--cl-primary) !important;
    box-shadow: 0 0 0 .2rem var(--cl-ring) !important;
    outline: 0;
}

.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
    background-color: var(--cl-card) !important;
    color: var(--cl-muted-foreground) !important;
    opacity: 1;
}

.form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23575279' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
}

select option {
    background-color: var(--cl-background);
    color: var(--cl-foreground);
}

/* Unavailable choices stay readable: muted and italic, not faded out. */
select option:disabled {
    color: var(--cl-muted-foreground) !important;
    background-color: var(--cl-secondary-soft) !important;
    font-style: italic;
}

.form-control[type="file"]::file-selector-button {
    background-color: var(--cl-card);
    color: var(--cl-foreground);
    border-inline-end: 1px solid var(--cl-border);
}

.form-control[type="file"]:hover::file-selector-button {
    background-color: var(--cl-secondary) !important;
    color: var(--cl-foreground);
}

.input-group-text {
    background-color: var(--cl-card);
    border: 1px solid var(--cl-input);
    color: var(--cl-foreground);
    border-radius: var(--cl-radius);
}

.form-check-input {
    background-color: var(--cl-background);
    border: 1px solid var(--cl-input);
    border-radius: var(--cl-radius);
}

.form-check-input[type="radio"] {
    border-radius: 50%;
}

.form-check-input:checked {
    background-color: var(--cl-primary);
    border-color: var(--cl-primary-hover);
}

.form-check-input:focus {
    border-color: var(--cl-primary);
    box-shadow: 0 0 0 .2rem var(--cl-ring);
}

.form-switch .form-check-input {
    border-radius: 2em;
    background-color: var(--cl-muted);
    border-color: var(--cl-border);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23faf4ed'/%3e%3c/svg%3e");
}

.form-switch .form-check-input:checked {
    background-color: var(--cl-primary);
    border-color: var(--cl-primary-hover);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e");
}

.form-switch .form-check-input:focus {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23faf4ed'/%3e%3c/svg%3e");
}

/* The template's own on/off toggle. */
.checktoggle {
    background-color: var(--cl-muted);
    border: 1px solid var(--cl-border);
}

.checktoggle:after {
    background-color: var(--cl-background);
}

.check:checked + .checktoggle {
    background-color: var(--cl-primary);
    border: 1px solid var(--cl-primary-hover);
}

.check:checked + .checktoggle:after {
    background-color: #ffffff;
}

.form-control.is-invalid,
.was-validated .form-control:invalid,
.form-select.is-invalid,
.was-validated .form-select:invalid {
    border-color: var(--cl-destructive) !important;
}

.form-control.is-invalid:focus,
.was-validated .form-control:invalid:focus {
    box-shadow: 0 0 0 .2rem rgba(180, 99, 122, .25) !important;
}

.form-control.is-valid,
.was-validated .form-control:valid,
.form-select.is-valid,
.was-validated .form-select:valid {
    border-color: var(--cl-success) !important;
}

.form-control.is-valid:focus,
.was-validated .form-control:valid:focus {
    box-shadow: 0 0 0 .2rem rgba(40, 105, 131, .25) !important;
}

.invalid-feedback,
.server-error,
.phone-length-error {
    color: var(--cl-destructive) !important;
}

.valid-feedback {
    color: var(--cl-success);
}

.toggle-password,
.reg-toggle-password {
    color: var(--cl-muted-foreground);
}

.toggle-password:hover,
.reg-toggle-password:hover {
    color: var(--cl-primary);
}

/* intl-tel-input */
.iti__selected-flag,
.iti--separate-dial-code .iti__selected-flag {
    background-color: var(--cl-card) !important;
    border-right: 1px solid var(--cl-border);
    border-radius: var(--cl-radius) 0 0 var(--cl-radius);
}

.iti__arrow { border-top-color: var(--cl-foreground); }
.iti__arrow--up { border-bottom-color: var(--cl-foreground); }

.iti__country-list {
    background-color: var(--cl-card);
    border: 1px solid var(--cl-border);
    border-radius: var(--cl-radius);
    box-shadow: var(--cl-shadow-lg);
    color: var(--cl-foreground);
}

.iti__country.iti__highlight { background-color: var(--cl-secondary-soft); }
.iti__dial-code { color: var(--cl-muted-foreground); }
.iti__divider { border-bottom-color: var(--cl-border); }

/* select2 */
.select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--cl-foreground); }
.select2-container--default .select2-selection--single .select2-selection__arrow b { border-color: var(--cl-foreground) transparent transparent; }
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b { border-color: transparent transparent var(--cl-foreground); }

.select2-dropdown {
    background-color: var(--cl-card);
    border: 1px solid var(--cl-border);
    border-radius: var(--cl-radius);
    color: var(--cl-foreground);
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    background-color: var(--cl-background);
    border: 1px solid var(--cl-input);
    color: var(--cl-foreground);
}

.select2-container--default .select2-results__option[aria-selected="true"] { background-color: var(--cl-secondary-soft); }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: var(--cl-primary); color: var(--cl-primary-foreground); }

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--cl-primary);
    border: 1px solid var(--cl-primary-hover);
    color: var(--cl-primary-foreground);
}

/* -------------------------------------------------------------------------
   Cards
   ------------------------------------------------------------------------- */
.card,
.card.card-chart,
.card.comman-shadow,
.bg-comman {
    background-color: var(--cl-card);
    color: var(--cl-card-foreground);
    border: 1px solid var(--cl-border);
    border-radius: var(--cl-radius-lg);
    box-shadow: var(--cl-shadow);
}

.card .card-header,
.card-header {
    background-color: transparent !important;
    border-bottom: 1px solid var(--cl-border-soft);
    color: var(--cl-card-foreground);
}

.card > .card-header:first-child {
    border-radius: var(--cl-radius-lg) var(--cl-radius-lg) 0 0;
}

.card .card-header .card-title,
.card-title {
    color: var(--cl-card-foreground);
}

.card-footer {
    background-color: rgba(87, 82, 121, .04) !important;
    border-top: 1px solid var(--cl-border-soft);
    color: var(--cl-card-foreground);
}

.card > .card-footer:last-child {
    border-radius: 0 0 var(--cl-radius-lg) var(--cl-radius-lg);
}

/* Panels set into a card take the paper colour so they read as inset. */
.card .bg-light,
.card .bg-white,
.modal-content .bg-light {
    border: 1px solid var(--cl-border-soft) !important;
}

.hover-card:hover,
.hover-shadow:hover {
    box-shadow: var(--cl-shadow-lg) !important;
}

/* -------------------------------------------------------------------------
   Badges and alerts
   ------------------------------------------------------------------------- */
.badge {
    border-radius: var(--cl-radius);
    font-weight: 500;
    letter-spacing: .01em;
}

.badge.bg-secondary { color: var(--cl-foreground) !important; }
.badge.bg-light,
.badge.bg-white {
    border: 1px solid var(--cl-border) !important;
    color: var(--cl-foreground) !important;
}

.badge.bg-warning.text-dark { color: var(--cl-accent-foreground) !important; }

.badge-soft-primary { color: var(--cl-primary); background-color: var(--cl-primary-soft); }
.badge-soft-secondary { color: var(--cl-muted-foreground); background-color: var(--cl-secondary-soft); }
.badge-soft-success { color: var(--cl-success); background-color: var(--cl-success-soft); }
.badge-soft-info { color: var(--cl-info); background-color: var(--cl-info-soft); }
.badge-soft-warning { color: var(--cl-accent); background-color: var(--cl-accent-soft); }
.badge-soft-danger { color: var(--cl-destructive); background-color: var(--cl-destructive-soft); }

.alert {
    border-radius: var(--cl-radius);
    border: 1px solid transparent;
}

.alert-primary { background-color: var(--cl-primary-soft); border-color: var(--cl-primary); color: var(--cl-foreground); }
.alert-success { background-color: var(--cl-success-soft); border-color: var(--cl-success); color: var(--cl-foreground); }
.alert-secondary { background-color: var(--cl-secondary-soft); border-color: var(--cl-border); color: var(--cl-foreground); }
.alert-info { background-color: var(--cl-info-soft); border-color: var(--cl-info); color: var(--cl-foreground); }
.alert-warning { background-color: var(--cl-accent-soft); border-color: var(--cl-accent); color: var(--cl-foreground); }
.alert-danger { background-color: var(--cl-destructive-soft); border-color: var(--cl-destructive); color: var(--cl-foreground); }
.alert-light { background-color: var(--cl-background); border-color: var(--cl-border); color: var(--cl-foreground); }
.alert a,
.alert .alert-link { color: var(--cl-primary); }

/* -------------------------------------------------------------------------
   Tables and DataTables
   ------------------------------------------------------------------------- */
.table {
    color: var(--cl-foreground);
    border-color: var(--cl-border-soft);
    --bs-table-striped-color: var(--cl-foreground);
    --bs-table-hover-color: var(--cl-foreground);
    --bs-table-striped-bg: transparent;
    --bs-table-hover-bg: transparent;
}

.table > :not(caption) > * > * {
    background-color: transparent;
    color: var(--cl-foreground);
    border-bottom-color: var(--cl-border-soft);
}

.table thead th,
.table .thead-light th,
table.dataTable thead th {
    background-color: rgba(87, 82, 121, .06) !important;
    color: var(--cl-foreground) !important;
    border-bottom: 1px solid var(--cl-border) !important;
    font-weight: 600;
}

.table tbody tr {
    border-bottom: 1px solid var(--cl-border-soft);
}

.table.dataTable,
.table-bordered {
    border: 1px solid var(--cl-border) !important;
    border-radius: var(--cl-radius);
}

.table-bordered th,
.table-bordered td {
    border-color: var(--cl-border-soft);
}

.table-striped > tbody > tr:nth-of-type(2n+1),
.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(87, 82, 121, .03);
}

.table-striped tbody tr:nth-of-type(even) {
    background-color: transparent;
}

.table-hover tbody tr:hover {
    background-color: var(--cl-secondary-soft);
}

.table-hover tbody tr:hover td {
    color: var(--cl-foreground);
}

table.table td h2 a { color: var(--cl-foreground); }
table.table td h2 a:hover { color: var(--cl-primary); }
table.table td h2 span { color: var(--cl-muted-foreground); }

table.dataTable thead .sorting:before,
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:before,
table.dataTable thead .sorting_desc:after {
    color: var(--cl-foreground);
}

table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_desc:after {
    color: var(--cl-primary);
    opacity: 1;
}

.dataTables_wrapper,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
    color: var(--cl-foreground) !important;
}

.dataTables_wrapper .dataTables_processing,
div.dataTables_processing {
    background: var(--cl-card) !important;
    border: 1px solid var(--cl-border);
    border-radius: var(--cl-radius);
    box-shadow: var(--cl-shadow-lg);
    color: var(--cl-foreground) !important;
}

div.dataTables_processing > div:last-child > div {
    background: var(--cl-primary) !important;
}

.table-responsive::-webkit-scrollbar-track { background: var(--cl-card); }
.table-responsive::-webkit-scrollbar-thumb { background: var(--cl-muted); }
.table-responsive::-webkit-scrollbar-thumb:hover { background: var(--cl-border); }

/* DataTables export buttons */
.dt-buttons .btn,
.dt-button,
button.dt-button {
    background: var(--cl-background) !important;
    border: 1px solid var(--cl-border) !important;
    border-radius: var(--cl-radius) !important;
    color: var(--cl-foreground) !important;
}

.dt-buttons .btn:hover,
button.dt-button:hover {
    background: var(--cl-secondary) !important;
    border-color: var(--cl-border) !important;
    color: var(--cl-foreground) !important;
}

/* -------------------------------------------------------------------------
   Pagination
   ------------------------------------------------------------------------- */
.page-link,
.pagination > li > a,
.pagination > li > span {
    background-color: var(--cl-background);
    border: 1px solid var(--cl-border);
    color: var(--cl-foreground);
}

.page-link:hover,
.pagination > li > a:hover {
    background-color: var(--cl-secondary);
    border-color: var(--cl-border);
    color: var(--cl-foreground);
}

.page-link:focus {
    box-shadow: 0 0 0 .2rem var(--cl-ring);
}

.page-item.active .page-link,
.pagination > .active > a,
.pagination > .active > a:focus,
.pagination > .active > a:hover,
.pagination > .active > span,
.pagination > .active > span:focus,
.pagination > .active > span:hover {
    background-color: var(--cl-primary);
    border-color: var(--cl-primary-hover);
    color: var(--cl-primary-foreground);
}

.page-item.disabled .page-link {
    background-color: var(--cl-card);
    border-color: var(--cl-border-soft);
    color: var(--cl-muted);
}

.page-item:first-child .page-link {
    border-top-left-radius: var(--cl-radius);
    border-bottom-left-radius: var(--cl-radius);
}

.page-item:last-child .page-link {
    border-top-right-radius: var(--cl-radius);
    border-bottom-right-radius: var(--cl-radius);
}

/* -------------------------------------------------------------------------
   Modals, dropdowns, tabs, accordions, misc components
   ------------------------------------------------------------------------- */
.modal-content {
    background-color: var(--cl-card);
    color: var(--cl-foreground);
    border: 1px solid var(--cl-border);
    border-radius: var(--cl-radius-lg);
    box-shadow: var(--cl-shadow-lg);
}

.modal-header {
    background-color: var(--cl-primary);
    color: var(--cl-primary-foreground);
    border-bottom: 1px solid var(--cl-primary-hover);
    border-radius: calc(var(--cl-radius-lg) - 1px) calc(var(--cl-radius-lg) - 1px) 0 0;
}

.modal-header .modal-title,
.modal-header h1, .modal-header h2, .modal-header h3,
.modal-header h4, .modal-header h5, .modal-header h6 {
    color: var(--cl-primary-foreground) !important;
}

.modal-header .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
    opacity: .9;
}

.modal-header.cl-header-secondary {
    background-color: var(--cl-success);
    border-bottom-color: var(--cl-success-hover);
}

.modal-footer {
    background-color: rgba(87, 82, 121, .04) !important;
    border-top: 1px solid var(--cl-border-soft);
    border-radius: 0 0 calc(var(--cl-radius-lg) - 1px) calc(var(--cl-radius-lg) - 1px);
}

.modal-backdrop {
    background-color: var(--cl-foreground);
}

.dropdown-menu {
    background-color: var(--cl-card);
    border: 1px solid var(--cl-border);
    border-radius: var(--cl-radius);
    box-shadow: var(--cl-shadow-lg);
    color: var(--cl-foreground);
}

.dropdown-item {
    color: var(--cl-foreground);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--cl-secondary-soft);
    color: var(--cl-foreground);
}

/* Menus in the page content (Export and the like): a padded panel that drops in,
   with roomy rows and tinted icons. */
.page-wrapper .content .dropdown-menu {
    min-width: 11.5rem;
    margin-top: .45rem !important;
    padding: .4rem;
    border-radius: var(--cl-radius-lg);
    z-index: 1050;
}

.page-wrapper .content .dropdown-menu.show {
    animation: dtMenuIn .18s cubic-bezier(.2, .8, .2, 1);
}

@keyframes dtMenuIn {
    from { opacity: 0; margin-top: 0; }
}

.page-wrapper .content .dropdown-item {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .55rem .7rem;
    border-radius: var(--cl-radius);
    font-size: .9rem;
    font-weight: 500;
    transition: background-color .15s ease, color .15s ease;
}

.page-wrapper .content .dropdown-item i {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin: 0 !important;
    border-radius: var(--cl-radius);
    background: var(--cl-primary-soft);
    color: var(--cl-primary);
    font-size: .9rem;
}

.page-wrapper .content .dropdown-item .fa-file-csv {
    background: var(--cl-info-soft);
    color: var(--cl-info-hover);
}

.page-wrapper .content .dropdown-item .fa-file-excel {
    background: var(--cl-success-soft);
    color: var(--cl-success);
}

.page-wrapper .content .dropdown-item .fa-file-pdf {
    background: var(--cl-destructive-soft);
    color: var(--cl-destructive);
}

.page-wrapper .content .dropdown-item small {
    display: block;
    font-size: .72rem;
    font-weight: 400;
    color: var(--cl-muted-foreground);
}

.page-wrapper .content .dropdown-toggle::after {
    margin-left: .5em;
    vertical-align: .15em;
    transition: transform .2s ease;
}

.page-wrapper .content .dropdown-toggle.show::after {
    transform: rotate(180deg);
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--cl-primary);
    color: var(--cl-primary-foreground);
}

.dropdown-divider {
    border-top-color: var(--cl-border-soft);
}

.nav-tabs {
    border-bottom-color: var(--cl-border);
}

.nav-tabs .nav-link {
    color: var(--cl-foreground);
    border-radius: var(--cl-radius) var(--cl-radius) 0 0;
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
    background-color: var(--cl-secondary-soft);
    border-color: transparent;
    color: var(--cl-foreground);
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    background-color: var(--cl-card);
    border-color: var(--cl-border) var(--cl-border) var(--cl-card);
    color: var(--cl-primary);
}

.nav-pills .nav-link.active {
    background-color: var(--cl-primary);
    color: var(--cl-primary-foreground);
}

.accordion-item,
.setting-accordion .accordion-item {
    background-color: var(--cl-card);
    border: 1px solid var(--cl-border);
    color: var(--cl-foreground);
}

.accordion-button {
    background-color: var(--cl-card);
    color: var(--cl-foreground);
}

.accordion-button:not(.collapsed) {
    background: var(--cl-secondary-soft);
    color: var(--cl-foreground);
    border-bottom: 1px solid var(--cl-border-soft);
    box-shadow: none;
}

.accordion-button:focus {
    border-color: var(--cl-primary);
    box-shadow: 0 0 0 .2rem var(--cl-ring);
}

.accordion-button::after,
.accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23575279'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.accordion-body {
    background-color: var(--cl-card);
}

.list-group-item {
    background-color: var(--cl-card);
    border-color: var(--cl-border-soft);
    color: var(--cl-foreground);
}

.list-group-item.active {
    background-color: var(--cl-primary);
    border-color: var(--cl-primary-hover);
    color: var(--cl-primary-foreground);
}

.breadcrumb,
.page-header .breadcrumb {
    background-color: transparent;
    color: var(--cl-muted-foreground);
}

.page-header .breadcrumb a,
.breadcrumb-item a { color: var(--cl-primary); }
.breadcrumb-item.active { color: var(--cl-muted-foreground); }

.progress {
    background-color: var(--cl-primary-soft);
    border-radius: var(--cl-radius);
}

.progress-bar {
    background-color: var(--cl-primary);
}

.tooltip-inner {
    background-color: var(--cl-foreground);
    color: var(--cl-background);
    border-radius: var(--cl-radius);
}

.spinner-border {
    color: var(--cl-primary);
}

.avatar-title {
    background-color: var(--cl-muted);
    color: var(--cl-foreground);
}

.avatar > img,
.avatar-img,
.user-img img,
img.rounded-circle {
    border: 2px solid var(--cl-border) !important;
    background-color: var(--cl-muted);
}

.avatar-online:before { background-color: var(--cl-success); }
.avatar-offline:before { background-color: var(--cl-destructive); }
.avatar-away:before { background-color: var(--cl-accent); }

/* -------------------------------------------------------------------------
   App shell: header, sidebar, content, footer
   ------------------------------------------------------------------------- */
.main-wrapper,
.page-wrapper,
.page-wrapper > .content {
    background-color: var(--cl-background);
}

.header {
    background-color: var(--cl-background);
    border-bottom: 1px solid var(--cl-border);
    box-shadow: none;
}

.header .header-left {
    background: var(--cl-card);
    border-right: 1px solid var(--cl-border);
    border-bottom: 1px solid var(--cl-border);
    box-shadow: none;
}

#toggle_btn,
.mini-sidebar .menu-toggle #toggle_btn,
.mobile_btn,
.mobile_btn:hover {
    color: var(--cl-foreground) !important;
}

#toggle_btn:hover {
    color: var(--cl-primary) !important;
}

.user-menu.nav > li > a {
    color: var(--cl-foreground);
}

.user-menu.nav > li > a:hover,
.user-menu.nav > li > a:focus {
    background-color: var(--cl-secondary-soft);
}

.user-menu.nav > li > a:hover i,
.user-menu.nav > li > a:focus i {
    color: var(--cl-primary);
}

.user-menu.nav > li > a .badge {
    background-color: var(--cl-primary);
    color: var(--cl-primary-foreground);
}

.user-img .user-text h6,
.user-header .user-text h6 {
    color: var(--cl-foreground);
}

.user-img .user-text .text-muted,
.user-header .user-text .text-muted {
    color: var(--cl-muted-foreground) !important;
}

.header .has-arrow .dropdown-toggle:after {
    border-bottom: 2px solid var(--cl-foreground);
    border-right: 2px solid var(--cl-foreground);
}

.header-nav-list img,
.zoom-screen img {
    /* The icon file is a fixed dark stroke; tint it to the foreground colour. */
    filter: brightness(0) saturate(100%) invert(33%) sepia(12%) saturate(1240%) hue-rotate(207deg) brightness(90%) contrast(88%);
}

.user-header {
    background-color: var(--cl-background);
    border-bottom: 1px solid var(--cl-border-soft);
}

.user-menu .dropdown-menu .dropdown-item {
    background-color: var(--cl-card);
    border-top: 1px solid var(--cl-border-soft);
    color: var(--cl-foreground);
}

.user-menu .dropdown-menu .dropdown-item:hover,
.user-menu .dropdown-menu .dropdown-item:focus,
.header .dropdown-menu > li > a:focus,
.header .dropdown-menu > li > a:hover {
    background-color: var(--cl-secondary-soft);
    color: var(--cl-foreground);
}

.header .dropdown-menu > li > a i,
.header .user-menu .dropdown-menu > li > a i,
.user-menu .dropdown-menu .dropdown-item i {
    color: inherit;
}

.sidebar,
.sidebar-inner,
.sidebar-menu {
    background-color: var(--cl-card);
}

.sidebar {
    border-right: 1px solid var(--cl-border);
    box-shadow: none;
}

.sidebar-menu li a {
    color: var(--cl-foreground);
    border-radius: var(--cl-radius);
}

.sidebar-menu li a:hover,
.sidebar-menu > ul > li > a:hover {
    background-color: var(--cl-secondary-soft);
    color: var(--cl-foreground);
}

.sidebar-menu li.active > a,
.sidebar-menu li.active > a:hover {
    background-color: var(--cl-primary);
    color: var(--cl-primary-foreground);
    box-shadow: var(--cl-shadow);
}

.sidebar-menu li a i,
.sidebar-menu li a svg {
    color: inherit;
}

.sidebar-menu ul ul a {
    color: var(--cl-foreground);
}

.sidebar-menu ul ul a.active {
    color: var(--cl-primary);
    font-weight: 600;
}

.sidebar-menu ul ul a:hover {
    color: var(--cl-primary);
}

.sidebar-menu li.menu-title,
.sidebar-menu li.menu-title a {
    color: var(--cl-muted-foreground);
}

.sidebar-menu li a > .badge {
    background-color: var(--cl-primary);
    color: var(--cl-primary-foreground);
}

.mini-sidebar .sidebar-menu li a .sidebar-tooltip {
    background: var(--cl-foreground);
    color: var(--cl-background);
    border-radius: var(--cl-radius);
    box-shadow: var(--cl-shadow);
}

.mini-sidebar .sidebar-menu li a .sidebar-tooltip-arrow {
    border-right-color: var(--cl-foreground);
}

.sidebar-overlay {
    background-color: rgba(87, 82, 121, .6);
}

.page-title,
.page-header .page-title {
    color: var(--cl-foreground);
}

/* Footer bar: the credit line on the dark stage, starting where the sidebar ends. */
.main-wrapper footer {
    left: 259px;
    width: auto;
    right: 0;
    padding: .7rem 1.875rem;
    text-align: left;
    color: var(--cl-background);
    background-color: var(--cl-stage);
    background-image:
        radial-gradient(60% 200% at 0% 0%, color-mix(in srgb, var(--cl-stage-accent) 40%, transparent), transparent 70%),
        radial-gradient(50% 200% at 100% 100%, color-mix(in srgb, var(--cl-stage-accent) 45%, transparent), transparent 70%);
    border-top: 1px solid color-mix(in srgb, var(--cl-background) 14%, transparent);
    transition: left .4s ease;
}

.main-wrapper footer p {
    color: inherit !important;
    font-size: .875rem;
    font-weight: 500;
    text-transform: none;
}

.main-wrapper footer .vis-credit__sign {
    font-weight: 500;
}

.main-wrapper footer .vis-credit__sign img {
    height: 24px;
    opacity: 1;
}

@media (min-width: 992px) {
    .mini-sidebar .main-wrapper footer {
        left: 78px;
    }
}

@media (max-width: 991.98px) {
    .main-wrapper footer {
        left: 0;
        padding: .6rem 1rem;
    }
}

/* Room for the fixed bar under the last block of every page. */
.page-wrapper > .content {
    padding-bottom: 4.5rem;
}

/* -------------------------------------------------------------------------
   Page-level pieces
   ------------------------------------------------------------------------- */
.dashboard-card {
    background-color: var(--cl-card);
    border: 1px solid var(--cl-border);
    border-radius: var(--cl-radius-lg);
    box-shadow: var(--cl-shadow);
    transition: transform .2s ease, box-shadow .2s ease;
    padding: 25px;
    color: var(--cl-foreground);
}

.dashboard-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--cl-shadow-lg);
}

.dashboard-card h6 {
    font-weight: 600;
    font-size: 15px;
    color: var(--cl-muted-foreground);
    margin-bottom: 6px;
}

.dashboard-card h3 {
    font-size: 32px;
    font-weight: 800;
    color: var(--cl-foreground);
    margin-bottom: 8px;
}

.stat-line {
    font-size: 14px;
    color: var(--cl-foreground);
}

.stat-line span {
    color: var(--cl-primary);
    font-weight: 500;
}

.dashboard-icon img {
    width: 50px;
    height: 50px;
    object-fit: contain;
    /* Recolours the black line icons to the primary pink. */
    filter: brightness(0) saturate(100%) invert(33%) sepia(12%) saturate(1240%) hue-rotate(207deg) brightness(90%) contrast(88%);
}

.dashboard-header-line {
    height: 4px;
    width: 50px;
    background-color: var(--cl-primary);
    border-radius: var(--cl-radius);
    margin-top: 8px;
    margin-bottom: 25px;
}

a.text-decoration-none {
    color: inherit;
}

a.text-decoration-none:hover {
    color: var(--cl-primary);
}

.cl-image-preview {
    max-width: 150px;
    border-radius: var(--cl-radius);
    border: 1px solid var(--cl-border);
}

#global-preloader {
    background: rgba(250, 244, 237, .92) !important;
    font-family: var(--cl-font) !important;
}

#global-preloader p {
    color: var(--cl-foreground) !important;
}

/* -------------------------------------------------------------------------
   Toastr and SweetAlert2
   ------------------------------------------------------------------------- */
#toast-container > div {
    border-radius: var(--cl-radius);
    box-shadow: var(--cl-shadow-lg) !important;
    opacity: 1;
    color: #ffffff;
}

#toast-container > .toast-success { background-color: var(--cl-success); }
#toast-container > .toast-error { background-color: var(--cl-destructive); }
#toast-container > .toast-warning { background-color: var(--cl-accent); }
#toast-container > .toast-info { background-color: var(--cl-info); }
#toast-container .toast-progress { background-color: #ffffff; opacity: .55; }
#toast-container .toast-close-button { color: #ffffff; opacity: .9; text-shadow: none; }

.swal2-popup {
    background: var(--cl-card) !important;
    color: var(--cl-foreground) !important;
    border: 1px solid var(--cl-border);
    border-radius: var(--cl-radius-lg) !important;
    box-shadow: var(--cl-shadow-lg);
}

.swal2-title,
.swal2-html-container,
.swal2-content {
    color: var(--cl-foreground) !important;
}

.swal2-container.swal2-backdrop-show {
    background: rgba(87, 82, 121, .5) !important;
}

.swal2-styled {
    border-radius: var(--cl-radius) !important;
    font-weight: 500 !important;
    box-shadow: var(--cl-shadow) !important;
}

.swal2-styled.swal2-confirm {
    background-color: var(--cl-primary) !important;
    color: var(--cl-primary-foreground) !important;
}

.swal2-styled.swal2-deny {
    background-color: var(--cl-destructive) !important;
}

.swal2-styled.swal2-cancel {
    background-color: var(--cl-background) !important;
    border: 1px solid var(--cl-border) !important;
    color: var(--cl-foreground) !important;
}

.swal2-styled:focus {
    box-shadow: 0 0 0 .2rem var(--cl-ring) !important;
}

.swal2-icon.swal2-warning { border-color: var(--cl-accent) !important; color: var(--cl-accent) !important; }
.swal2-icon.swal2-info { border-color: var(--cl-info) !important; color: var(--cl-info) !important; }
.swal2-icon.swal2-question { border-color: var(--cl-info) !important; color: var(--cl-info) !important; }
.swal2-icon.swal2-error { border-color: var(--cl-destructive) !important; color: var(--cl-destructive) !important; }
.swal2-icon.swal2-error [class^='swal2-x-mark-line'] { background-color: var(--cl-destructive) !important; }
.swal2-icon.swal2-success { border-color: var(--cl-success) !important; color: var(--cl-success) !important; }
.swal2-icon.swal2-success [class^='swal2-success-line'] { background-color: var(--cl-success) !important; }
.swal2-icon.swal2-success .swal2-success-ring { border-color: rgba(40, 105, 131, .3) !important; }
.swal2-icon.swal2-success [class^='swal2-success-circular-line'],
.swal2-icon.swal2-success .swal2-success-fix { background-color: transparent !important; }

.swal2-input,
.swal2-select,
.swal2-textarea {
    background: var(--cl-background) !important;
    border: 1px solid var(--cl-input) !important;
    border-radius: var(--cl-radius) !important;
    color: var(--cl-foreground) !important;
}

.swal2-timer-progress-bar {
    background: var(--cl-primary) !important;
}

.swal2-styled.swal2-confirm.cl-swal-danger {
    background-color: var(--cl-destructive) !important;
    color: var(--cl-destructive-foreground) !important;
}

.swal2-styled.swal2-confirm.cl-swal-secondary {
    background-color: var(--cl-success) !important;
    color: #ffffff !important;
}

/* Every dialog header is the primary colour, whatever utility class it carries. */
.modal-header[class*="bg-"]:not(.cl-header-secondary) {
    background-color: var(--cl-primary) !important;
}

.modal-header .btn-close,
.modal-header .btn-close.btn-close-dark,
.modal-header .btn-close.btn-close-white {
    filter: invert(1) grayscale(100%) brightness(200%) !important;
}

.content {
    background-color: transparent;
}

.user-menu.nav .header-nav-list {
    background: var(--cl-card);
    border: 1px solid var(--cl-border);
}

.user-menu.nav .header-nav-list:hover {
    background: var(--cl-secondary-soft);
}

/* Wordmark sizing in the header bar. */
.header .header-left .logo img {
    height: 32px !important;
    max-width: 170px !important;
}

.mini-sidebar .header-left .logo.logo-small img {
    width: 36px !important;
    height: 36px !important;
}

/* ==========================================================================
   Pop-up messages (partials/notify.blade.php) and every SweetAlert dialog
   ========================================================================== */
.swal2-container.swal2-backdrop-show {
    background: rgba(42, 39, 64, .45) !important;
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

.swal2-popup {
    padding: 2rem 1.75rem 1.5rem !important;
}

.swal2-title {
    font-size: 1.35rem !important;
    font-weight: 700 !important;
}

.swal2-html-container {
    font-size: 1rem !important;
    color: var(--cl-muted-foreground) !important;
}

.dt-pop-in {
    animation: dtPopIn .5s cubic-bezier(.2, 1, .3, 1) both;
}

.dt-pop-out {
    animation: dtPopOut .2s ease both;
}

@keyframes dtPopIn {
    0% { opacity: 0; transform: translateY(26px) scale(.88); }
    60% { opacity: 1; transform: translateY(-5px) scale(1.02); }
    100% { opacity: 1; transform: none; }
}

@keyframes dtPopOut {
    to { opacity: 0; transform: translateY(12px) scale(.96); }
}

.swal2-popup.dt-pop {
    --pop: var(--cl-primary);
    border-top: 5px solid var(--pop) !important;
    overflow: hidden;
}

.swal2-popup.dt-pop-success { --pop: var(--cl-success); }
.swal2-popup.dt-pop-error { --pop: var(--cl-destructive); }
.swal2-popup.dt-pop-warning { --pop: var(--cl-accent); }
.swal2-popup.dt-pop-info { --pop: var(--cl-info); }

/* A soft halo behind the icon that breathes once the dialog has landed. */
.swal2-popup.dt-pop .swal2-icon {
    margin-top: .75rem;
    box-shadow: 0 0 0 12px color-mix(in srgb, var(--pop) 12%, transparent);
    animation: dtPopHalo 1.8s ease-in-out .4s infinite;
}

@keyframes dtPopHalo {
    0%, 100% { box-shadow: 0 0 0 12px color-mix(in srgb, var(--pop) 12%, transparent); }
    50% { box-shadow: 0 0 0 20px color-mix(in srgb, var(--pop) 4%, transparent); }
}

.swal2-popup.dt-pop .swal2-styled.swal2-confirm {
    background-color: var(--pop) !important;
    min-width: 8rem;
}

.swal2-popup.dt-pop .swal2-timer-progress-bar-container {
    height: 4px;
}

.swal2-popup.dt-pop .swal2-timer-progress-bar {
    background: var(--pop) !important;
}

.swal2-popup.dt-pop .swal2-footer {
    margin-top: 1.1rem;
    padding-top: .8rem;
    border-top: 1px solid var(--cl-border-soft);
    font-size: .78rem;
    color: var(--cl-muted-foreground);
}

.dt-pop-demo i {
    color: var(--cl-accent);
    margin-right: .25rem;
}

.dt-pop-list {
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: left;
}

.dt-pop-list li {
    position: relative;
    padding: .4rem 0 .4rem 1.3rem;
    border-bottom: 1px solid var(--cl-border-soft);
    font-size: .95rem;
}

.dt-pop-list li:last-child {
    border-bottom: 0;
}

.dt-pop-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .95rem;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--pop);
}

/* ==========================================================================
   Dashboards
   ========================================================================== */
@keyframes dtRise {
    from { opacity: 0; transform: translateY(14px); }
}

/* Fills backwards only: once a block has risen in, it keeps no transform, so it
   does not trap its dropdowns underneath the blocks that follow it. */
.page-wrapper .content > .card,
.page-wrapper .content > .row,
.dash > * {
    animation: dtRise .5s cubic-bezier(.2, 1, .3, 1) backwards;
}

/* Whatever holds an open menu sits above its neighbours. */
.page-wrapper .content > .card:has(.dropdown-menu.show),
.page-wrapper .content > .row:has(.dropdown-menu.show),
.dash > *:has(.dropdown-menu.show) {
    position: relative;
    z-index: 30;
}

.dash > *:nth-child(2) { animation-delay: .06s; }
.dash > *:nth-child(3) { animation-delay: .12s; }
.dash > *:nth-child(4) { animation-delay: .18s; }
.dash > *:nth-child(5) { animation-delay: .24s; }

.dash-hero {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    padding: 1.7rem 1.9rem;
    border-radius: var(--cl-radius-lg);
    overflow: hidden;
    color: var(--cl-background);
    background-color: var(--cl-stage);
    background-image:
        radial-gradient(70% 120% at 0% 0%, color-mix(in srgb, var(--cl-stage-accent) 55%, transparent), transparent 60%),
        radial-gradient(60% 120% at 100% 100%, color-mix(in srgb, var(--cl-destructive) 40%, transparent), transparent 60%);
    box-shadow: var(--cl-shadow-lg);
}

/* A hint of pleats on the right, like a curtain drawn back. */
.dash-hero::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 34%;
    background: repeating-linear-gradient(90deg, rgba(250, 244, 237, 0) 0, rgba(250, 244, 237, .07) 16px, rgba(250, 244, 237, 0) 32px);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000);
    mask-image: linear-gradient(90deg, transparent, #000);
    pointer-events: none;
}

.dash-hero > * {
    position: relative;
    z-index: 1;
}

.dash-kicker {
    font-family: var(--cl-font-mono);
    font-size: 10px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--cl-stage-highlight);
}

.dash-hero h2 {
    margin: .45rem 0 .3rem;
    font-size: clamp(1.4rem, 2.2vw, 1.9rem);
    font-weight: 700;
    color: #ffffff;
}

.dash-hero p {
    margin: 0;
    color: rgba(250, 244, 237, .82);
}

.dash-hero p strong {
    color: var(--cl-stage-highlight);
}

.dash-actions {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}

.dash-hero .btn-light {
    background-color: #ffffff !important;
    border-color: #ffffff !important;
    color: var(--cl-stage) !important;
    font-weight: 600;
}

.dash-hero .btn-light:hover {
    background-color: var(--cl-stage-highlight) !important;
    border-color: var(--cl-stage-highlight) !important;
}

.dash-hero .btn-ghost {
    background: rgba(250, 244, 237, .08);
    border: 1px solid rgba(250, 244, 237, .35);
    color: #ffffff;
}

.dash-hero .btn-ghost:hover {
    background: rgba(250, 244, 237, .2);
    color: #ffffff;
}

/* Key figure cards. --kpi is the card's own colour. */
.kpi {
    --kpi: var(--cl-primary);
    position: relative;
    display: block;
    height: 100%;
    padding: 1.2rem 1.3rem 1.1rem;
    background: var(--cl-card);
    border: 1px solid var(--cl-border);
    border-radius: var(--cl-radius-lg);
    box-shadow: var(--cl-shadow);
    color: var(--cl-foreground);
    text-decoration: none;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.kpi::before {
    content: "";
    position: absolute;
    right: -30px;
    top: -30px;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--kpi) 9%, transparent);
}

a.kpi:hover {
    transform: translateY(-4px);
    box-shadow: var(--cl-shadow-lg);
    border-color: var(--kpi);
    color: var(--cl-foreground);
}

.kpi-foam { --kpi: var(--cl-info); }
.kpi-pine { --kpi: var(--cl-success); }
.kpi-gold { --kpi: var(--cl-accent); }
.kpi-rose { --kpi: var(--cl-destructive); }

.kpi-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.kpi-icon {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--cl-radius);
    background: color-mix(in srgb, var(--kpi) 14%, transparent);
    color: var(--kpi);
    font-size: 1.05rem;
}

.kpi-chip {
    padding: .2rem .6rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--kpi) 12%, transparent);
    color: var(--kpi);
    font-size: .72rem;
    font-weight: 600;
}

.kpi-value {
    margin-top: .9rem;
    font-size: 2.1rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.02em;
}

.kpi-label {
    margin-top: .3rem;
    font-size: .9rem;
    color: var(--cl-muted-foreground);
}

.kpi-bar,
.dash-meter {
    height: 6px;
    margin-top: .8rem;
    border-radius: 3px;
    background: var(--cl-secondary);
    overflow: hidden;
}

.kpi-bar i,
.dash-meter i {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: var(--kpi, var(--cl-primary));
    animation: dtGrow 1s cubic-bezier(.2, 1, .3, 1) both;
    transform-origin: left;
}

@keyframes dtGrow {
    from { transform: scaleX(0); }
}

.dash-meter {
    margin: .35rem 0 .2rem;
}

.kpi-foot {
    display: flex;
    justify-content: space-between;
    margin-top: .55rem;
    font-size: .78rem;
    color: var(--cl-muted-foreground);
}

/* Panels. */
.panel {
    background: var(--cl-card);
    border: 1px solid var(--cl-border);
    border-radius: var(--cl-radius-lg);
    box-shadow: var(--cl-shadow);
    overflow: hidden;
}

.panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.3rem .9rem;
}

.panel-head h5 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
}

.panel-head small {
    color: var(--cl-muted-foreground);
}

.panel-tag {
    padding: .2rem .65rem;
    border-radius: 999px;
    background: var(--cl-secondary-soft);
    font-size: .75rem;
    font-weight: 600;
    white-space: nowrap;
}

.panel-link {
    font-size: .82rem;
    font-weight: 600;
    color: var(--cl-destructive);
    text-decoration: none;
    white-space: nowrap;
}

.panel-link i {
    font-size: .7rem;
    margin-left: .2rem;
    transition: transform .15s ease;
}

.panel-link:hover {
    color: var(--cl-destructive-hover);
}

.panel-link:hover i {
    transform: translateX(3px);
}

.panel-chart {
    padding: 0 .6rem .6rem;
    min-height: 300px;
}

.dash-table thead th {
    padding: .6rem 1.3rem;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--cl-muted-foreground) !important;
    background: rgba(87, 82, 121, .04) !important;
    border-bottom: 1px solid var(--cl-border-soft) !important;
    white-space: nowrap;
}

.dash-table tbody td {
    padding: .8rem 1.3rem;
    border-bottom: 1px solid var(--cl-border-soft);
}

.dash-table tbody tr:last-child td {
    border-bottom: 0;
}

.dash-table tbody tr {
    border-bottom: 0;
    transition: background-color .15s ease;
}

.dash-table tbody tr:hover {
    background: var(--cl-primary-soft);
}

.dash-entity {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    color: var(--cl-foreground);
    text-decoration: none;
}

.dash-entity strong,
.dash-entity small {
    display: block;
}

.dash-entity small {
    color: var(--cl-muted-foreground);
}

.dash-avatar {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--cl-radius);
    background: var(--cl-primary-soft);
    color: var(--cl-primary);
    font-weight: 700;
}

.dash-mono {
    font-family: var(--cl-font-mono);
    font-size: .85rem;
    color: var(--cl-foreground);
    text-decoration: none;
}

.dash-mono:hover {
    color: var(--cl-destructive);
}

.dash-list {
    padding: 0 1.3rem 1rem;
}

.dash-list-item {
    padding: .75rem 0;
    border-bottom: 1px solid var(--cl-border-soft);
}

.dash-list-item:last-child {
    border-bottom: 0;
}

.dash-timeline {
    margin: 0;
    padding: 0 1.3rem 1rem;
    list-style: none;
}

.dash-timeline li {
    --tl: var(--cl-primary);
    position: relative;
    display: flex;
    gap: .8rem;
    padding: .7rem 0;
}

.dash-timeline li:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 16px;
    top: 46px;
    bottom: -6px;
    width: 1px;
    background: var(--cl-border);
}

.dash-timeline .tl-installed { --tl: var(--cl-success); }
.dash-timeline .tl-assigned { --tl: var(--cl-primary); }
.dash-timeline .tl-updated { --tl: var(--cl-accent); }
.dash-timeline .tl-inspected { --tl: var(--cl-info); }
.dash-timeline .tl-removed { --tl: var(--cl-destructive); }

.tl-icon {
    flex-shrink: 0;
    width: 33px;
    height: 33px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--tl) 14%, transparent);
    color: var(--tl);
    font-size: .8rem;
}

.dash-timeline p {
    margin: .1rem 0;
    font-size: .88rem;
    color: var(--cl-foreground);
}

.dash-timeline small {
    color: var(--cl-muted-foreground);
}

/* Status pills, used on dashboards and (below) for status text in data tables. */
.pill {
    display: inline-block;
    padding: .22rem .65rem;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 600;
    white-space: nowrap;
}

.pill-success { background: var(--cl-success-soft); color: var(--cl-success); }
.pill-danger { background: var(--cl-destructive-soft); color: var(--cl-destructive); }
.pill-warning { background: var(--cl-accent-soft); color: var(--cl-accent-hover); }
.pill-info { background: var(--cl-info-soft); color: var(--cl-info-hover); }
.pill-muted { background: var(--cl-secondary-soft); color: var(--cl-muted-foreground); }

.apexcharts-tooltip {
    border: 1px solid var(--cl-border) !important;
    border-radius: var(--cl-radius) !important;
    background: var(--cl-card) !important;
    color: var(--cl-foreground) !important;
    box-shadow: var(--cl-shadow-lg) !important;
}

.apexcharts-tooltip-title {
    background: var(--cl-background) !important;
    border-bottom: 1px solid var(--cl-border-soft) !important;
}

@media (max-width: 575.98px) {
    .dash-hero {
        padding: 1.3rem 1.2rem;
    }
}

/* ==========================================================================
   List pages and data tables
   ========================================================================== */
.card > .card-header .card-title {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -.01em;
}

.card > .card-header small.text-muted {
    font-size: .85rem;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter {
    margin-bottom: .9rem;
}

.dataTables_wrapper .dataTables_filter input {
    min-width: 230px;
    height: 38px;
    margin-left: .5rem;
    padding: .4rem .8rem;
}

.dataTables_wrapper .dataTables_length select {
    height: 38px;
    margin: 0 .35rem;
    padding: .3rem 1.8rem .3rem .6rem;
}

.table.dataTable {
    border-collapse: separate !important;
    border-spacing: 0;
    border-radius: var(--cl-radius-lg);
    overflow: hidden;
}

table.dataTable thead th {
    padding: .85rem .9rem !important;
    font-size: .72rem;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--cl-muted-foreground) !important;
    white-space: nowrap;
}

table.dataTable tbody td {
    padding: .8rem .9rem !important;
    vertical-align: middle;
    border-bottom: 1px solid var(--cl-border-soft);
}

table.dataTable tbody tr:last-child td {
    border-bottom: 0;
}

table.dataTable tbody tr {
    transition: background-color .15s ease;
}

.table-hover tbody tr:hover {
    background-color: var(--cl-primary-soft);
}

/* Status words in table cells become pills. */
table.dataTable td > span.fw-bold[class*="text-"] {
    display: inline-block;
    padding: .22rem .7rem;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 600 !important;
    white-space: nowrap;
}

table.dataTable td > span.fw-bold.text-success { background: var(--cl-success-soft); }
table.dataTable td > span.fw-bold.text-danger { background: var(--cl-destructive-soft); }
table.dataTable td > span.fw-bold.text-warning { background: var(--cl-accent-soft); color: var(--cl-accent-hover) !important; }
table.dataTable td > span.fw-bold.text-info { background: var(--cl-info-soft); color: var(--cl-info-hover) !important; }
table.dataTable td > span.fw-bold.text-primary { background: var(--cl-primary-soft); }
table.dataTable td > span.fw-bold.text-muted,
table.dataTable td > span.fw-bold.text-secondary { background: var(--cl-secondary-soft); }

.badge {
    border-radius: 999px;
    padding: .35em .75em;
}

/* Row actions: square icon buttons that take their colour on hover. */
table .btn.btn-sm:not(.btn-primary):not(.btn-secondary):not(.btn-success):not(.btn-danger):not(.btn-info):not(.btn-warning):not([class*="btn-outline"]) {
    width: 34px;
    height: 34px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--cl-radius);
    background: var(--cl-secondary-soft);
    color: var(--cl-foreground);
    transition: background-color .15s ease, color .15s ease, transform .15s ease;
}

table .btn.btn-sm:not(.btn-primary):not(.btn-secondary):not(.btn-success):not(.btn-danger):not(.btn-info):not(.btn-warning):not([class*="btn-outline"]):hover {
    background: var(--cl-primary);
    color: var(--cl-primary-foreground);
    transform: translateY(-2px);
}

table .btn.btn-sm.delete-btn:hover {
    background: var(--cl-destructive) !important;
    color: #ffffff !important;
}

table.dataTable td img.rounded-circle {
    border-radius: var(--cl-radius) !important;
}

.dataTables_wrapper .dataTables_info {
    padding-top: 1.1rem !important;
    font-size: .85rem;
    color: var(--cl-muted-foreground) !important;
}

.dataTables_wrapper .dataTables_paginate {
    padding-top: .8rem !important;
}

.page-link {
    margin: 0 2px;
    border-radius: var(--cl-radius) !important;
}

/* Sidebar: the active item carries an accent bar. */
.sidebar-menu > ul > li {
    margin: 2px 10px;
}

.sidebar-menu > ul > li > a {
    border-radius: var(--cl-radius);
    transition: background-color .15s ease, color .15s ease, padding-left .15s ease;
}

.sidebar-menu > ul > li > a:hover {
    padding-left: 22px;
}

.sidebar-menu li.active > a {
    position: relative;
}

.sidebar-menu li.active > a::before {
    content: "";
    position: absolute;
    left: -10px;
    top: 20%;
    bottom: 20%;
    width: 4px;
    border-radius: 0 4px 4px 0;
    background: var(--cl-destructive);
}

.mini-sidebar .sidebar-menu > ul > li {
    margin: 2px 6px;
}

.swal2-popup:focus,
.swal2-popup:focus-visible {
    outline: none;
}

@media (max-width: 1500px) {
    .dash-table thead th,
    .dash-table tbody td {
        padding-left: .9rem;
        padding-right: .9rem;
    }
}


/* ==========================================================================
   Rich table cells (App\Support\TableCell): picture + name, barcode strip,
   icon tile and usage meter.
   ========================================================================== */
.cell-media {
    display: flex;
    align-items: center;
    gap: .7rem;
    min-width: 0;
}

.cell-avatar {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--cl-secondary);
    border: 2px solid var(--cl-card);
    box-shadow: 0 0 0 1px var(--cl-border), var(--cl-shadow);
}

.cell-logo {
    border-radius: var(--cl-radius);
}

.cell-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
    text-align: left;
}

.cell-text strong {
    font-weight: 600;
    color: var(--cl-foreground);
}

.cell-text small {
    margin-top: .1rem;
    font-size: .76rem;
    color: var(--cl-muted-foreground);
    white-space: nowrap;
}

.cell-tile {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--cl-radius);
    font-size: .95rem;
    color: var(--tone);
    background: color-mix(in srgb, var(--tone) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--tone) 28%, transparent);
}

.tone-iris { --tone: var(--cl-iris); }
.tone-rose { --tone: #d7827e; }
.tone-pine { --tone: var(--cl-success); }
.tone-foam { --tone: var(--cl-info); }
.tone-gold { --tone: var(--cl-accent); }
.tone-love { --tone: var(--cl-destructive); }

/* The strip is always dark bars on white, like the printed label. */
.cell-barcode {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: .25rem;
    padding: .4rem .6rem .3rem;
    border: 1px solid var(--cl-border);
    border-radius: var(--cl-radius);
    background: #fff;
    box-shadow: var(--cl-shadow);
}

.cell-barcode img {
    display: block;
    width: 150px;
    height: 30px;
    image-rendering: pixelated;
}

.cell-barcode code {
    font-family: var(--cl-font-mono);
    font-size: .72rem;
    letter-spacing: .08em;
    color: #575279;
    background: none;
    padding: 0;
}

.cell-meter {
    min-width: 150px;
    max-width: 220px;
}

.cell-meter-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .3rem;
}

.cell-meter-head span {
    font-size: .74rem;
    color: var(--cl-muted-foreground);
}

.cell-meter-bar {
    height: 6px;
    border-radius: 999px;
    background: var(--cl-secondary);
    overflow: hidden;
}

.cell-meter-bar i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--cl-success);
}

.cell-meter.is-mid .cell-meter-bar i { background: var(--cl-accent); }
.cell-meter.is-high .cell-meter-bar i { background: var(--cl-destructive); }

table.dataTable td .cell-media,
table.dataTable td .cell-barcode,
table.dataTable td .cell-meter {
    vertical-align: middle;
}