/* ===================================================
   Shepherd.js Custom Styles for Dashboard Guided Tour
   =================================================== */

/* === TOOLTIP CONTAINER === */
.shepherd-element {
    z-index: 9999;
    transition: all 0.2s ease-in-out;
    box-sizing: border-box;
    background: #ffffff !important;
    border-radius: 8px 8px 8px 8px !important;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.15) !important;
}
/* Per-step tooltip widths (on .shepherd-element — the actual positioned box) */
.shepherd-element.tooltip-w-350 { width: 350px !important; max-width: none !important; }
.shepherd-element.tooltip-w-377 { width: 377px !important; max-width: none !important; }
.shepherd-element.tooltip-w-407 { width: 407px !important; max-width: none !important; }
.shepherd-element.tooltip-w-421 { width: 421px !important; max-width: none !important; }
.shepherd-element.tooltip-w-448 { width: 448px !important; max-width: none !important; }
.shepherd-element.tooltip-w-516 { width: 516px !important; max-width: none !important; }
.shepherd-element.tooltip-w-524 { width: 524px !important; max-width: none !important; }
.shepherd-element.tooltip-w-430 { width: 430px !important; max-width: none !important; }

/* Responsive fallback */
@media (max-width: 768px) {
    .shepherd-element[class*="tooltip-w-"] { width: auto !important; max-width: 90vw !important; }
}
.shepherd-tooltip {
    background: #ffffff;
    border-radius: 8px 8px 12px 12px !important;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.15);
    padding: 16px;
    overflow-y: auto;
    box-sizing: border-box;
    transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out;
}

/* === CLOSE BUTTON (X) === */
.shepherd-cancel-icon {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    opacity: 1;
    font-size: 0;       /* hides any leftover text "×" */
    line-height: 0;     /* hides any leftover text "×" */
}

.shepherd-cancel-icon svg {
    width: 20px;
    height: 20px;
    display: block;
}

.shepherd-cancel-icon svg path {
    fill: var(--Neutrals-Grey-700, #393939);
}

.shepherd-cancel-icon:hover {
    opacity: 0.7;
}

.shepherd-cancel-icon:hover svg {
    opacity: 1;
}

/* === TOOLTIP CONTENT/TEXT === */
.shepherd-content {
    padding: 16px 0 0 0;
    background: transparent !important;
    border-radius: inherit !important;
    box-shadow: none !important;
    box-sizing: border-box;
    width: 100%;
    overflow: visible;
}

.shepherd-text {
    font-family: 'Mulish', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif !important;
    font-size: var(--shepherd-text-size, 16px);
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0.5px;
    color: #333638;
    width: auto;
    padding: 0px 32px 4px 16px;
    word-break: break-word;
    overflow-wrap: break-word;
}
.shepherd-header {
    padding: 0px 0px 0px 0px;
}
/* === PROGRESS DOTS === */
.shepherd-progress {
    display: flex;
    justify-content: left;
    align-items: left;
    gap: 4px;
    padding: 4px 0px 0px 0px;
    margin-top: 12px;
}

.shepherd-progress-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #F6CAB5;
    transition: all 0.3s ease;
}

.shepherd-progress-dot.active {
    background: #EC8C5E;
    width: 18px;
    height: 6px;
    border-radius: 4px;
}

.shepherd-step-counter {
  font-family: 'Mulish', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif !important;
  font-size: var(--shepherd-counter-size, 12px);
  color: var(--Neutrals-Grey-400, #8D8D8D);;
  font-weight: 400;
}

.shepherd-element.tooltip-w-524 .shepherd-step-counter {
  margin-right: auto;
  align-self: flex-end;
}

.shepherd-element.tooltip-w-430 .shepherd-step-counter {
  margin-right: auto;
  align-self: flex-end;
}
/* === BUTTON CONTAINER === */
.shepherd-footer {
    padding: 16px 16px 16px 16px;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    border-top: none;
    margin-top: 4px;
}

/* === BUTTONS === */
.shepherd-button {
    font-family: 'Mulish', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif !important;
    padding: 12px;
    font-style: normal;
    line-height: 14px;
    letter-spacing: 0.25px;
    font-size: var(--shepherd-button-size, 14px);
    font-weight: 400;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    width: 150px;
}

/* Skip / Close Button (outlined) */
.shepherd-button.prev-btn {
    background: transparent;
    color: #E3530F;
    border: 1px solid #E3530F;
    font-weight: 600;
    margin-right: 0px !important;
}

/* Skip / Close button hover → Color(0xFFFCEEE7) */
.shepherd-button.prev-btn:hover {
    background: #FCEEE7;
    color: #E3530F;
}

/* Next Button (filled) */
.shepherd-button.next-btn {
    background: #E3530F;
    color: #ffffff;
    border: 1px solid #E3530F;
}

/* Next button hover → Color(0xFFE9753F) */
.shepherd-button.next-btn:hover {
    background: #E9753F;
    border-color: #E9753F;
}

/* === TOOLTIP ARROW === */

/* Hide Shepherd's default triangle */
.shepherd-arrow:before {
  content: none !important;
  display: none !important;
}

/* Arrow sizing (requested 18x9) */
:root {
    --shepherd-text-size: 16px;
    --shepherd-button-size: 14px;
    --shepherd-counter-size: 12px;
    --shepherd-arrow-overlap: 3px;
    /* KEEP THIS RATIO: 28 / 18 */
    --shepherd-arrow-w: 32.6667px;
    --shepherd-arrow-h: 21px;

    /* Arrow “start/end” insets (tweak if needed) */
    --shepherd-arrow-inset-x: 21px;
    /* for top/bottom start/end */
    --shepherd-arrow-inset-y: 14px;
    /* for left/right start/end */

    /* Edge offsets so arrow touches the tooltip (no gap) */
    --shepherd-arrow-edge-offset-y: 10.5px;
    /* ~half of 21px */
    --shepherd-arrow-edge-offset-x: 16.3333px;
    /* half of 32.6667px */
    /* Pull arrow 1–2px into the tooltip to remove the seam/gap */
}

/* Arrow container */
.shepherd-arrow {
  width: var(--shepherd-arrow-w) !important;
  height: var(--shepherd-arrow-h) !important;
  background: transparent !important;
  overflow: visible !important; /* allow drop shadow/rotation to render */
  pointer-events: none;
}

/* Prevent Shepherd from rotating/translating the container */
.shepherd-element .shepherd-arrow {
  transform: none !important;
}

/* SVG sizing + optional subtle shadow (replaces the SVG filter) */
.shepherd-arrow svg {
  width: var(--shepherd-arrow-w);
  height: var(--shepherd-arrow-h);
  display: block;
  overflow: visible;
  filter: drop-shadow(0px 4px 5px rgba(213, 215, 222, 0.14));
}


/* ---- Generic placement positioning (centered) ---- */
.shepherd-element[data-popper-placement^="bottom"] .shepherd-arrow {
  top: calc(-1 * var(--shepherd-arrow-edge-offset-y) + var(--shepherd-arrow-overlap)) !important;
  left: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translateX(-50%) !important;
}

.shepherd-element[data-popper-placement^="top"] .shepherd-arrow {
  bottom: calc(-1 * var(--shepherd-arrow-edge-offset-y) + var(--shepherd-arrow-overlap)) !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  transform: translateX(-50%) !important;
}

.shepherd-element[data-popper-placement^="left"] .shepherd-arrow {
  right: calc(-1 * var(--shepherd-arrow-edge-offset-x) + var(--shepherd-arrow-overlap)) !important;
  top: 50% !important;
  left: auto !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
}

.shepherd-element[data-popper-placement^="right"] .shepherd-arrow {
  left: calc(-1 * var(--shepherd-arrow-edge-offset-x) + var(--shepherd-arrow-overlap)) !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
}

/* ---- Start/End overrides (TOP/BOTTOM) ---- */
.shepherd-element[data-popper-placement^="bottom-start"] .shepherd-arrow,
.shepherd-element[data-popper-placement^="top-start"] .shepherd-arrow {
  left: var(--shepherd-arrow-inset-x) !important;
  right: auto !important;
  transform: none !important; /* cancel translateX */
}

.shepherd-element[data-popper-placement^="bottom-end"] .shepherd-arrow,
.shepherd-element[data-popper-placement^="top-end"] .shepherd-arrow {
  right: var(--shepherd-arrow-inset-x) !important;
  left: auto !important;
  transform: none !important; /* cancel translateX */
}

/* ---- Start/End overrides (LEFT/RIGHT) ---- */
.shepherd-element[data-popper-placement^="left-start"] .shepherd-arrow,
.shepherd-element[data-popper-placement^="right-start"] .shepherd-arrow {
  top: var(--shepherd-arrow-inset-y) !important;
  bottom: auto !important;
  transform: none !important; /* cancel translateY */
}

.shepherd-element[data-popper-placement^="left-end"] .shepherd-arrow,
.shepherd-element[data-popper-placement^="right-end"] .shepherd-arrow {
  top: auto !important;
  bottom: var(--shepherd-arrow-inset-y) !important;
  transform: none !important; /* cancel translateY */
}

/* === MODAL OVERLAY (dark background) === */
.shepherd-modal-overlay-container {
    opacity: 1 !important;
    transition: opacity 0.2s ease-in-out;
}

/* The actual dark overlay */
.shepherd-modal-overlay-container svg {
    opacity: 1;
}

.shepherd-modal-overlay-container path {
    /* This is the "cutout" area that highlights the target element */
    fill: rgba(0, 0, 0, 0.5);
}

/* === HIGHLIGHT CUTOUT CUSTOMIZATION === */
.shepherd-target {
    position: relative;
    z-index: 9998;
}

.shepherd-modal-overlay-container svg rect,
.shepherd-modal-overlay-container svg path {
    rx: 8;
    ry: 8;
}

/* === ANIMATIONS === */
@keyframes shepherd-tooltip-fade-in {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.shepherd-element[data-popper-placement^="bottom"] .shepherd-tooltip {
    animation: shepherd-tooltip-fade-in 0.2s ease-out;
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
    .shepherd-content {
        max-width: 90vw;
    }

    .shepherd-footer {
        padding: 4px 16px 16px;
    }
}

/* === COMPACT LOGIN TOUR (keep existing) === */
.compact-login-tour .shepherd-text,
.compact-login-tour .shepherd-title,
.compact-login-tour .shepherd-content {
    text-align: center !important;
}

.compact-login-tour .shepherd-content p {
    text-align: center !important;
    margin: 0 auto;
}

.compact-login-tour .shepherd-header {
    display: none !important;
}

.compact-login-tour .shepherd-content {
    padding: 12px 16px !important;
}

.compact-login-tour .shepherd-text {
    margin: 0 !important;
}

.compact-login-tour {
    min-height: auto !important;
    max-width: 250px !important;
}

.compact-login-tour .shepherd-content p {
    margin: 0 !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
}

/* LEFT/RIGHT arrows use portrait viewBox (18×28) — swap width/height */
.shepherd-element[data-popper-placement^="left"] .shepherd-arrow,
.shepherd-element[data-popper-placement^="right"] .shepherd-arrow {
  width: var(--shepherd-arrow-h) !important;   /* 21px  — horizontal protrusion */
  height: var(--shepherd-arrow-w) !important;  /* 32.67px — vertical span */
}

.shepherd-element[data-popper-placement^="left"] .shepherd-arrow svg,
.shepherd-element[data-popper-placement^="right"] .shepherd-arrow svg {
  width: var(--shepherd-arrow-h);   /* matches portrait viewBox width  */
  height: var(--shepherd-arrow-w);  /* matches portrait viewBox height */
}

/* Edge offset: horizontal protrusion is now arrow-h (21px), so half = arrow-edge-offset-y (10.5px) */
.shepherd-element[data-popper-placement^="left"] .shepherd-arrow {
  right: calc(-1 * var(--shepherd-arrow-edge-offset-y) + var(--shepherd-arrow-overlap)) !important;
}

.shepherd-element[data-popper-placement^="right"] .shepherd-arrow {
  left: calc(-1 * var(--shepherd-arrow-edge-offset-y) + var(--shepherd-arrow-overlap)) !important;
}

/* === HIGH CONTRAST MODE (HCM) === */
.shepherd-hcm .shepherd-element {
    background: #000 !important;
}
.shepherd-hcm .shepherd-tooltip {
    background: #000 !important;
}
.shepherd-hcm .shepherd-text {
    color: #FFF !important;
}
.shepherd-hcm .shepherd-step-counter {
    color: #FFF !important;
}
.shepherd-hcm .shepherd-cancel-icon svg path {
    fill: #E3530F !important;
}
.shepherd-hcm .shepherd-arrow svg path {
    fill: #000 !important;
}