/**
 * WC My Account sidebar — minimal styling.
 *
 * Goals:
 *   • Per-endpoint SVG icons via mask-image (modern Lucide-style outlines).
 *   • Sidebar takes natural height of its links — does NOT stretch to match
 *     content area's height (`align-items: flex-start` on parent flex row).
 *   • On mobile (≤1023px), sidebar is hidden so endpoint UIs (Calf Journal
 *     React app) own the screen.
 *
 * No toggle button, no collapse/expand, no JS — Impreza's default rendering
 * controls width, padding, hover/active states.
 */

/* === Universal background match for app shell === */
body.ce-wc-sidebar {
    background: var(--bg, #faf6ee);
}

/* === Desktop: sidebar + content side-by-side, sidebar height auto === */
@media (min-width: 1024px) {
    body.ce-wc-sidebar.woocommerce-account .woocommerce {
        display: flex !important;
        gap: 16px !important;
        align-items: flex-start;
    }
    body.ce-wc-sidebar .woocommerce-account .woocommerce-MyAccount-content {
        flex: 1;
        min-width: 0;
    }
    /* On the Calf Journal endpoint the React app provides its own
     * dashboard chrome (.calf-desk grid + .calf-desk-sidebar). The 24px
     * content padding from WC pushed everything inward, creating a wide
     * "outer border" around the whole app. Strip it on this endpoint
     * only — internal sidebar padding (.calf-desk-sidebar) is enough. */
    body.ce-wc-sidebar.woocommerce-calf-journal .woocommerce-MyAccount-content {
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
    }

    /* Sidebar: white card with rounded corners, subtle shadow, height auto. */
    body.ce-wc-sidebar .woocommerce-MyAccount-navigation {
        background: #fff;
        border: 1px solid #e6dfd0;
        border-radius: 14px;
        padding: 8px !important;
        overflow: hidden;
    }
    body.ce-wc-sidebar .woocommerce-MyAccount-navigation ul {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    body.ce-wc-sidebar .woocommerce-MyAccount-navigation li {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    body.ce-wc-sidebar .woocommerce-MyAccount-navigation li::before,
    body.ce-wc-sidebar .woocommerce-MyAccount-navigation li::marker {
        content: none !important;
    }

    /* Link: full-row, rounded inside sidebar card, subtle hover transition. */
    body.ce-wc-sidebar .woocommerce-MyAccount-navigation li a {
        display: flex !important;
        align-items: center;
        gap: 12px;
        padding: 10px 14px !important;
        margin: 2px 0;
        color: #1f1a14;
        text-decoration: none !important;
        font-size: 14px;
        font-weight: 500;
        line-height: 1.3;
        border-radius: 10px;
        transition: background-color 0.18s ease, color 0.18s ease, transform 0.12s ease;
        white-space: nowrap;
    }
    body.ce-wc-sidebar .woocommerce-MyAccount-navigation li a:hover {
        background: rgba(74, 107, 58, 0.08);
        color: #4a6b3a;
    }
    body.ce-wc-sidebar .woocommerce-MyAccount-navigation li a:active {
        transform: translateY(1px);
    }
    body.ce-wc-sidebar .woocommerce-MyAccount-navigation li.is-active a {
        background: rgba(74, 107, 58, 0.14);
        color: #4a6b3a;
        font-weight: 700;
    }

    /* Per-endpoint icons (mask-image SVG, currentColor) — applied to the
     * leading <a> of each navigation <li>. Each <li> carries a unique
     * `.woocommerce-MyAccount-navigation-link--<slug>` class from WC core. */
    body.ce-wc-sidebar .woocommerce-MyAccount-navigation li a::before {
        content: "";
        display: inline-block;
        flex: 0 0 18px;
        width: 18px;
        height: 18px;
        background-color: currentColor;
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: 18px 18px;
        mask-size: 18px 18px;
        transition: transform 0.18s ease;
    }
    body.ce-wc-sidebar .woocommerce-MyAccount-navigation li a:hover::before {
        transform: scale(1.08);
    }
}

/* === Per-endpoint icons (apply to both desktop and mobile) ============== */
body.ce-wc-sidebar .woocommerce-MyAccount-navigation-link--dashboard > a::before {
        -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12L12 3l9 9'/><path d='M5 10v10h14V10'/><path d='M9 21v-6h6v6'/></svg>");
        mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12L12 3l9 9'/><path d='M5 10v10h14V10'/><path d='M9 21v-6h6v6'/></svg>");
    }
    body.ce-wc-sidebar .woocommerce-MyAccount-navigation-link--calf-journal > a::before {
        -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/><path d='M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z'/></svg>");
        mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20'/><path d='M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z'/></svg>");
    }
    body.ce-wc-sidebar .woocommerce-MyAccount-navigation-link--orders > a::before {
        -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'/><polyline points='3.27 6.96 12 12.01 20.73 6.96'/><line x1='12' y1='22.08' x2='12' y2='12'/></svg>");
        mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z'/><polyline points='3.27 6.96 12 12.01 20.73 6.96'/><line x1='12' y1='22.08' x2='12' y2='12'/></svg>");
    }
    body.ce-wc-sidebar .woocommerce-MyAccount-navigation-link--downloads > a::before {
        -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/><polyline points='7 10 12 15 17 10'/><line x1='12' y1='15' x2='12' y2='3'/></svg>");
        mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/><polyline points='7 10 12 15 17 10'/><line x1='12' y1='15' x2='12' y2='3'/></svg>");
    }
    body.ce-wc-sidebar .woocommerce-MyAccount-navigation-link--edit-address > a::before {
        -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/><circle cx='12' cy='10' r='3'/></svg>");
        mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/><circle cx='12' cy='10' r='3'/></svg>");
    }
    body.ce-wc-sidebar .woocommerce-MyAccount-navigation-link--edit-account > a::before {
        -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/><circle cx='12' cy='7' r='4'/></svg>");
        mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/><circle cx='12' cy='7' r='4'/></svg>");
    }
    body.ce-wc-sidebar .woocommerce-MyAccount-navigation-link--following > a::before {
        -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 9l1-6h16l1 6'/><path d='M3 9v11a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1V9'/><path d='M3 9c0 2 2 3 3 3s3-1 3-3 1 3 3 3 3-3 3-3 1 3 3 3 3-1 3-3'/></svg>");
        mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 9l1-6h16l1 6'/><path d='M3 9v11a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1V9'/><path d='M3 9c0 2 2 3 3 3s3-1 3-3 1 3 3 3 3-3 3-3 1 3 3 3 3-1 3-3'/></svg>");
    }
    body.ce-wc-sidebar .woocommerce-MyAccount-navigation-link--support-tickets > a::before {
        -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/></svg>");
        mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/></svg>");
    }
    body.ce-wc-sidebar .woocommerce-MyAccount-navigation-link--auctions-endpoint > a::before {
        -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 13l-7 7-3-3 7-7'/><path d='M5 17l3 3'/><path d='M14 6l3 3'/><path d='M11 9l6-6 4 4-6 6z'/><path d='M3 21h18'/></svg>");
        mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 13l-7 7-3-3 7-7'/><path d='M5 17l3 3'/><path d='M14 6l3 3'/><path d='M11 9l6-6 4 4-6 6z'/><path d='M3 21h18'/></svg>");
    }
    body.ce-wc-sidebar .woocommerce-MyAccount-navigation-link--customer-logout > a::before {
        -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/><polyline points='16 17 21 12 16 7'/><line x1='21' y1='12' x2='9' y2='12'/></svg>");
        mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/><polyline points='16 17 21 12 16 7'/><line x1='21' y1='12' x2='9' y2='12'/></svg>");
    }

/* === Mobile === */
/* On the Calf Journal endpoint the React PWA owns the full screen — its
 * own bottom tab bar replaces site navigation, so the WC sidebar is hidden
 * there to avoid two competing menus. On every other /account/* endpoint
 * the sidebar must stay visible (stacked above content) so mobile users
 * can navigate between Console / Orders / Calf Journal / Addresses / etc. */
@media (max-width: 1023px) {
    body.ce-wc-sidebar.woocommerce-calf-journal .woocommerce-MyAccount-navigation {
        display: none !important;
    }
    body.ce-wc-sidebar.woocommerce-calf-journal .woocommerce-account .woocommerce-MyAccount-content {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
    }

    /* Mobile sidebar styling on non-calf-journal pages: rounded white card,
     * full width, sits above content. Mirrors desktop visual language. */
    body.ce-wc-sidebar:not(.woocommerce-calf-journal) .woocommerce-MyAccount-navigation {
        background: #fff;
        border: 1px solid #e6dfd0;
        border-radius: 14px;
        padding: 8px !important;
        margin-bottom: 16px !important;
        width: 100% !important;
        float: none !important;
    }
    body.ce-wc-sidebar:not(.woocommerce-calf-journal) .woocommerce-MyAccount-navigation ul {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
        display: block;
    }
    body.ce-wc-sidebar:not(.woocommerce-calf-journal) .woocommerce-MyAccount-navigation li {
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    body.ce-wc-sidebar:not(.woocommerce-calf-journal) .woocommerce-MyAccount-navigation li::before,
    body.ce-wc-sidebar:not(.woocommerce-calf-journal) .woocommerce-MyAccount-navigation li::marker {
        content: none !important;
    }
    body.ce-wc-sidebar:not(.woocommerce-calf-journal) .woocommerce-MyAccount-navigation li a {
        display: flex !important;
        align-items: center;
        gap: 12px;
        padding: 12px 14px !important;
        margin: 2px 0;
        color: #1f1a14;
        text-decoration: none !important;
        font-size: 15px;
        font-weight: 500;
        line-height: 1.3;
        border-radius: 10px;
    }
    body.ce-wc-sidebar:not(.woocommerce-calf-journal) .woocommerce-MyAccount-navigation li.is-active a {
        background: rgba(74, 107, 58, 0.14);
        color: #4a6b3a;
        font-weight: 700;
    }
    /* Reuse desktop ::before icon mask declarations (defined in @media min-width:1024px
     * above) by re-declaring at mobile breakpoint. Each link gets its endpoint-
     * specific icon — same SVG data URLs as desktop. */
    body.ce-wc-sidebar:not(.woocommerce-calf-journal) .woocommerce-MyAccount-navigation li a::before {
        content: "";
        display: inline-block;
        flex: 0 0 16px;
        width: 16px;
        height: 16px;
        background-color: currentColor;
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: 16px 16px;
        mask-size: 16px 16px;
    }
    body.ce-wc-sidebar:not(.woocommerce-calf-journal) .woocommerce-account .woocommerce-MyAccount-content {
        width: 100% !important;
        float: none !important;
    }
}