/* Onboarding tip wizard - overlay styling.
 *
 * Lives in its own stylesheet rather than inline in tourOverlay.html so the
 * rules are cached with the rest of the app's CSS and minified by the `styles`
 * gulp task, instead of being re-parsed on every $compile of the template.
 */
.tour-card {
    position: fixed !important;
    z-index: 2147483001 !important;
    /* Parked, never anchored to the highlighted control. Following the
       target meant the panel jumped around the screen from step to step -
       on Automation, where nearly every target resolves, it moved on all
       nine. The ring is what points; the panel is what reads, and a reader
       should not have to hunt for it. */
    right: 24px !important;
    bottom: 24px !important;
    /* One width for every step. A card that resized when a step had no
       reference screen made its left edge jump, which reads as movement
       even though the panel is parked. */
    width: 600px !important;
    max-width: calc(100vw - 48px) !important;
    /* Long steps stay reachable on a short viewport instead of running off
       the bottom of the screen. */
    max-height: calc(100vh - 48px) !important;
    /* The card itself never scrolls - .tour-card__body does. Scrolling the
       whole card moved the controls between steps and let the title slide
       out of view. */
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    background: #fff !important;
    border-radius: 12px !important;
    border-left: 4px solid #7b2d8e !important;
    padding: 22px 24px !important;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22) !important;
}
/* Bottom-right rather than centred behind a blocking scrim: a step often
   asks the reader to go and look at something, so the page underneath has
   to stay usable. */
.tour-frame {
    position: relative !important;
    display: block !important;
    margin: 10px 0 0 !important;
    border: 1px solid #e3e7ec !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    background: #eef1f5 !important;
}
.tour-frame__img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
}
/* The highlight inside the reference screen. This is now the only marker
   the tour draws - the live element is left alone. */
.tour-frame__box {
    position: absolute !important;
    border: 2px solid #7b2d8e !important;
    border-radius: 4px !important;
    box-shadow: 0 0 0 3px rgba(123, 45, 142, 0.22), 0 0 0 2000px rgba(20, 20, 20, 0.28) !important;
    pointer-events: none !important;
}
.tour-step-title {
    font-size: 18px !important;
    font-weight: 600 !important;
    margin: 0 0 6px !important;
    color: #222 !important;
}
.tour-step-desc {
    font-size: 15px !important;
    color: #666 !important;
    line-height: 1.5 !important;
    margin: 0 !important;
}
.tour-where {
    font-size: 13.5px !important;
    color: #444 !important;
    line-height: 1.45 !important;
    margin: 10px 0 0 !important;
    padding: 8px 10px !important;
    background: #f4f0f7 !important;
    border-radius: 6px !important;
}
.tour-where__label {
    display: block !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: #7b2d8e !important;
    margin-bottom: 2px !important;
}
.tour-permission {
    font-size: 13px !important;
    color: #8a6d00 !important;
    background: #fdf6e3 !important;
    border-radius: 6px !important;
    padding: 6px 10px !important;
    margin: 8px 0 0 !important;
    line-height: 1.4 !important;
}
.tour-controls {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 14px !important;
}
.tour-btn {
    font-size: 14px !important;
    padding: 6px 14px !important;
    border-radius: 6px !important;
    border: none !important;
    cursor: pointer !important;
}
.tour-btn--ghost {
    background: transparent !important;
    color: #777 !important;
}
.tour-btn--primary {
    background: #7b2d8e !important;
    color: #fff !important;
    font-weight: 500 !important;
}
.tour-step-foot {
    display: flex !important;
    align-items: center !important;
    margin: 10px 0 0 !important;
}
.tour-step-count {
    font-size: 12.5px !important;
    color: #999 !important;
}
/* Per-module "show me around" icon, next to each module's nav header.
   Docked at a fixed offset from the anchor's own right edge (not inline
   after the label) so every icon lines up at the same x position
   regardless of how long that module's label text is, and rows with no
   icon at all aren't affected since nothing else changes about them. */
.tour-nav-anchor {
    position: relative !important;
    padding-right: 38px !important;
}
/* The permission line now renders as a label above the permission name,
   mirroring .tour-where__label. Splicing the name into the middle of an
   English sentence could not be translated without reordering the markup. */
.tour-permission__label {
    display: block !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: #a37f00 !important;
    margin-bottom: 2px !important;
}

/* ---- Arabic / right-to-left ------------------------------------------
   The overlay is appended to <body>, outside the app shell's `.arabic`
   wrapper, so none of the host app's RTL cascade reaches it. Direction is
   set here on the card instead; the logical flips below are the ones the
   card actually needs, not a blanket mirror. */
.tour--rtl .tour-card {
    direction: rtl !important;
    text-align: right !important;
}
/* No flex-direction overrides below on purpose. `direction: rtl` already
   reverses the main axis of a row flex container, so .tour-controls'
   justify-content:flex-end and .tour-step-foot's space-between flip on their
   own; adding row-reverse on top would flip them a second time and land the
   buttons back in left-to-right order. The frame images need no rule either -
   the highlight box is positioned with a physical `left` percentage, which
   direction does not touch. */

/* Card header: title on one line with the enlarge control. */
.tour-card__head {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 12px !important;
}
.tour-max-btn {
    flex: 0 0 auto !important;
    width: 28px !important;
    height: 28px !important;
    margin: -2px -4px 0 0 !important;
    padding: 0 !important;
    border: 1px solid #e3e7ec !important;
    border-radius: 6px !important;
    background: #fff !important;
    color: #7b2d8e !important;
    font-size: 15px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    box-shadow: none !important;
}
.tour-max-btn:hover {
    background: #f4f0f7 !important;
}
/* Enlarged. Wide enough that the 800px reference drawing renders at or near
   its own scale, which is the point of the control. */
.tour-card--max {
    width: 1000px !important;
    max-width: calc(100vw - 32px) !important;
    right: 16px !important;
    bottom: 16px !important;
    max-height: calc(100vh - 32px) !important;
}
.tour-card--max .tour-step-title { font-size: 20px !important; }
.tour-card--max .tour-step-desc { font-size: 16px !important; }

/* Docked at a fixed offset from the row's end, not inline after the label,
   so every icon lines up at the same x whatever the label's length - and so
   it clears the expand chevron. Absolute against .tour-nav-anchor, which is
   position:relative for exactly this. Without these rules the icon inherits
   the theme's float:left for menu icons and jumps to the left of the label. */
.tour-nav-help {
    position: absolute !important;
    right: 38px !important;
    left: auto !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    float: none !important;
    font-size: 16px !important;
    opacity: 0.55;
    padding: 2px;
    margin: 0 !important;
}
.tour-nav-help:hover {
    opacity: 1;
}
/* Arabic mirrors the sidebar, so the icon docks on the other side. */
.arabic .tour-nav-help {
    right: auto !important;
    left: 38px !important;
}
.arabic .tour-nav-anchor {
    padding-right: 0 !important;
    padding-left: 38px !important;
}

/* Fixed head, fixed foot, scrolling middle. min-height:0 is what lets the
   middle actually shrink - without it a flex item refuses to go below its
   content height and the overflow never engages. */
.tour-card__head,
.tour-controls,
.tour-step-foot {
    flex: 0 0 auto !important;
}
.tour-card__body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}