/* /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);
}



/* 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: 1080px;
    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;
    }
/* /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;
        }
/* /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);
    }
/* /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;
}
/* /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;
}
/* /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;
}
/* /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;
    }
/* /Pages/Documents/Comp_InitiateFlow.razor.rz.scp.css */
/* ============================================================
   Comp_InitiateFlow — Initiate Workflow page
   Scoped styles — uses if- prefix
   ============================================================ */

/* ── Shell ──────────────────────────────────────────────────── */
.if-shell[b-1lpfpvw7d7] {
    max-width: 780px;
    margin: 0 auto;
    padding: 28px 20px 48px;
}

/* ── Loading state ──────────────────────────────────────────── */
.if-loading[b-1lpfpvw7d7] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 32px 0;
    color: #64748b;
    font-size: 14px;
}

    .if-loading i[b-1lpfpvw7d7] {
        font-size: 18px;
        color: #2563eb;
    }

/* ── Page header ────────────────────────────────────────────── */
.if-page-header[b-1lpfpvw7d7] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

.if-header-icon-tile[b-1lpfpvw7d7] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(37, 99, 235, .25);
}

    .if-header-icon-tile i[b-1lpfpvw7d7] {
        color: #fff;
        font-size: 20px;
    }

.if-header-text h1[b-1lpfpvw7d7] {
    font-size: 20px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 2px;
    line-height: 1.2;
}

.if-header-text span[b-1lpfpvw7d7] {
    font-size: 13px;
    color: #64748b;
}

/* ── Info banner ────────────────────────────────────────────── */
.if-info-banner[b-1lpfpvw7d7] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    font-size: 13px;
    color: #1e40af;
    margin-bottom: 20px;
}

    .if-info-banner i[b-1lpfpvw7d7] {
        font-size: 15px;
        margin-top: 1px;
        flex-shrink: 0;
    }

/* ── Card ───────────────────────────────────────────────────── */
.if-card[b-1lpfpvw7d7] {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(15, 23, 42, .06);
    overflow: hidden;
}

.if-card-section[b-1lpfpvw7d7] {
    padding: 24px 24px 20px;
}

/* ── Section title ──────────────────────────────────────────── */
.if-section-title[b-1lpfpvw7d7] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin: 0 0 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f1f5f9;
}

    .if-section-title i[b-1lpfpvw7d7] {
        color: #2563eb;
        font-size: 13px;
    }

/* ── Form grid ──────────────────────────────────────────────── */
.if-form-grid[b-1lpfpvw7d7] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 24px;
}

/* ── Field ──────────────────────────────────────────────────── */
.if-field[b-1lpfpvw7d7] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.if-label[b-1lpfpvw7d7] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: .4px;
}

    .if-label i[b-1lpfpvw7d7] {
        color: #2563eb;
        font-size: 11px;
    }

.if-label-muted[b-1lpfpvw7d7] {
    color: #94a3b8 !important;
}

    .if-label-muted i[b-1lpfpvw7d7] {
        color: #94a3b8 !important;
    }

/* ── Select wrapper (custom chevron) ────────────────────────── */
.if-select-wrap[b-1lpfpvw7d7] {
    position: relative;
    display: flex;
    align-items: center;
}

.if-select[b-1lpfpvw7d7] {
    width: 100%;
    height: 38px;
    padding: 0 36px 0 12px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #fff;
    font-size: 13.5px;
    color: #0f172a;
    font-family: inherit;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    transition: border-color .18s, box-shadow .18s;
}

    .if-select:focus[b-1lpfpvw7d7] {
        outline: none;
        border-color: #2563eb;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
    }

    .if-select:disabled[b-1lpfpvw7d7] {
        background: #f8fafc;
        color: #94a3b8;
        cursor: not-allowed;
        border-color: #e2e8f0;
    }

.if-select-chevron[b-1lpfpvw7d7] {
    position: absolute;
    right: 11px;
    font-size: 11px;
    color: #94a3b8;
    pointer-events: none;
}

.if-select-wrap--disabled .if-select-chevron[b-1lpfpvw7d7] {
    opacity: .4;
}

.if-hint[b-1lpfpvw7d7] {
    font-size: 11.5px;
    color: #94a3b8;
    margin-top: -2px;
}

/* ── Card footer ────────────────────────────────────────────── */
.if-card-footer[b-1lpfpvw7d7] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 24px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
}

.if-start-btn[b-1lpfpvw7d7] {
    min-width: 160px;
}

.if-not-ready[b-1lpfpvw7d7] {
    font-size: 12.5px;
    color: #94a3b8;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 640px) {
    .if-shell[b-1lpfpvw7d7] {
        padding: 16px 12px 32px;
    }

    .if-form-grid[b-1lpfpvw7d7] {
        grid-template-columns: 1fr;
    }

    .if-card-footer[b-1lpfpvw7d7] {
        flex-direction: column;
        align-items: stretch;
    }

    .if-start-btn[b-1lpfpvw7d7] {
        width: 100%;
    }
}
/* /Pages/Documents/Comp_WorkFlow_Account.razor.rz.scp.css */
/* ============================================================
   Comp_WorkFlow_Account — Workflows list page
   Scoped styles — wfa- prefix
   ============================================================ */

/* ── Shell ──────────────────────────────────────────────────── */
.wfa-shell[b-coqq9ls04c] {
    padding: 24px 20px 48px;
}

/* ── Page header ────────────────────────────────────────────── */
.wfa-page-header[b-coqq9ls04c] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
    flex-wrap: wrap;
}

.wfa-header-icon-tile[b-coqq9ls04c] {
    width: 44px;
    height: 44px;
    border-radius: 11px;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(37, 99, 235, .22);
}

    .wfa-header-icon-tile i[b-coqq9ls04c] {
        color: #fff;
        font-size: 18px;
    }

.wfa-header-text[b-coqq9ls04c] {
    flex: 1;
    min-width: 0;
}

    .wfa-header-text h1[b-coqq9ls04c] {
        font-size: 19px;
        font-weight: 700;
        color: #0f172a;
        margin: 0 0 2px;
        line-height: 1.2;
    }

    .wfa-header-text span[b-coqq9ls04c] {
        font-size: 13px;
        color: #64748b;
    }

.wfa-header-actions[b-coqq9ls04c] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}

/* ── Search ─────────────────────────────────────────────────── */
.wfa-search-wrap[b-coqq9ls04c] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 12px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    height: 38px;
    max-width: 360px;
    margin-bottom: 16px;
    transition: border-color .18s, box-shadow .18s;
}

    .wfa-search-wrap:focus-within[b-coqq9ls04c] {
        border-color: #2563eb;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, .1);
    }

.wfa-search-icon[b-coqq9ls04c] {
    color: #94a3b8;
    font-size: 13px;
    flex-shrink: 0;
}

/* ── Table ──────────────────────────────────────────────────── */
.wfa-table-wrap[b-coqq9ls04c] {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 6px rgba(15, 23, 42, .05);
}

.wfa-table[b-coqq9ls04c] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
    color: #0f172a;
}

    .wfa-table thead tr[b-coqq9ls04c] {
        background: #f8fafc;
        border-bottom: 1px solid #e2e8f0;
    }

    .wfa-table th[b-coqq9ls04c] {
        padding: 11px 16px;
        font-size: 11.5px;
        font-weight: 600;
        color: #64748b;
        text-transform: uppercase;
        letter-spacing: .45px;
        white-space: nowrap;
    }

    .wfa-table tbody tr[b-coqq9ls04c] {
        border-bottom: 1px solid #f1f5f9;
        transition: background .14s;
    }

    .wfa-table tbody tr:last-child[b-coqq9ls04c] {
        border-bottom: none;
    }

    .wfa-table tbody tr:hover[b-coqq9ls04c] {
        background: #f8fafc;
    }

    .wfa-table td[b-coqq9ls04c] {
        padding: 12px 16px;
        vertical-align: middle;
    }

.col-center[b-coqq9ls04c] {
    text-align: center;
}

.col-actions[b-coqq9ls04c] {
    text-align: right;
    white-space: nowrap;
    width: 90px;
}

/* Name cell */
.wfa-name-cell[b-coqq9ls04c] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.wfa-name-icon[b-coqq9ls04c] {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .wfa-name-icon i[b-coqq9ls04c] {
        font-size: 13px;
        color: #2563eb;
    }

.wfa-name-text[b-coqq9ls04c] {
    font-weight: 600;
    color: #0f172a;
}

.wfa-desc[b-coqq9ls04c] {
    color: #475569;
    font-size: 13px;
}

.wfa-muted[b-coqq9ls04c] {
    color: #cbd5e1;
}

/* Empty row */
.wfa-empty-row[b-coqq9ls04c] {
    text-align: center;
    padding: 40px 0 !important;
    color: #94a3b8;
    font-size: 13.5px;
}

    .wfa-empty-row i[b-coqq9ls04c] {
        display: block;
        font-size: 28px;
        margin-bottom: 10px;
        color: #cbd5e1;
    }

/* ── Toggle switch ──────────────────────────────────────────── */
.wfa-toggle[b-coqq9ls04c] {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

    .wfa-toggle input[b-coqq9ls04c] {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
    }

.wfa-toggle-track[b-coqq9ls04c] {
    width: 36px;
    height: 20px;
    background: #cbd5e1;
    border-radius: 10px;
    transition: background .18s;
    position: relative;
    display: inline-block;
}

    .wfa-toggle-track[b-coqq9ls04c]::after {
        content: '';
        position: absolute;
        top: 3px;
        left: 3px;
        width: 14px;
        height: 14px;
        background: #fff;
        border-radius: 50%;
        transition: transform .18s;
        box-shadow: 0 1px 3px rgba(0,0,0,.2);
    }

.wfa-toggle input:checked + .wfa-toggle-track[b-coqq9ls04c] {
    background: #2563eb;
}

.wfa-toggle input:checked + .wfa-toggle-track[b-coqq9ls04c]::after {
    transform: translateX(16px);
}

/* ── Modal field ────────────────────────────────────────────── */
.wfa-modal-field[b-coqq9ls04c] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.wfa-modal-label[b-coqq9ls04c] {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: .4px;
}

.wfa-textarea[b-coqq9ls04c] {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 13px;
    color: #0f172a;
    background: #fff;
    resize: vertical;
    font-family: inherit;
    transition: border-color .18s, box-shadow .18s;
}

    .wfa-textarea:focus[b-coqq9ls04c] {
        outline: none;
        border-color: #2563eb;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
    }

.wfa-validation[b-coqq9ls04c] {
    margin: 0 0 10px;
    font-size: 12.5px;
    color: #dc2626;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 640px) {
    .wfa-shell[b-coqq9ls04c] {
        padding: 14px 10px 32px;
    }

    .wfa-page-header[b-coqq9ls04c] {
        gap: 10px;
    }

    .wfa-search-wrap[b-coqq9ls04c] {
        max-width: 100%;
    }

    .wfa-table th[b-coqq9ls04c],
    .wfa-table td[b-coqq9ls04c] {
        padding: 9px 10px;
    }
}
/* /Pages/Documents/Comp_WorkFlow_LookUp.razor.rz.scp.css */
/* ============================================================
   Comp_WorkFlow_LookUp — Workflow Actions list page
   Scoped styles — wfl- prefix
   ============================================================ */

/* ── Shell ──────────────────────────────────────────────────── */
.wfl-shell[b-szwa58deuy] {
    padding: 24px 20px 48px;
}

/* ── Page header ────────────────────────────────────────────── */
.wfl-page-header[b-szwa58deuy] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
    flex-wrap: wrap;
}

.wfl-header-icon-tile[b-szwa58deuy] {
    width: 44px;
    height: 44px;
    border-radius: 11px;
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(124, 58, 237, .22);
}

    .wfl-header-icon-tile i[b-szwa58deuy] {
        color: #fff;
        font-size: 18px;
    }

.wfl-header-text[b-szwa58deuy] {
    flex: 1;
    min-width: 0;
}

    .wfl-header-text h1[b-szwa58deuy] {
        font-size: 19px;
        font-weight: 700;
        color: #0f172a;
        margin: 0 0 2px;
        line-height: 1.2;
    }

    .wfl-header-text span[b-szwa58deuy] {
        font-size: 13px;
        color: #64748b;
    }

.wfl-header-actions[b-szwa58deuy] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}

/* ── Search ─────────────────────────────────────────────────── */
.wfl-search-wrap[b-szwa58deuy] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 12px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    height: 38px;
    max-width: 360px;
    margin-bottom: 16px;
    transition: border-color .18s, box-shadow .18s;
}

    .wfl-search-wrap:focus-within[b-szwa58deuy] {
        border-color: #7c3aed;
        box-shadow: 0 0 0 3px rgba(124, 58, 237, .1);
    }

.wfl-search-icon[b-szwa58deuy] {
    color: #94a3b8;
    font-size: 13px;
    flex-shrink: 0;
}

.wfl-search-input[b-szwa58deuy] {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-size: 13.5px;
    color: #0f172a;
    font-family: inherit;
}

    .wfl-search-input[b-szwa58deuy]::placeholder {
        color: #94a3b8;
    }

/* ── Table ──────────────────────────────────────────────────── */
.wfl-table-wrap[b-szwa58deuy] {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 6px rgba(15, 23, 42, .05);
}

.wfl-table[b-szwa58deuy] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
    color: #0f172a;
}

    .wfl-table thead tr[b-szwa58deuy] {
        background: #f8fafc;
        border-bottom: 1px solid #e2e8f0;
    }

    .wfl-table th[b-szwa58deuy] {
        padding: 11px 16px;
        font-size: 11.5px;
        font-weight: 600;
        color: #64748b;
        text-transform: uppercase;
        letter-spacing: .45px;
        white-space: nowrap;
    }

    .wfl-table tbody tr[b-szwa58deuy] {
        border-bottom: 1px solid #f1f5f9;
        transition: background .14s;
    }

    .wfl-table tbody tr:last-child[b-szwa58deuy] {
        border-bottom: none;
    }

    .wfl-table td[b-szwa58deuy] {
        padding: 12px 16px;
        vertical-align: middle;
    }

.wfl-clickable-row[b-szwa58deuy] {
    cursor: pointer;
}

    .wfl-clickable-row:hover[b-szwa58deuy] {
        background: #faf5ff;
    }

.col-center[b-szwa58deuy] {
    text-align: center;
}

/* Action name badge */
.wfl-name-cell[b-szwa58deuy] {
    display: flex;
    align-items: center;
}

.wfl-action-badge[b-szwa58deuy] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 8px;
    background: #f5f3ff;
    border: 1px solid #ddd6fe;
    border-radius: 20px;
    font-size: 12.5px;
    font-weight: 600;
    color: #5b21b6;
}

    .wfl-action-badge i[b-szwa58deuy] {
        font-size: 11px;
        color: #7c3aed;
    }

.wfl-desc[b-szwa58deuy] {
    color: #475569;
    font-size: 13px;
}

.wfl-muted[b-szwa58deuy] {
    color: #cbd5e1;
}

/* Empty row */
.wfl-empty-row[b-szwa58deuy] {
    text-align: center;
    padding: 40px 0 !important;
    color: #94a3b8;
    font-size: 13.5px;
}

    .wfl-empty-row i[b-szwa58deuy] {
        display: block;
        font-size: 28px;
        margin-bottom: 10px;
        color: #ddd6fe;
    }

/* ── Toggle switch ──────────────────────────────────────────── */
.wfl-toggle[b-szwa58deuy] {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

    .wfl-toggle input[b-szwa58deuy] {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
    }

.wfl-toggle-track[b-szwa58deuy] {
    width: 36px;
    height: 20px;
    background: #cbd5e1;
    border-radius: 10px;
    transition: background .18s;
    position: relative;
    display: inline-block;
}

    .wfl-toggle-track[b-szwa58deuy]::after {
        content: '';
        position: absolute;
        top: 3px;
        left: 3px;
        width: 14px;
        height: 14px;
        background: #fff;
        border-radius: 50%;
        transition: transform .18s;
        box-shadow: 0 1px 3px rgba(0,0,0,.2);
    }

.wfl-toggle input:checked + .wfl-toggle-track[b-szwa58deuy] {
    background: #7c3aed;
}

.wfl-toggle input:checked + .wfl-toggle-track[b-szwa58deuy]::after {
    transform: translateX(16px);
}

/* ── Modal fields ───────────────────────────────────────────── */
.wfl-modal-field[b-szwa58deuy] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.wfl-modal-label[b-szwa58deuy] {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: .4px;
}

.wfl-textarea[b-szwa58deuy] {
    width: 100%;
    padding: 9px 11px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 13px;
    color: #0f172a;
    background: #fff;
    resize: vertical;
    font-family: inherit;
    min-height: 72px;
    transition: border-color .18s, box-shadow .18s;
}

    .wfl-textarea:focus[b-szwa58deuy] {
        outline: none;
        border-color: #7c3aed;
        box-shadow: 0 0 0 3px rgba(124, 58, 237, .12);
    }

/* Checkbox row */
.wfl-check-row[b-szwa58deuy] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    color: #0f172a;
    cursor: pointer;
    font-weight: 500;
    padding: 4px 0;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 640px) {
    .wfl-shell[b-szwa58deuy] {
        padding: 14px 10px 32px;
    }

    .wfl-search-wrap[b-szwa58deuy] {
        max-width: 100%;
    }

    .wfl-table th[b-szwa58deuy],
    .wfl-table td[b-szwa58deuy] {
        padding: 9px 10px;
    }
}
/* /Pages/Documents/Comp_WorkFlow_Steps.razor.rz.scp.css */
/* ================================================================
   Comp_WorkFlow_Steps.razor.css
   Scoped styles for the Workflow Steps management page
   ================================================================ */

/* ── Page header ─────────────────────────────────────────────── */
.wf-page-header[b-t4v8h2j0pu] {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 28px;
}

.wf-header-icon-tile[b-t4v8h2j0pu] {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    background: linear-gradient(135deg, #2563eb 0%, #60a5fa 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.30);
}

.wf-header-text h2[b-t4v8h2j0pu] {
    font-size: 1.35rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 3px;
}

.wf-header-text span[b-t4v8h2j0pu] {
    font-size: 0.83rem;
    color: #64748b;
}

/* ── Search ──────────────────────────────────────────────────── */
.wf-search-wrap[b-t4v8h2j0pu] {
    position: relative;
    max-width: 420px;
    margin-bottom: 24px;
}

.wf-search-icon[b-t4v8h2j0pu] {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 0.85rem;
    pointer-events: none;
    z-index: 1;
}

/* Push Radzen input text away from icon */
.wf-search-wrap :global(.rz-textbox)[b-t4v8h2j0pu] {
    padding-left: 2.2rem !important;
}

/* ── Workflow list ────────────────────────────────────────────── */
.wf-list[b-t4v8h2j0pu] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── Workflow card ───────────────────────────────────────────── */
.wf-card[b-t4v8h2j0pu] {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    transition: box-shadow 0.2s, border-color 0.2s;
}

.wf-card:hover[b-t4v8h2j0pu] {
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

.wf-card--expanded[b-t4v8h2j0pu] {
    border-color: #bfdbfe;
    box-shadow: 0 4px 20px rgba(37, 99, 235, 0.09);
}

/* Card header row */
.wf-card-header[b-t4v8h2j0pu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    background: #f8fafc;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s;
}

.wf-card--expanded .wf-card-header[b-t4v8h2j0pu] {
    border-bottom-color: #e2e8f0;
}

.wf-card-left[b-t4v8h2j0pu] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.wf-card-icon-tile[b-t4v8h2j0pu] {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: linear-gradient(135deg, #2563eb 0%, #60a5fa 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.22);
}

.wf-card-name[b-t4v8h2j0pu] {
    font-size: 0.95rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 4px;
}

.wf-step-count[b-t4v8h2j0pu] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.76rem;
    color: #64748b;
    font-weight: 500;
}

.wf-step-count i[b-t4v8h2j0pu] {
    color: #94a3b8;
    font-size: 0.72rem;
}

.wf-card-actions[b-t4v8h2j0pu] {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* ── Steps panel ─────────────────────────────────────────────── */
.wf-steps-panel[b-t4v8h2j0pu] {
    padding: 16px 20px 12px;
    animation: wf-slide-down-b-t4v8h2j0pu 0.18s ease;
}

@keyframes wf-slide-down-b-t4v8h2j0pu {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0);    }
}

.wf-steps-list[b-t4v8h2j0pu] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Individual step row */
.wf-step-row[b-t4v8h2j0pu] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px dashed #e2e8f0;
    transition: background 0.12s;
}

.wf-step-row:last-child[b-t4v8h2j0pu] {
    border-bottom: none;
}

.wf-step-row:hover[b-t4v8h2j0pu] {
    background: #f8fafc;
    border-radius: 8px;
    padding-left: 8px;
    padding-right: 8px;
    margin-left: -8px;
    margin-right: -8px;
}

/* Step number circle */
.wf-step-number[b-t4v8h2j0pu] {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2563eb 0%, #60a5fa 100%);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(37, 99, 235, 0.28);
}

.wf-step-body[b-t4v8h2j0pu] {
    flex: 1;
    min-width: 0;
}

.wf-step-name[b-t4v8h2j0pu] {
    font-size: 0.88rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 6px;
}

.wf-step-meta[b-t4v8h2j0pu] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Type badge */
.wf-type-badge[b-t4v8h2j0pu] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 10px;
    border-radius: 99px;
    font-size: 0.73rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.wf-type-badge--role[b-t4v8h2j0pu] {
    background: #eff6ff;
    color: #2563eb;
    border: 1px solid #bfdbfe;
}

.wf-type-badge--individual[b-t4v8h2j0pu] {
    background: #faf5ff;
    color: #7c3aed;
    border: 1px solid #ddd6fe;
}

.wf-type-badge i[b-t4v8h2j0pu] {
    font-size: 0.68rem;
}

/* Approvals badge */
.wf-approvals-badge[b-t4v8h2j0pu] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.76rem;
    color: #64748b;
    font-weight: 500;
}

.wf-approvals-badge i[b-t4v8h2j0pu] {
    color: #22c55e;
    font-size: 0.74rem;
}

/* Empty steps state */
.wf-empty-steps[b-t4v8h2j0pu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 32px 20px;
    color: #94a3b8;
    font-size: 0.84rem;
    text-align: center;
}

.wf-empty-steps i[b-t4v8h2j0pu] {
    color: #cbd5e1;
}

/* Steps footer */
.wf-steps-footer[b-t4v8h2j0pu] {
    padding-top: 12px;
    margin-top: 4px;
    border-top: 1px solid #f1f5f9;
}

/* No results */
.wf-no-results[b-t4v8h2j0pu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 60px 20px;
    color: #94a3b8;
    text-align: center;
}

.wf-no-results i[b-t4v8h2j0pu] {
    color: #cbd5e1;
}

.wf-no-results p[b-t4v8h2j0pu] {
    margin: 0;
    font-size: 0.9rem;
}

/* ── Modal form ──────────────────────────────────────────────── */
.wf-modal-grid[b-t4v8h2j0pu] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 16px;
    margin-bottom: 4px;
}

.wf-modal-field[b-t4v8h2j0pu] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.wf-modal-field.full[b-t4v8h2j0pu] {
    grid-column: 1 / -1;
}

.wf-field-label[b-t4v8h2j0pu] {
    font-size: 0.78rem;
    font-weight: 600;
    color: #374151;
    letter-spacing: 0.02em;
}

.req[b-t4v8h2j0pu] {
    color: #ef4444;
    margin-left: 2px;
}

/* Styled <select> (InputSelect) */
.wf-select[b-t4v8h2j0pu] {
    width: 100%;
    padding: 7px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.85rem;
    color: #374151;
    background: #fff;
    appearance: auto;
    transition: border-color 0.15s, box-shadow 0.15s;
    height: 38px;
}

.wf-select:focus[b-t4v8h2j0pu] {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

/* Validation summary */
.wf-validation-summary[b-t4v8h2j0pu] {
    margin-bottom: 12px;
    padding: 10px 14px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 6px;
    color: #dc2626;
    font-size: 0.8rem;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 640px) {
    .wf-card-header[b-t4v8h2j0pu] {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }

    .wf-card-actions[b-t4v8h2j0pu] {
        width: 100%;
        justify-content: flex-end;
    }

    .wf-modal-grid[b-t4v8h2j0pu] {
        grid-template-columns: 1fr;
    }

    .wf-modal-field.full[b-t4v8h2j0pu] {
        grid-column: 1;
    }

    .wf-step-row[b-t4v8h2j0pu] {
        flex-wrap: wrap;
        gap: 10px;
    }
}
/* /Pages/Documents/DocumentsCreation.razor.rz.scp.css */
/* ================================================================
   DocumentsCreation — scoped styles
   Uses the global design tokens from fields_buttons.css
   ================================================================ */

/* ── Page wrapper ─────────────────────────────────────────────── */
.doc-creation-wrapper[b-qxyh3yk0dn] {
    max-width: 860px;
    margin: 0 auto;
    padding: 24px 20px 40px;
}

/* ── Page header row (icon + title/subtitle) ──────────────────── */
.doc-page-header[b-qxyh3yk0dn] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 24px;
}

.doc-page-header-icon[b-qxyh3yk0dn] {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--brand-1, #3c7fbe), var(--brand-2, #2f6aa3));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(60, 127, 190, .25);
}

.doc-page-title[b-qxyh3yk0dn] {
    margin: 0 0 4px;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--ink, #1f2328);
    letter-spacing: -.2px;
}

.doc-page-subtitle[b-qxyh3yk0dn] {
    margin: 0;
    font-size: 13px;
    color: var(--muted, #6b7280);
}

/* ── Main form card ───────────────────────────────────────────── */
.doc-form-card[b-qxyh3yk0dn] {
    background: var(--bg-panel, #fff);
    border: 1px solid var(--border-1, #e5e7eb);
    border-radius: var(--radius, 14px);
    padding: 28px 28px 24px;
    box-shadow: 0 2px 12px rgba(0,0,0,.06);
}

/* ── Section headers (Document Details / Workflow Details) ─────── */
.doc-section-header[b-qxyh3yk0dn] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .7px;
    color: var(--brand-1, #3c7fbe);
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--border-1, #e5e7eb);
}

    .doc-section-header i[b-qxyh3yk0dn] {
        font-size: 14px;
    }

    .doc-section-header.secondary[b-qxyh3yk0dn] {
        color: #7c3aed;
        border-bottom-color: #ede9fe;
        margin-top: 0;
    }

/* ── Form grid ────────────────────────────────────────────────── */
.doc-form-grid[b-qxyh3yk0dn] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 24px;
    margin-bottom: 20px;
}

.doc-form-field[b-qxyh3yk0dn] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    .doc-form-field.full-width[b-qxyh3yk0dn] {
        grid-column: 1 / -1;
    }

.doc-field-label[b-qxyh3yk0dn] {
    font-size: 12px;
    font-weight: 600;
    color: var(--muted, #6b7280);
    text-transform: uppercase;
    letter-spacing: .4px;
}

/* Checkbox row */
.doc-check-row[b-qxyh3yk0dn] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--surface-1, #f9f9f9);
    border: 1px solid var(--border-1, #e5e7eb);
    border-radius: 8px;
    cursor: pointer;
}

    .doc-check-row .rz-label[b-qxyh3yk0dn] {
        font-size: 13.5px;
        color: var(--ink, #1f2328);
        cursor: pointer;
        font-weight: 500;
    }

/* ── Workflow toggle row ──────────────────────────────────────── */
.doc-workflow-toggle[b-qxyh3yk0dn] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: var(--surface-2, #f8f9fa);
    border: 1px solid var(--border-1, #e5e7eb);
    border-radius: 10px;
    margin-bottom: 20px;
    cursor: pointer;
    transition: border-color 180ms, background 180ms;
}

    .doc-workflow-toggle:hover[b-qxyh3yk0dn] {
        border-color: #7c3aed;
        background: #faf5ff;
    }

.workflow-toggle-icon[b-qxyh3yk0dn] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #ede9fe;
    color: #7c3aed;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    flex-shrink: 0;
}

.workflow-toggle-body[b-qxyh3yk0dn] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.workflow-toggle-title[b-qxyh3yk0dn] {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ink, #1f2328);
}

.workflow-toggle-hint[b-qxyh3yk0dn] {
    font-size: 12px;
    color: var(--muted, #6b7280);
}

/* ── Workflow expanded section ────────────────────────────────── */
.doc-workflow-section[b-qxyh3yk0dn] {
    background: #faf5ff;
    border: 1px solid #ede9fe;
    border-radius: 10px;
    padding: 18px 20px;
    margin-bottom: 20px;
    animation: slideDown-b-qxyh3yk0dn .18s ease;
}

@keyframes slideDown-b-qxyh3yk0dn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Error banner ─────────────────────────────────────────────── */
.doc-error-banner[b-qxyh3yk0dn] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    background: #fde8e8;
    border: 1px solid #f5c6c6;
    border-radius: 8px;
    color: #c0392b;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 20px;
}

    .doc-error-banner i[b-qxyh3yk0dn] {
        font-size: 15px;
        flex-shrink: 0;
    }

/* ── Form action buttons ──────────────────────────────────────── */
.doc-form-actions[b-qxyh3yk0dn] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 16px;
    border-top: 1px solid var(--border-1, #e5e7eb);
}

/* ── Responsive: single column on small screens ──────────────── */
@media (max-width: 600px) {
    .doc-form-grid[b-qxyh3yk0dn] {
        grid-template-columns: 1fr;
    }

    .doc-form-card[b-qxyh3yk0dn] {
        padding: 20px 16px;
    }

    .doc-creation-wrapper[b-qxyh3yk0dn] {
        padding: 16px 12px 32px;
    }
}
/* /Pages/Documents/DocumentSettings.razor.rz.scp.css */
/* ================================================================
   DocumentSettings.razor.css — Scoped styles
   Document Settings page (/document_settings)
   ================================================================ */

/* ── Shell ───────────────────────────────────────────────────── */
.ds-shell[b-6ib9an7gsy] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 60px);
    overflow: hidden;
    font-family: 'Inter', 'Segoe UI', sans-serif;
}

/* ── Top bar (header + tabs) ─────────────────────────────────── */
.ds-top-bar[b-6ib9an7gsy] {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 12px 20px;
    background: #fff;
    border-bottom: 2px solid #e2e8f0;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.ds-header-left[b-6ib9an7gsy] {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
}

.ds-header-icon-tile[b-6ib9an7gsy] {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: linear-gradient(135deg, #2563eb 0%, #60a5fa 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: #fff;
    box-shadow: 0 3px 10px rgba(37,99,235,0.28);
    flex-shrink: 0;
}

.ds-header-text h2[b-6ib9an7gsy] {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1e293b;
    margin: 0 0 2px;
}

.ds-header-text span[b-6ib9an7gsy] {
    font-size: 0.75rem;
    color: #64748b;
}

/* Tabs */
.ds-tabs[b-6ib9an7gsy] {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-wrap: wrap;
    margin-left: auto;
}

.ds-tab[b-6ib9an7gsy] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    font-size: 0.82rem;
    font-weight: 500;
    color: #64748b;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 7px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.ds-tab:hover[b-6ib9an7gsy] {
    background: #eff6ff;
    color: #2563eb;
    border-color: #bfdbfe;
}

.ds-tab.active[b-6ib9an7gsy] {
    background: #eff6ff;
    color: #2563eb;
    border-color: #bfdbfe;
    font-weight: 600;
}

.ds-tab i[b-6ib9an7gsy] {
    font-size: 0.78rem;
}

/* ── Permission 3-pane layout ────────────────────────────────── */
.ds-perm-body[b-6ib9an7gsy] {
    display: flex;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

/* ── Shared panel header ─────────────────────────────────────── */
.ds-panel-header[b-6ib9an7gsy] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #475569;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    flex-shrink: 0;
}

.ds-panel-header i[b-6ib9an7gsy] { color: #94a3b8; font-size: 0.8rem; }

/* ── LEFT SIDEBAR (folder tree) ──────────────────────────────── */
.ds-sidebar[b-6ib9an7gsy] {
    width: 230px;
    min-width: 180px;
    border-right: 1px solid #e2e8f0;
    background: #fff;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex-shrink: 0;
}

.ds-tree-wrap[b-6ib9an7gsy] {
    flex: 1;
    overflow-y: auto;
    padding: 6px 0;
}

.ds-tree-wrap[b-6ib9an7gsy]::-webkit-scrollbar { width: 4px; }
.ds-tree-wrap[b-6ib9an7gsy]::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 99px; }

/* Tree nodes generated by RenderFolder in CS */
.ds-tree-wrap :global(.tree-node)[b-6ib9an7gsy] { display: block; }

.ds-tree-wrap :global(.tree-row)[b-6ib9an7gsy] {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    font-size: 0.82rem;
    cursor: pointer;
    color: #374151;
    border-radius: 5px;
    margin: 1px 4px;
    transition: background 0.12s;
    user-select: none;
}

.ds-tree-wrap :global(.tree-row:hover)[b-6ib9an7gsy] {
    background: #eff6ff;
    color: #2563eb;
}

.ds-tree-wrap :global(.tree-row.active-folder)[b-6ib9an7gsy],
.ds-tree-wrap :global(.tree-row.selected)[b-6ib9an7gsy] {
    background: #dbeafe;
    color: #1d4ed8;
    font-weight: 600;
}

.ds-tree-wrap :global(.tree-expand)[b-6ib9an7gsy] {
    width: 16px;
    font-size: 0.72rem;
    color: #94a3b8;
    text-align: center;
    flex-shrink: 0;
    font-weight: 700;
}

.ds-tree-wrap :global(.tree-folder-icon)[b-6ib9an7gsy] {
    color: #f59e0b;
    font-size: 0.82rem;
    flex-shrink: 0;
}

.ds-tree-wrap :global(.tree-label)[b-6ib9an7gsy] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ds-tree-wrap :global(.tree-children)[b-6ib9an7gsy] {
    padding-left: 20px;
}

/* Empty tree state */
.ds-empty-tree[b-6ib9an7gsy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 40px 16px;
    text-align: center;
    color: #94a3b8;
    font-size: 0.82rem;
}

.ds-empty-tree i[b-6ib9an7gsy] { color: #cbd5e1; }

/* Sidebar footer */
.ds-sidebar-footer[b-6ib9an7gsy] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    font-size: 0.75rem;
    color: #94a3b8;
    border-top: 1px solid #f1f5f9;
    background: #f8fafc;
    flex-shrink: 0;
}

.ds-sidebar-footer i[b-6ib9an7gsy] { font-size: 0.72rem; }

/* ── CENTER CONTENT ──────────────────────────────────────────── */
.ds-content[b-6ib9an7gsy] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #f8fafc;
}

/* Toolbar */
.ds-toolbar[b-6ib9an7gsy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 7px 12px;
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
    flex-shrink: 0;
}

.ds-toolbar-left[b-6ib9an7gsy] {
    display: flex;
    align-items: center;
    gap: 4px;
}

.ds-icon-sep[b-6ib9an7gsy] {
    width: 1px;
    height: 20px;
    background: #e2e8f0;
    margin: 0 4px;
}

/* Danger variant for icon buttons */
.ds-danger-icon[b-6ib9an7gsy] { color: #ef4444 !important; }
.ds-danger-icon:hover:not(:disabled)[b-6ib9an7gsy] {
    background: #fef2f2 !important;
    color: #dc2626 !important;
    border-color: #fecaca !important;
}

.ds-selection-badge[b-6ib9an7gsy] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    background: #f0fdf4;
    color: #16a34a;
    border: 1px solid #bbf7d0;
    border-radius: 99px;
    font-size: 0.76rem;
    font-weight: 500;
}

/* Document table */
.ds-table-wrap[b-6ib9an7gsy] {
    flex: 1;
    overflow: auto;
    min-height: 0;
}

.ds-table-wrap[b-6ib9an7gsy]::-webkit-scrollbar { width: 5px; height: 5px; }
.ds-table-wrap[b-6ib9an7gsy]::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 99px; }

.ds-table[b-6ib9an7gsy] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
    color: #374151;
}

.ds-table thead[b-6ib9an7gsy] {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f1f5f9;
}

.ds-table th[b-6ib9an7gsy] {
    padding: 8px 12px;
    font-weight: 600;
    font-size: 0.73rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
    border-bottom: 2px solid #e2e8f0;
    text-align: left;
    white-space: nowrap;
}

.ds-table td[b-6ib9an7gsy] {
    padding: 7px 12px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}

.ds-table tbody tr[b-6ib9an7gsy] {
    cursor: pointer;
    transition: background 0.1s;
}

.ds-table tbody tr:hover[b-6ib9an7gsy] { background: #eff6ff; }
.ds-table tbody tr.ds-row-selected[b-6ib9an7gsy] { background: #dbeafe; }
.ds-table tbody tr.ds-row-selected td[b-6ib9an7gsy] { border-bottom-color: #bfdbfe; }

.ds-col-check[b-6ib9an7gsy] { width: 38px; padding: 7px 8px !important; text-align: center; }
.ds-col-action[b-6ib9an7gsy] { width: 70px; text-align: center; }
.ds-perm-col[b-6ib9an7gsy] { text-align: center; width: 90px; }
.ds-mono[b-6ib9an7gsy] { font-family: 'JetBrains Mono', 'Fira Code', monospace; font-size: 0.78rem; }

/* File icon pill */
.ds-file-icon[b-6ib9an7gsy] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    background: #eff6ff;
    color: #3b82f6;
    font-size: 0.7rem;
    margin-right: 6px;
    vertical-align: middle;
}

.ds-version-badge[b-6ib9an7gsy] {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 99px;
    background: #f0fdf4;
    color: #16a34a;
    border: 1px solid #bbf7d0;
    font-size: 0.7rem;
    font-weight: 600;
    font-family: 'JetBrains Mono', monospace;
}

.ds-status-badge[b-6ib9an7gsy] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 99px;
    background: #eff6ff;
    color: #2563eb;
    border: 1px solid #bfdbfe;
    font-size: 0.72rem;
    font-weight: 600;
}

/* Role chip */
.ds-role-chip[b-6ib9an7gsy] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    color: #1e293b;
}

.ds-role-chip i[b-6ib9an7gsy] { color: #7c3aed; font-size: 0.78rem; }

/* Permission checkbox */
.ds-perm-check[b-6ib9an7gsy] {
    width: 16px;
    height: 16px;
    accent-color: #2563eb;
    cursor: pointer;
}

/* Compact table variant (entity roles list) */
.ds-table--compact th[b-6ib9an7gsy],
.ds-table--compact td[b-6ib9an7gsy] {
    padding: 5px 10px;
    font-size: 0.8rem;
}

/* Empty/loading states */
.ds-empty-state[b-6ib9an7gsy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 60px 20px;
    color: #94a3b8;
    text-align: center;
}

.ds-empty-state i[b-6ib9an7gsy] { color: #cbd5e1; }
.ds-empty-state p[b-6ib9an7gsy] { margin: 0; font-size: 0.85rem; }

.ds-empty-state--sm[b-6ib9an7gsy] {
    padding: 20px 16px;
    font-size: 0.8rem;
    flex-direction: row;
    gap: 8px;
    justify-content: flex-start;
}

.ds-loading[b-6ib9an7gsy] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px;
    color: #64748b;
    font-size: 0.84rem;
    justify-content: center;
}

.ds-loading i[b-6ib9an7gsy] { color: #3b82f6; }

/* ── BOTTOM PANEL ────────────────────────────────────────────── */
.ds-bottom-panel[b-6ib9an7gsy] {
    border-top: 2px solid #e2e8f0;
    background: #fff;
    display: flex;
    flex-direction: column;
    max-height: 300px;
    flex-shrink: 0;
}

.ds-bottom-tabs[b-6ib9an7gsy] {
    display: flex;
    align-items: center;
    gap: 0;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
    padding: 0 12px;
    flex-shrink: 0;
}

.ds-bottom-tab[b-6ib9an7gsy] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    font-size: 0.78rem;
    font-weight: 500;
    color: #64748b;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.ds-bottom-tab:hover[b-6ib9an7gsy] { color: #2563eb; }
.ds-bottom-tab.active[b-6ib9an7gsy] { color: #2563eb; border-bottom-color: #2563eb; font-weight: 600; }
.ds-bottom-tab i[b-6ib9an7gsy] { font-size: 0.72rem; }

.ds-bottom-content[b-6ib9an7gsy] {
    flex: 1;
    overflow-y: auto;
    padding: 10px 12px;
    min-height: 0;
}

.ds-bottom-content[b-6ib9an7gsy]::-webkit-scrollbar { width: 4px; }
.ds-bottom-content[b-6ib9an7gsy]::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 99px; }

/* Entity action bar */
.ds-entity-bar[b-6ib9an7gsy] {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

/* Permission table inside bottom panel */
.ds-perm-table-wrap[b-6ib9an7gsy] {
    overflow-x: auto;
}

/* ── COMPONENT WRAP (non-permission tabs) ────────────────────── */
.ds-component-wrap[b-6ib9an7gsy] {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

/* ── MODAL HELPERS ───────────────────────────────────────────── */
.ds-modal-grid[b-6ib9an7gsy] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ds-modal-field[b-6ib9an7gsy] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.ds-modal-field.full[b-6ib9an7gsy] { grid-column: 1 / -1; }

.ds-field-label[b-6ib9an7gsy] {
    font-size: 0.78rem;
    font-weight: 600;
    color: #374151;
    letter-spacing: 0.02em;
}

.req[b-6ib9an7gsy] { color: #ef4444; margin-left: 2px; }

.ds-select[b-6ib9an7gsy] {
    width: 100%;
    padding: 7px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.84rem;
    color: #374151;
    background: #fff;
    height: 38px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.ds-select:focus[b-6ib9an7gsy] {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.12);
}

/* User list in assign role modal */
.ds-user-list[b-6ib9an7gsy] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 6px;
    background: #f8fafc;
}

.ds-user-list[b-6ib9an7gsy]::-webkit-scrollbar { width: 4px; }
.ds-user-list[b-6ib9an7gsy]::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 99px; }

.ds-user-item[b-6ib9an7gsy] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.83rem;
    color: #374151;
    transition: background 0.1s;
}

.ds-user-item:hover[b-6ib9an7gsy] { background: #eff6ff; }

.ds-user-item--assigned[b-6ib9an7gsy] {
    color: #94a3b8;
    cursor: default;
}

.ds-user-item--assigned:hover[b-6ib9an7gsy] { background: transparent; }

.ds-user-name[b-6ib9an7gsy] { flex: 1; }

.ds-assigned-chip[b-6ib9an7gsy] {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 99px;
    background: #f0fdf4;
    color: #16a34a;
    border: 1px solid #bbf7d0;
    font-size: 0.7rem;
    font-weight: 600;
}

/* modal-subtitle (already defined globally but repeated for clarity) */
.modal-subtitle[b-6ib9an7gsy] {
    font-size: 0.76rem;
    color: #64748b;
    margin: 0;
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 860px) {
    .ds-top-bar[b-6ib9an7gsy] { flex-direction: column; align-items: flex-start; }
    .ds-tabs[b-6ib9an7gsy] { margin-left: 0; }
    .ds-sidebar[b-6ib9an7gsy] { width: 180px; min-width: 140px; }
    .ds-bottom-panel[b-6ib9an7gsy] { max-height: 260px; }
}

@media (max-width: 600px) {
    .ds-perm-body[b-6ib9an7gsy] { flex-direction: column; }
    .ds-sidebar[b-6ib9an7gsy] { width: 100%; max-height: 180px; border-right: none; border-bottom: 1px solid #e2e8f0; }
    .ds-tree-wrap[b-6ib9an7gsy] { padding: 4px 0; }
}
/* /Pages/Documents/Document_Creation.razor.rz.scp.css */
/* ================================================================
   Document_Creation.razor.css
   Scoped styles for the DMS 3-pane shell (/documents_trafic)
   ================================================================ */

/* ── Shell ───────────────────────────────────────────────────── */
.dms-shell[b-95rljhvd9z] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 60px);
    background: #f4f6fb;
    font-family: 'Inter', 'Segoe UI', sans-serif;
    overflow: hidden;
}

/* ── Top bar ─────────────────────────────────────────────────── */
.dms-top[b-95rljhvd9z] {
    display: flex;
    align-items: center;
    gap: 0;
    background: #fff;
    border-bottom: 2px solid #e2e8f0;
    padding: 0 16px;
    height: 48px;
    flex-shrink: 0;
    justify-content: space-between;
}

.dms-tabs[b-95rljhvd9z] {
    display: flex;
    align-items: stretch;
    height: 100%;
    gap: 2px;
}

.dms-tab[b-95rljhvd9z] {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 20px;
    font-size: 0.85rem;
    font-weight: 500;
    color: #64748b;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s, background 0.15s;
    white-space: nowrap;
}

.dms-tab:hover[b-95rljhvd9z] {
    color: #2563eb;
    background: #eff6ff;
}

.dms-tab.active[b-95rljhvd9z] {
    color: #2563eb;
    border-bottom-color: #2563eb;
    font-weight: 600;
}

.dms-tab i[b-95rljhvd9z] {
    font-size: 0.82rem;
}

/* meta badges */
.dms-top-meta[b-95rljhvd9z] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dms-count-badge[b-95rljhvd9z],
.dms-selected-badge[b-95rljhvd9z] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 99px;
    font-size: 0.78rem;
    font-weight: 500;
}

.dms-count-badge[b-95rljhvd9z] {
    background: #eff6ff;
    color: #3b82f6;
    border: 1px solid #bfdbfe;
}

.dms-selected-badge[b-95rljhvd9z] {
    background: #f0fdf4;
    color: #16a34a;
    border: 1px solid #bbf7d0;
    animation: dms-pop-b-95rljhvd9z 0.15s ease;
}

@keyframes dms-pop-b-95rljhvd9z {
    0%  { transform: scale(0.85); opacity: 0; }
    100%{ transform: scale(1);    opacity: 1; }
}

/* ── 3-pane body ─────────────────────────────────────────────── */
.dms-body[b-95rljhvd9z] {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* ── Shared panel header ─────────────────────────────────────── */
.dms-panel-header[b-95rljhvd9z] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #475569;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    flex-shrink: 0;
}

.dms-panel-header i[b-95rljhvd9z] {
    color: #94a3b8;
    font-size: 0.82rem;
}

/* ── LEFT: Sidebar ───────────────────────────────────────────── */
.dms-sidebar[b-95rljhvd9z] {
    width: 230px;
    min-width: 180px;
    max-width: 300px;
    border-right: 1px solid #e2e8f0;
    background: #fff;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex-shrink: 0;
}

.dms-tree-wrap[b-95rljhvd9z] {
    flex: 1;
    overflow-y: auto;
    padding: 6px 0;
}

/* Tree nodes — generic classes expected from RenderFolder fragment */
.dms-tree-node[b-95rljhvd9z] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    font-size: 0.83rem;
    cursor: pointer;
    color: #374151;
    transition: background 0.12s;
    border-radius: 4px;
    margin: 1px 4px;
    user-select: none;
}

.dms-tree-node:hover[b-95rljhvd9z] {
    background: #eff6ff;
    color: #2563eb;
}

.dms-tree-node.selected[b-95rljhvd9z] {
    background: #dbeafe;
    color: #1d4ed8;
    font-weight: 600;
}

.dms-tree-node i[b-95rljhvd9z] {
    font-size: 0.82rem;
    flex-shrink: 0;
}

.dms-tree-node .node-toggle[b-95rljhvd9z] {
    width: 14px;
    font-size: 0.7rem;
    color: #94a3b8;
    flex-shrink: 0;
}

.dms-tree-children[b-95rljhvd9z] {
    padding-left: 18px;
}

/* Empty state */
.dms-empty-tree[b-95rljhvd9z] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 40px 20px;
    text-align: center;
    color: #94a3b8;
    font-size: 0.83rem;
}

.dms-empty-tree i[b-95rljhvd9z] {
    color: #cbd5e1;
}

/* ── CENTER: Content ─────────────────────────────────────────── */
.dms-content[b-95rljhvd9z] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #f8fafc;
}

/* Command bar */
.dms-command-bar[b-95rljhvd9z] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: #fff;
    border-bottom: 1px solid #e2e8f0;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.dms-primary-actions[b-95rljhvd9z] {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

/* Icon bar */
.dms-icon-bar[b-95rljhvd9z] {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1;
    flex-wrap: wrap;
}

.dms-icon-btn[b-95rljhvd9z] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: #475569;
    font-size: 0.82rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    padding: 0;
}

.dms-icon-btn:hover:not(:disabled)[b-95rljhvd9z] {
    background: #eff6ff;
    color: #2563eb;
    border-color: #bfdbfe;
}

.dms-icon-btn:disabled[b-95rljhvd9z] {
    opacity: 0.35;
    cursor: not-allowed;
}

.dms-icon-btn.danger[b-95rljhvd9z] {
    color: #ef4444;
}

.dms-icon-btn.danger:hover:not(:disabled)[b-95rljhvd9z] {
    background: #fef2f2;
    color: #dc2626;
    border-color: #fecaca;
}

.dms-icon-sep[b-95rljhvd9z] {
    width: 1px;
    height: 20px;
    background: #e2e8f0;
    margin: 0 4px;
    flex-shrink: 0;
}

/* Paging */
.dms-paging[b-95rljhvd9z] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: #64748b;
    margin-left: auto;
    flex-shrink: 0;
}

.dms-paging select[b-95rljhvd9z] {
    padding: 2px 6px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 0.8rem;
    background: #fff;
    color: #374151;
    cursor: pointer;
}

/* Document table */
.dms-table-wrap[b-95rljhvd9z] {
    flex: 1;
    overflow: auto;
    min-height: 0;
}

.dms-table[b-95rljhvd9z] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.83rem;
    color: #374151;
}

.dms-table thead[b-95rljhvd9z] {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f1f5f9;
}

.dms-table th[b-95rljhvd9z] {
    padding: 8px 12px;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
    border-bottom: 2px solid #e2e8f0;
    text-align: left;
    white-space: nowrap;
}

.dms-table td[b-95rljhvd9z] {
    padding: 7px 12px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}

.dms-table tbody tr[b-95rljhvd9z] {
    transition: background 0.1s;
    cursor: pointer;
}

.dms-table tbody tr:hover[b-95rljhvd9z] {
    background: #eff6ff;
}

.dms-table tbody tr.row-selected[b-95rljhvd9z] {
    background: #dbeafe;
}

.dms-table tbody tr.row-selected td[b-95rljhvd9z] {
    border-bottom-color: #bfdbfe;
}

.col-check[b-95rljhvd9z] {
    width: 36px;
    padding: 7px 8px !important;
    text-align: center;
}

.doc-file-icon[b-95rljhvd9z] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    background: #eff6ff;
    color: #3b82f6;
    font-size: 0.72rem;
    margin-right: 7px;
    vertical-align: middle;
    flex-shrink: 0;
}

.version-badge[b-95rljhvd9z] {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 99px;
    background: #f0fdf4;
    color: #16a34a;
    border: 1px solid #bbf7d0;
    font-size: 0.72rem;
    font-weight: 600;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
}

.dms-empty-row[b-95rljhvd9z] {
    text-align: center;
    padding: 48px 20px !important;
    color: #94a3b8;
    font-size: 0.85rem;
}

.dms-empty-row i[b-95rljhvd9z] {
    display: block;
    font-size: 2rem;
    margin-bottom: 10px;
    color: #cbd5e1;
}

/* Properties strip */
.dms-properties[b-95rljhvd9z] {
    border-top: 1px solid #e2e8f0;
    background: #fff;
    flex-shrink: 0;
}

.dms-properties-header[b-95rljhvd9z] {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 14px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #475569;
    border-bottom: 1px solid #f1f5f9;
}

.dms-properties-header i[b-95rljhvd9z] {
    color: #94a3b8;
    font-size: 0.78rem;
}

.dms-properties-body[b-95rljhvd9z] {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 7px 16px;
    font-size: 0.8rem;
    color: #374151;
    overflow-x: auto;
    white-space: nowrap;
}

.dms-properties-body strong[b-95rljhvd9z] {
    color: #1e293b;
}

.dms-prop-hint[b-95rljhvd9z] {
    color: #94a3b8;
    font-style: italic;
}

/* ── RIGHT: Preview ──────────────────────────────────────────── */
.dms-preview[b-95rljhvd9z] {
    width: 280px;
    min-width: 220px;
    max-width: 360px;
    border-left: 1px solid #e2e8f0;
    background: #fff;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex-shrink: 0;
}

.dms-preview-body[b-95rljhvd9z] {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.dms-preview-frame[b-95rljhvd9z] {
    flex: 1;
    width: 100%;
    height: 100%;
    border: none;
    background: #f8fafc;
}

.dms-preview-empty[b-95rljhvd9z] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #94a3b8;
    font-size: 0.83rem;
    text-align: center;
    padding: 30px;
}

.dms-preview-empty i[b-95rljhvd9z] {
    color: #cbd5e1;
}

/* ── Context menu ────────────────────────────────────────────── */
.ctx-overlay[b-95rljhvd9z] {
    position: fixed;
    inset: 0;
    z-index: 9998;
}

.ctx-menu[b-95rljhvd9z] {
    position: fixed;
    z-index: 9999;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    padding: 4px 0;
    min-width: 180px;
    font-size: 0.84rem;
    animation: dms-pop-b-95rljhvd9z 0.12s ease;
}

.ctx-item[b-95rljhvd9z] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 16px;
    color: #374151;
    cursor: pointer;
    transition: background 0.1s;
    white-space: nowrap;
}

.ctx-item:hover[b-95rljhvd9z] {
    background: #eff6ff;
    color: #2563eb;
}

.ctx-item i[b-95rljhvd9z] {
    width: 16px;
    font-size: 0.8rem;
    flex-shrink: 0;
    color: #94a3b8;
}

.ctx-item:hover i[b-95rljhvd9z] {
    color: #3b82f6;
}

.ctx-sep[b-95rljhvd9z] {
    height: 1px;
    background: #f1f5f9;
    margin: 3px 0;
}

.ctx-danger[b-95rljhvd9z] {
    color: #ef4444 !important;
}

.ctx-danger:hover[b-95rljhvd9z] {
    background: #fef2f2 !important;
    color: #dc2626 !important;
}

.ctx-danger i[b-95rljhvd9z] {
    color: #fca5a5 !important;
}

/* ── Modal helpers ───────────────────────────────────────────── */
.dms-modal-grid[b-95rljhvd9z] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 16px;
}

.dms-modal-field[b-95rljhvd9z] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.dms-modal-field.full[b-95rljhvd9z] {
    grid-column: 1 / -1;
}

.dms-field-label[b-95rljhvd9z] {
    font-size: 0.78rem;
    font-weight: 600;
    color: #374151;
    letter-spacing: 0.02em;
}

.req[b-95rljhvd9z] {
    color: #ef4444;
    margin-left: 2px;
}

.dms-check-row[b-95rljhvd9z] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #f8fafc;
    cursor: pointer;
    font-size: 0.83rem;
    color: #374151;
    transition: border-color 0.15s, background 0.15s;
}

.dms-check-row:hover[b-95rljhvd9z] {
    border-color: #bfdbfe;
    background: #eff6ff;
}

.dms-hint[b-95rljhvd9z] {
    font-size: 0.74rem;
    color: #94a3b8;
    margin-top: 2px;
}

/* File list under upload dropzone */
.dms-file-list[b-95rljhvd9z] {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dms-file-list li[b-95rljhvd9z] {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.8rem;
    color: #374151;
    padding: 4px 8px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 5px;
}

.dms-file-list li i[b-95rljhvd9z] {
    color: #3b82f6;
    font-size: 0.78rem;
}

.dms-file-size[b-95rljhvd9z] {
    color: #94a3b8;
    font-size: 0.75rem;
    margin-left: auto;
}

/* Loading state */
.dms-loading[b-95rljhvd9z] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px;
    color: #64748b;
    font-size: 0.85rem;
    justify-content: center;
}

.dms-loading i[b-95rljhvd9z] {
    color: #3b82f6;
}

/* modal-subtitle used inside modal-header-title */
.modal-subtitle[b-95rljhvd9z] {
    font-size: 0.78rem;
    color: #64748b;
    margin: 0;
}

/* ── Scrollbar polish ────────────────────────────────────────── */
.dms-tree-wrap[b-95rljhvd9z]::-webkit-scrollbar,
.dms-table-wrap[b-95rljhvd9z]::-webkit-scrollbar,
.dms-properties-body[b-95rljhvd9z]::-webkit-scrollbar,
.dms-preview-body[b-95rljhvd9z]::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

.dms-tree-wrap[b-95rljhvd9z]::-webkit-scrollbar-track,
.dms-table-wrap[b-95rljhvd9z]::-webkit-scrollbar-track,
.dms-properties-body[b-95rljhvd9z]::-webkit-scrollbar-track,
.dms-preview-body[b-95rljhvd9z]::-webkit-scrollbar-track {
    background: transparent;
}

.dms-tree-wrap[b-95rljhvd9z]::-webkit-scrollbar-thumb,
.dms-table-wrap[b-95rljhvd9z]::-webkit-scrollbar-thumb,
.dms-properties-body[b-95rljhvd9z]::-webkit-scrollbar-thumb,
.dms-preview-body[b-95rljhvd9z]::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 99px;
}

/* ── Inline tab panel (Dashboard / Search embedded component) ── */
.dms-tab-panel[b-95rljhvd9z] {
    flex: 1 1 auto;
    overflow-y: auto;
    background: #f4f6fb;
}

    /* Strip the top padding from the embedded ecm-page so it
       sits flush inside our shell instead of double-padding */
    .dms-tab-panel .ecm-page[b-95rljhvd9z] {
        padding-top: 0;
    }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 900px) {
    .dms-preview[b-95rljhvd9z] {
        display: none;
    }
}

@media (max-width: 650px) {
    .dms-sidebar[b-95rljhvd9z] {
        width: 160px;
        min-width: 140px;
    }

    .dms-icon-bar[b-95rljhvd9z] {
        display: none;
    }

    .dms-paging[b-95rljhvd9z] {
        display: none;
    }
}
/* /Pages/Documents/ManageDocuments.razor.rz.scp.css */
/* ============================================================
   ManageDocuments.razor.css  —  /documents page
   Scoped styles — md- prefix
   ============================================================ */

/* ── Shell ──────────────────────────────────────────────────── */
.md-shell[b-2k4jfvtt0y] {
    padding: 24px 20px 48px;
    min-height: 100%;
}

/* ── Page header ────────────────────────────────────────────── */
.md-page-header[b-2k4jfvtt0y] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
    flex-wrap: wrap;
}

.md-header-left[b-2k4jfvtt0y] {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    min-width: 0;
}

.md-header-icon-tile[b-2k4jfvtt0y] {
    width: 44px;
    height: 44px;
    border-radius: 11px;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 10px rgba(37, 99, 235, .22);
}

    .md-header-icon-tile i[b-2k4jfvtt0y] {
        color: #fff;
        font-size: 18px;
    }

.md-header-text h1[b-2k4jfvtt0y] {
    font-size: 19px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 2px;
    line-height: 1.2;
}

.md-header-text span[b-2k4jfvtt0y] {
    font-size: 13px;
    color: #64748b;
}

.md-header-actions[b-2k4jfvtt0y] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
    flex-shrink: 0;
}

/* ── Progress bar ───────────────────────────────────────────── */
.md-progress[b-2k4jfvtt0y] {
    height: 3px;
    background: #e2e8f0;
    border-radius: 2px;
    margin-bottom: 16px;
    overflow: hidden;
}

.md-progress-bar[b-2k4jfvtt0y] {
    height: 100%;
    width: 40%;
    background: linear-gradient(90deg, #2563eb, #60a5fa);
    border-radius: 2px;
    animation: md-progress-slide-b-2k4jfvtt0y 1.4s ease-in-out infinite;
}

@keyframes md-progress-slide-b-2k4jfvtt0y {
    0%   { margin-left: -40%; }
    100% { margin-left: 100%; }
}

/* ── Controls row (search + page size + range) ──────────────── */
.md-controls-row[b-2k4jfvtt0y] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

/* Search */
.md-search-wrap[b-2k4jfvtt0y] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 200px;
    max-width: 400px;
    height: 38px;
    padding: 0 12px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    transition: border-color .18s, box-shadow .18s;
}

    .md-search-wrap:focus-within[b-2k4jfvtt0y] {
        border-color: #2563eb;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, .1);
    }

.md-search-icon[b-2k4jfvtt0y] {
    color: #94a3b8;
    font-size: 13px;
    flex-shrink: 0;
}

.md-search-input[b-2k4jfvtt0y] {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-size: 13.5px;
    color: #0f172a;
    font-family: inherit;
}

    .md-search-input[b-2k4jfvtt0y]::placeholder { color: #94a3b8; }

.md-search-count[b-2k4jfvtt0y] {
    font-size: 12px;
    color: #94a3b8;
    white-space: nowrap;
    padding-left: 6px;
    border-left: 1px solid #e2e8f0;
}

/* Right controls */
.md-right-controls[b-2k4jfvtt0y] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

.md-pagesize-wrap[b-2k4jfvtt0y] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #64748b;
}

/* Select wrappers */
.md-select-wrap[b-2k4jfvtt0y] {
    position: relative;
    display: flex;
    align-items: center;
}

.md-select[b-2k4jfvtt0y],
.md-select-sm[b-2k4jfvtt0y] {
    appearance: none;
    -webkit-appearance: none;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    color: #0f172a;
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
    transition: border-color .18s, box-shadow .18s;
    padding-right: 28px;
}

.md-select[b-2k4jfvtt0y] {
    height: 38px;
    padding: 0 28px 0 11px;
    width: 100%;
}

.md-select-sm[b-2k4jfvtt0y] {
    height: 34px;
    padding: 0 26px 0 10px;
}

.md-select:focus[b-2k4jfvtt0y],
.md-select-sm:focus[b-2k4jfvtt0y] {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .1);
}

.md-select-chevron[b-2k4jfvtt0y] {
    position: absolute;
    right: 8px;
    font-size: 10px;
    color: #94a3b8;
    pointer-events: none;
}

.md-range-badge[b-2k4jfvtt0y] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    color: #64748b;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 7px;
    padding: 5px 10px;
    white-space: nowrap;
}

    .md-range-badge i[b-2k4jfvtt0y] { color: #94a3b8; font-size: 12px; }

/* ── Table ──────────────────────────────────────────────────── */
.md-table-wrap[b-2k4jfvtt0y] {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: auto;
    box-shadow: 0 1px 6px rgba(15, 23, 42, .05);
}

.md-table[b-2k4jfvtt0y] {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
    color: #0f172a;
}

    .md-table thead tr[b-2k4jfvtt0y] {
        background: #f8fafc;
        border-bottom: 1px solid #e2e8f0;
    }

    .md-table th[b-2k4jfvtt0y] {
        padding: 11px 14px;
        font-size: 11.5px;
        font-weight: 600;
        color: #64748b;
        text-transform: uppercase;
        letter-spacing: .45px;
        white-space: nowrap;
    }

.md-th-sortable[b-2k4jfvtt0y] {
    cursor: pointer;
    user-select: none;
    transition: background .14s;
}

    .md-th-sortable:hover[b-2k4jfvtt0y] {
        background: #f1f5f9;
    }

.md-sort-indicator[b-2k4jfvtt0y] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 5px;
    color: #2563eb;
    font-size: 11px;
}

.md-sort-hint[b-2k4jfvtt0y] {
    margin-left: 5px;
    color: #cbd5e1;
    font-size: 10px;
    opacity: 0;
    transition: opacity .14s;
}

.md-th-sortable:hover .md-sort-hint[b-2k4jfvtt0y] { opacity: 1; }

    .md-table tbody tr[b-2k4jfvtt0y] {
        border-bottom: 1px solid #f1f5f9;
    }

    .md-table tbody tr:last-child[b-2k4jfvtt0y] { border-bottom: none; }

.md-row[b-2k4jfvtt0y] {
    cursor: pointer;
    transition: background .14s;
}

    .md-row:hover[b-2k4jfvtt0y] { background: #f8fafc; }

    .md-table td[b-2k4jfvtt0y] {
        padding: 11px 14px;
        vertical-align: middle;
    }

.md-empty-row[b-2k4jfvtt0y] {
    text-align: center;
    padding: 44px 0 !important;
    color: #94a3b8;
    font-size: 13.5px;
}

    .md-empty-row i[b-2k4jfvtt0y] {
        display: block;
        font-size: 30px;
        margin-bottom: 10px;
        color: #cbd5e1;
    }

/* ── Pagination ─────────────────────────────────────────────── */
.md-pagination[b-2k4jfvtt0y] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 18px;
    flex-wrap: wrap;
}

.md-page-btn[b-2k4jfvtt0y] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-size: 12px;
    color: #475569;
    font-family: inherit;
    cursor: pointer;
    transition: all .16s;
}

    .md-page-btn:hover:not(:disabled)[b-2k4jfvtt0y] {
        background: #f1f5f9;
        border-color: #cbd5e1;
        color: #0f172a;
    }

    .md-page-btn.active[b-2k4jfvtt0y] {
        background: #2563eb;
        border-color: #2563eb;
        color: #fff;
        font-weight: 600;
    }

    .md-page-btn:disabled[b-2k4jfvtt0y] {
        opacity: .4;
        cursor: not-allowed;
    }

/* ── Modal fields ───────────────────────────────────────────── */
.md-modal-field[b-2k4jfvtt0y] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.md-modal-field--full[b-2k4jfvtt0y] {
    grid-column: 1 / -1;
}

.md-modal-label[b-2k4jfvtt0y] {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: .4px;
}

.md-req[b-2k4jfvtt0y] {
    color: #dc2626;
    margin-left: 2px;
}

.md-input[b-2k4jfvtt0y] {
    height: 38px;
    padding: 0 11px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 13.5px;
    color: #0f172a;
    background: #fff;
    font-family: inherit;
    width: 100%;
    transition: border-color .18s, box-shadow .18s;
}

    .md-input:focus[b-2k4jfvtt0y] {
        outline: none;
        border-color: #2563eb;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
    }

.md-input-sm[b-2k4jfvtt0y] {
    height: 30px;
    font-size: 12.5px;
}

.md-asc-label[b-2k4jfvtt0y] {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: #475569;
    cursor: pointer;
}

/* Saving banner */
.md-saving-banner[b-2k4jfvtt0y] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    background: #eff6ff;
    border-bottom: 1px solid #bfdbfe;
    font-size: 13px;
    color: #1e40af;
}

    .md-saving-banner i[b-2k4jfvtt0y] { color: #2563eb; }

/* Delete modal body */
.md-delete-body[b-2k4jfvtt0y] {
    padding: 4px 0 8px;
}

.md-delete-name[b-2k4jfvtt0y] {
    font-size: 15px;
    font-weight: 600;
    color: #0f172a;
    margin: 0 0 6px;
}

.md-delete-text[b-2k4jfvtt0y] {
    font-size: 13px;
    color: #64748b;
    margin: 0;
}

/* Checkbox row */
.md-check-row[b-2k4jfvtt0y] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    color: #0f172a;
    cursor: pointer;
    font-weight: 500;
    margin-top: 4px;
}

/* Filter checks */
.md-filter-checks[b-2k4jfvtt0y] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    max-height: 280px;
    overflow-y: auto;
    padding: 2px;
}

.md-filter-check-item[b-2k4jfvtt0y] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 7px;
    background: #fff;
    cursor: pointer;
    font-size: 13px;
    color: #0f172a;
    transition: background .14s, border-color .14s;
}

    .md-filter-check-item:hover[b-2k4jfvtt0y] {
        background: #f8fafc;
        border-color: #cbd5e1;
    }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 768px) {
    .md-shell[b-2k4jfvtt0y] { padding: 14px 10px 32px; }

    .md-page-header[b-2k4jfvtt0y] { gap: 10px; }

    .md-header-actions[b-2k4jfvtt0y] {
        width: 100%;
        justify-content: flex-start;
    }

    .md-controls-row[b-2k4jfvtt0y] { flex-direction: column; align-items: stretch; }

    .md-search-wrap[b-2k4jfvtt0y] { max-width: 100%; }

    .md-right-controls[b-2k4jfvtt0y] { justify-content: space-between; }

    .md-filter-checks[b-2k4jfvtt0y] { grid-template-columns: 1fr; }
}
/* /Pages/Documents/Workflows.razor.rz.scp.css */
.workflow-tabs[b-tm1kabnvjm] {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.tab-btn[b-tm1kabnvjm] {
    padding: 8px 16px;
    border: none;
    background: #e5e5e5;
    cursor: pointer;
    border-radius: 6px;
}

    .tab-btn.active[b-tm1kabnvjm] {
        background: #2f74c0;
        color: white;
    }

.workflow-box[b-tm1kabnvjm] {
    border: 1px solid #ddd;
    padding: 20px;
    border-radius: 8px;
    background: #fafafa;
}

.actions button[b-tm1kabnvjm] {
    margin-right: 10px;
}
/* /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;
        }
/* /Pages/Index.razor.rz.scp.css */
/* /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;
    }
}
/* /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;
}
/* /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;
        }
/* /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 */
}

 
/* /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;
    }
}
/* /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;
    }
}
/* /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;
    }
}
/* /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;
}
/* /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;
    }
}
/* /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%;
}
/* /Pages/Sales/RetailPOSCheckout.razor.rz.scp.css */
/* ============================================================
   AfriERP — POS (Retail Checkout)
   Clean, modern, Radzen-compatible · Line icons throughout
   ============================================================ */

:root[b-vx3q696u1j] {
    --pos-brand: #1d4ed8;
    --pos-brand-dk: #1e40af;
    --pos-brand-lt: #eff6ff;
    --pos-brand-bdr: #bfdbfe;
    --pos-ink: #0f172a;
    --pos-text: #334155;
    --pos-muted: #64748b;
    --pos-faint: #94a3b8;
    --pos-bg: #f5f7fa;
    --pos-surface: #ffffff;
    --pos-surface-2: #f8fafc;
    --pos-bdr: #e2e8f0;
    --pos-bdr-lt: #f1f5f9;
    --pos-success: #16a34a;
    --pos-success-bg: #e6f4ea;
    --pos-danger: #dc2626;
    --pos-danger-bg: #fef2f2;
    --pos-warn: #b45309;
    --pos-warn-bg: #fff8e1;
    --pos-radius: 10px;
    --pos-radius-sm: 8px;
    --pos-radius-pill: 20px;
    --pos-transition: 180ms cubic-bezier(.4, 0, .2, 1);
}

/* ── SHELL ─────────────────────────────────────────────────── */
.pos-shell[b-vx3q696u1j] {
    display: flex;
    gap: 14px;
    padding: 14px;
    background: var(--pos-bg);
    min-height: calc(100vh - var(--topbar-h, 56px));
    outline: none;
    font-family: 'Segoe UI', system-ui, sans-serif;
    color: var(--pos-ink);
}

/* ── SIDEBAR ───────────────────────────────────────────────── */
.pos-sidebar[b-vx3q696u1j] {
    width: 60px;
    background: var(--pos-surface);
    border: 0.5px solid var(--pos-bdr);
    border-radius: var(--pos-radius);
    padding: 10px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.pos-side-btn[b-vx3q696u1j] {
    position: relative;
    width: 42px;
    height: 42px;
    border: none;
    background: transparent;
    border-radius: var(--pos-radius-sm);
    color: var(--pos-muted);
    font-size: 17px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--pos-transition);
}

    .pos-side-btn:hover[b-vx3q696u1j] {
        background: var(--pos-bdr-lt);
        color: var(--pos-ink);
    }

    .pos-side-btn.is-active[b-vx3q696u1j] {
        background: var(--pos-brand-lt);
        color: var(--pos-brand);
    }

        .pos-side-btn.is-active[b-vx3q696u1j]::before {
            content: "";
            position: absolute;
            left: -13px;
            top: 50%;
            transform: translateY(-50%);
            width: 3px;
            height: 22px;
            background: var(--pos-brand);
            border-radius: 0 2px 2px 0;
        }

.pos-side-spacer[b-vx3q696u1j] {
    flex: 1;
}

/* ── MAIN COLUMN ───────────────────────────────────────────── */
.pos-main[b-vx3q696u1j] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

/* ── TOP BAR ───────────────────────────────────────────────── */
.pos-topbar[b-vx3q696u1j] {
    background: var(--pos-surface);
    border: 0.5px solid var(--pos-bdr);
    border-radius: var(--pos-radius);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.pos-cust[b-vx3q696u1j] {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 4px 10px 4px 4px;
    border-radius: var(--pos-radius-sm);
    transition: background var(--pos-transition);
    flex: 1;
    min-width: 0;
}

    .pos-cust:hover[b-vx3q696u1j] {
        background: var(--pos-surface-2);
    }

.pos-cust-avatar[b-vx3q696u1j] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--pos-brand-lt);
    color: var(--pos-brand);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    flex-shrink: 0;
}

    .pos-cust-avatar.empty[b-vx3q696u1j] {
        background: var(--pos-bdr-lt);
        color: var(--pos-muted);
    }

.pos-cust-info[b-vx3q696u1j] {
    flex: 1;
    min-width: 0;
}

.pos-cust-name[b-vx3q696u1j] {
    font-size: 13px;
    font-weight: 600;
    color: var(--pos-ink);
    line-height: 1.2;
}

.pos-cust-meta[b-vx3q696u1j] {
    font-size: 11.5px;
    color: var(--pos-muted);
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}

    .pos-cust-meta i[b-vx3q696u1j] {
        font-size: 10.5px;
        margin-right: 2px;
    }

    .pos-cust-meta .dot[b-vx3q696u1j] {
        opacity: .4;
    }

.pos-cust-chev[b-vx3q696u1j] {
    color: var(--pos-faint);
    font-size: 11px;
    margin-left: 6px;
}

.pos-total-wrap[b-vx3q696u1j] {
    text-align: right;
    flex-shrink: 0;
}

.pos-total-label[b-vx3q696u1j] {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--pos-muted);
    text-transform: uppercase;
    letter-spacing: .5px;
}

.pos-total-val[b-vx3q696u1j] {
    font-size: 24px;
    font-weight: 700;
    color: var(--pos-brand);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
    margin-top: 2px;
}

/* ── PRODUCT INPUT ─────────────────────────────────────────── */
.pos-prod-bar[b-vx3q696u1j] {
    background: var(--pos-surface);
    border: 0.5px solid var(--pos-bdr);
    border-radius: var(--pos-radius);
    padding: 10px;
    display: flex;
    gap: 8px;
    position: relative;
}

.pos-input-wrap[b-vx3q696u1j] {
    flex: 1;
    position: relative;
}

    .pos-input-wrap.small[b-vx3q696u1j] {
        flex: 1;
    }

.pos-input-icon[b-vx3q696u1j] {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--pos-faint);
    font-size: 13px;
    pointer-events: none;
    z-index: 2;
}

/* Style RadzenTextBox to look native */
.pos-field.rz-textbox[b-vx3q696u1j] {
    width: 100%;
    height: 38px !important;
    padding: 0 11px 0 32px !important;
    border: 0.5px solid #cbd5e1 !important;
    border-radius: var(--pos-radius-sm) !important;
    font-size: 13px !important;
    color: var(--pos-ink) !important;
    outline: none !important;
    font-family: inherit !important;
    background: var(--pos-surface) !important;
    box-shadow: none !important;
    transition: border-color var(--pos-transition), box-shadow var(--pos-transition);
}

    .pos-field.rz-textbox:focus[b-vx3q696u1j],
    .pos-field.rz-textbox:focus-within[b-vx3q696u1j] {
        border-color: var(--pos-brand) !important;
        box-shadow: 0 0 0 3px rgba(29, 78, 216, .1) !important;
    }

/* Qty input */
.pos-qty-input.rz-numeric[b-vx3q696u1j] {
    height: 38px;
}

    .pos-qty-input.rz-numeric .rz-spinbutton[b-vx3q696u1j],
    .pos-qty-input.rz-numeric input[b-vx3q696u1j] {
        height: 38px !important;
        border: 0.5px solid #cbd5e1 !important;
        border-radius: var(--pos-radius-sm) !important;
        font-size: 13px !important;
        text-align: center !important;
    }

/* Add button */
.pos-add-btn[b-vx3q696u1j] {
    height: 38px;
    padding: 0 16px;
    border: none;
    background: var(--pos-brand);
    color: #fff;
    border-radius: var(--pos-radius-sm);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background var(--pos-transition);
    white-space: nowrap;
}

    .pos-add-btn:hover[b-vx3q696u1j] {
        background: var(--pos-brand-dk);
    }

    .pos-add-btn i[b-vx3q696u1j] {
        font-size: 12px;
    }

/* ── SUGGESTION LIST ───────────────────────────────────────── */
.pos-sugg[b-vx3q696u1j] {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--pos-surface);
    border: 0.5px solid #cbd5e1;
    border-radius: var(--pos-radius-sm);
    box-shadow: 0 8px 24px rgba(15, 23, 42, .12);
    z-index: 50;
    padding: 4px;
    max-height: 280px;
    overflow-y: auto;
}

.pos-sugg-item[b-vx3q696u1j] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 12.5px;
    cursor: pointer;
    color: var(--pos-ink);
    transition: background var(--pos-transition);
}

    .pos-sugg-item:hover[b-vx3q696u1j],
    .pos-sugg-item.is-active[b-vx3q696u1j] {
        background: var(--pos-brand-lt);
        color: var(--pos-brand);
    }

.pos-sugg-img[b-vx3q696u1j] {
    width: 28px;
    height: 28px;
    border-radius: 5px;
    background: var(--pos-bdr-lt);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pos-faint);
    font-size: 12px;
    flex-shrink: 0;
    overflow: hidden;
}

    .pos-sugg-img img[b-vx3q696u1j] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.pos-sugg-name[b-vx3q696u1j] {
    flex: 1;
}

.pos-sugg-stock[b-vx3q696u1j] {
    font-size: 10.5px;
    background: var(--pos-bdr-lt);
    color: var(--pos-muted);
    padding: 2px 8px;
    border-radius: var(--pos-radius-pill);
    font-weight: 500;
}

/* ── CART AREA ─────────────────────────────────────────────── */
.pos-cart-area[b-vx3q696u1j] {
    display: flex;
    gap: 12px;
    flex: 1;
    min-height: 0;
}

.pos-cart[b-vx3q696u1j] {
    flex: 1;
    background: var(--pos-surface);
    border: 0.5px solid var(--pos-bdr);
    border-radius: var(--pos-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Empty state */
.pos-cart-empty[b-vx3q696u1j] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 60px 20px;
    color: var(--pos-faint);
    text-align: center;
}

    .pos-cart-empty i[b-vx3q696u1j] {
        font-size: 38px;
        opacity: .35;
    }

    .pos-cart-empty p[b-vx3q696u1j] {
        font-size: 14px;
        font-weight: 500;
        color: var(--pos-muted);
        margin: 0;
    }

    .pos-cart-empty span[b-vx3q696u1j] {
        font-size: 12px;
    }

/* Cart table */
.pos-cart-table[b-vx3q696u1j] {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

    .pos-cart-table thead[b-vx3q696u1j] {
        background: var(--pos-surface-2);
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .pos-cart-table th[b-vx3q696u1j] {
        text-align: left;
        padding: 9px 12px;
        font-size: 10.5px;
        font-weight: 600;
        color: var(--pos-muted);
        text-transform: uppercase;
        letter-spacing: .5px;
        border-bottom: 0.5px solid var(--pos-bdr);
        white-space: nowrap;
    }

        .pos-cart-table th.r[b-vx3q696u1j] {
            text-align: right;
        }

        .pos-cart-table th.c[b-vx3q696u1j] {
            text-align: center;
        }

    .pos-cart-table td[b-vx3q696u1j] {
        padding: 9px 12px;
        border-bottom: 0.5px solid var(--pos-bdr-lt);
        color: var(--pos-ink);
        vertical-align: middle;
    }

        .pos-cart-table td.r[b-vx3q696u1j] {
            text-align: right;
        }

        .pos-cart-table td.c[b-vx3q696u1j] {
            text-align: center;
        }

    .pos-cart-table tr:last-child td[b-vx3q696u1j] {
        border-bottom: none;
    }

    .pos-cart-table tbody tr:hover td[b-vx3q696u1j] {
        background: var(--pos-surface-2);
    }

.pos-item-name[b-vx3q696u1j] {
    font-weight: 500;
    color: var(--pos-ink);
}

.pos-item-sub[b-vx3q696u1j] {
    font-size: 10.5px;
    color: var(--pos-faint);
    margin-top: 2px;
}

.pos-cell-num[b-vx3q696u1j] {
    font-variant-numeric: tabular-nums;
}

    .pos-cell-num.strong[b-vx3q696u1j] {
        font-weight: 600;
    }

.pos-tag[b-vx3q696u1j] {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--pos-radius-pill);
    font-size: 10.5px;
    font-weight: 500;
    background: var(--pos-bdr-lt);
    color: var(--pos-muted);
}

/* Qty stepper inside cart row */
.pos-qty-stepper[b-vx3q696u1j] {
    display: inline-flex;
    align-items: center;
    border: 0.5px solid var(--pos-bdr);
    border-radius: 6px;
    height: 28px;
    overflow: hidden;
    background: var(--pos-surface);
}

    .pos-qty-stepper button[b-vx3q696u1j] {
        border: none;
        background: transparent;
        width: 24px;
        height: 26px;
        color: var(--pos-muted);
        cursor: pointer;
        font-size: 10.5px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all var(--pos-transition);
    }

        .pos-qty-stepper button:hover[b-vx3q696u1j] {
            background: var(--pos-brand-lt);
            color: var(--pos-brand);
        }

    .pos-qty-stepper input[b-vx3q696u1j] {
        border: none;
        width: 36px;
        text-align: center;
        font-size: 12.5px;
        outline: none;
        color: var(--pos-ink);
        font-variant-numeric: tabular-nums;
        background: transparent;
        font-family: inherit;
    }

/* Price selector in cart row */
.pos-price-sel[b-vx3q696u1j] {
    height: 28px;
    border: 0.5px solid var(--pos-bdr);
    border-radius: 6px;
    font-size: 12px;
    padding: 0 8px;
    background: var(--pos-surface);
    color: var(--pos-ink);
    outline: none;
    cursor: pointer;
    font-family: inherit;
}

    .pos-price-sel:focus[b-vx3q696u1j] {
        border-color: var(--pos-brand);
    }

/* Row remove */
.pos-row-rm[b-vx3q696u1j] {
    border: none;
    background: transparent;
    color: var(--pos-faint);
    width: 26px;
    height: 26px;
    border-radius: 5px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: all var(--pos-transition);
}

    .pos-row-rm:hover[b-vx3q696u1j] {
        background: var(--pos-danger-bg);
        color: var(--pos-danger);
    }

/* ── SIDE COLUMN (voucher, summary, payments) ──────────────── */
.pos-side-col[b-vx3q696u1j] {
    width: 320px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex-shrink: 0;
}

.pos-panel[b-vx3q696u1j] {
    background: var(--pos-surface);
    border: 0.5px solid var(--pos-bdr);
    border-radius: var(--pos-radius);
    padding: 14px;
}

.pos-panel-title[b-vx3q696u1j] {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--pos-muted);
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
}

    .pos-panel-title i[b-vx3q696u1j] {
        font-size: 12px;
        color: var(--pos-brand);
    }

/* Voucher */
.pos-voucher-row[b-vx3q696u1j] {
    display: flex;
    gap: 6px;
}

.pos-btn-apply[b-vx3q696u1j] {
    height: 38px;
    padding: 0 14px;
    background: var(--pos-surface);
    color: var(--pos-brand);
    border: 0.5px solid var(--pos-brand-bdr);
    border-radius: var(--pos-radius-sm);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: background var(--pos-transition);
    white-space: nowrap;
}

    .pos-btn-apply:hover[b-vx3q696u1j] {
        background: var(--pos-brand-lt);
    }

/* Summary */
.pos-sum-row[b-vx3q696u1j] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12.5px;
    color: var(--pos-muted);
    padding: 5px 0;
    font-variant-numeric: tabular-nums;
}

    .pos-sum-row strong[b-vx3q696u1j] {
        color: var(--pos-ink);
        font-weight: 500;
    }

        .pos-sum-row strong.neg[b-vx3q696u1j] {
            color: var(--pos-danger);
        }

    .pos-sum-row.total[b-vx3q696u1j] {
        border-top: 0.5px solid var(--pos-bdr);
        margin-top: 8px;
        padding-top: 10px;
        font-size: 14px;
    }

        .pos-sum-row.total strong[b-vx3q696u1j] {
            color: var(--pos-brand);
            font-weight: 700;
            font-size: 18px;
        }

/* ── PAYMENT BUTTONS ───────────────────────────────────────── */
.pos-pay-grid[b-vx3q696u1j] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.pos-pay-btn[b-vx3q696u1j] {
    height: 50px;
    padding: 0 11px;
    background: var(--pos-surface);
    border: 0.5px solid var(--pos-bdr);
    border-radius: var(--pos-radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all var(--pos-transition);
    text-align: left;
    overflow: hidden;
}

    .pos-pay-btn:hover[b-vx3q696u1j] {
        background: var(--pos-surface-2);
        border-color: #cbd5e1;
        transform: translateX(2px);
    }

.pos-pay-icon[b-vx3q696u1j] {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}

.pos-pay-body[b-vx3q696u1j] {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.pos-pay-name[b-vx3q696u1j] {
    font-size: 12px;
    font-weight: 600;
    color: var(--pos-ink);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pos-pay-acc[b-vx3q696u1j] {
    font-size: 10.5px;
    color: var(--pos-faint);
    line-height: 1.2;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Payment method color accents (icon tile only — keeps surface clean) */
.pos-pay-btn.cash .pos-pay-icon[b-vx3q696u1j] {
    background: #e6f4ea;
    color: #1a7f37;
}

.pos-pay-btn.card .pos-pay-icon[b-vx3q696u1j] {
    background: var(--pos-brand-lt);
    color: var(--pos-brand);
}

.pos-pay-btn.mpesa .pos-pay-icon[b-vx3q696u1j] {
    background: #e6f4ea;
    color: #16a34a;
}

.pos-pay-btn.bank .pos-pay-icon[b-vx3q696u1j] {
    background: var(--pos-bdr-lt);
    color: #475569;
}

.pos-pay-btn.loyalty .pos-pay-icon[b-vx3q696u1j] {
    background: #fef9c3;
    color: #a16207;
}

.pos-pay-btn.voucher-p .pos-pay-icon[b-vx3q696u1j] {
    background: var(--pos-danger-bg);
    color: var(--pos-danger);
}

.pos-pay-btn.orange .pos-pay-icon[b-vx3q696u1j] {
    background: #ffedd5;
    color: #ea580c;
}

.pos-pay-btn.moov .pos-pay-icon[b-vx3q696u1j] {
    background: #dbeafe;
    color: #2563eb;
}

.pos-pay-btn.wave .pos-pay-icon[b-vx3q696u1j] {
    background: #cffafe;
    color: #0891b2;
}

/* ── SELECTED PAYMENTS LIST ─────────────────────────────────── */
.pos-pay-list[b-vx3q696u1j] {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    max-height: 160px;
    overflow-y: auto;
    padding-top: 10px;
    border-top: 0.5px solid var(--pos-bdr);
}

.pos-pay-list-item[b-vx3q696u1j] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: var(--pos-surface-2);
    border-radius: 7px;
    font-size: 12px;
}

    .pos-pay-list-item > i:first-child[b-vx3q696u1j] {
        color: var(--pos-success);
        font-size: 13px;
    }

    .pos-pay-list-item .pli-name[b-vx3q696u1j] {
        flex: 1;
        font-weight: 600;
        color: var(--pos-ink);
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .pos-pay-list-item .pli-ref[b-vx3q696u1j] {
        color: var(--pos-faint);
        font-weight: 400;
        margin-left: 4px;
    }

    .pos-pay-list-item .pli-amt[b-vx3q696u1j] {
        font-variant-numeric: tabular-nums;
        color: var(--pos-success);
        font-weight: 600;
    }

    .pos-pay-list-item .pli-rm[b-vx3q696u1j] {
        border: none;
        background: transparent;
        color: var(--pos-faint);
        cursor: pointer;
        font-size: 11px;
        padding: 2px 5px;
        border-radius: 4px;
    }

        .pos-pay-list-item .pli-rm:hover[b-vx3q696u1j] {
            background: var(--pos-danger-bg);
            color: var(--pos-danger);
        }

/* ── ALERTS ────────────────────────────────────────────────── */
.pos-alert[b-vx3q696u1j] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: var(--pos-radius-sm);
    font-size: 13px;
    font-weight: 500;
}

    .pos-alert.success[b-vx3q696u1j] {
        background: var(--pos-success-bg);
        color: #1a7f37;
        border: 0.5px solid #c3e6cb;
    }

    .pos-alert.error[b-vx3q696u1j] {
        background: var(--pos-danger-bg);
        color: var(--pos-danger);
        border: 0.5px solid #f5c6c6;
    }

    .pos-alert i[b-vx3q696u1j] {
        font-size: 15px;
    }

/* ── BOTTOM ACTIONS ────────────────────────────────────────── */
.pos-bottom-actions[b-vx3q696u1j] {
    background: var(--pos-surface);
    border: 0.5px solid var(--pos-bdr);
    border-radius: var(--pos-radius);
    padding: 10px;
    display: flex;
    gap: 8px;
}

.pos-btn-hold[b-vx3q696u1j] {
    flex: 1;
    height: 46px;
    padding: 0 16px;
    background: var(--pos-surface);
    border: 0.5px solid #fecaca;
    border-radius: var(--pos-radius-sm);
    font-size: 13px;
    font-weight: 600;
    color: var(--pos-danger);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    transition: all var(--pos-transition);
}

    .pos-btn-hold:hover[b-vx3q696u1j] {
        background: var(--pos-danger-bg);
    }

    .pos-btn-hold i[b-vx3q696u1j] {
        font-size: 14px;
    }

.pos-btn-checkout[b-vx3q696u1j] {
    flex: 2;
    height: 45px;
    padding: 0 18px;
    background: var(--pos-success);
    border: none;
    border-radius: var(--pos-radius-sm);
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background var(--pos-transition);
    font-variant-numeric: tabular-nums;
}

    .pos-btn-checkout:hover:not(:disabled)[b-vx3q696u1j] {
        background: #15803d;
    }

    .pos-btn-checkout:disabled[b-vx3q696u1j] {
        opacity: .5;
        cursor: not-allowed;
    }

    .pos-btn-checkout i[b-vx3q696u1j] {
        font-size: 16px;
    }

/* ── RESPONSIVE ────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .pos-cart-area[b-vx3q696u1j] {
        flex-direction: column;
    }

    .pos-side-col[b-vx3q696u1j] {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
    }

        .pos-side-col .pos-panel[b-vx3q696u1j] {
            flex: 1;
            min-width: 240px;
        }
}

@media (max-width: 768px) {
    .pos-shell[b-vx3q696u1j] {
        padding: 8px;
        gap: 8px;
    }

    .pos-sidebar[b-vx3q696u1j] {
        width: 52px;
    }

    .pos-side-col[b-vx3q696u1j] {
        flex-direction: column;
    }

        .pos-side-col .pos-panel[b-vx3q696u1j] {
            min-width: 0;
        }
}
/* /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;
    }
}
/* /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;
    }
}
/* /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;
    }
/* /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;
    }
}
/* /Pages/WasteMngt/CollectionRoutes.razor.rz.scp.css */
/* =========================================================
   COLLECTION ROUTES — ENTERPRISE UI
   ========================================================= */
[b-bi8olv4saf] .cr-page-bg {
    /* =====================================================
       MAP COLLECTION ROUTES TOKENS TO GLOBAL DESIGN SYSTEM
       ===================================================== */

    --cr-primary: var(--brand-1);
    --cr-primary-dark: var(--brand-2);
    --cr-primary-soft: #EFF6FF;
    --cr-success: var(--success);
    --cr-success-soft: #E6F4EA;
    --cr-danger: var(--danger);
    --cr-danger-soft: #FDE8E8;
    --cr-warning: var(--warning);
    --cr-warning-soft: #FFF7E6;
    --cr-text: var(--ink);
    --cr-text-muted: var(--muted);
    --cr-text-soft: #94A3B8;
    --cr-border: var(--border-1);
    --cr-border-soft: #F1F5F9;
    --cr-surface: var(--bg-panel);
    --cr-surface-alt: var(--surface-1);
    --cr-bg: var(--bg-app);
    --cr-radius: var(--radius);
    --cr-radius-sm: var(--radius-sm);
    --cr-shadow: var(--shadow-1);
    background: var(--cr-bg);
    min-height: 100vh;
    padding: 18px;
}


/* =========================================================
   HEADER CARD
   ========================================================= */

[b-bi8olv4saf] .cr-header-card {
    background: var(--cr-surface);
    border: 1px solid var(--cr-border);
    border-radius: var(--cr-radius);
    box-shadow: var(--cr-shadow);
    overflow: hidden;
}

[b-bi8olv4saf] .cr-header-top {
    padding: 14px 18px;
}

[b-bi8olv4saf] .cr-header-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: var(--cr-primary-soft);
    color: var(--cr-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

    [b-bi8olv4saf] .cr-header-icon .rzi {
        font-size: 20px;
    }

[b-bi8olv4saf] .cr-title {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: var(--cr-text);
    line-height: 1.2;
}

[b-bi8olv4saf] .cr-subtitle {
    margin: 2px 0 0;
    color: var(--cr-text-muted);
    font-size: 13px;
}


/* =========================================================
   HEADER BUTTONS
   ========================================================= */

[b-bi8olv4saf] .cr-btn-primary.rz-button {
    height: 38px !important;
    border-radius: 10px !important;
    background: var(--cr-primary) !important;
    border-color: var(--cr-primary) !important;
    color: #fff !important;
    font-weight: 600 !important;
    padding: 0 16px !important;
}

    [b-bi8olv4saf] .cr-btn-primary.rz-button:hover {
        background: var(--cr-primary-dark) !important;
        border-color: var(--cr-primary-dark) !important;
    }

[b-bi8olv4saf] .cr-btn-secondary.rz-button {
    height: 38px !important;
    border-radius: 10px !important;
    background: #fff !important;
    border: 1px solid var(--cr-border) !important;
    color: var(--cr-text) !important;
    font-weight: 500 !important;
    padding: 0 16px !important;
}

    [b-bi8olv4saf] .cr-btn-secondary.rz-button:hover {
        background: var(--cr-surface-alt) !important;
    }


/* =========================================================
   TABS
   ========================================================= */

[b-bi8olv4saf] .cr-tabs {
    border-top: 1px solid var(--cr-border);
}

    [b-bi8olv4saf] .cr-tabs .rz-tabview-nav {
        background: transparent !important;
        border: none !important;
        padding: 0 18px !important;
        gap: 6px;
    }

        [b-bi8olv4saf] .cr-tabs .rz-tabview-nav li {
            background: transparent !important;
            border: none !important;
        }

            [b-bi8olv4saf] .cr-tabs .rz-tabview-nav li a {
                border: none !important;
                border-bottom: 2px solid transparent !important;
                background: transparent !important;
                color: var(--cr-text-muted) !important;
                padding: 16px 12px !important;
                font-size: 13px !important;
                font-weight: 600 !important;
                display: inline-flex !important;
                align-items: center !important;
                gap: 8px !important;
            }

            [b-bi8olv4saf] .cr-tabs .rz-tabview-nav li.rz-tabview-selected a {
                color: var(--cr-primary) !important;
                border-bottom-color: var(--cr-primary) !important;
            }

    [b-bi8olv4saf] .cr-tabs .rz-tabview-panels {
        display: none !important;
    }


/* =========================================================
   STATS
   ========================================================= */

[b-bi8olv4saf] .cr-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

@media (max-width: 992px) {
    [b-bi8olv4saf] .cr-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    [b-bi8olv4saf] .cr-stats-grid {
        grid-template-columns: 1fr;
    }
}

[b-bi8olv4saf] .cr-stat-card {
    background: var(--cr-surface);
    border: 1px solid var(--cr-border);
    border-radius: var(--cr-radius);
    padding: 16px 18px;
    box-shadow: var(--cr-shadow);
}

[b-bi8olv4saf] .cr-stat-label {
    margin: 0 0 6px;
    font-size: 11px;
    font-weight: 700;
    color: var(--cr-text-soft);
    text-transform: uppercase;
    letter-spacing: .6px;
}

[b-bi8olv4saf] .cr-stat-value {
    margin: 0;
    font-size: 34px;
    line-height: 1;
    font-weight: 700;
    color: var(--cr-text);
}

[b-bi8olv4saf] .cr-stat-success {
    color: var(--cr-success);
}

[b-bi8olv4saf] .cr-stat-primary {
    color: var(--cr-primary);
}


/* =========================================================
   TOOLBAR
   ========================================================= */

[b-bi8olv4saf] .cr-toolbar {
    background: var(--cr-surface);
    border: 1px solid var(--cr-border);
    border-radius: var(--cr-radius);
    padding: 14px 16px;
    box-shadow: var(--cr-shadow);
}

[b-bi8olv4saf] .cr-search {
    position: relative;
    width: 280px;
}

    [b-bi8olv4saf] .cr-search .rzi {
        position: absolute;
        left: 14px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--cr-text-soft);
        font-size: 16px;
    }

    [b-bi8olv4saf] .cr-search input {
        width: 100%;
        height: 38px;
        border-radius: 999px;
        border: 1px solid var(--cr-border);
        background: var(--cr-surface-alt);
        padding: 0 14px 0 40px;
        font-size: 13px;
        color: var(--cr-text);
    }

        [b-bi8olv4saf] .cr-search input:focus {
            outline: none;
            border-color: var(--cr-primary);
            background: #fff;
        }

[b-bi8olv4saf] .cr-toolbar-muted {
    font-size: 13px;
    color: var(--cr-text-muted);
}

[b-bi8olv4saf] .cr-toolbar-select {
    height: 34px;
    border-radius: 8px;
    border: 1px solid var(--cr-border);
    padding: 0 10px;
    font-size: 13px;
}


/* =========================================================
   GRID WRAPPER
   ========================================================= */

[b-bi8olv4saf] .cr-grid-wrap {
    background: #fff;
    border: 1px solid var(--cr-border);
    border-radius: var(--cr-radius);
    overflow: hidden;
    box-shadow: var(--cr-shadow);
}


/* =========================================================
   RADZEN GRID
   ========================================================= */

[b-bi8olv4saf] .cr-grid {
    border: none !important;
}

    [b-bi8olv4saf] .cr-grid .rz-grid-table {
        border-collapse: collapse !important;
    }

        [b-bi8olv4saf] .cr-grid .rz-grid-table thead th {
            background: #F1F5F9 !important;
            border-bottom: 1px solid var(--cr-border) !important;
            padding: 14px 16px !important;
            color: var(--cr-text-soft) !important;
            font-size: 11px !important;
            text-transform: uppercase !important;
            font-weight: 700 !important;
            letter-spacing: .6px !important;
        }

        [b-bi8olv4saf] .cr-grid .rz-grid-table tbody td {
            padding: 14px 16px !important;
            border-bottom: 1px solid #F3F4F6 !important;
            font-size: 13px !important;
            color: var(--cr-text) !important;
        }

        [b-bi8olv4saf] .cr-grid .rz-grid-table tbody tr:hover {
            background: #FAFBFF !important;
        }


/* =========================================================
   NAME CELL
   ========================================================= */

[b-bi8olv4saf] .cr-name-cell {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

[b-bi8olv4saf] .cr-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

[b-bi8olv4saf] .cr-avatar-blue {
    background: #DBEAFE;
    color: #1D4ED8;
}

[b-bi8olv4saf] .cr-avatar-purple {
    background: #EDE9FE;
    color: #6D28D9;
}

[b-bi8olv4saf] .cr-avatar-green {
    background: #DCFCE7;
    color: #15803D;
}

[b-bi8olv4saf] .cr-avatar-pink {
    background: #FCE7F3;
    color: #BE185D;
}

[b-bi8olv4saf] .cr-avatar-coral {
    background: #FDE2E2;
    color: #C2410C;
}

[b-bi8olv4saf] .cr-avatar-teal {
    background: #CCFBF1;
    color: #0F766E;
}

[b-bi8olv4saf] .cr-avatar-amber {
    background: #FEF3C7;
    color: #B45309;
}


/* =========================================================
   STATUS PILLS
   ========================================================= */

[b-bi8olv4saf] .cr-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 24px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}

[b-bi8olv4saf] .cr-pill-success {
    background: var(--cr-success-soft);
    color: var(--cr-success);
}

[b-bi8olv4saf] .cr-pill-danger {
    background: var(--cr-danger-soft);
    color: var(--cr-danger);
}

[b-bi8olv4saf] .cr-pill-info {
    background: var(--cr-primary-soft);
    color: var(--cr-primary);
}


/* =========================================================
   PAGER
   ========================================================= */

[b-bi8olv4saf] .cr-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 16px;
    background: #fff;
}

[b-bi8olv4saf] .cr-pager-btn,
[b-bi8olv4saf] .cr-pager-num {
    min-width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid var(--cr-border);
    background: #fff;
    color: var(--cr-text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 13px;
}

    [b-bi8olv4saf] .cr-pager-num.active {
        background: var(--cr-primary);
        color: #fff;
        border-color: var(--cr-primary);
        font-weight: 700;
    }


/* =========================================================
   ROUTE PREVIEW
   ========================================================= */

[b-bi8olv4saf] .cr-route-card {
    background: #fff;
    border: 1px solid var(--cr-border);
    border-radius: var(--cr-radius);
    overflow: hidden;
    box-shadow: var(--cr-shadow);
}

[b-bi8olv4saf] .cr-route-header {
    padding: 12px 16px;
    border-bottom: 1px solid var(--cr-border);
    font-size: 14px;
    font-weight: 600;
    color: var(--cr-text);
}

[b-bi8olv4saf] .cr-route-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    min-height: 420px;
}

@media (max-width: 992px) {
    [b-bi8olv4saf] .cr-route-layout {
        grid-template-columns: 1fr;
    }
}

[b-bi8olv4saf] .cr-route-sidebar {
    padding: 18px;
    background: #fff;
    border-right: 1px solid var(--cr-border);
}

[b-bi8olv4saf] .cr-route-field {
    margin-bottom: 16px;
}

[b-bi8olv4saf] .cr-route-label {
    display: block;
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 700;
    color: var(--cr-text-soft);
    text-transform: uppercase;
}

[b-bi8olv4saf] .cr-route-map {
    position: relative;
    background: linear-gradient(135deg,#EAF1FB,#F4F7FC);
    min-height: 420px;
}

[b-bi8olv4saf] .cr-map-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748B;
    font-size: 15px;
}

[b-bi8olv4saf] .cr-map-widget {
    position: absolute;
    top: 16px;
    right: 16px;
    background: #fff;
    border: 1px solid var(--cr-border);
    border-radius: 12px;
    padding: 12px 14px;
    box-shadow: var(--cr-shadow);
    min-width: 170px;
}

[b-bi8olv4saf] .cr-map-widget-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--cr-text);
}

[b-bi8olv4saf] .cr-map-widget-sub {
    margin-top: 4px;
    font-size: 12px;
    color: var(--cr-text-muted);
}


/* =========================================================
   MODALS — aligned with global modal system
   ========================================================= */

[b-bi8olv4saf] .cr-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow-y: auto;
    padding: 4vh 2vw;
    background: rgba(15, 23, 42, .45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    animation: crModalFadeIn-b-bi8olv4saf .15s ease-out;
}

@keyframes crModalFadeIn-b-bi8olv4saf {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

[b-bi8olv4saf] .cr-modal-shell {
    display: flex;
    flex-direction: column;
    width: min(92vw, 1200px);
    max-height: 94vh;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--cr-border);
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, .18), 0 4px 12px rgba(15, 23, 42, .08);
    animation: crModalSlideIn-b-bi8olv4saf .18s ease-out;
}

[b-bi8olv4saf] .cr-modal-shell-wide {
    width: min(96vw, 1450px);
}

[b-bi8olv4saf] .cr-modal-shell-narrow {
    width: min(720px, 92vw);
}

@keyframes crModalSlideIn-b-bi8olv4saf {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(.99);
    }

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

[b-bi8olv4saf] .cr-modal-header {
    position: sticky;
    top: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    background: #fff;
    border-bottom: 1px solid var(--cr-border);
}

[b-bi8olv4saf] .cr-modal-header-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 700;
    color: var(--cr-text);
}

[b-bi8olv4saf] .cr-modal-close {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--cr-border);
    background: #fff;
    color: var(--cr-text-muted);
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all .18s ease;
}

    [b-bi8olv4saf] .cr-modal-close:hover {
        background: #F8FAFC;
        color: var(--cr-text);
        border-color: #CBD5E1;
    }

[b-bi8olv4saf] .cr-modal-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 20px;
    background: #fff;
}

[b-bi8olv4saf] .cr-modal-body-split {
    display: grid;
    grid-template-columns: 240px 1fr;
    min-height: 0;
    flex: 1;
    overflow: hidden;
}

[b-bi8olv4saf] .cr-modal-nav {
    border-right: 1px solid var(--cr-border);
    background: #F8FAFC;
    padding: 18px 14px;
    overflow-y: auto;
}

    [b-bi8olv4saf] .cr-modal-nav ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    [b-bi8olv4saf] .cr-modal-nav li {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 11px 14px;
        margin-bottom: 6px;
        border-radius: 10px;
        color: var(--cr-text-muted);
        cursor: pointer;
        font-size: 13px;
        font-weight: 600;
        transition: all .18s ease;
    }

        [b-bi8olv4saf] .cr-modal-nav li:hover {
            background: #EAF2FF;
            color: var(--cr-primary);
        }

        [b-bi8olv4saf] .cr-modal-nav li.active {
            background: var(--cr-primary);
            color: #fff;
        }

[b-bi8olv4saf] .cr-modal-section {
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 22px;
    background: #fff;
}

[b-bi8olv4saf] .cr-modal-section-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--cr-text);
    margin-bottom: 18px;
}

[b-bi8olv4saf] .cr-modal-actions {
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px;
    background: #FAFBFC;
    border-top: 1px solid var(--cr-border);
}

[b-bi8olv4saf] .cr-modal-body::-webkit-scrollbar,
[b-bi8olv4saf] .cr-modal-section::-webkit-scrollbar,
[b-bi8olv4saf] .cr-modal-nav::-webkit-scrollbar {
    width: 10px;
}

[b-bi8olv4saf] .cr-modal-body::-webkit-scrollbar-thumb,
[b-bi8olv4saf] .cr-modal-section::-webkit-scrollbar-thumb,
[b-bi8olv4saf] .cr-modal-nav::-webkit-scrollbar-thumb {
    background: #CBD5E1;
    border-radius: 999px;
    border: 2px solid #fff;
}

@media (max-width: 992px) {

    [b-bi8olv4saf] .cr-modal-shell,
    [b-bi8olv4saf] .cr-modal-shell-wide,
    [b-bi8olv4saf] .cr-modal-shell-narrow {
        width: 96vw;
        max-height: 96vh;
    }

    [b-bi8olv4saf] .cr-modal-body-split {
        grid-template-columns: 1fr;
    }

    [b-bi8olv4saf] .cr-modal-nav {
        border-right: none;
        border-bottom: 1px solid var(--cr-border);
    }

    [b-bi8olv4saf] .cr-modal-actions {
        flex-direction: column;
        align-items: stretch;
    }
}
# Collection Routes Modal CSS

```css
/* ==========================================================
   COLLECTION ROUTES MODAL
   CSS ONLY — NO MARKUP CHANGES REQUIRED
   Designed to plug directly into your existing modal system.
   ========================================================== */
/* ==========================================================
   MODAL SHELL
   ========================================================== */
.cr-modal-shell[b-bi8olv4saf] {
    width: min(720px, 96vw);
    background: #ffffff;
    border-radius: 14px;
    border: 1px solid var(--border-1, #e5e7eb);
    box-shadow: 0 20px 50px rgba(0,0,0,.14);
    overflow: hidden;
    animation: crModalIn-b-bi8olv4saf .18s ease;
}

.cr-modal-shell-wide[b-bi8olv4saf] {
    width: min(1180px, 96vw);
    max-height: 94vh;
    display: flex;
    flex-direction: column;
}

@keyframes crModalIn-b-bi8olv4saf {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(.98);
    }

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

/* ==========================================================
   HEADER
   ========================================================== */
.cr-modal-header[b-bi8olv4saf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-1, #e5e7eb);
    background: #ffffff;
    flex-shrink: 0;
}

.cr-modal-header-title[b-bi8olv4saf] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 600;
    color: var(--ink, #1f2937);
}

    .cr-modal-header-title .rzi[b-bi8olv4saf] {
        color: var(--brand-1, #2563eb);
        font-size: 18px;
    }

.cr-modal-close[b-bi8olv4saf] {
    width: 34px;
    height: 34px;
    border: none;
    background: transparent;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: .2s ease;
    color: #6b7280;
}

    .cr-modal-close:hover[b-bi8olv4saf] {
        background: rgba(0,0,0,.06);
        color: #dc2626;
    }

/* ==========================================================
   BODY LAYOUT
   ========================================================== */
.cr-modal-body-split[b-bi8olv4saf] {
    display: grid;
    grid-template-columns: 240px 1fr;
    min-height: 0;
    flex: 1;
    overflow: hidden;
}

/* ==========================================================
   SIDEBAR NAV
   ========================================================== */
.cr-modal-nav[b-bi8olv4saf] {
    border-right: 1px solid var(--border-1, #e5e7eb);
    background: #fafafa;
    overflow-y: auto;
}

    .cr-modal-nav ul[b-bi8olv4saf] {
        list-style: none;
        margin: 0;
        padding: 14px;
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .cr-modal-nav li[b-bi8olv4saf] {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 14px;
        border-radius: 10px;
        cursor: pointer;
        transition: .18s ease;
        font-size: 13px;
        font-weight: 500;
        color: #475569;
        user-select: none;
    }

        .cr-modal-nav li .rzi[b-bi8olv4saf] {
            font-size: 16px;
        }

        .cr-modal-nav li:hover[b-bi8olv4saf] {
            background: #f1f5f9;
            color: #0f172a;
        }

        .cr-modal-nav li.active[b-bi8olv4saf] {
            background: rgba(37, 99, 235, .10);
            color: #2563eb;
            font-weight: 600;
        }

/* ==========================================================
   MAIN CONTENT
   ========================================================== */
.cr-modal-section[b-bi8olv4saf] {
    padding: 22px;
    overflow-y: auto;
    background: #ffffff;
}

.cr-modal-section-title[b-bi8olv4saf] {
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 22px;
}

/* ==========================================================
   FORM FIELDS
   ========================================================== */
.cr-field[b-bi8olv4saf] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-bottom: 18px;
}

.cr-field-label[b-bi8olv4saf] {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: #64748b;
}

.cr-native-input[b-bi8olv4saf],
.cr-native-select[b-bi8olv4saf] {
    width: 100%;
    min-height: 42px;
    border: 1px solid #dbe2ea;
    border-radius: 10px;
    background: #ffffff;
    padding: 0 14px;
    font-size: 13px;
    color: #0f172a;
    transition: border-color .18s ease, box-shadow .18s ease;
    outline: none;
}

textarea.cr-native-input[b-bi8olv4saf] {
    min-height: 90px;
    resize: vertical;
    padding: 12px 14px;
}

.cr-native-input:focus[b-bi8olv4saf],
.cr-native-select:focus[b-bi8olv4saf] {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}

.cr-native-select[b-bi8olv4saf] {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, #64748b 50%), linear-gradient(135deg, #64748b 50%, transparent 50%);
    background-position: calc(100% - 18px) calc(50% - 3px), calc(100% - 12px) calc(50% - 3px);
    background-size: 6px 6px;
    background-repeat: no-repeat;
    padding-right: 38px;
}

/* ==========================================================
   GRID HELPERS
   ========================================================== */
.cr-grid-2[b-bi8olv4saf] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* ==========================================================
   SMALL INLINE LINKS
   ========================================================== */
.cr-small-link[b-bi8olv4saf] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    font-size: 12px;
    font-weight: 600;
    color: #2563eb;
    text-decoration: none;
    cursor: pointer;
    width: fit-content;
}

    .cr-small-link:hover[b-bi8olv4saf] {
        text-decoration: underline;
    }

/* ==========================================================
   ACTION FOOTER
   ========================================================== */
.cr-modal-actions[b-bi8olv4saf] {
    position: sticky;
    bottom: -22px;
    background: #ffffff;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 20px;
    margin-top: 30px;
    border-top: 1px solid #eef2f7;
}

    /* ==========================================================
   RADZEN BUTTON NORMALIZATION
   ========================================================== */
    .cr-modal-actions .rz-button[b-bi8olv4saf] {
        min-width: 120px;
        height: 42px;
        border-radius: 10px !important;
        font-weight: 600 !important;
        box-shadow: none !important;
        transition: .18s ease !important;
    }

        .cr-modal-actions .rz-button:hover[b-bi8olv4saf] {
            transform: translateY(-1px);
        }

/* ==========================================================
   MUTED TEXT
   ========================================================== */
.cr-muted[b-bi8olv4saf] {
    color: #64748b;
    font-size: 13px;
}

/* ==========================================================
   SCROLLBAR
   ========================================================== */
.cr-modal-section[b-bi8olv4saf]::-webkit-scrollbar,
.cr-modal-nav[b-bi8olv4saf]::-webkit-scrollbar {
    width: 10px;
}

.cr-modal-section[b-bi8olv4saf]::-webkit-scrollbar-thumb,
.cr-modal-nav[b-bi8olv4saf]::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 20px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (max-width: 920px) {

    .cr-modal-body-split[b-bi8olv4saf] {
        grid-template-columns: 1fr;
    }

    .cr-modal-nav[b-bi8olv4saf] {
        border-right: none;
        border-bottom: 1px solid var(--border-1, #e5e7eb);
    }

        .cr-modal-nav ul[b-bi8olv4saf] {
            flex-direction: row;
            overflow-x: auto;
        }

        .cr-modal-nav li[b-bi8olv4saf] {
            white-space: nowrap;
        }

    .cr-grid-2[b-bi8olv4saf] {
        grid-template-columns: 1fr;
    }

    .cr-modal-actions[b-bi8olv4saf] {
        flex-direction: column-reverse;
    }

        .cr-modal-actions .rz-button[b-bi8olv4saf] {
            width: 100%;
        }
}

@media (max-width: 640px) {

    .cr-modal-header[b-bi8olv4saf] {
        padding: 14px 16px;
    }

    .cr-modal-section[b-bi8olv4saf] {
        padding: 18px 16px;
    }

    .cr-modal-section-title[b-bi8olv4saf] {
        font-size: 16px;
    }
}

/* /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 */
}

 
/* /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;
}
/* /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;
}
/* /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;
        }
/* /Shared/SMELayout.razor.rz.scp.css */
/* ============================================================
   AfriERP – SMELayout.razor.css
   Theme: Corporate Blue / Grey · Side menu with collapse
   ============================================================ */


/* ── Reset ─────────────────────────────────────────────────── */
*[b-4tc9nuqmv6], *[b-4tc9nuqmv6]::before, *[b-4tc9nuqmv6]::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html[b-4tc9nuqmv6], body[b-4tc9nuqmv6] {
    height: 100%;
    font-family: 'Segoe UI', system-ui, sans-serif;
}

/* ============================================================
   RADZEN-STYLE RIPPLE EFFECT
   ============================================================ */
.rz-ripple[b-4tc9nuqmv6] {
    position: relative;
    overflow: hidden;
}

    .rz-ripple[b-4tc9nuqmv6]::after {
        content: "";
        position: absolute;
        inset: 0;
        background-image: radial-gradient(circle, currentColor 10%, transparent 10.01%);
        background-repeat: no-repeat;
        background-position: 50%;
        transform: scale(10, 10);
        opacity: 0;
        transition: transform .5s, opacity 1s;
        pointer-events: none;
    }

    .rz-ripple:active[b-4tc9nuqmv6]::after {
        transform: scale(0, 0);
        opacity: .2;
        transition: 0s;
    }

/* ============================================================
   SHELL
   ============================================================ */
.afri-shell[b-4tc9nuqmv6] {
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--body-bg);
}

.afri-main[b-4tc9nuqmv6] {
    flex: 1;
    display: flex;
    min-height: 0;
    overflow: hidden;
}

/* ============================================================
   TOP BAR
   ============================================================ */
.afri-topbar[b-4tc9nuqmv6] {
    display: flex;
    align-items: center;
    height: var(--topbar-h);
    background: var(--topbar-bg);
    border-bottom: 1px solid var(--topbar-border);
    box-shadow: 0 1px 3px rgba(15, 23, 42, .04);
    flex-shrink: 0;
    z-index: 200;
    padding: 0 16px;
    gap: 14px;
}

.topbar-left[b-4tc9nuqmv6] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.topbar-hamburger[b-4tc9nuqmv6] {
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    color: var(--topbar-icon);
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--t-fast), color var(--t-fast);
}

    .topbar-hamburger:hover[b-4tc9nuqmv6] {
        background: var(--topbar-icon-hover-bg);
        color: var(--topbar-text-hi);
    }

.afri-brand[b-4tc9nuqmv6] {
    display: flex;
    align-items: center;
    gap: 10px;
    user-select: none;
}

.brand-logo[b-4tc9nuqmv6] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--brand-tile) 0%, #1e40af 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(29, 78, 216, .25);
    flex-shrink: 0;
}

    .brand-logo .brand-icon[b-4tc9nuqmv6],
    .brand-logo .rz-icon[b-4tc9nuqmv6] {
        color: #fff;
        font-size: 18px;
    }

.brand-name[b-4tc9nuqmv6] {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--brand-name-color);
    text-transform: uppercase;
}

.topbar-center[b-4tc9nuqmv6] {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: 8px;
}

.topbar-right[b-4tc9nuqmv6] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.topbar-divider[b-4tc9nuqmv6] {
    width: 1px;
    height: 22px;
    background: var(--topbar-border);
    margin: 0 6px;
}

.topbar-icon-btn[b-4tc9nuqmv6] {
    position: relative;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    color: var(--topbar-icon);
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
}

    .topbar-icon-btn:hover[b-4tc9nuqmv6] {
        background: var(--topbar-icon-hover-bg);
        color: var(--topbar-text-hi);
    }

    .topbar-icon-btn:active[b-4tc9nuqmv6] {
        transform: scale(.94);
    }

    .topbar-icon-btn.logout-btn:hover[b-4tc9nuqmv6] {
        background: #fef2f2;
        color: #dc2626;
    }

.topbar-badge-dot[b-4tc9nuqmv6] {
    position: absolute;
    top: 7px;
    right: 8px;
    width: 8px;
    height: 8px;
    background: #ef4444;
    border-radius: 50%;
    border: 2px solid var(--topbar-bg);
    pointer-events: none;
}

.topbar-badge-count[b-4tc9nuqmv6] {
    position: absolute;
    top: 3px;
    right: 2px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: #dc2626;
    color: #fff;
    border: 2px solid var(--topbar-bg);
    font-size: 9px;
    line-height: 12px;
    font-weight: 700;
}

.topbar-user[b-4tc9nuqmv6] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px 4px 4px;
    border-radius: 24px;
    background: var(--topbar-icon-hover-bg);
    margin-left: 4px;
}

.topbar-user-avatar[b-4tc9nuqmv6] {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6, #1d4ed8);
    color: #fff;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.topbar-user-info[b-4tc9nuqmv6] {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.topbar-user-name[b-4tc9nuqmv6] {
    font-size: 12px;
    font-weight: 600;
    color: var(--topbar-text-hi);
}

.topbar-user-role[b-4tc9nuqmv6] {
    font-size: 10px;
    color: var(--topbar-text);
}

@media (max-width: 900px) {
    .topbar-user-info[b-4tc9nuqmv6] {
        display: none;
    }
}

/* ============================================================
   GLOBAL CHAT
   ============================================================ */
.afri-chat-panel[b-4tc9nuqmv6] {
    position: fixed;
    right: 22px;
    bottom: 22px;
    width: min(820px, calc(100vw - 32px));
    height: min(620px, calc(100vh - 96px));
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 14px;
    box-shadow: 0 24px 70px rgba(15, 23, 42, .28);
    z-index: 1200;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.afri-chat-header[b-4tc9nuqmv6] {
    height: 58px;
    padding: 10px 12px 10px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #e5e7eb;
    background: linear-gradient(180deg, #f8fafc 0%, #eef6ff 100%);
}

.afri-chat-title[b-4tc9nuqmv6] {
    font-weight: 800;
    color: #0f172a;
    line-height: 1.1;
    font-size: 15px;
}

.afri-chat-subtitle[b-4tc9nuqmv6] {
    font-size: 12px;
    color: #64748b;
    max-width: 420px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.afri-chat-header-actions[b-4tc9nuqmv6] {
    display: flex;
    gap: 4px;
}

.afri-chat-icon[b-4tc9nuqmv6] {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #475569;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.afri-chat-icon:hover[b-4tc9nuqmv6] {
    background: #e2e8f0;
    color: #0f172a;
}

.afri-chat-new[b-4tc9nuqmv6] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid #e5e7eb;
    background: #fff;
}

.afri-chat-body[b-4tc9nuqmv6] {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 270px 1fr;
}

.afri-chat-list[b-4tc9nuqmv6] {
    border-right: 1px solid #e5e7eb;
    overflow: auto;
    background: #f8fafc;
}

.afri-chat-list-item[b-4tc9nuqmv6] {
    position: relative;
    width: 100%;
    min-height: 70px;
    border: 0;
    border-bottom: 1px solid #e5e7eb;
    padding: 10px 34px 10px 12px;
    background: transparent;
    text-align: left;
}

.afri-chat-list-item:hover[b-4tc9nuqmv6],
.afri-chat-list-item.active[b-4tc9nuqmv6] {
    background: #eff6ff;
}

.afri-chat-list-item.active[b-4tc9nuqmv6] {
    box-shadow: inset 3px 0 0 #2563eb;
}

.afri-chat-list-title[b-4tc9nuqmv6] {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.afri-chat-list-preview[b-4tc9nuqmv6] {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    color: #64748b;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.afri-chat-unread[b-4tc9nuqmv6] {
    position: absolute;
    top: 12px;
    right: 10px;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: 999px;
    background: #2563eb;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.afri-chat-thread[b-4tc9nuqmv6] {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.afri-chat-participants[b-4tc9nuqmv6] {
    padding: 8px 12px;
    border-bottom: 1px solid #e5e7eb;
    color: #64748b;
    font-size: 12px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.afri-chat-messages[b-4tc9nuqmv6] {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 14px;
    background: #ffffff;
}

.afri-chat-message[b-4tc9nuqmv6] {
    max-width: 76%;
    margin-bottom: 12px;
}

.afri-chat-message.mine[b-4tc9nuqmv6] {
    margin-left: auto;
}

.afri-chat-message-meta[b-4tc9nuqmv6] {
    font-size: 11px;
    color: #64748b;
    margin-bottom: 3px;
}

.afri-chat-message.mine .afri-chat-message-meta[b-4tc9nuqmv6] {
    text-align: right;
}

.afri-chat-bubble[b-4tc9nuqmv6] {
    padding: 9px 11px;
    border-radius: 10px;
    background: #f1f5f9;
    color: #0f172a;
    font-size: 13px;
    white-space: pre-wrap;
}

.afri-chat-message.mine .afri-chat-bubble[b-4tc9nuqmv6] {
    background: #2563eb;
    color: #fff;
}

.afri-chat-compose[b-4tc9nuqmv6] {
    display: grid;
    grid-template-columns: 1fr 42px;
    gap: 8px;
    padding: 10px;
    border-top: 1px solid #e5e7eb;
    background: #f8fafc;
}

.afri-chat-compose textarea[b-4tc9nuqmv6] {
    min-height: 42px;
    max-height: 96px;
    resize: vertical;
}

.afri-chat-empty[b-4tc9nuqmv6] {
    padding: 18px;
    color: #64748b;
    font-size: 13px;
}

.afri-chat-launcher-wrap[b-4tc9nuqmv6] {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 1190;
    display: flex;
    align-items: flex-end;
    gap: 12px;
}

.afri-chat-launcher[b-4tc9nuqmv6] {
    position: relative;
    width: 58px;
    height: 58px;
    border: 0;
    border-radius: 50%;
    background: #2563eb;
    color: #fff;
    box-shadow: 0 16px 36px rgba(37, 99, 235, .36), 0 4px 12px rgba(15, 23, 42, .18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    transition: transform .16s ease, background .16s ease, box-shadow .16s ease;
}

.afri-chat-launcher:hover[b-4tc9nuqmv6] {
    background: #1d4ed8;
    transform: translateY(-2px);
    box-shadow: 0 18px 42px rgba(37, 99, 235, .42), 0 6px 16px rgba(15, 23, 42, .2);
}

.afri-chat-launcher:active[b-4tc9nuqmv6] {
    transform: translateY(0) scale(.96);
}

.afri-chat-launcher-badge[b-4tc9nuqmv6] {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: #dc2626;
    color: #fff;
    border: 2px solid #fff;
    font-size: 11px;
    line-height: 18px;
    font-weight: 800;
}

.afri-chat-toast[b-4tc9nuqmv6] {
    min-height: 48px;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
    padding: 10px 13px;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    background: #fff;
    color: #0f172a;
    box-shadow: 0 12px 34px rgba(15, 23, 42, .18);
    font-size: 12px;
    text-align: left;
}

.afri-chat-toast strong[b-4tc9nuqmv6] {
    color: #1d4ed8;
    font-size: 13px;
}

.afri-chat-toast span[b-4tc9nuqmv6] {
    color: #64748b;
}

@media (max-width: 760px) {
    .afri-chat-panel[b-4tc9nuqmv6] {
        right: 10px;
        bottom: 10px;
        width: calc(100vw - 20px);
        height: calc(100vh - 72px);
    }

    .afri-chat-body[b-4tc9nuqmv6] {
        grid-template-columns: 1fr;
    }

    .afri-chat-list[b-4tc9nuqmv6] {
        max-height: 180px;
        border-right: 0;
        border-bottom: 1px solid #e5e7eb;
    }

    .afri-chat-launcher-wrap[b-4tc9nuqmv6] {
        right: 14px;
        bottom: 14px;
    }

    .afri-chat-toast[b-4tc9nuqmv6] {
        display: none;
    }
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.afri-sidebar[b-4tc9nuqmv6] {
    width: var(--sidebar-w);
    background: var(--sidebar-bg);
    border-right: 1px solid var(--sidebar-border);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    transition: width var(--t-mid);
    overflow: hidden; /* clip horizontal; flyout lives outside sidebar */
    position: relative;
    z-index: 50;
}

.afri-shell.is-sidebar-collapsed .afri-sidebar[b-4tc9nuqmv6] {
    width: var(--sidebar-w-collapsed);
}

/* Search */
.sidebar-search[b-4tc9nuqmv6] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 14px 14px 8px;
    padding: 0 12px;
    height: 38px;
    background: #f8fafc;
    border: 1px solid var(--sidebar-border);
    border-radius: 8px;
    transition: border-color var(--t-fast), background var(--t-fast);
}

    .sidebar-search:focus-within[b-4tc9nuqmv6] {
        border-color: var(--accent-mid);
        background: #fff;
        box-shadow: 0 0 0 3px rgba(29, 78, 216, .08);
    }

.sidebar-search-icon[b-4tc9nuqmv6] {
    color: var(--sidebar-text-muted);
    font-size: 13px;
    flex-shrink: 0;
}

.sidebar-search-input[b-4tc9nuqmv6] {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-size: 13px;
    color: var(--sidebar-text);
    font-family: inherit;
    min-width: 0;
}

    .sidebar-search-input[b-4tc9nuqmv6]::placeholder {
        color: var(--sidebar-text-muted);
    }

.sidebar-search-kbd[b-4tc9nuqmv6] {
    font-size: 10px;
    font-weight: 600;
    color: var(--sidebar-text-muted);
    background: #fff;
    border: 1px solid var(--sidebar-border);
    border-radius: 4px;
    padding: 1px 6px;
    flex-shrink: 0;
}

.afri-shell.is-sidebar-collapsed .sidebar-search[b-4tc9nuqmv6] {
    margin: 14px 12px 8px;
    padding: 0;
    justify-content: center;
    background: transparent;
    border-color: transparent;
}

.afri-shell.is-sidebar-collapsed .sidebar-search-input[b-4tc9nuqmv6],
.afri-shell.is-sidebar-collapsed .sidebar-search-kbd[b-4tc9nuqmv6] {
    display: none;
}

.afri-shell.is-sidebar-collapsed .sidebar-search-icon[b-4tc9nuqmv6] {
    width: 40px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
    border: 1px solid var(--sidebar-border);
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
}

/* Nav list */
.sidebar-nav[b-4tc9nuqmv6] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 4px 10px 12px;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

    .sidebar-nav[b-4tc9nuqmv6]::-webkit-scrollbar {
        width: 5px;
    }

    .sidebar-nav[b-4tc9nuqmv6]::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 3px;
    }

/* Tab wrapper */
.sidebar-tab[b-4tc9nuqmv6] {
    position: relative;
    margin-bottom: 2px;
}

/* Tab header */
.sidebar-tab-header[b-4tc9nuqmv6] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    color: var(--sidebar-text);
    font-size: 13.5px;
    font-weight: 500;
    font-family: inherit;
    text-align: left;
    transition: background var(--t-fast), color var(--t-fast);
}

    .sidebar-tab-header:hover[b-4tc9nuqmv6] {
        background: var(--sidebar-hover-bg);
        color: var(--topbar-text-hi);
    }

.sidebar-tab.is-active.is-open > .sidebar-tab-header[b-4tc9nuqmv6] {
    background: var(--sidebar-active-bg);
    color: var(--sidebar-active-text);
    font-weight: 600;
}

.sidebar-tab-icon[b-4tc9nuqmv6] {
    width: 22px;
    text-align: center;
    font-size: 15px;
    color: var(--sidebar-text-muted);
    flex-shrink: 0;
    transition: color var(--t-fast);
}

.sidebar-tab-header:hover .sidebar-tab-icon[b-4tc9nuqmv6],
.sidebar-tab.is-active > .sidebar-tab-header .sidebar-tab-icon[b-4tc9nuqmv6] {
    color: var(--sidebar-active-text);
}

.sidebar-tab-label[b-4tc9nuqmv6] {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-tab-chevron[b-4tc9nuqmv6] {
    font-size: 10px;
    color: var(--sidebar-text-muted);
    flex-shrink: 0;
    transition: transform var(--t-fast);
}

.afri-shell.is-sidebar-collapsed .sidebar-tab-label[b-4tc9nuqmv6],
.afri-shell.is-sidebar-collapsed .sidebar-tab-chevron[b-4tc9nuqmv6] {
    display: none;
}

.afri-shell.is-sidebar-collapsed .sidebar-tab-header[b-4tc9nuqmv6] {
    justify-content: center;
    padding: 11px 0;
}

.afri-shell.is-sidebar-collapsed .sidebar-tab-icon[b-4tc9nuqmv6] {
    width: auto;
    font-size: 17px;
}

/* Tab content (expanded groups) */
.sidebar-tab-content[b-4tc9nuqmv6] {
    padding: 2px 0 6px 8px;
    margin-left: 12px;
    border-left: 1px solid var(--sidebar-border);
    animation: slideDown-b-4tc9nuqmv6 var(--t-mid);
}

@keyframes slideDown-b-4tc9nuqmv6 {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

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

.sidebar-group[b-4tc9nuqmv6] {
    padding: 6px 0 4px;
}

    .sidebar-group:not(:first-child)[b-4tc9nuqmv6] {
        border-top: 1px dashed var(--sidebar-border);
        margin-top: 6px;
    }

.sidebar-group-label[b-4tc9nuqmv6] {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .8px;
    color: var(--sidebar-group-label);
    text-transform: uppercase;
    padding: 6px 10px 4px;
}

/* Action item (leaf) */
.sidebar-item[b-4tc9nuqmv6] {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    color: var(--sidebar-text);
    font-size: 12.5px;
    font-weight: 500;
    font-family: inherit;
    text-align: left;
    transition: background var(--t-fast), color var(--t-fast), padding-left var(--t-fast);
    position: relative;
}

    .sidebar-item:hover[b-4tc9nuqmv6] {
        background: var(--sidebar-hover-bg);
        color: var(--topbar-text-hi);
        padding-left: 13px;
    }

    .sidebar-item.is-active[b-4tc9nuqmv6] {
        background: var(--sidebar-active-bg);
        color: var(--sidebar-active-text);
        font-weight: 600;
    }

        .sidebar-item.is-active[b-4tc9nuqmv6]::before {
            content: "";
            position: absolute;
            left: -8px;
            top: 50%;
            transform: translateY(-50%);
            width: 3px;
            height: 60%;
            background: var(--accent);
            border-radius: 0 3px 3px 0;
        }

.sidebar-item-icon[b-4tc9nuqmv6] {
    font-size: 12px;
    width: 16px;
    text-align: center;
    flex-shrink: 0;
    opacity: .85;
}

.sidebar-item-label[b-4tc9nuqmv6] {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.afri-shell.is-sidebar-collapsed .sidebar-tab-content[b-4tc9nuqmv6] {
    display: none;
}

/* ============================================================
   FLOATING FLYOUT (collapsed-mode only)
   Rendered OUTSIDE the sidebar, position:fixed so it
   escapes all overflow:hidden + scroll boundaries.
   ============================================================ */
.sidebar-flyout-floating[b-4tc9nuqmv6] {
    position: fixed;
    min-width: 260px;
    max-width: 320px;
    max-height: 80vh;
    background: var(--sidebar-bg);
    border: 1px solid var(--sidebar-border);
    border-radius: 10px;
    box-shadow: var(--shadow-lg);
    z-index: 500;
    overflow: hidden;
    animation: flyoutIn-b-4tc9nuqmv6 var(--t-fast);
    display: flex;
    flex-direction: column;
}

@keyframes flyoutIn-b-4tc9nuqmv6 {
    from {
        opacity: 0;
        transform: translateX(-6px);
    }

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

.sidebar-flyout-header[b-4tc9nuqmv6] {
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 700;
    color: var(--topbar-text-hi);
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    border-bottom: 1px solid var(--sidebar-border);
    flex-shrink: 0;
}

.sidebar-flyout-body[b-4tc9nuqmv6] {
    padding: 6px;
    overflow-y: auto;
    flex: 1;
}

.flyout-group[b-4tc9nuqmv6] {
    padding: 4px 0;
}

    .flyout-group:not(:last-child)[b-4tc9nuqmv6] {
        border-bottom: 1px dashed var(--sidebar-border);
        margin-bottom: 4px;
    }

.flyout-group-label[b-4tc9nuqmv6] {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .8px;
    color: var(--sidebar-group-label);
    text-transform: uppercase;
    padding: 6px 10px 4px;
}

.flyout-item[b-4tc9nuqmv6] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 12.5px;
    color: var(--sidebar-text);
    cursor: pointer;
    transition: background var(--t-fast), color var(--t-fast), padding-left var(--t-fast);
    user-select: none;
}

    .flyout-item:hover[b-4tc9nuqmv6] {
        background: var(--sidebar-hover-bg);
        color: var(--topbar-text-hi);
        padding-left: 13px;
    }

    .flyout-item.is-active[b-4tc9nuqmv6] {
        background: var(--sidebar-active-bg);
        color: var(--sidebar-active-text);
        font-weight: 600;
    }

.flyout-item-icon[b-4tc9nuqmv6] {
    font-size: 12px;
    width: 16px;
    text-align: center;
    flex-shrink: 0;
    opacity: .85;
}

/* Sidebar footer */
.sidebar-footer[b-4tc9nuqmv6] {
    flex-shrink: 0;
    padding: 10px 16px;
    border-top: 1px solid var(--sidebar-border);
    background: #f8fafc;
}

.sidebar-footer-item[b-4tc9nuqmv6] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--sidebar-text-muted);
    font-weight: 500;
}

.status-dot-online[b-4tc9nuqmv6] {
    font-size: 8px !important;
    color: #22c55e !important;
}

.sidebar-footer-text[b-4tc9nuqmv6] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-footer-copy[b-4tc9nuqmv6] {
    margin-top: 4px;
    font-size: 10px;
    color: var(--sidebar-text-muted);
    opacity: .7;
}

.afri-shell.is-sidebar-collapsed .sidebar-footer-text[b-4tc9nuqmv6],
.afri-shell.is-sidebar-collapsed .sidebar-footer-copy[b-4tc9nuqmv6] {
    display: none;
}

.afri-shell.is-sidebar-collapsed .sidebar-footer[b-4tc9nuqmv6] {
    padding: 10px 0;
    text-align: center;
}

.afri-shell.is-sidebar-collapsed .sidebar-footer-item[b-4tc9nuqmv6] {
    justify-content: center;
}

/* ============================================================
   BODY
   ============================================================ */
.afri-body[b-4tc9nuqmv6] {
    flex: 1;
    overflow: auto;
    background: var(--body-bg);
    padding: 18px;
    min-width: 0;
}

.afri-body-inner[b-4tc9nuqmv6] {
    height: 100%;
    max-width: 100%;
}

.afri-body .rz-card[b-4tc9nuqmv6] {
    border-radius: 10px !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: var(--shadow-sm) !important;
}

.afri-body .rz-data-grid[b-4tc9nuqmv6] {
    border-radius: 10px !important;
    border: 1px solid #e2e8f0 !important;
    overflow: hidden;
}

/* ============================================================
   RADZEN GLOBAL TOKEN OVERRIDES
   ============================================================ */
:root[b-4tc9nuqmv6] {
    --rz-primary: var(--accent);
    --rz-primary-darker: #1e40af;
    --rz-primary-lighter: var(--accent-light);
    --rz-base-background-color: #ffffff;
    --rz-text-color: #0f172a;
    --rz-border-radius: 8px;
}

/* ============================================================
   SCROLLBAR POLISH
   ============================================================ */
[b-4tc9nuqmv6]::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

[b-4tc9nuqmv6]::-webkit-scrollbar-track {
    background: transparent;
}

[b-4tc9nuqmv6]::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}

    [b-4tc9nuqmv6]::-webkit-scrollbar-thumb:hover {
        background: #94a3b8;
    }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
    .afri-sidebar[b-4tc9nuqmv6] {
        position: fixed;
        top: var(--topbar-h);
        left: 0;
        bottom: 0;
        z-index: 150;
        box-shadow: var(--shadow-md);
    }

    .afri-shell.is-sidebar-collapsed .afri-sidebar[b-4tc9nuqmv6] {
        transform: translateX(-100%);
        width: var(--sidebar-w);
    }

    .afri-body[b-4tc9nuqmv6] {
        width: 100%;
    }
}
/* /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);
    }
}
/* /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);
    }
}