/* ======================================================================
   MPILONDE — AFRICAN GEOMETRIC DESIGN LAYER
   Traditional Ndebele / Xhosa right-angle geometry applied throughout
   the UI using only the existing brand colour palette.
   Every rule is purely additive — no base tokens are changed.
   ====================================================================== */

/*
   PALETTE REFERENCE (base tokens from kago-design.css)
   --k-blue:       #0D8193   primary teal-blue
   --k-blue-dark:  #0E1F36   deep navy
   --k-teal-lt:    #36AEBB   light teal
   --k-blue-lt:    #E8F6F8   wash blue
   --k-border:     #D8DDE3
   All geometric lines below use only these colours.
*/

/* ?? SVG PATTERN DATA URIs ???????????????????????????????????????????????
   All strokes use URL-encoded versions of the brand colours:
     #0D8193  ?  %230D8193
     #36AEBB  ?  %2336AEBB
     #0E1F36  ?  %230E1F36
     #ffffff  ?  %23ffffff
   ?????????????????????????????????????????????????????????????????????? */

/*
   CHEVRON — 20×8 repeating zig-zag tile.
   Double row: primary blue on top, light teal below, creating
   the classic Ndebele stepped-triangle border line.
*/
:root {
    --geo-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='8'%3E%3Cpolyline points='0,8 5,0 10,8 15,0 20,8' fill='none' stroke='%230D8193' stroke-width='1.6'/%3E%3Cpolyline points='0,8 5,0 10,8 15,0 20,8' fill='none' stroke='%2336AEBB' stroke-width='.6' opacity='.45'/%3E%3C/svg%3E");

    /*
       STEP-FRET — 24×24 tile.
       Alternating filled squares in a diagonal grid — isicamelo motif.
       Uses navy at very low opacity so it sits behind content.
    */
    --geo-stepfret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Crect x='0'  y='0'  width='6' height='6' fill='%230D8193' opacity='.09'/%3E%3Crect x='6'  y='6'  width='6' height='6' fill='%230D8193' opacity='.09'/%3E%3Crect x='12' y='0'  width='6' height='6' fill='%2336AEBB' opacity='.07'/%3E%3Crect x='18' y='6'  width='6' height='6' fill='%2336AEBB' opacity='.07'/%3E%3Crect x='0'  y='12' width='6' height='6' fill='%2336AEBB' opacity='.07'/%3E%3Crect x='6'  y='18' width='6' height='6' fill='%230D8193' opacity='.09'/%3E%3Crect x='12' y='12' width='6' height='6' fill='%230D8193' opacity='.09'/%3E%3Crect x='18' y='18' width='6' height='6' fill='%2336AEBB' opacity='.07'/%3E%3C/svg%3E");

    /*
       DIAMOND — 16×16 tile.
       Outlined rotated square (injabu field) — the universal Ndebele motif.
    */
    --geo-diamond: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpolygon points='8,1 15,8 8,15 1,8' fill='none' stroke='%230D8193' stroke-width='.9' opacity='.2'/%3E%3C/svg%3E");

    /*
       MICRO-CHEVRON — 12×4 tiny tile for hairline use on borders.
    */
    --geo-chevron-sm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='4'%3E%3Cpolyline points='0,4 3,0 6,4 9,0 12,4' fill='none' stroke='%230D8193' stroke-width='1'/%3E%3C/svg%3E");
}

/* ?? 1. SIDEBAR — geometric right border ?????????????????????????????? */
/*
   Three-segment block border: dark navy / primary blue / light teal.
   A Ndebele wall panel uses exactly this kind of hard-edged block rhythm.
*/
#sidebar,
.k-sidebar {
    border-right: 4px solid transparent;
    border-image: linear-gradient(
        180deg,
        var(--k-blue-dark) 0%,
        var(--k-blue-dark) 30%,
        var(--k-blue)      30%,
        var(--k-blue)      70%,
        var(--k-teal-lt)   70%,
        var(--k-teal-lt)   100%
    ) 1;
}

/* Chevron strip below the brand logo */
.sidebar-brand::after,
.k-sidebar-brand::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 8px;
    background: var(--geo-chevron) repeat-x center / 20px 8px;
    opacity: 0.35;
}
.sidebar-brand,
.k-sidebar-brand { position: relative; overflow: hidden; }

/* Active nav item — left accent becomes teal-lt */
.k-nav-item.active,
.k-sidebar-link.active {
    border-left-color: var(--k-teal-lt) !important;
}

/* ?? 2. TOPBAR — micro-chevron bottom edge ???????????????????????????? */
#topbar { position: relative; }
#topbar::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 4px;
    background: var(--geo-chevron-sm) repeat-x bottom / 12px 4px;
    opacity: 0.18;
    pointer-events: none;
}

/* ?? 3. CARDS — geometric hover top rule ?????????????????????????????? */
/*
   On hover a hard 3-segment block bar appears at the top of each card —
   matching the sidebar border rhythm (dark / mid / light).
*/
.k-card { position: relative; overflow: hidden; }
.k-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg,
        var(--k-blue-dark) 0%,
        var(--k-blue-dark) 33%,
        var(--k-blue)      33%,
        var(--k-blue)      66%,
        var(--k-teal-lt)   66%,
        var(--k-teal-lt)   100%
    );
    opacity: 0;
    transition: opacity .2s;
    border-radius: var(--k-radius) var(--k-radius) 0 0;
    pointer-events: none;
}
.k-card:hover::before,
.k-card-hover:hover::before { opacity: 1; }

/* Feature cards (landing) — same treatment */
.lp-feat-card { position: relative; overflow: hidden; }
.lp-feat-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg,
        var(--k-blue)    0%,
        var(--k-teal-lt) 100%
    );
    opacity: 0;
    transition: opacity .2s;
}
.lp-feat-card:hover::before { opacity: 1; }

/* Stat cards — permanent geometric top pip */
.k-stat-card {
    position: relative;
    overflow: hidden;
}
.k-stat-card::before {
    content: '';
    display: block;
    height: 3px;
    background: linear-gradient(90deg,
        var(--k-blue-dark) 0%,
        var(--k-blue-dark) 33%,
        var(--k-blue)      33%,
        var(--k-blue)      66%,
        var(--k-teal-lt)   66%,
        var(--k-teal-lt)   100%
    );
    margin: -1.5rem -1.5rem 1rem;
    opacity: 0.6;
}

/* ?? 4. TABLES — geometric header underline ??????????????????????????? */
/*
   Table headers get a 3-block hard-stop gradient underline
   instead of the plain border — same rhythm as the card bar.
*/
.k-table th {
    border-bottom: 2px solid transparent;
    border-image: linear-gradient(90deg,
        var(--k-blue-dark) 0%,
        var(--k-blue-dark) 25%,
        var(--k-blue)      25%,
        var(--k-blue)      75%,
        var(--k-teal-lt)   75%,
        var(--k-teal-lt)   100%
    ) 1;
}

/* Row hover — light blue wash */
.k-table tbody tr:hover { background: var(--k-blue-lt) !important; }

/* ?? 5. PAGE TITLE — chevron underline ???????????????????????????????? */
.k-page-title {
    position: relative;
    display: inline-block;
}
.k-page-title::after {
    content: '';
    display: block;
    margin-top: .3rem;
    height: 6px;
    width: 100%;
    background: var(--geo-chevron) repeat-x center / 20px 6px;
    opacity: 0.35;
}

/* ?? 6. SECTION HEADINGS — small chevron rule ????????????????????????? */
.k-section-heading { position: relative; }
.k-section-heading::after {
    content: '';
    display: block;
    margin-top: .45rem;
    height: 4px;
    width: 56px;
    background: var(--geo-chevron-sm) repeat-x center / 12px 4px;
    opacity: 0.5;
}

/* ?? 7. HERO — hard block top band ??????????????????????????????????? */
/*
   A Ndebele-style three-colour hard geometric band across the hero top.
   Uses only the brand palette.
*/
.lp-hero { position: relative; }
.lp-hero::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 6px;
    background: linear-gradient(90deg,
        var(--k-blue-dark) 0%,
        var(--k-blue-dark) 33.3%,
        var(--k-blue)      33.3%,
        var(--k-blue)      66.6%,
        var(--k-teal-lt)   66.6%,
        var(--k-teal-lt)   100%
    );
    opacity: 0.9;
    z-index: 2;
    pointer-events: none;
}
.lp-hero .container { position: relative; z-index: 1; }

/* ?? 8. STATS BAND — diamond watermark ??????????????????????????????? */
.lp-stats-section { position: relative; overflow: hidden; }
.lp-stats-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--geo-diamond) repeat / 16px 16px;
    /* diamonds drawn in white — shows on the dark blue background */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpolygon points='8,1 15,8 8,15 1,8' fill='none' stroke='%23ffffff' stroke-width='.8' opacity='.07'/%3E%3C/svg%3E");
    pointer-events: none;
}

/* ?? 9. CTA SECTION — step-fret watermark ????????????????????????????? */
.lp-cta-section { position: relative; overflow: hidden; }
.lp-cta-section::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--geo-stepfret) repeat / 24px 24px;
    /* override with white strokes for dark background */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Crect x='0'  y='0'  width='6' height='6' fill='%23ffffff' opacity='.05'/%3E%3Crect x='6'  y='6'  width='6' height='6' fill='%23ffffff' opacity='.05'/%3E%3Crect x='12' y='0'  width='6' height='6' fill='%23ffffff' opacity='.03'/%3E%3Crect x='18' y='6'  width='6' height='6' fill='%23ffffff' opacity='.03'/%3E%3Crect x='0'  y='12' width='6' height='6' fill='%23ffffff' opacity='.03'/%3E%3Crect x='6'  y='18' width='6' height='6' fill='%23ffffff' opacity='.05'/%3E%3Crect x='12' y='12' width='6' height='6' fill='%23ffffff' opacity='.05'/%3E%3Crect x='18' y='18' width='6' height='6' fill='%23ffffff' opacity='.03'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 0;
}
.lp-cta-section > * { position: relative; z-index: 1; }

/* ?? 10. FOOTER — geometric block band ??????????????????????????????? */
.lp-footer { position: relative; }
.lp-footer::before {
    content: '';
    display: block;
    height: 5px;
    /* Six equal hard-stop blocks alternating dark/mid/light — Ndebele wall rhythm */
    background: linear-gradient(90deg,
        var(--k-blue-dark) 0%,
        var(--k-blue-dark) 16.6%,
        var(--k-blue)      16.6%,
        var(--k-blue)      33.2%,
        var(--k-teal-lt)   33.2%,
        var(--k-teal-lt)   49.8%,
        var(--k-blue)      49.8%,
        var(--k-blue)      66.4%,
        var(--k-blue-dark) 66.4%,
        var(--k-blue-dark) 83%,
        var(--k-teal-lt)   83%,
        var(--k-teal-lt)   100%
    );
    opacity: 0.8;
}

/* ?? 11. AUTH & SIGNUP PANELS — geometric borders ????????????????????? */
.auth-panel,
.su-left { position: relative; overflow: hidden; }

/* Chevron strip at panel bottom */
.auth-panel::after,
.su-left::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 10px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='10'%3E%3Cpolyline points='0,10 5,0 10,10 15,0 20,10' fill='none' stroke='%2336AEBB' stroke-width='1.6'/%3E%3Cpolyline points='0,10 5,0 10,10 15,0 20,10' fill='none' stroke='%23ffffff' stroke-width='.5' opacity='.25'/%3E%3C/svg%3E")
        repeat-x bottom / 20px 10px;
    opacity: 0.45;
    pointer-events: none;
}

/* Three-block geometric top stripe */
.auth-panel::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 5px;
    background: linear-gradient(90deg,
        var(--k-blue-dark) 0%,
        var(--k-blue-dark) 33%,
        var(--k-blue)      33%,
        var(--k-blue)      66%,
        var(--k-teal-lt)   66%,
        var(--k-teal-lt)   100%
    );
    opacity: 0.85;
    pointer-events: none;
    z-index: 2;
}

/* ?? 12. MODAL HEADER — geometric bottom accent ??????????????????????? */
.k-modal-header { position: relative; overflow: hidden; }
.k-modal-header::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg,
        var(--k-blue-dark) 0%,
        var(--k-blue-dark) 33%,
        var(--k-blue)      33%,
        var(--k-blue)      66%,
        var(--k-teal-lt)   66%,
        var(--k-teal-lt)   100%
    );
    opacity: 0.9;
}

/* ?? 13. BUTTONS — geometric diamond shimmer on hover ????????????????? */
.k-btn-primary,
.k-btn-blue { position: relative; overflow: hidden; }
.k-btn-primary::after,
.k-btn-blue::after {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10'%3E%3Cpolygon points='5,1 9,5 5,9 1,5' fill='none' stroke='%23ffffff' stroke-width='.7' opacity='.18'/%3E%3C/svg%3E")
        repeat center / 10px 10px;
    opacity: 0;
    transition: opacity .25s;
    border-radius: inherit;
    pointer-events: none;
}
.k-btn-primary:hover::after,
.k-btn-blue:hover::after { opacity: 1; }

/* ?? 14. SETUP ALERT BANNER — geometric top stripe ???????????????????? */
.setup-alert-banner {
    position: relative;
    overflow: hidden;
    border-top: 4px solid var(--k-teal-lt) !important;
}
.setup-alert-banner::after {
    content: '';
    position: absolute;
    top: 4px; left: 0; right: 0;
    height: 6px;
    background: var(--geo-chevron-sm) repeat-x center / 12px 6px;
    opacity: 0.25;
    pointer-events: none;
}

/* ?? 15. PRICING CARD — featured block accent ????????????????????????? */
.lp-pricing-card.featured {
    border-top: 4px solid transparent !important;
    border-image: linear-gradient(90deg,
        var(--k-blue-dark) 0%,
        var(--k-blue)      50%,
        var(--k-teal-lt)   100%
    ) 1 !important;
}

/* ?? 16. UTILITY CLASSES ??????????????????????????????????????????????? */

/* Hard-stop 3-block geometric top border — add to any element */
.geo-border-top {
    border-top: 3px solid transparent;
    border-image: linear-gradient(90deg,
        var(--k-blue-dark) 0%,
        var(--k-blue-dark) 33%,
        var(--k-blue)      33%,
        var(--k-blue)      66%,
        var(--k-teal-lt)   66%,
        var(--k-teal-lt)   100%
    ) 1;
}

/* Chevron divider strip — use as a <div class="geo-chevron-strip"> */
.geo-chevron-strip {
    height: 8px;
    background: var(--geo-chevron) repeat-x center / 20px 8px;
    opacity: 0.35;
    margin: .75rem 0;
}

/* Diamond field background — add to any section */
.geo-diamond-bg {
    background-image: var(--geo-diamond);
    background-size: 16px 16px;
    background-repeat: repeat;
}

/* Step-fret background */
.geo-stepfret-bg {
    background-image: var(--geo-stepfret);
    background-size: 24px 24px;
    background-repeat: repeat;
}

/* Inline geometric divider (horizontal rule replacement) */
.geo-divider {
    height: 5px;
    border: none;
    background: linear-gradient(90deg,
        var(--k-blue-dark) 0%,
        var(--k-blue-dark) 33%,
        var(--k-blue)      33%,
        var(--k-blue)      66%,
        var(--k-teal-lt)   66%,
        var(--k-teal-lt)   100%
    );
    opacity: 0.55;
    margin: 1.25rem 0;
    border-radius: 2px;
}

/* ?? 17. RESPONSIVE ???????????????????????????????????????????????????? */
@media (max-width: 767px) {
    #sidebar, .k-sidebar { border-right-width: 3px; }
    .lp-hero::after      { height: 4px; }
    .lp-footer::before   { height: 3px; }
    .auth-panel::before  { height: 3px; }
}