/* Custom application styles */
:root {
    --primary: #0e6c7c;
    /* Emerald green */
    --primary-foreground: var(--color-white);
}

.dark {
    --primary: #5be3d3;
    /* Lighter emerald for dark mode */
    --primary-foreground: var(--color-black);
}

/* Badge danger variant */
@layer components {
    .kt-badge-danger.kt-badge-outline {
        border-color: rgb(239 68 68); /* red-500 */
        background-color: rgb(254 242 242); /* red-50 */
        color: rgb(185 28 28); /* red-700 */
    }
    
    .dark .kt-badge-danger.kt-badge-outline {
        border-color: rgb(220 38 38); /* red-600 */
        background-color: rgb(127 29 29); /* red-900 */
        color: rgb(254 202 202); /* red-200 */
    }
}

.max-h-\[80vh\] {
    max-height: 80vh;
}

/* Segmentation move hint (segmentation--move-hint): while a moved row's
   helper is hovered, the row itself turns light red — painted on the cells,
   not the row: a background on <tr> is not reliable across browsers — and an
   overlay cloned from template move-hint is laid OVER the table, never
   inserted in it, so nothing moves: a halo centred on the seam where the
   category sits in the base catalogue, a label naming that position, and a
   bracket running outside the table from the row to the seam. The compiled
   Metronic sheet carries no light red, no green shades and no gradient
   stops, hence the literal colours (Tailwind red-100, green-200, green-600;
   green-400 in the dark theme). */
@layer components {
    .move-hint-current > td { background-color: rgb(254 226 226); } /* red-100 */
    .dark .move-hint-current > td { background-color: rgb(127 29 29 / 0.45); }
}

/* The overlay covers its host — the first ancestor of the table that does
   not clip (.kt-table-wrapper scrolls, .kt-card-table does not), made a
   containing block by .move-hint-host — and lets the pointer through. The
   controller only measures, as custom properties on the overlay, from the
   host's top-left corner: --move-hint-from (the row's middle),
   --move-hint-seam and --move-hint-label-left. Everything else is drawn
   here, in one colour inherited by the three pieces. */
.move-hint-host {
    position: relative;
}

.move-hint {
    position: absolute;
    inset: 0;
    color: rgb(22 163 74); /* green-600 */
    pointer-events: none;
}

.dark .move-hint {
    color: rgb(74 222 128); /* green-400 */
}

/* The halo: a green glow fading out both ways from the seam, with a thin
   line on the seam itself. Multiplied over the rows so the text under it
   stays black instead of veiled. */
.move-hint-halo {
    position: absolute;
    left: 0;
    right: 0;
    top: calc(var(--move-hint-seam, 0px) - 14px);
    height: 28px;
    background-image: linear-gradient(to bottom, transparent, rgb(187 247 208) 50%, transparent); /* green-200 */
    mix-blend-mode: multiply;
}

.move-hint-halo::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 13px;
    height: 2px;
    background-color: currentColor;
}

.dark .move-hint-halo {
    background-image: linear-gradient(to bottom, transparent, rgb(22 101 52 / 0.55) 50%, transparent);
    mix-blend-mode: normal;
}

/* The label: a pill sitting on the seam, aligned with the position column. */
.move-hint-label {
    position: absolute;
    left: var(--move-hint-label-left, 0px);
    top: var(--move-hint-seam, 0px);
    transform: translateY(-50%);
    padding: 2px 9px;
    border: 1.5px solid currentColor;
    border-radius: 9999px;
    background-color: var(--color-background);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

/* The bracket: a "[" in the gutter left of the card, from the hovered row to
   the seam — out of the row, along the table's edge, back in at the seam
   with an arrowhead. Three borders of one box, a dot and a triangle as
   pseudo-elements; the "up" variant flips dot and head when the seam lies
   above the row. */
.move-hint-bracket {
    position: absolute;
    left: -18px;
    width: 18px;
    top: min(var(--move-hint-from, 0px), var(--move-hint-seam, 0px));
    height: max(var(--move-hint-from, 0px) - var(--move-hint-seam, 0px), var(--move-hint-seam, 0px) - var(--move-hint-from, 0px));
    box-sizing: border-box;
    border: 2px solid currentColor;
    border-right: 0;
    border-radius: 8px 0 0 8px;
}

/* The dot where the bracket leaves the row: on the top edge by default… */
.move-hint-bracket::before {
    content: '';
    position: absolute;
    right: -3px;
    top: -4px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: currentColor;
}

/* …and the head where it comes back in at the seam: on the bottom edge. */
.move-hint-bracket::after {
    content: '';
    position: absolute;
    right: -9px;
    bottom: -5px;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 8px solid currentColor;
}

.move-hint--up .move-hint-bracket::before {
    top: auto;
    bottom: -4px;
}

.move-hint--up .move-hint-bracket::after {
    bottom: auto;
    top: -5px;
}