@import '_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.dwk6czdzfo.bundle.scp.css';

/* _content/PaperlessPro/Components/Layout/MainLayout.razor.rz.scp.css */
.icon-btn[b-p8876gubrp] {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    padding: 0;
    background-color: transparent;
}

    .icon-btn .rz-button-icon[b-p8876gubrp] {
        font-size: 60px; /* ubah sesuai kebutuhan */
        line-height: 90px; /* biar center vertical */
    }
/* _content/PaperlessPro/Components/Pages/Account/Login.razor.rz.scp.css */
/* Edge Legacy / IE */
input[b-p8azydw55t]::-ms-reveal {
    display: none;
}

input[b-p8azydw55t]::-ms-clear {
    display: none;
}

/* Chrome, Edge Chromium, Opera lama */
input[b-p8azydw55t]::-webkit-inner-spin-button {
    display: none;
}

/* Gunakan appearance none */
input[type="password"][b-p8azydw55t] {
    -webkit-appearance: none; /* Safari / Chrome / Edge */
    -moz-appearance: none; /* Firefox */
    appearance: none;
}





html[b-p8azydw55t], body[b-p8azydw55t] {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}


/*=============== BASE ===============*/
*[b-p8azydw55t] {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

body[b-p8azydw55t],
input[b-p8azydw55t],
button[b-p8azydw55t] {
    font-size: var(--normal-font-size);
    font-family: var(--body-font);
}

body[b-p8azydw55t] {
    color: var(--white-color);
}

input[b-p8azydw55t],
button[b-p8azydw55t] {
    border: none;
    outline: none;
}

a[b-p8azydw55t] {
    text-decoration: none;
}

img[b-p8azydw55t] {
    max-width: 100%;
    height: auto;
}

/*=============== LOGIN ===============*/
.login[b-p8azydw55t] {
    position: relative;
    height: 100vh;
    display: grid;
    align-items: center;
    /*========== Colors ==========*/
    /*Color mode HSL(hue, saturation, lightness)*/
    --white-color: hsl(0, 0%, 100%);
    --black-color: hsl(0, 0%, 0%);
    /*========== Font and typography ==========*/
    /*.5rem = 8px | 1rem = 16px ...*/
    --body-font: "Poppins", sans-serif;
    --h1-font-size: 1.75rem;
    --normal-font-size: 1rem;
    --small-font-size: .813rem;
    /*========== Font weight ==========*/
    --font-medium: 500;
}

.login__img[b-p8azydw55t] {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;

    z-index: 0;
}

.login__form[b-p8azydw55t] {
    position: relative;
    background-color: hsla(0, 0%, 10%, 0.3);
    border: 2px solid var(--white-color);
    margin-inline: 1.5rem;
    padding: 2.5rem 1.5rem;
    border-radius: 1rem;
    backdrop-filter: drop-shadow(20px);
    z-index: 1;
}



.login__title[b-p8azydw55t] {
    text-align: center;
    font-size: var(--h1-font-size);
    font-weight: var(--font-medium);
    margin-bottom: 2rem;
    color: white
}

.login__content[b-p8azydw55t], .login__box[b-p8azydw55t] {
    display: grid;
}

.login__content[b-p8azydw55t] {
    row-gap: 1.75rem;
    margin-bottom: 1.5rem;
}

.login__box[b-p8azydw55t] {
    grid-template-columns: max-content 1fr;
    align-items: center;
    column-gap: 0.75rem;
    border-bottom: 2px solid var(--white-color);
    color: white
}

.login__icon[b-p8azydw55t], .login__eye[b-p8azydw55t] {
    font-size: 1.25rem;
}

.login__input[b-p8azydw55t] {
    width: 100%;
    padding-block: 0.8rem;
    background: none;
    color: var(--white-color);
    position: relative;
    z-index: 1;
}

.login__box-input[b-p8azydw55t] {
    position: relative;
}

.login__label[b-p8azydw55t] {
    position: absolute;
    left: 0;
    top: 13px;
    font-weight: var(--font-medium);
    transition: top 0.3s, font-size 0.3s;
}

.login__eye[b-p8azydw55t] {
    position: absolute;
    right: 0;
    top: 18px;
    z-index: 10;
    cursor: pointer;
    color: white
}

.login__box:nth-child(2) input[b-p8azydw55t] {
    padding-right: 1.8rem;
}

.login__check[b-p8azydw55t], .login__check-group[b-p8azydw55t] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.login__check[b-p8azydw55t] {
    margin-bottom: 1.5rem;
}

.login__check-label[b-p8azydw55t], .login__forgot[b-p8azydw55t], .login__register[b-p8azydw55t] {
    font-size: var(--small-font-size);
}

.login__check-group[b-p8azydw55t] {
    column-gap: 0.5rem;
    color: white
}

.login__check-input[b-p8azydw55t] {
    width: 16px;
    height: 16px;
}

.login__forgot[b-p8azydw55t] {
    color: var(--white-color);
}

    .login__forgot:hover[b-p8azydw55t] {
        text-decoration: underline;
    }

/*.login__button {
    width: 100%;
    padding: 1rem;
    border-radius: 0.5rem;
    background-color: var(--white-color);
    font-weight: var(--font-medium);
    cursor: pointer;
    margin-bottom: 2rem;
    color: black
}*/



.login__button[b-p8azydw55t] {
    width: 100%;
    height: 40px;
    border-radius: 0.5rem;
    background-color: var(--white-color);
    font-weight: var(--font-medium);
    cursor: pointer;
    margin-bottom: 2rem;
    color: black;
    position: relative; /* penting supaya spinner bisa absolute di tengah */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1rem;
}

/* teks default */
.button-text[b-p8azydw55t] {
    display: inline-block;
    z-index: 1; /* pastikan di atas background */
}

/* spinner default hidden */
.spinner[b-p8azydw55t] {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 18px;
    margin: 0; /* hapus margin agar center tepat */
    transform: translate(-50%, -50%);
    border: 2px solid rgba(0,0,0,0.3);
    border-top: 2px solid black;
    border-radius: 50%;
    display: none;
    animation: spin-b-p8azydw55t 0.7s linear infinite;
    box-sizing: border-box;
    z-index: 2; /* pastikan di atas teks */
}

/* saat loading */
.login__button.loading .button-text[b-p8azydw55t] {
    visibility: hidden; /* sembunyiin teks */
}

.login__button.loading .spinner[b-p8azydw55t] {
    display: block; /* munculin spinner */
}

@keyframes spin-b-p8azydw55t {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}







.login__register[b-p8azydw55t] {
    text-align: center;
    color: white
}

    .login__register a[b-p8azydw55t] {
        color: var(--white-color);
        font-weight: var(--font-medium);
    }

        .login__register a:hover[b-p8azydw55t] {
            text-decoration: underline;
        }

/* Input focus move up label */
.login__input:focus + .login__label[b-p8azydw55t] {
    top: -12px;
    font-size: var(--small-font-size);
}

/* Input focus sticky top label */
.login__input:not(:placeholder-shown).login__input:not(:focus) + .login__label[b-p8azydw55t] {
    top: -12px;
    font-size: var(--small-font-size);
}




.otp-container[b-p8azydw55t] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    justify-content: center;
    margin-top: 16px;
    opacity: 1; /* langsung terlihat */
    transform: translateY(0); /* posisi normal */
    transition: opacity 0.4s ease, transform 0.4s ease;
    position: relative;
    z-index: 2;
    animation: otpShake-b-p8azydw55t 0.4s ease-in-out;
    animation: fadeIn-b-p8azydw55t 0.4s ease;
}

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

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

@keyframes otpShake-b-p8azydw55t {
    0% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-6px);
    }

    50% {
        transform: translateX(6px);
    }

    75% {
        transform: translateX(-4px);
    }

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

@keyframes shake-b-p8azydw55t {
    0%, 100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-5px);
    }

    75% {
        transform: translateX(5px);
    }
}

.otp-container.error[b-p8azydw55t] {
    animation: shake-b-p8azydw55t 0.4s ease-in-out;
}

.otp-boxes[b-p8azydw55t] {
    display: flex;
    gap: 10px;
}

.otp-box[b-p8azydw55t] {
    width: 44px;
    height: 56px;
    text-align: center;
    font-size: 22px;
    border: 2px solid #e74c3c; /* default merah */
    border-radius: 8px;
    outline: none;
    transition: all 0.2s ease;
    background-color: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

    .otp-box.filled[b-p8azydw55t] {
        border-color: #28a745; /* hijau saat ada isi */
    }

    .otp-box:focus[b-p8azydw55t] {
        border-color: #0078d4 !important;
        box-shadow: 0 0 6px rgba(0, 120, 212, 0.4);
        transition: all 0.2s ease;
    }





/*=============== BREAKPOINTS ===============*/
/* For medium devices */
@media screen and (min-width: 576px) {
    .login[b-p8azydw55t] {
        justify-content: center;
    }

    .login__form[b-p8azydw55t] {
        width: 432px;
        padding: 4rem 3rem 3.5rem;
        border-radius: 1.5rem;
    }

    .login__title[b-p8azydw55t] {
        font-size: 2rem;
    }
}

/* ===== RESPONSIVE FIX UNTUK OTP MODE ===== */

/* Ukuran layar kecil (ponsel, di bawah 480px) */
@media screen and (max-width: 480px) {
    .otp-container[b-p8azydw55t] {
        width: 100%;
        padding: 0 1rem;
    }

    .otp-boxes[b-p8azydw55t] {
        display: flex;
        flex-wrap: wrap; /* Biar otomatis turun ke baris berikut kalau ga muat */
        justify-content: center;
        gap: 8px;
    }

    .otp-box[b-p8azydw55t] {
        width: 40px;
        height: 48px;
        font-size: 20px;
    }

    .login__form[b-p8azydw55t] {
        margin-inline: 1rem;
        padding: 1.5rem 1rem;
    }

    .login__title[b-p8azydw55t] {
        font-size: 1.5rem;
    }

    .login__button[b-p8azydw55t] {
        height: 44px;
    }
}

/* Layar sangat kecil (misalnya 360px ke bawah) */
@media screen and (max-width: 360px) {
    .otp-box[b-p8azydw55t] {
        width: 36px;
        height: 44px;
        font-size: 18px;
    }

    .otp-boxes[b-p8azydw55t] {
        gap: 6px;
    }

    .login__title[b-p8azydw55t] {
        font-size: 1.3rem;
    }
}
/* _content/PaperlessPro/Components/Pages/Account/LoginVerify.razor.rz.scp.css */
/*:root {*/
/*========== Colors ==========*/
/*Color mode HSL(hue, saturation, lightness)*/
/*--white-color: hsl(0, 0%, 100%);
    --black-color: hsl(0, 0%, 0%);*/
/*========== Font and typography ==========*/
/*.5rem = 8px | 1rem = 16px ...*/
/*--body-font: "Poppins", sans-serif;
    --h1-font-size: 1.75rem;
    --normal-font-size: 1rem;
    --small-font-size: .813rem;*/
/*========== Font weight ==========*/
/*--font-medium: 500;
}*/

/*=============== BASE ===============*/
*[b-otukulgpyw] {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

body[b-otukulgpyw],
input[b-otukulgpyw],
button[b-otukulgpyw] {
    font-size: var(--normal-font-size);
    font-family: var(--body-font);
}

body[b-otukulgpyw] {
    color: var(--white-color);
}

input[b-otukulgpyw],
button[b-otukulgpyw] {
    border: none;
    outline: none;
}

a[b-otukulgpyw] {
    text-decoration: none;
}

img[b-otukulgpyw] {
    max-width: 100%;
    height: auto;
}

/*=============== LOGIN ===============*/
.login[b-otukulgpyw] {
    position: relative;
    height: 100vh;
    display: grid;
    align-items: center;
    /*========== Colors ==========*/
    /*Color mode HSL(hue, saturation, lightness)*/
    --white-color: hsl(0, 0%, 100%);
    --black-color: hsl(0, 0%, 0%);
    /*========== Font and typography ==========*/
    /*.5rem = 8px | 1rem = 16px ...*/
    --body-font: "Poppins", sans-serif;
    --h1-font-size: 1.75rem;
    --normal-font-size: 1rem;
    --small-font-size: .813rem;
    /*========== Font weight ==========*/
    --font-medium: 500;
}

.login__img[b-otukulgpyw] {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.login__form[b-otukulgpyw] {
    position: relative;
    background-color: hsla(0, 0%, 10%, 0.3);
    border: 2px solid var(--white-color);
    margin-inline: 1.5rem;
    padding: 2.5rem 1.5rem;
    border-radius: 1rem;
    backdrop-filter: drop-shadow(20px);
}

.login__title[b-otukulgpyw] {
    text-align: center;
    font-size: var(--h1-font-size);
    font-weight: var(--font-medium);
    margin-bottom: 2rem;
    color: white
}

.login__content[b-otukulgpyw], .login__box[b-otukulgpyw] {
    display: grid;
}

.login__content[b-otukulgpyw] {
    row-gap: 1.75rem;
    margin-bottom: 1.5rem;
}

.login__box[b-otukulgpyw] {
    grid-template-columns: max-content 1fr;
    align-items: center;
    column-gap: 0.75rem;
    border-bottom: 2px solid var(--white-color);
    color: white
}

.login__icon[b-otukulgpyw], .login__eye[b-otukulgpyw] {
    font-size: 1.25rem;
}

.login__input[b-otukulgpyw] {
    width: 100%;
    padding-block: 0.8rem;
    background: none;
    color: var(--white-color);
    position: relative;
    z-index: 1;
}

.login__box-input[b-otukulgpyw] {
    position: relative;
}

.login__label[b-otukulgpyw] {
    position: absolute;
    left: 0;
    top: 13px;
    font-weight: var(--font-medium);
    transition: top 0.3s, font-size 0.3s;
}

.login__eye[b-otukulgpyw] {
    position: absolute;
    right: 0;
    top: 18px;
    z-index: 10;
    cursor: pointer;
    color: white
}

.login__box:nth-child(2) input[b-otukulgpyw] {
    padding-right: 1.8rem;
}

.login__check[b-otukulgpyw], .login__check-group[b-otukulgpyw] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.login__check[b-otukulgpyw] {
    margin-bottom: 1.5rem;
}

.login__check-label[b-otukulgpyw], .login__forgot[b-otukulgpyw], .login__register[b-otukulgpyw] {
    font-size: var(--small-font-size);
}

.login__check-group[b-otukulgpyw] {
    column-gap: 0.5rem;
    color: white
}

.login__check-input[b-otukulgpyw] {
    width: 16px;
    height: 16px;
}

.login__forgot[b-otukulgpyw] {
    color: var(--white-color);
}

    .login__forgot:hover[b-otukulgpyw] {
        text-decoration: underline;
    }

.login__button[b-otukulgpyw] {
    width: 100%;
    padding: 1rem;
    border-radius: 0.5rem;
    background-color: var(--white-color);
    font-weight: var(--font-medium);
    cursor: pointer;
    margin-bottom: 2rem;
    color: black
}

.login__register[b-otukulgpyw] {
    text-align: center;
    color: white
}

    .login__register a[b-otukulgpyw] {
        color: var(--white-color);
        font-weight: var(--font-medium);
    }

        .login__register a:hover[b-otukulgpyw] {
            text-decoration: underline;
        }

/* Input focus move up label */
.login__input:focus + .login__label[b-otukulgpyw] {
    top: -12px;
    font-size: var(--small-font-size);
}

/* Input focus sticky top label */
.login__input:not(:placeholder-shown).login__input:not(:focus) + .login__label[b-otukulgpyw] {
    top: -12px;
    font-size: var(--small-font-size);
}

/*=============== BREAKPOINTS ===============*/
/* For medium devices */
@media screen and (min-width: 576px) {
    .login[b-otukulgpyw] {
        justify-content: center;
    }

    .login__form[b-otukulgpyw] {
        width: 432px;
        padding: 4rem 3rem 3.5rem;
        border-radius: 1.5rem;
    }

    .login__title[b-otukulgpyw] {
        font-size: 2rem;
    }
}
/* _content/PaperlessPro/Components/Pages/OrderMonitoring/OrderGridTracking.razor.rz.scp.css */
[b-6okxdd8j4e] > .right-gradient {
    --scroll-fade-next: var(--fill-color)
}

[b-6okxdd8j4e] > .both-gradient {
    --scroll-fade-next: var(--fill-color);
    --scroll-fade-previous: var(--fill-color)
}

.btn:focus[b-6okxdd8j4e] {
    background-color: #ff6e40;
}


/* Base: buat row positionable dan lebarkan ke total kolom */
[b-6okxdd8j4e] fluent-data-grid-row.row-overdue,
[b-6okxdd8j4e] fluent-data-grid-row.row-today {
    position: relative !important; /* anchor untuk pseudo-element */
    min-width: max-content !important; /* pastikan row lebarkan sesuai total kolom */
    width: max-content !important;
    z-index: 0 !important;
    /* jangan atur background di sini; kita pakai ::before untuk konsistensi */
}

    /* Pseudo-element yang menjadi "cat" baris (di belakang semua sel) */
    [b-6okxdd8j4e] fluent-data-grid-row.row-overdue::before,
    [b-6okxdd8j4e] fluent-data-grid-row.row-today::before {
        content: "" !important;
        position: absolute !important;
        inset: 0 !important; /* top:0; right:0; bottom:0; left:0; */
        z-index: 0 !important; /* di bawah konten cell */
        pointer-events: none !important; /* jangan ganggu klik/hover */
        border-radius: 0 !important;
        background-clip: padding-box !important;
    }

    /* assign warna berbeda untuk overdue / today */
    [b-6okxdd8j4e] fluent-data-grid-row.row-overdue::before {
        background: rgba(220, 38, 38, 0.12) !important;
    }

    [b-6okxdd8j4e] fluent-data-grid-row.row-today::before {
        background: rgba(139, 92, 246, 0.10) !important;
    }

    /* Pastikan semua cell di atas pseudo-element dan transparan */
    [b-6okxdd8j4e] fluent-data-grid-row.row-overdue fluent-data-grid-cell,
    [b-6okxdd8j4e] fluent-data-grid-row.row-today fluent-data-grid-cell {
        background: transparent !important; /* biarkan pseudo-element yang terlihat */
        box-shadow: none !important;
        border: none !important;
        position: relative !important; /* agar z-index bekerja */
        z-index: 1 !important; /* di atas ::before */
    }

        /* Bersihkan inner wrappers agar tidak menimpa */
        [b-6okxdd8j4e] fluent-data-grid-row.row-overdue fluent-data-grid-cell *,
        [b-6okxdd8j4e] fluent-data-grid-row.row-today fluent-data-grid-cell * {
            background: transparent !important;
        }

    /* Jaga hover/selected agar tidak menimpa warna */
    [b-6okxdd8j4e] fluent-data-grid-row.row-overdue:hover::before,
    [b-6okxdd8j4e] fluent-data-grid-row.row-today:hover::before {
        filter: brightness(0.98) !important;
    }

    /* Optional: kalau ada garis antar sel yang mengganggu */
    [b-6okxdd8j4e] fluent-data-grid-row.row-overdue fluent-data-grid-cell,
    [b-6okxdd8j4e] fluent-data-grid-row.row-today fluent-data-grid-cell {
        border-left: none !important;
        border-right: none !important;
    }




/* Batasi isi popover 'Show Column' */
div[role="dialog"][b-6okxdd8j4e] {
    max-height: 250px !important;
    overflow-y: auto !important;
    width: 200px !important;
}

    /* Biar scrollbar tampil elegan */
    div[role="dialog"][b-6okxdd8j4e]::-webkit-scrollbar {
        width: 6px;
    }

    div[role="dialog"][b-6okxdd8j4e]::-webkit-scrollbar-thumb {
        background-color: rgba(120, 120, 120, 0.4);
        border-radius: 3px;
    }

        div[role="dialog"][b-6okxdd8j4e]::-webkit-scrollbar-thumb:hover {
            background-color: rgba(120, 120, 120, 0.7);
        }

    div[role="dialog"][b-6okxdd8j4e]::-webkit-scrollbar-track {
        background: transparent;
    }









html[b-6okxdd8j4e], body[b-6okxdd8j4e], #app[b-6okxdd8j4e] {
    height: 100%; /* wajib biar flex 100% jalan */
    margin: 0;
    padding: 0;
}


/* WRAPPER UTAMA (grid, judul, toolbar, datagrid) */
.grid-wrapper[b-6okxdd8j4e] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto; /* ambil sisa ruang parent */
    min-height: 0; /* biar ga maksa lebih tinggi dari parent */
    gap: 0.5rem; /* jarak antar elemen */
}

/* Toolbar / Title: auto tinggi sesuai isi */
.toolbar[b-6okxdd8j4e],
.toolbar-grid[b-6okxdd8j4e] {
    flex: 0 0 auto;
}

.page-title[b-6okxdd8j4e] {
    font-size: 1.25rem !important; /* paksa size */
    font-weight: 600 !important;
    color: var(--neutral-foreground-rest) !important;
    margin-bottom: 0.75rem;
}

/* STATUS CARDS WRAPPER */
.status-cards-scroll[b-6okxdd8j4e] {
    flex: 0 0 auto; /* jangan melar */
    overflow-x: auto; /* scroll horizontal kalau banyak */
    overflow-y: hidden; /* cegah scroll vertical */
    padding-bottom: 0.5rem;
}

/* STATUS CARDS */
.status-cards[b-6okxdd8j4e] {
    display: flex;
    flex-direction: row;
    gap: 0.75rem;
    padding: 0.75rem;
    background: var(--neutral-layer-1);
    border-radius: 6px;
}

/* ROW dalam status cards */
.status-cards-row[b-6okxdd8j4e] {
    display: flex;
    gap: 1rem;
    align-items: center;
    flex-shrink: 0;
}

/* DATAGRID CONTAINER: ambil sisa tinggi & scroll di sini aja */
.datagrid-container[b-6okxdd8j4e] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: auto; /* <<< satu-satunya tempat scroll */
}

    /* Kalau datagrid punya child wrapper tambahan */
    .datagrid-container > *[b-6okxdd8j4e] {
        flex: 1 1 auto;
        min-height: 0;
    }
/* _content/PaperlessPro/Components/Pages/OrderMonitoring/OrderTrackingList.razor.rz.scp.css */
/* Outer container (dalam splitter) */
.main-content[b-21vooilo2i],
.bottom-pane[b-21vooilo2i],
.related-data[b-21vooilo2i] {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    flex: 1; /* biar ikut isi penuh */
    min-height: 0; /* biar bisa shrink tanpa overflow */
    box-sizing: border-box;
    padding: 0.25rem;
    background: transparent;
}

/* Inner box (berborder + isi) */
.main-content-box[b-21vooilo2i],
.bottom-pane-box[b-21vooilo2i],
.related-data-box[b-21vooilo2i] {
    flex: 1;
    min-height: 0; /* biar overflow auto jalan */
    border: 1px solid var(--accent-fill-rest);
    border-radius: 6px;
    background: var(--neutral-layer-1);
    box-sizing: border-box;
    overflow: auto;
    display: flex;
    flex-direction: column;
    /* hilangkan padding global */
    padding: 0.75rem;
}

/* Title sticky */
.pane-title[b-21vooilo2i] {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--neutral-layer-1); /* blok full, nutup bocor */
    padding: 0.75rem;
    font-weight: 600;
    font-size: 1rem;
    margin: 0;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

.pane-body[b-21vooilo2i] {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 0.75rem; /* jarak isi dengan border */
}

.pane-content-center[b-21vooilo2i] {
    flex: 1; /* ambil sisa tinggi di bawah title */
    display: flex;
    align-items: center; /* vertical center */
    justify-content: center; /* horizontal center */
    padding: 0.75rem; /* jarak dari border */
    box-sizing: border-box;
    min-height: 0; /* wajib biar flex & overflow auto jalan */
    overflow: auto; /* scroll kalau konten melebihi pane */
}
/* _content/PaperlessPro/Components/Pages/Orders/OrderHistoryUpdate.razor.rz.scp.css */
.timeline-body[b-r0bmpjcfbo] {
    margin-left: 0.5rem;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    /* Ikut theme Fluent UI */
    background-color: var(--neutral-layer-1, #ffffff);
    color: var(--neutral-foreground-rest, #111827);
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

    .timeline-body:hover[b-r0bmpjcfbo] {
        background-color: var(--neutral-layer-2, #f3f4f6);
        box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    }

/* text utama */
.timeline-status[b-r0bmpjcfbo] {
    font-weight: 600;
    margin-bottom: 0.25rem;
    color: var(--neutral-foreground-rest, #111827);
}

.timeline-user[b-r0bmpjcfbo] {
    font-size: 0.85rem;
    color: var(--neutral-foreground-hint, #6b7280);
    margin-bottom: 0.25rem;
}

/* tanggal + jam dalam 1 baris */
.timeline-datetime[b-r0bmpjcfbo] {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* jarak antara tanggal & jam */
    font-size: 0.85rem; /* ukuran seragam */
    font-weight: normal;
    color: var(--neutral-foreground-hint, #6b7280); /* abu-abu */
}

    .timeline-datetime .timeline-date[b-r0bmpjcfbo],
    .timeline-datetime .timeline-time[b-r0bmpjcfbo] {
        margin: 0;
        font-weight: normal;
    }

/* Icon */
.timeline-icon[b-r0bmpjcfbo] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
    background-color: var(--neutral-layer-2, #f3f4f6);
    color: var(--neutral-foreground-rest, #111827);
    border: none !important;
    outline: none !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

    .timeline-icon:hover[b-r0bmpjcfbo] {
        background-color: var(--neutral-layer-3, #e5e7eb);
        box-shadow: 0 2px 4px rgba(0,0,0,0.15);
    }

    .timeline-icon:focus-visible[b-r0bmpjcfbo] {
        outline: none !important;
        box-shadow: none !important;
    }
/* _content/PaperlessPro/Components/Pages/Orders/OrderList.razor.rz.scp.css */
[b-4gji0b6ssb] > .right-gradient {
    --scroll-fade-next: var(--fill-color)
}

[b-4gji0b6ssb] > .both-gradient {
    --scroll-fade-next: var(--fill-color);
    --scroll-fade-previous: var(--fill-color)
}

.btn:focus[b-4gji0b6ssb] {
    background-color: #ff6e40;
}


/* Base: buat row positionable dan lebarkan ke total kolom */
[b-4gji0b6ssb] fluent-data-grid-row.row-overdue,
[b-4gji0b6ssb] fluent-data-grid-row.row-today {
    position: relative !important; /* anchor untuk pseudo-element */
    min-width: max-content !important; /* pastikan row lebarkan sesuai total kolom */
    width: max-content !important;
    z-index: 0 !important;
    /* jangan atur background di sini; kita pakai ::before untuk konsistensi */
}

    /* Pseudo-element yang menjadi "cat" baris (di belakang semua sel) */
    [b-4gji0b6ssb] fluent-data-grid-row.row-overdue::before,
    [b-4gji0b6ssb] fluent-data-grid-row.row-today::before {
        content: "" !important;
        position: absolute !important;
        inset: 0 !important; /* top:0; right:0; bottom:0; left:0; */
        z-index: 0 !important; /* di bawah konten cell */
        pointer-events: none !important; /* jangan ganggu klik/hover */
        border-radius: 0 !important;
        background-clip: padding-box !important;
    }

    /* assign warna berbeda untuk overdue / today */
    [b-4gji0b6ssb] fluent-data-grid-row.row-overdue::before {
        background: rgba(220, 38, 38, 0.12) !important;
    }

    [b-4gji0b6ssb] fluent-data-grid-row.row-today::before {
        background: rgba(139, 92, 246, 0.10) !important;
    }

    /* Pastikan semua cell di atas pseudo-element dan transparan */
    [b-4gji0b6ssb] fluent-data-grid-row.row-overdue fluent-data-grid-cell,
    [b-4gji0b6ssb] fluent-data-grid-row.row-today fluent-data-grid-cell {
        background: transparent !important; /* biarkan pseudo-element yang terlihat */
        box-shadow: none !important;
        border: none !important;
        position: relative !important; /* agar z-index bekerja */
        z-index: 1 !important; /* di atas ::before */
    }

        /* Bersihkan inner wrappers agar tidak menimpa */
        [b-4gji0b6ssb] fluent-data-grid-row.row-overdue fluent-data-grid-cell *,
        [b-4gji0b6ssb] fluent-data-grid-row.row-today fluent-data-grid-cell * {
            background: transparent !important;
        }

    /* Jaga hover/selected agar tidak menimpa warna */
    [b-4gji0b6ssb] fluent-data-grid-row.row-overdue:hover::before,
    [b-4gji0b6ssb] fluent-data-grid-row.row-today:hover::before {
        filter: brightness(0.98) !important;
    }

    /* Optional: kalau ada garis antar sel yang mengganggu */
    [b-4gji0b6ssb] fluent-data-grid-row.row-overdue fluent-data-grid-cell,
    [b-4gji0b6ssb] fluent-data-grid-row.row-today fluent-data-grid-cell {
        border-left: none !important;
        border-right: none !important;
    }
/* _content/PaperlessPro/Components/Pages/Orders/ProjectOrderList.razor.rz.scp.css */
[b-z7xeeziyu2] > .right-gradient {
    --scroll-fade-next: var(--fill-color)
}

[b-z7xeeziyu2] > .both-gradient {
    --scroll-fade-next: var(--fill-color);
    --scroll-fade-previous: var(--fill-color)
}

.btn:focus[b-z7xeeziyu2] {
    background-color: #ff6e40;
}


/* Base: buat row positionable dan lebarkan ke total kolom */
[b-z7xeeziyu2] fluent-data-grid-row.row-overdue,
[b-z7xeeziyu2] fluent-data-grid-row.row-today {
    position: relative !important; /* anchor untuk pseudo-element */
    min-width: max-content !important; /* pastikan row lebarkan sesuai total kolom */
    width: max-content !important;
    z-index: 0 !important;
    /* jangan atur background di sini; kita pakai ::before untuk konsistensi */
}

    /* Pseudo-element yang menjadi "cat" baris (di belakang semua sel) */
    [b-z7xeeziyu2] fluent-data-grid-row.row-overdue::before,
    [b-z7xeeziyu2] fluent-data-grid-row.row-today::before {
        content: "" !important;
        position: absolute !important;
        inset: 0 !important; /* top:0; right:0; bottom:0; left:0; */
        z-index: 0 !important; /* di bawah konten cell */
        pointer-events: none !important; /* jangan ganggu klik/hover */
        border-radius: 0 !important;
        background-clip: padding-box !important;
    }

    /* assign warna berbeda untuk overdue / today */
    [b-z7xeeziyu2] fluent-data-grid-row.row-overdue::before {
        background: rgba(220, 38, 38, 0.12) !important;
    }

    [b-z7xeeziyu2] fluent-data-grid-row.row-today::before {
        background: rgba(139, 92, 246, 0.10) !important;
    }

    /* Pastikan semua cell di atas pseudo-element dan transparan */
    [b-z7xeeziyu2] fluent-data-grid-row.row-overdue fluent-data-grid-cell,
    [b-z7xeeziyu2] fluent-data-grid-row.row-today fluent-data-grid-cell {
        background: transparent !important; /* biarkan pseudo-element yang terlihat */
        box-shadow: none !important;
        border: none !important;
        position: relative !important; /* agar z-index bekerja */
        z-index: 1 !important; /* di atas ::before */
    }

        /* Bersihkan inner wrappers agar tidak menimpa */
        [b-z7xeeziyu2] fluent-data-grid-row.row-overdue fluent-data-grid-cell *,
        [b-z7xeeziyu2] fluent-data-grid-row.row-today fluent-data-grid-cell * {
            background: transparent !important;
        }

    /* Jaga hover/selected agar tidak menimpa warna */
    [b-z7xeeziyu2] fluent-data-grid-row.row-overdue:hover::before,
    [b-z7xeeziyu2] fluent-data-grid-row.row-today:hover::before {
        filter: brightness(0.98) !important;
    }

    /* Optional: kalau ada garis antar sel yang mengganggu */
    [b-z7xeeziyu2] fluent-data-grid-row.row-overdue fluent-data-grid-cell,
    [b-z7xeeziyu2] fluent-data-grid-row.row-today fluent-data-grid-cell {
        border-left: none !important;
        border-right: none !important;
    }
/* _content/PaperlessPro/Components/Pages/Orders/SupportOrderList.razor.rz.scp.css */
[b-10m8yv3wve] > .right-gradient {
    --scroll-fade-next: var(--fill-color)
}

[b-10m8yv3wve] > .both-gradient {
    --scroll-fade-next: var(--fill-color);
    --scroll-fade-previous: var(--fill-color)
}

.btn:focus[b-10m8yv3wve] {
    background-color: #ff6e40;
}


/* Base: buat row positionable dan lebarkan ke total kolom */
[b-10m8yv3wve] fluent-data-grid-row.row-overdue,
[b-10m8yv3wve] fluent-data-grid-row.row-today {
    position: relative !important; /* anchor untuk pseudo-element */
    min-width: max-content !important; /* pastikan row lebarkan sesuai total kolom */
    width: max-content !important;
    z-index: 0 !important;
    /* jangan atur background di sini; kita pakai ::before untuk konsistensi */
}

    /* Pseudo-element yang menjadi "cat" baris (di belakang semua sel) */
    [b-10m8yv3wve] fluent-data-grid-row.row-overdue::before,
    [b-10m8yv3wve] fluent-data-grid-row.row-today::before {
        content: "" !important;
        position: absolute !important;
        inset: 0 !important; /* top:0; right:0; bottom:0; left:0; */
        z-index: 0 !important; /* di bawah konten cell */
        pointer-events: none !important; /* jangan ganggu klik/hover */
        border-radius: 0 !important;
        background-clip: padding-box !important;
    }

    /* assign warna berbeda untuk overdue / today */
    [b-10m8yv3wve] fluent-data-grid-row.row-overdue::before {
        background: rgba(220, 38, 38, 0.12) !important;
    }

    [b-10m8yv3wve] fluent-data-grid-row.row-today::before {
        background: rgba(139, 92, 246, 0.10) !important;
    }

    /* Pastikan semua cell di atas pseudo-element dan transparan */
    [b-10m8yv3wve] fluent-data-grid-row.row-overdue fluent-data-grid-cell,
    [b-10m8yv3wve] fluent-data-grid-row.row-today fluent-data-grid-cell {
        background: transparent !important; /* biarkan pseudo-element yang terlihat */
        box-shadow: none !important;
        border: none !important;
        position: relative !important; /* agar z-index bekerja */
        z-index: 1 !important; /* di atas ::before */
    }

        /* Bersihkan inner wrappers agar tidak menimpa */
        [b-10m8yv3wve] fluent-data-grid-row.row-overdue fluent-data-grid-cell *,
        [b-10m8yv3wve] fluent-data-grid-row.row-today fluent-data-grid-cell * {
            background: transparent !important;
        }

    /* Jaga hover/selected agar tidak menimpa warna */
    [b-10m8yv3wve] fluent-data-grid-row.row-overdue:hover::before,
    [b-10m8yv3wve] fluent-data-grid-row.row-today:hover::before {
        filter: brightness(0.98) !important;
    }

    /* Optional: kalau ada garis antar sel yang mengganggu */
    [b-10m8yv3wve] fluent-data-grid-row.row-overdue fluent-data-grid-cell,
    [b-10m8yv3wve] fluent-data-grid-row.row-today fluent-data-grid-cell {
        border-left: none !important;
        border-right: none !important;
    }