/* _content/AfriERP/Pages/Billing/BillingsSettings.razor.rz.scp.css */
/* =========================
   Billing Settings – scoped styles
   ========================= */
:root[b-dpoow1akm3] {
    --bg: #f3f6fb;
    --card: #ffffff;
    --ink: #0e1726;
    --muted: #667085;
    --line: #e6ebf2;
    --primary: #6ba539; /* brand green */
    --primary-ink: #0b3d0b;
    --secondary: #2f6df6;
    --danger: #e54848;
    --warning: #f4a100;
    --success: #2fb344;
}

/* Page */
h3[b-dpoow1akm3] {
    margin: 8px 0 18px 0;
    font-weight: 800;
    letter-spacing: .2px;
    color: var(--ink);
}

/* Layout helpers */
.form-grid[b-dpoow1akm3] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
    align-items: end;
}

    .form-grid label > span[b-dpoow1akm3] {
        display: block;
        font-size: .86rem;
        font-weight: 600;
        color: var(--muted);
        margin-bottom: 6px;
    }

/* Inputs */
input[type="text"][b-dpoow1akm3],
input[type="email"][b-dpoow1akm3],
input[type="tel"][b-dpoow1akm3],
input[type="number"][b-dpoow1akm3],
select[b-dpoow1akm3],
textarea[b-dpoow1akm3],
.form-select[b-dpoow1akm3],
input[type="date"][b-dpoow1akm3] {
    width: 100%;
    padding: .6rem .7rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    color: var(--ink);
    outline: none;
    transition: box-shadow .15s ease, border-color .15s ease;
}

    input:focus[b-dpoow1akm3],
    select:focus[b-dpoow1akm3],
    textarea:focus[b-dpoow1akm3] {
        border-color: #c8d8f0;
        box-shadow: 0 0 0 4px rgba(47,109,246,.08);
    }

input[type="checkbox"][b-dpoow1akm3] {
    transform: scale(1.05);
}

/* Buttons */
.btn[b-dpoow1akm3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .55rem .9rem;
    border-radius: 10px;
    border: 1px solid transparent;
    font-weight: 600;
    cursor: pointer;
    line-height: 1;
    transition: transform .04s ease, box-shadow .15s ease, background .15s ease;
    user-select: none;
}

    .btn:active[b-dpoow1akm3] {
        transform: translateY(1px);
    }

    .btn.primary[b-dpoow1akm3] {
        background: #6ba539;
        color: #fff;
        box-shadow: 0 6px 14px rgba(107,165,57,.18);
    }

        .btn.primary:hover[b-dpoow1akm3] {
            filter: brightness(1.03);
        }

    .btn.secondary[b-dpoow1akm3] {
        background: #2f6df6;
        color: #fff;
        box-shadow: 0 6px 14px rgba(47,109,246,.2);
    }

        .btn.secondary:hover[b-dpoow1akm3] {
            filter: brightness(1.03);
        }

    .btn.ghost[b-dpoow1akm3] {
        background: #fff;
        color: dimgray;
        border-color: dimgray;
        border: 1px solid var(--line);
    }

        .btn.ghost:hover[b-dpoow1akm3] {
            background: #f8fafc;
        }

    .btn.danger[b-dpoow1akm3] {
        background: var(--danger);
        color: #fff;
    }

    .btn[disabled][b-dpoow1akm3] {
        opacity: .6;
        cursor: not-allowed;
    }

/* Alerts */
.alert[b-dpoow1akm3] {
    padding: .75rem 1rem;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink);
}

    .alert.success[b-dpoow1akm3] {
        border-color: #cfe8d6;
        background: #f3fbf5;
        color: var(--success);
    }

    .alert.error[b-dpoow1akm3] {
        border-color: #ffd4d4;
        background: #fff6f6;
        color: var(--danger);
    }

/* Table wrapper */
.table-scroll-container[b-dpoow1akm3] {
    margin-top: 10px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: auto;
    box-shadow: 0 10px 26px rgba(14,23,38,.06);
    max-height: 50vh;
}

/* Table */
.styled-table[b-dpoow1akm3] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    min-width: 880px;
    //height: 70vh;
}

    .styled-table thead th[b-dpoow1akm3] {
        position: sticky;
        top: 0;
        z-index: 1;
        background: #f7f9fc;
        color: var(--muted);
        text-transform: uppercase;
        letter-spacing: .06em;
        font-size: .74rem;
        font-weight: 700;
        border-bottom: 1px solid var(--line);
        padding: .85rem .9rem;
    }

    .styled-table tbody td[b-dpoow1akm3] {
        padding: .8rem .9rem;
        border-bottom: 1px solid var(--line);
        color: #2b2f36;
        vertical-align: middle;
    }

    .styled-table tbody tr:hover[b-dpoow1akm3] {
        background: #fafcff;
    }

    .styled-table tbody tr:last-child td[b-dpoow1akm3] {
        border-bottom: none;
    }

/* Status chip */
.status-chip[b-dpoow1akm3] {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .25rem .6rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 700;
    border: 1px solid transparent;
}

.status-planned[b-dpoow1akm3] {
    background: #fff8eb;
    color: #8b5e00;
    border-color: #ffe5aa;
}

.status-dispatched[b-dpoow1akm3] {
    background: #eef2ff;
    color: #3447c3;
    border-color: #dbe1ff;
}

.status-completed[b-dpoow1akm3] {
    background: #edfbf0;
    color: #1d7c35;
    border-color: #cfe8d6;
}

/* Make your table column show chips if you wrap the text:
   <td><span class="status-chip status-completed">Completed</span></td> */

/* Modal */
.modal-overlay[b-dpoow1akm3] {
    position: fixed;
    inset: 0;
    background: rgba(14, 23, 38, .45);
    display: grid;
    place-items: center;
    padding: 24px;
    z-index: 10001;
}

.modal-content[b-dpoow1akm3] {
    width: 100%;
    max-width: 680px;
    background: var(--card);
    border-radius: 16px;
    border: 1px solid var(--line);
    box-shadow: 0 30px 60px rgba(14,23,38,.22);
    overflow: hidden;
}

    .modal-content.large[b-dpoow1akm3] {
        max-width: 980px;
    }

.modal-header[b-dpoow1akm3],
.modal-footer[b-dpoow1akm3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--line);
}

.modal-footer[b-dpoow1akm3] {
    border-top: 1px solid var(--line);
    border-bottom: none;
}

.modal-header h3[b-dpoow1akm3] {
    margin: 0;
    font-size: 1.15rem;
}

.modal-body[b-dpoow1akm3] {
    padding: 16px 18px;
}

.icon-btn.close[b-dpoow1akm3] {
    border: none;
    background: transparent;
    font-size: 22px;
    line-height: 1;
    color: var(--muted);
    cursor: pointer;
}

    .icon-btn.close:hover[b-dpoow1akm3] {
        color: var(--ink);
    }

/* Utility */
.text-danger[b-dpoow1akm3] {
    color: var(--danger) !important;
}

.text-muted[b-dpoow1akm3] {
    color: var(--muted) !important;
}

.span-2[b-dpoow1akm3] {
    grid-column: span 2;
}

@media (max-width: 640px) {
    .span-2[b-dpoow1akm3] {
        grid-column: span 1;
    }

    .modal-content.large[b-dpoow1akm3] {
        max-width: 100%;
    }
}

/* Optional: compact actions column in table */
.styled-table td[style*="white-space:nowrap"] .btn[b-dpoow1akm3] {
    padding: .4rem .6rem;
    font-size: .86rem;
}

/* Optional: “dashboard cards” if you add summary tiles above the table */
.dash-grid[b-dpoow1akm3] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin: 6px 0 14px 0;
}

.dash-card[b-dpoow1akm3] {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 16px;
    box-shadow: 0 8px 18px rgba(14,23,38,.06);
}

    .dash-card .title[b-dpoow1akm3] {
        font-size: .86rem;
        color: var(--muted);
        margin-bottom: 6px;
    }

    .dash-card .value[b-dpoow1akm3] {
        font-size: 1.6rem;
        font-weight: 800;
        color: var(--ink);
    }

    .dash-card .trend-up[b-dpoow1akm3] {
        color: var(--success);
        font-weight: 700;
    }

    .dash-card .trend-down[b-dpoow1akm3] {
        color: var(--danger);
        font-weight: 700;
    }
/* Billing Settings – page-scoped buttons */
.bs-btn[b-dpoow1akm3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .58rem .95rem;
    border-radius: 10px;
    border: 1px solid transparent;
    font-weight: 700;
    font-size: .95rem;
    cursor: pointer;
    line-height: 1;
    user-select: none;
    transition: transform .04s ease, box-shadow .15s ease, background .15s ease, filter .15s ease;
}

    .bs-btn:active[b-dpoow1akm3] {
        transform: translateY(1px);
    }

    .bs-btn[disabled][b-dpoow1akm3] {
        opacity: .55;
        cursor: not-allowed;
    }

/* Variants */
.bs-btn--primary[b-dpoow1akm3] {
    background: var(--primary, #6ba539);
    color: #fff;
    box-shadow: 0 6px 14px rgba(107,165,57,.18);
}

    .bs-btn--primary:hover[b-dpoow1akm3] {
        filter: brightness(1.05);
    }

.bs-btn--secondary[b-dpoow1akm3] {
    background: var(--secondary, #2f6df6);
    color: #fff;
    box-shadow: 0 6px 14px rgba(47,109,246,.18);
}

    .bs-btn--secondary:hover[b-dpoow1akm3] {
        filter: brightness(1.05);
    }

.bs-btn--ghost[b-dpoow1akm3] {
    background: #fff;
    color: var(--ink, #0e1726);
    border: 1px solid var(--line, #e6ebf2);
}

    .bs-btn--ghost:hover[b-dpoow1akm3] {
        background: #f8fafc;
    }
/* _content/AfriERP/Pages/Billing/CustomerTypeahead.razor.rz.scp.css */
.typeahead[b-qqrhfwj1hx] {
    position: relative;
}

    .typeahead .typeahead-list[b-qqrhfwj1hx] {
        position: absolute;
        z-index: 40;
        left: 0;
        right: 0;
        top: calc(100% + 2px);
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        max-height: 260px;
        overflow: auto;
        padding: 6px 0;
        margin: 0;
        list-style: none;
        box-shadow: 0 8px 20px rgba(0,0,0,.08);
    }

    .typeahead .typeahead-item[b-qqrhfwj1hx] {
        padding: 8px 10px;
        cursor: pointer;
    }

        .typeahead .typeahead-item:hover[b-qqrhfwj1hx],
        .typeahead .typeahead-item.active[b-qqrhfwj1hx] {
            background: #f3f4f6;
        }
/* _content/AfriERP/Pages/Billing/ManageRouteCreation.razor.rz.scp.css */
/* =========================
   Billing Settings – scoped styles
   ========================= */
:root[b-w1u85kqc4g] {
    --bg: #f3f6fb;
    --card: #ffffff;
    --ink: #0e1726;
    --muted: #667085;
    --line: #e6ebf2;
    --primary: #6ba539; /* brand green */
    --primary-ink: #0b3d0b;
    --secondary: #2f6df6;
    --danger: #e54848;
    --warning: #f4a100;
    --success: #2fb344;
}

/* Page */
h3[b-w1u85kqc4g] {
    margin: 8px 0 18px 0;
    font-weight: 800;
    letter-spacing: .2px;
    color: var(--ink);
}

/* Layout helpers */
.form-grid[b-w1u85kqc4g] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
    align-items: end;
}

    .form-grid label > span[b-w1u85kqc4g] {
        display: block;
        font-size: .86rem;
        font-weight: 600;
        color: var(--muted);
        margin-bottom: 6px;
    }

/* Inputs */
input[type="text"][b-w1u85kqc4g],
input[type="email"][b-w1u85kqc4g],
input[type="tel"][b-w1u85kqc4g],
input[type="number"][b-w1u85kqc4g],
select[b-w1u85kqc4g],
textarea[b-w1u85kqc4g],
.form-select[b-w1u85kqc4g],
input[type="date"][b-w1u85kqc4g] {
    width: 100%;
    padding: .6rem .7rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    color: var(--ink);
    outline: none;
    transition: box-shadow .15s ease, border-color .15s ease;
}

    input:focus[b-w1u85kqc4g],
    select:focus[b-w1u85kqc4g],
    textarea:focus[b-w1u85kqc4g] {
        border-color: #c8d8f0;
        box-shadow: 0 0 0 4px rgba(47,109,246,.08);
    }

input[type="checkbox"][b-w1u85kqc4g] {
    transform: scale(1.05);
}

/* Buttons */
.btn[b-w1u85kqc4g] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .55rem .9rem;
    border-radius: 10px;
    border: 1px solid transparent;
    font-weight: 600;
    cursor: pointer;
    line-height: 1;
    transition: transform .04s ease, box-shadow .15s ease, background .15s ease;
    user-select: none;
}

    .btn:active[b-w1u85kqc4g] {
        transform: translateY(1px);
    }

    .btn.primary[b-w1u85kqc4g] {
        background: #6ba539;
        color: #fff;
        box-shadow: 0 6px 14px rgba(107,165,57,.18);
    }

        .btn.primary:hover[b-w1u85kqc4g] {
            filter: brightness(1.03);
        }

    .btn.secondary[b-w1u85kqc4g] {
        background: #2f6df6;
        color: #fff;
        box-shadow: 0 6px 14px rgba(47,109,246,.2);
    }

        .btn.secondary:hover[b-w1u85kqc4g] {
            filter: brightness(1.03);
        }

    .btn.ghost[b-w1u85kqc4g] {
        background: #fff;
        color: dimgray;
        border-color: dimgray;
        border: 1px solid var(--line);
    }

        .btn.ghost:hover[b-w1u85kqc4g] {
            background: #f8fafc;
        }

    .btn.danger[b-w1u85kqc4g] {
        background: var(--danger);
        color: #fff;
    }

    .btn[disabled][b-w1u85kqc4g] {
        opacity: .6;
        cursor: not-allowed;
    }

/* Alerts */
.alert[b-w1u85kqc4g] {
    padding: .75rem 1rem;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--ink);
}

    .alert.success[b-w1u85kqc4g] {
        border-color: #cfe8d6;
        background: #f3fbf5;
        color: var(--success);
    }

    .alert.error[b-w1u85kqc4g] {
        border-color: #ffd4d4;
        background: #fff6f6;
        color: var(--danger);
    }

/* Table wrapper */
.table-scroll-container[b-w1u85kqc4g] {
    margin-top: 10px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: auto;
    box-shadow: 0 10px 26px rgba(14,23,38,.06);
    max-height: 50vh;
}

/* Table */
.styled-table[b-w1u85kqc4g] {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    min-width: 880px;
    //height: 70vh;
}

    .styled-table thead th[b-w1u85kqc4g] {
        position: sticky;
        top: 0;
        z-index: 1;
        background: #f7f9fc;
        color: var(--muted);
        text-transform: uppercase;
        letter-spacing: .06em;
        font-size: .74rem;
        font-weight: 700;
        border-bottom: 1px solid var(--line);
        padding: .85rem .9rem;
    }

    .styled-table tbody td[b-w1u85kqc4g] {
        padding: .8rem .9rem;
        border-bottom: 1px solid var(--line);
        color: #2b2f36;
        vertical-align: middle;
    }

    .styled-table tbody tr:hover[b-w1u85kqc4g] {
        background: #fafcff;
    }

    .styled-table tbody tr:last-child td[b-w1u85kqc4g] {
        border-bottom: none;
    }

/* Status chip */
.status-chip[b-w1u85kqc4g] {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .25rem .6rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 700;
    border: 1px solid transparent;
}

.status-planned[b-w1u85kqc4g] {
    background: #fff8eb;
    color: #8b5e00;
    border-color: #ffe5aa;
}

.status-dispatched[b-w1u85kqc4g] {
    background: #eef2ff;
    color: #3447c3;
    border-color: #dbe1ff;
}

.status-completed[b-w1u85kqc4g] {
    background: #edfbf0;
    color: #1d7c35;
    border-color: #cfe8d6;
}

/* Make your table column show chips if you wrap the text:
   <td><span class="status-chip status-completed">Completed</span></td> */

/* Modal */



.icon-btn.close[b-w1u85kqc4g] {
    border: none;
    background: transparent;
    font-size: 22px;
    line-height: 1;
    color: var(--muted);
    cursor: pointer;
}

    .icon-btn.close:hover[b-w1u85kqc4g] {
        color: var(--ink);
    }

/* Utility */
.text-danger[b-w1u85kqc4g] {
    color: var(--danger) !important;
}

.text-muted[b-w1u85kqc4g] {
    color: var(--muted) !important;
}

.span-2[b-w1u85kqc4g] {
    grid-column: span 2;
}

@media (max-width: 840px) {
    .span-2[b-w1u85kqc4g] {
        grid-column: span 1;
    }

    .modal-content.large[b-w1u85kqc4g] {
        max-width: 100%;
    }
}

/* Optional: compact actions column in table */
.styled-table td[style*="white-space:nowrap"] .btn[b-w1u85kqc4g] {
    padding: .4rem .6rem;
    font-size: .86rem;
}

/* Optional: “dashboard cards” if you add summary tiles above the table */
.dash-grid[b-w1u85kqc4g] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin: 6px 0 14px 0;
}

.dash-card[b-w1u85kqc4g] {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 16px;
    box-shadow: 0 8px 18px rgba(14,23,38,.06);
}

    .dash-card .title[b-w1u85kqc4g] {
        font-size: .86rem;
        color: var(--muted);
        margin-bottom: 6px;
    }

    .dash-card .value[b-w1u85kqc4g] {
        font-size: 1.6rem;
        font-weight: 800;
        color: var(--ink);
    }

    .dash-card .trend-up[b-w1u85kqc4g] {
        color: var(--success);
        font-weight: 700;
    }

    .dash-card .trend-down[b-w1u85kqc4g] {
        color: var(--danger);
        font-weight: 700;
    }
/* Billing Settings – page-scoped buttons */
.bs-btn[b-w1u85kqc4g] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .58rem .95rem;
    border-radius: 10px;
    border: 1px solid transparent;
    font-weight: 700;
    font-size: .95rem;
    cursor: pointer;
    line-height: 1;
    user-select: none;
    transition: transform .04s ease, box-shadow .15s ease, background .15s ease, filter .15s ease;
}

    .bs-btn:active[b-w1u85kqc4g] {
        transform: translateY(1px);
    }

    .bs-btn[disabled][b-w1u85kqc4g] {
        opacity: .56;
        cursor: not-allowed;
    }

/* Variants */
.bs-btn--primary[b-w1u85kqc4g] {
    background: var(--primary, #6ba539);
    color: #fff;
    box-shadow: 0 6px 14px rgba(107,165,57,.18);
}

    .bs-btn--primary:hover[b-w1u85kqc4g] {
        filter: brightness(1.05);
    }

.bs-btn--secondary[b-w1u85kqc4g] {
    background: var(--secondary, #2f6df6);
    color: #fff;
    box-shadow: 0 6px 14px rgba(47,109,246,.18);
}

    .bs-btn--secondary:hover[b-w1u85kqc4g] {
        filter: brightness(1.05);
    }

.bs-btn--ghost[b-w1u85kqc4g] {
    background: #fff;
    color: var(--ink, #0e1726);
    border: 1px solid var(--line, #e6ebf2);
}

    .bs-btn--ghost:hover[b-w1u85kqc4g] {
        background: #f8fafc;
    }
    /* Custom styling for the route modal body */
.route-modal-body[b-w1u85kqc4g] {
    /* Layout */
    display: flex;
    flex-direction: column;
    position: relative;
    /* Spacing */
    padding: 20px;
    margin: 10px auto;
    /* Size */
    width: 90%;
    max-width: 1400px;
    min-height: 200px;
    /* Background and border */
    background-color: #ffffff; /* White background */
    border: 1px solid #ddd; /* Subtle border */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Soft shadow */
    /* Font */
    font-family: Arial, sans-serif;
    font-size: 16px;
    color: #333;
}

    /* Optional: styling for child content inside */
    .route-modal-body h2[b-w1u85kqc4g] {
        font-size: 20px;
        margin-bottom: 10px;
        color: #222;
    }

    .route-modal-body p[b-w1u85kqc4g] {
        line-height: 1.6;
        margin-bottom: 12px;
    }

    /* Optional scrollable content */
    .route-modal-body.scrollable[b-w1u85kqc4g] {
        max-height: 400px;
        overflow-y: auto;
    }

/* Overlay */
.modal-overlay[b-w1u85kqc4g] {
    position: fixed;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow: auto;
    padding: 4vh 2vw;
    background: radial-gradient(40% 50% at 50% 40%, color-mix(in srgb, var(--feature-accent) 12%, transparent) 0%, transparent 70%), rgba(0,0,0,.32);
    backdrop-filter: blur(2px);
    z-index: 1050;
}
.modal-body[b-w1u85kqc4g] {
    padding: 16px 20px;
    max-height: 70vh; /* keeps modal body scrollable */
    overflow-y: auto;
    background: #fff;
}
/* Card shell */
.modal-content[b-w1u85kqc4g] {
    display: flex;
    flex-direction: column;
    width: min(80vw,1900px);
    max-height: 92vh;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--feature-border);
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(0,0,0,.18);
}

/* Header */
.modal-header[b-w1u85kqc4g] {
    position: sticky;
    top: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    background: linear-gradient(#f7f9fc,#eef2f7);
    border-bottom: 1px solid #eef1f5;
    color: var(--feature-ink);
}

.modal-title[b-w1u85kqc4g] {
    margin: 0;
    font-weight: 800;
    font-size: 1.05rem;
}

.modal-close[b-w1u85kqc4g] {
    border: 1px solid #e1e6ef;
    background: #fff;
    color: #4a5a72;
    border-radius: 8px;
    padding: 6px 10px;
    cursor: pointer;
    transition: transform .08s ease, box-shadow .15s ease;
}

    .modal-close:hover[b-w1u85kqc4g] {
        transform: translateY(-1px);
        box-shadow: 0 8px 18px rgba(0,0,0,.06);
    }
/* _content/AfriERP/Pages/Business/BusinessTypeWizard.razor.rz.scp.css */
.wizard-wrapper[b-lr3p7izzal] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    box-sizing: border-box;
}

.wizard-step[b-lr3p7izzal] {
    width: 100%;
    max-width: 1024px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.grid[b-lr3p7izzal] {
    margin-top: 1rem;
}

/* Fix the grid to always show 3 per row, with responsive fallback */
@media (min-width: 1024px) {
    .grid-cols-3[b-lr3p7izzal] {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }
}

/* Optional: style hover or selected states globally if not done inline */
.bg-blue-100[b-lr3p7izzal] {
    background-color: #ebf8ff;
}

.border-blue-500[b-lr3p7izzal] {
    border-color: #4299e1;
}
/* _content/AfriERP/Pages/Business/ModuleSelectionWizard.razor.rz.scp.css */
.wizard-wrapper[b-6fybpb4grm] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    box-sizing: border-box;
}

.wizard-step[b-6fybpb4grm] {
    width: 100%;
    max-width: 1024px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.grid[b-6fybpb4grm] {
    margin-top: 1rem;
}

/* Fix the grid to always show 3 per row, with responsive fallback */
@media (min-width: 1024px) {
    .grid-cols-3[b-6fybpb4grm] {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }
}

/* Optional: style hover or selected states globally if not done inline */
.bg-blue-100[b-6fybpb4grm] {
    background-color: #ebf8ff;
}

.border-blue-500[b-6fybpb4grm] {
    border-color: #4299e1;
}
/* _content/AfriERP/Pages/Business/SetupSummary.razor.rz.scp.css */
/* Header and paragraph */
h3[b-8v3g34brvr] {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

p[b-8v3g34brvr] {
    color: #4a5568;
    margin-bottom: 1.5rem;
}

/* Section headers */
h4[b-8v3g34brvr] {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    margin-top: 1rem;
}

/* Lists */
ul[b-8v3g34brvr] {
    margin-left: 1.25rem;
    margin-bottom: 1rem;
}

li[b-8v3g34brvr] {
    color: #2d3748;
    font-size: 0.95rem;
    line-height: 1.5;
}

/* Buttons */
button.primary[b-8v3g34brvr] {
    background-color: #38a169;
    color: white;
    padding: 0.5rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
}

    button.primary:hover[b-8v3g34brvr] {
        background-color: #2f855a;
    }

button.secondary[b-8v3g34brvr] {
    background-color: #edf2f7;
    color: #2d3748;
    padding: 0.5rem 1.25rem;
    border-radius: 0.5rem;
    font-weight: 500;
    border: none;
    cursor: pointer;
}
/* _content/AfriERP/Pages/Dashboard.razor.rz.scp.css */
html[b-p9vr01tnzw], body[b-p9vr01tnzw] {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: Arial, sans-serif;
    background-color: #f5f5f5;
}

.topbar[b-p9vr01tnzw] {
    height: 50px;
    background-color: #2c3e50;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
}

    .topbar .brand[b-p9vr01tnzw] {
        font-weight: bold;
        font-size: 1.2rem;
    }

    .topbar .search-input[b-p9vr01tnzw] {
        flex: 1;
        max-width: 400px;
        margin: 0 1rem;
    }

        .topbar .search-input input[b-p9vr01tnzw] {
            width: 100%;
            padding: 0.4rem;
            border: none;
            border-radius: 4px;
        }

    .topbar .user-btn[b-p9vr01tnzw] {
        background-color: #ffffff;
        color: #2c3e50;
        border: none;
        padding: 0.4rem 0.8rem;
        border-radius: 4px;
        cursor: pointer;
    }

.sidebar[b-p9vr01tnzw] {
    position: fixed;
    top: 50px;
    bottom: 0;
    left: 0;
    width: 220px;
    background-color: #f8f9fa;
    border-right: 1px solid #ddd;
    padding-top: 1rem;
    overflow-y: auto;
}

    .sidebar a[b-p9vr01tnzw] {
        display: block;
        padding: 0.75rem 1rem;
        color: #333;
        text-decoration: none;
        border-bottom: 1px solid #eee;
    }

        .sidebar a:hover[b-p9vr01tnzw] {
            background-color: #e9ecef;
        }

.main[b-p9vr01tnzw] {
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 50px;
    padding: 1rem;
}

.tabs[b-p9vr01tnzw] {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 2px solid #ddd;
    margin-bottom: 1rem;
    background-color: #fff;
}

    .tabs a[b-p9vr01tnzw] {
        padding: 0.6rem 1rem;
        text-decoration: none;
        color: #2c3e50;
        border-bottom: 3px solid transparent;
        transition: border-color 0.2s;
    }

        .tabs a.active[b-p9vr01tnzw],
        .tabs a:hover[b-p9vr01tnzw] {
            border-color: #007bff;
            font-weight: bold;
            background-color: #f1f8ff;
        }

.tiles[b-p9vr01tnzw] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: flex-start;
}

.tile[b-p9vr01tnzw] {
    flex: 1 1 150px;
    max-width: 200px;
    background-color: #007bff;
    color: white;
    text-align: center;
    padding: 1.5rem 1rem;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

    .tile:hover[b-p9vr01tnzw] {
        transform: scale(1.05);
        box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    }

    .tile i[b-p9vr01tnzw] {
        font-size: 2rem;
        margin-bottom: 0.5rem;
    }
.user-dropdown[b-p9vr01tnzw] {
    position: relative;
    display: inline-block;
}

.user-btn[b-p9vr01tnzw] {
    background-color: #ffffff;
    color: #007bff;
    border: none;
    padding: 0.4rem 0.8rem;
    border-radius: 4px;
    cursor: pointer;
}

.user-dropdown-menu[b-p9vr01tnzw] {
    position: absolute;
    right: 0;
    top: 120%;
    min-width: 200px;
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 0.25rem;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
    z-index: 999;
    padding: 0.5rem 0;
}

    .user-dropdown-menu a[b-p9vr01tnzw] {
        display: block;
        padding: 0.5rem 1rem;
        color: #333;
        text-decoration: none;
    }

        .user-dropdown-menu a:hover[b-p9vr01tnzw] {
            background-color: #f8f9fa;
        }

    .user-dropdown-menu .user-info[b-p9vr01tnzw] {
        padding: 0.5rem 1rem;
        border-bottom: 1px solid #ddd;
        font-size: 0.9rem;
        color: #555;
    }

    .user-dropdown-menu hr[b-p9vr01tnzw] {
        margin: 0.25rem 0;
        border-top: 1px solid #ddd;
    }
/* _content/AfriERP/Pages/HomePage.razor.rz.scp.css */
:root[b-tmktmtp5wn] {
    /* layout */
    --page-scale: 0.90;
    --nav-height: 64px;
    --megamenu-gutter: clamp(12px, 2.5vw, 24px);
    /* hero image frame */
    --hero-img-w: clamp(540px, 36vw, 760px);
    --hero-img-h: clamp(320px, 28vw, 460px);
    --hero-img-shift-x: 8px;
    --hero-img-shift-y: -8px;
    /* cards */
    --feature-radius: 12px;
    --feature-border: #e9ecef;
    --feature-text: #0f172a;
    --feature-muted: #6b7280;
    --feature-accent: #05bfa7;
    /* silver palette */
    --accent: #aeb4bf;
    --accent-strong: #9097a3;
    --ink: #1f2328;
    --muted: #5f6672;
    --border-1: #c7cbd3;
    --border-2: #d8dbe2;
    /* app surfaces */
    --bg-app: #f5f6f8;
    --bg-panel: #ffffff;
    --steel-1: #f7f8fa;
    --steel-2: #e8ebf0;
    --steel-3: #d9dee6;
    /* brand */
    --brand-start: #3c7fbe;
    --brand-end: #2f6aa3;
    --brand-border: #2a5d91;
    --brand-text: #ffffff;
    --brand-1: var(--brand-start, #3c7fbe);
    --brand-2: var(--brand-end, #2f6aa3);
    /* semantic */
    --panel: #ffffff;
    --surface: #f7f9fc;
    --border: #e5e7eb; /* base light-grey border */
    --input-border: #d1d5db; /* textbox light grey (explicit) */
    --danger: #f05454;
    --radius: 14px;
    --radius-sm: 10px;
    --elev: 0 12px 28px rgba(0,0,0,.18);
    --trans: 220ms cubic-bezier(.2,.7,.2,1);
}

/* Buttons */
.btn-link[b-tmktmtp5wn] {
    background: none;
    border: 0;
    padding: 1px;
    font: inherit;
    cursor: pointer;
    text-decoration: none;
}

    .btn-link:hover[b-tmktmtp5wn] {
        text-decoration: underline;
    }

/* ========= OVERLAY ========= */
/* If component renders, it's open. Make outside clicks inert via pointer-events safety net. */
.modal-overlay[b-tmktmtp5wn] {
    position: fixed;
    inset: 0;
    display: flex !important;
    justify-content: center;
    align-items: flex-start;
    padding: 4vh 2vw;
    overflow: auto;
    background: radial-gradient(40% 50% at 50% 40%, color-mix(in srgb, var(--brand-1) 12%, transparent) 0%, transparent 70%), rgba(0,0,0,.32);
    backdrop-filter: blur(2px);
    z-index: 3000;
    animation: fadeIn-b-tmktmtp5wn var(--trans) both;
    /* Safety: overlay itself won't receive clicks; panel will. */
    pointer-events: none;
}

@keyframes fadeIn-b-tmktmtp5wn {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

/* ========= PANEL ========= */
.modal-content[b-tmktmtp5wn] {
    pointer-events: auto; /* re-enable interaction inside panel */
    width: min(720px, 96vw);
    max-height: calc(100dvh - 8vh);
    opacity: 1 !important;
    transform: none !important;
    background: var(--panel) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius);
    box-shadow: var(--elev);
}

    .modal-content.large[b-tmktmtp5wn] {
        width: min(980px, 96vw);
    }

/* define the popIn you referenced */
@keyframes popIn-b-tmktmtp5wn {
    from {
        transform: translateY(12px) scale(.98);
        opacity: 0
    }

    to {
        transform: translateY(0) scale(1);
        opacity: 1
    }
}

@media (prefers-reduced-motion: no-preference) {
    .modal-overlay .modal-content[b-tmktmtp5wn] {
        animation: popIn-b-tmktmtp5wn var(--trans) .04s both;
    }
}

@media (prefers-reduced-motion: reduce) {
    .modal-content[b-tmktmtp5wn] {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ========= SECTIONS ========= */
.modal-header[b-tmktmtp5wn] {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    background: linear-gradient(#fff,#fafcff);
    border-bottom: 1px solid var(--border);
    color: var(--ink);
}

.modal-body[b-tmktmtp5wn] {
    padding: 16px 18px;
    overflow: auto;
    max-height: 100%;
    background: linear-gradient(#fff,#fff), linear-gradient(#f9fafb,#f9fafb);
    background-clip: padding-box, border-box;
    scrollbar-width: thin;
}

.modal-footer[b-tmktmtp5wn] {
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    background: #fff;
    border-top: 1px solid var(--border);
}

/* Close button hit-area */
.icon-btn.close[b-tmktmtp5wn] {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: #fff;
    cursor: pointer;
}

    .icon-btn.close:hover[b-tmktmtp5wn] {
        filter: brightness(.98);
    }

/* ========= BUTTONS ========= */
.btn[b-tmktmtp5wn] {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem .95rem;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    font-weight: 600;
    transition: filter .15s, box-shadow .15s, border-color .15s, background-color .15s;
    color: var(--ink);
    background: #fff;
}

    .btn.primary[b-tmktmtp5wn] {
        background: linear-gradient(180deg, var(--brand-1), var(--brand-2));
        color: #fff;
        border: none;
        box-shadow: 0 3px 4px rgba(0,0,0,.12);
    }

    .btn.secondary[b-tmktmtp5wn] {
        background: #fff;
        color: var(--brand-2);
        border: 1px solid var(--brand-2);
    }

    .btn.ghost[b-tmktmtp5wn] {
        background: transparent;
        border-color: transparent;
        color: var(--muted);
    }

    .btn.delete[b-tmktmtp5wn], .btn.danger[b-tmktmtp5wn] {
        background: var(--danger);
        color: #fff;
        border: none;
    }

    .btn:hover[b-tmktmtp5wn] {
        filter: brightness(.98);
    }

    .btn:focus-visible[b-tmktmtp5wn] {
        outline: none;
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-1) 25%, transparent);
    }

.actions-right > .btn + .btn[b-tmktmtp5wn] {
    margin-left: .5rem;
}

.step-badge[b-tmktmtp5wn] {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--brand-1);
    color: #fff;
    font-size: .9rem;
    margin-right: .5rem;
}

/* ========= FORMS ========= */
.form-grid[b-tmktmtp5wn] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 14px;
}

    .form-grid .span-2[b-tmktmtp5wn] {
        grid-column: 1 / -1;
    }

label[b-tmktmtp5wn] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: .9rem;
    color: var(--ink);
}

/* ✅ Light grey borders for all text boxes */
input[b-tmktmtp5wn], select[b-tmktmtp5wn], textarea[b-tmktmtp5wn] {
    border: 1px solid var(--input-border);
    border-radius: 10px;
    padding: .6rem .7rem;
    font-size: .95rem;
    outline: none;
    background: #fff;
    color: var(--ink);
    transition: border-color var(--trans), box-shadow var(--trans), background-color var(--trans);
}

    input:hover[b-tmktmtp5wn], select:hover[b-tmktmtp5wn], textarea:hover[b-tmktmtp5wn] {
        border-color: color-mix(in srgb, var(--input-border) 70%, #000 0%);
    }

    input:focus[b-tmktmtp5wn], select:focus[b-tmktmtp5wn], textarea:focus[b-tmktmtp5wn] {
        border-color: var(--brand-1);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-1) 22%, transparent);
    }

    input[disabled][b-tmktmtp5wn], select[disabled][b-tmktmtp5wn], textarea[disabled][b-tmktmtp5wn] {
        background: #f8fafc;
        color: #94a3b8;
    }

/* Checkbox/radio layout helper used in questionnaire */
.check-grid[b-tmktmtp5wn] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 6px 14px;
}

    .check-grid label[b-tmktmtp5wn] {
        flex-direction: row;
        align-items: center;
        gap: 8px;
    }
    .check-grid input[type="checkbox"][b-tmktmtp5wn] {
        accent-color: green; 
    }

/* ========= WAREHOUSE LIST & PROMPT ========= */
.warehouse-list[b-tmktmtp5wn] {
    list-style: none;
    padding: 0;
    margin: 0 0 12px;
    display: grid;
    gap: 10px;
}

    .warehouse-list li[b-tmktmtp5wn] {
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 10px 12px;
        background: #fff;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

.wh-name[b-tmktmtp5wn] {
    font-weight: 700;
    color: var(--ink);
}

.wh-meta[b-tmktmtp5wn] {
    color: var(--muted);
    font-size: .9rem;
}

.prompt-add[b-tmktmtp5wn] {
    margin-top: 12px;
    padding: 12px;
    background: #f7fafc;
    border: 1px dashed var(--border);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.prompt-actions .btn[b-tmktmtp5wn] {
    padding: .45rem .75rem;
}

/* ========= COLLAPSE ========= */
.collapse[b-tmktmtp5wn] {
    height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-6px);
    transition: height var(--trans), opacity var(--trans), transform var(--trans);
}

    .collapse.show[b-tmktmtp5wn] {
        height: auto;
        opacity: 1;
        transform: translateY(0);
    }

/* ========= RESPONSIVE ========= */
@media (max-width: 640px) {
    .form-grid[b-tmktmtp5wn] {
        grid-template-columns: 1fr;
    }

    .check-grid[b-tmktmtp5wn] {
        grid-template-columns: 1fr;
    }

    .modal-content[b-tmktmtp5wn], .modal-content.large[b-tmktmtp5wn] {
        width: 96vw;
    }
}

/* ====== Marketing bits (unchanged) ====== */
.about-section[b-tmktmtp5wn] {
    padding: 60px 20px;
    background-color: #f9f9f9;
    background-image: url('/images/kitenge.webp');
    background-repeat: repeat;
    background-size: 150px 150px;
    background-position: center;
    text-align: center;
    position: relative;
    z-index: 0;
    overflow: hidden;
}

    .about-section[b-tmktmtp5wn]::before {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(255, 255, 255, 0.30);
        z-index: 0;
    }

    .about-section > *[b-tmktmtp5wn] {
        position: relative;
        z-index: 1;
    }

.about-description[b-tmktmtp5wn] {
    background-color: rgba(255, 255, 255, 0.8);
    padding: 15px 25px;
    border-radius: 10px;
    max-width: 700px;
    margin: 1rem auto 2rem;
    color: #333;
    font-weight: 500;
    line-height: 1.6;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.features-grid[b-tmktmtp5wn] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 20px;
    max-width: 1400px;
    margin: 0 auto 40px;
}

.feature-card[b-tmktmtp5wn] {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    padding: 25px 20px;
    font-weight: 600;
    font-size: 1.1rem;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .3s ease, box-shadow .3s ease;
    cursor: default;
    min-height: 90px;
    text-align: center;
    border: 3px solid #C62828;
}

    .feature-card:hover[b-tmktmtp5wn] {
        transform: translateY(-5px);
        box-shadow: 0 8px 16px rgba(0,0,0,0.15);
        border-color: #FFB300;
    }

.pricing-section[b-tmktmtp5wn] {
    padding: 60px 20px;
    background-color: #fff;
    text-align: center;
}

    .pricing-section .section-title[b-tmktmtp5wn] {
        font-size: 2.5rem;
        margin-bottom: 40px;
        color: #222;
    }

.pricing-grid[b-tmktmtp5wn] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 25px;
    max-width: 1200px;
    margin: 0 auto;
}

.pricing-card[b-tmktmtp5wn] {
    background: linear-gradient(135deg, #fff, #f0f0f0);
    border-radius: 16px;
    padding: 30px 25px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05), 0 8px 20px rgba(0,0,0,0.1);
    border: 2px solid transparent;
    background-clip: padding-box;
    position: relative;
    transition: background-color .3s ease, transform .3s ease, box-shadow .3s ease;
    cursor: default;
}

    .pricing-card[b-tmktmtp5wn]::before {
        content: "";
        position: absolute;
        top: -2px;
        left: -2px;
        right: -2px;
        bottom: -2px;
        border-radius: 18px;
        background: linear-gradient(45deg, #C62828, #FFB300);
        z-index: -1;
        opacity: .8;
        transition: opacity .3s ease;
    }

    .pricing-card:hover[b-tmktmtp5wn]::before {
        opacity: 0;
    }

    .pricing-card:hover[b-tmktmtp5wn] {
        background-color: #e9f1f8;
        transform: translateY(-8px);
        box-shadow: 0 10px 20px rgba(0,0,0,0.15), 0 15px 40px rgba(0,0,0,0.2);
    }

.plan-title[b-tmktmtp5wn] {
    font-size: 1.8rem;
    margin-bottom: 25px;
    color: #C62828;
}

.plan-features[b-tmktmtp5wn] {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    text-align: left;
    color: #444;
    font-size: 1.05rem;
    line-height: 1.5;
}

    .plan-features li[b-tmktmtp5wn] {
        margin-bottom: 12px;
        padding-left: 20px;
        position: relative;
    }

        .plan-features li[b-tmktmtp5wn]::before {
            content: "✓";
            position: absolute;
            left: 0;
            color: #000;
            font-weight: bold;
            font-size: 1.1rem;
            line-height: 1;
        }
/* _content/AfriERP/Pages/Index.razor.rz.scp.css */
/* =========================
   ROOT VARIABLES (merged)
   ========================= */


:root[b-rpkdde6qob] {
    /* layout */
    --page-scale: 0.90;
    --nav-height: 64px;
    --megamenu-gutter: clamp(12px, 2.5vw, 24px);
    /* hero image frame */
    --hero-img-w: clamp(540px, 36vw, 760px);
    --hero-img-h: clamp(320px, 28vw, 460px);
    --hero-img-shift-x: 8px;
    --hero-img-shift-y: -8px;
    /* cards */
    --feature-radius: 12px;
    --feature-border: #e9ecef;
    --feature-text: #0f172a;
    --feature-muted: #6b7280;
    --feature-accent: #05bfa7;
    /* silver palette */
    --accent: #aeb4bf;
    --accent-strong: #9097a3;
    --ink: #1f2328;
    --muted: #5f6672;
    --border-1: #c7cbd3;
    --border-2: #d8dbe2;
    --bg-app: #f5f6f8;
    --bg-panel: #ffffff;
    --steel-1: #f7f8fa;
    --steel-2: #e8ebf0;
    --steel-3: #d9dee6;
    /* brand (requested) */
    --brand-start: #3c7fbe; /* gradient top  */
    --brand-end: #2f6aa3; /* gradient bottom */
    --brand-border: #2a5d91; /* outline */
    --brand-text: #ffffff; /* on brand bg */
    --brand-1: var(--brand-start, #3c7fbe);
    --brand-2: var(--brand-end, #2f6aa3);
    --ink: var(--color-ink, #1f2328);
    --muted: var(--color-muted, #6b7280);
    --panel: var(--color-panel, #ffffff);
    --surface: var(--color-surface-1, #f7f9fc);
    --border: var(--color-border, #e5e7eb);
    --danger: var(--color-danger, #f05454);
    --radius: 14px;
    --radius-sm: 10px;
    --elev: 0 12px 28px rgba(0,0,0,.18);
    --trans: 220ms cubic-bezier(.2,.7,.2,1);
}

/* subtle metallic sheen */
@keyframes glow-pop-b-rpkdde6qob {
    0% {
        box-shadow: 0 0 0 0 var(--accent-strong)
    }

    100% {
        box-shadow: 0 0 16px var(--accent-strong)
    }
}

/* =========================
   BASE LAYOUT / SCALE
   ========================= */
html[b-rpkdde6qob] {
    zoom: var(--page-scale);
}
/*
.navbar {
    position: sticky;
    top: 0;
    z-index: 4000;
}*/

.navbar[b-rpkdde6qob] {
    background: #fff;
    border-bottom: 1px solid #ddd;
    padding: 15px 20px;
    font-family: sans-serif;
}

.hamburger[b-rpkdde6qob] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

    .hamburger span[b-rpkdde6qob] {
        display: block;
        width: 25px;
        height: 3px;
        background: #333; /* Change color if needed */
        border-radius: 2px;
    }
.hamburger[b-rpkdde6qob] {
    display: none;
}


.navbar-container[b-rpkdde6qob] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
}

.navbar-brand[b-rpkdde6qob] {
    font-weight: bold;
    font-size: 1.5rem;
    color: black;
    text-decoration: none;
}

.navbar-links[b-rpkdde6qob] {
    display: flex;
    align-items: center;
    gap: 30px;
}

.nav-link[b-rpkdde6qob],
.dropbtn[b-rpkdde6qob] {
    text-decoration: none;
    color: #333;
    padding: 10px 14px;
    font-weight: 500;
    font-size: 1rem;
    transition: color 0.2s ease;
}

    .nav-link:hover[b-rpkdde6qob],
    .dropbtn:hover[b-rpkdde6qob] {
        color: #2e7d32;
    }


/* Dropdown container */
.dropdown[b-rpkdde6qob] {
    position: relative;
}

/* Dropdown menu */
.dropdown-full-wrapper[b-rpkdde6qob] {
    position: absolute;
    top: 100%;
    left: 0;
    background: #fff;
    min-width: 200px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    display: none;
    z-index: 1000;
}

/* Show dropdown on hover */
.dropdown:hover .dropdown-full-wrapper[b-rpkdde6qob] {
    display: block;
}

/* Dropdown content styling */
.dropdown-content[b-rpkdde6qob] {
    display: flex;
    flex-direction: column;
}


/* Dropdown container */
.cards-dropdown[b-rpkdde6qob] {
    position: relative;
    display: inline-block;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

    /* Dropdown button */
    .cards-dropdown .dropbtn[b-rpkdde6qob] {
        cursor: pointer;
        padding: 10px 16px;
        color: #1e774f;
        font-weight: 600;
        text-decoration: none;
        user-select: none;
        transition: color 0.3s ease;
    }

        .cards-dropdown .dropbtn:hover[b-rpkdde6qob],
        .cards-dropdown .dropbtn:focus[b-rpkdde6qob] {
            color: #4f7d28;
            outline: none;
        }

/* Dropdown content wrapper */
.dropdown-full-wrapper[b-rpkdde6qob] {
    position: absolute;
    top: 100%;
    left: 0;
    display: none; /* hidden by default */
    background: #fff;
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    border-radius: 8px;
    z-index: 1000;
    padding: 30px;
    min-width: 800px;
    display: flex;
    gap: 40px;
    color: #333;
}

/* Show dropdown on hover of container */
.cards-dropdown:hover .dropdown-full-wrapper[b-rpkdde6qob],
.cards-dropdown:focus-within .dropdown-full-wrapper[b-rpkdde6qob] {
    display: flex;
}

/* Sidebar nav */
.dropdown-content > div:first-child[b-rpkdde6qob] {
    min-width: 180px;
    border-right: 1px solid #ddd;
    padding-right: 20px;
}

.dropdown-content h3[b-rpkdde6qob] {
    color: #1e774f;
    font-weight: 700;
    margin-bottom: 12px;
    font-size: 1.1rem;
}

/* Sidebar links */
.dropdown-content ul[b-rpkdde6qob] {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar-tab[b-rpkdde6qob] {
    display: block;
    padding: 8px 0;
    color: #3a3a3a;
    text-decoration: none;
    transition: color 0.3s ease;
    font-weight: 500;
}

    .sidebar-tab:hover[b-rpkdde6qob],
    .sidebar-tab:focus[b-rpkdde6qob] {
        color: #333;
        outline: none;
    }



.solutions-dropdown-content[b-rpkdde6qob] {
    display: flex;
    flex-direction: row; /* default, but explicit */
    padding: 30px;
    gap: 40px;
    min-width: 800px;
}

/* Sidebar on the left */
.solutions-sidebar[b-rpkdde6qob] {
    grid-column: span 2;
    background: #e9f1f8;
    padding: 1rem;
    border-right: 1px solid #ddd;
}

/* Cards container takes remaining 4 columns */
.solutions-cards[b-rpkdde6qob] {
    grid-column: span 4;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: flex-start;
}

/* Individual card styles */
.solution-card[b-rpkdde6qob] {
    background: #ffffff;
    border-radius: 10px;
    padding: 12px;
    min-width: 160px;
    transition: box-shadow 0.3s ease;
}

    .solution-card h4[b-rpkdde6qob] {
        margin-bottom: 8px;
        color: #333;
    }

    .solution-card p[b-rpkdde6qob] {
        font-size: 0.9rem;
        color: #333;
    }





.feature-card[b-rpkdde6qob] {
    padding: 12px;
    color: #333;
    text-decoration: none;
    border-bottom: 1px solid #eee;
}

    .feature-card:hover[b-rpkdde6qob] {
        background: #f8f8f8;
    }


@supports not (zoom: 1) {
    body[b-rpkdde6qob] {
        transform: scale(var(--page-scale));
        transform-origin: top left;
        width: calc(100% / var(--page-scale));
        height: calc(100% / var(--page-scale));
    }
}

@media (max-width: 1200px) {
    html[b-rpkdde6qob] {
        zoom: 1;
    }

    @supports not (zoom: 1) {
        body[b-rpkdde6qob] {
            transform: none;
            width: 100%;
            height: auto;
        }
    }
}

/* =========================
   HORIZONTAL ICON MENU
   ========================= */
.horizontal-icon-menu[b-rpkdde6qob] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 10px;
    background: #fff;
}

.menu-item[b-rpkdde6qob] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: background-color .2s ease, color .2s ease;
}

    .menu-item i[b-rpkdde6qob] {
        font-size: 18px;
        color: #333;
    }

.menu-label[b-rpkdde6qob] {
    position: absolute;
    bottom: -25px;
    background: #f1f1f1;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(5px);
    transition: all .2s ease;
    pointer-events: none;
    color: #333;
}

.menu-item:hover .menu-label[b-rpkdde6qob] {
    opacity: 1;
    transform: translateY(0);
}

.menu-item:hover[b-rpkdde6qob] {
    background: #f1f1f1;
}

.menu-item.active[b-rpkdde6qob] {
    background: #eaf1fb;
}

    .menu-item.active i[b-rpkdde6qob] {
        color: var(--brand-end);
    }

@media (max-width:768px) {
    .horizontal-icon-menu[b-rpkdde6qob] {
        justify-content: center;
    }

    .menu-item[b-rpkdde6qob] {
        flex: 1 1 20%;
    }
}



.settings-nav[b-rpkdde6qob] {
    width: 200px;
    border-right: 1px solid #ddd;
}

    .settings-nav ul[b-rpkdde6qob] {
        list-style: none;
        padding-left: 0;
    }

    .settings-nav li[b-rpkdde6qob] {
        padding: 12px 16px;
        cursor: pointer;
        font-weight: 500;
        border-left: 3px solid transparent;
    }

        .settings-nav li.active[b-rpkdde6qob] {
            background: #f0f4fb;
            border-left: 3px solid var(--brand-border);
        }

.small-link[b-rpkdde6qob] {
    display: inline-block;
    margin-top: 4px;
    font-size: 13px;
    color: var(--brand-end);
    text-decoration: none;
}

    .small-link:hover[b-rpkdde6qob] {
        color: var(--brand-border);
        text-decoration: underline;
    }

.close-button[b-rpkdde6qob] {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
}
/*start os the test*/
/* =========================
   HERO (full-bleed diagonal band)
   ========================= */
.hero-outer[b-rpkdde6qob] {
    position: relative;
    overflow: hidden;
    z-index: 0;
    min-height: calc(100vh - var(--nav-height, 64px));
    padding: clamp(48px, 8vh, 120px) 5% 20px 5%;
    height: 80vh;
}

    /* Diagonal pale band */
    .hero-outer[b-rpkdde6qob]::before {
        content: "";
        position: absolute;
        inset: 0;
        background: #e9f1f8;
        clip-path: polygon(0 0, 100% 0, 78% 52%, 60% 100%, 0 100%);
        z-index: -1;
    }

    /* Angle line accent */
    .hero-outer[b-rpkdde6qob]::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: -1px;
        height: 12px;
        background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--feature-accent, #2f6aa3) 60%, transparent) 20%, var(--feature-accent, #2f6aa3) 50%, color-mix(in srgb, var(--feature-accent, #2f6aa3) 60%, transparent) 80%, transparent 100%);
        transform: skewY(-2.5deg);
        transform-origin: left bottom;
        pointer-events: none;
    }

/* =========================
   Inner layout
   ========================= */
.hero-combined[b-rpkdde6qob] {
    display: grid;
    grid-template-columns: minmax(520px, 1fr) minmax(420px, 1fr);
    align-items: center;
    gap: clamp(32px, 4vw, 56px);
    min-height: 560px;
}

.hero-title[b-rpkdde6qob] {
    border: none;
    outline: none;
    box-shadow: none;
    font-size: 36px;
    font-weight: 800;
    color: black;
/*    margin-bottom: 12px;*/
    margin-bottom: 0.5rem;
}

.hero-tagline[b-rpkdde6qob],
.hero-desc[b-rpkdde6qob],
.hero-sub[b-rpkdde6qob] {
    color: black;
}

/* Right image block */
.hero-right[b-rpkdde6qob] {
    justify-self: end;
    align-self: start;
    position: relative;
    transform: translate(-10px, -30px);
    max-width: 580px;
    height: 60vh;
}

    .hero-right img[b-rpkdde6qob] {
        position: static;
        width: 20vw;
        height: 60vh;
        border-radius: 14px;
        box-shadow: 0 12px 32px rgba(0,0,0,.18);
        display: block;
        object-fit: contain;
    }

/* Left block (large screens) */
@media (min-width: 1200px) {
    .hero-left[b-rpkdde6qob] {
        justify-self: start;
        align-self: start;
        position: relative;
        transform: translate(-10px, -100px);
        max-width: 30vw;
        height: 60vh;
        margin: 15% 20px 0 10%;
    }
    .close-menu[b-rpkdde6qob] {
  display: none; /* hidden by default */
}

    .hero-title[b-rpkdde6qob] {
        font-size: clamp(3rem, 2.5vw, 4rem);
        font-weight: 800;
        color: #0d1b0f;
        margin-bottom: 10px;
    }

    .hero-tagline[b-rpkdde6qob] {
        font-size: 1.25rem;
        color: #333;
        font-weight: 500;
        margin-bottom: 2rem;
    }

    .hero-sub[b-rpkdde6qob] {
        font-size: 1rem;
        text-transform: uppercase;
        letter-spacing: 0.18em;
        color: #6ba539;
        margin-bottom: 4rem;
        font-weight: 600;
    }
}

/* =========================
   Slider
   ========================= */
/*.hero-slider {
    display: flex;
    align-items: center;*/ /* center arrows vertically */
/*justify-content: center;
    gap: 1rem;
    position: relative;
    margin-bottom: 2rem;
}

.hero-card {
    background: #fff;
    border-radius: 12px;
    padding: 0.8rem 1.5rem;
    box-shadow: 0 4px 15px rgba(8, 18, 30, 0.06);
    min-width: 680px;
    min-height: 320px;*/
/* center content */
/*display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}*/
.hero-slider[b-rpkdde6qob] {
    display: flex;
    align-items: center; /* center arrows vertically */
    justify-content: center;
    gap: 1rem;
    position: relative;
    margin-bottom: 2rem;
}

/* softer, brushed fade around the card */
.hero-card[b-rpkdde6qob] {
    position: relative;
    background: #fff; /* keep white center */
    border-radius: 12px;
    padding: 0.8rem 1.5rem;
    box-shadow: 0 4px 8px rgba(8, 18, 30, 0.06);
    min-width: 580px;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: visible;
    isolation: isolate; /* keep halo behind content */
}
    .hero-card .hero-title[b-rpkdde6qob] {
        font-size: 2.5rem;
        font-weight: 600;
        margin-bottom: 0.5rem;
        color: #333; 
        line-height: 1.3;
    }
    .hero-card .hero-desc[b-rpkdde6qob] {
        font-size: 1.2rem;
        font-weight: 400;
        color: #666;
        margin-top: 0; 
        white-space: normal;
    }


    /* halo outside the card (white → light grey, feathered) */
    .hero-card[b-rpkdde6qob]::before {
        content: "";
        position: absolute;
        inset: -24px; /* size of the “margin” */
        border-radius: 16px;
        z-index: -1;
        /* multiple soft radial washes around edges */
        background: radial-gradient(140% 120% at 15% 15%, rgba(255,255,255,.95) 0 45%, transparent 70%), radial-gradient(140% 120% at 85% 15%, rgba(255,255,255,.95) 0 45%, transparent 70%), radial-gradient(140% 120% at 85% 85%, rgba(242,245,249,.95) 0 45%, transparent 70%), radial-gradient(140% 120% at 15% 85%, rgba(242,245,249,.95) 0 45%, transparent 70%);
        filter: blur(10px); /* feather the outer edge */
    }

    /* subtle inner stroke, like the sample */
    .hero-card[b-rpkdde6qob]::after {
        content: "";
        position: absolute;
        inset: 10px;
        border-radius: 10px;
        border: 1px solid rgba(232,237,245,.9);
        pointer-events: none;
    }

.hero-desc[b-rpkdde6qob] {
    font-size: 1.5rem;
    font-weight: 700;
    color: #555;
    white-space: nowrap;
    overflow: hidden;
    will-change: transform, opacity;
}

.slide-in-left[b-rpkdde6qob] {
    animation: slideInLeft-b-rpkdde6qob 0.6s ease forwards;
}

@keyframes slideInLeft-b-rpkdde6qob {
    0% {
        opacity: 0;
        transform: translateX(15px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* =========================
   50/50 split blocks under each side
   ========================= */
.hero-split[b-rpkdde6qob] {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 50% / 50% */
    gap: 12px;
    margin-top: 16px;
}

.hero-cell[b-rpkdde6qob] {
    min-width: 0;
}

    .hero-cell *[b-rpkdde6qob] {
        max-width: 100%;
    }

@media (max-width: 900px) {
    .hero-split[b-rpkdde6qob] {
        grid-template-columns: 1fr;
    }
    /* stack on small screens */
}

/* =========================
   HERO (full-bleed diagonal band)
   ========================= */
/*.hero-outer {
    position: relative;
    overflow: hidden;
    z-index: 0;
    min-height: calc(100vh - var(--nav-height));
    padding: clamp(48px, 8vh, 120px) 5% 20px 5%;
    height: 80vh;
    background-color: red;
}



    .hero-outer::before {
        content: "";
        position: absolute;
        inset: 0;
        background: #e9f1f8;
        clip-path: polygon(0 0, 100% 0, 78% 52%, 60% 100%, 0 100%);
        z-index: -1;
    }*/
/* inner layout */
/*.hero-combined {
    display: grid;
    grid-template-columns: minmax(520px,1fr) var(--hero-img-w);
    align-items: center;
    gap: clamp(32px,4vw,56px);
    min-height: 560px;
}

.hero-title {
    border: none;
    outline: none;
    box-shadow: none;
    font-size: 56px;
    font-weight: 800;
    color: black;
    margin-bottom: 12px;
}

.hero-tagline, .hero-desc, .hero-sub {
    color: black;
}


.hero-right {
    justify-self: end;
    align-self: start;
    position: relative;
    transform: translate(-10px, -200px);
    max-width: 580px;
    height: 60vh;
    background: blue;
}

    .hero-right img {
        position: static;
        width: 20vw;
        height: 60vh;
        border-radius: 14px;
        box-shadow: 0 12px 32px rgba(0,0,0,.18);
        display: block;
    }
.hero-right {*/
/*  transform: translate(-200px, -700px);*/
/*padding-left: 5%;
}
@media (min-width: 1200px) {
    .hero-left {
        justify-self: start;
        align-self: start;
        position: relative;
        transform: translate(-10px, -200px);
        max-width: 30vw;
        height: 60vh;
        margin: 15% 20px 0px 10%;*/
/* margin-top: 80px;
        max-width: 580px;*/
/*background: yellow;
    }

    .hero-title {
        font-size: clamp(3rem, 2.5vw, 4rem);
        font-weight: 800;
        color: #0d1b0f;
        margin-bottom: 10px;
    }

    .hero-tagline {
        font-size: 1.25rem;
        color: #333;
        font-weight: 500;
        margin-bottom: 2rem;
    }

    .hero-sub {
        font-size: 1rem;
        text-transform: uppercase;
        letter-spacing: 0.18em;
        color: #6ba539;
        margin-bottom: 1rem;
        font-weight: 600;
    }*/

/* Slider container */
/*.hero-slider {
        display: flex;
        align-items: center;*/ /* center arrows vertically */
/*justify-content: center;
        gap: 1rem;
        position: relative;
        margin-bottom: 2rem;
    }*/

/* Slider card */
/*.hero-card {
        background: #fff;
        border-radius: 12px;
        padding: 0.8rem 1.5rem;
        box-shadow: 0 4px 15px rgba(8, 18, 30, 0.06);
        min-width: 680px;
        min-height: 320px;*/
/* Center content vertically & horizontally */
/*display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }*/

/* Rotating text */
/*.hero-desc {
        font-size: 1.5rem;
        font-weight: 700;
        color: #555;
        white-space: nowrap;
        overflow: hidden;
        will-change: transform, opacity;
    }

    .slide-in-left {
        animation: slideInLeft 0.6s ease forwards;
    }

    @keyframes slideInLeft {
        0% {
            opacity: 0;
            transform: translateX(15px);
        }

        100% {
            opacity: 1;
            transform: translateX(0);
        }
    }*/

/* Arrows */
.slider-arrow[b-rpkdde6qob] {
    background: none;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    color: #6ba539;
    transition: color 0.3s ease;
    /* Center arrow with card vertically */
    align-self: center;
}

    .slider-arrow:hover[b-rpkdde6qob] {
        color: #5a8f2e;
    }

/* Buttons */
.hero-buttons[b-rpkdde6qob] {
    margin-top: auto;
    display: flex;
    gap: 1rem;
}
.navbar-brands[b-rpkdde6qob] {
    display: none;
}

.hero-btn[b-rpkdde6qob] {
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

    .hero-btn.primary[b-rpkdde6qob] {
        background-color: #6ba539;
        color: #fff;
    }

        .hero-btn.primary:hover[b-rpkdde6qob] {
            background-color: #5a8f2e;
        }

    .hero-btn.secondary[b-rpkdde6qob] {
        background-color: #f8f8f8;
        color: #111;
        border: 1px solid #ddd;
    }

        .hero-btn.secondary:hover[b-rpkdde6qob] {
            background-color: #eaeaea;
        }
/* Mobile & Tablet shared styles */
@media (max-width: 991.98px) {
    /* Hero section */
    .hero-combined[b-rpkdde6qob] {
        display: flex;
        flex-direction: column;
        align-items: start;
        text-align: center;
        gap: 18px;
        padding: 20px 15px;
    }
     .navbar-links .dropdown.products[b-rpkdde6qob],
  .navbar-links .dropdown.solutions[b-rpkdde6qob] {
    display: none !important;
  }
    .hero-buttons[b-rpkdde6qob] {
        display: flex;
        justify-content: center; /* center horizontally */
        flex-wrap: wrap; /* stack if too long */
        gap: 12px; /* spacing between Register + Watch Demo */
        margin-top: 10px;
    }

        .hero-buttons .hero-btn[b-rpkdde6qob] {
            min-width: 130px; /* makes buttons equal size */
            text-align: center;
        }
    

    .feature-card h2[b-rpkdde6qob],
    .solution-card h2[b-rpkdde6qob],
    .solution-card p[b-rpkdde6qob] {
        word-wrap: break-word; /* breaks long words if needed */
        overflow-wrap: anywhere; /* modern alternative */
        white-space: normal; /* allow wrapping instead of cutting */
        line-height: 1.4; /* improves readability */
    }

    .hero-left[b-rpkdde6qob],
    .hero-right[b-rpkdde6qob] {
        width: 100%;
    }

        .hero-right img[b-rpkdde6qob] {
            max-width: 90%;
            width:2000px;
            height: 34vh;
            margin: 0 auto;
            display: block;
            padding-bottom:20px;
        }

    /* Navbar */
    .navbar-container[b-rpkdde6qob] {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 60px;
        padding: 0 15px;
        width: 100%;
    }
    .navbar-brands[b-rpkdde6qob] {
        display: block;
        font-size: 22px; /* adjust size */
        font-weight: bold; /* make it stand out */
        color: #000; /* black color */
        text-align: center; /* center in the menu */
        margin-bottom: 16px; /* space below it */
        text-decoration: none; /* remove underline */
    }

    .hamburger[b-rpkdde6qob] {
        position: absolute;
        left: 5px;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        flex-direction: column;
        gap: 5px;
        background: none;
        border: none;
        cursor: pointer;
        padding: 8px;
        z-index: 1001;
    }

        .hamburger span[b-rpkdde6qob] {
            display: block;
            width: 25px;
            height: 3px;
            background: #333;
            border-radius: 2px;
        }

    .navbar-brand[b-rpkdde6qob] {
        margin: 0 auto;
        text-align: center;
        max-width: calc(100% - 100px);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding: 0 10px;
    }

    .navbar-container > div:last-child[b-rpkdde6qob] {
        position: absolute;
        right: 5px;
        top: 50%;
        transform: translateY(-50%);
        max-width: 100px;
    }

        .navbar-container > div:last-child select[b-rpkdde6qob] {
            max-width: 90px;
            padding: 6px 4px;
            font-size: 14px;
        }

    /* Slide-out menu */
    .navbar-links[b-rpkdde6qob] {
        position: fixed;
        top: 0;
        left: -100%;
        height: 100vh;
        width: 280px;
        background: white;
        padding: 80px 20px 20px;
        box-shadow: 2px 0 10px rgba(0,0,0,0.1);
        z-index: 1002;
        transition: left 0.3s ease;
        overflow-y: auto;
        display: none;
    }

        .navbar-links.active[b-rpkdde6qob] {
            display: block;
            left: 0;
        }

    .mobile-menu-overlay[b-rpkdde6qob] {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        z-index: 1001;
    }

    .navbar-links.active + .mobile-menu-overlay[b-rpkdde6qob] {
        display: block;
    }

    .close-menu[b-rpkdde6qob] {
        position: absolute;
        top: 20px;
        right: 20px;
        font-size: 24px;
        background: none;
        border: none;
        cursor: pointer;
        z-index: 1003;
        color: #333;
    }

    /* Dropdown */
    .navbar-links .dropdown[b-rpkdde6qob] {
        width: 100%;
        margin-bottom: 15px;
    }

    .navbar-links .dropbtn[b-rpkdde6qob] {
        display: block;
        width: 100%;
        text-align: left;
        padding: 12px 0;
        font-weight: 500;
        background: none;
        border: none;
        border-bottom: 1px solid #eee;
        font-size: 16px;
        cursor: pointer;
        position: relative;
    }

        .navbar-links .dropbtn[b-rpkdde6qob]:after {
            content: "\276F";
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%) rotate(90deg);
            font-size: 20px;
            transition: transform 0.3s ease;
        }

    .navbar-links .dropdown.active .dropbtn[b-rpkdde6qob]:after {
        transform: translateY(-50%) rotate(-90deg);
    }

    .dropdown-full-wrapper[b-rpkdde6qob] {
        display: none;
        padding: 10px 0 0 15px;
        width: 100%;
    }

    .dropdown.active .dropdown-full-wrapper[b-rpkdde6qob] {
        display: block;
    }

    /* Cards (shared for Products & Solutions) */
    .dropdown-content[b-rpkdde6qob],
    .solutions-cards[b-rpkdde6qob] {
        display: flex;
        flex-direction: column;
        gap: 15px;
        margin-top: 10px;
    }

    .feature-card[b-rpkdde6qob],
    .solution-card[b-rpkdde6qob] {
        border: 1px solid #eee;
        border-radius: 8px;
        background: #fafafa;
        padding: 15px;
    }

        .feature-card i[b-rpkdde6qob],
        .solution-card i[b-rpkdde6qob] {
            font-size: 22px;
            margin-bottom: 8px;
            color: #007bff;
        }

        .feature-card h2[b-rpkdde6qob],
        .solution-card h2[b-rpkdde6qob] {
            font-size: 16px;
            margin: 0 0 6px;
        }

        .feature-card p[b-rpkdde6qob],
        .solution-card p[b-rpkdde6qob] {
            font-size: 13px;
            margin: 0;
            color: #666;
        }

    /* Solutions sidebar */
    .solutions-dropdown-content[b-rpkdde6qob] {
        flex-direction: column;
        gap: 20px;
    }

    .solutions-sidebar[b-rpkdde6qob] {
        margin-bottom: 15px;
    }
}

@media (max-width: 767.98px) {
    /* Override the default card layout */
    .dropdown-content[b-rpkdde6qob] {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-top: 10px;
    }
    .navbar-links .cards-dropdown[b-rpkdde6qob] {
        display: none !important;
    }
    .download-icon[b-rpkdde6qob] {
        width: 42px;
        height: 42px;
        font-size: 10px;
        padding:5px;
    }

    .hero-card[b-rpkdde6qob] {
        max-width: 90%; /* narrower so it fits screen */
        padding: 12px 16px; /* reduce padding */
        margin: 0 auto; /* center on screen */
        border-radius: 10px; /* slightly smaller corners */
    }

    .hero-title[b-rpkdde6qob] {
        font-size: 18px; /* smaller title */
        line-height: 1.3;
        text-align: center; /* better alignment for mobile */
    }

    .hero-desc[b-rpkdde6qob] {
        font-size: 14px; /* smaller description */
        line-height: 1.4;
        text-align: center;
        margin-top: 6px;
    }

    .slider-arrow[b-rpkdde6qob] {
        font-size: 20px; /* shrink arrows */
        padding: 6px;
    }

    .navbar-brands[b-rpkdde6qob] {
        display: block;
        font-size: 22px; /* adjust size */
        font-weight: bold; /* make it stand out */
        color: #000; /* black color */
        text-align: center; /* center in the menu */
        margin-bottom: 16px; /* space below it */
        text-decoration: none; /* remove underline */
    }
        .feature-card[b-rpkdde6qob] {
        flex-wrap: wrap; /* let long names go into new line */
        align-items: flex-start; /* icon + text align to top */
    }

        .feature-card[b-rpkdde6qob]::after {
            margin-left: auto; /* keep chevron to far right */
        }
   
    /* Each product row */
    .feature-card[b-rpkdde6qob] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1px 5px;
        border: 1px solid #eee;
        border-radius: 12px;
        background: #fff;
        box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    }

        .feature-card i[b-rpkdde6qob] {
            font-size: 20px;
            margin: 0;
            margin-right: 12px;
            color: #007bff;
        }

        .feature-card h2[b-rpkdde6qob] {
            font-size: 16px;
            font-weight: 500;
            margin: 0;
            flex: 1;
            color: #333;
        }

        .feature-card p[b-rpkdde6qob] {
            display: none; /* hide descriptions on mobile */
        }

        /* Chevron on right */
        .feature-card[b-rpkdde6qob]::after {
            font-size: 18px;
            color: #999;
            margin-left: 8px;
        }
    .solutions-dropdown-content[b-rpkdde6qob] {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    /* Sidebar as horizontal scrollable row */
    .solutions-sidebar[b-rpkdde6qob] {
        display: flex;
        overflow-x: auto;
        gap: 10px;
        padding-bottom: 8px;
        margin-bottom: 10px;
    }

        .solutions-sidebar button[b-rpkdde6qob] {
            flex: 0 0 auto;
            padding: 8px 14px;
            border: 1px solid #ddd;
            border-radius: 20px;
            background: #fff;
            font-size: 14px;
            white-space: nowrap;
        }

    /* Cards in single column */
    .solutions-cards[b-rpkdde6qob] {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .solution-card[b-rpkdde6qob] {
        padding: 15px;
        border: 1px solid #eee;
        border-radius: 10px;
        background: #fafafa;
    }

        .solution-card p[b-rpkdde6qob] {
            font-size: 13px;
            color: #666;
        }
}
@media (min-width: 768px) and (max-width: 991.98px) {
    .dropdown-content[b-rpkdde6qob] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    .navbar-links .dropdown.products[b-rpkdde6qob],
    .navbar-links .dropdown.solutions[b-rpkdde6qob] {
        display: none !important;
    }
    .solutions-cards[b-rpkdde6qob] {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: 18px;
    }
    .hero-card[b-rpkdde6qob] {
        max-width: 70%;
        padding: 16px 20px;
    }

    .hero-title[b-rpkdde6qob] {
        font-size: 22px;
    }

    .hero-desc[b-rpkdde6qob] {
        font-size: 15px;
    }

    .feature-card[b-rpkdde6qob] {
        display: block;
        padding: 16px;
        border: 1px solid #eee;
        border-radius: 10px;
        background: #fafafa;
    }

        .feature-card p[b-rpkdde6qob] {
            display: block; /* allow short descriptions back on tablet */
        }
    .solutions-dropdown-content[b-rpkdde6qob] {
        display: grid;
        grid-template-columns: 200px 1fr; /* sidebar + content */
        gap: 20px;
    }

    .solutions-sidebar[b-rpkdde6qob] {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .solutions-cards[b-rpkdde6qob] {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .solution-card[b-rpkdde6qob] {
        padding: 18px;
        border-radius: 12px;
        border: 1px solid #eee;
        background: #fff;
    }
}

@media (max-width: 575.98px) {
    .hero-left[b-rpkdde6qob] {
        padding: 12px; /* reduce side padding */
        text-align: center; /* center text */
    }

    .hero-title[b-rpkdde6qob] {
        font-size: 20px; /* smaller main title */
        line-height: 1.3;
        margin-bottom: 8px;
    }

    .hero-tagline[b-rpkdde6qob] {
        font-size: 14px; /* smaller tagline */
        line-height: 1.4;
        margin-bottom: 6px;
    }

    .hero-sub[b-rpkdde6qob] {
        font-size: 13px; /* shrink sub text */
        line-height: 1.3;
        margin-bottom: 12px;
    }

    /* Slider adjustments */
    .hero-slider[b-rpkdde6qob] {
        margin-top: 10px;
    }

    .hero-card[b-rpkdde6qob] {
        max-width: 40%;
        padding: 4px 5px;
        border-radius: 5px;
        margin: 0 auto;
    }

        .hero-card .hero-title[b-rpkdde6qob] {
            font-size: 18px; /* shrink slider title */
            line-height: 1.4;
        }

        .hero-card .hero-desc[b-rpkdde6qob] {
            font-size: 14px; /* shrink slider desc */
            line-height: 1.4;
        }

    /* Smaller arrows */
    .slider-arrow[b-rpkdde6qob] {
        font-size: 10px;
        padding: 4px;
    }

    /* Buttons stacked for small screens */
    .hero-buttons[b-rpkdde6qob] {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-top: 12px;
    }

    .hero-btn[b-rpkdde6qob] {
        font-size: 14px;
        padding: 8px 12px;
    }
    .site-footer[b-rpkdde6qob] {
        font-size: 13px; /* smaller text */
        padding: 14px 8px; /* less padding */
        background: #fff; /* clean white background for mobile */
        color: #000; /* solid black text for clarity */
    }
}
/*
@media (max-width: 767.98px) {
    .hero-left {
        margin-left: 0;
    }

    .hero-combined {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .hero-right {
        width: 100%;
        height: clamp(240px, 50vw, 380px);
        transform: none;
    }

    .hero-outer::before {
        clip-path: polygon(0 0, 100% 0, 85% 55%, 70% 100%, 0 100%);
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .hero-left {
        margin-left: 0;
    }

    .hero-combined {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .hero-right {
        width: 100%;
        height: clamp(240px, 50vw, 380px);
        transform: none;
    }

    .hero-outer::before {
        clip-path: polygon(0 0, 100% 0, 85% 55%, 70% 100%, 0 100%);
    }
}*/
/* =========================
   HERO SECTION
   ========================= */
.hero[b-rpkdde6qob] {
    background: linear-gradient(180deg, var(--steel-1) 0%, var(--steel-2) 52%, var(--steel-1) 100%), radial-gradient(120% 160% at 50% -30%, rgba(255,255,255,.85) 0%, rgba(255,255,255,0) 60%), repeating-linear-gradient(90deg, rgba(255,255,255,0) 0 7px, rgba(255,255,255,.035) 7px 8px);
    color: var(--ink);
    padding: 60px 20px;
    text-align: center;
    border-bottom: 1px solid var(--border-1);
}

    .hero h1[b-rpkdde6qob] {
        color: var(--ink);
        font-size: 3rem;
        margin-bottom: 10px;
    }

    .hero .subtitle[b-rpkdde6qob] {
        color: var(--muted);
        font-size: 1.25rem;
        margin-bottom: 20px;
    }




/* =========================
   MEGA MENU & FEATURE CARDS
   ========================= */
.dropdown.cards-dropdown[b-rpkdde6qob] {
    position: static;
}

.dropdown-full-wrapper[b-rpkdde6qob] {
    position: fixed !important;
    top: var(--nav-height) !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    max-width: none !important;
    transform: none !important;
    z-index: 5000;
    display: none;
}

.cards-dropdown:hover .dropdown-full-wrapper[b-rpkdde6qob],
.cards-dropdown:focus-within .dropdown-full-wrapper[b-rpkdde6qob] {
    display: block;
}

.dropdown-content[b-rpkdde6qob] {
    width: 100%;
    max-width: none;
    margin: 0;
    padding-inline: var(--megamenu-gutter);
    display: grid;
    grid-template-columns: repeat(6, minmax(180px,1fr));
    gap: 16px;
}

@supports not (zoom:1) {
    .dropdown-full-wrapper[b-rpkdde6qob] {
        top: calc(var(--nav-height) * var(--page-scale)) !important;
        left: 0 !important;
        right: auto !important;
        width: calc(100dvw * var(--page-scale)) !important;
        transform: scale(calc(1 / var(--page-scale))) !important;
        transform-origin: top left !important;
    }
}

/* ensure hero-outer sits below dropdown */
.hero-outer[b-rpkdde6qob] {
    position: relative;
    z-index: 0;
}

    .hero-outer[b-rpkdde6qob]::before {
        z-index: -1;
    }

/* =========================
   FEATURE CARDS & MODULE TILES
   ========================= */
.feature-card[b-rpkdde6qob] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 100%;
    padding: clamp(16px, 2.2vw, 24px);
    border: 1px solid var(--feature-border);
    border-radius: var(--feature-radius);
    background: #fff;
    text-decoration: none;
    color: var(--feature-text);
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

    .feature-card > i[b-rpkdde6qob] {
        font-size: clamp(20px,2.2vw,24px);
        color: var(--feature-accent);
        opacity: .95;
    }

    .feature-card h2[b-rpkdde6qob] {
        margin: 0;
        font-size: clamp(18px,1.6vw,22px);
        line-height: 1.25;
        font-weight: 800;
        letter-spacing: .2px;
        color: var(--feature-text);
    }

    .feature-card p[b-rpkdde6qob] {
        margin: 0;
        font-size: clamp(13px,1.2vw,14.5px);
        line-height: 1.45;
        color: var(--feature-muted);
    }

    .feature-card:hover[b-rpkdde6qob] {
        transform: translateY(-4px);
        box-shadow: 0 10px 24px rgba(0,0,0,.10);
        border-color: color-mix(in oklab, var(--feature-accent) 35%, #ffffff);
    }

    .feature-card:focus-visible[b-rpkdde6qob] {
        outline: 0;
        box-shadow: 0 0 0 3px color-mix(in oklab, var(--feature-accent) 30%, transparent), 0 10px 24px rgba(0,0,0,.12);
    }

    .feature-card:active[b-rpkdde6qob] {
        transform: translateY(-1px);
        box-shadow: 0 6px 16px rgba(0,0,0,.10);
    }

@media (min-width:1200px) {
    .feature-card.feature-card--wide[b-rpkdde6qob] {
        grid-column: span 2;
    }
}

@media (max-width:768px) {
    .feature-card[b-rpkdde6qob] {
        padding: 14px;
    }

        .feature-card h2[b-rpkdde6qob] {
            font-size: 18px;
        }

        .feature-card p[b-rpkdde6qob] {
            font-size: 13px;
        }
}

@media (prefers-reduced-motion:reduce) {
    .feature-card[b-rpkdde6qob] {
        transition: none;
    }
}

/* Silver features band */
.features-section[b-rpkdde6qob] {
    padding: 40px 20px;
    text-align: center;
    background: var(--bg-app);
    border-top: 1px solid var(--border-1);
    border-bottom: 1px solid var(--border-1);
}

    .features-section h2[b-rpkdde6qob] {
        color: var(--ink);
        margin-bottom: 10px;
    }

/* Module tile grid */
.modules-grid[b-rpkdde6qob] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
    gap: 20px;
    padding: 20px 0;
}

.module-card[b-rpkdde6qob] {
    background: linear-gradient(#ffffff, #f6f7fa);
    border: 1px solid var(--border-2);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: background .15s, border-color .15s, box-shadow .15s, transform .08s;
    box-shadow: 0 1px 0 #fff inset, 0 1px 2px rgba(0,0,0,.04);
}

    .module-card:hover[b-rpkdde6qob] {
        background: linear-gradient(#f9fafc, #ecf0f6);
        border-color: #bdc3cc;
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(0,0,0,.10);
    }

    .module-card.is-active[b-rpkdde6qob] {
        border-color: var(--accent-strong);
        box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-strong) 60%, white 40%) inset, 0 0 10px var(--accent-strong);
        transform: translateY(-1px);
        animation: glow-pop-b-rpkdde6qob .25s ease-out;
    }

.module-icon[b-rpkdde6qob] {
    font-size: 48px;
    margin-bottom: 10px;
    color: var(--ink);
}

.module-card h3[b-rpkdde6qob] {
    color: var(--ink);
    margin-top: 0;
}

.module-card p[b-rpkdde6qob] {
    color: var(--muted);
    font-size: .95rem;
}

/* About & footer */
.about-section[b-rpkdde6qob] {
    padding: 40px 20px;
    background: var(--bg-panel);
    text-align: center;
    border-top: 1px solid var(--border-1);
}

    .about-section h2[b-rpkdde6qob] {
        color: var(--ink);
        margin-bottom: 10px;
    }

    .about-section p[b-rpkdde6qob] {
        max-width: 700px;
        margin: 0 auto;
        color: var(--muted);
        line-height: 1.5;
    }

.site-footer[b-rpkdde6qob] {
    text-align: center;
    padding: 1rem;
    font-size: 0.9rem;
    color: #777;
    background-color: #f8f9fa;
    border-top: 1px solid #e1e1e1;
}


/* =========================
   BRAND PRIMARY BUTTONS
   ========================= */
.cta-button[b-rpkdde6qob],
.login-button[b-rpkdde6qob],
.register-button[b-rpkdde6qob] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(var(--brand-start), var(--brand-end));
    color: var(--brand-text);
    border: 1px solid var(--brand-border);
    padding: 10px 20px;
    border-radius: 10px;
    font-weight: 800;
    cursor: pointer;
    transition: background .15s, border-color .15s, box-shadow .15s, transform .08s, filter .15s;
    box-shadow: 0 1px 0 #fff inset, 0 10px 22px rgba(46,60,82,.08);
}

    .cta-button:hover[b-rpkdde6qob],
    .login-button:hover[b-rpkdde6qob],
    .register-button:hover[b-rpkdde6qob] {
        transform: translateY(-1px);
        box-shadow: 0 1px 0 #fff inset, 0 14px 28px rgba(46,60,82,.12);
        filter: brightness(1.03);
    }

    .cta-button:active[b-rpkdde6qob],
    .login-button:active[b-rpkdde6qob],
    .register-button:active[b-rpkdde6qob] {
        transform: translateY(0);
    }

    .cta-button:focus-visible[b-rpkdde6qob],
    .login-button:focus-visible[b-rpkdde6qob],
    .register-button:focus-visible[b-rpkdde6qob] {
        outline: none;
        box-shadow: 0 0 0 1px #fff inset, 0 0 0 2px var(--brand-border), 0 0 14px color-mix(in srgb, var(--brand-border) 60%, transparent);
    }

    .cta-button.is-active[b-rpkdde6qob],
    .login-button.is-active[b-rpkdde6qob],
    .register-button.is-active[b-rpkdde6qob] {
        animation: glow-pop-b-rpkdde6qob .25s ease-out;
    }



/*
    this datalist form thead popup*/

/* Buttons */
/* ========= THEME HOOKS ========= */


/* ========= OVERLAY (render-driven; if it's in DOM, it's open) ========= */
.modal-overlay[b-rpkdde6qob] {
    position: fixed;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 4vh 2vw;
    overflow: auto;
    background: radial-gradient(40% 50% at 50% 40%, color-mix(in srgb, var(--brand-1) 12%, transparent) 0%, transparent 70%), rgba(0,0,0,.32);
    backdrop-filter: blur(2px);
    z-index: 3000;
    animation: fadeIn-b-rpkdde6qob var(--trans) both;
}

@keyframes fadeIn-b-rpkdde6qob {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

/* ========= PANEL ========= */
/* --- Modal visibility safety overrides (place LAST) --- */

/* Panel should be visible by default */
.modal-content[b-rpkdde6qob] {
    opacity: 1 !important;
    transform: none !important;
    background: var(--panel, #fff) !important;
    border: 1px solid var(--border, #e5e7eb) !important;
}

/* Only animate when motion is allowed */
@media (prefers-reduced-motion: no-preference) {
    .modal-overlay .modal-content[b-rpkdde6qob] {
        animation: popIn var(--trans, 220ms) .04s both;
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

/* If any old stylesheet had `display:none` on overlays, neutralize it */
.modal-overlay[b-rpkdde6qob] {
    display: flex !important;
}


/* Respect OS reduced motion */
@media (prefers-reduced-motion: reduce) {

    .modal-content[b-rpkdde6qob] {
        animation: none !important;
    }

    .modal-content[b-rpkdde6qob] {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ========= SECTIONS ========= */
.modal-header[b-rpkdde6qob] {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    background: linear-gradient(#fff,#fafcff);
    border-bottom: 1px solid var(--border);
    color: var(--ink);
}

.modal-body[b-rpkdde6qob] {
    padding: 16px 18px;
    overflow: auto;
    max-height: 100%;
    background: linear-gradient(#fff,#fff), linear-gradient(#f9fafb,#f9fafb);
    background-clip: padding-box, border-box;
    scrollbar-width: thin;
}

.modal-footer[b-rpkdde6qob] {
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    background: #fff;
    border-top: 1px solid var(--border);
}

/* ========= BUTTONS ========= */
.btn[b-rpkdde6qob] {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .55rem .95rem;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    font-weight: 600;
    transition: filter .15s, box-shadow .15s, border-color .15s, background-color .15s;
    color: var(--ink);
    background: #fff;
}

    .btn.primary[b-rpkdde6qob] {
        background: linear-gradient(180deg, var(--brand-1), var(--brand-2));
        color: #fff;
        border: none;
        box-shadow: 0 3px 4px rgba(0,0,0,.12);
    }

    .btn.secondary[b-rpkdde6qob] {
        background: #fff;
        color: var(--brand-2);
        border: 1px solid var(--brand-2);
    }

    .btn.ghost[b-rpkdde6qob] {
        background: transparent;
        border-color: transparent;
        color: var(--muted);
    }

    .btn.delete[b-rpkdde6qob], .btn.danger[b-rpkdde6qob] {
        background: var(--danger);
        color: #fff;
        border: none;
    }

    .btn:hover[b-rpkdde6qob] {
        filter: brightness(.98);
    }

    .btn:focus-visible[b-rpkdde6qob] {
        outline: none;
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-1) 25%, transparent);
    }

/* ========= WIZARD FEEL ========= */
.actions-right > .btn + .btn[b-rpkdde6qob] {
    margin-left: .5rem;
}

.step-badge[b-rpkdde6qob] {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--brand-1);
    color: #fff;
    font-size: .9rem;
    margin-right: .5rem;
}

/* ========= FORMS ========= */
.form-grid[b-rpkdde6qob] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 14px;
}

    .form-grid .span-2[b-rpkdde6qob] {
        grid-column: 1 / -1;
    }

label[b-rpkdde6qob] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: .9rem;
    color: var(--ink);
}

input[b-rpkdde6qob], select[b-rpkdde6qob], textarea[b-rpkdde6qob] {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: .6rem .7rem;
    font-size: .95rem;
    outline: none;
    background: #fff;
    color: var(--ink);
    transition: border var(--trans), box-shadow var(--trans);
}

    input:focus[b-rpkdde6qob], select:focus[b-rpkdde6qob], textarea:focus[b-rpkdde6qob] {
        border-color: var(--brand-1);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-1) 22%, transparent);
    }

/* ========= WAREHOUSE LIST & PROMPT ========= */
.warehouse-list[b-rpkdde6qob] {
    list-style: none;
    padding: 0;
    margin: 0 0 12px;
    display: grid;
    gap: 10px;
}

    .warehouse-list li[b-rpkdde6qob] {
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 10px 12px;
        background: #fff;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

.wh-name[b-rpkdde6qob] {
    font-weight: 700;
    color: var(--ink);
}

.wh-meta[b-rpkdde6qob] {
    color: var(--muted);
    font-size: .9rem;
}

.prompt-add[b-rpkdde6qob] {
    margin-top: 12px;
    padding: 12px;
    background: #f7fafc;
    border: 1px dashed var(--border);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.prompt-actions .btn[b-rpkdde6qob] {
    padding: .45rem .75rem;
}

/* ========= COLLAPSE (add-warehouse section) ========= */
.collapse[b-rpkdde6qob] {
    height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-6px);
    transition: height var(--trans), opacity var(--trans), transform var(--trans);
}

    .collapse.show[b-rpkdde6qob] {
        height: auto;
        opacity: 1;
        transform: translateY(0);
    }

/* ========= RESPONSIVE ========= */
@media (max-width: 640px) {
    .form-grid[b-rpkdde6qob] {
        grid-template-columns: 1fr;
    }

    .modal-content[b-rpkdde6qob], .modal-content.large[b-rpkdde6qob] {
        width: 96vw;
    }
}

.features-grid[b-rpkdde6qob] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    margin-top: 30px;
}

.feature-card[b-rpkdde6qob] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    font-size: 1rem;
}

.download-icon[b-rpkdde6qob] {
    background: #333;
    color: #fff;
    padding: 8px 10px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, transform 0.2s ease;
    font-size: 1.1rem;
}

    .download-icon:hover[b-rpkdde6qob] {
        background: #8B1E1E;
        transform: translateY(2px);
    }

.kitenge-strip[b-rpkdde6qob] {
    margin: 20px auto; /* top/bottom 20px, centered horizontally */
    width: 70%;
    height: 100px; /* or auto with min-height */
    background-image: url('/images/full.jpeg');
    background-size: cover; /* fills while keeping aspect ratio */
    background-position: center;
    background-repeat: no-repeat;
}

.offers-section[b-rpkdde6qob] {
    padding: 60px 20px;
    background-color: #f9f9f9;
    text-align: center;
}

.section-title[b-rpkdde6qob] {
    font-size: 2.2rem;
    font-weight: bold;
    margin-bottom: 40px;
    color: #333;
}

/* Grid layout for cards */
.offers-grid[b-rpkdde6qob] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

/* Card styling */
.offers-card[b-rpkdde6qob] {
    background: #fff;
    border-radius: 12px;
    padding: 25px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    .offers-card:hover[b-rpkdde6qob] {
        transform: translateY(-5px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    }

.plan-title[b-rpkdde6qob] {
    font-size: 1.4rem;
    margin-bottom: 15px;
    color: #333;
    font-weight: 600;
    border-bottom: 2px solid #eee;
    padding-bottom: 8px;
}

.plan-features[b-rpkdde6qob] {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

    .plan-features li[b-rpkdde6qob] {
        padding: 8px 0;
        font-size: 0.95rem;
        color: #000;
        display: flex;
        align-items: center;
    }

        .plan-features li[b-rpkdde6qob]::before {
            content: "✓";
            color: #333;
            margin-right: 8px;
            font-weight: bold;
        }

        .plan-features li.unavailable[b-rpkdde6qob]::before {
            content: "✗";
        }

.partners-section[b-rpkdde6qob] {
    padding: 60px 20px;
    background-color: #f9f9f9;
    text-align: center;
}

.partners-grid[b-rpkdde6qob] {
    display: flex;
    justify-content: center;
    gap: 40px;
    flex-wrap: wrap;
    margin-top: 40px;
}

.partner-card[b-rpkdde6qob] {
    background: #fff;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    max-width: 300px;
    text-align: center;
}

    .partner-card img[b-rpkdde6qob] {
        max-width: 180px;
        max-height: 100px;
        object-fit: contain;
        margin-bottom: 15px;
    }

    .partner-card h3[b-rpkdde6qob] {
        font-size: 1.3rem;
        color: #000;
        margin-bottom: 10px;
    }

    .partner-card p[b-rpkdde6qob] {
        font-size: 0.95rem;
        color: #555;
    }
/* _content/AfriERP/Pages/IndexDash.razor.rz.scp.css */
/* ===== Silver theme tokens (match ribbon) ===== */
:root[b-9nbhjtr8w6] {
    --silver-1: #f8f8f9;
    --silver-2: #ebebee;
    --silver-3: #e8e8ec;
    --silver-4: #d9d9de;
    --silver-5: #cfcfd4;
    --ink-1: #2e2e2e;
    --ink-2: #4f4f4f;
    --ink-3: #6d6d72;
}

/* --- Top Bar (silver) --- */
.topbar[b-9nbhjtr8w6] {
    background: linear-gradient(var(--silver-1), var(--silver-2));
    color: var(--ink-1);
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--silver-5);
}

.search-input[b-9nbhjtr8w6] {
    width: 300px;
    padding: 6px 10px;
    border: 1px solid var(--silver-5);
    border-radius: 6px;
    background: #fff;
    color: var(--ink-2);
}

.user-menu .user-btn[b-9nbhjtr8w6] {
    background: #fff;
    color: var(--ink-1);
    border: 1px solid var(--silver-5);
    padding: 6px 12px;
    border-radius: 6px;
}

/* --- Tab Bar (neutral) --- */
.tab-bar[b-9nbhjtr8w6] {
    display: flex;
    gap: 15px;
    padding: 10px 20px;
    background: linear-gradient(var(--silver-1), var(--silver-2));
    border-bottom: 1px solid var(--silver-5);
}

.tab[b-9nbhjtr8w6] {
    background: transparent;
    border: none;
    font-weight: 700;
    padding: 6px 12px;
    cursor: pointer;
    color: var(--ink-2);
}

    .tab:hover[b-9nbhjtr8w6] {
        color: var(--ink-1);
    }

    .tab.active[b-9nbhjtr8w6] {
        border-bottom: 2px solid var(--ink-3);
        color: var(--ink-1);
    }

/* --- Tiles grid (replace blue card with silver card) --- */
.erp-grid[b-9nbhjtr8w6] {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px;
}

.erp-tile[b-9nbhjtr8w6] {
    width: 160px;
    height: 120px;
    text-align: center;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--ink-1);
    background: linear-gradient(#fdfdfd, #f3f3f6);
    border: 1px solid var(--silver-5);
    border-radius: 10px;
    box-shadow: 0 1px 0 #fff inset, 0 2px 6px rgba(0,0,0,.06);
    transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}

    .erp-tile:hover[b-9nbhjtr8w6] {
        transform: translateY(-2px);
        background: #fff;
        border-color: #bfc2c7;
        box-shadow: 0 0 0 1px rgba(0,0,0,.04) inset, 0 12px 24px rgba(0,0,0,.10);
    }

    .erp-tile i[b-9nbhjtr8w6] {
        font-size: 28px;
        margin-bottom: 10px;
        color: #555;
    }

    .erp-tile .label[b-9nbhjtr8w6] {
        font-size: 14px;
        font-weight: 600;
    }

/* Preserve link look on tiles */
a.erp-tile-link[b-9nbhjtr8w6], a.erp-tile-link:visited[b-9nbhjtr8w6], a.erp-tile-link:hover[b-9nbhjtr8w6], a.erp-tile-link:active[b-9nbhjtr8w6] {
    text-decoration: none;
    color: inherit;
}

/* --- Modal (silver) --- */
.modal-overlay[b-9nbhjtr8w6] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
}

.modal-content[b-9nbhjtr8w6] {
    position: relative;
    background: #fff;
    padding: 30px;
    width: 320px;
    text-align: center;
    border-radius: 10px;
    border: 1px solid var(--silver-5);
    box-shadow: 0 12px 28px rgba(0,0,0,.18);
    animation: fadeIn-b-9nbhjtr8w6 .4s ease;
}

    .modal-content h4[b-9nbhjtr8w6] {
        font-size: 20px;
        margin-bottom: 15px;
        color: var(--ink-1);
    }

    .modal-content p[b-9nbhjtr8w6] {
        font-size: 14px;
        margin-bottom: 20px;
        color: var(--ink-3);
    }

    .modal-content .btn[b-9nbhjtr8w6] {
        background: linear-gradient(var(--silver-1), var(--silver-2));
        color: var(--ink-1);
        border: 1px solid var(--silver-5);
        padding: 8px 16px;
        border-radius: 8px;
        cursor: pointer;
        margin: 0 8px;
        transition: background .15s ease, box-shadow .15s ease, transform .08s ease;
    }

        .modal-content .btn:hover[b-9nbhjtr8w6] {
            background: #ececef;
            transform: translateY(-1px);
            box-shadow: 0 8px 18px rgba(0,0,0,.08);
        }

    .modal-content .btn-close[b-9nbhjtr8w6] {
        background: #e1e1e6;
    }

.modal-close[b-9nbhjtr8w6] {
    position: absolute;
    top: 10px;
    right: 12px;
    background: transparent;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: #999;
}

    .modal-close:hover[b-9nbhjtr8w6] {
        color: #cc3b3b;
    }

/* Animation */
@keyframes fadeIn-b-9nbhjtr8w6 {
    from {
        transform: scale(.98);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}
/* _content/AfriERP/Pages/Indextest.razor.rz.scp.css */
/* ==============================
   Silver / Metallic Theme Tokens
   ============================== */
:root[b-r7woa24dhs] {
    --silver-0: #ffffff;
    --silver-1: #f8f8fa;
    --silver-2: #f3f4f6;
    --silver-3: #ebedf0;
    --silver-4: #dfe2e7;
    --silver-5: #cfd3db;
    --ink-1: #2e2e2e;
    --ink-2: #4f4f4f;
    --muted: #7a7a7a;
    --accent: #8ea3b4; /* neutral steel-blue hint */
    --focus: #5fa3e6; /* focus ring */
    --glow: rgba(120,130,150,.38); /* soft metallic glow */
    --glow-ring: rgba(170,180,195,.28);
    /* fixed var name (was -tile-border) */
    --tile-border: color-mix(in srgb, var(--silver-5) 70%, #7f8a99 30%);
    --tile-border-soft: color-mix(in srgb, var(--silver-4) 70%, white 30%);
    --tile-border-hover: color-mix(in srgb, var(--silver-5) 55%, var(--accent) 45%);
}

/* ==============================
   Base
   ============================== */
html[b-r7woa24dhs], body[b-r7woa24dhs] {
    height: 100%;
}

/* Base */
body[b-r7woa24dhs] {
    font-family: 'Segoe UI', sans-serif;
    background-color: whitesmoke; /* page background */
    color: var(--ink-1);
    margin: 0;
}

/* Top Bar - metallic touch */
.topbar[b-r7woa24dhs] {
    background: linear-gradient(#f5f6f7, #eceff1); /* metallic gradient */
    color: var(--ink-1);
    padding: 10px 20px;
    display: flex;
    gap: 12px;
    align-items: center;
    border-bottom: 1px solid var(--tile-border);
    box-shadow: 0 0 0 1px var(--tile-border-soft), 0 1px 3px rgba(16,24,40,0.05), 0 4px 10px rgba(200,200,200,0.25); /* soft shadow for depth */
}


    .topbar .brand[b-r7woa24dhs] {
        font-weight: 800;
        font-size: 20px;
    }

/* Search */
.search-input[b-r7woa24dhs] {
    flex: 1 1 600px;
    display: flex;
    gap: 8px;
    align-items: center;
    position: relative;
    max-width: 680px;
    margin: 0 auto;
}

    .search-input .search-icon[b-r7woa24dhs] {
        position: absolute;
        left: 12px;
        font-size: 14px;
        color: var(--muted);
    }

    .search-input input[type="text"][b-r7woa24dhs] {
        width: 100%;
        padding: 10px 14px 10px 34px;
        border: 1px solid var(--silver-4);
        border-radius: 8px;
        font-size: .95rem;
        background-color: var(--silver-0);
        transition: border-color .15s ease, box-shadow .15s ease;
    }

        .search-input input[type="text"]:focus[b-r7woa24dhs] {
            outline: none;
            border-color: var(--silver-5);
            box-shadow: 0 0 0 3px rgba(95,163,230,.15);
        }

/* User dropdown */
.user-dropdown[b-r7woa24dhs] {
    position: relative;
}

.user-btn[b-r7woa24dhs],
.user-menu .user-btn[b-r7woa24dhs] {
    background: linear-gradient(var(--silver-0), var(--silver-2));
    color: var(--ink-1);
    border: 1px solid var(--silver-5);
    padding: 6px 12px;
    border-radius: 8px;
    box-shadow: 0 1px 0 #fff inset;
    cursor: pointer;
}

.user-dropdown-menu[b-r7woa24dhs] {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    min-width: 240px;
    background: var(--silver-0);
    border: 1px solid var(--silver-5);
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0 12px 28px var(--glow);
    z-index: 1000;
}

    .user-dropdown-menu a[b-r7woa24dhs] {
        display: block;
        padding: 8px 10px;
        text-decoration: none;
        color: var(--ink-1);
        border-radius: 6px;
    }

        .user-dropdown-menu a:hover[b-r7woa24dhs] {
            background: var(--silver-2);
        }

    .user-dropdown-menu hr[b-r7woa24dhs] {
        border: 0;
        border-top: 1px solid var(--silver-3);
        margin: 8px 0;
    }

    .user-dropdown-menu .user-info[b-r7woa24dhs] {
        color: var(--ink-2);
    }

/* ==============================
   Dashboard layout
   ============================== */
.weclapp-dashboard[b-r7woa24dhs] {
    padding: 2rem;
}

.dashboard-flex[b-r7woa24dhs] {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
    flex-wrap: wrap;
}

.dashboard-left[b-r7woa24dhs] {
    flex: 0 0 40%;
    min-width: 300px;
}

.dashboard-right[b-r7woa24dhs] {
    flex: 1;
    min-width: 400px;
}

.modules-header[b-r7woa24dhs] {
    padding-bottom: 6px;
    border-bottom: 2px solid var(--silver-4);
    margin-bottom: 12px;
    font-weight: 700;
    color: var(--ink-1);
}

/* Metallic topbar */
.metallic-topbar[b-r7woa24dhs] {
    background: linear-gradient(#f5f6f7, #eceff1);
    border-bottom: 1px solid var(--tile-border);
    box-shadow: 0 0 0 1px var(--tile-border-soft), 0 4px 8px rgba(200,200,200,.25);
}

/* Section title colors */
.section-welcome[b-r7woa24dhs] {
    color: #3a83d6;
    border-color: #3a83d6;
}

.section-yourteam[b-r7woa24dhs] {
    color: #3da35a;
    border-color: #3da35a;
}

.section-currentactivities[b-r7woa24dhs] {
    color: #d47f0b;
    border-color: #d47f0b;
}

.section-availablemodules[b-r7woa24dhs] {
    color: #7a5af8;
    border-color: #7a5af8;
}

/* Module icon colors */
.erp-tile.mod-finance[b-r7woa24dhs] {
    color: #d4a70b;
}

.erp-tile.mod-procurement[b-r7woa24dhs] {
    color: #1aa3a3;
}

.erp-tile.mod-inventory[b-r7woa24dhs] {
    color: #7a5af8;
}

.erp-tile.mod-warehouse[b-r7woa24dhs] {
    color: #91643b;
}

.erp-tile.mod-crm[b-r7woa24dhs] {
    color: #e2558f;
}

.erp-tile.mod-hr[b-r7woa24dhs] {
    color: #3a83d6;
}

.erp-tile.mod-waste[b-r7woa24dhs] {
    color: #3da35a;
}

.erp-tile.mod-helpdesk[b-r7woa24dhs] {
    color: #00a1c6;
}

.erp-tile.mod-admin[b-r7woa24dhs] {
    color: #8a8f98;
}

.erp-tile.mod-assets[b-r7woa24dhs] {
    color: #b06f2a;
}

/* Keep the icons inheriting tile color */
.erp-tile i[b-r7woa24dhs] {
    color: currentColor;
}
/* ==============================
   Tiles (Shared)
   ============================== */
.tile-wrapper[b-r7woa24dhs] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 2rem;
}

/* Base tile style - soft grey metallic */
.tile-card[b-r7woa24dhs],
.erp-tile[b-r7woa24dhs],
.help-tile[b-r7woa24dhs] {
    position: relative; /* sheen layer */
    background: linear-gradient(#f5f6f7, #eceff1); /* softer grey */
    border: 1.25px solid var(--tile-border);
    border-radius: 12px;
    box-shadow: 0 0 0 1px var(--tile-border-soft), 0 1px 0 #fff inset, 0 1px 3px rgba(16,24,40,.05);
    transition: transform .2s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
}

    /* Gentle grey glow on hover */
    .tile-card:hover[b-r7woa24dhs],
    .erp-tile:hover[b-r7woa24dhs],
    .help-tile:hover[b-r7woa24dhs] {
        border-color: var(--tile-border-hover);
        background: linear-gradient(#f9f9fa, #f1f3f5);
        box-shadow: 0 0 0 1px var(--tile-border-hover), 0 0 14px rgba(180,180,180,.45), /* soft outer grey halo */
        0 10px 22px var(--glow), 0 0 18px var(--glow-ring);
        transform: translateY(-2px);
    }

    /* Focus state keeps glow + accessible ring */
    .tile-card:focus-visible[b-r7woa24dhs],
    .erp-tile:focus-visible[b-r7woa24dhs],
    .help-tile:focus-visible[b-r7woa24dhs] {
        outline: none;
        box-shadow: 0 0 0 2px rgba(95,163,230,.35), 0 0 0 1px var(--tile-border-hover), 0 10px 22px var(--glow), 0 0 18px var(--glow-ring);
        transform: translateY(-2px);
    }

    /* Active = subtle press */
    .tile-card:active[b-r7woa24dhs],
    .erp-tile:active[b-r7woa24dhs],
    .help-tile:active[b-r7woa24dhs] {
        transform: translateY(0) scale(.995);
    }

    /* Sheen */
    .tile-card[b-r7woa24dhs]::after,
    .erp-tile[b-r7woa24dhs]::after,
    .help-tile[b-r7woa24dhs]::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        pointer-events: none;
        background: radial-gradient(60% 40% at 18% 0%, rgba(255,255,255,.28), rgba(255,255,255,0) 60%);
        opacity: 0;
        transition: opacity .25s ease;
    }

    .tile-card:hover[b-r7woa24dhs]::after,
    .erp-tile:hover[b-r7woa24dhs]::after,
    .help-tile:hover[b-r7woa24dhs]::after {
        opacity: .45;
    }

/* Tile internals */
.tile-card[b-r7woa24dhs] {
    padding: 1rem;
    cursor: pointer;
}

    .tile-card i[b-r7woa24dhs] {
        display: block;
        font-size: 1.4rem;
        margin-bottom: .5rem;
        color: var(--accent);
    }

.erp-tile[b-r7woa24dhs] {
    padding: 1.2rem;
    text-align: center;
    cursor: pointer;
}

    .erp-tile i[b-r7woa24dhs] {
        font-size: 1.8rem;
        color: var(--accent);
        margin-bottom: .5rem;
        display: block;
    }

    .erp-tile .label[b-r7woa24dhs] {
        font-weight: 700;
        font-size: .95rem;
        color: var(--ink-2);
    }

.help-grid[b-r7woa24dhs] {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 1rem;
}

.help-tile[b-r7woa24dhs] {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .8rem;
}

    .help-tile.full[b-r7woa24dhs] {
        grid-column: span 2;
    }

/* ==============================
   ERP grid
   ============================== */
.erp-grid[b-r7woa24dhs] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.erp-tile-link[b-r7woa24dhs] {
    text-decoration: none;
    color: inherit;
}

/* ==============================
   Team / Tables / Buttons
   ============================== */
.team-note[b-r7woa24dhs] {
    font-size: .9rem;
    color: var(--muted);
    margin-bottom: 1rem;
}

    .team-note a[b-r7woa24dhs] {
        color: #3a6ea5;
        text-decoration: none;
    }

        .team-note a:hover[b-r7woa24dhs] {
            text-decoration: underline;
        }

.team-table[b-r7woa24dhs] {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
    background: var(--silver-0);
    border: 1px solid var(--silver-4);
    border-radius: 8px;
    overflow: hidden;
}

    .team-table th[b-r7woa24dhs], .team-table td[b-r7woa24dhs] {
        border-bottom: 1px solid var(--silver-3);
        padding: .6rem .75rem;
        text-align: left;
    }

    .team-table th[b-r7woa24dhs] {
        background: linear-gradient(var(--silver-2), var(--silver-3));
        color: var(--ink-2);
        font-weight: 700;
    }

.team-actions[b-r7woa24dhs] {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1rem;
}

.btn[b-r7woa24dhs] {
    padding: .5rem 1rem;
    border-radius: 8px;
    font-size: .9rem;
    cursor: pointer;
    border: 1px solid var(--silver-5);
    background: linear-gradient(var(--silver-0), var(--silver-2));
    color: var(--ink-1);
    box-shadow: 0 1px 0 #fff inset;
    transition: transform .08s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}

    .btn:hover[b-r7woa24dhs] {
        background: linear-gradient(var(--silver-0), var(--silver-1));
        box-shadow: 0 8px 18px var(--glow);
        transform: translateY(-1px);
    }

    .btn:focus-visible[b-r7woa24dhs] {
        outline: none;
        box-shadow: 0 0 0 2px rgba(95,163,230,.45);
    }

    .btn:active[b-r7woa24dhs] {
        transform: translateY(0) scale(.995);
    }

    .btn.success[b-r7woa24dhs] {
        border-color: var(--silver-5);
        background: linear-gradient(#e9fbf2, #e0f5ec);
        color: #205d3f;
    }

    .btn.primary[b-r7woa24dhs] {
        border-color: var(--silver-5);
        background: linear-gradient(#ecf3fb, #e6eef8);
        color: #1e4e82;
    }

    .btn.outline[b-r7woa24dhs] {
        background: transparent;
        border: 1px solid var(--silver-5);
        color: var(--ink-2);
    }

/* ==============================
   Activity box
   ============================== */
.activity-box[b-r7woa24dhs] {
    display: flex;
    align-items: center;
    background: linear-gradient(var(--silver-0), var(--silver-2));
    padding: 1rem;
    border: 1px solid var(--silver-4);
    border-radius: 10px;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 0 #fff inset;
}

.avatar[b-r7woa24dhs] {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #dde5ec, #bec7d0);
    border: 1px solid var(--silver-5);
    color: #2d4050;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    margin-right: 1rem;
}

.activity-content[b-r7woa24dhs] {
    flex: 1;
}

    .activity-content a[b-r7woa24dhs] {
        color: #2f6aa3;
        text-decoration: none;
    }

        .activity-content a:hover[b-r7woa24dhs] {
            text-decoration: underline;
        }

.badge[b-r7woa24dhs] {
    background: linear-gradient(var(--silver-2), var(--silver-3));
    padding: .3rem .6rem;
    border-radius: 999px;
    font-size: .8rem;
    border: 1px solid var(--silver-5);
    color: var(--ink-2);
}

.timestamp[b-r7woa24dhs] {
    font-size: .85rem;
    color: #888;
}

/* ==============================
   Modal
   ============================== */
.modal-backdrop[b-r7woa24dhs] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal-content[b-r7woa24dhs] {
    background: linear-gradient(var(--silver-0), var(--silver-2));
    border: 1px solid var(--silver-5);
    border-radius: 12px;
    padding: 1.5rem;
    width: 520px;
    max-width: 90%;
    box-shadow: 0 18px 40px rgba(0,0,0,.18), 0 1px 0 #fff inset;
    position: relative;
    animation: fadeIn-b-r7woa24dhs .2s ease-in-out;
}

.modal-header[b-r7woa24dhs] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
    font-size: 1.05rem;
    margin-bottom: 1rem;
    color: var(--ink-1);
    border-bottom: 1px solid var(--silver-4);
    padding-bottom: .5rem;
}

.modal-body[b-r7woa24dhs] {
    font-size: .95rem;
    color: var(--ink-2);
}

.close-btn[b-r7woa24dhs] {
    background: transparent;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    color: var(--muted);
}

    .close-btn:hover[b-r7woa24dhs] {
        color: #b24b4b;
    }

@keyframes fadeIn-b-r7woa24dhs {
    from {
        opacity: 0;
        transform: scale(.98);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ==============================
   Responsive + motion
   ============================== */
@media (max-width: 992px) {
    .dashboard-flex[b-r7woa24dhs] {
        flex-direction: column;
    }

    .dashboard-left[b-r7woa24dhs], .dashboard-right[b-r7woa24dhs] {
        width: 100%;
    }

    .tile-wrapper[b-r7woa24dhs] {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tile-card[b-r7woa24dhs], .erp-tile[b-r7woa24dhs], .help-tile[b-r7woa24dhs], .btn[b-r7woa24dhs] {
        transition: none;
    }

        .tile-card:hover[b-r7woa24dhs], .erp-tile:hover[b-r7woa24dhs], .help-tile:hover[b-r7woa24dhs] {
            transform: none;
        }
}
/* Use the tile's text color for the icon */
.erp-tile i[b-r7woa24dhs] {
    color: currentColor;
    transition: filter .2s ease, transform .2s ease;
}

/* Gentle pop on hover */
.erp-tile:hover i[b-r7woa24dhs] {
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.15));
    transform: translateY(-1px);
}

/* Per‑module icon colors */
.erp-tile.mod-finance[b-r7woa24dhs] {
    color: #d4a70b;
}
/* warm gold */
.erp-tile.mod-procurement[b-r7woa24dhs] {
    color: #1aa3a3;
}
/* teal */
.erp-tile.mod-inventory[b-r7woa24dhs] {
    color: #7a5af8;
}
/* soft purple */
.erp-tile.mod-warehouse[b-r7woa24dhs] {
    color: #91643b;
}
/* bronze */
.erp-tile.mod-crm[b-r7woa24dhs] {
    color: #e2558f;
}
/* pink rose */
.erp-tile.mod-hr[b-r7woa24dhs] {
    color: #3a83d6;
}
/* steel blue */
.erp-tile.mod-waste[b-r7woa24dhs] {
    color: #3da35a;
}
/* green */
.erp-tile.mod-helpdesk[b-r7woa24dhs] {
    color: #00a1c6;
}
/* cyan */
.erp-tile.mod-admin[b-r7woa24dhs] {
    color: #8a8f98;
}
/* neutral graphite */
.erp-tile.mod-assets[b-r7woa24dhs] {
    color: #b06f2a;
}
/* copper */

/* Optional: color the small table header icons too */
.team-table th i[b-r7woa24dhs] {
    color: #3a83d6;
}

/* Optional: gradient icons (apply .icon-gradient to <i> if you want fancy) */
.icon-gradient[b-r7woa24dhs] {
    background: linear-gradient(45deg, #7a5af8, #1aa3a3);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
/* _content/AfriERP/Pages/Inventory/ProductsSearch.razor.rz.scp.css */
.typeahead[b-smir3xwah4] {
    position: relative;
}

    .typeahead .typeahead-list[b-smir3xwah4] {
        position: absolute;
        z-index: 40;
        left: 0;
        right: 0;
        top: calc(100% + 2px);
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        max-height: 260px;
        overflow: auto;
        padding: 6px 0;
        margin: 0;
        list-style: none;
        box-shadow: 0 8px 20px rgba(0,0,0,.08);
    }

    .typeahead .typeahead-item[b-smir3xwah4] {
        padding: 8px 10px;
        cursor: pointer;
    }

        .typeahead .typeahead-item:hover[b-smir3xwah4],
        .typeahead .typeahead-item.active[b-smir3xwah4] {
            background: #f3f4f6;
        }
/* _content/AfriERP/Pages/LandingHome.razor.rz.scp.css */
.ns3[b-dgs8ra6hv3] {
    background: whitesmoke;
}

.ns3-topbar[b-dgs8ra6hv3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 18px;
    color: #2e3c52;
}

.ns3-title[b-dgs8ra6hv3] {
    font-weight: 800;
    font-size: 18px;
}

/* 3-column grid like NetSuite */
.ns3-grid[b-dgs8ra6hv3] {
    display: grid;
    grid-template-columns: 260px minmax(640px,1fr) 340px;
    gap: 14px;
    padding: 0 18px 18px;
}

/* Cards */
.ns3-card[b-dgs8ra6hv3] {
    background: #fff;
    border: 1px solid #e3e7ee;
    border-radius: 8px;
    box-shadow: 0 1px 1px rgba(16,24,40,.04);
}

.ns3-card-header[b-dgs8ra6hv3] {
    display: flex;
    justify-content: space-between;
    align-items: end;
    padding: 10px 12px;
    background: linear-gradient(#f7f9fc,#eef2f7);
    border-bottom: 1px solid #eef1f5;
}

    .ns3-card-header h5[b-dgs8ra6hv3],
    .ns3-card-header h6[b-dgs8ra6hv3] {
        margin: 0;
        font-weight: 700;
        color: #2e3c52;
    }

/* Left list */
.ns3-list[b-dgs8ra6hv3] {
    list-style: none;
    margin: 0;
    padding: 8px;
}

    .ns3-list li[b-dgs8ra6hv3] {
        margin: 4px 0;
    }

.ns3-link[b-dgs8ra6hv3] {
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #334155;
}

    .ns3-link:hover[b-dgs8ra6hv3] {
        background: #f3f6fb;
    }

.ns3-doc[b-dgs8ra6hv3] {
    width: 18px;
    text-align: center;
}

.ns3-ellip[b-dgs8ra6hv3] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ns3-empty[b-dgs8ra6hv3] {
    padding: 12px;
    color: #8b99ad;
}

/* Center shortcuts (top strip) */
.ns3-shortcuts[b-dgs8ra6hv3] {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 10px;
    padding: 12px;
}

.ns3-shortcut[b-dgs8ra6hv3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    border-radius: 8px;
    color: #203040;
    font-weight: 700;
    border: 1px solid #e1e6ef;
}

    .ns3-shortcut i[b-dgs8ra6hv3] {
        font-size: 20px;
    }

    .ns3-shortcut.bg1[b-dgs8ra6hv3] {
        background: #f2f7e6;
    }

    .ns3-shortcut.bg2[b-dgs8ra6hv3] {
        background: #e8f4ed;
    }

    .ns3-shortcut.bg3[b-dgs8ra6hv3] {
        background: #f6efe6;
    }

    .ns3-shortcut.bg4[b-dgs8ra6hv3] {
        background: #e9f1f8;
    }

/* KPI row */
.ns3-kpis[b-dgs8ra6hv3] {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 10px;
    padding: 12px;
}

.ns3-kpi[b-dgs8ra6hv3] {
    border: 1px solid #e1e6ef;
    border-radius: 8px;
    background: #fff;
    padding: 10px;
}

.ns3-kpi-title[b-dgs8ra6hv3] {
    color: #66758a;
    font-size: .9rem;
}

.ns3-kpi-value[b-dgs8ra6hv3] {
    font-weight: 800;
    font-size: 1.15rem;
    margin: .2rem 0;
    color: #2e3c52;
}

.ns3-kpi-trend[b-dgs8ra6hv3] {
    font-weight: 700;
}

    .ns3-kpi-trend.up[b-dgs8ra6hv3] {
        color: #2a9d4b;
    }

    .ns3-kpi-trend.down[b-dgs8ra6hv3] {
        color: #c44536;
    }

.ns3-spark[b-dgs8ra6hv3] {
    height: 28px;
    background: linear-gradient(180deg,#f8fafc,#eef2f7);
    border: 1px solid #e6ebf2;
    border-radius: 6px;
}

/* KPI table */
.ns3-table-wrap[b-dgs8ra6hv3] {
    padding: 0 12px 12px;
}

.ns3-table[b-dgs8ra6hv3] {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #e1e6ef;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

    .ns3-table th[b-dgs8ra6hv3],
    .ns3-table td[b-dgs8ra6hv3] {
        padding: .55rem .7rem;
        border-bottom: 1px solid #eef1f5;
        text-align: left;
    }

    .ns3-table th[b-dgs8ra6hv3] {
        background: linear-gradient(#f7f9fc,#eef2f7);
        color: #2e3c52;
        font-weight: 700;
    }

    .ns3-table .pos[b-dgs8ra6hv3] {
        color: #2a9d4b;
        font-weight: 700;
    }

    .ns3-table .neg[b-dgs8ra6hv3] {
        color: #c44536;
        font-weight: 700;
    }

.ns3-linklike[b-dgs8ra6hv3] {
    color: #2f6aa3;
}

/* Recent tiles grid */
.ns3-recent-grid[b-dgs8ra6hv3] {
    padding: 12px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 10px;
}

.ns3-recent[b-dgs8ra6hv3] {
    background: linear-gradient(#fbfcff,#f3f6fb);
    border: 1px solid #e1e6ef;
    border-radius: 8px;
    padding: 12px;
    display: grid;
    grid-template-rows: auto auto 1fr;
    gap: 4px;
    cursor: pointer;
    box-shadow: 0 1px 0 #fff inset;
    transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
    text-align: left;
}

    .ns3-recent:hover[b-dgs8ra6hv3] {
        transform: translateY(-2px);
        border-color: #cfd9ea;
        box-shadow: 0 6px 16px rgba(46,60,82,.12);
    }

.ns3-recent-emoji[b-dgs8ra6hv3] {
    font-size: 1.2rem;
}

.ns3-recent-title[b-dgs8ra6hv3] {
    font-weight: 700;
    color: #2e3c52;
}

.ns3-recent-desc[b-dgs8ra6hv3] {
    font-size: .85rem;
    color: #6b7a90;
}

.ns3-empty-wide[b-dgs8ra6hv3] {
    grid-column: 1 / -1;
    text-align: center;
}

/* Right column visuals */
.ns3-meter[b-dgs8ra6hv3] {
    padding: 18px;
    text-align: center;
}

/* ===== Gauges ===== */
.ns3-gauge[b-dgs8ra6hv3] {
    --size: 120px; /* size of the circle */
    --pct: 0; /* percentage 0-100 */
    --track: #f3f4f6; /* grey background */
    --fill: #22c55e; /* default = green */

    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    background: conic-gradient(var(--fill) calc(var(--pct)*1%), var(--track) 0);
    -webkit-mask: radial-gradient(transparent 58%, #000 59%);
    mask: radial-gradient(transparent 58%, #000 59%);
    margin: 0 auto 10px auto;
}

    /* Gauge color states */
    .ns3-gauge.green[b-dgs8ra6hv3] {
        --fill: #22c55e;
    }
    /* healthy */
    .ns3-gauge.yellow[b-dgs8ra6hv3] {
        --fill: #eab308;
    }
    /* warning */
    .ns3-gauge.red[b-dgs8ra6hv3] {
        --fill: #ef4444;
    }
/* danger */

.ns3-meter-value[b-dgs8ra6hv3] {
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
    color: #2e3c52;
    margin-top: 8px;
}

.ns3-meter-sub[b-dgs8ra6hv3] {
    font-size: 0.85rem;
    text-align: center;
    color: #555;
}

/* Bars (optional widget) */
.ns3-bars[b-dgs8ra6hv3] {
    display: flex;
    gap: 10px;
    align-items: flex-end;
    padding: 18px;
    height: 180px;
}

    .ns3-bars .bar[b-dgs8ra6hv3] {
        flex: 1;
        background: #d9e3f0;
        border: 1px solid #c8d4e5;
        border-radius: 6px 6px 0 0;
    }

/* Responsive */
@media (max-width: 1200px) {
    .ns3-grid[b-dgs8ra6hv3] {
        grid-template-columns: 240px 1fr;
    }

    .ns3-right[b-dgs8ra6hv3] {
        display: none;
    }

    .ns3-recent-grid[b-dgs8ra6hv3] {
        grid-template-columns: repeat(3,1fr);
    }
}

@media (max-width: 900px) {
    .ns3-grid[b-dgs8ra6hv3] {
        grid-template-columns: 1fr;
    }

    .ns3-recent-grid[b-dgs8ra6hv3] {
        grid-template-columns: repeat(2,1fr);
    }

    .ns3-kpis[b-dgs8ra6hv3] {
        grid-template-columns: repeat(2,1fr);
    }

    .ns3-shortcuts[b-dgs8ra6hv3] {
        grid-template-columns: repeat(2,1fr);
    }
}

/* Gauge cards grid */
.ns3-gauges[b-dgs8ra6hv3] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    padding: 10px;
}

.ns3-gauge-card[b-dgs8ra6hv3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Gauge colors */
.ns3-gauge.green[b-dgs8ra6hv3] {
    --fill: #22c55e; /* success */
}

.ns3-gauge.yellow[b-dgs8ra6hv3] {
    --fill: #eab308; /* warning */
}

.ns3-gauge.red[b-dgs8ra6hv3] {
    --fill: #ef4444; /* danger */
}

 
/* _content/AfriERP/Pages/ProjectLandingPage.razor.rz.scp.css */

*[b-7m5zw7yusk] {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

body[b-7m5zw7yusk] {
    min-height: 100vh;
    background-color: aliceblue;
    color: #f2f2f2;
    overflow-x: hidden;
}

.erp-header[b-7m5zw7yusk] {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    background-color: #f4f5f7;
    border-bottom: 1px solid rgb(255, 255, 255);
    box-shadow: 0 4px 12px rgba(115, 114, 114, 0.35);
}


.header-inner[b-7m5zw7yusk] {
    width:100%;
    margin: auto;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo[b-7m5zw7yusk] {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #0000;
    font-weight: 600;
}

    .logo img[b-7m5zw7yusk] {
        width: 86px;
    }

.logo-text[b-7m5zw7yusk] {
    color: #334155;
    font-weight: 600;
}

.logo-text2[b-7m5zw7yusk] {
    color: #f2f2f2;
    font-weight: 600;
    font-size: 20px;
}

.login-link[b-7m5zw7yusk] {
    padding: 10px 22px;
    border-radius: 999px;
    text-decoration: none;
    background: linear-gradient(180deg, #1c86d2, #1c86d2);
    color: white;
    font-weight: 600;
    transition: 0.3s;
}

    .login-link:hover[b-7m5zw7yusk] {
        transform: translateY(-2px);
    }

.hero[b-7m5zw7yusk] {
    max-width: 1400px;
    margin: auto;
    padding: 80px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    min-height: 100vh;
    padding-bottom: 100px;
}

.typing-text[b-7m5zw7yusk] {
    font-size: 0.95rem;
    color: #334155;
    min-height: 24px;
    font-style: italic;
    letter-spacing: 0.5px;
}

.cursor[b-7m5zw7yusk] {
    display: inline-block;
    margin-left: 3px;
    color: #47ad53;
    font-weight: bold;
    animation: blink 1s infinite;
}

.hero-content[b-7m5zw7yusk] {
    flex: 1;
}

    .hero-content h1[b-7m5zw7yusk] {
        font-size: clamp(2rem, 4vw, 2.8rem);
        color: #252528;
        margin-bottom: 20px;
    }

    .hero-content p[b-7m5zw7yusk] {
        max-width: 480px;
        color: #334155;
        margin-bottom: 30px;
    }

.primary-btn[b-7m5zw7yusk] {
    padding: 14px 30px;
    border-radius: 14px;
    background: linear-gradient(180deg, #1c86d2, #1c86d2);
    color: white;
    text-decoration: none;
    font-weight: 600;
    display: inline-block;
}

.hero-image[b-7m5zw7yusk] {
    flex: 1;
    position: relative;
    display: flex;
    justify-content: center; 
    align-items: center;
    margin-top: 25px;
}

    .hero-image img[b-7m5zw7yusk] {
        position: relative;
        z-index: 1;
        width: 90%; 
        max-width: 650px;
        height: auto;
        object-fit: contain;
        border-radius: 280px 100px 142px 80px;
        box-shadow: 0 50px 40px rgba(0, 0, 0, 0.18), 0 8px 16px rgba(0, 0, 0, 0.12);
        transition: transform 0.6s ease, box-shadow 0.6s ease;
    }


.stats-section[b-7m5zw7yusk] {
    background: #47ad53;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 60px;
    text-align: center;
    padding: 100px 20px;
}

.stat-item h3[b-7m5zw7yusk] {
    font-size: 2.5rem;
    color: #f2f2f2;
}

.stat-item span[b-7m5zw7yusk] {
    color: #f2f2f2;
    font-size: 1rem;
}

.erp-footer[b-7m5zw7yusk] {
    background: #47494f;
    color: #cbd5f5;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 40px;
    padding: 60px 20px;
}

.footer-logo[b-7m5zw7yusk] {
    width: 48px;
    margin-bottom: 12px;
}

    .footer-logo img[b-7m5zw7yusk] {
        width: 38px;
    }

.erp-footer h4[b-7m5zw7yusk] {
    color: white;
    margin-bottom: 10px;
}

.erp-footer input[b-7m5zw7yusk] {
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    border: none;
    margin-bottom: 10px;
}

.erp-footer button[b-7m5zw7yusk] {
    width: 100%;
    padding: 10px;
    border-radius: 8px;
    border: none;
    background: #1c86d2;
    color: white;
    font-weight: 600;
    cursor: pointer;
}

.footer-col ul[b-7m5zw7yusk] {
    list-style: none;
    padding: 0;
    margin: 0;
}

    .footer-col ul li[b-7m5zw7yusk] {
        margin-bottom: 10px;
    }

        .footer-col ul li a[b-7m5zw7yusk] {
            text-decoration: none;
            color: #f2f2f2;
            font-size: 0.95rem;
            transition: color 0.3s ease, transform 0.3s ease;
            display: inline-block;
        }

        .footer-col ul li span[b-7m5zw7yusk] {
            color: #cbd5f5;
            gap: 2rem;
            padding-right: 2px;
        }

        .footer-col ul li a:hover[b-7m5zw7yusk] {
            color: #47ad53;
            transform: translateX(6px);
        }

#scrollTopBtn[b-7m5zw7yusk] {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 100;
    background: #d651c2;
    color: white;
    border: none;
    padding: 10px 10px;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    font-size: 20px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(58, 58, 58, 0.3);
    transition: all 0.3s ease;
    opacity: 0.7;
}

    #scrollTopBtn:hover[b-7m5zw7yusk] {
        background: #d264cd;
        transform: scale(1.1);
        opacity: 1;
    }


@media (max-width: 900px) {
    .hero[b-7m5zw7yusk] {
        flex-direction: column;
        text-align: center;
    }

    .hero-content p[b-7m5zw7yusk] {
        margin-left: auto;
        margin-right: auto;
    }
}
/* _content/AfriERP/Pages/Projects/Beneficiarydistributions.razor.rz.scp.css */
@keyframes fadeScaleIn-b-xzohzkje2a {
    from {
        opacity: 0;
        transform: translateY(20px) scale(.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes fadeSlideIn-b-xzohzkje2a {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes shimmer-b-xzohzkje2a {
    from {
        background-position: 200% 0;
    }

    to {
        background-position: -200% 0;
    }
}




.upload-section[b-xzohzkje2a] {
    min-height: 100vh;
    padding: 120px 20px 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f9fafb;
}

.upload-card[b-xzohzkje2a] {
    width: 100%;
    max-width: 620px;
    padding: 50px 45px;
    border-radius: 28px;
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(10px);
    box-shadow: 0 40px 80px rgba(30,64,175,.08);
    transition: transform .3s ease, box-shadow .3s ease;
}

    .upload-card:hover[b-xzohzkje2a] {
        transform: translateY(-6px);
        box-shadow: 0 50px 100px rgba(30,64,175,.15);
    }

.upload-header h2[b-xzohzkje2a] {
    margin: 0;
    font-size: 26px;
    font-weight: 700;
    color: #111827;
}

.upload-header p[b-xzohzkje2a] {
    margin-top: 10px;
    font-size: 14px;
    color: #6b7280;
}



.form-group[b-xzohzkje2a] {
    display: flex;
    flex-direction: column;
    margin-bottom: 30px;
}

    .form-group label[b-xzohzkje2a] {
        font-size: 13px;
        font-weight: 600;
        margin-bottom: 8px;
        color: #374151;
    }

.modern-select[b-xzohzkje2a] {
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid #e5e7eb;
    font-size: 14px;
    background: #f9fafb;
    transition: all .2s ease;
    outline: none;
}

    .modern-select:focus[b-xzohzkje2a] {
        border-color: #1e40af;
        box-shadow: 0 0 0 3px rgba(30,64,175,.2);
        background: #fff;
    }

.primary-btn[b-xzohzkje2a],
.process-btn[b-xzohzkje2a],
.save-btn[b-xzohzkje2a] {
    padding: 12px 26px;
    border-radius: 14px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: transform .25s ease, box-shadow .25s ease, opacity .2s ease;
    color: #fff;
    background: #1e40af;
}

.primary-btn[b-xzohzkje2a] {
    min-width: 180px;
    font-size: 14px;
    background: blue;
}

.process-btn[b-xzohzkje2a] {
    background: #4f46e5;
}

.save-btn[b-xzohzkje2a] {
    background: blue;
}

    .primary-btn:hover[b-xzohzkje2a],
    .process-btn:hover[b-xzohzkje2a],
    .save-btn:hover[b-xzohzkje2a] {
        background: #1d4ed8;
        transform: translateY(-3px);
        box-shadow: 0 15px 30px rgba(30,64,175,.25);
    }

    .primary-btn:disabled[b-xzohzkje2a],
    .process-btn:disabled[b-xzohzkje2a],
    .save-btn:disabled[b-xzohzkje2a] {
        background: #93c5fd;
        opacity: 1;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

.upload-actions[b-xzohzkje2a] {
    display: flex;
    justify-content: center;
}


.modal-overlay[b-xzohzkje2a] {
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,.65);
    backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    z-index: 999;
}

.modal-container[b-xzohzkje2a] {
    width: 100%;
    max-width: 820px;
    max-height: 90vh;
    background: #fff;
    border-radius: 28px;
    box-shadow: 0 40px 100px rgba(0,0,0,.25);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: fadeScaleIn-b-xzohzkje2a .25s ease;
}

.modal-header[b-xzohzkje2a] {
    padding: 28px 32px;
    border-bottom: 1px solid #eef1f6;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .modal-header h3[b-xzohzkje2a] {
        margin: 0;
        font-size: 20px;
        font-weight: 700;
    }

    .modal-header p[b-xzohzkje2a] {
        margin: 4px 0 0;
        font-size: 13px;
        color: #6b7280;
    }

.close-btn[b-xzohzkje2a] {
    font-size: 20px;
    cursor: pointer;
    color: #6b7280;
    transition: transform .2s ease, color .2s ease;
}

    .close-btn:hover[b-xzohzkje2a] {
        color: #111827;
        transform: scale(1.1);
    }

.modal-body[b-xzohzkje2a] {
    padding: 30px 32px;
    overflow-y: auto;
    flex: 1;
}

.modal-footer[b-xzohzkje2a] {
    padding: 20px 32px;
    border-top: 1px solid #eef1f6;
    background: #fafbff;
    display: flex;
    justify-content: flex-end;
    gap: 15px;
}


.file-upload-container[b-xzohzkje2a] {
    margin-top: 20px;
    background: #ffffff;
}

.file-upload-box[b-xzohzkje2a] {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 28px 30px;
    border-radius: 20px;
    border: 1.5px solid #e5e7eb;
    background: linear-gradient(135deg, #f8fbff, #e0ecff);
    cursor: pointer;
    transition: all .3s ease;
    position: relative;
    overflow: hidden;
}

    .file-upload-box:hover[b-xzohzkje2a] {
        border-color: #1e40af;
        transform: translateY(-3px);
        box-shadow: 0 20px 45px rgba(30,64,175,.15);
    }

    .file-upload-box:active[b-xzohzkje2a] {
        transform: translateY(-1px);
        box-shadow: 0 10px 20px rgba(30,64,175,.1);
    }

    .file-upload-box[b-xzohzkje2a]::after {
        content: '';
        position: absolute;
        inset: 0;
        background: rgba(30,64,175,.05);
        opacity: 0;
        transition: opacity .3s ease;
        pointer-events: none;
    }

    .file-upload-box:hover[b-xzohzkje2a]::after {
        opacity: 1;
    }

.file-input-hidden[b-xzohzkje2a] {
    display: none;
}

.file-icon[b-xzohzkje2a] {
    font-size: 40px;
    padding: 16px;
    border-radius: 16px;
    background: rgba(30,64,175,.1);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .25s ease, background .25s ease;
}

.file-upload-box:hover .file-icon[b-xzohzkje2a] {
    background: rgba(30,64,175,.2);
    transform: scale(1.1);
}

.file-text.selected strong[b-xzohzkje2a],
.file-text.selected span[b-xzohzkje2a] {
    color: #1e40af;
}

.file-text.selected strong[b-xzohzkje2a],
.file-text.selected span[b-xzohzkje2a] {
    color: #4f46e5;
}



.progress-wrapper[b-xzohzkje2a] {
    margin-top: 30px;
    padding: 20px 22px;
    border-radius: 18px;
    border: 1px solid #e5e7eb;
    background: linear-gradient(135deg,#f8fbff,#e0ecff);
    box-shadow: 0 10px 30px rgba(30,64,175,.08);
    animation: fadeSlideIn-b-xzohzkje2a .3s ease;
}

.progress-header[b-xzohzkje2a] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.progress-title[b-xzohzkje2a] {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
}

.progress-percent[b-xzohzkje2a] {
    font-size: 12px;
    font-weight: 700;
    padding: 5px 10px;
    border-radius: 20px;
    background: rgba(30,64,175,.15);
    color: #1e40af;
}

    .progress-percent.complete[b-xzohzkje2a] {
        background: rgba(22,163,74,.12);
        color: #16a34a;
    }

.progress-bar-modern[b-xzohzkje2a] {
    height: 12px;
    width: 100%;
    background: #e5e7eb;
    border-radius: 50px;
    overflow: hidden;
}

.progress-fill-modern[b-xzohzkje2a] {
    height: 100%;
    border-radius: 50px;
    background: linear-gradient(90deg,#1e40af,#1d4ed8,#3b82f6,#1e40af);
    background-size: 200% 100%;
    animation: shimmer-b-xzohzkje2a 2s linear infinite;
    transition: width .4s cubic-bezier(.4,0,.2,1);
    box-shadow: 0 0 15px rgba(30,64,175,.4);
}

    .progress-fill-modern.complete[b-xzohzkje2a] {
        background: linear-gradient(90deg,#16a34a,#22c55e);
        animation: none;
        box-shadow: 0 0 12px rgba(22,163,74,.4);
    }


.preview-section[b-xzohzkje2a] {
    margin-top: 35px;
}

    .preview-section table[b-xzohzkje2a] {
        width: 100%;
        border-collapse: collapse;
        font-size: 13px;
    }

    .preview-section th[b-xzohzkje2a] {
        background: #f9fafb;
        padding: 12px;
        text-align: left;
        font-weight: 600;
    }

    .preview-section td[b-xzohzkje2a] {
        padding: 12px;
        border-bottom: 1px solid #f1f1f1;
    }

    .preview-section tbody tr:hover[b-xzohzkje2a] {
        background: #f9fafb;
    }


@media (max-width: 768px) {

    .upload-card[b-xzohzkje2a] {
        padding: 35px 25px;
        border-radius: 20px;
    }

    .primary-btn[b-xzohzkje2a],
    .process-btn[b-xzohzkje2a],
    .save-btn[b-xzohzkje2a] {
        width: 100%;
    }

    .modal-container[b-xzohzkje2a] {
        max-width: 100%;
        border-radius: 20px;
    }

    .modal-body[b-xzohzkje2a] {
        padding: 20px;
    }

    .modal-footer[b-xzohzkje2a] {
        flex-direction: column;
        align-items: stretch;
    }
}
/* _content/AfriERP/Pages/Projects/Expendituresupportdocuments.razor.rz.scp.css */
@keyframes fadeScaleIn-b-5qsi4p81gn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes fadeSlideIn-b-5qsi4p81gn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes shimmer-b-5qsi4p81gn {
    from {
        background-position: 200% 0;
    }

    to {
        background-position: -200% 0;
    }
}




.upload-section[b-5qsi4p81gn] {
    min-height: 100vh;
    padding: 120px 20px 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f9fafb;
}

.upload-card[b-5qsi4p81gn] {
    width: 100%;
    max-width: 620px;
    padding: 50px 45px;
    border-radius: 28px;
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(10px);
    box-shadow: 0 40px 80px rgba(30,64,175,.08);
    transition: transform .3s ease, box-shadow .3s ease;
}

    .upload-card:hover[b-5qsi4p81gn] {
        transform: translateY(-6px);
        box-shadow: 0 50px 100px rgba(30,64,175,.15);
    }

.upload-header h2[b-5qsi4p81gn] {
    margin: 0;
    font-size: 26px;
    font-weight: 700;
    color: #111827;
}

.upload-header p[b-5qsi4p81gn] {
    margin-top: 10px;
    font-size: 14px;
    color: #6b7280;
}



.form-group[b-5qsi4p81gn] {
    display: flex;
    flex-direction: column;
    margin-bottom: 30px;
}

    .form-group label[b-5qsi4p81gn] {
        font-size: 13px;
        font-weight: 600;
        margin-bottom: 8px;
        color: #374151;
    }

.modern-select[b-5qsi4p81gn] {
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid #e5e7eb;
    font-size: 14px;
    background: #f9fafb;
    transition: all .2s ease;
    outline: none;
}

    .modern-select:focus[b-5qsi4p81gn] {
        border-color: #1e40af;
        box-shadow: 0 0 0 3px rgba(30,64,175,.2);
        background: #fff;
    }

.primary-btn[b-5qsi4p81gn],
.process-btn[b-5qsi4p81gn],
.save-btn[b-5qsi4p81gn] {
    padding: 12px 26px;
    border-radius: 14px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: transform .25s ease, box-shadow .25s ease, opacity .2s ease;
    color: #fff;
    background: #1e40af;
}

.primary-btn[b-5qsi4p81gn] {
    min-width: 180px;
    font-size: 14px;
    background: blue;
}

.process-btn[b-5qsi4p81gn] {
    background: #4f46e5;
}

.save-btn[b-5qsi4p81gn] {
    background: blue;
}

    .primary-btn:hover[b-5qsi4p81gn],
    .process-btn:hover[b-5qsi4p81gn],
    .save-btn:hover[b-5qsi4p81gn] {
        background: #1d4ed8;
        transform: translateY(-3px);
        box-shadow: 0 15px 30px rgba(30,64,175,.25);
    }

    .primary-btn:disabled[b-5qsi4p81gn],
    .process-btn:disabled[b-5qsi4p81gn],
    .save-btn:disabled[b-5qsi4p81gn] {
        background: #93c5fd;
        opacity: 1;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

.upload-actions[b-5qsi4p81gn] {
    display: flex;
    justify-content: center;
}


.modal-overlay[b-5qsi4p81gn] {
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,.65);
    backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    z-index: 999;
}

.modal-container[b-5qsi4p81gn] {
    width: 100%;
    max-width: 820px;
    max-height: 90vh;
    background: #fff;
    border-radius: 28px;
    box-shadow: 0 40px 100px rgba(0,0,0,.25);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: fadeScaleIn-b-5qsi4p81gn .25s ease;
}

.modal-header[b-5qsi4p81gn] {
    padding: 28px 32px;
    border-bottom: 1px solid #eef1f6;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .modal-header h3[b-5qsi4p81gn] {
        margin: 0;
        font-size: 20px;
        font-weight: 700;
    }

    .modal-header p[b-5qsi4p81gn] {
        margin: 4px 0 0;
        font-size: 13px;
        color: #6b7280;
    }

.close-btn[b-5qsi4p81gn] {
    font-size: 20px;
    cursor: pointer;
    color: #6b7280;
    transition: transform .2s ease, color .2s ease;
}

    .close-btn:hover[b-5qsi4p81gn] {
        color: #111827;
        transform: scale(1.1);
    }

.modal-body[b-5qsi4p81gn] {
    padding: 30px 32px;
    overflow-y: auto;
    flex: 1;
}

.modal-footer[b-5qsi4p81gn] {
    padding: 20px 32px;
    border-top: 1px solid #eef1f6;
    background: #fafbff;
    display: flex;
    justify-content: flex-end;
    gap: 15px;
}


.file-upload-container[b-5qsi4p81gn] {
    margin-top: 20px;
    background: #ffffff;
}

.file-upload-box[b-5qsi4p81gn] {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 28px 30px;
    border-radius: 20px;
    border: 1.5px solid #e5e7eb;
    background: linear-gradient(135deg, #f8fbff, #e0ecff);
    cursor: pointer;
    transition: all .3s ease;
    position: relative;
    overflow: hidden;
}

    .file-upload-box:hover[b-5qsi4p81gn] {
        border-color: #1e40af;
        transform: translateY(-3px);
        box-shadow: 0 20px 45px rgba(30,64,175,.15);
    }

    .file-upload-box:active[b-5qsi4p81gn] {
        transform: translateY(-1px);
        box-shadow: 0 10px 20px rgba(30,64,175,.1);
    }

    .file-upload-box[b-5qsi4p81gn]::after {
        content: '';
        position: absolute;
        inset: 0;
        background: rgba(30,64,175,.05);
        opacity: 0;
        transition: opacity .3s ease;
        pointer-events: none;
    }

    .file-upload-box:hover[b-5qsi4p81gn]::after {
        opacity: 1;
    }

.file-input-hidden[b-5qsi4p81gn] {
    display: none;
}

.file-icon[b-5qsi4p81gn] {
    font-size: 40px;
    padding: 16px;
    border-radius: 16px;
    background: rgba(30,64,175,.1);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .25s ease, background .25s ease;
}

.file-upload-box:hover .file-icon[b-5qsi4p81gn] {
    background: rgba(30,64,175,.2);
    transform: scale(1.1);
}

.file-text.selected strong[b-5qsi4p81gn],
.file-text.selected span[b-5qsi4p81gn] {
    color: #1e40af;
}

.file-text.selected strong[b-5qsi4p81gn],
.file-text.selected span[b-5qsi4p81gn] {
    color: #4f46e5;
}



.progress-wrapper[b-5qsi4p81gn] {
    margin-top: 30px;
    padding: 20px 22px;
    border-radius: 18px;
    border: 1px solid #e5e7eb;
    background: linear-gradient(135deg,#f8fbff,#e0ecff);
    box-shadow: 0 10px 30px rgba(30,64,175,.08);
    animation: fadeSlideIn-b-5qsi4p81gn .3s ease;
}

.progress-header[b-5qsi4p81gn] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.progress-title[b-5qsi4p81gn] {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
}

.progress-percent[b-5qsi4p81gn] {
    font-size: 12px;
    font-weight: 700;
    padding: 5px 10px;
    border-radius: 20px;
    background: rgba(30,64,175,.15);
    color: #1e40af;
}

    .progress-percent.complete[b-5qsi4p81gn] {
        background: rgba(22,163,74,.12);
        color: #16a34a;
    }

.progress-bar-modern[b-5qsi4p81gn] {
    height: 12px;
    width: 100%;
    background: #e5e7eb;
    border-radius: 50px;
    overflow: hidden;
}

.progress-fill-modern[b-5qsi4p81gn] {
    height: 100%;
    border-radius: 50px;
    background: linear-gradient(90deg,#1e40af,#1d4ed8,#3b82f6,#1e40af);
    background-size: 200% 100%;
    animation: shimmer-b-5qsi4p81gn 2s linear infinite;
    transition: width .4s cubic-bezier(.4,0,.2,1);
    box-shadow: 0 0 15px rgba(30,64,175,.4);
}

    .progress-fill-modern.complete[b-5qsi4p81gn] {
        background: linear-gradient(90deg,#16a34a,#22c55e);
        animation: none;
        box-shadow: 0 0 12px rgba(22,163,74,.4);
    }


.preview-section[b-5qsi4p81gn] {
    margin-top: 35px;
}

    .preview-section table[b-5qsi4p81gn] {
        width: 100%;
        border-collapse: collapse;
        font-size: 13px;
    }

    .preview-section th[b-5qsi4p81gn] {
        background: #f9fafb;
        padding: 12px;
        text-align: left;
        font-weight: 600;
    }

    .preview-section td[b-5qsi4p81gn] {
        padding: 12px;
        border-bottom: 1px solid #f1f1f1;
    }

    .preview-section tbody tr:hover[b-5qsi4p81gn] {
        background: #f9fafb;
    }


@media (max-width: 768px) {

    .upload-card[b-5qsi4p81gn] {
        padding: 35px 25px;
        border-radius: 20px;
    }

    .primary-btn[b-5qsi4p81gn],
    .process-btn[b-5qsi4p81gn],
    .save-btn[b-5qsi4p81gn] {
        width: 100%;
    }

    .modal-container[b-5qsi4p81gn] {
        max-width: 100%;
        border-radius: 20px;
    }

    .modal-body[b-5qsi4p81gn] {
        padding: 20px;
    }

    .modal-footer[b-5qsi4p81gn] {
        flex-direction: column;
        align-items: stretch;
    }
}
/* _content/AfriERP/Pages/Projects/ProjectSetup.razor.rz.scp.css */
/* PAGE CONTAINER */
.project-setup-container[b-rri5m0hdjc] {
    max-width: 1900px;
    margin: 30px auto;
    padding: 10px;
}

/* TITLE */
.page-title[b-rri5m0hdjc] {
    margin-bottom: 21px;
}

/* TILE */
.accordion-tile[b-rri5m0hdjc] {
    margin-bottom: 14px;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    overflow: hidden;
}

/* HEADER */
.accordion-header[b-rri5m0hdjc] {
    padding: 18px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

    .accordion-header h4[b-rri5m0hdjc] {
        margin: 0;
    }

    .accordion-header small[b-rri5m0hdjc] {
        color: #9aa6b2;
    }

/* CHEVRON */
.chevron[b-rri5m0hdjc] {
    transition: transform 0.3s ease;
    font-size: 14px;
}

    .chevron.open[b-rri5m0hdjc] {
        transform: rotate(180deg);
    }

/* BODY */
.accordion-body[b-rri5m0hdjc] {
    background: #f4f7fb;
    padding: 20px;
}

/* POPUP THEME */
.popup-theme[b-rri5m0hdjc] {
    background: white;
    border-radius: 14px;
    padding: 24px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}

/* PLACEHOLDER */
.placeholder-content[b-rri5m0hdjc] {
    padding: 20px;
    background: #f8fafc;
    border-radius: 8px;
    margin-top: 15px;
}

/* ACTIONS */
.popup-actions[b-rri5m0hdjc] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 25px;
}

/* BUTTONS */
.btn-primary[b-rri5m0hdjc] {
    background: #2b6cb0;
    color: white;
    border: none;
    padding: 10px 18px;
    border-radius: 8px;
}

.btn-secondary[b-rri5m0hdjc] {
    background: transparent;
    border: 1px solid #2b6cb0;
    color: #2b6cb0;
    padding: 10px 18px;
    border-radius: 8px;
}
/* _content/AfriERP/Pages/Projects/PublicDocuments.razor.rz.scp.css */
@keyframes fadeScaleIn-b-rqms3bzq15 {
    from {
        opacity: 0;
        transform: translateY(20px) scale(.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes fadeSlideIn-b-rqms3bzq15 {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes shimmer-b-rqms3bzq15 {
    from {
        background-position: 200% 0;
    }

    to {
        background-position: -200% 0;
    }
}




.upload-section[b-rqms3bzq15] {
    min-height: 100vh;
    padding: 120px 20px 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f9fafb;
}

.upload-card[b-rqms3bzq15] {
    width: 100%;
    max-width: 620px;
    padding: 50px 45px;
    border-radius: 28px;
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(10px);
    box-shadow: 0 40px 80px rgba(30,64,175,.08);
    transition: transform .3s ease, box-shadow .3s ease;
}

    .upload-card:hover[b-rqms3bzq15] {
        transform: translateY(-6px);
        box-shadow: 0 50px 100px rgba(30,64,175,.15);
    }

.upload-header h2[b-rqms3bzq15] {
    margin: 0;
    font-size: 26px;
    font-weight: 700;
    color: #111827;
}

.upload-header p[b-rqms3bzq15] {
    margin-top: 10px;
    font-size: 14px;
    color: #6b7280;
}



.form-group[b-rqms3bzq15] {
    display: flex;
    flex-direction: column;
    margin-bottom: 30px;
}

    .form-group label[b-rqms3bzq15] {
        font-size: 13px;
        font-weight: 600;
        margin-bottom: 8px;
        color: #374151;
    }

.modern-select[b-rqms3bzq15] {
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid #e5e7eb;
    font-size: 14px;
    background: #f9fafb;
    transition: all .2s ease;
    outline: none;
}

    .modern-select:focus[b-rqms3bzq15] {
        border-color: #1e40af;
        box-shadow: 0 0 0 3px rgba(30,64,175,.2);
        background: #fff;
    }

.primary-btn[b-rqms3bzq15],
.process-btn[b-rqms3bzq15],
.save-btn[b-rqms3bzq15] {
    padding: 12px 26px;
    border-radius: 14px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: transform .25s ease, box-shadow .25s ease, opacity .2s ease;
    color: #fff;
    background: #1e40af;
}

.primary-btn[b-rqms3bzq15] {
    min-width: 180px;
    font-size: 14px;
    background: blue;
}

.process-btn[b-rqms3bzq15] {
    background: #4f46e5;
}

.save-btn[b-rqms3bzq15] {
    background: blue;
}

    .primary-btn:hover[b-rqms3bzq15],
    .process-btn:hover[b-rqms3bzq15],
    .save-btn:hover[b-rqms3bzq15] {
        background: #1d4ed8;
        transform: translateY(-3px);
        box-shadow: 0 15px 30px rgba(30,64,175,.25);
    }

    .primary-btn:disabled[b-rqms3bzq15],
    .process-btn:disabled[b-rqms3bzq15],
    .save-btn:disabled[b-rqms3bzq15] {
        background: #93c5fd;
        opacity: 1;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

.upload-actions[b-rqms3bzq15] {
    display: flex;
    justify-content: center;
}


.modal-overlay[b-rqms3bzq15] {
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,.65);
    backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    z-index: 999;
}

.modal-container[b-rqms3bzq15] {
    width: 100%;
    max-width: 820px;
    max-height: 90vh;
    background: #fff;
    border-radius: 28px;
    box-shadow: 0 40px 100px rgba(0,0,0,.25);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: fadeScaleIn-b-rqms3bzq15 .25s ease;
}

.modal-header[b-rqms3bzq15] {
    padding: 28px 32px;
    border-bottom: 1px solid #eef1f6;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .modal-header h3[b-rqms3bzq15] {
        margin: 0;
        font-size: 20px;
        font-weight: 700;
    }

    .modal-header p[b-rqms3bzq15] {
        margin: 4px 0 0;
        font-size: 13px;
        color: #6b7280;
    }

.close-btn[b-rqms3bzq15] {
    font-size: 20px;
    cursor: pointer;
    color: #6b7280;
    transition: transform .2s ease, color .2s ease;
}

    .close-btn:hover[b-rqms3bzq15] {
        color: #111827;
        transform: scale(1.1);
    }

.modal-body[b-rqms3bzq15] {
    padding: 30px 32px;
    overflow-y: auto;
    flex: 1;
}

.modal-footer[b-rqms3bzq15] {
    padding: 20px 32px;
    border-top: 1px solid #eef1f6;
    background: #fafbff;
    display: flex;
    justify-content: flex-end;
    gap: 15px;
}


.file-upload-container[b-rqms3bzq15] {
    margin-top: 20px;
    background: #ffffff;
}

.file-upload-box[b-rqms3bzq15] {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 28px 30px;
    border-radius: 20px;
    border: 1.5px solid #e5e7eb;
    background: linear-gradient(135deg, #f8fbff, #e0ecff);
    cursor: pointer;
    transition: all .3s ease;
    position: relative;
    overflow: hidden;
}

    .file-upload-box:hover[b-rqms3bzq15] {
        border-color: #1e40af;
        transform: translateY(-3px);
        box-shadow: 0 20px 45px rgba(30,64,175,.15);
    }

    .file-upload-box:active[b-rqms3bzq15] {
        transform: translateY(-1px);
        box-shadow: 0 10px 20px rgba(30,64,175,.1);
    }

    .file-upload-box[b-rqms3bzq15]::after {
        content: '';
        position: absolute;
        inset: 0;
        background: rgba(30,64,175,.05);
        opacity: 0;
        transition: opacity .3s ease;
        pointer-events: none;
    }

    .file-upload-box:hover[b-rqms3bzq15]::after {
        opacity: 1;
    }

.file-input-hidden[b-rqms3bzq15] {
    display: none;
}

.file-icon[b-rqms3bzq15] {
    font-size: 40px;
    padding: 16px;
    border-radius: 16px;
    background: rgba(30,64,175,.1);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .25s ease, background .25s ease;
}

.file-upload-box:hover .file-icon[b-rqms3bzq15] {
    background: rgba(30,64,175,.2);
    transform: scale(1.1);
}

.file-text.selected strong[b-rqms3bzq15],
.file-text.selected span[b-rqms3bzq15] {
    color: #1e40af;
}

.file-text.selected strong[b-rqms3bzq15],
.file-text.selected span[b-rqms3bzq15] {
    color: #4f46e5;
}



.progress-wrapper[b-rqms3bzq15] {
    margin-top: 30px;
    padding: 20px 22px;
    border-radius: 18px;
    border: 1px solid #e5e7eb;
    background: linear-gradient(135deg,#f8fbff,#e0ecff);
    box-shadow: 0 10px 30px rgba(30,64,175,.08);
    animation: fadeSlideIn-b-rqms3bzq15 .3s ease;
}

.progress-header[b-rqms3bzq15] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.progress-title[b-rqms3bzq15] {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
}

.progress-percent[b-rqms3bzq15] {
    font-size: 12px;
    font-weight: 700;
    padding: 5px 10px;
    border-radius: 20px;
    background: rgba(30,64,175,.15);
    color: #1e40af;
}

    .progress-percent.complete[b-rqms3bzq15] {
        background: rgba(22,163,74,.12);
        color: #16a34a;
    }

.progress-bar-modern[b-rqms3bzq15] {
    height: 12px;
    width: 100%;
    background: #e5e7eb;
    border-radius: 50px;
    overflow: hidden;
}

.progress-fill-modern[b-rqms3bzq15] {
    height: 100%;
    border-radius: 50px;
    background: linear-gradient(90deg,#1e40af,#1d4ed8,#3b82f6,#1e40af);
    background-size: 200% 100%;
    animation: shimmer-b-rqms3bzq15 2s linear infinite;
    transition: width .4s cubic-bezier(.4,0,.2,1);
    box-shadow: 0 0 15px rgba(30,64,175,.4);
}

    .progress-fill-modern.complete[b-rqms3bzq15] {
        background: linear-gradient(90deg,#16a34a,#22c55e);
        animation: none;
        box-shadow: 0 0 12px rgba(22,163,74,.4);
    }


.preview-section[b-rqms3bzq15] {
    margin-top: 35px;
}

    .preview-section table[b-rqms3bzq15] {
        width: 100%;
        border-collapse: collapse;
        font-size: 13px;
    }

    .preview-section th[b-rqms3bzq15] {
        background: #f9fafb;
        padding: 12px;
        text-align: left;
        font-weight: 600;
    }

    .preview-section td[b-rqms3bzq15] {
        padding: 12px;
        border-bottom: 1px solid #f1f1f1;
    }

    .preview-section tbody tr:hover[b-rqms3bzq15] {
        background: #f9fafb;
    }


@media (max-width: 768px) {

    .upload-card[b-rqms3bzq15] {
        padding: 35px 25px;
        border-radius: 20px;
    }

    .primary-btn[b-rqms3bzq15],
    .process-btn[b-rqms3bzq15],
    .save-btn[b-rqms3bzq15] {
        width: 100%;
    }

    .modal-container[b-rqms3bzq15] {
        max-width: 100%;
        border-radius: 20px;
    }

    .modal-body[b-rqms3bzq15] {
        padding: 20px;
    }

    .modal-footer[b-rqms3bzq15] {
        flex-direction: column;
        align-items: stretch;
    }
}
/* _content/AfriERP/Pages/Sales/HotelPOSCheckout.razor.rz.scp.css */
/* ===== Restaurant POS Theme ===== */

/* General Layout */
body[b-sp59btxg8t] {
    font-family: 'Segoe UI', Tahoma, sans-serif;
    background-color: #f7f5f2;
    margin: 0;
    padding: 0;
    color: #333;
}

/* Navbar / Header */
.header[b-sp59btxg8t] {
    background-color: #8b1e1e; /* deep red for restaurant */
    color: #fff;
    padding: 1rem;
    font-size: 1.2rem;
    font-weight: 600;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

/* Main Grid: Tables + Order Panel */
.main-container[b-sp59btxg8t] {
    display: grid;
    grid-template-columns: 2fr 3fr; /* left tables, right orders */
    gap: 1rem;
    height: calc(100vh - 60px);
    padding: 1rem;
}

/* Restaurant Tables Section */
.tables-panel[b-sp59btxg8t] {
    background: #fff;
    border-radius: 12px;
    padding: 1rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    overflow-y: auto;
}

.table-card[b-sp59btxg8t] {
    display: inline-block;
    width: 100px;
    height: 100px;
    margin: 0.5rem;
    border-radius: 50%;
    background: #f2e1d9;
    border: 2px solid #d1b9a3;
    color: #5a3825;
    font-weight: 600;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .2s ease-in-out;
}

    .table-card.occupied[b-sp59btxg8t] {
        background: #c0392b;
        color: #fff;
        border-color: #922b21;
    }

    .table-card:hover[b-sp59btxg8t] {
        transform: scale(1.08);
        background: #f4d5c6;
    }

/* Orders / Cart Panel */
.order-panel[b-sp59btxg8t] {
    background: #fff;
    border-radius: 12px;
    padding: 1rem;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
}

/* Cart Items List */
.cart-items[b-sp59btxg8t] {
    flex-grow: 1;
    overflow-y: auto;
    margin-bottom: 1rem;
}

.cart-item[b-sp59btxg8t] {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: .5rem;
    padding: .6rem;
    border-bottom: 1px dashed #ddd;
    font-size: .95rem;
}

    .cart-item:last-child[b-sp59btxg8t] {
        border-bottom: none;
    }

    .cart-item .qty[b-sp59btxg8t] {
        font-weight: 600;
        color: #8b1e1e;
    }

/* Totals & Payment */
.order-totals[b-sp59btxg8t] {
    border-top: 2px solid #eee;
    padding-top: 1rem;
    font-size: 1rem;
}

    .order-totals .line[b-sp59btxg8t] {
        display: flex;
        justify-content: space-between;
        margin: .2rem 0;
    }

    .order-totals .grand-total[b-sp59btxg8t] {
        font-size: 1.3rem;
        font-weight: 700;
        color: #8b1e1e;
    }

/* Action Buttons */
.actions[b-sp59btxg8t] {
    display: flex;
    gap: .8rem;
    margin-top: 1rem;
}

    .actions button[b-sp59btxg8t] {
        flex: 1;
        padding: .8rem;
        font-size: 1rem;
        border-radius: 8px;
        border: none;
        cursor: pointer;
        transition: all .2s ease-in-out;
    }

    .actions .send[b-sp59btxg8t] {
        background: #27ae60;
        color: #fff;
    }

    .actions .checkout[b-sp59btxg8t] {
        background: #8b1e1e;
        color: #fff;
    }

    .actions button:hover[b-sp59btxg8t] {
        opacity: 0.85;
    }

/* Modal Overlay */
.modal[b-sp59btxg8t] {
    background: rgba(0,0,0,0.5);
    position: fixed;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-content[b-sp59btxg8t] {
    background: #fff;
    padding: 2rem;
    border-radius: 12px;
    width: 400px;
    max-width: 90%;
}
/* _content/AfriERP/Pages/Sales/RetailPOSCheckout.razor.rz.scp.css */
/* --- AfriERP POS theme variables (match ribbon palette) --- */
:root[b-vx3q696u1j] {
    --feature-accent: #0ea5e9; /* ribbon sky-blue */
    --feature-border: #e3e3e3; /* close to ribbon bar bottom */
    --feature-radius: 12px;
    --feature-text: #16a34a; /* ribbon tab active text */
    --feature-muted: #7a7a7a; /* ribbon group title */
    --app-bg: #f7f7f7; /* body under ribbon */
    --card-bg: #dc2626;
}

/* Wrapper & columns */
.hotel-pos-wrapper[b-vx3q696u1j] {
    display: flex;
    flex-direction: row;
    height: 90vh;
    outline: none;
}

/* Sidebar (tinted like ribbon accents) */
.hotel-pos-sidebar[b-vx3q696u1j] {
    width: 72px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 1rem;
    background: color-mix(in oklab, var(--feature-accent) 88%, #0b3d59);
}

    .hotel-pos-sidebar button[b-vx3q696u1j] {
        background: none;
        border: 0;
        color: #303030;
        font-size: 1.5rem;
        margin: 10px 0;
        cursor: pointer;
        border-radius: 10px;
        padding: 6px;
        transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
    }

        .hotel-pos-sidebar button:hover[b-vx3q696u1j] {
            background: rgba(255,255,255,.12);
            transform: translateY(-2px);
        }

        /* Active + glow (match ribbon glow) */
        .hotel-pos-sidebar button.active[b-vx3q696u1j] {
            background: rgba(255,255,255,.18);
            box-shadow: 0 0 0 1px rgba(255,255,255,.35) inset, 0 0 12px color-mix(in srgb, var(--feature-accent) 60%, transparent);
            transform: translateY(-2px);
        }

        .hotel-pos-sidebar button:focus-visible[b-vx3q696u1j] {
            outline: 2px solid color-mix(in srgb, var(--feature-accent) 70%, transparent);
        }

/* Main column */
.hotel-pos-content[b-vx3q696u1j] {
    flex: 1;
    padding: 16px;
    background: var(--app-bg);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Header */
.hotel-pos-header[b-vx3q696u1j] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: .5rem;
    margin-bottom: .5rem;
    border-bottom: 1px solid var(--feature-border);
    color: var(--feature-text);
}

/* Cart */
.hotel-pos-cart[b-vx3q696u1j] {
    flex: 1;
    overflow-y: auto;
    background: var(--card-bg);
    border: 1px solid var(--feature-border);
    border-radius: var(--feature-radius);
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
    padding: 16px;
}

    .hotel-pos-cart table[b-vx3q696u1j] {
        width: 100%;
        border-collapse: collapse;
        font-size: 14px;
    }

    .hotel-pos-cart th[b-vx3q696u1j],
    .hotel-pos-cart td[b-vx3q696u1j] {
        padding: 10px;
        text-align: center;
        border-bottom: 1px solid var(--feature-border);
        color: var(--feature-text);
    }

    .hotel-pos-cart th[b-vx3q696u1j] {
        text-align: left;
        color: var(--feature-muted);
        font-weight: 600;
    }

/* Actions (right column) */
.hotel-pos-actions[b-vx3q696u1j] {
    width: 320px;
    background: var(--card-bg);
    border: 1px solid var(--feature-border);
    border-radius: var(--feature-radius);
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    /* Action buttons with visible border + brand colors */
    .hotel-pos-actions button[b-vx3q696u1j] {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 8px;
        width: 100%;
        padding: 10px 12px;
        border: 2px solid var(--feature-border);
        border-radius: 8px;
        background: #fff;
        color: #222;
        font-size: 0.95rem;
        font-weight: 500;
        cursor: pointer;
        transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
    }

        .hotel-pos-actions button:hover[b-vx3q696u1j] {
            background: #f5f5f5;
            border-color: var(--feature-accent);
            transform: translateY(-1px);
        }

    /* Payment brand colors */
    .hotel-pos-actions .btn-cash[b-vx3q696u1j] {
        border-color: #16a34a;
        color: #16a34a;
    }

    .hotel-pos-actions .btn-card[b-vx3q696u1j] {
        border-color: #0ea5e9;
        color: #0ea5e9;
    }

    .hotel-pos-actions .btn-mpesa[b-vx3q696u1j] {
        border-color: #1ba94c;
        color: #1ba94c;
    }

    .hotel-pos-actions .btn-bank[b-vx3q696u1j] {
        border-color: #4b5563;
        color: #4b5563;
    }

    .hotel-pos-actions .btn-loyalty[b-vx3q696u1j] {
        border-color: #facc15;
        color: #ca8a04;
    }

    .hotel-pos-actions .btn-voucher[b-vx3q696u1j] {
        border-color: #dc2626;
        color: #dc2626;
    }

    .hotel-pos-actions .btn-orange[b-vx3q696u1j] {
        border-color: #f97316;
        color: #f97316;
    }

    .hotel-pos-actions .btn-moov[b-vx3q696u1j] {
        border-color: #2563eb;
        color: #2563eb;
    }

    .hotel-pos-actions .btn-wave[b-vx3q696u1j] {
        border-color: #0ea5e9;
        color: #0ea5e9;
    }

    .hotel-pos-actions .btn-checkout[b-vx3q696u1j] {
        border-color: #22c55e;
        color: #22c55e;
        font-weight: 600;
    }

    /* Hover brand fill */
    .hotel-pos-actions .btn-cash:hover[b-vx3q696u1j] {
        background: #16a34a;
        color: #16a34a;
    }

    .hotel-pos-actions .btn-card:hover[b-vx3q696u1j] {
        background: #0ea5e9;
        color: #16a34a;
    }

    .hotel-pos-actions .btn-mpesa:hover[b-vx3q696u1j] {
        background: #1ba94c;
        color: #16a34a;
    }

    .hotel-pos-actions .btn-bank:hover[b-vx3q696u1j] {
        background: #4b5563;
        color: #16a34a;
    }

    .hotel-pos-actions .btn-loyalty:hover[b-vx3q696u1j] {
        background: #facc15;
        color: #000;
    }

    .hotel-pos-actions .btn-voucher:hover[b-vx3q696u1j] {
        background: #dc2626;
        color: #16a34a;
    }

    .hotel-pos-actions .btn-orange:hover[b-vx3q696u1j] {
        background: #f97316;
        color: #16a34a;
    }

    .hotel-pos-actions .btn-moov:hover[b-vx3q696u1j] {
        background: #2563eb;
        color: #16a34a;
    }

    .hotel-pos-actions .btn-wave:hover[b-vx3q696u1j] {
        background: #0ea5e9;
        color: #16a34a;
    }

    .hotel-pos-actions .btn-checkout:hover[b-vx3q696u1j] {
        background: #22c55e;
        color: #16a34a;
    }

/* Totals */
.total-amount[b-vx3q696u1j] {
    font-size: 2rem;
    font-weight: 800;
    color: var(--feature-accent);
    text-align: right;
    margin-top: .5rem;
}

/* Product suggestions dropdown (theme-matched) */
.suggestion-list[b-vx3q696u1j] {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 20;
    max-height: 300px;
    overflow: auto;
    width: min(720px, 100%);
    border: 1px solid var(--feature-border);
    border-radius: 10px;
    box-shadow: 0 4px 18px rgba(0,0,0,.08);
    background: #fff;
}

    .suggestion-list .list-group-item.active[b-vx3q696u1j] {
        background: color-mix(in srgb, var(--feature-accent) 12%, #ffffff);
        color: var(--feature-text);
    }

/* Responsive */
@media (max-width: 992px) {
    .hotel-pos-wrapper[b-vx3q696u1j] {
        flex-direction: column;
        height: auto;
    }

    .hotel-pos-actions[b-vx3q696u1j] {
        width: 100%;
        order: 2;
    }

    .hotel-pos-cart[b-vx3q696u1j] {
        order: 1;
    }
}
/* _content/AfriERP/Pages/UserMgt/ForgotPassword.razor.rz.scp.css */
/* ==============================
   Metallic / ns3 Reset Theme
   ============================== */

:root[b-rxwkkhkmgh] {
    --ink: #2e3c52;
    --muted: #7a8aa0;
    --hairline: #e3e7ee;
    --panel: #ffffff;
    --bg: #f5f6f7;
    --primary: #2f6aa3;
    --primary-dark: #2a5d91;
    --glow: rgba(46,60,82,.08);
}

/* Layout wrapper */
.reset-wrapper[b-rxwkkhkmgh] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: radial-gradient(60% 40% at 18% 0%, rgba(255,255,255,.7), transparent 60%), linear-gradient(to right, var(--bg), var(--bg));
    padding: 24px;
}

/* Card */
.reset-box[b-rxwkkhkmgh] {
    position: relative;
    width: min(560px, 92vw);
    background: var(--panel);
    color: var(--ink);
    padding: 36px 32px 28px;
    border: 1px solid var(--hairline);
    border-radius: 12px;
    box-shadow: 0 18px 40px var(--glow), 0 1px 0 #fff inset;
}

    /* Title */
    .reset-box h2[b-rxwkkhkmgh] {
        margin: 0 0 16px;
        color: var(--ink);
        font-weight: 800;
        letter-spacing: .2px;
    }

/* Language selector (pill) */
.language-selector[b-rxwkkhkmgh] {
    position: absolute;
    top: 16px;
    right: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: .93rem;
    background: #f7f9fc;
    border: 1px solid var(--hairline);
    border-radius: 999px;
    padding: 6px 10px;
}

    .language-selector select[b-rxwkkhkmgh] {
        appearance: none;
        border: 1px solid var(--hairline);
        background: #fff;
        border-radius: 8px;
        padding: 6px 10px;
        color: var(--ink);
        cursor: pointer;
    }

/* Fields */
.form-group[b-rxwkkhkmgh] {
    margin-bottom: 14px;
    text-align: left;
}

    .form-group label[b-rxwkkhkmgh] {
        display: block;
        font-weight: 700;
        margin: 0 0 6px;
        color: var(--ink);
    }

.form-control[b-rxwkkhkmgh] {
    width: 100%;
    padding: 10px 12px;
    background: #fbfcff;
    color: var(--ink);
    border: 1px solid #e1e6ef;
    border-radius: 8px;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

    .form-control:focus[b-rxwkkhkmgh] {
        outline: none;
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(47,106,163,.15);
        background: #ffffff;
    }

/* Icons inside inputs (optional) */
.input-with-icon[b-rxwkkhkmgh] {
    position: relative;
}

    .input-with-icon .field-icon[b-rxwkkhkmgh] {
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        pointer-events: none;
        color: #7f8ea6;
        font-size: .95rem;
    }

    .input-with-icon .form-control[b-rxwkkhkmgh] {
        padding-left: 34px;
    }

/* Error / success feedback */
.form-control.error[b-rxwkkhkmgh] {
    border-color: #c44536;
    background: #fff5f5;
}

    .form-control.error:focus[b-rxwkkhkmgh] {
        border-color: #d9534f;
        box-shadow: 0 0 0 3px rgba(201, 69, 54, 0.2);
    }

.form-control.success[b-rxwkkhkmgh] {
    border-color: #3c9a5f;
    background: #f5fff9;
}

    .form-control.success:focus[b-rxwkkhkmgh] {
        border-color: #3c9a5f;
        box-shadow: 0 0 0 3px rgba(60, 154, 95, 0.2);
    }

/* Verify button */
.reset-box .reset-button[b-rxwkkhkmgh],
.btn.reset-button[b-rxwkkhkmgh],
button.reset-button[b-rxwkkhkmgh] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    padding: 12px 14px;
    /* force background + border to win over Bootstrap */
    background: #3c7fbe;
    border: 1px solid #2f7a49 !important;
    color: #fff !important;
    border-radius: 10px;
    font-weight: 800;
    letter-spacing: .3px;
    box-shadow: 0 1px 0 #fff inset, 0 10px 22px rgba(46,60,82,.08);
    cursor: pointer;
    text-decoration: none;
    margin-top: 8px;
}

    .reset-box .reset-button:hover[b-rxwkkhkmgh],
    .btn.reset-button:hover[b-rxwkkhkmgh],
    button.reset-button:hover[b-rxwkkhkmgh] {
        transform: translateY(-1px);
        box-shadow: 0 1px 0 #fff inset, 0 14px 28px rgba(46,60,82,.12);
        filter: brightness(1.03);
    }

    .reset-box .reset-button:disabled[b-rxwkkhkmgh],
    .btn.reset-button:disabled[b-rxwkkhkmgh],
    button.reset-button:disabled[b-rxwkkhkmgh] {
        opacity: .65;
        cursor: not-allowed;
        background: linear-gradient(#7fa7cf, #6c8fb7) !important;
        border-color: #5a7fa6 !important;
        color: #f4f7fb !important;
    }
/* Ensure .btn resets don't kill borders/backgrounds */
.btn.reset-button[b-rxwkkhkmgh],
button.reset-button[b-rxwkkhkmgh] {
    background: linear-gradient(#3c7fbe, #2f6aa3) !important;
    border-width: 1px !important;
}

/* Notes / errors */
.reset-note[b-rxwkkhkmgh] {
    margin-top: 10px;
    font-size: .92rem;
    color: #c44536;
}

/* Footer micro text */
.reset-foot[b-rxwkkhkmgh] {
    margin-top: 14px;
    color: var(--muted);
    font-size: .85rem;
}

/* Responsive */
@media (max-width: 520px) {
    .reset-box[b-rxwkkhkmgh] {
        padding: 28px 20px 22px;
    }

    .language-selector[b-rxwkkhkmgh] {
        top: 10px;
        right: 10px;
        padding: 5px 8px;
    }
}
/* _content/AfriERP/Pages/UserMgt/Login.razor.rz.scp.css */
/* ==============================
   Metallic / ns3 Login Theme
   ============================== */

:root[b-fbtbavhu2a] {
    --ink: #2e3c52;
    --muted: #7a8aa0;
    --hairline: #e3e7ee;
    --panel: #ffffff;
    --bg: #f5f6f7;
    --primary: #2f6aa3;
    --primary-dark: #2a5d91;
    --glow: rgba(46,60,82,.08);
}

.login-wrapper[b-fbtbavhu2a] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: radial-gradient(60% 40% at 18% 0%, rgba(255,255,255,.7), transparent 60%), linear-gradient(to right, var(--bg), var(--bg));
    padding: 24px;
}

/* Card */
.login-box[b-fbtbavhu2a] {
    position: relative;
    width: min(560px, 92vw);
    background: var(--panel);
    color: var(--ink);
    padding: 36px 32px 28px;
    border: 1px solid var(--hairline);
    border-radius: 12px;
    box-shadow: 0 18px 40px var(--glow), 0 1px 0 #fff inset;
}

    /* Title */
    .login-box h2[b-fbtbavhu2a] {
        margin: 0 0 16px;
        color: var(--ink);
        font-weight: 800;
        letter-spacing: .2px;
    }

/* Language selector (pill) */
.language-selector[b-fbtbavhu2a] {
    position: absolute;
    top: 16px;
    right: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: .93rem;
    background: #f7f9fc;
    border: 1px solid var(--hairline);
    border-radius: 999px;
    padding: 6px 10px;
}

    .language-selector select[b-fbtbavhu2a] {
        appearance: none;
        border: 1px solid var(--hairline);
        background: #fff;
        border-radius: 8px;
        padding: 6px 10px;
        color: var(--ink);
        cursor: pointer;
    }

/* Fields */
.form-group[b-fbtbavhu2a] {
    margin-bottom: 14px;
    text-align: left;
}

    .form-group label[b-fbtbavhu2a] {
        display: block;
        font-weight: 700;
        margin: 0 0 6px;
        color: var(--ink);
    }

.form-control[b-fbtbavhu2a] {
    width: 100%;
    padding: 10px 12px;
    background: #fbfcff;
    color: var(--ink);
    border: 1px solid #e1e6ef;
    border-radius: 8px;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

    .form-control:focus[b-fbtbavhu2a] {
        outline: none;
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(47,106,163,.15);
        background: #ffffff;
    }

/* Optional input with left icon */
.input-with-icon[b-fbtbavhu2a] {
    position: relative;
}

    .input-with-icon .field-icon[b-fbtbavhu2a] {
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        pointer-events: none;
        color: #7f8ea6;
        font-size: .95rem;
    }

    .input-with-icon .form-control[b-fbtbavhu2a] {
        padding-left: 34px;
    }

/* Small helper row: remember + forgot */
.login-actions[b-fbtbavhu2a] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 8px 0 18px;
    gap: 8px;
    flex-wrap: wrap;
    font-size: .92rem;
    color: var(--muted);
}

    .login-actions a[b-fbtbavhu2a] {
        color: var(--primary);
        text-decoration: none;
    }

        .login-actions a:hover[b-fbtbavhu2a] {
            text-decoration: underline;
        }

.login-box .login-button[b-fbtbavhu2a],
.btn.login-button[b-fbtbavhu2a],
button.login-button[b-fbtbavhu2a] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    padding: 12px 14px;
    /* force background + border to win over Bootstrap */
    background: linear-gradient(#3c7fbe, #2f6aa3) !important;
    border: 1px solid #2a5d91 !important;
    color: #fff !important;
    border-radius: 10px;
    font-weight: 800;
    letter-spacing: .3px;
    box-shadow: 0 1px 0 #fff inset, 0 10px 22px rgba(46,60,82,.08);
    cursor: pointer;
    text-decoration: none; /* in case something made it look like a link */
}

    .login-box .login-button:hover[b-fbtbavhu2a],
    .btn.login-button:hover[b-fbtbavhu2a],
    button.login-button:hover[b-fbtbavhu2a] {
        transform: translateY(-1px);
        box-shadow: 0 1px 0 #fff inset, 0 14px 28px rgba(46,60,82,.12);
        filter: brightness(1.02);
    }

    /* keep it visible even when disabled (slightly dimmer) */
    .login-box .login-button:disabled[b-fbtbavhu2a],
    .btn.login-button:disabled[b-fbtbavhu2a],
    button.login-button:disabled[b-fbtbavhu2a] {
        opacity: .65;
        cursor: not-allowed;
        background: linear-gradient(#7fa7cf, #6c8fb7) !important;
        border-color: #5a7fa6 !important;
        color: #f4f7fb !important;
    }

/* If something elsewhere zeroed out borders/background for .btn, undo it */
.btn.login-button[b-fbtbavhu2a],
button.login-button[b-fbtbavhu2a] {
    background-clip: padding-box !important;
    border-width: 1px !important;
}

/* Space above/below so it doesn't feel lost */
.login-box .login-button[b-fbtbavhu2a] {
    margin-top: 8px;
}

/* Notes / errors */
.login-note[b-fbtbavhu2a] {
    margin-top: 10px;
    font-size: .92rem;
    color: #c44536;
}

/* Footer micro text */
.login-foot[b-fbtbavhu2a] {
    margin-top: 14px;
    color: var(--muted);
    font-size: .85rem;
}

/* Responsive */
@media (max-width: 520px) {
    .login-box[b-fbtbavhu2a] {
        padding: 28px 20px 22px;
    }

    .language-selector[b-fbtbavhu2a] {
        top: 10px;
        right: 10px;
        padding: 5px 8px;
    }
}
/* _content/AfriERP/Pages/UserMgt/RegisterUser.razor.rz.scp.css */
.register-page[b-oudt0g6odj] {
    max-width: 1000px;
    margin: 30px auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 3px 12px rgba(0,0,0,0.1);
}

.register-header[b-oudt0g6odj] {
    text-align: center;
    margin-bottom: 25px;
}

    .register-header h1[b-oudt0g6odj] {
        color: #2b3f69;
        margin-bottom: 5px;
    }

    .register-header .subtitle[b-oudt0g6odj] {
        color: #555;
        font-size: 1rem;
    }

.message-box[b-oudt0g6odj] {
    margin: 10px auto 20px;
    padding: 12px 20px;
    max-width: 600px;
    border-radius: 5px;
    font-weight: bold;
    text-align: center;
}

    .message-box.success[b-oudt0g6odj] {
        background-color: #e6f8e6;
        color: #2b7a2b;
        border: 1px solid #2b7a2b;
    }

    .message-box.error[b-oudt0g6odj] {
        background-color: #fce6e6;
        color: #a33;
        border: 1px solid #a33;
    }

.register-container[b-oudt0g6odj] {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.register-section[b-oudt0g6odj] {
    flex: 1 1 300px;
    min-width: 300px;
    padding: 20px;
    border: 1px solid #eee;
    border-radius: 6px;
    background-color: #fafafa;
}

    .register-section h2[b-oudt0g6odj] {
        color: #2b3f69;
        margin-bottom: 15px;
        font-size: 1.2rem;
    }

.form-section[b-oudt0g6odj] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.form-group label[b-oudt0g6odj] {
    font-weight: bold;
    margin-bottom: 4px;
}

.form-control[b-oudt0g6odj] {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.register-actions[b-oudt0g6odj] {
    text-align: center;
    margin-top: 25px;
}

.btn-register[b-oudt0g6odj] {
    background-color: #2b3f69;
    color: #fff;
    padding: 10px 24px;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

    .btn-register:hover[b-oudt0g6odj] {
        background-color: #1f2e50;
    }
/* _content/AfriERP/Pages/WasteMngt/BinManagement.razor.rz.scp.css */
:root[b-48ru8ptetx] {
    --feature-accent: #2f6aa3; /* primary blue */
    --feature-border: #787878; /* border */
    --feature-ink: #2e3c52;
}

/* Overlay centered */
.modal-overlay[b-48ru8ptetx] {
    position: fixed;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center; /* center vertically */
    background: radial-gradient(40% 50% at 50% 40%, color-mix(in srgb, var(--feature-accent) 12%, transparent) 0%, transparent 70%), rgba(0,0,0,.32);
    backdrop-filter: blur(2px);
    z-index: 1050;
}

/* Popup shell */
.modal-content[b-48ru8ptetx] {
    display: flex;
    flex-direction: column;
    width: 80vw; /* 80% width */
    height: 80vh; /* 80% height */
    background: #fff;
    border: 1px solid var(--feature-border);
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(0,0,0,.18);
    overflow: hidden;
}

/* Header */
.modal-header[b-48ru8ptetx] {
    position: sticky;
    top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: linear-gradient(#f7f9fc,#eef2f7);
    border-bottom: 1px solid #eef1f5;
    z-index: 2;
}

.modal-title[b-48ru8ptetx] {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--feature-ink);
}

.modal-close[b-48ru8ptetx] {
    border: 1px solid #e1e6ef;
    background: #fff;
    border-radius: 6px;
    padding: 6px 10px;
    cursor: pointer;
}

    .modal-close:hover[b-48ru8ptetx] {
        background: #f1f1f1;
    }

/* Body (scrollable) */
.modal-form[b-48ru8ptetx] {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 20px;
    padding-bottom: 72px; /* space for footer */
}

/* Footer */
.modal-actions[b-48ru8ptetx] {
    position: sticky;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 16px;
    background: linear-gradient(#f6f8fb,#ffffff);
    border-top: 1px solid var(--feature-border);
    z-index: 2;
}

    .modal-actions .btn[b-48ru8ptetx] {
        padding: 8px 16px;
        border-radius: 6px;
        font-weight: 600;
        cursor: pointer;
    }

.btn.primary[b-48ru8ptetx] {
    background: #2f6aa3;
    color: #fff;
    border: none;
}

    .btn.primary:hover[b-48ru8ptetx] {
        background: #265785;
    }

.btn.danger[b-48ru8ptetx] {
    background: #e74c3c;
    color: #fff;
    border: none;
}

    .btn.danger:hover[b-48ru8ptetx] {
        background: #c0392b;
    }

.btn.secondary[b-48ru8ptetx] {
    background: #f2f4f7;
    color: #333;
    border: 1px solid #ccc;
}

    .btn.secondary:hover[b-48ru8ptetx] {
        background: #e5e7eb;
    }

/* Form grids */
.form-grid.two-col[b-48ru8ptetx] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.form-grid.one-col[b-48ru8ptetx] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

label[b-48ru8ptetx] {
    font-weight: 600;
    margin-bottom: 5px;
    display: block;
    color: #2e3c52;
}

.form-control[b-48ru8ptetx], .form-select[b-48ru8ptetx] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 0.95rem;
}

    .form-control:focus[b-48ru8ptetx], .form-select:focus[b-48ru8ptetx] {
        outline: none;
        border-color: #2f6aa3;
        box-shadow: 0 0 5px rgba(47,106,163,0.3);
    }

/* Tables */
.table[b-48ru8ptetx] {
    width: 100%;
    border-collapse: collapse;
}

    .table th[b-48ru8ptetx], .table td[b-48ru8ptetx] {
        padding: 8px 10px;
        border-bottom: 1px solid #eee;
        text-align: left;
    }

    .table thead th[b-48ru8ptetx] {
        background: #f7f9fc;
        font-weight: 600;
    }

/* Responsive */
@media (max-width: 900px) {
    .modal-content[b-48ru8ptetx] {
        width: 92vw;
        height: 92vh;
    }

    .form-grid.two-col[b-48ru8ptetx] {
        grid-template-columns: 1fr;
    }
}
/* _content/AfriERP/Pages/WasteMngt/WasteMgtLP.razor.rz.scp.css */
.ns3[b-1g3who9x8b] {
    background: whitesmoke;
}

.ns3-topbar[b-1g3who9x8b] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 18px;
    color: #2e3c52;
}

.ns3-title[b-1g3who9x8b] {
    font-weight: 800;
    font-size: 18px;
}

/* 3-column grid like NetSuite */
.ns3-grid[b-1g3who9x8b] {
    display: grid;
    grid-template-columns: 260px minmax(640px,1fr) 340px;
    gap: 14px;
    padding: 0 18px 18px;
}

/* Cards */
.ns3-card[b-1g3who9x8b] {
    background: #fff;
    border: 1px solid #e3e7ee;
    border-radius: 8px;
    box-shadow: 0 1px 1px rgba(16,24,40,.04);
}

.ns3-card-header[b-1g3who9x8b] {
    display: flex;
    justify-content: space-between;
    align-items: end;
    padding: 10px 12px;
    background: linear-gradient(#f7f9fc,#eef2f7);
    border-bottom: 1px solid #eef1f5;
}

    .ns3-card-header h5[b-1g3who9x8b],
    .ns3-card-header h6[b-1g3who9x8b] {
        margin: 0;
        font-weight: 700;
        color: #2e3c52;
    }

/* Left list */
.ns3-list[b-1g3who9x8b] {
    list-style: none;
    margin: 0;
    padding: 8px;
}

    .ns3-list li[b-1g3who9x8b] {
        margin: 4px 0;
    }

.ns3-link[b-1g3who9x8b] {
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #334155;
}

    .ns3-link:hover[b-1g3who9x8b] {
        background: #f3f6fb;
    }

.ns3-doc[b-1g3who9x8b] {
    width: 18px;
    text-align: center;
}

.ns3-ellip[b-1g3who9x8b] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ns3-empty[b-1g3who9x8b] {
    padding: 12px;
    color: #8b99ad;
}

/* Center shortcuts (top strip) */
.ns3-shortcuts[b-1g3who9x8b] {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 10px;
    padding: 12px;
}

.ns3-shortcut[b-1g3who9x8b] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    border-radius: 8px;
    color: #203040;
    font-weight: 700;
    border: 1px solid #e1e6ef;
}

    .ns3-shortcut i[b-1g3who9x8b] {
        font-size: 20px;
    }

    .ns3-shortcut.bg1[b-1g3who9x8b] {
        background: #f2f7e6;
    }

    .ns3-shortcut.bg2[b-1g3who9x8b] {
        background: #e8f4ed;
    }

    .ns3-shortcut.bg3[b-1g3who9x8b] {
        background: #f6efe6;
    }

    .ns3-shortcut.bg4[b-1g3who9x8b] {
        background: #e9f1f8;
    }

/* KPI row */
.ns3-kpis[b-1g3who9x8b] {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 10px;
    padding: 12px;
}

.ns3-kpi[b-1g3who9x8b] {
    border: 1px solid #e1e6ef;
    border-radius: 8px;
    background: #fff;
    padding: 10px;
}

.ns3-kpi-title[b-1g3who9x8b] {
    color: #66758a;
    font-size: .9rem;
}

.ns3-kpi-value[b-1g3who9x8b] {
    font-weight: 800;
    font-size: 1.15rem;
    margin: .2rem 0;
    color: #2e3c52;
}

.ns3-kpi-trend[b-1g3who9x8b] {
    font-weight: 700;
}

    .ns3-kpi-trend.up[b-1g3who9x8b] {
        color: #2a9d4b;
    }

    .ns3-kpi-trend.down[b-1g3who9x8b] {
        color: #c44536;
    }

.ns3-spark[b-1g3who9x8b] {
    height: 28px;
    background: linear-gradient(180deg,#f8fafc,#eef2f7);
    border: 1px solid #e6ebf2;
    border-radius: 6px;
}

/* KPI table */
.ns3-table-wrap[b-1g3who9x8b] {
    padding: 0 12px 12px;
}

.ns3-table[b-1g3who9x8b] {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #e1e6ef;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}

    .ns3-table th[b-1g3who9x8b],
    .ns3-table td[b-1g3who9x8b] {
        padding: .55rem .7rem;
        border-bottom: 1px solid #eef1f5;
        text-align: left;
    }

    .ns3-table th[b-1g3who9x8b] {
        background: linear-gradient(#f7f9fc,#eef2f7);
        color: #2e3c52;
        font-weight: 700;
    }

    .ns3-table .pos[b-1g3who9x8b] {
        color: #2a9d4b;
        font-weight: 700;
    }

    .ns3-table .neg[b-1g3who9x8b] {
        color: #c44536;
        font-weight: 700;
    }

.ns3-linklike[b-1g3who9x8b] {
    color: #2f6aa3;
}

/* Recent tiles grid */
.ns3-recent-grid[b-1g3who9x8b] {
    padding: 12px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 10px;
}

.ns3-recent[b-1g3who9x8b] {
    background: linear-gradient(#fbfcff,#f3f6fb);
    border: 1px solid #e1e6ef;
    border-radius: 8px;
    padding: 12px;
    display: grid;
    grid-template-rows: auto auto 1fr;
    gap: 4px;
    cursor: pointer;
    box-shadow: 0 1px 0 #fff inset;
    transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
    text-align: left;
}

    .ns3-recent:hover[b-1g3who9x8b] {
        transform: translateY(-2px);
        border-color: #cfd9ea;
        box-shadow: 0 6px 16px rgba(46,60,82,.12);
    }

.ns3-recent-emoji[b-1g3who9x8b] {
    font-size: 1.2rem;
}

.ns3-recent-title[b-1g3who9x8b] {
    font-weight: 700;
    color: #2e3c52;
}

.ns3-recent-desc[b-1g3who9x8b] {
    font-size: .85rem;
    color: #6b7a90;
}

.ns3-empty-wide[b-1g3who9x8b] {
    grid-column: 1 / -1;
    text-align: center;
}

/* Right column visuals */
.ns3-meter[b-1g3who9x8b] {
    padding: 18px;
    text-align: center;
}

/* ===== Gauges ===== */
.ns3-gauge[b-1g3who9x8b] {
    --size: 120px; /* size of the circle */
    --pct: 0; /* percentage 0-100 */
    --track: #f3f4f6; /* grey background */
    --fill: #22c55e; /* default = green */

    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    background: conic-gradient(var(--fill) calc(var(--pct)*1%), var(--track) 0);
    -webkit-mask: radial-gradient(transparent 58%, #000 59%);
    mask: radial-gradient(transparent 58%, #000 59%);
    margin: 0 auto 10px auto;
}

    /* Gauge color states */
    .ns3-gauge.green[b-1g3who9x8b] {
        --fill: #22c55e;
    }
    /* healthy */
    .ns3-gauge.yellow[b-1g3who9x8b] {
        --fill: #eab308;
    }
    /* warning */
    .ns3-gauge.red[b-1g3who9x8b] {
        --fill: #ef4444;
    }
/* danger */

.ns3-meter-value[b-1g3who9x8b] {
    font-size: 1.5rem;
    font-weight: bold;
    text-align: center;
    color: #2e3c52;
    margin-top: 8px;
}

.ns3-meter-sub[b-1g3who9x8b] {
    font-size: 0.85rem;
    text-align: center;
    color: #555;
}

/* Bars (optional widget) */
.ns3-bars[b-1g3who9x8b] {
    display: flex;
    gap: 10px;
    align-items: flex-end;
    padding: 18px;
    height: 180px;
}

    .ns3-bars .bar[b-1g3who9x8b] {
        flex: 1;
        background: #d9e3f0;
        border: 1px solid #c8d4e5;
        border-radius: 6px 6px 0 0;
    }

/* Responsive */
@media (max-width: 1200px) {
    .ns3-grid[b-1g3who9x8b] {
        grid-template-columns: 240px 1fr;
    }

    .ns3-right[b-1g3who9x8b] {
        display: none;
    }

    .ns3-recent-grid[b-1g3who9x8b] {
        grid-template-columns: repeat(3,1fr);
    }
}

@media (max-width: 900px) {
    .ns3-grid[b-1g3who9x8b] {
        grid-template-columns: 1fr;
    }

    .ns3-recent-grid[b-1g3who9x8b] {
        grid-template-columns: repeat(2,1fr);
    }

    .ns3-kpis[b-1g3who9x8b] {
        grid-template-columns: repeat(2,1fr);
    }

    .ns3-shortcuts[b-1g3who9x8b] {
        grid-template-columns: repeat(2,1fr);
    }
}

/* Gauge cards grid */
.ns3-gauges[b-1g3who9x8b] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    padding: 10px;
}

.ns3-gauge-card[b-1g3who9x8b] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

/* Gauge colors */
.ns3-gauge.green[b-1g3who9x8b] {
    --fill: #22c55e; /* success */
}

.ns3-gauge.yellow[b-1g3who9x8b] {
    --fill: #eab308; /* warning */
}

.ns3-gauge.red[b-1g3who9x8b] {
    --fill: #ef4444; /* danger */
}

 
/* _content/AfriERP/Shared/ERPLayout.razor.rz.scp.css */
/* Thin top bar */
.ribbon-topbar[b-3lvdakcyd1] {
    height: 28px;
    display: grid;
    grid-template-columns: 120px 1fr auto;
    align-items: center;
    padding: 0 8px;
    background: linear-gradient(#f5f5f7,#e7e7ea);
    border-bottom: 1px solid #d1d1d6;
}
/* Make left area flexible so the module select fits nicely */
.ribbon-topbar[b-3lvdakcyd1] {
    grid-template-columns: max-content 1fr auto; /* was: 120px 1fr auto */
}

.module-select[b-3lvdakcyd1] {
    height: 22px;
    padding: 0 8px;
    font-size: .6rem;
    border: 1px solid #d1d1d6;
    border-radius: 4px;
    background: #fff;
    color: #444;
    margin-left: 6px; /* a little spacing after the nav arrows */
}

    .module-select:focus[b-3lvdakcyd1] {
        outline: none;
        box-shadow: 0 0 0 2px rgba(14,165,233,.25);
        border-color: #0EA5E9;
    }

.topbar-left[b-3lvdakcyd1] {
    display: flex;
    gap: 6px
}

.topbar-center[b-3lvdakcyd1] {
    text-align: center;
    font-size: .65rem;
    color: #666
}

.topbar-right[b-3lvdakcyd1] {
    display: flex;
    gap: 6px
}

.tb-btn[b-3lvdakcyd1] {
    border: none;
    background: transparent;
    padding: 2px 6px;
    cursor: pointer;
    color: #6d6d6d
}

    .tb-btn:hover[b-3lvdakcyd1] {
        background: #ececec;
        border-radius: 4px
    }

.close-btn[b-3lvdakcyd1] {
    color: #cc3b3b
}

/* Tabs row (connects seamlessly to ribbon) */
.ribbon-tabs[b-3lvdakcyd1] {
    display: flex;
    gap: 2px;
    font-size: .7rem;
    font-weight: 900;
    padding: 6px 10px 0 10px;
    background: linear-gradient(#f8f8f9,#ebebee);
    border-bottom: 1px solid #cfcfd4;
}

.ribbon-tab[b-3lvdakcyd1] {
    border: 1px solid transparent;
    border-bottom: none;
    background: transparent;
    padding: 7px 14px;
    border-radius: 6px 6px 0 0;
    font-weight: 600;
    color: #4f4f4f;
    cursor: pointer;
    margin-bottom: -1px; /* pull tab down to overlap the bar border */
}

    .ribbon-tab.active[b-3lvdakcyd1] {
        background: #fff;
        border-color: #cfcfd4;
        color: #2e2e2e;
        position: relative;
        z-index: 2;
    }

/* Ribbon bar exactly touches active tab */
.ribbon-bar[b-3lvdakcyd1] {
    display: flex;
    gap: 10px;
    padding: 10px;
    background: #fff;
    border-top: 1px solid #cfcfd4; /* hidden by active tab due to z-index/margin trick */
    border-bottom: 1px solid #e3e3e3;
    min-height: 116px;
    overflow-x: auto;
}
/* Let left area grow to fit the module tabs */
.ribbon-topbar[b-3lvdakcyd1] {
    grid-template-columns: max-content 1fr auto; /* replaces 120px 1fr auto */
}

/* Module tabs (in topbar-left) */
.module-tabs[b-3lvdakcyd1] {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-left: 8px; /* space after arrows */
}

.module-tab[b-3lvdakcyd1] {
    height: 20px;
    line-height: 18px;
    padding: 0 10px;
    font-size: .6rem;
    border: 1px solid transparent;
    border-radius: 1px; /* pill */
    background: transparent;
    color: #4f4f4f;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: box-shadow .15s ease, background .15s ease, border-color .15s ease, transform .08s ease;
}

    .module-tab:hover[b-3lvdakcyd1] {
        background: #ececec;
    }

    .module-tab.is-active[b-3lvdakcyd1] {
        --accent: #0ea5e9;
        background: rgba(14,165,233,.08);
        border-color: var(--accent);
        color: #222;
        box-shadow: 0 0 0 1px rgba(14,165,233,.25) inset, 0 0 8px rgba(14,165,233,.25);
        transform: translateY(-1px);
    }

    .module-tab:focus-visible[b-3lvdakcyd1] {
        outline: none;
        box-shadow: 0 0 0 1px var(--accent) inset, 0 0 0 2px rgba(14,165,233,.5);
    }

/* Groups */
.ribbon-group[b-3lvdakcyd1] {
    border-right: 1px solid #efefef;
    min-width: 190px;
    padding: 6px 10px 8px 10px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

    .ribbon-group:last-child[b-3lvdakcyd1] {
        border-right: none
    }

.ribbon-items[b-3lvdakcyd1] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: flex-start
}

.ribbon-group-title[b-3lvdakcyd1] {
    text-align: center;
    font-size: .48rem;
    color: #7a7a7a;
    margin-top: 6px
}

/* Actions */
.ribbon-action[b-3lvdakcyd1] {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 6px 8px;
    border: 1px solid #e6e6e6;
    border-radius: 7px;
    background: #fafafa;
    min-width: 120px;
    cursor: pointer;
    box-shadow: 0 1px 0 #fff inset;
    transition: background .15s, border-color .15s, transform .04s;
}

    .ribbon-action:hover[b-3lvdakcyd1] {
        background: #f3f3f3;
        border-color: #d9d9d9
    }

    .ribbon-action:active[b-3lvdakcyd1] {
        transform: translateY(1px)
    }

    .ribbon-action i[b-3lvdakcyd1] {
        font-size: 10px
    }
    /* color comes from inline style per action */
    .ribbon-action .action-text[b-3lvdakcyd1] {
        display: flex;
        flex-direction: column;
        line-height: 0.85
    }

        .ribbon-action .action-text strong[b-3lvdakcyd1] {
            font-size: .68rem;
            color: #333
        }

        .ribbon-action .action-text span[b-3lvdakcyd1] {
            font-size: .58rem;
            color: #8a8a8a
        }

/* Body under ribbon */
.sme-body[b-3lvdakcyd1] {
    padding: 14px;
    background: #f7f7f7;
    min-height: calc(100vh - 170px)
}
/* Full-height app shell: nav fixed in place, body scrolls */
.sme-shell[b-3lvdakcyd1] {
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* prevent page-level scrolling */
}

/* Your existing nav container stays non-scrollable */
.ribbon-window[b-3lvdakcyd1] {
    flex: 0 0 auto;
    position: relative; /* or sticky if you want it to stay at top while page scroll is enabled elsewhere */
    z-index: 10;
}

/* Only the content area scrolls */
.sme-body[b-3lvdakcyd1] {
    flex: 1 1 auto;
    overflow: auto; /* scroll here */
    padding: 14px;
    background: #f7f7f7;
}

/* If you had this before, remove it (it fights the new layout):
   .sme-body{ min-height:calc(100vh - 170px); }
*/
/* --- Tabs --- */
.tab-btn[b-3lvdakcyd1] {
    position: relative;
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 6px 12px;
    background: transparent;
    transition: box-shadow .15s ease, background .15s ease, border-color .15s ease, transform .08s ease;
}

    .tab-btn.is-active[b-3lvdakcyd1] {
        --accent: #0ea5e9; /* fallback accent if none set */
        background: rgba(14,165,233,.08);
        border-color: var(--accent);
        box-shadow: 0 0 0 1px rgba(14,165,233,.25) inset, 0 0 10px rgba(14,165,233,.55);
        transform: translateY(-1px);
    }

    .tab-btn:focus-visible[b-3lvdakcyd1] {
        outline: none;
        box-shadow: 0 0 0 1px var(--accent, #0ea5e9) inset, 0 0 0 2px rgba(14,165,233,.5);
    }

/* --- Ribbon actions --- */
.ribbon-action[b-3lvdakcyd1] {
    position: relative;
    border: 1px solid transparent;
    border-radius: 12px;
    transition: box-shadow .15s ease, background .15s ease, border-color .15s ease, transform .08s ease;
}

    .ribbon-action.is-active[b-3lvdakcyd1] {
        --accent: var(--accent, #22d3ee); /* can be overridden inline from IconColor */
        background: rgba(34,211,238,.08);
        border-color: var(--accent);
        box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 60%, white 40%) inset, 0 0 10px var(--accent);
        transform: translateY(-1px);
    }
/* Fallback if color-mix is not supported */
@supports not (color-mix(in srgb, white, black)) {
    .ribbon-action.is-active[b-3lvdakcyd1] {
        box-shadow: 0 0 0 1px rgba(34,211,238,.5) inset, 0 0 10px var(--accent);
    }
}

.ribbon-action:focus-visible[b-3lvdakcyd1] {
    outline: none;
    box-shadow: 0 0 0 1px var(--accent, #22d3ee) inset, 0 0 0 2px rgba(34,211,238,.5);
}

/* nice little entry pulse when it becomes active */
@keyframes glow-pop-b-3lvdakcyd1 {
    0% {
        box-shadow: 0 0 0 0 var(--accent, #22d3ee);
    }

    100% {
        box-shadow: 0 0 16px var(--accent, #22d3ee);
    }
}

.ribbon-action.is-active[b-3lvdakcyd1],
.tab-btn.is-active[b-3lvdakcyd1] {
    animation: glow-pop-b-3lvdakcyd1 .25s ease-out;
}
/* _content/AfriERP/Shared/SearchHead/ItemsTypehead.razor.rz.scp.css */
.typeahead[b-8lsc5t86i0] {
    position: relative;
}

.typeahead-list[b-8lsc5t86i0] {
    position: absolute;
    z-index: 1000;
    background: white;
    border: 1px solid #ccc;
    width: 100%;
    max-height: 250px;
    overflow-y: auto;
    list-style: none;
    padding: 0;
    margin: 0;
}

.typeahead-item[b-8lsc5t86i0] {
    padding: 8px 12px;
    cursor: pointer;
}

    .typeahead-item:hover[b-8lsc5t86i0],
    .typeahead-item.active[b-8lsc5t86i0] {
        background-color: lightgray;
        color: white;
    }

mark[b-8lsc5t86i0] {
    background-color: yellow;
    color: black;
    font-weight: bold;
}
/* _content/AfriERP/Shared/SearchHead/SupplierTypehead.razor.rz.scp.css */
.typeahead[b-ilaqcs3a39] {
    position: relative;
}

    .typeahead .typeahead-list[b-ilaqcs3a39] {
        position: absolute;
        z-index: 40;
        left: 0;
        right: 0;
        top: calc(100% + 2px);
        background: #fff;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        max-height: 260px;
        overflow: auto;
        padding: 6px 0;
        margin: 0;
        list-style: none;
        box-shadow: 0 8px 20px rgba(0,0,0,.08);
    }

    .typeahead .typeahead-item[b-ilaqcs3a39] {
        padding: 8px 10px;
        cursor: pointer;
    }

        .typeahead .typeahead-item:hover[b-ilaqcs3a39],
        .typeahead .typeahead-item.active[b-ilaqcs3a39] {
            background: #f3f4f6;
        }
/* _content/AfriERP/Shared/SMELayout.razor.rz.scp.css */
/* ===============================
   SHELL
   =============================== */

.sme-shell[b-4tc9nuqmv6] {
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ===============================
   TOP BAR
   =============================== */

.ribbon-topbar[b-4tc9nuqmv6] {
    height: 26px;
    display: grid;
    grid-template-columns: 120px 1fr auto;
    align-items: center;
    padding: 0 8px;
    background: linear-gradient(#f5f5f7,#e7e7ea);
    border-bottom: 1px solid #d1d1d6;
}

.topbar-left[b-4tc9nuqmv6],
.topbar-right[b-4tc9nuqmv6] {
    display: flex;
    gap: 6px;
}

.topbar-center[b-4tc9nuqmv6] {
    text-align: center;
    font-size: .85rem;
    color: #666;
}

.tb-btn[b-4tc9nuqmv6] {
    border: none;
    background: transparent;
    padding: 2px 6px;
    cursor: pointer;
    color: #6d6d6d;
}

    .tb-btn:hover[b-4tc9nuqmv6] {
        background: #ececec;
        border-radius: 4px;
    }

.close-btn[b-4tc9nuqmv6] {
    color: #cc3b3b;
}

/* ===============================
   TABS
   =============================== */

.ribbon-tabs[b-4tc9nuqmv6] {
    display: flex;
    gap: 2px;
    padding: 4px 8px 0;
    background: linear-gradient(#f8f8f9,#ebebee);
    border-bottom: 1px solid #cfcfd4;
}

.tab-btn[b-4tc9nuqmv6] {
    border: 1px solid transparent;
    border-bottom: none;
    padding: 7px 14px;
    border-radius: 6px 6px 0 0;
    font-weight: 600;
    background: transparent;
    cursor: pointer;
}

    .tab-btn.is-active[b-4tc9nuqmv6] {
        background: #fff;
        border-color: #cfcfd4;
    }

/* ===============================
   RIBBON
   =============================== */

/*.ribbon-bar {
    display: flex;
    gap: 12px;
    padding: 10px;
    background: #fff;
    border-bottom: 1px solid #e3e3e3;
    overflow-x: auto;
}*/
/* ===============================
   RIBBON BAR – CONTENT-DRIVEN WIDTH
   =============================== */

.ribbon-bar[b-4tc9nuqmv6] {
    display: flex;
    flex-wrap: wrap; /* ALLOW WRAPPING */
    gap: 12px;
    padding: 8px 10px;
    background: #fff;
    border-bottom: 1px solid #e3e3e3;
    width: 100%;
    overflow-x: hidden; /* ABSOLUTE RULE */
}


    .ribbon-bar.collapsed[b-4tc9nuqmv6] {
        max-height: 0;
        padding: 0;
        overflow: hidden;
        border: none;
    }

/* ===============================
   GROUP
   =============================== */

.ribbon-group[b-4tc9nuqmv6] {
    flex: 1 1 320px; /* WRAPS when space is tight */
    max-width: 480px;
    padding: 6px 10px 4px;
    border-right: 1px solid #e5e5e5;
    display: flex;
    flex-direction: column;
}

    .ribbon-group:last-child[b-4tc9nuqmv6] {
        border-right: none;
    }
@media (max-width: 1400px) {

    .ribbon-group[b-4tc9nuqmv6] {
        min-width: 360px;
    }

    .ribbon-items[b-4tc9nuqmv6] {
        grid-template-columns: repeat(auto-fit, 52px);
        grid-auto-rows: 80px;
        max-height: calc(80px * 2);
    }

    .ribbon-action[b-4tc9nuqmv6] {
        max-width: 72px;
        height: 80px;
    }

    .ribbon-icon[b-4tc9nuqmv6] {
        font-size: 22px;
    }

    .ribbon-label[b-4tc9nuqmv6] {
        font-size: 0.68rem;
    }
}
@media (max-width: 1200px) {

    .ribbon-group[b-4tc9nuqmv6] {
        min-width: 300px;
    }

    .ribbon-items[b-4tc9nuqmv6] {
        grid-template-columns: repeat(auto-fit, 48px);
        grid-auto-rows: 72px;
        max-height: calc(72px * 2);
    }

    .ribbon-action[b-4tc9nuqmv6] {
        max-width: 64px;
        height: 72px;
    }

    .ribbon-icon[b-4tc9nuqmv6] {
        font-size: 20px;
    }

    .ribbon-label[b-4tc9nuqmv6] {
        font-size: 0.64rem;
    }
}
@media (max-width: 992px) {

    .ribbon-group[b-4tc9nuqmv6] {
        min-width: 240px;
    }

    .ribbon-items[b-4tc9nuqmv6] {
        grid-template-columns: repeat(auto-fit, 44px);
        grid-auto-rows: 64px;
        max-height: calc(64px * 2);
    }

    .ribbon-action[b-4tc9nuqmv6] {
        max-width: 56px;
        height: 64px;
    }

    .ribbon-icon[b-4tc9nuqmv6] {
        font-size: 18px;
    }

    .ribbon-label[b-4tc9nuqmv6] {
        font-size: 0.6rem;
        line-height: 1.05;
    }
}
@media (max-width: 768px) {
    .ribbon-group[b-4tc9nuqmv6] {
        min-width: 100%;
        width: 100%;
    }
}

/* ===============================
   RIBBON GROUP LAYOUT (NO OVERLAP)
   =============================== */
.ribbon-items[b-4tc9nuqmv6] {
    display: grid;
    /* Auto-fill as many icons as fit */
    grid-template-columns: repeat(auto-fit, minmax(56px, 1fr));
    gap: 10px;
    align-items: start;
}

/*.ribbon-items {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    align-items: start;
}*/

/*.ribbon-items {
    display: flex;
    gap: 10px;
}*/

.ribbon-group-title[b-4tc9nuqmv6] {
    margin-top: 4px;
    text-align: center;
    font-size: .65rem;
    color: #666;
    border-top: 1px solid #eaeaea;
    padding-top: 3px;
}

/* ===============================
   WORD STYLE ACTION
   =============================== */

.ribbon-action[b-4tc9nuqmv6] {
    width: 78px;
    height: 86px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
}

    .ribbon-action:hover[b-4tc9nuqmv6] {
        background: #eef5ff;
        border-color: #cbdaf7;
    }

    .ribbon-action.is-active[b-4tc9nuqmv6] {
        background: #e3f2fd;
        border-color: var(--accent, #0ea5e9);
    }

.ribbon-icon[b-4tc9nuqmv6] {
    font-size: 26px;
    margin-bottom: 6px;
}

.ribbon-label[b-4tc9nuqmv6] {
    font-size: .72rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.1;
    color: #333;
}

/* ===============================
   BODY
   =============================== */

.sme-body[b-4tc9nuqmv6] {
    flex: 1;
    overflow: auto;
    padding: 14px;
    background: #f7f7f7;
}

/* ===============================
   MOBILE
   =============================== */

@media (max-width: 768px) {
    .ribbon-bar[b-4tc9nuqmv6] {
        flex-direction: column;
    }

    .ribbon-items[b-4tc9nuqmv6] {
        flex-wrap: wrap;
        justify-content: center;
    }

    .ribbon-group[b-4tc9nuqmv6] {
        border-right: none;
        border-bottom: 1px solid #e5e5e5;
    }
}


/* ======================================================
   ADAPTIVE RIBBON SCALING (WORD-LIKE BEHAVIOR)
   ====================================================== */

/* DEFAULT (≤ 4 buttons) — LARGE */
.ribbon-action[b-4tc9nuqmv6] {
    max-width: 78px;
    height: 86px;
    justify-self: center;
}


.ribbon-icon[b-4tc9nuqmv6] {
    font-size: 26px;
}

.ribbon-label[b-4tc9nuqmv6] {
    font-size: 0.72rem;
}

/* ======================================================
   IF GROUP HAS MORE THAN 4 ACTIONS → COMPACT MODE
   ====================================================== */

/* When a group has at least 5 buttons */
.ribbon-items:has(.ribbon-action:nth-child(5)) .ribbon-action[b-4tc9nuqmv6] {
    width: 64px;
    height: 72px;
}

.ribbon-items:has(.ribbon-action:nth-child(5)) .ribbon-icon[b-4tc9nuqmv6] {
    font-size: 22px;
}

.ribbon-items:has(.ribbon-action:nth-child(5)) .ribbon-label[b-4tc9nuqmv6] {
    font-size: 0.65rem;
}

/* ======================================================
   IF GROUP HAS MORE THAN 7 ACTIONS → EXTRA COMPACT
   ====================================================== */

.ribbon-items:has(.ribbon-action:nth-child(8)) .ribbon-action[b-4tc9nuqmv6] {
    width: 56px;
    height: 64px;
}

.ribbon-items:has(.ribbon-action:nth-child(8)) .ribbon-icon[b-4tc9nuqmv6] {
    font-size: 18px;
}

.ribbon-items:has(.ribbon-action:nth-child(8)) .ribbon-label[b-4tc9nuqmv6] {
    font-size: 0.6rem;
    line-height: 1.05;
}

/* If group has more than 8 actions → compact icons */
.ribbon-items:has(.ribbon-action:nth-child(9)) .ribbon-action[b-4tc9nuqmv6] {
    width: 64px;
    height: 72px;
}

.ribbon-items:has(.ribbon-action:nth-child(9)) .ribbon-icon[b-4tc9nuqmv6] {
    font-size: 20px;
}

.ribbon-items:has(.ribbon-action:nth-child(9)) .ribbon-label[b-4tc9nuqmv6] {
    font-size: 0.65rem;
}
/* ===============================
   RIBBON TOGGLE (RIGHT-ALIGNED)
   =============================== */

.ribbon-toggle[b-4tc9nuqmv6] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    background: #f8f8f9;
    border-bottom: 1px solid #cfcfd4;
}

    /* Buttons */
    .ribbon-toggle button[b-4tc9nuqmv6] {
        border: 1px solid #d0d0d0;
        background: #ffffff;
        cursor: pointer;
        padding: 4px 6px;
        font-size: 14px;
        border-radius: 4px;
        color: #444;
    }

        .ribbon-toggle button:hover[b-4tc9nuqmv6] {
            background: #eef5ff;
            border-color: #9ecbff;
        }

/* Pin state */
.pin-btn.is-pinned[b-4tc9nuqmv6] {
    color: #0ea5e9;
    border-color: #0ea5e9;
}

/* ======================================================
   14-INCH LAPTOP OPTIMIZATION (1366px–1440px)
   ====================================================== */
@media (max-width: 1440px) and (max-height: 900px) {

    /* Reduce overall ribbon vertical footprint */
    .ribbon-bar[b-4tc9nuqmv6] {
        padding: 6px 8px;
    }

    /* Reduce group width aggressively */
    .ribbon-group[b-4tc9nuqmv6] {
        min-width: 300px;
        padding: 4px 8px 3px;
    }

    /* Force tighter grid */
    .ribbon-items[b-4tc9nuqmv6] {
        grid-template-columns: repeat(auto-fit, minmax(48px, 1fr));
        grid-auto-rows: 68px;
        max-height: calc(68px * 2);
        gap: 8px;
    }

    /* Actions become shorter */
    .ribbon-action[b-4tc9nuqmv6] {
        width: 64px;
        height: 68px;
    }

    .ribbon-icon[b-4tc9nuqmv6] {
        font-size: 20px;
        margin-bottom: 4px;
    }

    .ribbon-label[b-4tc9nuqmv6] {
        font-size: 0.62rem;
        line-height: 1.05;
    }

    /* Compress titles */
    .ribbon-group-title[b-4tc9nuqmv6] {
        font-size: 0.6rem;
        padding-top: 2px;
        margin-top: 2px;
    }
}




/* _content/AfriERP/Shared/Spinner.razor.rz.scp.css */
/* Full-screen app overlay (ribbon-themed) */
.spinner-overlay[b-y591v1guri] {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    /* light blur + blue-tinted veil like the ribbon palette */
    background: radial-gradient(40% 50% at 50% 40%, color-mix(in srgb, var(--feature-accent) 12%, transparent) 0%, transparent 70%), rgba(0,0,0,.28);
    backdrop-filter: blur(2px);
}

/* Spinner with blue glow */
.spinner[b-y591v1guri] {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 6px solid color-mix(in srgb, var(--feature-accent) 25%, transparent);
    border-top-color: var(--feature-accent);
    animation: spin-b-y591v1guri 1s linear infinite, spinner-glow-b-y591v1guri .9s ease-in-out infinite alternate;
    box-shadow: 0 0 0 1px rgba(255,255,255,.25) inset;
}

/* Optional label (centered under spinner) */
.spinner-label[b-y591v1guri] {
    margin-top: 12px;
    text-align: center;
    color: #fff;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0,0,0,.35);
}

@keyframes spin-b-y591v1guri {
    to {
        transform: rotate(360deg);
    }
}

@keyframes spinner-glow-b-y591v1guri {
    from {
        box-shadow: 0 0 10px color-mix(in srgb, var(--feature-accent) 55%, transparent);
    }

    to {
        box-shadow: 0 0 18px color-mix(in srgb, var(--feature-accent) 75%, transparent);
    }
}
/* _content/AfriERP/Shared/Toast.razor.rz.scp.css */
.toast-container[b-vf6pl46j1u] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 3050;
    width: 100vw;
    display: flex;
    justify-content: center;
    padding: 0 0 14px 0;
}

.toast-message[b-vf6pl46j1u] {
    flex: 1;
    margin: 0 12px;
    padding: 5px 10px;
    border-radius: 8px;
    font-weight: 500;
    font-size: .85rem;
    color: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,.15);
    opacity: 0;
    transform: translateY(12px);
    animation: fadeIn-b-vf6pl46j1u .3s ease-out forwards, fadeOut-b-vf6pl46j1u .4s ease-in forwards;
    animation-delay: 0s, 3s; /* first anim runs instantly, fadeOut after 3s */
}

    /* Keep original colors but softened */
    .toast-message.info[b-vf6pl46j1u] {
        background: #2196f3; /* same blue */
        background: linear-gradient(180deg, #42a5f5, #2196f3);
    }

    .toast-message.success[b-vf6pl46j1u] {
        background: #4caf50; /* same green */
        background: linear-gradient(180deg, #66bb6a, #4caf50);
    }

    .toast-message.warning[b-vf6pl46j1u] {
        background: #ffc107; /* same yellow */
        background: linear-gradient(180deg, #ffd54f, #ffc107);
        color: #333;
    }

    .toast-message.error[b-vf6pl46j1u] {
        background: #f44336; /* same red */
        background: linear-gradient(180deg, #ef5350, #f44336);
    }

    /* Close button */
    .toast-message .close-btn[b-vf6pl46j1u] {
        background: transparent;
        border: none;
        font-size: 16px;
        font-weight: bold;
        color: rgba(255,255,255,.85);
        cursor: pointer;
        margin-left: 12px;
    }

/* Fade in/out animations */
@keyframes fadeIn-b-vf6pl46j1u {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeOut-b-vf6pl46j1u {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(20px);
    }
}