/**
 * KrsKrt Magic Marker — Dataview Overlay Styles  v4
 */

/* ============================================================
   Phosphor Icons (Fill) — used by the Layers button flyout
   Sourced from the krskrt-forms plugin which ships the font
   assets network-wide. Safe because krskrt-forms is always
   active on blog_id=2 (www.krskrt.com).
   ============================================================ */

@font-face {
    font-family: "Phosphor-Fill";
    src: url("/wp-content/plugins/krskrt-forms/assets/phosphor/Phosphor-Fill.woff2?v=phosphor-collapse-1") format("woff2");
    font-weight: normal;
    font-style:  normal;
    font-display: block;
}

#krskrt-mm-panel .ph-fill {
    font-family: "Phosphor-Fill" !important;
    speak:          never;
    font-style:     normal;
    font-weight:    normal;
    font-variant:   normal;
    text-transform: none;
    line-height:    1;
    letter-spacing: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 22px;
}
#krskrt-mm-panel .ph-fill.ph-stack-simple::before { content: "\e468"; }
#krskrt-mm-panel .ph-fill.ph-database::before     { content: "\e1de"; }
#krskrt-mm-panel .ph-fill.ph-envelope::before     { content: "\e214"; }
#krskrt-mm-panel .ph-fill.ph-file-text::before    { content: "\e23a"; }

/* ============================================================
   Floating button panel — top-right of every KrsKrt page
   ============================================================ */

#krskrt-mm-panel {
    position:       fixed;
    top:            7px;
    right:          7px;
    display:        flex;
    flex-direction: column;
    gap:            7px;
    z-index:        99999;
}

/* Base button style — shared by fullscreen, MM, and dataview */
#krskrt-mm-panel > button {
    position:         relative;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    gap:              6px;
    width:            44px;
    height:           44px;
    padding:          0;
    background:       #fff;
    color:            #00374a;
    border:           1px solid #dedede;
    border-radius:    10px;
    cursor:           pointer;
    font-size:        24px;
    line-height:      1em;
    transition:       background 0.15s, color 0.15s, border-color 0.15s;
    box-shadow:       0 1px 4px rgba(0,0,0,0.08);
    white-space:      nowrap;
    text-decoration:  none;
}

#krskrt-mm-panel > button:hover {
    background: #00a9bb;
    color:      #00374a;
}

#krskrt-mm-panel > button.is-active {
    background:   #00262D;
    color:        #fff;
    border-color: #00262D;
}

#krskrt-mm-panel > button svg {
    flex-shrink: 0;
    display:     block;
}

/* Same alignment fix for font-icon <i> children: forces block layout so
   the icon centers geometrically inside its 44x44 flex parent instead
   of inheriting an inline baseline (Phosphor glyphs sit ~1-2 px low
   otherwise). Mirrors the SVG rule above and the nav-button rule below
   so the panel buttons and the layer flyout buttons render identically. */
#krskrt-mm-panel > button > i,
#krskrt-mm-panel .krskrt-layer-btn > i {
    flex-shrink: 0;
    display:     block;
    line-height: 1;
}

/* Connection-count dot inside Magic Marker button — badge in top-left corner */
.krskrt-mm-dot {
    position:        absolute;
    top:             -4px;
    left:            -4px;
    z-index:         1;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           20px;
    height:          20px;
    border-radius:   50%;
    font-size:       11px;
    font-weight:     700;
    padding:         0;
    flex-shrink:     0;
    transition:      background 0.3s;
    line-height:     1;
}
.krskrt-mm-dot--red   { background: #ef4444; color: #fff; }
.krskrt-mm-dot--green { background: #22c55e; color: #fff; }

/* ============================================================
   Field row — left-border accent added via JS
   ============================================================ */

.jet-form-builder-row {
    transition: border-left 0.15s ease, padding-left 0.15s ease;
}

/* ============================================================
   Badge container (absolutely positioned, top-right of row)
   ============================================================ */

.mm-dataview-badges {
    position:        absolute;
    top:             4px;
    right:           8px;
    display:         flex;
    flex-direction:  column;
    align-items:     flex-end;
    gap:             3px;
    z-index:         10;
    pointer-events:  none;
}

.mm-dataview-badge {
    display:     inline-flex;
    align-items: center;
    gap:         3px;
    padding:     2px 7px;
    border-radius: 4px;
    font-size:   11px;
    font-weight: 600;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1.5;
    white-space: nowrap;
    opacity:     0.9;
}

/* ============================================================
   Layers flyout — expands to the LEFT of the Layers button
   ============================================================ */

#krskrt-layers-flyout {
    position:        absolute;
    top:             auto;
    bottom:          0;                  /* align bottom with Layers button */
    right:           calc(100% + 8px);   /* sits just left of the panel */
    display:         flex;
    flex-direction:  row;
    gap:             7px;
    opacity:         0;
    transform:       translateX(6px);
    pointer-events:  none;
    transition:      opacity 0.18s ease, transform 0.18s ease;
}

#krskrt-layers-flyout.is-visible {
    opacity:        1;
    transform:      translateX(0);
    pointer-events: auto;
}

/* Layer buttons inside the flyout — same visual language as the panel buttons */
#krskrt-mm-panel .krskrt-layer-btn {
    position:        relative;
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           44px;
    height:          44px;
    padding:         0;
    background:      #fff;
    color:           #00374a;
    border:          1px solid #dedede;
    border-radius:   10px;
    cursor:          pointer;
    font-size:       24px;
    line-height:     1em;
    transition:      background 0.15s, color 0.15s, border-color 0.15s;
    box-shadow:      0 1px 4px rgba(0,0,0,0.08);
    white-space:     nowrap;
}
#krskrt-mm-panel .krskrt-layer-btn:hover {
    background: #00a9bb;
    color:      #00374a;
}
#krskrt-mm-panel .krskrt-layer-btn.is-active {
    background:   #00262D;
    color:        #fff;
    border-color: #00262D;
}

/* ============================================================
   Sidebar panel — Assigned Users section
   ============================================================ */

.krskrt-user-assignment {
    margin-top: 12px;
}

.krskrt-user-assignment__label {
    font-size:      11px;
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color:          #757575;
    margin:         0 0 6px;
}

.krskrt-user-assignment .components-base-control {
    margin-bottom: 4px;
}

/* ============================================================
   Dual prev/next nav — last child of #krskrt-mm-panel
   Two stacked buttons that share a horizontal divider.
   In .is-solo (one boundary) the visible half collapses to a
   square 44x44 button matching the other panel buttons.
   ============================================================ */

#krskrt-mm-panel .krskrt-mm-nav {
    display:        flex;
    flex-direction: column;
    width:          44px;
    border-radius:  10px;
    box-shadow:     0 1px 4px rgba(0,0,0,0.08);
}

#krskrt-mm-panel .krskrt-mm-nav-btn {
    width:           44px;
    height:          40px;
    padding:         0;
    background:      #fff;
    color:           #00374a;
    border:          1px solid #dedede;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    transition:      background 0.15s, color 0.15s, border-color 0.15s;
}

#krskrt-mm-panel .krskrt-mm-nav-btn:hover {
    background: #00a9bb;
    color:      #00374a;
}

.krskrt-mm-nav .ph::before {
    font-size: 22px;
}

/* Joined-pair radii: top-half rounded on top, bottom-half on bottom.
   Up button drops its bottom border so the down button's top border
   is the single divider line. */
#krskrt-mm-panel .krskrt-mm-nav-btn--up {
    border-top-left-radius:     10px;
    border-top-right-radius:    10px;
    border-bottom-left-radius:  0;
    border-bottom-right-radius: 0;
    border-bottom:              none;
}
#krskrt-mm-panel .krskrt-mm-nav-btn--down {
    border-top-left-radius:     0;
    border-top-right-radius:    0;
    border-bottom-left-radius:  10px;
    border-bottom-right-radius: 10px;
}

/* Solo state — only one chevron visible. Collapse to a 44x44 square
   with full radius and a complete border, matching the panel buttons. */
#krskrt-mm-panel .krskrt-mm-nav.is-solo .krskrt-mm-nav-btn {
    height:        44px;
    border:        1px solid #dedede;
    border-radius: 10px;
}

/* ============================================================
   Still-typing nav notice — surfaced when the operator presses
   a chevron while the Marker has typed within the last few
   seconds. Sits to the left of #krskrt-mm-panel and aligns to
   the .krskrt-mm-nav row (top set inline by JS).
   ============================================================ */

/* Styled to match #krskrt-dv-btn .krskrt-dv-btn-tip in central-screen.css
   (dark-teal 90% background, 44 px height, 12 px page-font). Same visual
   language as the data-save tooltip. */
.krskrt-mm-nav-notice {
    position:        fixed;
    /* Bottom-left, to the right of the .krskrt-mm-nav inside #az-chrome:
       7 (outer gutter) + 44 (nav button width) + 7 (gap) = 58. */
    left:            58px;
    bottom:          7px;
    height:          44px;
    box-sizing:      border-box;
    display:         flex;
    align-items:     center;
    gap:             8px;
    padding:         0 6px 0 14px;
    background:      rgba(0, 55, 74, 0.90);
    color:           #fff;
    border:          none;
    border-radius:   10px;
    box-shadow:      0 1px 4px rgba(0,0,0,0.08);
    font-family:     inherit;
    font-size:       12px;
    line-height:     1.2;
    z-index:         99999;
    /* Explicit opacity baseline + animation-fill-mode `forwards`: if the
       slide-in animation gets paused or throttled (background tab, slow
       paint, scroll-driven jank), the element still ends up visible at
       opacity 1. */
    opacity:         1;
    animation:       krskrt-mm-nav-notice-in 0.15s ease-out forwards;
}

@keyframes krskrt-mm-nav-notice-in {
    from { opacity: 0; transform: translateX(-6px); }
    to   { opacity: 1; transform: translateX(0); }
}

.krskrt-mm-nav-notice__msg {
    white-space: nowrap;
}

.krskrt-mm-nav-notice__ok,
.krskrt-mm-nav-notice__close {
    flex-shrink:     0;
    width:           32px;
    height:          32px;
    padding:         0;
    background:      rgba(255, 255, 255, 0.15);
    border:          none;
    border-radius:   8px;
    cursor:          pointer;
    font-family:     inherit;
    font-size:       12px;
    font-weight:     700;
    color:           #fff;
    line-height:     1;
    transition:      background 0.15s;
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
}
.krskrt-mm-nav-notice__ok:hover,
.krskrt-mm-nav-notice__close:hover {
    background: #00a9bb;
}
.krskrt-mm-nav-notice__close i.ph {
    font-size:   16px;
    line-height: 1;
    display:     block;
}