/* _content/AccountingWeb/Components/Layout/DownloadProgress.razor.rz.scp.css */
.maui-download-overlay[b-q7iwhdio0s] {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9999999 !important;
    display: none;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 100vh;
    background: rgba(15, 23, 42, 0.45);
}

    .maui-download-overlay.show[b-q7iwhdio0s] {
        display: flex !important;
    }

.maui-download-box[b-q7iwhdio0s] {
    width: 220px;
    max-width: calc(100vw - 40px);
    padding: 28px 20px 24px;
    background: #ffffff;
    border-radius: 18px;
    text-align: center;
    box-sizing: border-box;
    box-shadow: 0 18px 55px rgba(15, 23, 42, 0.28);
    position: relative;
}


.maui-download-close[b-q7iwhdio0s] {
    position: absolute;
    top: 8px;
    right: 10px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.08);
    color: #444;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    z-index: 10;
}

    .maui-download-close:hover[b-q7iwhdio0s] {
        background: rgba(0, 0, 0, 0.15);
    }

    .maui-download-close:active[b-q7iwhdio0s] {
        transform: scale(0.95);
    }

.download-spinner-wrapper[b-q7iwhdio0s] {
    position: relative;
    width: 110px;
    height: 110px;
    margin: 0 auto 18px;
}

.download-spinner[b-q7iwhdio0s] {
    position: absolute;
    top: 0;
    left: 0;
    width: 110px;
    height: 110px;
    box-sizing: border-box;
    border: 10px solid #e5e7eb;
    border-top-color: #2563eb;
    border-right-color: #2563eb;
    border-radius: 50%;
    animation-name: maui-download-spin-b-q7iwhdio0s;
    animation-duration: 0.8s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    -webkit-animation-name: maui-download-spin;
    -webkit-animation-duration: 0.8s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform;
}

.download-percent[b-q7iwhdio0s] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0f172a;
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
}

.download-title[b-q7iwhdio0s] {
    margin-bottom: 4px;
    color: #0f172a;
    font-size: 16px;
    font-weight: 700;
}

.download-status[b-q7iwhdio0s] {
    color: #64748b;
    font-size: 13px;
}
@keyframes maui-download-spin-b-q7iwhdio0s {
    0% {
        transform: rotate(0deg) translateZ(0);
    }

    100% {
        transform: rotate(360deg) translateZ(0);
    }
}

@-webkit-keyframes maui-download-spin {
    0% {
        -webkit-transform: rotate(0deg) translateZ(0);
    }

    100% {
        -webkit-transform: rotate(360deg) translateZ(0);
    }
}
/* _content/AccountingWeb/Components/Layout/MainLayout.razor.rz.scp.css */
/*.page {
    position: relative;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
}

.sidebar {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row ::deep a, .top-row ::deep .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row ::deep a:hover, .top-row ::deep .btn-link:hover {
        text-decoration: underline;
    }

    .top-row ::deep a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row {
        justify-content: space-between;
    }

    .top-row ::deep a, .top-row ::deep .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page {
        flex-direction: row;
    }

    .sidebar {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth ::deep a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row, article {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
*/
/* _content/AccountingWeb/Components/Layout/NavMenu.razor.rz.scp.css */
/*.navbar-toggler {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked {
    background-color: rgba(255, 255, 255, 0.5);
}

.top-row {
    height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand {
    font-size: 1.1rem;
}

.bi {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.nav-item {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type {
        padding-top: 1rem;
    }

    .nav-item:last-of-type {
        padding-bottom: 1rem;
    }

    .nav-item ::deep .nav-link {
        color: #d7d7d7;
        background: none;
        border: none;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
    }

.nav-item ::deep a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item ::deep .nav-link:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

.nav-scrollable {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable {
    display: block;
}

@media (min-width: 641px) {
    .navbar-toggler {
        display: none;
    }

    .nav-scrollable {*/
        /* Never collapse the sidebar for wide screens */
        /*display: block;*/

        /* Allow sidebar to scroll for tall menus */
        /*height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}*/
/* _content/AccountingWeb/Components/Pages/Home.razor.rz.scp.css */
.company-home[b-qhen7240gx] {
    --navy: #0b2554;
    --navy-dark: #061a3d;
    --blue: #2563eb;
    --orange: #f59e0b;
    --text: #172033;
    --muted: #62708a;
    --border: #e3e9f2;
    --background: #f7f9fc;
    width: 100%;
    padding: 20px;
    background: var(--background);
    color: var(--text);
    border-radius: 22px;
}

.home-loading[b-qhen7240gx] {
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-weight: 600;
    color: #62708a;
}

/* =========================================================
   HERO
   ========================================================= */

.home-hero[b-qhen7240gx] {
    position: relative;
    min-height: 310px;
    overflow: hidden;
    border-radius: 22px;
    background-color: #081f4c;
    background-image: linear-gradient( 90deg, rgba(5, 24, 65, 0.98) 0%, rgba(8, 36, 87, 0.93) 45%, rgba(8, 33, 78, 0.72) 100% ), url("/images/dashboard/hero-mahakaland.jpg");
    background-position: center;
    background-size: cover;
    box-shadow: 0 15px 38px rgba(8, 31, 75, 0.18);
}

.hero-overlay[b-qhen7240gx] {
    position: absolute;
    inset: 0;
    background: radial-gradient( circle at 80% 20%, rgba(59, 130, 246, 0.22), transparent 32% );
    pointer-events: none;
}

.hero-content[b-qhen7240gx] {
    position: relative;
    z-index: 1;
    min-height: 310px;
    padding: 46px 55px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 45px;
}

.hero-text[b-qhen7240gx] {
    max-width: 720px;
    color: #fff;
}

.hero-greeting[b-qhen7240gx] {
    margin-bottom: 10px;
    color: #ffb52e;
    font-size: 1.25rem;
    font-weight: 800;
}

.hero-text h1[b-qhen7240gx] {
    margin: 0;
    color: #fff;
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 800;
    line-height: 1.14;
    letter-spacing: -1px;
}

.hero-text > p[b-qhen7240gx] {
    max-width: 580px;
    margin: 18px 0 0;
    color: rgba(255, 255, 255, 0.88);
    font-size: 1rem;
    line-height: 1.75;
}

.user-summary[b-qhen7240gx] {
    margin-top: 22px;
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.user-badge[b-qhen7240gx] {
    min-height: 34px;
    padding: 7px 12px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #fff;
    background: rgba(255, 255, 255, 0.11);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    backdrop-filter: blur(6px);
}

    .user-badge svg[b-qhen7240gx] {
        width: 15px;
        height: 15px;
        fill: currentColor;
    }

.hero-brand[b-qhen7240gx] {
    width: 310px;
    flex: 0 0 310px;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #fff;
    text-align: center;
}

    .hero-brand img[b-qhen7240gx] {
        display: block;
        width: 100%;
        max-width: 270px;
        max-height: 160px;
        object-fit: contain;
    }

.brand-fallback[b-qhen7240gx] {
    flex-direction: column;
    align-items: center;
}

.brand-symbol[b-qhen7240gx] {
    width: 110px;
    height: 80px;
    display: grid;
    place-items: center;
    color: #56c7ff;
    font-size: 4.4rem;
    font-weight: 900;
    font-style: italic;
    line-height: 1;
}

.brand-name[b-qhen7240gx] {
    font-size: 2rem;
    font-weight: 500;
    letter-spacing: 7px;
}

.brand-line[b-qhen7240gx] {
    width: 100%;
    max-width: 250px;
    height: 2px;
    margin: 8px 0 10px;
    background: rgba(255, 255, 255, 0.8);
}

.brand-values[b-qhen7240gx] {
    color: rgba(255, 255, 255, 0.84);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* =========================================================
   VISI DAN MISI
   ========================================================= */

.vision-mission-grid[b-qhen7240gx] {
    margin-top: 24px;
    display: grid;
    grid-template-columns: minmax(300px, 0.8fr) minmax(460px, 1.2fr);
    gap: 18px;
}

.vision-card[b-qhen7240gx],
.mission-card[b-qhen7240gx] {
    min-width: 0;
    padding: 26px 30px;
    border: 1px solid var(--border);
    border-radius: 19px;
    box-shadow: 0 8px 25px rgba(18, 39, 76, 0.06);
}

.vision-card[b-qhen7240gx] {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #f7fbff 0%, #eef5ff 100%);
}

.mission-card[b-qhen7240gx] {
    background: linear-gradient(135deg, #fafffc 0%, #f5fbf8 100%);
}

.section-heading[b-qhen7240gx] {
    display: flex;
    align-items: center;
    gap: 15px;
}

.heading-icon[b-qhen7240gx] {
    width: 55px;
    height: 55px;
    flex: 0 0 55px;
    display: grid;
    place-items: center;
    color: #fff;
    border-radius: 50%;
}

    .heading-icon svg[b-qhen7240gx] {
        width: 31px;
        height: 31px;
        fill: currentColor;
    }

.vision-icon[b-qhen7240gx] {
    background: linear-gradient(135deg, #1e7fff, #2759d9);
    box-shadow: 0 9px 20px rgba(37, 99, 235, 0.24);
}

.mission-icon[b-qhen7240gx] {
    background: linear-gradient(135deg, #20b56e, #359e69);
    box-shadow: 0 9px 20px rgba(22, 163, 74, 0.2);
}

.section-heading h2[b-qhen7240gx] {
    margin: 0;
    color: var(--navy);
    font-size: 1.45rem;
    font-weight: 800;
    text-transform: uppercase;
}

.heading-line[b-qhen7240gx] {
    display: block;
    width: 38px;
    height: 3px;
    margin-top: 7px;
    background: #2563eb;
    border-radius: 100px;
}

.mission-card .heading-line[b-qhen7240gx] {
    background: #24a866;
}

.vision-content[b-qhen7240gx] {
    position: relative;
    min-height: 210px;
    margin-top: 24px;
}

    .vision-content p[b-qhen7240gx] {
        position: relative;
        z-index: 2;
        max-width: 65%;
        margin: 0;
        color: #172033;
        font-size: 1rem;
        font-weight: 500;
        line-height: 1.65;
    }

.vision-illustration[b-qhen7240gx] {
    position: absolute;
    right: -20px;
    bottom: -26px;
    width: 62%;
    opacity: 0.85;
}

    .vision-illustration svg[b-qhen7240gx] {
        display: block;
        width: 100%;
    }

    .vision-illustration rect[b-qhen7240gx],
    .vision-illustration circle[b-qhen7240gx] {
        fill: #6ea8ff;
    }

    .vision-illustration .hill-one[b-qhen7240gx] {
        fill: #d9e8ff;
    }

    .vision-illustration .hill-two[b-qhen7240gx] {
        fill: #bcd5ff;
    }

.mission-list[b-qhen7240gx] {
    margin-top: 22px;
    display: grid;
    gap: 15px;
}

.mission-item[b-qhen7240gx] {
    display: grid;
    grid-template-columns: 25px minmax(0, 1fr);
    gap: 10px;
    color: #1c2639;
    font-size: 0.94rem;
    line-height: 1.48;
}

.check-icon[b-qhen7240gx] {
    width: 22px;
    height: 22px;
    margin-top: 1px;
    display: grid;
    place-items: center;
    color: #1ba866;
    border: 2px solid #36bd7d;
    border-radius: 50%;
}

    .check-icon svg[b-qhen7240gx] {
        width: 15px;
        height: 15px;
        fill: currentColor;
    }

/* =========================================================
   BUDAYA KERJA
   ========================================================= */

.culture-section[b-qhen7240gx] {
    margin-top: 24px;
}

.culture-title[b-qhen7240gx] {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 11px;
}

    .culture-title > span[b-qhen7240gx] {
        width: 4px;
        height: 27px;
        background: #f6a41c;
        border-radius: 999px;
    }

    .culture-title h2[b-qhen7240gx] {
        margin: 0;
        color: var(--navy);
        font-size: 1.35rem;
        font-weight: 800;
        text-transform: uppercase;
    }

.culture-grid[b-qhen7240gx] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.culture-card[b-qhen7240gx] {
    --culture-color: #2563eb;
    min-height: 190px;
    padding: 22px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 17px;
    box-shadow: 0 7px 22px rgba(18, 39, 76, 0.045);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

    .culture-card:hover[b-qhen7240gx] {
        transform: translateY(-4px);
        border-color: color-mix(in srgb, var(--culture-color) 35%, white);
        box-shadow: 0 13px 30px rgba(18, 39, 76, 0.1);
    }

.culture-header[b-qhen7240gx] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.culture-icon[b-qhen7240gx] {
    width: 49px;
    height: 49px;
    flex: 0 0 49px;
    display: grid;
    place-items: center;
    color: #fff;
    background: var(--culture-color);
    border-radius: 50%;
    box-shadow: 0 7px 16px color-mix(in srgb, var(--culture-color) 25%, transparent);
}

    .culture-icon svg[b-qhen7240gx] {
        width: 27px;
        height: 27px;
        fill: currentColor;
    }

.culture-header h3[b-qhen7240gx] {
    margin: 3px 0 0;
    color: var(--navy);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.35;
    text-transform: uppercase;
}

.culture-line[b-qhen7240gx] {
    display: block;
    width: 29px;
    height: 3px;
    margin-top: 8px;
    background: var(--culture-color);
    border-radius: 999px;
}

.culture-card p[b-qhen7240gx] {
    margin: 20px 0 0;
    color: #445066;
    font-size: 0.91rem;
    line-height: 1.62;
}

.culture-blue[b-qhen7240gx] {
    --culture-color: #2978ed;
}

.culture-orange[b-qhen7240gx] {
    --culture-color: #ff941f;
}

.culture-purple[b-qhen7240gx] {
    --culture-color: #7652eb;
}

.culture-green[b-qhen7240gx] {
    --culture-color: #2ead6a;
}

.culture-red[b-qhen7240gx] {
    --culture-color: #f24d64;
}

.culture-cyan[b-qhen7240gx] {
    --culture-color: #28aeb1;
}

.culture-pink[b-qhen7240gx] {
    --culture-color: #e83e9c;
}

/* =========================================================
   QUOTE
   ========================================================= */

.culture-quote[b-qhen7240gx] {
    position: relative;
    min-height: 130px;
    margin-top: 18px;
    padding: 28px 390px 28px 82px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: linear-gradient(90deg, #edf5ff 0%, #eaf3ff 100%);
    border: 1px solid #e3edfb;
    border-radius: 18px;
}

.quote-symbol[b-qhen7240gx] {
    position: absolute;
    top: 17px;
    left: 30px;
    color: #3379ed;
    font-family: Georgia, serif;
    font-size: 4.5rem;
    font-weight: 800;
    line-height: 1;
}

.quote-text[b-qhen7240gx] {
    position: relative;
    z-index: 2;
    color: #39465b;
    font-size: 0.97rem;
    line-height: 1.7;
}

    .quote-text strong[b-qhen7240gx] {
        color: #145dce;
    }

.quote-illustration[b-qhen7240gx] {
    position: absolute;
    right: 40px;
    bottom: -4px;
    width: 320px;
    height: 130px;
}

    .quote-illustration svg[b-qhen7240gx] {
        width: 100%;
        height: 100%;
    }

    .quote-illustration circle[b-qhen7240gx] {
        fill: #f2b38b;
    }

    .quote-illustration path:not(.quote-arm)[b-qhen7240gx] {
        fill: #6f8fbe;
    }

    .quote-illustration .quote-arm[b-qhen7240gx] {
        fill: #f2b38b;
    }

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1200px) {
    .company-home[b-qhen7240gx] {
        padding: 16px;
    }

    .hero-content[b-qhen7240gx] {
        padding: 42px;
    }

    .hero-brand[b-qhen7240gx] {
        width: 250px;
        flex-basis: 250px;
    }

    .vision-mission-grid[b-qhen7240gx] {
        grid-template-columns: minmax(280px, 0.75fr) minmax(410px, 1.25fr);
    }

    .culture-grid[b-qhen7240gx] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 992px) {
    .home-hero[b-qhen7240gx],
    .hero-content[b-qhen7240gx] {
        min-height: 360px;
    }

    .hero-content[b-qhen7240gx] {
        padding: 38px;
    }

    .hero-brand[b-qhen7240gx] {
        width: 210px;
        flex-basis: 210px;
    }

    .vision-mission-grid[b-qhen7240gx] {
        grid-template-columns: 1fr;
    }

    .vision-content p[b-qhen7240gx] {
        max-width: 62%;
    }

    .culture-grid[b-qhen7240gx] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .culture-quote[b-qhen7240gx] {
        padding-right: 300px;
    }

    .quote-illustration[b-qhen7240gx] {
        right: 15px;
        width: 270px;
    }
}

@media (max-width: 768px) {
    .company-home[b-qhen7240gx] {
        padding: 12px;
        border-radius: 16px;
    }

    .home-hero[b-qhen7240gx] {
        min-height: auto;
        background-position: 60% center;
        border-radius: 17px;
    }

    .hero-content[b-qhen7240gx] {
        min-height: auto;
        padding: 31px 24px;
        flex-direction: column;
        align-items: flex-start;
        gap: 30px;
    }

    .hero-text[b-qhen7240gx] {
        width: 100%;
    }

    .hero-greeting[b-qhen7240gx] {
        font-size: 1.05rem;
    }

    .hero-text h1[b-qhen7240gx] {
        font-size: 2rem;
        letter-spacing: -0.5px;
    }

    .hero-text > p[b-qhen7240gx] {
        margin-top: 14px;
        font-size: 0.92rem;
        line-height: 1.6;
    }

    .user-summary[b-qhen7240gx] {
        margin-top: 18px;
    }

    .hero-brand[b-qhen7240gx] {
        width: 100%;
        flex-basis: auto;
        align-items: flex-start;
        text-align: left;
    }

        .hero-brand img[b-qhen7240gx] {
            max-width: 200px;
        }

    .brand-fallback[b-qhen7240gx] {
        align-items: flex-start;
    }

    .brand-symbol[b-qhen7240gx] {
        width: auto;
        height: 60px;
        font-size: 3.7rem;
    }

    .brand-name[b-qhen7240gx] {
        font-size: 1.55rem;
        letter-spacing: 5px;
    }

    .brand-line[b-qhen7240gx] {
        max-width: 200px;
    }

    .vision-mission-grid[b-qhen7240gx] {
        margin-top: 16px;
        gap: 14px;
    }

    .vision-card[b-qhen7240gx],
    .mission-card[b-qhen7240gx] {
        padding: 22px;
        border-radius: 16px;
    }

    .vision-content[b-qhen7240gx] {
        min-height: 230px;
    }

        .vision-content p[b-qhen7240gx] {
            max-width: 100%;
            padding-bottom: 105px;
            font-size: 0.94rem;
        }

    .vision-illustration[b-qhen7240gx] {
        right: -10px;
        width: 70%;
    }

    .culture-section[b-qhen7240gx] {
        margin-top: 19px;
    }

    .culture-grid[b-qhen7240gx] {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .culture-card[b-qhen7240gx] {
        min-height: auto;
        padding: 19px;
    }

        .culture-card p[b-qhen7240gx] {
            margin-top: 15px;
        }

    .culture-quote[b-qhen7240gx] {
        min-height: 210px;
        padding: 28px 25px 105px 65px;
        align-items: flex-start;
    }

    .quote-symbol[b-qhen7240gx] {
        left: 22px;
        font-size: 3.5rem;
    }

    .quote-illustration[b-qhen7240gx] {
        right: 5px;
        bottom: -5px;
        width: 250px;
        height: 100px;
        opacity: 0.9;
    }
}

@media (max-width: 480px) {
    .company-home[b-qhen7240gx] {
        padding: 8px;
        margin: 0;
    }

    .hero-content[b-qhen7240gx] {
        padding: 27px 19px;
    }

    .hero-text h1[b-qhen7240gx] {
        font-size: 1.7rem;
    }

    .user-badge[b-qhen7240gx] {
        padding: 6px 9px;
        font-size: 0.71rem;
    }

    .vision-card[b-qhen7240gx],
    .mission-card[b-qhen7240gx] {
        padding: 19px;
    }

    .heading-icon[b-qhen7240gx] {
        width: 47px;
        height: 47px;
        flex-basis: 47px;
    }

        .heading-icon svg[b-qhen7240gx] {
            width: 27px;
            height: 27px;
        }

    .section-heading h2[b-qhen7240gx],
    .culture-title h2[b-qhen7240gx] {
        font-size: 1.15rem;
    }

    .mission-item[b-qhen7240gx] {
        grid-template-columns: 23px minmax(0, 1fr);
        font-size: 0.88rem;
    }

    .vision-content p[b-qhen7240gx] {
        font-size: 0.89rem;
    }

    .vision-illustration[b-qhen7240gx] {
        width: 85%;
    }

    .culture-header h3[b-qhen7240gx] {
        font-size: 0.95rem;
    }

    .culture-card p[b-qhen7240gx] {
        font-size: 0.88rem;
    }

    .culture-quote[b-qhen7240gx] {
        padding-left: 53px;
    }

    .quote-symbol[b-qhen7240gx] {
        left: 16px;
    }

    .quote-text[b-qhen7240gx] {
        font-size: 0.88rem;
    }
}
/* _content/AccountingWeb/Components/Pages/Legalitas/LegalDocument.razor.rz.scp.css */
.legal-page[b-vvrijzaen2] {
    min-height: 100vh;
    max-width: 100%;
    overflow-x: hidden;
    background: #f8fafc;
    font-family: Inter, Arial, sans-serif;
    color: #0f172a;
}

/* TOPBAR */
.topbar[b-vvrijzaen2] {
    height: 58px;
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    padding: 0 18px;
    max-width: 100%;
    overflow-x: hidden;
}

.search-main[b-vvrijzaen2] {
    width: 460px;
    max-width: 100%;
    height: 36px;
    border: 1px solid #dbe3ef;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 10px;
    color: #94a3b8;
    box-sizing: border-box;
}

    .search-main input[b-vvrijzaen2] {
        border: 0;
        outline: none;
        flex: 1;
        min-width: 0;
        font-size: 13px;
    }

    .search-main span[b-vvrijzaen2] {
        border: 1px solid #e5e7eb;
        border-radius: 5px;
        padding: 2px 7px;
        font-size: 11px;
        color: #94a3b8;
        white-space: nowrap;
    }

/* BODY */
.page-body[b-vvrijzaen2] {
    padding: 18px;
    max-width: 100%;
    overflow-x: hidden;
    box-sizing: border-box;
}

/* SUMMARY */
.summary-grid[b-vvrijzaen2] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 18px;
    max-width: 100%;
}

.summary-card[b-vvrijzaen2] {
    min-width: 0;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 13px;
    padding: 18px;
    display: flex;
    gap: 16px;
    align-items: center;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .04);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    border: 2px solid transparent;
}

    .summary-card:hover[b-vvrijzaen2] {
        transform: translateY(-2px);
        box-shadow: 0 8px 22px rgba(15, 23, 42, 0.10);
    }

    .summary-card.selected[b-vvrijzaen2] {
        border-color: #2563eb;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
    }

.summary-icon[b-vvrijzaen2] {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

    .summary-icon.blue[b-vvrijzaen2] {
        background: #eef2ff;
        color: #4f46e5;
    }

    .summary-icon.orange[b-vvrijzaen2] {
        background: #fff7ed;
        color: #f97316;
    }

    .summary-icon.red[b-vvrijzaen2] {
        background: #fef2f2;
        color: #ef4444;
    }

    .summary-icon.green[b-vvrijzaen2] {
        background: #ecfdf5;
        color: #16a34a;
    }

.summary-card label[b-vvrijzaen2] {
    display: block;
    font-size: 12px;
    color: #64748b;
    margin-bottom: 3px;
}

.summary-card h3[b-vvrijzaen2] {
    margin: 0;
    font-size: 24px;
    line-height: 1;
}

.summary-card p[b-vvrijzaen2] {
    margin: 4px 0 0;
    font-size: 12px;
    color: #64748b;
}

/* CONTENT */
.content-grid[b-vvrijzaen2] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
}

.main-card[b-vvrijzaen2] {
    width: 100%;
    min-width: 0;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 13px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .04);
}

.card-header[b-vvrijzaen2] {
    padding: 16px 18px;
    border-bottom: 1px solid #edf2f7;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
}

.btn-upload[b-vvrijzaen2] {
    height: 36px;
    border-radius: 8px;
    padding: 0 14px;
    border: 1px solid #4f46e5;
    background: #4f46e5;
    color: #fff;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
}

/* FILTER */
.filter-area[b-vvrijzaen2] {
    padding: 16px 18px;
    display: grid;
    grid-template-columns: minmax(180px, 1.4fr) minmax(140px, .9fr) minmax(140px, .9fr) minmax(140px, .9fr);
    gap: 10px;
    max-width: 100%;
    box-sizing: border-box;
}

    .filter-input[b-vvrijzaen2],
    .filter-area select[b-vvrijzaen2],
    .filter-area input[type="date"][b-vvrijzaen2] {
        min-width: 0;
        width: 100%;
        height: 38px;
        border: 1px solid #dbe3ef;
        border-radius: 8px;
        background: #fff;
        padding: 0 11px;
        font-size: 13px;
        outline: none;
        box-sizing: border-box;
    }

.filter-input[b-vvrijzaen2] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #94a3b8;
}

    .filter-input input[b-vvrijzaen2] {
        border: 0;
        outline: none;
        flex: 1;
        min-width: 0;
        font-size: 13px;
    }

/* TABLE */
.table-scroll[b-vvrijzaen2] {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 4px;
}

    .table-scroll table[b-vvrijzaen2] {
        width: 100%;
        min-width: 900px;
        border-collapse: collapse;
    }

    .table-scroll thead th[b-vvrijzaen2] {
        background: #f8fafc;
        color: #475569;
        font-size: 12px;
        font-weight: 600;
        text-align: left;
        padding: 13px 18px;
        border-bottom: 1px solid #e5e7eb;
        white-space: nowrap;
    }

    .table-scroll tbody td[b-vvrijzaen2] {
        padding: 15px 18px;
        border-bottom: 1px solid #edf2f7;
        font-size: 13px;
        color: #334155;
        vertical-align: middle;
        white-space: nowrap;
    }

.doc-name[b-vvrijzaen2] {
    display: flex;
    align-items: center;
    gap: 11px;
}

    .doc-name strong[b-vvrijzaen2] {
        display: block;
        color: #0f172a;
        font-size: 13px;
        font-weight: 600;
    }

.pdf-badge[b-vvrijzaen2] {
    width: 28px;
    height: 34px;
    background: #ef4444;
    color: #fff;
    border-radius: 6px;
    font-size: 9px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.category-badge[b-vvrijzaen2] {
    background: #eaf2ff;
    color: #2563eb;
    padding: 6px 9px;
    border-radius: 6px;
    font-size: 11px;
    white-space: nowrap;
}

.status-badge[b-vvrijzaen2] {
    padding: 6px 9px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

    .status-badge.active[b-vvrijzaen2] {
        background: #dcfce7;
        color: #16a34a;
    }

    .status-badge.warning[b-vvrijzaen2] {
        background: #ffedd5;
        color: #f97316;
    }

    .status-badge.danger[b-vvrijzaen2] {
        background: #fee2e2;
        color: #ef4444;
    }

.action-btns[b-vvrijzaen2] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 7px;
    min-width: max-content;
}

.action-icon[b-vvrijzaen2] {
    width: 30px;
    height: 30px;
    border: 0;
    background: transparent;
    color: #334155;
    border-radius: 7px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
    text-decoration: none;
}

    .action-icon:hover[b-vvrijzaen2] {
        background: #f1f5f9;
        color: #4f46e5;
        text-decoration: none;
    }

.btn-inline-edit[b-vvrijzaen2] {
    height: 32px;
    padding: 0 12px;
    border: 1px solid #c7d2fe;
    background: #eef2ff;
    color: #4f46e5;
    border-radius: 8px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}

    .btn-inline-edit:hover[b-vvrijzaen2] {
        background: #e0e7ff;
    }

/* PAGINATION */
.pagination-area[b-vvrijzaen2] {
    padding: 15px 18px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 14px;
    align-items: center;
    color: #64748b;
    font-size: 13px;
}

.pagination[b-vvrijzaen2] {
    display: flex;
    gap: 7px;
    align-items: center;
    flex-wrap: wrap;
}

    .pagination button[b-vvrijzaen2] {
        width: 32px;
        height: 32px;
        border: 1px solid #dbe3ef;
        background: #fff;
        border-radius: 7px;
        cursor: pointer;
        color: #334155;
    }

        .pagination button.active[b-vvrijzaen2] {
            border-color: #4f46e5;
            color: #4f46e5;
            background: #eef2ff;
        }

        .pagination button:disabled[b-vvrijzaen2] {
            opacity: .4;
            cursor: not-allowed;
        }

.pagination-area select[b-vvrijzaen2] {
    height: 34px;
    border: 1px solid #dbe3ef;
    border-radius: 8px;
    padding: 0 10px;
    color: #475569;
}

/* UPLOAD DRAWER */
.modal-backdrop[b-vvrijzaen2] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .45);
    display: flex;
    justify-content: flex-end;
    z-index: 9999;
}

.upload-modal[b-vvrijzaen2] {
    width: 520px;
    max-width: 100%;
    height: 100vh;
    background: #fff;
    display: flex;
    flex-direction: column;
    box-shadow: -20px 0 60px rgba(15, 23, 42, .25);
    animation: legalSlideIn-b-vvrijzaen2 .2s ease;
}

@keyframes legalSlideIn-b-vvrijzaen2 {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(0);
    }
}

.modal-header[b-vvrijzaen2],
.modal-footer[b-vvrijzaen2] {
    padding: 18px 20px;
    display: flex;
    align-items: center;
}

.modal-header[b-vvrijzaen2] {
    border-bottom: 1px solid #edf2f7;
    justify-content: space-between;
}

    .modal-header h3[b-vvrijzaen2] {
        margin: 0;
    }

    .modal-header button[b-vvrijzaen2] {
        border: 0;
        background: transparent;
        font-size: 26px;
        cursor: pointer;
    }

.modal-footer[b-vvrijzaen2] {
    border-top: 1px solid #edf2f7;
    justify-content: flex-end;
    gap: 10px;
}

.upload-form[b-vvrijzaen2] {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}

    .upload-form label[b-vvrijzaen2] {
        display: block;
        margin: 14px 0 7px;
        font-size: 13px;
        font-weight: 600;
        color: #334155;
    }

    .upload-form input[b-vvrijzaen2],
    .upload-form select[b-vvrijzaen2],
    .upload-form textarea[b-vvrijzaen2] {
        width: 100%;
        height: 40px;
        border: 1px solid #dbe3ef;
        border-radius: 10px;
        padding: 0 12px;
        outline: none;
        box-sizing: border-box;
    }

    .upload-form textarea[b-vvrijzaen2] {
        height: 90px;
        padding-top: 10px;
        resize: none;
    }

.form-row[b-vvrijzaen2] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.btn-primary[b-vvrijzaen2],
.btn-light[b-vvrijzaen2] {
    height: 40px;
    border-radius: 10px;
    padding: 0 16px;
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
}

.btn-primary[b-vvrijzaen2] {
    border: 0;
    background: #4f46e5;
    color: #fff;
}

.btn-light[b-vvrijzaen2] {
    background: #f8fafc;
    color: #334155;
    border: 1px solid #dbe3ef;
}

/* FILE PICKER */
.hidden-upload[b-vvrijzaen2] {
    display: none;
}

.upload-zone[b-vvrijzaen2] {
    width: 100%;
}

.upload-content[b-vvrijzaen2] {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 2px dashed #cbd5e1;
    border-radius: 16px;
    background: #f8fafc;
    padding: 35px;
    transition: .25s;
}

    .upload-content:hover[b-vvrijzaen2] {
        border-color: #4f46e5;
        background: #eef2ff;
    }

.upload-icon[b-vvrijzaen2] {
    width: 70px;
    height: 70px;
    border-radius: 18px;
    background: #fee2e2;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
}

    .upload-icon i[b-vvrijzaen2] {
        font-size: 34px;
        color: #ef4444;
    }

.upload-content h4[b-vvrijzaen2] {
    margin: 0;
    font-size: 18px;
}

.upload-content p[b-vvrijzaen2] {
    margin: 10px 0 20px;
    color: #64748b;
}

.choose-file[b-vvrijzaen2] {
    background: #4f46e5;
    color: #fff;
    padding: 11px 22px;
    border-radius: 10px;
    font-weight: 600;
}

.selected-file[b-vvrijzaen2] {
    margin-top: 20px;
    background: #dcfce7;
    color: #15803d;
    padding: 10px 18px;
    border-radius: 10px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* RESPONSIVE */
@media (max-width: 900px) {
    .summary-grid[b-vvrijzaen2] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .filter-area[b-vvrijzaen2] {
        grid-template-columns: 1fr;
    }

    .pagination-area[b-vvrijzaen2] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    .topbar[b-vvrijzaen2] {
        height: auto;
        padding: 12px;
    }

    .search-main[b-vvrijzaen2] {
        width: 100%;
    }

        .search-main span[b-vvrijzaen2] {
            display: none;
        }

    .page-body[b-vvrijzaen2] {
        padding: 12px;
    }

    .summary-grid[b-vvrijzaen2] {
        grid-template-columns: 1fr;
    }

    .card-header[b-vvrijzaen2] {
        align-items: stretch;
    }

    .btn-upload[b-vvrijzaen2] {
        width: 100%;
    }

    .form-row[b-vvrijzaen2] {
        grid-template-columns: 1fr;
    }
}

/* PREVIEW */
.preview-grid[b-vvrijzaen2] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-start;
}

.preview-box[b-vvrijzaen2] {
    position: relative;
    width: 110px;
    height: 110px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #ddd;
    background: #f9f9f9;
    display: flex;
    align-items: center;
    justify-content: center;
}

.preview-img[b-vvrijzaen2] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
}

.btn-delete[b-vvrijzaen2] {
    position: absolute;
    top: 4px;
    right: 4px;
    padding: 1px 6px;
    border-radius: 50%;
    font-size: 12px;
    line-height: 1;
    z-index: 2;
}

.preview-modal[b-vvrijzaen2] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .75);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.preview-full[b-vvrijzaen2] {
    max-width: 90%;
    max-height: 90%;
    border-radius: 10px;
}
/* _content/AccountingWeb/Components/Pages/Legalitas/LegalMsDokument.razor.rz.scp.css */
.legal-master-page[b-wq2riuhxt0] {
    min-height: 100vh;
    background: #f8fafc;
    padding: 22px;
    font-family: Inter, Arial, sans-serif;
    color: #0f172a;
}

.master-header[b-wq2riuhxt0] {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .04);
    margin-bottom: 18px;
}

    .master-header h2[b-wq2riuhxt0] {
        margin: 0;
        font-size: 24px;
        font-weight: 700;
    }

    .master-header p[b-wq2riuhxt0] {
        margin: 6px 0 0;
        color: #64748b;
        font-size: 14px;
    }

.btn-primary[b-wq2riuhxt0],
.btn-light[b-wq2riuhxt0] {
    height: 40px;
    border-radius: 10px;
    padding: 0 16px;
    border: 0;
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
}

.btn-primary[b-wq2riuhxt0] {
    background: #4f46e5;
    color: #fff;
}

.btn-light[b-wq2riuhxt0] {
    background: #f8fafc;
    color: #334155;
    border: 1px solid #dbe3ef;
}

.master-toolbar[b-wq2riuhxt0] {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 18px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .04);
}

.search-box[b-wq2riuhxt0] {
    height: 42px;
    max-width: 520px;
    border: 1px solid #dbe3ef;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 13px;
    color: #94a3b8;
}

    .search-box input[b-wq2riuhxt0] {
        border: 0;
        outline: none;
        flex: 1;
        min-width: 0;
        font-size: 14px;
    }

.category-grid[b-wq2riuhxt0] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.category-card[b-wq2riuhxt0] {
    min-width: 0;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .04);
    overflow: hidden;
}

.category-header[b-wq2riuhxt0] {
    padding: 18px;
    border-bottom: 1px solid #edf2f7;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
}

    .category-header h4[b-wq2riuhxt0] {
        margin: 0;
        font-size: 17px;
        font-weight: 700;
    }

    .category-header span[b-wq2riuhxt0] {
        display: block;
        margin-top: 5px;
        color: #64748b;
        font-size: 12px;
    }

.card-action[b-wq2riuhxt0] {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

    .card-action button[b-wq2riuhxt0],
    .sub-action button[b-wq2riuhxt0] {
        width: 31px;
        height: 31px;
        border: 1px solid #e2e8f0;
        background: #fff;
        border-radius: 8px;
        cursor: pointer;
        color: #475569;
    }

        .card-action button:hover[b-wq2riuhxt0],
        .sub-action button:hover[b-wq2riuhxt0] {
            background: #eef2ff;
            color: #4f46e5;
            border-color: #c7d2fe;
        }

.sub-list[b-wq2riuhxt0] {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    min-height: 180px;
}

.sub-item[b-wq2riuhxt0] {
    background: #f8fafc;
    border: 1px solid #edf2f7;
    border-radius: 12px;
    padding: 12px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
}

    .sub-item strong[b-wq2riuhxt0] {
        display: block;
        font-size: 14px;
        color: #0f172a;
    }

    .sub-item small[b-wq2riuhxt0] {
        display: inline-block;
        margin-top: 5px;
        padding: 4px 8px;
        border-radius: 999px;
        font-size: 11px;
        font-weight: 600;
    }

        .sub-item small.active[b-wq2riuhxt0] {
            background: #dcfce7;
            color: #16a34a;
        }

        .sub-item small.inactive[b-wq2riuhxt0] {
            background: #fee2e2;
            color: #dc2626;
        }

.sub-action[b-wq2riuhxt0] {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.btn-add-sub[b-wq2riuhxt0] {
    width: calc(100% - 24px);
    margin: 0 12px 14px;
    height: 38px;
    border: 1px dashed #c7d2fe;
    background: #eef2ff;
    color: #4f46e5;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
}

/* CENTERED MASTER MODAL */
.modal-backdrop[b-wq2riuhxt0] {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, .45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 18px;
}

.small-modal[b-wq2riuhxt0] {
    width: 460px;
    max-width: 100%;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 24px 80px rgba(15, 23, 42, .25);
    overflow: hidden;
}

.modal-header[b-wq2riuhxt0] {
    padding: 18px 20px;
    border-bottom: 1px solid #edf2f7;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .modal-header h3[b-wq2riuhxt0] {
        margin: 0;
        font-size: 18px;
    }

    .modal-header button[b-wq2riuhxt0] {
        border: 0;
        background: transparent;
        font-size: 26px;
        cursor: pointer;
        color: #64748b;
    }

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

    .modal-body label[b-wq2riuhxt0] {
        display: block;
        margin-bottom: 7px;
        margin-top: 13px;
        font-size: 13px;
        font-weight: 600;
        color: #334155;
    }

        .modal-body label:first-child[b-wq2riuhxt0] {
            margin-top: 0;
        }

    .modal-body input[b-wq2riuhxt0],
    .modal-body select[b-wq2riuhxt0],
    .modal-body textarea[b-wq2riuhxt0] {
        width: 100%;
        border: 1px solid #dbe3ef;
        border-radius: 10px;
        padding: 0 12px;
        height: 40px;
        outline: none;
        box-sizing: border-box;
    }

    .modal-body textarea[b-wq2riuhxt0] {
        height: 82px;
        padding-top: 11px;
        resize: none;
    }

    .modal-body input:disabled[b-wq2riuhxt0] {
        background: #f8fafc;
        color: #64748b;
    }

.modal-footer[b-wq2riuhxt0] {
    padding: 16px 20px;
    border-top: 1px solid #edf2f7;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* RESPONSIVE */
@media (max-width: 1200px) {
    .category-grid[b-wq2riuhxt0] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .legal-master-page[b-wq2riuhxt0] {
        padding: 12px;
    }

    .master-header[b-wq2riuhxt0] {
        flex-direction: column;
        align-items: stretch;
    }

        .master-header .btn-primary[b-wq2riuhxt0] {
            width: 100%;
        }

    .category-grid[b-wq2riuhxt0] {
        grid-template-columns: 1fr;
    }

    .category-header[b-wq2riuhxt0] {
        flex-direction: column;
    }

    .card-action[b-wq2riuhxt0] {
        width: 100%;
        justify-content: flex-end;
    }

    .sub-item[b-wq2riuhxt0] {
        align-items: flex-start;
    }
}
/* _content/AccountingWeb/Components/Pages/Marketing/DashboardOwner.razor.rz.scp.css */

.kpi-card[b-cwpoh7bqe8] {
    background: white;
    border-radius: 16px;
    padding: 20px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 3px 10px rgba(0,0,0,.05);
    height: 100%;
}

.kpi-title[b-cwpoh7bqe8] {
    color: #6b7280;
    font-size: 14px;
}

.kpi-value[b-cwpoh7bqe8] {
    font-size: 30px;
    font-weight: 700;
    color: #2563eb;
}

.dashboard-card[b-cwpoh7bqe8] {
    border-radius: 16px;
    overflow: hidden;
}

.channel-card[b-cwpoh7bqe8] {
    background: white;
    border-radius: 16px;
    padding: 18px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 4px 12px rgba(0,0,0,.05);
    transition: .25s;
    height: 100%;
}

    .channel-card:hover[b-cwpoh7bqe8] {
        transform: translateY(-3px);
        box-shadow: 0 10px 25px rgba(0,0,0,.08);
    }

.channel-header[b-cwpoh7bqe8] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .channel-header h5[b-cwpoh7bqe8] {
        margin: 0;
        font-weight: 600;
    }

.channel-total[b-cwpoh7bqe8] {
    font-size: 34px;
    font-weight: 700;
    color: #2563eb;
}

.channel-percent[b-cwpoh7bqe8] {
    margin-top: 12px;
    color: #6b7280;
    font-weight: 600;
}

.channel-breakdown[b-cwpoh7bqe8] {
    margin-top: 15px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

    .channel-breakdown span[b-cwpoh7bqe8] {
        padding: 6px 12px;
        border-radius: 999px;
        font-size: 13px;
        font-weight: 600;
    }

.cold[b-cwpoh7bqe8] {
    background: #dbeafe;
    color: #1d4ed8;
}

.warm[b-cwpoh7bqe8] {
    background: #fef3c7;
    color: #b45309;
}

.hot[b-cwpoh7bqe8] {
    background: #fee2e2;
    color: #dc2626;
}

.top-channel[b-cwpoh7bqe8] {
    border: 2px solid #2563eb;
}

.channel-top[b-cwpoh7bqe8] {
    display: flex;
    align-items: center;
    gap: 15px;
}

.channel-icon[b-cwpoh7bqe8] {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.channel-info[b-cwpoh7bqe8] {
    flex: 1;
}

.channel-name[b-cwpoh7bqe8] {
    font-weight: 700;
    font-size: 16px;
}

.channel-total[b-cwpoh7bqe8] {
    font-size: 36px;
    font-weight: 700;
    color: #2563eb;
}

.channel-progress[b-cwpoh7bqe8] {
    margin-top: 15px;
}

    .channel-progress small[b-cwpoh7bqe8] {
        color: #6b7280;
    }

.channel-breakdown[b-cwpoh7bqe8] {
    margin-top: 15px;
    display: flex;
    gap: 8px;
}

.status-pill[b-cwpoh7bqe8] {
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
}

.top-badge[b-cwpoh7bqe8] {
    display: inline-block;
    margin-top: 4px;
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 999px;
    background: #FEF3C7;
    color: #92400E;
}

.progress[b-cwpoh7bqe8] {
    height: 8px;
    border-radius: 999px;
    overflow: hidden;
}

.status-cold[b-cwpoh7bqe8] {
    background: #DBEAFE;
    color: #1D4ED8;
}

.status-warm[b-cwpoh7bqe8] {
    background: #FEF3C7;
    color: #B45309;
}

.status-hot[b-cwpoh7bqe8] {
    background: #FEE2E2;
    color: #DC2626;
}

.status-akad[b-cwpoh7bqe8] {
    background: #DCFCE7;
    color: #15803D;
}

.status-booking[b-cwpoh7bqe8] {
    background: #E0E7FF;
    color: #4338CA;
}

.status-survey[b-cwpoh7bqe8] {
    background: #CCFBF1;
    color: #0F766E;
}

.status-reject[b-cwpoh7bqe8] {
    background: #FECACA;
    color: #991B1B;
}

.status-default[b-cwpoh7bqe8] {
    background: #F3F4F6;
    color: #374151;
}

.campaign-budget-card[b-cwpoh7bqe8] {
    width: 100%;
    min-height: 125px;
    padding: 22px;
    border-radius: 16px;
    background: linear-gradient(135deg, #1d4ed8, #2563eb);
    color: #fff;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 10px 25px rgba(37, 99, 235, 0.2);
}

.campaign-budget-icon[b-cwpoh7bqe8] {
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 23px;
}

.campaign-budget-info[b-cwpoh7bqe8] {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

    .campaign-budget-info span[b-cwpoh7bqe8] {
        font-size: 13px;
        color: rgba(255, 255, 255, 0.82);
    }

    .campaign-budget-info strong[b-cwpoh7bqe8] {
        margin: 4px 0;
        font-size: 28px;
        line-height: 1.2;
        color: #fff;
    }

    .campaign-budget-info small[b-cwpoh7bqe8] {
        color: rgba(255, 255, 255, 0.75);
    }


/* =========================================================
   MARKETING STAGE RECAP
   ========================================================= */

.stage-recap-section[b-cwpoh7bqe8] {
    margin-bottom: 24px;
    padding: 24px;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    background: radial-gradient(circle at top right, rgba(37, 99, 235, 0.08), transparent 28%), #f8fafc;
    box-shadow: 0 8px 30px rgba(15, 23, 42, 0.06);
}

.stage-recap-header[b-cwpoh7bqe8] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}

.section-eyebrow[b-cwpoh7bqe8] {
    display: inline-block;
    margin-bottom: 5px;
    color: #2563eb;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.13em;
}

.stage-recap-header h4[b-cwpoh7bqe8] {
    margin: 0;
    color: #0f172a;
    font-size: 22px;
    font-weight: 800;
}

.stage-recap-header p[b-cwpoh7bqe8] {
    margin: 6px 0 0;
    color: #64748b;
    font-size: 14px;
}

.stage-period[b-cwpoh7bqe8] {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    flex-shrink: 0;
    min-height: 40px;
    padding: 9px 14px;
    border: 1px solid #dbeafe;
    border-radius: 12px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 13px;
    font-weight: 700;
}

.stage-loading[b-cwpoh7bqe8] {
    min-height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #64748b;
    font-weight: 600;
}

/* SUMMARY CARDS */

.stage-summary-grid[b-cwpoh7bqe8] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.stage-summary-card[b-cwpoh7bqe8] {
    position: relative;
    min-width: 0;
    overflow: hidden;
    padding: 17px;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 5px 18px rgba(15, 23, 42, 0.045);
}

    .stage-summary-card[b-cwpoh7bqe8]::before {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        height: 4px;
        content: "";
    }

    .stage-summary-card.stage-lead[b-cwpoh7bqe8]::before {
        background: #2563eb;
    }

    .stage-summary-card.stage-survey[b-cwpoh7bqe8]::before {
        background: #0d9488;
    }

    .stage-summary-card.stage-booking[b-cwpoh7bqe8]::before {
        background: #7c3aed;
    }

    .stage-summary-card.stage-akad[b-cwpoh7bqe8]::before {
        background: #16a34a;
    }

    .stage-summary-card.stage-reject[b-cwpoh7bqe8]::before {
        background: #dc2626;
    }

.stage-summary-top[b-cwpoh7bqe8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 15px;
}

.stage-summary-icon[b-cwpoh7bqe8] {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 17px;
}

.stage-lead .stage-summary-icon[b-cwpoh7bqe8] {
    background: #dbeafe;
    color: #1d4ed8;
}

.stage-survey .stage-summary-icon[b-cwpoh7bqe8] {
    background: #ccfbf1;
    color: #0f766e;
}

.stage-booking .stage-summary-icon[b-cwpoh7bqe8] {
    background: #ede9fe;
    color: #6d28d9;
}

.stage-akad .stage-summary-icon[b-cwpoh7bqe8] {
    background: #dcfce7;
    color: #15803d;
}

.stage-reject .stage-summary-icon[b-cwpoh7bqe8] {
    background: #fee2e2;
    color: #b91c1c;
}

.achievement-badge[b-cwpoh7bqe8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 62px;
    padding: 5px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
}

    .achievement-badge.success[b-cwpoh7bqe8] {
        background: #dcfce7;
        color: #15803d;
    }

    .achievement-badge.warning[b-cwpoh7bqe8] {
        background: #fef3c7;
        color: #b45309;
    }

    .achievement-badge.danger[b-cwpoh7bqe8] {
        background: #fee2e2;
        color: #b91c1c;
    }

.stage-summary-label[b-cwpoh7bqe8] {
    overflow: hidden;
    margin-bottom: 4px;
    color: #64748b;
    font-size: 13px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stage-summary-value[b-cwpoh7bqe8] {
    color: #0f172a;
    font-size: 29px;
    font-weight: 800;
    line-height: 1.15;
}

.stage-summary-meta[b-cwpoh7bqe8] {
    margin-top: 6px;
    color: #94a3b8;
    font-size: 12px;
}

    .stage-summary-meta strong[b-cwpoh7bqe8] {
        margin-left: 4px;
        color: #475569;
    }

.stage-mini-progress[b-cwpoh7bqe8] {
    height: 6px;
    overflow: hidden;
    margin-top: 14px;
    border-radius: 999px;
    background: #e2e8f0;
}

    .stage-mini-progress span[b-cwpoh7bqe8] {
        display: block;
        height: 100%;
        border-radius: inherit;
    }

.stage-lead .stage-mini-progress span[b-cwpoh7bqe8] {
    background: #2563eb;
}

.stage-survey .stage-mini-progress span[b-cwpoh7bqe8] {
    background: #0d9488;
}

.stage-booking .stage-mini-progress span[b-cwpoh7bqe8] {
    background: #7c3aed;
}

.stage-akad .stage-mini-progress span[b-cwpoh7bqe8] {
    background: #16a34a;
}

.stage-reject .stage-mini-progress span[b-cwpoh7bqe8] {
    background: #dc2626;
}

/* FUNNEL */

.funnel-panel[b-cwpoh7bqe8] {
    margin-bottom: 18px;
    padding: 20px;
    border: 1px solid #e2e8f0;
    border-radius: 17px;
    background: #ffffff;
}

.funnel-panel-header[b-cwpoh7bqe8] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
}

    .funnel-panel-header h5[b-cwpoh7bqe8],
    .stage-table-header h5[b-cwpoh7bqe8] {
        margin: 0;
        color: #0f172a;
        font-size: 17px;
        font-weight: 800;
    }

    .funnel-panel-header p[b-cwpoh7bqe8],
    .stage-table-header p[b-cwpoh7bqe8] {
        margin: 4px 0 0;
        color: #64748b;
        font-size: 13px;
    }

.funnel-health[b-cwpoh7bqe8] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 11px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
}

    .funnel-health.success[b-cwpoh7bqe8] {
        background: #dcfce7;
        color: #15803d;
    }

    .funnel-health.warning[b-cwpoh7bqe8] {
        background: #fef3c7;
        color: #b45309;
    }

    .funnel-health.danger[b-cwpoh7bqe8] {
        background: #fee2e2;
        color: #b91c1c;
    }

.funnel-flow[b-cwpoh7bqe8] {
    display: grid;
    grid-template-columns: minmax(125px, 1fr) minmax(95px, 0.65fr) minmax(125px, 1fr) minmax(95px, 0.65fr) minmax(125px, 1fr) minmax(95px, 0.65fr) minmax(125px, 1fr);
    align-items: center;
    gap: 10px;
}

.funnel-stage[b-cwpoh7bqe8] {
    min-width: 0;
    padding: 17px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 15px;
    text-align: center;
}

    .funnel-stage .funnel-icon[b-cwpoh7bqe8] {
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 9px;
        border-radius: 13px;
        font-size: 17px;
    }

    .funnel-stage.lead .funnel-icon[b-cwpoh7bqe8] {
        background: #dbeafe;
        color: #1d4ed8;
    }

    .funnel-stage.survey .funnel-icon[b-cwpoh7bqe8] {
        background: #ccfbf1;
        color: #0f766e;
    }

    .funnel-stage.booking .funnel-icon[b-cwpoh7bqe8] {
        background: #ede9fe;
        color: #6d28d9;
    }

    .funnel-stage.akad .funnel-icon[b-cwpoh7bqe8] {
        background: #dcfce7;
        color: #15803d;
    }

.funnel-name[b-cwpoh7bqe8] {
    display: block;
    margin-bottom: 2px;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
}

.funnel-stage strong[b-cwpoh7bqe8] {
    display: block;
    color: #0f172a;
    font-size: 25px;
    font-weight: 800;
}

.funnel-stage small[b-cwpoh7bqe8] {
    display: block;
    margin-top: 2px;
    color: #94a3b8;
    font-size: 11px;
}

.funnel-connector[b-cwpoh7bqe8] {
    min-width: 0;
    text-align: center;
}

    .funnel-connector span[b-cwpoh7bqe8] {
        display: block;
        color: #2563eb;
        font-size: 15px;
        font-weight: 800;
    }

    .funnel-connector i[b-cwpoh7bqe8] {
        display: block;
        margin: 5px 0;
        color: #94a3b8;
        font-size: 14px;
    }

    .funnel-connector small[b-cwpoh7bqe8] {
        display: block;
        color: #94a3b8;
        font-size: 10px;
        line-height: 1.3;
    }

/* TABLE */

.stage-table-card[b-cwpoh7bqe8] {
    overflow: hidden;
    margin-bottom: 18px;
    border: 1px solid #e2e8f0;
    border-radius: 17px;
    background: #ffffff;
}

.stage-table-header[b-cwpoh7bqe8] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    padding: 19px 20px;
    border-bottom: 1px solid #e2e8f0;
}

.stage-table-badge[b-cwpoh7bqe8] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 11px;
    border-radius: 999px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 11px;
    font-weight: 800;
}

.stage-table-scroll[b-cwpoh7bqe8] {
    width: 100%;
    overflow-x: auto;
}

.stage-recap-table[b-cwpoh7bqe8] {
    width: 100%;
    min-width: 920px;
    border-collapse: collapse;
}

    .stage-recap-table th[b-cwpoh7bqe8] {
        padding: 12px 15px;
        border-bottom: 1px solid #e2e8f0;
        background: #f8fafc;
        color: #64748b;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 0.04em;
        text-align: left;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .stage-recap-table td[b-cwpoh7bqe8] {
        padding: 13px 15px;
        border-bottom: 1px solid #f1f5f9;
        color: #475569;
        font-size: 13px;
        vertical-align: middle;
    }

    .stage-recap-table tbody tr:last-child td[b-cwpoh7bqe8] {
        border-bottom: 0;
    }

    .stage-recap-table tbody tr:hover td[b-cwpoh7bqe8] {
        background: #f8fafc;
    }

.table-stage-name[b-cwpoh7bqe8] {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 190px;
}

    .table-stage-name > div[b-cwpoh7bqe8] {
        min-width: 0;
    }

    .table-stage-name strong[b-cwpoh7bqe8] {
        display: block;
        color: #0f172a;
        font-size: 13px;
    }

    .table-stage-name small[b-cwpoh7bqe8] {
        display: block;
        overflow: hidden;
        max-width: 250px;
        margin-top: 2px;
        color: #94a3b8;
        font-size: 11px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.table-stage-icon[b-cwpoh7bqe8] {
    width: 35px;
    height: 35px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 35px;
    border-radius: 10px;
}

    .table-stage-icon.lead[b-cwpoh7bqe8] {
        background: #dbeafe;
        color: #1d4ed8;
    }

    .table-stage-icon.survey[b-cwpoh7bqe8] {
        background: #ccfbf1;
        color: #0f766e;
    }

    .table-stage-icon.booking[b-cwpoh7bqe8] {
        background: #ede9fe;
        color: #6d28d9;
    }

    .table-stage-icon.akad[b-cwpoh7bqe8] {
        background: #dcfce7;
        color: #15803d;
    }

    .table-stage-icon.reject[b-cwpoh7bqe8] {
        background: #fee2e2;
        color: #b91c1c;
    }

.table-number[b-cwpoh7bqe8] {
    white-space: nowrap;
}

    .table-number.strong[b-cwpoh7bqe8] {
        color: #0f172a;
        font-weight: 800;
    }

.table-progress-wrap[b-cwpoh7bqe8] {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 155px;
}

.table-progress[b-cwpoh7bqe8] {
    width: 95px;
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: #e2e8f0;
}

    .table-progress span[b-cwpoh7bqe8] {
        display: block;
        height: 100%;
        border-radius: inherit;
    }

        .table-progress span.success[b-cwpoh7bqe8] {
            background: #16a34a;
        }

        .table-progress span.warning[b-cwpoh7bqe8] {
            background: #f59e0b;
        }

        .table-progress span.danger[b-cwpoh7bqe8] {
            background: #dc2626;
        }

.table-progress-wrap strong[b-cwpoh7bqe8] {
    min-width: 50px;
    color: #334155;
    font-size: 11px;
}

.stage-status[b-cwpoh7bqe8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 105px;
    padding: 6px 9px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
}

    .stage-status.success[b-cwpoh7bqe8] {
        background: #dcfce7;
        color: #15803d;
    }

    .stage-status.warning[b-cwpoh7bqe8] {
        background: #fef3c7;
        color: #b45309;
    }

    .stage-status.danger[b-cwpoh7bqe8] {
        background: #fee2e2;
        color: #b91c1c;
    }

    .stage-status.neutral[b-cwpoh7bqe8] {
        background: #f1f5f9;
        color: #475569;
    }

/* INSIGHT */

.stage-insight-card[b-cwpoh7bqe8] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
    border: 1px solid #fde68a;
    border-radius: 17px;
    background: linear-gradient(135deg, #fffbeb, #ffffff);
}

.stage-insight-icon[b-cwpoh7bqe8] {
    width: 45px;
    height: 45px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 45px;
    border-radius: 13px;
    background: #fef3c7;
    color: #d97706;
    font-size: 19px;
}

.stage-insight-content[b-cwpoh7bqe8] {
    flex: 1;
    min-width: 0;
}

.stage-insight-title[b-cwpoh7bqe8] {
    margin-bottom: 11px;
    color: #92400e;
    font-size: 15px;
    font-weight: 800;
}

.stage-insight-grid[b-cwpoh7bqe8] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px 20px;
}

.stage-insight-item[b-cwpoh7bqe8] {
    display: flex;
    align-items: flex-start;
    gap: 9px;
}

    .stage-insight-item > span[b-cwpoh7bqe8] {
        width: 25px;
        height: 25px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 25px;
        margin-top: 1px;
        border-radius: 8px;
        font-size: 11px;
    }

        .stage-insight-item > span.success[b-cwpoh7bqe8] {
            background: #dcfce7;
            color: #15803d;
        }

        .stage-insight-item > span.warning[b-cwpoh7bqe8] {
            background: #fef3c7;
            color: #b45309;
        }

        .stage-insight-item > span.danger[b-cwpoh7bqe8] {
            background: #fee2e2;
            color: #b91c1c;
        }

        .stage-insight-item > span.info[b-cwpoh7bqe8] {
            background: #dbeafe;
            color: #1d4ed8;
        }

    .stage-insight-item p[b-cwpoh7bqe8] {
        margin: 0;
        color: #475569;
        font-size: 12px;
        line-height: 1.55;
    }

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1399.98px) {
    .stage-summary-grid[b-cwpoh7bqe8] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .stage-summary-card:nth-child(4)[b-cwpoh7bqe8],
    .stage-summary-card:nth-child(5)[b-cwpoh7bqe8] {
        grid-column: span 1;
    }
}

@media (max-width: 1199.98px) {
    .funnel-flow[b-cwpoh7bqe8] {
        grid-template-columns: repeat(4, minmax(135px, 1fr));
    }

    .funnel-connector[b-cwpoh7bqe8] {
        display: none;
    }

    .funnel-stage[b-cwpoh7bqe8] {
        position: relative;
    }

        .funnel-stage:not(:last-child)[b-cwpoh7bqe8]::after {
            position: absolute;
            top: 50%;
            right: -17px;
            z-index: 2;
            color: #94a3b8;
            content: "›";
            font-size: 26px;
            font-weight: 800;
            transform: translateY(-50%);
        }
}

@media (max-width: 767.98px) {
    .stage-recap-section[b-cwpoh7bqe8] {
        padding: 16px;
        border-radius: 16px;
    }

    .stage-recap-header[b-cwpoh7bqe8],
    .funnel-panel-header[b-cwpoh7bqe8],
    .stage-table-header[b-cwpoh7bqe8] {
        flex-direction: column;
        align-items: stretch;
    }

    .stage-period[b-cwpoh7bqe8],
    .funnel-health[b-cwpoh7bqe8],
    .stage-table-badge[b-cwpoh7bqe8] {
        width: fit-content;
    }

    .stage-summary-grid[b-cwpoh7bqe8] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .stage-summary-card[b-cwpoh7bqe8] {
        padding: 14px;
    }

        .stage-summary-card.stage-reject[b-cwpoh7bqe8] {
            grid-column: 1 / -1;
        }

    .stage-summary-value[b-cwpoh7bqe8] {
        font-size: 25px;
    }

    .funnel-flow[b-cwpoh7bqe8] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .funnel-stage:not(:last-child)[b-cwpoh7bqe8]::after {
        display: none;
    }

    .stage-insight-card[b-cwpoh7bqe8] {
        padding: 15px;
    }

    .stage-insight-grid[b-cwpoh7bqe8] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 479.98px) {
    .stage-summary-grid[b-cwpoh7bqe8] {
        grid-template-columns: 1fr;
    }

    .stage-summary-card.stage-reject[b-cwpoh7bqe8] {
        grid-column: auto;
    }

    .funnel-flow[b-cwpoh7bqe8] {
        grid-template-columns: 1fr;
    }

    .funnel-stage[b-cwpoh7bqe8] {
        display: grid;
        grid-template-columns: 45px 1fr auto;
        align-items: center;
        gap: 10px;
        text-align: left;
    }

        .funnel-stage .funnel-icon[b-cwpoh7bqe8] {
            grid-row: span 2;
            margin: 0;
        }

        .funnel-stage strong[b-cwpoh7bqe8] {
            grid-column: 3;
            grid-row: 1 / span 2;
            font-size: 22px;
        }

        .funnel-stage small[b-cwpoh7bqe8] {
            margin: 0;
        }
}
/* _content/AccountingWeb/Components/Pages/Marketing/MarketingPipeline.razor.rz.scp.css */
.marketing-pipeline-page[b-hyhbryg0d6] {
    --pipeline-primary: #2563eb;
    --pipeline-primary-soft: #eff6ff;
    --pipeline-border: #e5e7eb;
    --pipeline-text: #172033;
    --pipeline-muted: #667085;
    --pipeline-surface: #ffffff;
    --pipeline-background: #f6f8fc;
    min-height: calc(100vh - 110px);
    padding: 20px;
    color: var(--pipeline-text);
    background: var(--pipeline-background);
}

.marketing-pipeline-page *[b-hyhbryg0d6],
.marketing-pipeline-page *[b-hyhbryg0d6]::before,
.marketing-pipeline-page *[b-hyhbryg0d6]::after {
    box-sizing: border-box;
}

.pipeline-heading[b-hyhbryg0d6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}

.pipeline-heading h1[b-hyhbryg0d6] {
    margin: 0;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.4px;
}

.pipeline-heading p[b-hyhbryg0d6] {
    margin: 5px 0 0;
    color: var(--pipeline-muted);
    font-size: 13px;
}

.pipeline-heading-actions[b-hyhbryg0d6] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pipeline-search[b-hyhbryg0d6] {
    position: relative;
    width: min(410px, 40vw);
}

.pipeline-search > i[b-hyhbryg0d6] {
    position: absolute;
    top: 50%;
    left: 14px;
    color: #98a2b3;
    transform: translateY(-50%);
}

.pipeline-search input[b-hyhbryg0d6] {
    width: 100%;
    min-height: 42px;
    padding: 9px 42px 9px 40px;
    border: 1px solid #d9dee8;
    border-radius: 10px;
    outline: none;
    background: #fff;
    font-size: 13px;
    transition: .2s ease;
}

.pipeline-search input:focus[b-hyhbryg0d6] {
    border-color: #93b4fb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .1);
}

.pipeline-search button[b-hyhbryg0d6] {
    position: absolute;
    top: 50%;
    right: 9px;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 7px;
    color: #667085;
    background: transparent;
    transform: translateY(-50%);
}

.pipeline-btn[b-hyhbryg0d6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    padding: 9px 15px;
    border: 1px solid transparent;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    transition: .2s ease;
}

.pipeline-btn.primary[b-hyhbryg0d6] {
    color: #fff;
    background: var(--pipeline-primary);
    box-shadow: 0 6px 14px rgba(37, 99, 235, .18);
}

.pipeline-btn.secondary[b-hyhbryg0d6] {
    border-color: #cbd5e1;
    color: #334155;
    background: #fff;
}

.pipeline-btn.ghost[b-hyhbryg0d6] {
    color: #64748b;
    background: transparent;
}

.pipeline-btn:hover:not(:disabled)[b-hyhbryg0d6] {
    transform: translateY(-1px);
}

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

.pipeline-stage-strip[b-hyhbryg0d6] {
    display: grid;
    grid-template-columns: repeat(6, minmax(145px, 1fr));
    overflow: hidden;
    margin-bottom: 14px;
    border: 1px solid var(--pipeline-border);
    border-radius: 13px;
    background: var(--pipeline-surface);
    box-shadow: 0 5px 20px rgba(15, 23, 42, .035);
}

.pipeline-stage-card[b-hyhbryg0d6] {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    min-width: 0;
    min-height: 105px;
    padding: 17px 15px;
    border: 0;
    border-right: 1px solid #edf0f5;
    color: inherit;
    background: #fff;
    text-align: left;
}

.pipeline-stage-card:last-child[b-hyhbryg0d6] {
    border-right: 0;
}

.pipeline-stage-card[b-hyhbryg0d6]::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 3px;
    background: transparent;
}

.pipeline-stage-card.active[b-hyhbryg0d6]::after {
    background: var(--stage-color);
}

.stage-icon[b-hyhbryg0d6] {
    display: grid;
    width: 48px;
    height: 48px;
    place-items: center;
    border: 1px solid var(--stage-border);
    border-radius: 11px;
    color: var(--stage-color);
    background: var(--stage-soft);
    font-size: 20px;
}

.stage-content[b-hyhbryg0d6] {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.stage-content small[b-hyhbryg0d6] {
    color: #344054;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.stage-content strong[b-hyhbryg0d6] {
    margin: 2px 0;
    font-size: 24px;
    line-height: 1.1;
}

.stage-content em[b-hyhbryg0d6] {
    overflow: hidden;
    color: var(--stage-color);
    font-size: 10px;
    font-style: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stage-arrow[b-hyhbryg0d6] {
    color: #98a2b3;
    font-size: 12px;
}

.pipeline-stage-card.prospek[b-hyhbryg0d6] {
    --stage-color: #2563eb;
    --stage-soft: #eff6ff;
    --stage-border: #bfdbfe;
}

.pipeline-stage-card.followup[b-hyhbryg0d6] {
    --stage-color: #ea8b17;
    --stage-soft: #fff7e8;
    --stage-border: #fed7aa;
}

.pipeline-stage-card.survey[b-hyhbryg0d6] {
    --stage-color: #16a34a;
    --stage-soft: #ecfdf3;
    --stage-border: #bbf7d0;
}

.pipeline-stage-card.booking[b-hyhbryg0d6] {
    --stage-color: #7c3aed;
    --stage-soft: #f5f3ff;
    --stage-border: #ddd6fe;
}

.pipeline-stage-card.akad[b-hyhbryg0d6] {
    --stage-color: #155eef;
    --stage-soft: #eff6ff;
    --stage-border: #bfdbfe;
}

.pipeline-stage-card.reject[b-hyhbryg0d6] {
    --stage-color: #dc2626;
    --stage-soft: #fef2f2;
    --stage-border: #fecaca;
}

.pipeline-filter-bar[b-hyhbryg0d6] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
    padding: 13px 15px;
    border: 1px solid var(--pipeline-border);
    border-radius: 11px;
    background: #fff;
}

.pipeline-filter-group[b-hyhbryg0d6] {
    display: flex;
    align-items: flex-end;
    gap: 9px;
}

.pipeline-filter-group label[b-hyhbryg0d6] {
    display: flex;
    min-width: 150px;
    flex-direction: column;
    gap: 5px;
}

.pipeline-filter-group label span[b-hyhbryg0d6] {
    color: #667085;
    font-size: 10px;
    font-weight: 700;
}

.pipeline-filter-group .form-control[b-hyhbryg0d6] {
    min-height: 39px;
    border-color: #d9dee8;
    border-radius: 8px;
    font-size: 12px;
}

.pipeline-record-info[b-hyhbryg0d6] {
    display: flex;
    align-items: baseline;
    gap: 5px;
    color: #667085;
    font-size: 11px;
}

.pipeline-record-info strong[b-hyhbryg0d6] {
    color: #101828;
    font-size: 16px;
}

.pipeline-workspace[b-hyhbryg0d6] {
    display: grid;
    grid-template-columns: minmax(580px, 1.15fr) minmax(460px, .85fr);
    gap: 14px;
    align-items: start;
}

.pipeline-workspace.detail-closed[b-hyhbryg0d6] {
    grid-template-columns: minmax(0, 1fr);
}

.pipeline-list-card[b-hyhbryg0d6],
.pipeline-detail-card[b-hyhbryg0d6] {
    overflow: hidden;
    border: 1px solid var(--pipeline-border);
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 5px 22px rgba(15, 23, 42, .035);
}

.pipeline-list-header[b-hyhbryg0d6] {
    display: flex;
    min-height: 68px;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid #edf0f5;
}

.pipeline-list-header h2[b-hyhbryg0d6],
.detail-header h2[b-hyhbryg0d6] {
    margin: 0;
    font-size: 17px;
    font-weight: 800;
}

.pipeline-list-header p[b-hyhbryg0d6],
.detail-header p[b-hyhbryg0d6] {
    margin: 4px 0 0;
    color: var(--pipeline-muted);
    font-size: 11px;
}

.pipeline-loading[b-hyhbryg0d6] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #667085;
    font-size: 11px;
}

.pipeline-table-wrap[b-hyhbryg0d6] {
    overflow: auto;
    min-height: 460px;
    max-height: calc(100vh - 410px);
}

.pipeline-table[b-hyhbryg0d6] {
    width: 100%;
    min-width: 980px;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 11px;
}

.pipeline-table th[b-hyhbryg0d6] {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 12px 11px;
    border-bottom: 1px solid #e8ecf2;
    color: #667085;
    background: #fbfcfe;
    font-size: 9px;
    font-weight: 800;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.pipeline-table td[b-hyhbryg0d6] {
    padding: 12px 11px;
    border-bottom: 1px solid #eef1f5;
    color: #344054;
    vertical-align: middle;
}

.pipeline-table tbody tr[b-hyhbryg0d6] {
    cursor: pointer;
    transition: .15s ease;
}

.pipeline-table tbody tr:hover[b-hyhbryg0d6],
.pipeline-table tbody tr.selected[b-hyhbryg0d6] {
    background: #f7faff;
}

.pipeline-table tbody tr.selected td:first-child[b-hyhbryg0d6] {
    box-shadow: inset 3px 0 var(--pipeline-primary);
}

.customer-cell[b-hyhbryg0d6] {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 155px;
}

.customer-avatar[b-hyhbryg0d6] {
    display: grid;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    place-items: center;
    border-radius: 50%;
    color: #2563eb;
    background: #eaf2ff;
    font-size: 9px;
    font-weight: 800;
}

.customer-cell > span:last-child[b-hyhbryg0d6],
.date-cell[b-hyhbryg0d6] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

.customer-cell strong[b-hyhbryg0d6],
.date-cell strong[b-hyhbryg0d6] {
    color: #172033;
    font-size: 11px;
}

.customer-cell small[b-hyhbryg0d6],
.date-cell small[b-hyhbryg0d6] {
    overflow: hidden;
    max-width: 145px;
    color: #98a2b3;
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.date-cell.overdue strong[b-hyhbryg0d6],
.text-danger[b-hyhbryg0d6] {
    color: #dc2626 !important;
}

.phone-link[b-hyhbryg0d6] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #344054;
    text-decoration: none;
    white-space: nowrap;
}

.phone-link i[b-hyhbryg0d6] {
    color: #16a34a;
}

.pipeline-badge[b-hyhbryg0d6],
.customer-status[b-hyhbryg0d6],
.priority-badge[b-hyhbryg0d6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 7px;
    border-radius: 999px;
    font-size: 8px;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}

.customer-status[b-hyhbryg0d6] {
    margin-left: 4px;
}

.badge-prospek[b-hyhbryg0d6] {
    color: #1d4ed8;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
}

.badge-followup[b-hyhbryg0d6] {
    color: #b45309;
    background: #fffbeb;
    border: 1px solid #fde68a;
}

.badge-survey[b-hyhbryg0d6] {
    color: #15803d;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
}

.badge-booking[b-hyhbryg0d6] {
    color: #6d28d9;
    background: #f5f3ff;
    border: 1px solid #ddd6fe;
}

.badge-akad[b-hyhbryg0d6] {
    color: #1d4ed8;
    background: #eef4ff;
    border: 1px solid #c7d7fe;
}

.badge-reject[b-hyhbryg0d6] {
    color: #b91c1c;
    background: #fef2f2;
    border: 1px solid #fecaca;
}

.badge-default[b-hyhbryg0d6],
.status-default[b-hyhbryg0d6] {
    color: #475467;
    background: #f2f4f7;
}

.status-cold[b-hyhbryg0d6] {
    color: #475467;
    background: #f2f4f7;
}

.status-warm[b-hyhbryg0d6] {
    color: #b45309;
    background: #fef3c7;
}

.status-hot[b-hyhbryg0d6] {
    color: #b91c1c;
    background: #fee2e2;
}

.status-closing[b-hyhbryg0d6] {
    color: #15803d;
    background: #dcfce7;
}

.status-cancel[b-hyhbryg0d6] {
    color: #fff;
    background: #667085;
}

.priority-badge[b-hyhbryg0d6] {
    margin-left: 5px;
    color: #7c2d12;
    background: #ffedd5;
}

.row-action[b-hyhbryg0d6] {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border: 0;
    border-radius: 7px;
    color: #667085;
    background: transparent;
}

.row-action:hover[b-hyhbryg0d6] {
    color: var(--pipeline-primary);
    background: var(--pipeline-primary-soft);
}

.action-column[b-hyhbryg0d6] {
    width: 48px;
    text-align: center !important;
}

.pipeline-pagination[b-hyhbryg0d6] {
    display: flex;
    min-height: 58px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border-top: 1px solid #edf0f5;
    color: #667085;
    font-size: 10px;
}

.pipeline-pagination > div[b-hyhbryg0d6] {
    display: flex;
    align-items: center;
    gap: 5px;
}

.pipeline-pagination select[b-hyhbryg0d6] {
    width: 85px;
    margin-right: 4px;
    border-radius: 7px;
    font-size: 10px;
}

.pipeline-pagination button[b-hyhbryg0d6] {
    min-width: 30px;
    height: 30px;
    padding: 0 8px;
    border: 1px solid #e1e6ed;
    border-radius: 7px;
    color: #475467;
    background: #fff;
    font-size: 10px;
}

.pipeline-pagination button.active[b-hyhbryg0d6] {
    border-color: var(--pipeline-primary);
    color: #fff;
    background: var(--pipeline-primary);
}

.pipeline-pagination button:disabled[b-hyhbryg0d6] {
    opacity: .45;
}

.pipeline-detail-card[b-hyhbryg0d6] {
    position: sticky;
    top: 10px;
    display: flex;
    max-height: calc(100vh - 135px);
    flex-direction: column;
}

.detail-header[b-hyhbryg0d6] {
    display: flex;
    min-height: 74px;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    border-bottom: 1px solid #edf0f5;
}

.detail-title-row[b-hyhbryg0d6] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.detail-close[b-hyhbryg0d6] {
    display: grid;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    place-items: center;
    border: 0;
    border-radius: 8px;
    color: #667085;
    background: transparent;
}

.detail-close:hover[b-hyhbryg0d6] {
    background: #f2f4f7;
}

.detail-tabs[b-hyhbryg0d6] {
    display: flex;
    overflow-x: auto;
    min-height: 50px;
    align-items: stretch;
    padding: 0 10px;
    border-bottom: 1px solid #edf0f5;
    scrollbar-width: thin;
}

.detail-tabs button[b-hyhbryg0d6] {
    position: relative;
    display: inline-flex;
    min-width: max-content;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0 10px;
    border: 0;
    color: #667085;
    background: transparent;
    font-size: 9px;
    font-weight: 700;
}

.detail-tabs button[b-hyhbryg0d6]::after {
    content: "";
    position: absolute;
    right: 8px;
    bottom: 0;
    left: 8px;
    height: 2px;
    background: transparent;
}

.detail-tabs button.active[b-hyhbryg0d6] {
    color: var(--pipeline-primary);
}

.detail-tabs button.active[b-hyhbryg0d6]::after {
    background: var(--pipeline-primary);
}

.detail-tabs button span[b-hyhbryg0d6] {
    display: grid;
    min-width: 17px;
    height: 17px;
    place-items: center;
    border-radius: 999px;
    color: #475467;
    background: #f2f4f7;
    font-size: 8px;
}

.detail-body[b-hyhbryg0d6] {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    background: #fbfcfe;
}

.detail-info-grid[b-hyhbryg0d6] {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(150px, .6fr);
    gap: 10px;
}

.detail-section[b-hyhbryg0d6] {
    padding: 13px;
    border: 1px solid #e7ebf1;
    border-radius: 10px;
    background: #fff;
}

.detail-section + .detail-section[b-hyhbryg0d6] {
    margin-top: 10px;
}

.section-title[b-hyhbryg0d6] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 13px;
}

.section-title h3[b-hyhbryg0d6] {
    margin: 0;
    font-size: 12px;
    font-weight: 800;
}

.section-title p[b-hyhbryg0d6] {
    margin: 3px 0 0;
    color: #98a2b3;
    font-size: 9px;
}

.section-title button[b-hyhbryg0d6] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 28px;
    padding: 5px 9px;
    border: 1px solid #dfe4eb;
    border-radius: 7px;
    color: #475467;
    background: #fff;
    font-size: 9px;
    font-weight: 700;
}

.section-title .section-primary-action[b-hyhbryg0d6] {
    border-color: #bfdbfe;
    color: #1d4ed8;
    background: #eff6ff;
}

.customer-info-list[b-hyhbryg0d6] {
    display: grid;
    gap: 9px;
    margin: 0;
}

.customer-info-list.two-column[b-hyhbryg0d6] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.customer-info-list > div[b-hyhbryg0d6] {
    display: grid;
    grid-template-columns: 115px minmax(0, 1fr);
    gap: 8px;
    margin: 0;
}

.customer-info-list.two-column > div[b-hyhbryg0d6] {
    grid-template-columns: 1fr;
    gap: 3px;
    padding: 9px;
    border: 1px solid #edf0f5;
    border-radius: 8px;
}

.customer-info-list.two-column .wide[b-hyhbryg0d6] {
    grid-column: 1 / -1;
}

.customer-info-list dt[b-hyhbryg0d6] {
    color: #667085;
    font-size: 9px;
    font-weight: 600;
}

.customer-info-list dd[b-hyhbryg0d6] {
    min-width: 0;
    margin: 0;
    color: #172033;
    font-size: 10px;
    font-weight: 650;
    overflow-wrap: anywhere;
}

.journey-list[b-hyhbryg0d6] {
    display: flex;
    flex-direction: column;
}

.journey-item[b-hyhbryg0d6] {
    position: relative;
    display: grid;
    grid-template-columns: 23px 1fr;
    gap: 8px;
    min-height: 49px;
}

.journey-item:not(:last-child)[b-hyhbryg0d6]::before {
    content: "";
    position: absolute;
    top: 22px;
    bottom: 0;
    left: 10px;
    width: 1px;
    background: #dfe4eb;
}

.journey-item > span[b-hyhbryg0d6] {
    position: relative;
    z-index: 1;
    display: grid;
    width: 21px;
    height: 21px;
    place-items: center;
    border: 2px solid #cbd5e1;
    border-radius: 50%;
    color: #fff;
    background: #fff;
    font-size: 8px;
}

.journey-item.completed > span[b-hyhbryg0d6] {
    border-color: var(--pipeline-primary);
    background: var(--pipeline-primary);
}

.journey-item.active > span[b-hyhbryg0d6] {
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .1);
}

.journey-item div[b-hyhbryg0d6] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.journey-item strong[b-hyhbryg0d6] {
    font-size: 9px;
}

.journey-item small[b-hyhbryg0d6] {
    color: #98a2b3;
    font-size: 8px;
}

.latest-followup[b-hyhbryg0d6] {
    margin-top: 10px;
}

.followup-card[b-hyhbryg0d6],
.activity-card[b-hyhbryg0d6] {
    display: grid;
    grid-template-columns: 95px minmax(0, 1fr) 105px;
    gap: 12px;
    align-items: start;
    padding: 11px;
    border: 1px solid #e8ecf2;
    border-radius: 9px;
    background: #fcfdff;
}

.followup-date[b-hyhbryg0d6],
.followup-next[b-hyhbryg0d6],
.activity-date[b-hyhbryg0d6],
.activity-next[b-hyhbryg0d6] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.followup-date strong[b-hyhbryg0d6],
.followup-next strong[b-hyhbryg0d6],
.activity-date strong[b-hyhbryg0d6],
.activity-next strong[b-hyhbryg0d6] {
    font-size: 9px;
}

.followup-date small[b-hyhbryg0d6],
.followup-next span[b-hyhbryg0d6],
.activity-date small[b-hyhbryg0d6],
.activity-next span[b-hyhbryg0d6] {
    color: #98a2b3;
    font-size: 8px;
}

.followup-content p[b-hyhbryg0d6],
.activity-main p[b-hyhbryg0d6] {
    margin: 7px 0 4px;
    color: #344054;
    font-size: 10px;
    line-height: 1.5;
}

.followup-content small[b-hyhbryg0d6],
.activity-main small[b-hyhbryg0d6] {
    color: #98a2b3;
    font-size: 8px;
}

.activity-list[b-hyhbryg0d6] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding-left: 13px;
}

.activity-list[b-hyhbryg0d6]::before {
    content: "";
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: 4px;
    width: 1px;
    background: #dfe4eb;
}

.activity-card[b-hyhbryg0d6] {
    position: relative;
}

.activity-dot[b-hyhbryg0d6] {
    position: absolute;
    top: 16px;
    left: -14px;
    width: 9px;
    height: 9px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--pipeline-primary);
    box-shadow: 0 0 0 1px var(--pipeline-primary);
}

.document-grid[b-hyhbryg0d6] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.document-card[b-hyhbryg0d6] {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 9px;
    align-items: center;
    padding: 10px;
    border: 1px solid #e7ebf1;
    border-radius: 9px;
}

.document-icon[b-hyhbryg0d6] {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 8px;
    color: #2563eb;
    background: #eff6ff;
}

.document-card > div[b-hyhbryg0d6] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

.document-card strong[b-hyhbryg0d6] {
    font-size: 9px;
}

.document-card small[b-hyhbryg0d6] {
    color: #667085;
    font-size: 8px;
}

.document-card div span[b-hyhbryg0d6] {
    overflow: hidden;
    color: #98a2b3;
    font-size: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.timeline-list[b-hyhbryg0d6] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.timeline-item[b-hyhbryg0d6] {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
}

.timeline-icon[b-hyhbryg0d6] {
    display: grid;
    width: 31px;
    height: 31px;
    place-items: center;
    border-radius: 50%;
    font-size: 10px;
}

.timeline-item > div[b-hyhbryg0d6] {
    padding-bottom: 12px;
    border-bottom: 1px solid #edf0f5;
}

.timeline-item time[b-hyhbryg0d6] {
    display: block;
    margin-bottom: 2px;
    color: #98a2b3;
    font-size: 8px;
}

.timeline-item strong[b-hyhbryg0d6] {
    font-size: 10px;
}

.timeline-item p[b-hyhbryg0d6] {
    margin: 4px 0;
    color: #475467;
    font-size: 9px;
    line-height: 1.5;
}

.timeline-item footer[b-hyhbryg0d6] {
    display: flex;
    gap: 8px;
    color: #98a2b3;
    font-size: 8px;
}

.reject-notice[b-hyhbryg0d6] {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid #fecaca;
    border-radius: 9px;
    color: #b91c1c;
    background: #fef2f2;
}

.reject-notice i[b-hyhbryg0d6] {
    margin-top: 2px;
}

.reject-notice div[b-hyhbryg0d6] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.reject-notice strong[b-hyhbryg0d6] {
    font-size: 10px;
}

.reject-notice span[b-hyhbryg0d6] {
    font-size: 9px;
}

.detail-empty[b-hyhbryg0d6],
.pipeline-empty[b-hyhbryg0d6] {
    display: flex;
    min-height: 180px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 7px;
    color: #98a2b3;
    text-align: center;
}

.detail-empty i[b-hyhbryg0d6],
.pipeline-empty i[b-hyhbryg0d6] {
    font-size: 27px;
}

.detail-empty strong[b-hyhbryg0d6],
.pipeline-empty strong[b-hyhbryg0d6] {
    color: #475467;
    font-size: 11px;
}

.detail-empty span[b-hyhbryg0d6],
.pipeline-empty span[b-hyhbryg0d6] {
    font-size: 9px;
}

.detail-quick-actions[b-hyhbryg0d6] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
    padding: 10px 12px;
    border-top: 1px solid #edf0f5;
    background: #fff;
}

.quick-action[b-hyhbryg0d6] {
    display: flex;
    min-width: 0;
    min-height: 50px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    border: 1px solid #e1e6ed;
    border-radius: 8px;
    color: #475467;
    background: #fff;
    font-size: 8px;
    font-weight: 700;
}

.quick-action i[b-hyhbryg0d6] {
    color: #2563eb;
    font-size: 14px;
}

.quick-action.whatsapp i[b-hyhbryg0d6] {
    color: #16a34a;
}

.quick-action:disabled[b-hyhbryg0d6] {
    opacity: .4;
    cursor: not-allowed;
}

.pipeline-state-card[b-hyhbryg0d6],
.pipeline-alert[b-hyhbryg0d6] {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 15px;
    border: 1px solid var(--pipeline-border);
    border-radius: 11px;
    background: #fff;
}

.pipeline-state-card div[b-hyhbryg0d6] {
    display: flex;
    flex-direction: column;
}

.pipeline-state-card strong[b-hyhbryg0d6] {
    font-size: 12px;
}

.pipeline-state-card small[b-hyhbryg0d6] {
    color: #667085;
    font-size: 10px;
}

.pipeline-alert[b-hyhbryg0d6] {
    margin-bottom: 12px;
    border-color: #fecaca;
    color: #b91c1c;
    background: #fef2f2;
    font-size: 11px;
}

.pipeline-alert span[b-hyhbryg0d6] {
    flex: 1;
}

.pipeline-alert button[b-hyhbryg0d6] {
    border: 0;
    color: #b91c1c;
    background: transparent;
    font-size: 10px;
    font-weight: 800;
}

.muted[b-hyhbryg0d6] {
    color: #98a2b3;
}

@media (max-width: 1450px) {
    .pipeline-stage-strip[b-hyhbryg0d6] {
        grid-template-columns: repeat(3, 1fr);
    }

    .pipeline-stage-card:nth-child(3)[b-hyhbryg0d6] {
        border-right: 0;
    }

    .pipeline-stage-card:nth-child(-n+3)[b-hyhbryg0d6] {
        border-bottom: 1px solid #edf0f5;
    }

    .pipeline-workspace[b-hyhbryg0d6] {
        grid-template-columns: minmax(520px, 1fr) minmax(400px, .8fr);
    }
}

@media (max-width: 1180px) {
    .pipeline-heading[b-hyhbryg0d6] {
        align-items: stretch;
        flex-direction: column;
    }

    .pipeline-heading-actions[b-hyhbryg0d6] {
        width: 100%;
    }

    .pipeline-search[b-hyhbryg0d6] {
        width: auto;
        flex: 1;
    }

    .pipeline-workspace[b-hyhbryg0d6] {
        grid-template-columns: 1fr;
    }

    .pipeline-detail-card[b-hyhbryg0d6] {
        position: static;
        max-height: none;
    }

    .detail-body[b-hyhbryg0d6] {
        max-height: 680px;
    }
}

@media (max-width: 767.98px) {
    .marketing-pipeline-page[b-hyhbryg0d6] {
        padding: 12px;
    }

    .pipeline-heading-actions[b-hyhbryg0d6],
    .pipeline-filter-bar[b-hyhbryg0d6],
    .pipeline-filter-group[b-hyhbryg0d6] {
        align-items: stretch;
        flex-direction: column;
    }

    .pipeline-heading-actions .pipeline-btn[b-hyhbryg0d6],
    .pipeline-filter-group .pipeline-btn[b-hyhbryg0d6],
    .pipeline-filter-group label[b-hyhbryg0d6] {
        width: 100%;
    }

    .pipeline-stage-strip[b-hyhbryg0d6] {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
    }

    .pipeline-stage-card[b-hyhbryg0d6] {
        min-width: 190px;
        scroll-snap-align: start;
        border-bottom: 0 !important;
        border-right: 1px solid #edf0f5 !important;
    }

    .pipeline-record-info[b-hyhbryg0d6] {
        justify-content: flex-end;
    }

    .pipeline-table-wrap[b-hyhbryg0d6] {
        max-height: 560px;
    }

    .pipeline-pagination[b-hyhbryg0d6] {
        align-items: stretch;
        flex-direction: column;
    }

    .pipeline-pagination > div[b-hyhbryg0d6] {
        overflow-x: auto;
    }

    .detail-info-grid[b-hyhbryg0d6],
    .customer-info-list.two-column[b-hyhbryg0d6],
    .document-grid[b-hyhbryg0d6] {
        grid-template-columns: 1fr;
    }

    .customer-info-list.two-column .wide[b-hyhbryg0d6] {
        grid-column: auto;
    }

    .followup-card[b-hyhbryg0d6],
    .activity-card[b-hyhbryg0d6] {
        grid-template-columns: 1fr;
    }

    .detail-quick-actions[b-hyhbryg0d6] {
        grid-template-columns: repeat(3, 1fr);
    }
}
/* _content/AccountingWeb/Components/Pages/Marketing/ProspekDashboard.razor.rz.scp.css */
/* =========================================================
   PAGE
   ========================================================= */

.prospek-list-page[b-7ugu3u4sgv] {
    width: 100%;
    min-height: 100%;
    padding: 18px;
    background: #f8fafc;
    color: #0f172a;
}

    .prospek-list-page *[b-7ugu3u4sgv],
    .prospek-list-page *[b-7ugu3u4sgv]::before,
    .prospek-list-page *[b-7ugu3u4sgv]::after {
        box-sizing: border-box;
    }


/* =========================================================
   LOADING
   ========================================================= */

.prospek-loading-card[b-7ugu3u4sgv] {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 100px;
    padding: 20px;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 5px 20px rgba(15, 23, 42, 0.06);
}

    .prospek-loading-card > div:last-child[b-7ugu3u4sgv] {
        display: flex;
        flex-direction: column;
    }

    .prospek-loading-card strong[b-7ugu3u4sgv] {
        color: #0f172a;
        font-size: 15px;
    }

    .prospek-loading-card span[b-7ugu3u4sgv] {
        margin-top: 3px;
        color: #64748b;
        font-size: 13px;
    }


/* =========================================================
   PAGE HEADER
   ========================================================= */

.prospek-page-header[b-7ugu3u4sgv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
    padding: 4px 6px;
}

.prospek-page-heading h3[b-7ugu3u4sgv] {
    margin: 0;
    color: #0f172a;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.25;
}

.prospek-page-heading p[b-7ugu3u4sgv] {
    margin: 6px 0 0;
    color: #64748b;
    font-size: 14px;
}

.btn-create-prospek[b-7ugu3u4sgv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 44px;
    padding: 0 18px;
    border: 0;
    border-radius: 9px;
    background: #16a34a;
    box-shadow: 0 6px 16px rgba(22, 163, 74, 0.22);
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: 0.2s ease;
}

    .btn-create-prospek:hover[b-7ugu3u4sgv] {
        background: #15803d;
        box-shadow: 0 9px 20px rgba(22, 163, 74, 0.28);
        transform: translateY(-1px);
    }


/* =========================================================
   FILTER
   ========================================================= */

.prospek-filter-card[b-7ugu3u4sgv] {
    display: grid;
    grid-template-columns: minmax(260px, 1.2fr) repeat(2, minmax(180px, 1fr)) auto;
    align-items: end;
    gap: 18px;
    margin-bottom: 22px;
    padding: 20px 22px;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 6px 22px rgba(15, 23, 42, 0.06);
}

.prospek-filter-title[b-7ugu3u4sgv] {
    display: flex;
    align-items: center;
    gap: 14px;
    align-self: center;
}

.prospek-filter-icon[b-7ugu3u4sgv] {
    display: flex;
    flex: 0 0 48px;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #eff6ff;
    color: #2563eb;
    font-size: 19px;
}

.prospek-filter-title h5[b-7ugu3u4sgv] {
    margin: 0;
    color: #0f172a;
    font-size: 17px;
    font-weight: 800;
}

.prospek-filter-title p[b-7ugu3u4sgv] {
    margin: 4px 0 0;
    color: #64748b;
    font-size: 12px;
}

.prospek-filter-item[b-7ugu3u4sgv] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

    .prospek-filter-item label[b-7ugu3u4sgv] {
        margin: 0;
        color: #1e293b;
        font-size: 12px;
        font-weight: 700;
    }

    .prospek-filter-item .form-control[b-7ugu3u4sgv] {
        width: 100%;
        min-height: 42px;
        border: 1px solid #cbd5e1;
        border-radius: 8px;
        background-color: #ffffff;
        color: #334155;
        font-size: 13px;
    }

        .prospek-filter-item .form-control:focus[b-7ugu3u4sgv] {
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.13);
        }

.prospek-filter-buttons[b-7ugu3u4sgv] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-apply-prospek[b-7ugu3u4sgv],
.btn-reset-prospek[b-7ugu3u4sgv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 42px;
    padding: 0 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: 0.2s ease;
}

.btn-apply-prospek[b-7ugu3u4sgv] {
    border: 1px solid #2563eb;
    background: #2563eb;
    box-shadow: 0 5px 13px rgba(37, 99, 235, 0.19);
    color: #ffffff;
}

    .btn-apply-prospek:hover:not(:disabled)[b-7ugu3u4sgv] {
        border-color: #1d4ed8;
        background: #1d4ed8;
    }

.btn-reset-prospek[b-7ugu3u4sgv] {
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #475569;
}

    .btn-reset-prospek:hover:not(:disabled)[b-7ugu3u4sgv] {
        border-color: #94a3b8;
        background: #f8fafc;
        color: #0f172a;
    }

    .btn-apply-prospek:disabled[b-7ugu3u4sgv],
    .btn-reset-prospek:disabled[b-7ugu3u4sgv] {
        opacity: 0.65;
        cursor: not-allowed;
    }


/* =========================================================
   CHART
   ========================================================= */

.prospek-chart-grid[b-7ugu3u4sgv] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 22px;
}

.prospek-chart-card[b-7ugu3u4sgv] {
    min-width: 0;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 7px 25px rgba(15, 23, 42, 0.06);
}

.prospek-chart-header[b-7ugu3u4sgv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 72px;
    padding: 15px 18px;
    border-bottom: 1px solid #e2e8f0;
}

.prospek-chart-heading[b-7ugu3u4sgv] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.prospek-chart-icon[b-7ugu3u4sgv] {
    display: flex;
    flex: 0 0 42px;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    font-size: 16px;
}

    .prospek-chart-icon.status-icon[b-7ugu3u4sgv] {
        background: #eff6ff;
        color: #2563eb;
    }

    .prospek-chart-icon.source-icon[b-7ugu3u4sgv] {
        background: #f0fdf4;
        color: #16a34a;
    }

.prospek-chart-heading h5[b-7ugu3u4sgv] {
    margin: 0;
    color: #0f172a;
    font-size: 15px;
    font-weight: 800;
}

.prospek-chart-heading span[b-7ugu3u4sgv] {
    display: block;
    margin-top: 3px;
    overflow: hidden;
    color: #64748b;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.prospek-chart-total[b-7ugu3u4sgv] {
    flex: 0 0 auto;
    text-align: right;
}

    .prospek-chart-total span[b-7ugu3u4sgv] {
        display: block;
        color: #94a3b8;
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
    }

    .prospek-chart-total strong[b-7ugu3u4sgv] {
        color: #2563eb;
        font-size: 24px;
        font-weight: 800;
    }

.prospek-chart-body[b-7ugu3u4sgv] {
    padding: 16px 18px 18px;
}

.prospek-chart-canvas[b-7ugu3u4sgv] {
    position: relative;
    width: 100%;
    height: 300px;
}

    .prospek-chart-canvas canvas[b-7ugu3u4sgv] {
        width: 100% !important;
        height: 100% !important;
    }

.prospek-chart-legend[b-7ugu3u4sgv],
.prospek-source-legend[b-7ugu3u4sgv] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 15px;
    padding-top: 14px;
    border-top: 1px solid #eef2f7;
}

.prospek-legend-item[b-7ugu3u4sgv],
.prospek-source-item[b-7ugu3u4sgv] {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 9px;
    min-height: 34px;
    padding: 5px 9px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #ffffff;
    color: #334155;
    font-size: 11px;
    cursor: pointer;
    transition: 0.18s ease;
}

    .prospek-legend-item:hover[b-7ugu3u4sgv],
    .prospek-source-item:hover[b-7ugu3u4sgv] {
        border-color: #bfdbfe;
        background: #eff6ff;
        transform: translateY(-1px);
    }

    .prospek-legend-item strong[b-7ugu3u4sgv],
    .prospek-source-item strong[b-7ugu3u4sgv] {
        color: #2563eb;
        font-size: 12px;
        font-weight: 800;
    }

.prospek-source-name[b-7ugu3u4sgv] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

    .prospek-source-name i[b-7ugu3u4sgv] {
        color: #64748b;
    }


/* =========================================================
   ACTIVE FILTER
   ========================================================= */

.prospek-active-filter[b-7ugu3u4sgv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
    padding: 11px 14px;
    border: 1px solid #bfdbfe;
    border-radius: 10px;
    background: #eff6ff;
    color: #1e40af;
    font-size: 12px;
}

    .prospek-active-filter > div[b-7ugu3u4sgv] {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .prospek-active-filter button[b-7ugu3u4sgv] {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 6px 10px;
        border: 0;
        border-radius: 7px;
        background: #2563eb;
        color: #ffffff;
        font-size: 11px;
        font-weight: 700;
        cursor: pointer;
    }


/* =========================================================
   TABLE CARD
   ========================================================= */

.prospek-table-card[b-7ugu3u4sgv] {
    overflow: hidden;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 7px 25px rgba(15, 23, 42, 0.06);
}

.prospek-table-header[b-7ugu3u4sgv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 68px;
    padding: 14px 18px;
    border-bottom: 1px solid #e2e8f0;
}

.prospek-table-heading[b-7ugu3u4sgv] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.prospek-table-heading-icon[b-7ugu3u4sgv] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #eff6ff;
    color: #2563eb;
    font-size: 15px;
}

.prospek-table-heading h5[b-7ugu3u4sgv] {
    margin: 0;
    color: #0f172a;
    font-size: 15px;
    font-weight: 800;
}

.prospek-table-heading span[b-7ugu3u4sgv] {
    display: block;
    margin-top: 3px;
    color: #64748b;
    font-size: 12px;
}


/* =========================================================
   TABLE
   ========================================================= */

.prospek-table-wrapper[b-7ugu3u4sgv] {
    width: 100%;
    max-height: 650px;
    overflow: auto;
}

.prospek-table[b-7ugu3u4sgv] {
    width: 100%;
    min-width: 1900px;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    color: #334155;
    font-size: 12px;
}

    .prospek-table thead th[b-7ugu3u4sgv] {
        position: sticky;
        top: 0;
        z-index: 5;
        padding: 11px 10px;
        border-right: 1px solid #334155;
        border-bottom: 1px solid #334155;
        background: #10223f;
        color: #ffffff;
        font-size: 11px;
        font-weight: 700;
        vertical-align: middle;
        white-space: nowrap;
    }

        .prospek-table thead th:last-child[b-7ugu3u4sgv] {
            border-right: 0;
        }

    .prospek-table tbody td[b-7ugu3u4sgv] {
        padding: 10px;
        border-right: 1px solid #e2e8f0;
        border-bottom: 1px solid #e2e8f0;
        background: #ffffff;
        color: #334155;
        vertical-align: middle;
    }

        .prospek-table tbody td:last-child[b-7ugu3u4sgv] {
            border-right: 0;
        }

    .prospek-table tbody tr:nth-child(even) td[b-7ugu3u4sgv] {
        background: #fbfdff;
    }

    .prospek-table tbody tr:hover td[b-7ugu3u4sgv] {
        background: #eff6ff;
    }

.column-number[b-7ugu3u4sgv] {
    width: 48px;
    min-width: 48px;
    text-align: center;
}

.prospek-project[b-7ugu3u4sgv] {
    color: #475569;
    font-weight: 600;
}

.prospek-customer[b-7ugu3u4sgv] {
    color: #1e293b;
    font-weight: 700;
}

.prospek-description[b-7ugu3u4sgv] {
    min-width: 220px;
    max-width: 350px;
    white-space: normal;
}

.prospek-empty-value[b-7ugu3u4sgv] {
    color: #94a3b8;
}


/* =========================================================
   WHATSAPP
   ========================================================= */

.prospek-whatsapp[b-7ugu3u4sgv] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #16a34a;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

    .prospek-whatsapp:hover[b-7ugu3u4sgv] {
        color: #15803d;
        text-decoration: underline;
    }


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

.prospect-status-badge[b-7ugu3u4sgv] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 68px;
    padding: 5px 9px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}

.status-cold[b-7ugu3u4sgv] {
    background: #dbeafe;
    color: #2563eb;
}

.status-warm[b-7ugu3u4sgv] {
    background: #fef3c7;
    color: #b45309;
}

.status-hot[b-7ugu3u4sgv] {
    background: #fee2e2;
    color: #dc2626;
}

.status-closing[b-7ugu3u4sgv] {
    background: #dcfce7;
    color: #15803d;
}

.status-cancel[b-7ugu3u4sgv] {
    background: #f1f5f9;
    color: #64748b;
}

.status-empty[b-7ugu3u4sgv] {
    background: #f1f5f9;
    color: #64748b;
}

.status-default[b-7ugu3u4sgv] {
    background: #ede9fe;
    color: #6d28d9;
}


/* =========================================================
   SOURCE AND OTHER VALUES
   ========================================================= */

.prospek-source-value[b-7ugu3u4sgv] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #334155;
    font-weight: 600;
    white-space: nowrap;
}

    .prospek-source-value i[b-7ugu3u4sgv] {
        color: #64748b;
    }

.prospek-content-code[b-7ugu3u4sgv] {
    display: inline-flex;
    padding: 4px 8px;
    border-radius: 6px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 11px;
    font-weight: 700;
}

.prospek-survey-date[b-7ugu3u4sgv] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #16a34a;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}


/* =========================================================
   PAGINATION
   ========================================================= */

.prospek-table-footer[b-7ugu3u4sgv] {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: center;
    gap: 18px;
    min-height: 66px;
    padding: 13px 16px;
    border-top: 1px solid #e2e8f0;
    background: #ffffff;
}

.prospek-pagination-info[b-7ugu3u4sgv] {
    color: #64748b;
    font-size: 11px;
    white-space: nowrap;
}

    .prospek-pagination-info strong[b-7ugu3u4sgv] {
        color: #334155;
    }

.prospek-page-size[b-7ugu3u4sgv] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #64748b;
    font-size: 11px;
    white-space: nowrap;
}

    .prospek-page-size .form-select[b-7ugu3u4sgv] {
        width: 65px;
        min-height: 34px;
        border-radius: 6px;
        font-size: 11px;
    }

.prospek-pagination-nav[b-7ugu3u4sgv] {
    justify-self: end;
}

    .prospek-pagination-nav .pagination[b-7ugu3u4sgv] {
        gap: 4px;
        margin: 0;
    }

    .prospek-pagination-nav .page-link[b-7ugu3u4sgv] {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 34px;
        height: 34px;
        padding: 0 8px;
        border: 1px solid #dbe3ef;
        border-radius: 6px;
        background: #ffffff;
        color: #64748b;
        font-size: 11px;
        cursor: pointer;
    }

        .prospek-pagination-nav .page-link:hover[b-7ugu3u4sgv] {
            border-color: #93c5fd;
            background: #eff6ff;
            color: #2563eb;
        }

    .prospek-pagination-nav .page-item.active .page-link[b-7ugu3u4sgv] {
        border-color: #2563eb;
        background: #2563eb;
        box-shadow: 0 4px 10px rgba(37, 99, 235, 0.2);
        color: #ffffff;
    }

    .prospek-pagination-nav .page-item.disabled .page-link[b-7ugu3u4sgv] {
        opacity: 0.45;
        pointer-events: none;
    }


/* =========================================================
   EMPTY STATE
   ========================================================= */

.prospek-empty-state[b-7ugu3u4sgv] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    min-height: 270px;
    padding: 30px;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 7px 25px rgba(15, 23, 42, 0.05);
    text-align: center;
}

.prospek-empty-icon[b-7ugu3u4sgv] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    margin-bottom: 15px;
    border-radius: 50%;
    background: #eff6ff;
    color: #3b82f6;
    font-size: 27px;
}

.prospek-empty-state h5[b-7ugu3u4sgv] {
    margin: 0;
    color: #0f172a;
    font-size: 17px;
    font-weight: 800;
}

.prospek-empty-state p[b-7ugu3u4sgv] {
    max-width: 380px;
    margin: 7px 0 0;
    color: #64748b;
    font-size: 13px;
}


/* =========================================================
   RESPONSIVE TABLET
   ========================================================= */

@media (max-width: 1200px) {
    .prospek-filter-card[b-7ugu3u4sgv] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .prospek-filter-title[b-7ugu3u4sgv],
    .prospek-filter-buttons[b-7ugu3u4sgv] {
        grid-column: 1 / -1;
    }

    .prospek-filter-buttons[b-7ugu3u4sgv] {
        justify-content: flex-end;
    }

    .prospek-chart-grid[b-7ugu3u4sgv] {
        grid-template-columns: 1fr;
    }

    .prospek-table-footer[b-7ugu3u4sgv] {
        grid-template-columns: 1fr auto;
    }

    .prospek-pagination-nav[b-7ugu3u4sgv] {
        grid-column: 1 / -1;
        justify-self: end;
    }
}


/* =========================================================
   RESPONSIVE MOBILE
   ========================================================= */

@media (max-width: 576px) {
    .prospek-list-page[b-7ugu3u4sgv] {
        padding: 10px;
    }

    .prospek-page-header[b-7ugu3u4sgv] {
        align-items: stretch;
        flex-direction: column;
        padding: 3px 2px;
    }

    .prospek-page-heading h3[b-7ugu3u4sgv] {
        font-size: 21px;
    }

    .prospek-page-heading p[b-7ugu3u4sgv] {
        font-size: 12px;
    }

    .btn-create-prospek[b-7ugu3u4sgv] {
        width: 100%;
    }

    .prospek-filter-card[b-7ugu3u4sgv] {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 16px;
    }

    .prospek-filter-title[b-7ugu3u4sgv],
    .prospek-filter-buttons[b-7ugu3u4sgv] {
        grid-column: auto;
    }

    .prospek-filter-buttons[b-7ugu3u4sgv] {
        align-items: stretch;
        flex-direction: column;
    }

    .btn-apply-prospek[b-7ugu3u4sgv],
    .btn-reset-prospek[b-7ugu3u4sgv] {
        width: 100%;
    }

    .prospek-chart-header[b-7ugu3u4sgv] {
        align-items: flex-start;
    }

    .prospek-chart-heading span[b-7ugu3u4sgv] {
        white-space: normal;
    }

    .prospek-chart-canvas[b-7ugu3u4sgv] {
        height: 250px;
    }

    .prospek-active-filter[b-7ugu3u4sgv] {
        align-items: stretch;
        flex-direction: column;
    }

        .prospek-active-filter button[b-7ugu3u4sgv] {
            justify-content: center;
            width: 100%;
        }

    .prospek-table-wrapper[b-7ugu3u4sgv] {
        max-height: 560px;
    }

    .prospek-table-footer[b-7ugu3u4sgv] {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .prospek-pagination-info[b-7ugu3u4sgv] {
        text-align: center;
    }

    .prospek-page-size[b-7ugu3u4sgv] {
        justify-content: center;
    }

    .prospek-pagination-nav[b-7ugu3u4sgv] {
        grid-column: auto;
        justify-self: center;
        max-width: 100%;
        overflow-x: auto;
    }
}
/* _content/AccountingWeb/Components/Pages/Marketing/ProspekFUList.razor.rz.scp.css */
/* =========================================================
   PAGE
   ========================================================= */

.prospek-fu-page[b-swmhra9eir] {
    width: 100%;
    padding: 18px;
    color: #0f172a;
    background: #f8fafc;
}

    .prospek-fu-page *[b-swmhra9eir],
    .prospek-fu-page *[b-swmhra9eir]::before,
    .prospek-fu-page *[b-swmhra9eir]::after {
        box-sizing: border-box;
    }


/* =========================================================
   LOADING
   ========================================================= */

.fu-loading-card[b-swmhra9eir] {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 100px;
    padding: 20px;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 5px 20px rgba(15, 23, 42, 0.06);
}

    .fu-loading-card div:last-child[b-swmhra9eir] {
        display: flex;
        flex-direction: column;
    }

    .fu-loading-card strong[b-swmhra9eir] {
        color: #0f172a;
        font-size: 15px;
    }

    .fu-loading-card span[b-swmhra9eir] {
        margin-top: 3px;
        color: #64748b;
        font-size: 13px;
    }


/* =========================================================
   PAGE HEADER
   ========================================================= */

.fu-page-header[b-swmhra9eir] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
    padding: 4px 6px;
}

.fu-page-heading h3[b-swmhra9eir] {
    margin: 0;
    color: #0f172a;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.25;
}

.fu-page-heading p[b-swmhra9eir] {
    margin: 6px 0 0;
    color: #64748b;
    font-size: 14px;
}

.btn-create-followup[b-swmhra9eir] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 44px;
    padding: 0 18px;
    border: 0;
    border-radius: 9px;
    background: #16a34a;
    box-shadow: 0 6px 16px rgba(22, 163, 74, 0.22);
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

    .btn-create-followup:hover[b-swmhra9eir] {
        background: #15803d;
        box-shadow: 0 9px 20px rgba(22, 163, 74, 0.28);
        transform: translateY(-1px);
    }

    .btn-create-followup:active[b-swmhra9eir] {
        transform: translateY(0);
    }


/* =========================================================
   SUMMARY
   ========================================================= */

.fu-summary-section[b-swmhra9eir] {
    display: grid;
    grid-template-columns: minmax(360px, 690px);
    margin-bottom: 20px;
}

.fu-summary-card[b-swmhra9eir] {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(180px, 1fr) 1px minmax(150px, auto);
    align-items: center;
    gap: 24px;
    width: 100%;
    min-height: 118px;
    padding: 19px 24px;
    overflow: hidden;
    border: 1.5px solid #3b82f6;
    border-radius: 13px;
    background: linear-gradient( 135deg, #ffffff 0%, #f8fbff 55%, #eff6ff 100% );
    box-shadow: 0 8px 25px rgba(37, 99, 235, 0.09);
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

    .fu-summary-card[b-swmhra9eir]::before {
        position: absolute;
        top: 0;
        right: 0;
        width: 180px;
        height: 180px;
        border-radius: 50%;
        background: rgba(59, 130, 246, 0.05);
        content: "";
        transform: translate(45%, -55%);
    }

    .fu-summary-card:hover[b-swmhra9eir] {
        border-color: #2563eb;
        box-shadow: 0 13px 30px rgba(37, 99, 235, 0.16);
        transform: translateY(-2px);
    }

    .fu-summary-card.active[b-swmhra9eir] {
        border-color: #2563eb;
        background: linear-gradient( 135deg, #eff6ff 0%, #dbeafe 100% );
        box-shadow: 0 13px 30px rgba(37, 99, 235, 0.19);
    }

.fu-summary-icon[b-swmhra9eir] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6, #1684f8);
    box-shadow: 0 9px 22px rgba(37, 99, 235, 0.25);
    color: #ffffff;
    font-size: 27px;
}

.fu-summary-content[b-swmhra9eir] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.fu-summary-label[b-swmhra9eir] {
    margin-bottom: 3px;
    color: #2563eb;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.35px;
}

.fu-summary-value[b-swmhra9eir] {
    color: #2563eb;
    font-size: 42px;
    font-weight: 800;
    line-height: 1;
}

.fu-summary-description[b-swmhra9eir] {
    margin-top: 6px;
    color: #475569;
    font-size: 13px;
}

.fu-summary-divider[b-swmhra9eir] {
    width: 1px;
    height: 64px;
    background: #bfdbfe;
}

.fu-summary-action[b-swmhra9eir] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    color: #2563eb;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.fu-summary-arrow[b-swmhra9eir] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid #dbeafe;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}

.fu-summary-active-text[b-swmhra9eir] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border-radius: 20px;
    background: #2563eb;
    color: #ffffff;
}


/* =========================================================
   MAIN FILTER
   ========================================================= */

.fu-filter-card[b-swmhra9eir] {
    display: grid;
    grid-template-columns: minmax(270px, 1.2fr) repeat(3, minmax(170px, 1fr)) auto;
    align-items: end;
    gap: 18px;
    margin-bottom: 22px;
    padding: 20px 22px;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 6px 22px rgba(15, 23, 42, 0.06);
}

.fu-filter-title-area[b-swmhra9eir] {
    display: flex;
    align-items: center;
    gap: 14px;
    align-self: center;
}

.fu-filter-icon[b-swmhra9eir] {
    display: flex;
    flex: 0 0 48px;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #eff6ff;
    color: #2563eb;
    font-size: 19px;
}

.fu-filter-title-area h5[b-swmhra9eir] {
    margin: 0;
    color: #0f172a;
    font-size: 17px;
    font-weight: 800;
}

.fu-filter-title-area p[b-swmhra9eir] {
    margin: 4px 0 0;
    color: #64748b;
    font-size: 12px;
}

.fu-filter-item[b-swmhra9eir] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

    .fu-filter-item label[b-swmhra9eir] {
        margin: 0;
        color: #1e293b;
        font-size: 12px;
        font-weight: 700;
    }

    .fu-filter-item .form-select[b-swmhra9eir] {
        width: 100%;
        min-height: 42px;
        border: 1px solid #cbd5e1;
        border-radius: 8px;
        background-color: #ffffff;
        color: #334155;
        font-size: 13px;
    }

        .fu-filter-item .form-select:focus[b-swmhra9eir] {
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.13);
        }

.fu-filter-buttons[b-swmhra9eir] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-apply-filter[b-swmhra9eir],
.btn-reset-filter[b-swmhra9eir] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 42px;
    padding: 0 16px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: 0.2s ease;
}

.btn-apply-filter[b-swmhra9eir] {
    border: 1px solid #2563eb;
    background: #2563eb;
    box-shadow: 0 5px 13px rgba(37, 99, 235, 0.19);
    color: #ffffff;
}

    .btn-apply-filter:hover[b-swmhra9eir] {
        border-color: #1d4ed8;
        background: #1d4ed8;
    }

.btn-reset-filter[b-swmhra9eir] {
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #475569;
}

    .btn-reset-filter:hover[b-swmhra9eir] {
        border-color: #94a3b8;
        background: #f8fafc;
        color: #0f172a;
    }


/* =========================================================
   TABLE CARD
   ========================================================= */

.fu-table-card[b-swmhra9eir] {
    overflow: hidden;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 7px 25px rgba(15, 23, 42, 0.06);
}

.fu-table-card-header[b-swmhra9eir] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 68px;
    padding: 14px 18px;
    border-bottom: 1px solid #e2e8f0;
}

.fu-table-heading[b-swmhra9eir] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.fu-table-heading-icon[b-swmhra9eir] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #eff6ff;
    color: #2563eb;
    font-size: 15px;
}

.fu-table-heading h5[b-swmhra9eir] {
    margin: 0;
    color: #0f172a;
    font-size: 15px;
    font-weight: 800;
}

.fu-table-heading span[b-swmhra9eir] {
    display: block;
    margin-top: 3px;
    color: #64748b;
    font-size: 12px;
}

.active-survey-filter[b-swmhra9eir] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 0 13px;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    background: #eff6ff;
    color: #2563eb;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

    .active-survey-filter:hover[b-swmhra9eir] {
        border-color: #93c5fd;
        background: #dbeafe;
    }


/* =========================================================
   TABLE
   ========================================================= */

.fu-table-wrapper[b-swmhra9eir] {
    width: 100%;
    max-height: 650px;
    overflow: auto;
}

.fu-table[b-swmhra9eir] {
    width: 100%;
    min-width: 1500px;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    color: #334155;
    font-size: 12px;
}

    .fu-table thead tr:first-child th[b-swmhra9eir] {
        position: sticky;
        top: 0;
        z-index: 5;
        min-height: 42px;
        padding: 11px 10px;
        border-right: 1px solid #334155;
        border-bottom: 1px solid #334155;
        background: #10223f;
        color: #ffffff;
        font-size: 11px;
        font-weight: 700;
        vertical-align: middle;
        white-space: nowrap;
    }

        .fu-table thead tr:first-child th:last-child[b-swmhra9eir] {
            border-right: 0;
        }

.fu-column-filter-row th[b-swmhra9eir] {
    position: sticky;
    top: 39px;
    z-index: 4;
    padding: 7px;
    border-right: 1px solid #cbd5e1;
    border-bottom: 1px solid #cbd5e1;
    background: #f8fafc;
    vertical-align: middle;
}

    .fu-column-filter-row th:last-child[b-swmhra9eir] {
        border-right: 0;
    }

.fu-column-filter-row .form-control[b-swmhra9eir],
.fu-column-filter-row .form-select[b-swmhra9eir] {
    min-height: 31px;
    border: 1px solid #cbd5e1;
    border-radius: 5px;
    background-color: #ffffff;
    color: #334155;
    font-size: 11px;
}

    .fu-column-filter-row .form-control:focus[b-swmhra9eir],
    .fu-column-filter-row .form-select:focus[b-swmhra9eir] {
        border-color: #3b82f6;
        box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.12);
    }

.fu-table tbody td[b-swmhra9eir] {
    padding: 10px;
    border-right: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
    background: #ffffff;
    color: #334155;
    vertical-align: middle;
}

    .fu-table tbody td:last-child[b-swmhra9eir] {
        border-right: 0;
    }

.fu-table tbody tr:nth-child(even) td[b-swmhra9eir] {
    background: #fbfdff;
}

.fu-table tbody tr:hover td[b-swmhra9eir] {
    background: #eff6ff;
}

.fu-table tbody tr.row-has-survey td[b-swmhra9eir] {
    background: #fbfefc;
}

.fu-table tbody tr.row-has-survey:hover td[b-swmhra9eir] {
    background: #f0fdf4;
}

.column-number[b-swmhra9eir] {
    width: 48px;
    min-width: 48px;
    text-align: center;
}

.customer-name[b-swmhra9eir] {
    color: #1e293b;
    font-weight: 700;
}

.fu-description-cell[b-swmhra9eir] {
    min-width: 250px;
    max-width: 360px;
    white-space: normal;
}

.empty-value[b-swmhra9eir] {
    color: #94a3b8;
}


/* =========================================================
   WHATSAPP
   ========================================================= */

.whatsapp-link[b-swmhra9eir] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #16a34a;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

    .whatsapp-link:hover[b-swmhra9eir] {
        color: #15803d;
        text-decoration: underline;
    }


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

.fu-status-badge[b-swmhra9eir] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 65px;
    padding: 5px 9px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}

.status-cold[b-swmhra9eir] {
    background: #e8eef7;
    color: #29466e;
}

.status-warm[b-swmhra9eir] {
    background: #fff3dc;
    color: #d97706;
}

.status-hot[b-swmhra9eir] {
    background: #fee2e2;
    color: #ef4444;
}

.status-closing[b-swmhra9eir] {
    background: #dcfce7;
    color: #15803d;
}

.status-cancel[b-swmhra9eir] {
    background: #f1f5f9;
    color: #64748b;
}

.status-default[b-swmhra9eir] {
    background: #ede9fe;
    color: #6d28d9;
}


/* =========================================================
   SURVEY
   ========================================================= */

.survey-date-value[b-swmhra9eir] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #16a34a;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.survey-status-value[b-swmhra9eir] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #16a34a;
    font-size: 11px;
    font-weight: 700;
}

.priority-value[b-swmhra9eir] {
    color: #475569;
    font-size: 11px;
    font-weight: 600;
}


/* =========================================================
   PHOTO
   ========================================================= */

.btn-photo-preview[b-swmhra9eir] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 2px;
    overflow: hidden;
    border: 1px solid #cbd5e1;
    border-radius: 5px;
    background: #ffffff;
    cursor: pointer;
    transition: 0.2s ease;
}

    .btn-photo-preview:hover[b-swmhra9eir] {
        border-color: #3b82f6;
        box-shadow: 0 4px 12px rgba(37, 99, 235, 0.17);
        transform: scale(1.05);
    }

    .btn-photo-preview img[b-swmhra9eir] {
        width: 100%;
        height: 100%;
        border-radius: 3px;
        object-fit: cover;
    }

.photo-count[b-swmhra9eir] {
    position: absolute;
    right: -1px;
    bottom: -1px;
    min-width: 17px;
    height: 17px;
    padding: 0 3px;
    border-radius: 8px;
    background: #2563eb;
    color: #ffffff;
    font-size: 9px;
    font-weight: 800;
    line-height: 17px;
    text-align: center;
}

.empty-photo[b-swmhra9eir] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px dashed #cbd5e1;
    border-radius: 5px;
    color: #94a3b8;
    font-size: 15px;
}


/* =========================================================
   TABLE FOOTER AND PAGINATION
   ========================================================= */

.fu-table-footer[b-swmhra9eir] {
    display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: center;
    gap: 18px;
    min-height: 66px;
    padding: 13px 16px;
    border-top: 1px solid #e2e8f0;
    background: #ffffff;
}

.fu-pagination-info[b-swmhra9eir] {
    color: #64748b;
    font-size: 11px;
    white-space: nowrap;
}

    .fu-pagination-info strong[b-swmhra9eir] {
        color: #334155;
    }

.fu-page-size[b-swmhra9eir] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #64748b;
    font-size: 11px;
    white-space: nowrap;
}

    .fu-page-size .form-select[b-swmhra9eir] {
        width: 65px;
        min-height: 34px;
        border-radius: 6px;
        font-size: 11px;
    }

.fu-pagination-nav[b-swmhra9eir] {
    justify-self: end;
}

    .fu-pagination-nav .pagination[b-swmhra9eir] {
        gap: 4px;
        margin: 0;
    }

    .fu-pagination-nav .page-link[b-swmhra9eir] {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 34px;
        height: 34px;
        padding: 0 8px;
        border: 1px solid #dbe3ef;
        border-radius: 6px;
        background: #ffffff;
        color: #64748b;
        font-size: 11px;
        cursor: pointer;
    }

        .fu-pagination-nav .page-link:hover[b-swmhra9eir] {
            border-color: #93c5fd;
            background: #eff6ff;
            color: #2563eb;
        }

    .fu-pagination-nav .page-item.active .page-link[b-swmhra9eir] {
        border-color: #2563eb;
        background: #2563eb;
        box-shadow: 0 4px 10px rgba(37, 99, 235, 0.2);
        color: #ffffff;
    }

    .fu-pagination-nav .page-item.disabled .page-link[b-swmhra9eir] {
        opacity: 0.45;
        pointer-events: none;
    }


/* =========================================================
   EMPTY STATE
   ========================================================= */

.fu-empty-state[b-swmhra9eir] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    min-height: 300px;
    padding: 30px;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 7px 25px rgba(15, 23, 42, 0.05);
    text-align: center;
}

.fu-empty-icon[b-swmhra9eir] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    margin-bottom: 15px;
    border-radius: 50%;
    background: #eff6ff;
    color: #3b82f6;
    font-size: 27px;
}

.fu-empty-state h5[b-swmhra9eir] {
    margin: 0;
    color: #0f172a;
    font-size: 17px;
    font-weight: 800;
}

.fu-empty-state p[b-swmhra9eir] {
    max-width: 360px;
    margin: 7px 0 0;
    color: #64748b;
    font-size: 13px;
}


/* =========================================================
   MODAL
   ========================================================= */

.fu-preview-modal[b-swmhra9eir] {
    overflow-y: auto;
    background: rgba(15, 23, 42, 0.85);
}

    .fu-preview-modal .modal-content[b-swmhra9eir] {
        overflow: hidden;
        border: 0;
        border-radius: 14px;
        background: #0f172a;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    }

    .fu-preview-modal .modal-header[b-swmhra9eir] {
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
        color: #ffffff;
    }

        .fu-preview-modal .modal-header small[b-swmhra9eir] {
            color: #94a3b8;
        }

    .fu-preview-modal .modal-body[b-swmhra9eir] {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 300px;
        padding: 20px;
        text-align: center;
    }

.fu-modal-image[b-swmhra9eir] {
    max-width: 100%;
    max-height: 72vh;
    border-radius: 8px;
    object-fit: contain;
    touch-action: pan-y;
}

.fu-preview-modal .modal-footer[b-swmhra9eir] {
    justify-content: space-between;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.fu-modal-counter[b-swmhra9eir] {
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
}


/* =========================================================
   RESPONSIVE TABLET
   ========================================================= */

@media (max-width: 1350px) {
    .fu-filter-card[b-swmhra9eir] {
        grid-template-columns: minmax(250px, 1fr) repeat(3, minmax(160px, 1fr));
    }

    .fu-filter-buttons[b-swmhra9eir] {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }
}

@media (max-width: 992px) {
    .prospek-fu-page[b-swmhra9eir] {
        padding: 14px;
    }

    .fu-summary-section[b-swmhra9eir] {
        grid-template-columns: 1fr;
    }

    .fu-filter-card[b-swmhra9eir] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .fu-filter-title-area[b-swmhra9eir] {
        grid-column: 1 / -1;
    }

    .fu-filter-buttons[b-swmhra9eir] {
        grid-column: 1 / -1;
    }

    .fu-table-footer[b-swmhra9eir] {
        grid-template-columns: 1fr auto;
    }

    .fu-pagination-nav[b-swmhra9eir] {
        grid-column: 1 / -1;
        justify-self: end;
    }
}


/* =========================================================
   RESPONSIVE MOBILE
   ========================================================= */

@media (max-width: 576px) {
    .prospek-fu-page[b-swmhra9eir] {
        padding: 10px;
    }

    .fu-page-header[b-swmhra9eir] {
        align-items: stretch;
        flex-direction: column;
        padding: 3px 2px;
    }

    .fu-page-heading h3[b-swmhra9eir] {
        font-size: 21px;
    }

    .fu-page-heading p[b-swmhra9eir] {
        font-size: 12px;
    }

    .btn-create-followup[b-swmhra9eir] {
        width: 100%;
    }

    .fu-summary-card[b-swmhra9eir] {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 14px;
        padding: 16px;
    }

    .fu-summary-icon[b-swmhra9eir] {
        width: 54px;
        height: 54px;
        font-size: 22px;
    }

    .fu-summary-value[b-swmhra9eir] {
        font-size: 34px;
    }

    .fu-summary-description[b-swmhra9eir] {
        font-size: 11px;
    }

    .fu-summary-divider[b-swmhra9eir] {
        display: none;
    }

    .fu-summary-action[b-swmhra9eir] {
        grid-column: 1 / -1;
        justify-content: flex-start;
        padding-top: 12px;
        border-top: 1px solid #dbeafe;
    }

    .fu-filter-card[b-swmhra9eir] {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 16px;
    }

    .fu-filter-title-area[b-swmhra9eir],
    .fu-filter-buttons[b-swmhra9eir] {
        grid-column: auto;
    }

    .fu-filter-buttons[b-swmhra9eir] {
        align-items: stretch;
        flex-direction: column;
    }

    .btn-apply-filter[b-swmhra9eir],
    .btn-reset-filter[b-swmhra9eir] {
        width: 100%;
    }

    .fu-table-card-header[b-swmhra9eir] {
        align-items: stretch;
        flex-direction: column;
    }

    .active-survey-filter[b-swmhra9eir] {
        justify-content: center;
        width: 100%;
    }

    .fu-table-wrapper[b-swmhra9eir] {
        max-height: 560px;
    }

    .fu-table-footer[b-swmhra9eir] {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .fu-pagination-info[b-swmhra9eir] {
        text-align: center;
    }

    .fu-page-size[b-swmhra9eir] {
        justify-content: center;
    }

    .fu-pagination-nav[b-swmhra9eir] {
        grid-column: auto;
        justify-self: center;
    }

        .fu-pagination-nav .page-link[b-swmhra9eir] {
            min-width: 32px;
            height: 32px;
        }
}
/* _content/AccountingWeb/Components/Pages/Master/DaftarAsset.razor.rz.scp.css */
.asset-page[b-49ke7n4zpf] {
    width: 100%;
    min-height: 100vh;
    padding: 24px;
    background: #f6f8fc;
    box-sizing: border-box;
    color: #172033;
    font-family: Inter, Arial, sans-serif;
}

.asset-header[b-49ke7n4zpf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 22px;
}

    .asset-header h1[b-49ke7n4zpf] {
        margin: 0;
        font-size: 28px;
        font-weight: 750;
        color: #172033;
    }

    .asset-header p[b-49ke7n4zpf] {
        margin: 6px 0 0;
        font-size: 14px;
        color: #768198;
    }

.btn-add-asset[b-49ke7n4zpf] {
    min-height: 44px;
    padding: 0 18px;
    border: 0;
    border-radius: 10px;
    background: #2563eb;
    color: #fff;
    font-size: 14px;
    font-weight: 650;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    cursor: pointer;
    transition: 0.2s ease;
}

    .btn-add-asset:hover[b-49ke7n4zpf] {
        background: #1d4ed8;
        transform: translateY(-1px);
    }

    .btn-add-asset:disabled[b-49ke7n4zpf] {
        opacity: 0.65;
        cursor: not-allowed;
        transform: none;
    }

.page-alert[b-49ke7n4zpf] {
    margin-bottom: 16px;
    padding: 13px 15px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}

    .page-alert span[b-49ke7n4zpf] {
        flex: 1;
    }

    .page-alert button[b-49ke7n4zpf] {
        width: 30px;
        height: 30px;
        padding: 0;
        border: 0;
        border-radius: 7px;
        background: transparent;
        color: inherit;
        cursor: pointer;
    }

    .page-alert.success[b-49ke7n4zpf] {
        border: 1px solid #bbf7d0;
        background: #f0fdf4;
        color: #15803d;
    }

    .page-alert.error[b-49ke7n4zpf] {
        border: 1px solid #fecaca;
        background: #fef2f2;
        color: #b91c1c;
    }

.asset-summary-grid[b-49ke7n4zpf] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 18px;
}

.asset-summary-card[b-49ke7n4zpf] {
    min-height: 104px;
    padding: 20px;
    border: 1px solid #e3e8f1;
    border-radius: 14px;
    background: #fff;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.04);
}

.summary-icon[b-49ke7n4zpf] {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 12px;
    background: #eff6ff;
    color: #2563eb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.asset-summary-card span[b-49ke7n4zpf] {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    color: #7a8498;
}

.asset-summary-card strong[b-49ke7n4zpf] {
    display: block;
    font-size: 21px;
    font-weight: 750;
    color: #172033;
}

.asset-card[b-49ke7n4zpf] {
    overflow: hidden;
    border: 1px solid #e2e7ef;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 5px 22px rgba(15, 23, 42, 0.05);
}

.asset-toolbar[b-49ke7n4zpf] {
    min-height: 76px;
    padding: 16px 18px;
    border-bottom: 1px solid #edf0f5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.asset-search[b-49ke7n4zpf] {
    width: 380px;
    max-width: 100%;
    height: 42px;
    padding: 0 13px;
    border: 1px solid #d8deea;
    border-radius: 9px;
    background: #fff;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #98a2b4;
    box-sizing: border-box;
}

    .asset-search:focus-within[b-49ke7n4zpf] {
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
    }

    .asset-search input[b-49ke7n4zpf] {
        width: 100%;
        height: 100%;
        border: 0;
        outline: none;
        background: transparent;
        color: #172033;
        font-size: 14px;
    }

        .asset-search input[b-49ke7n4zpf]::placeholder {
            color: #a3acbb;
        }

.asset-count[b-49ke7n4zpf] {
    font-size: 13px;
    color: #7b8496;
}

.asset-table-wrapper[b-49ke7n4zpf] {
    width: 100%;
    overflow-x: auto;
}

.asset-table[b-49ke7n4zpf] {
    width: 100%;
    min-width: 780px;
    border-collapse: collapse;
}

    .asset-table th[b-49ke7n4zpf] {
        padding: 15px 18px;
        border-bottom: 1px solid #e7ebf2;
        background: #f8fafc;
        color: #657086;
        font-size: 12px;
        font-weight: 700;
        text-align: left;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .asset-table td[b-49ke7n4zpf] {
        padding: 15px 18px;
        border-bottom: 1px solid #edf0f5;
        color: #344054;
        font-size: 14px;
        vertical-align: middle;
    }

    .asset-table tbody tr[b-49ke7n4zpf] {
        transition: background 0.18s ease;
    }

        .asset-table tbody tr:hover[b-49ke7n4zpf] {
            background: #fafcff;
        }

        .asset-table tbody tr:last-child td[b-49ke7n4zpf] {
            border-bottom: 0;
        }

.number-column[b-49ke7n4zpf] {
    width: 70px;
    text-align: center !important;
}

.year-column[b-49ke7n4zpf] {
    width: 180px;
}

.price-column[b-49ke7n4zpf] {
    width: 210px;
}

.action-column[b-49ke7n4zpf] {
    width: 120px;
    text-align: center !important;
}

.asset-name[b-49ke7n4zpf] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 650;
    color: #172033;
}

.asset-avatar[b-49ke7n4zpf] {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 10px;
    background: #f1f5f9;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
}

.asset-year[b-49ke7n4zpf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 66px;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 20px;
    background: #eef2ff;
    color: #4f46e5;
    font-size: 12px;
    font-weight: 700;
}

.asset-actions[b-49ke7n4zpf] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
}

.btn-action[b-49ke7n4zpf] {
    width: 35px;
    height: 35px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 8px;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.18s ease;
}

    .btn-action.edit[b-49ke7n4zpf] {
        border-color: #bfdbfe;
        background: #eff6ff;
        color: #2563eb;
    }

        .btn-action.edit:hover[b-49ke7n4zpf] {
            background: #2563eb;
            color: #fff;
        }

    .btn-action.delete[b-49ke7n4zpf] {
        border-color: #fecaca;
        background: #fef2f2;
        color: #dc2626;
    }

        .btn-action.delete:hover[b-49ke7n4zpf] {
            background: #dc2626;
            color: #fff;
        }

.asset-loading[b-49ke7n4zpf],
.asset-empty[b-49ke7n4zpf] {
    min-height: 280px;
    padding: 40px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
}

.asset-loading[b-49ke7n4zpf] {
    gap: 13px;
    color: #64748b;
    font-size: 14px;
}

.loading-spinner[b-49ke7n4zpf] {
    width: 34px;
    height: 34px;
    border: 3px solid #dbeafe;
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: assetSpin-b-49ke7n4zpf 0.75s linear infinite;
}

.empty-icon[b-49ke7n4zpf] {
    width: 64px;
    height: 64px;
    margin-bottom: 15px;
    border-radius: 50%;
    background: #f1f5f9;
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
}

.asset-empty strong[b-49ke7n4zpf] {
    margin-bottom: 7px;
    font-size: 16px;
    color: #344054;
}

.asset-empty span[b-49ke7n4zpf] {
    font-size: 13px;
    color: #8a94a6;
}

.asset-pagination[b-49ke7n4zpf] {
    min-height: 70px;
    padding: 14px 18px;
    border-top: 1px solid #edf0f5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.pagination-info[b-49ke7n4zpf] {
    font-size: 13px;
    color: #7b8496;
}

.pagination-buttons[b-49ke7n4zpf] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pagination-button[b-49ke7n4zpf] {
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid #dce2eb;
    border-radius: 8px;
    background: #fff;
    color: #5f6b7d;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

    .pagination-button:hover:not(:disabled)[b-49ke7n4zpf],
    .pagination-button.active[b-49ke7n4zpf] {
        border-color: #2563eb;
        background: #2563eb;
        color: #fff;
    }

    .pagination-button:disabled[b-49ke7n4zpf] {
        opacity: 0.45;
        cursor: not-allowed;
    }

/* Modal */

.asset-modal-overlay[b-49ke7n4zpf] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    padding: 20px;
    background: rgba(15, 23, 42, 0.52);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.asset-modal[b-49ke7n4zpf] {
    width: 570px;
    max-width: 100%;
    overflow: hidden;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 25px 65px rgba(15, 23, 42, 0.24);
    animation: assetModalShow-b-49ke7n4zpf 0.2s ease;
}

.asset-modal-header[b-49ke7n4zpf] {
    padding: 20px 22px;
    border-bottom: 1px solid #e9edf3;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

    .asset-modal-header h2[b-49ke7n4zpf] {
        margin: 0;
        color: #172033;
        font-size: 21px;
        font-weight: 750;
    }

    .asset-modal-header p[b-49ke7n4zpf] {
        margin: 5px 0 0;
        color: #7d8799;
        font-size: 13px;
    }

.btn-close-modal[b-49ke7n4zpf] {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: #f3f4f6;
    color: #677285;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

    .btn-close-modal:hover[b-49ke7n4zpf] {
        background: #e5e7eb;
        color: #172033;
    }

    .btn-close-modal:disabled[b-49ke7n4zpf] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.asset-modal-body[b-49ke7n4zpf] {
    padding: 22px;
}

.asset-alert[b-49ke7n4zpf] {
    margin-bottom: 17px;
    padding: 12px 14px;
    border: 1px solid #fecaca;
    border-radius: 9px;
    background: #fef2f2;
    color: #b91c1c;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 9px;
    text-align: left;
}

.delete-alert[b-49ke7n4zpf] {
    margin-top: 18px;
    margin-bottom: 0;
}

.asset-form-row[b-49ke7n4zpf] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
}

.asset-form-group[b-49ke7n4zpf] {
    margin-bottom: 17px;
}

.asset-form-row .asset-form-group[b-49ke7n4zpf] {
    margin-bottom: 0;
}

.asset-form-group label[b-49ke7n4zpf] {
    display: block;
    margin-bottom: 8px;
    color: #3a4557;
    font-size: 13px;
    font-weight: 650;
}

    .asset-form-group label span[b-49ke7n4zpf] {
        color: #dc2626;
    }

.asset-form-control[b-49ke7n4zpf] {
    width: 100%;
    height: 44px;
    padding: 0 13px;
    border: 1px solid #d7dde7;
    border-radius: 9px;
    outline: none;
    background: #fff;
    color: #172033;
    font-size: 14px;
    box-sizing: border-box;
}

    .asset-form-control:focus[b-49ke7n4zpf] {
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
    }

    .asset-form-control:disabled[b-49ke7n4zpf],
    .currency-input input:disabled[b-49ke7n4zpf] {
        background: #f8fafc;
        cursor: not-allowed;
    }

.currency-input[b-49ke7n4zpf] {
    width: 100%;
    height: 44px;
    overflow: hidden;
    border: 1px solid #d7dde7;
    border-radius: 9px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

    .currency-input:focus-within[b-49ke7n4zpf] {
        border-color: #3b82f6;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
    }

    .currency-input > span[b-49ke7n4zpf] {
        height: 100%;
        padding: 0 13px;
        border-right: 1px solid #d7dde7;
        background: #f8fafc;
        color: #657086;
        font-size: 13px;
        font-weight: 650;
        display: flex;
        align-items: center;
    }

    .currency-input input[b-49ke7n4zpf] {
        width: 100%;
        height: 100%;
        padding: 0 13px;
        border: 0;
        outline: none;
        background: transparent;
        color: #172033;
        font-size: 14px;
    }

.asset-modal-footer[b-49ke7n4zpf] {
    padding: 16px 22px;
    border-top: 1px solid #e9edf3;
    background: #fafbfc;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.btn-cancel[b-49ke7n4zpf],
.btn-save[b-49ke7n4zpf],
.btn-confirm-delete[b-49ke7n4zpf] {
    min-height: 41px;
    padding: 0 17px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 650;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
}

.btn-cancel[b-49ke7n4zpf] {
    border: 1px solid #d5dbe5;
    background: #fff;
    color: #596579;
}

    .btn-cancel:hover:not(:disabled)[b-49ke7n4zpf] {
        background: #f3f4f6;
    }

.btn-save[b-49ke7n4zpf] {
    border: 1px solid #2563eb;
    background: #2563eb;
    color: #fff;
}

    .btn-save:hover:not(:disabled)[b-49ke7n4zpf] {
        background: #1d4ed8;
    }

    .btn-cancel:disabled[b-49ke7n4zpf],
    .btn-save:disabled[b-49ke7n4zpf],
    .btn-confirm-delete:disabled[b-49ke7n4zpf] {
        opacity: 0.65;
        cursor: not-allowed;
    }

/* Delete modal */

.delete-modal[b-49ke7n4zpf] {
    width: 430px;
    max-width: 100%;
    padding: 28px;
    border-radius: 16px;
    background: #fff;
    text-align: center;
    box-shadow: 0 25px 65px rgba(15, 23, 42, 0.24);
    animation: assetModalShow-b-49ke7n4zpf 0.2s ease;
}

.delete-icon[b-49ke7n4zpf] {
    width: 62px;
    height: 62px;
    margin: 0 auto 17px;
    border-radius: 50%;
    background: #fef2f2;
    color: #dc2626;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 23px;
}

.delete-modal h2[b-49ke7n4zpf] {
    margin: 0 0 10px;
    color: #172033;
    font-size: 21px;
}

.delete-modal p[b-49ke7n4zpf] {
    margin: 0;
    color: #768198;
    font-size: 14px;
    line-height: 1.65;
}

    .delete-modal p strong[b-49ke7n4zpf] {
        color: #344054;
    }

.delete-modal-actions[b-49ke7n4zpf] {
    margin-top: 24px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.btn-confirm-delete[b-49ke7n4zpf] {
    border: 1px solid #dc2626;
    background: #dc2626;
    color: #fff;
}

    .btn-confirm-delete:hover:not(:disabled)[b-49ke7n4zpf] {
        background: #b91c1c;
    }

.button-spinner[b-49ke7n4zpf] {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: assetSpin-b-49ke7n4zpf 0.7s linear infinite;
}

@keyframes assetSpin-b-49ke7n4zpf {
    to {
        transform: rotate(360deg);
    }
}

@keyframes assetModalShow-b-49ke7n4zpf {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.98);
    }

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

@media (max-width: 768px) {
    .asset-page[b-49ke7n4zpf] {
        padding: 15px;
    }

    .asset-header[b-49ke7n4zpf] {
        align-items: stretch;
        flex-direction: column;
    }

        .asset-header h1[b-49ke7n4zpf] {
            font-size: 24px;
        }

    .btn-add-asset[b-49ke7n4zpf] {
        width: 100%;
    }

    .asset-summary-grid[b-49ke7n4zpf] {
        grid-template-columns: 1fr;
    }

    .asset-toolbar[b-49ke7n4zpf] {
        align-items: stretch;
        flex-direction: column;
    }

    .asset-search[b-49ke7n4zpf] {
        width: 100%;
    }

    .asset-count[b-49ke7n4zpf] {
        text-align: left;
    }

    .asset-pagination[b-49ke7n4zpf] {
        align-items: stretch;
        flex-direction: column;
    }

    .pagination-buttons[b-49ke7n4zpf] {
        overflow-x: auto;
    }

    .asset-form-row[b-49ke7n4zpf] {
        grid-template-columns: 1fr;
    }

        .asset-form-row .asset-form-group[b-49ke7n4zpf] {
            margin-bottom: 17px;
        }

    .asset-modal-overlay[b-49ke7n4zpf] {
        padding: 12px;
        align-items: flex-end;
    }

    .asset-modal[b-49ke7n4zpf] {
        max-height: calc(100vh - 24px);
        overflow-y: auto;
        border-radius: 16px 16px 8px 8px;
    }

    .asset-modal-footer[b-49ke7n4zpf] {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

        .asset-modal-footer button[b-49ke7n4zpf] {
            width: 100%;
        }
}

@media (max-width: 480px) {
    .asset-summary-card[b-49ke7n4zpf] {
        min-height: 92px;
        padding: 16px;
    }

        .asset-summary-card strong[b-49ke7n4zpf] {
            font-size: 18px;
        }

    .asset-modal-header[b-49ke7n4zpf],
    .asset-modal-body[b-49ke7n4zpf],
    .asset-modal-footer[b-49ke7n4zpf] {
        padding-left: 17px;
        padding-right: 17px;
    }

    .delete-modal[b-49ke7n4zpf] {
        padding: 23px 18px;
    }

    .delete-modal-actions[b-49ke7n4zpf] {
        grid-template-columns: 1fr;
    }

        .delete-modal-actions button[b-49ke7n4zpf] {
            width: 100%;
        }
}
/* _content/AccountingWeb/Components/Pages/Owner/AnalisaAdvertise.razor.rz.scp.css */
.advertise-page[b-k3hgd0hcuc] {
    width: 100%;
    min-height: 100vh;
    padding: 26px;
    background: #f7f9fc;
    color: #14213d;
    box-sizing: border-box;
    font-family: Inter, Arial, sans-serif;
}

    .advertise-page *[b-k3hgd0hcuc] {
        box-sizing: border-box;
    }

/* HEADING */

.advertise-heading[b-k3hgd0hcuc] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
}

    .advertise-heading h1[b-k3hgd0hcuc] {
        margin: 0 0 6px;
        color: #102a56;
        font-size: 28px;
        font-weight: 750;
        line-height: 1.2;
    }

    .advertise-heading p[b-k3hgd0hcuc] {
        margin: 0;
        color: #64748b;
        font-size: 14px;
    }

.heading-filter[b-k3hgd0hcuc] {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 12px;
}

.date-range[b-k3hgd0hcuc] {
    display: flex;
    gap: 10px;
}

.filter-field[b-k3hgd0hcuc] {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

    .filter-field label[b-k3hgd0hcuc] {
        color: #334155;
        font-size: 12px;
        font-weight: 650;
    }

    .filter-field .form-control[b-k3hgd0hcuc],
    .filter-field .form-select[b-k3hgd0hcuc] {
        width: 100%;
        min-height: 42px;
        padding: 9px 12px;
        border: 1px solid #dbe3ee;
        border-radius: 8px;
        background: #fff;
        color: #172554;
        font-size: 13px;
        outline: none;
        box-shadow: none;
    }

        .filter-field .form-control:focus[b-k3hgd0hcuc],
        .filter-field .form-select:focus[b-k3hgd0hcuc] {
            border-color: #2563eb;
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
        }

.date-range .filter-field[b-k3hgd0hcuc] {
    width: 145px;
}

.branch-field[b-k3hgd0hcuc] {
    width: 160px;
}

.refresh-button[b-k3hgd0hcuc],
.apply-filter-button[b-k3hgd0hcuc],
.reset-filter-button[b-k3hgd0hcuc] {
    border: 0;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 650;
    cursor: pointer;
    transition: 0.2s ease;
}

.refresh-button[b-k3hgd0hcuc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 16px;
    border: 1px solid #dbe3ee;
    background: #fff;
    color: #2563eb;
}

    .refresh-button:hover:not(:disabled)[b-k3hgd0hcuc] {
        border-color: #2563eb;
        background: #eff6ff;
    }

    .refresh-button:disabled[b-k3hgd0hcuc],
    .apply-filter-button:disabled[b-k3hgd0hcuc],
    .reset-filter-button:disabled[b-k3hgd0hcuc] {
        cursor: not-allowed;
        opacity: 0.65;
    }

/* SUMMARY */

.summary-grid[b-k3hgd0hcuc] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 15px;
    margin-bottom: 18px;
}

.summary-card[b-k3hgd0hcuc] {
    min-height: 138px;
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 22px 18px;
    border: 1px solid #e4eaf2;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.035);
}

.summary-icon[b-k3hgd0hcuc] {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 21px;
}

.campaign-card .summary-icon[b-k3hgd0hcuc] {
    background: #e8f1ff;
    color: #2563eb;
}

.content-card .summary-icon[b-k3hgd0hcuc] {
    background: #e7f8ed;
    color: #16a34a;
}

.prospect-card .summary-icon[b-k3hgd0hcuc] {
    background: #f1e9ff;
    color: #7e22ce;
}

.survey-card .summary-icon[b-k3hgd0hcuc] {
    background: #fff0e9;
    color: #f97316;
}

.conversion-card .summary-icon[b-k3hgd0hcuc] {
    background: #fff4d8;
    color: #f59e0b;
}

.summary-content[b-k3hgd0hcuc] {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.summary-label[b-k3hgd0hcuc] {
    min-height: 31px;
    color: #475569;
    font-size: 13px;
    line-height: 1.3;
}

.summary-content strong[b-k3hgd0hcuc] {
    margin-top: 2px;
    color: #0f2856;
    font-size: 29px;
    font-weight: 750;
    line-height: 1;
}

.summary-info[b-k3hgd0hcuc] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
    color: #52647e;
    font-size: 12px;
}

.summary-dot[b-k3hgd0hcuc] {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #94a3b8;
}

.summary-description[b-k3hgd0hcuc] {
    display: block;
    margin-top: 12px;
    color: #7c8ba1;
    font-size: 11px;
    line-height: 1.4;
}

/* GENERAL CARD */

.dashboard-card[b-k3hgd0hcuc] {
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.035);
}

.card-heading[b-k3hgd0hcuc] {
    padding: 20px 20px 8px;
}

    .card-heading h2[b-k3hgd0hcuc] {
        margin: 0;
        color: #102a56;
        font-size: 15px;
        font-weight: 700;
    }

/* CHART */

.chart-grid[b-k3hgd0hcuc] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 18px;
}

.chart-card[b-k3hgd0hcuc] {
    min-width: 0;
    min-height: 348px;
}

.bar-chart[b-k3hgd0hcuc] {
    min-height: 244px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 23px;
    padding: 22px 20px 16px;
}

.bar-row[b-k3hgd0hcuc] {
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr) 50px;
    align-items: center;
    gap: 10px;
}

.bar-label[b-k3hgd0hcuc] {
    overflow: hidden;
    color: #1e3156;
    font-size: 12px;
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.bar-track[b-k3hgd0hcuc] {
    position: relative;
    height: 13px;
    overflow: hidden;
    border-radius: 3px;
    background: repeating-linear-gradient( to right, #f8fafc 0, #f8fafc calc(25% - 1px), #e8edf5 calc(25% - 1px), #e8edf5 25% );
}

.bar-value[b-k3hgd0hcuc] {
    height: 100%;
    min-width: 0;
    border-radius: 3px;
    transition: width 0.4s ease;
}

.bar-blue[b-k3hgd0hcuc] {
    background: linear-gradient(90deg, #1d4ed8, #2878ed);
}

.bar-green[b-k3hgd0hcuc] {
    background: linear-gradient(90deg, #16a34a, #28bd5b);
}

.bar-purple[b-k3hgd0hcuc] {
    background: linear-gradient(90deg, #7e22ce, #9333ea);
}

.bar-number[b-k3hgd0hcuc] {
    color: #172554;
    font-size: 12px;
    font-weight: 650;
    white-space: nowrap;
}

.percent-number[b-k3hgd0hcuc] {
    font-size: 11px;
}

.chart-legend[b-k3hgd0hcuc] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 15px 20px;
    color: #53657f;
    font-size: 11px;
}

.legend-box[b-k3hgd0hcuc] {
    width: 12px;
    height: 12px;
    border-radius: 2px;
}

.legend-blue[b-k3hgd0hcuc] {
    background: #2563eb;
}

.legend-green[b-k3hgd0hcuc] {
    background: #22b455;
}

.legend-purple[b-k3hgd0hcuc] {
    background: #8b2dda;
}

.empty-chart[b-k3hgd0hcuc] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 180px;
    color: #94a3b8;
    font-size: 13px;
}

/* DETAIL */

.content-detail-grid[b-k3hgd0hcuc] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 270px;
    align-items: start;
    gap: 16px;
}

.table-card[b-k3hgd0hcuc] {
    min-width: 0;
    overflow: hidden;
}

.table-heading[b-k3hgd0hcuc] {
    padding-bottom: 15px;
}

    .table-heading span[b-k3hgd0hcuc] {
        display: block;
        margin-top: 5px;
        color: #8492a8;
        font-size: 12px;
    }

.table-scroll[b-k3hgd0hcuc] {
    width: 100%;
    overflow-x: auto;
    border-top: 1px solid #edf1f6;
    border-bottom: 1px solid #edf1f6;
}

.advertise-table[b-k3hgd0hcuc] {
    width: 100%;
    min-width: 1240px;
    border-collapse: collapse;
}

    .advertise-table th[b-k3hgd0hcuc] {
        padding: 13px 14px;
        border-bottom: 1px solid #dfe6ef;
        background: #f8fafc;
        color: #23385d;
        font-size: 11px;
        font-weight: 700;
        text-align: left;
        white-space: nowrap;
    }

    .advertise-table td[b-k3hgd0hcuc] {
        padding: 13px 14px;
        border-bottom: 1px solid #edf1f6;
        color: #314565;
        font-size: 12px;
        vertical-align: middle;
        white-space: nowrap;
    }

    .advertise-table tbody tr:last-child td[b-k3hgd0hcuc] {
        border-bottom: 0;
    }

    .advertise-table tbody tr:hover[b-k3hgd0hcuc] {
        background: #f9fbff;
    }

.text-end[b-k3hgd0hcuc] {
    text-align: right !important;
}

.text-center[b-k3hgd0hcuc] {
    text-align: center !important;
}

.content-code[b-k3hgd0hcuc] {
    color: #1d4ed8;
    font-weight: 700;
}

.content-name[b-k3hgd0hcuc] {
    max-width: 170px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.campaign-name[b-k3hgd0hcuc] {
    max-width: 190px;
    overflow: hidden;
    color: #1e3156;
    font-weight: 600;
    text-overflow: ellipsis;
}

.advertise-table small[b-k3hgd0hcuc] {
    color: #94a3b8;
    font-size: 10px;
}

.number-badge[b-k3hgd0hcuc],
.conversion-badge[b-k3hgd0hcuc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    min-height: 25px;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
}

    .number-badge.blue[b-k3hgd0hcuc] {
        background: #eaf2ff;
        color: #1d4ed8;
    }

    .number-badge.green[b-k3hgd0hcuc] {
        background: #e8f8ed;
        color: #15803d;
    }

    .conversion-badge.high[b-k3hgd0hcuc] {
        background: #dcfce7;
        color: #15803d;
    }

    .conversion-badge.medium[b-k3hgd0hcuc] {
        background: #fef3c7;
        color: #b45309;
    }

    .conversion-badge.low[b-k3hgd0hcuc] {
        background: #fee2e2;
        color: #b91c1c;
    }

.empty-table[b-k3hgd0hcuc] {
    height: 140px;
    color: #94a3b8 !important;
    text-align: center;
}

.table-footer[b-k3hgd0hcuc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    color: #64748b;
    font-size: 12px;
}

.pagination-wrap[b-k3hgd0hcuc] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.page-button[b-k3hgd0hcuc] {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #dfe6ef;
    border-radius: 7px;
    background: #fff;
    color: #61728a;
    font-size: 12px;
    cursor: pointer;
}

    .page-button:hover:not(:disabled):not(.active)[b-k3hgd0hcuc] {
        border-color: #2563eb;
        color: #2563eb;
    }

    .page-button.active[b-k3hgd0hcuc] {
        border-color: #2563eb;
        background: #2563eb;
        color: #fff;
    }

    .page-button:disabled[b-k3hgd0hcuc] {
        cursor: not-allowed;
        opacity: 0.4;
    }

/* FILTER CARD */

.content-filter-card[b-k3hgd0hcuc] {
    position: sticky;
    top: 16px;
    width: 100%;
    padding-bottom: 18px;
}

.filter-list[b-k3hgd0hcuc] {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 10px 18px 0;
}

.apply-filter-button[b-k3hgd0hcuc] {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 2px;
    background: #2563eb;
    color: #fff;
}

    .apply-filter-button:hover:not(:disabled)[b-k3hgd0hcuc] {
        background: #1d4ed8;
    }

.reset-filter-button[b-k3hgd0hcuc] {
    min-height: 39px;
    border: 1px solid #dbe3ee;
    background: #fff;
    color: #64748b;
}

    .reset-filter-button:hover:not(:disabled)[b-k3hgd0hcuc] {
        border-color: #94a3b8;
        color: #334155;
    }

/* LOADING */

.dashboard-loading[b-k3hgd0hcuc] {
    min-height: 420px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #fff;
    color: #64748b;
    font-size: 13px;
}

.loading-spinner[b-k3hgd0hcuc] {
    width: 38px;
    height: 38px;
    border: 4px solid #e3eaf5;
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: advertise-spin-b-k3hgd0hcuc 0.8s linear infinite;
}

@keyframes advertise-spin-b-k3hgd0hcuc {
    to {
        transform: rotate(360deg);
    }
}

/* RESPONSIVE */

@media (max-width: 1450px) {
    .summary-grid[b-k3hgd0hcuc] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .chart-grid[b-k3hgd0hcuc] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .chart-card:last-child[b-k3hgd0hcuc] {
        grid-column: span 2;
    }
}

@media (max-width: 1100px) {
    .advertise-heading[b-k3hgd0hcuc] {
        align-items: flex-start;
        flex-direction: column;
    }

    .heading-filter[b-k3hgd0hcuc] {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .content-detail-grid[b-k3hgd0hcuc] {
        grid-template-columns: 1fr;
    }

    .content-filter-card[b-k3hgd0hcuc] {
        position: static;
        order: -1;
    }

    .filter-list[b-k3hgd0hcuc] {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .apply-filter-button[b-k3hgd0hcuc],
    .reset-filter-button[b-k3hgd0hcuc] {
        align-self: end;
    }
}

@media (max-width: 800px) {
    .advertise-page[b-k3hgd0hcuc] {
        padding: 18px;
    }

    .advertise-heading h1[b-k3hgd0hcuc] {
        font-size: 23px;
    }

    .summary-grid[b-k3hgd0hcuc],
    .chart-grid[b-k3hgd0hcuc] {
        grid-template-columns: 1fr;
    }

    .chart-card:last-child[b-k3hgd0hcuc] {
        grid-column: auto;
    }

    .summary-card[b-k3hgd0hcuc] {
        min-height: auto;
    }

    .filter-list[b-k3hgd0hcuc] {
        grid-template-columns: 1fr 1fr;
    }

    .table-footer[b-k3hgd0hcuc] {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 560px) {
    .advertise-page[b-k3hgd0hcuc] {
        padding: 14px;
    }

    .heading-filter[b-k3hgd0hcuc],
    .date-range[b-k3hgd0hcuc] {
        width: 100%;
    }

    .date-range[b-k3hgd0hcuc] {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

        .date-range .filter-field[b-k3hgd0hcuc],
        .branch-field[b-k3hgd0hcuc],
        .refresh-button[b-k3hgd0hcuc] {
            width: 100%;
        }

    .filter-list[b-k3hgd0hcuc] {
        grid-template-columns: 1fr;
    }

    .bar-row[b-k3hgd0hcuc] {
        grid-template-columns: 60px minmax(0, 1fr) 43px;
        gap: 7px;
    }

    .bar-chart[b-k3hgd0hcuc] {
        padding-right: 14px;
        padding-left: 14px;
    }

    .pagination-wrap[b-k3hgd0hcuc] {
        max-width: 100%;
        overflow-x: auto;
        padding-bottom: 3px;
    }
}
/* _content/AccountingWeb/Components/Pages/Owner/AnalisaHR.razor.rz.scp.css */
.hr-analysis-page[b-2jaawtqm2j] {
    width: 100%;
    min-height: 100vh;
    padding: 26px;
    background: #f8fafc;
    color: #172033;
    box-sizing: border-box;
}

.page-heading[b-2jaawtqm2j] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 20px;
}

.heading-text h1[b-2jaawtqm2j] {
    margin: 0 0 7px;
    font-size: 25px;
    font-weight: 700;
    line-height: 1.2;
    color: #182238;
}

.heading-text p[b-2jaawtqm2j] {
    margin: 0;
    color: #64748b;
    font-size: 14px;
}

.period-filter[b-2jaawtqm2j] {
    width: 100%;
    max-width: 600px;
    padding: 12px 15px 14px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 5px 18px rgba(15, 23, 42, 0.04);
}

.filter-label[b-2jaawtqm2j] {
    margin-bottom: 7px;
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
}

.filter-fields[b-2jaawtqm2j] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.date-field[b-2jaawtqm2j] {
    flex: 1;
    min-width: 0;
}

    .date-field .form-control[b-2jaawtqm2j] {
        width: 100%;
        height: 40px;
        padding: 0 12px;
        border: 1px solid #dbe3ef;
        border-radius: 7px;
        background: #ffffff;
        color: #1e293b;
        font-size: 13px;
        box-shadow: none;
    }

        .date-field .form-control:focus[b-2jaawtqm2j] {
            border-color: #4f7cff;
            box-shadow: 0 0 0 3px rgba(79, 124, 255, 0.12);
        }

.date-separator[b-2jaawtqm2j] {
    color: #94a3b8;
    font-size: 13px;
}

.apply-button[b-2jaawtqm2j] {
    height: 40px;
    min-width: 124px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 18px;
    border: 0;
    border-radius: 7px;
    background: linear-gradient(135deg, #4f7cff, #568bf8);
    color: #ffffff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s ease;
}

    .apply-button:hover:not(:disabled)[b-2jaawtqm2j] {
        transform: translateY(-1px);
        box-shadow: 0 7px 16px rgba(79, 124, 255, 0.25);
    }

    .apply-button:disabled[b-2jaawtqm2j] {
        cursor: not-allowed;
        opacity: 0.7;
    }

.hr-alert[b-2jaawtqm2j] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    border-radius: 8px;
}

.summary-grid[b-2jaawtqm2j] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 15px;
    margin-bottom: 18px;
}

.summary-card[b-2jaawtqm2j] {
    min-height: 112px;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 19px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 5px 16px rgba(15, 23, 42, 0.035);
}

.summary-icon[b-2jaawtqm2j] {
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 23px;
}

.summary-content[b-2jaawtqm2j] {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.summary-title[b-2jaawtqm2j] {
    margin-bottom: 4px;
    font-size: 13px;
    font-weight: 600;
}

.summary-content strong[b-2jaawtqm2j] {
    margin-bottom: 2px;
    font-size: 23px;
    line-height: 1.1;
    color: #172033;
}

.summary-content small[b-2jaawtqm2j] {
    color: #64748b;
    font-size: 11px;
    white-space: nowrap;
}

.total-card .summary-icon[b-2jaawtqm2j] {
    background: #eaf2ff;
    color: #246bfd;
}

.total-card .summary-title[b-2jaawtqm2j] {
    color: #246bfd;
}

.izin-card .summary-icon[b-2jaawtqm2j] {
    background: #e6f8ed;
    color: #16a34a;
}

.izin-card .summary-title[b-2jaawtqm2j] {
    color: #16a34a;
}

.cuti-card .summary-icon[b-2jaawtqm2j] {
    background: #fff4df;
    color: #f59e0b;
}

.cuti-card .summary-title[b-2jaawtqm2j] {
    color: #f59e0b;
}

.sakit-card .summary-icon[b-2jaawtqm2j] {
    background: #f1eaff;
    color: #8b5cf6;
}

.sakit-card .summary-title[b-2jaawtqm2j] {
    color: #8b5cf6;
}

.terlambat-card .summary-icon[b-2jaawtqm2j] {
    background: #ffebeb;
    color: #ef4444;
}

.terlambat-card .summary-title[b-2jaawtqm2j] {
    color: #ef4444;
}

.category-grid[b-2jaawtqm2j] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 15px;
    margin-bottom: 18px;
}

.detail-card[b-2jaawtqm2j] {
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 5px 16px rgba(15, 23, 42, 0.035);
}

.detail-header[b-2jaawtqm2j] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 18px;
    border-bottom: 1px solid #edf1f6;
}

    .detail-header h2[b-2jaawtqm2j] {
        margin: 0 0 4px;
        font-size: 15px;
        font-weight: 700;
        color: #172033;
    }

    .detail-header span[b-2jaawtqm2j] {
        color: #64748b;
        font-size: 11px;
    }

.detail-count[b-2jaawtqm2j] {
    padding: 6px 10px;
    background: #eef4ff;
    border-radius: 20px;
    color: #2563eb;
    font-size: 11px;
    font-weight: 600;
}

.table-filter-bar[b-2jaawtqm2j] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 12px 18px;
    border-bottom: 1px solid #edf1f6;
}

.type-filter[b-2jaawtqm2j] {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.type-filter-button[b-2jaawtqm2j] {
    height: 31px;
    padding: 0 13px;
    border: 1px solid #dbe3ef;
    border-radius: 6px;
    background: #ffffff;
    color: #64748b;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}

    .type-filter-button:hover[b-2jaawtqm2j] {
        border-color: #94a3b8;
        color: #334155;
    }

    .type-filter-button.active[b-2jaawtqm2j] {
        border-color: #4f7cff;
        background: #4f7cff;
        color: #ffffff;
    }

.search-box[b-2jaawtqm2j] {
    width: 230px;
    height: 34px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 10px;
    border: 1px solid #dbe3ef;
    border-radius: 7px;
    background: #ffffff;
    color: #94a3b8;
}

    .search-box input[b-2jaawtqm2j] {
        width: 100%;
        min-width: 0;
        border: 0;
        outline: none;
        background: transparent;
        color: #334155;
        font-size: 12px;
    }

/*.table-responsive {
    width: 100%;
    overflow-x: auto;
}*/

.table-scroll-wrapper[b-2jaawtqm2j] {
    width: 100%;
    max-height: 480px;
    overflow: auto;
    position: relative;
    background: #ffffff;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 #f8fafc;
}

    .table-scroll-wrapper[b-2jaawtqm2j]::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    .table-scroll-wrapper[b-2jaawtqm2j]::-webkit-scrollbar-track {
        background: #f8fafc;
    }

    .table-scroll-wrapper[b-2jaawtqm2j]::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 10px;
    }

        .table-scroll-wrapper[b-2jaawtqm2j]::-webkit-scrollbar-thumb:hover {
            background: #94a3b8;
        }

.hr-table[b-2jaawtqm2j] {
    width: 100%;
    min-width: 1450px;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: auto;
}

    .hr-table thead[b-2jaawtqm2j] {
        position: sticky;
        top: 0;
        z-index: 5;
    }

    .hr-table th[b-2jaawtqm2j] {
        position: sticky;
        top: 0;
        z-index: 5;
        padding: 12px 13px;
        border-bottom: 1px solid #e2e8f0;
        background: #f8fafc;
        color: #334155;
        font-size: 11px;
        font-weight: 700;
        text-align: left;
        white-space: nowrap;
        box-shadow: 0 1px 0 #e2e8f0;
    }

    .hr-table td[b-2jaawtqm2j] {
        padding: 11px 13px;
        border-bottom: 1px solid #eef2f7;
        background: #ffffff;
        color: #334155;
        font-size: 14px;
        line-height: 1.5;
        vertical-align: middle;
    }

    .hr-table tbody tr:hover td[b-2jaawtqm2j] {
        background: #fafcff;
    }

.hr-table[b-2jaawtqm2j] {
    width: 100%;
    min-width: 1450px;
    border-collapse: collapse;
    table-layout: auto;
}

    .hr-table th[b-2jaawtqm2j] {
        padding: 12px 13px;
        border-bottom: 1px solid #e2e8f0;
        background: #f8fafc;
        color: #334155;
        font-size: 11px;
        font-weight: 700;
        text-align: left;
        white-space: nowrap;
    }

    .hr-table td[b-2jaawtqm2j] {
        padding: 11px 13px;
        border-bottom: 1px solid #eef2f7;
        color: #334155;
        font-size: 14px;
        line-height: 1.5;
        vertical-align: middle;
    }

    .hr-table tbody tr:hover[b-2jaawtqm2j] {
        background: #fafcff;
    }

    .hr-table tbody tr:last-child td[b-2jaawtqm2j] {
        border-bottom: 0;
    }

.number-column[b-2jaawtqm2j] {
    width: 48px;
    text-align: center !important;
}

.description-column[b-2jaawtqm2j] {
    min-width: 260px;
}

.description-text[b-2jaawtqm2j] {
    display: block;
    max-width: 330px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    line-height: 1.5;
}

.ktp-text[b-2jaawtqm2j] {
    font-family: Consolas, monospace;
    font-size: 13px;
}

.employee-cell[b-2jaawtqm2j] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 145px;
}

.employee-avatar[b-2jaawtqm2j] {
    width: 27px;
    height: 27px;
    flex: 0 0 27px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #edf2ff;
    color: #496df3;
    font-size: 10px;
    font-weight: 700;
}

.type-badge[b-2jaawtqm2j],
.status-badge[b-2jaawtqm2j] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 62px;
    padding: 4px 9px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

    .type-badge.izin[b-2jaawtqm2j] {
        background: #e3f8ea;
        color: #159447;
    }

    .type-badge.sakit[b-2jaawtqm2j] {
        background: #f0e7ff;
        color: #8152dc;
    }

    .type-badge.cuti[b-2jaawtqm2j] {
        background: #fff2da;
        color: #ed9400;
    }

    .type-badge.terlambat[b-2jaawtqm2j] {
        background: #ffe7e7;
        color: #e83c3c;
    }

    .status-badge.approved[b-2jaawtqm2j] {
        background: #dcf7e6;
        color: #159447;
    }

    .status-badge.pending[b-2jaawtqm2j] {
        background: #fff1d8;
        color: #ee9400;
    }

    .status-badge.rejected[b-2jaawtqm2j] {
        background: #ffe1e1;
        color: #d93636;
    }

    .status-badge.recorded[b-2jaawtqm2j] {
        background: #e6efff;
        color: #3168d8;
    }

.photo-available[b-2jaawtqm2j] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #2563eb;
    font-weight: 600;
}

.time-value[b-2jaawtqm2j] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 14px;
}

    .time-value small[b-2jaawtqm2j] {
        color: #ef4444;
        font-size: 12px;
    }

.table-state[b-2jaawtqm2j] {
    min-height: 190px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    color: #64748b;
}

.empty-state[b-2jaawtqm2j] {
    flex-direction: column;
}

    .empty-state i[b-2jaawtqm2j] {
        margin-bottom: 4px;
        color: #b2bfd1;
        font-size: 32px;
    }

    .empty-state strong[b-2jaawtqm2j] {
        color: #334155;
    }

.table-footer[b-2jaawtqm2j] {
    padding: 13px 18px;
    border-top: 1px solid #edf1f6;
    color: #64748b;
    font-size: 11px;
}

/* Employee summary component */

[b-2jaawtqm2j] .employee-summary-card {
    overflow: hidden;
    min-height: 190px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 5px 16px rgba(15, 23, 42, 0.035);
}

[b-2jaawtqm2j] .employee-summary-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 17px 15px;
}

[b-2jaawtqm2j] .employee-summary-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 700;
}

    [b-2jaawtqm2j] .employee-summary-title i {
        font-size: 18px;
    }

[b-2jaawtqm2j] .employee-summary-total {
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
}

[b-2jaawtqm2j] .employee-summary-table {
    max-height: 190px;
    padding: 0 11px 10px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}

    [b-2jaawtqm2j] .employee-summary-table::-webkit-scrollbar {
        width: 6px;
    }

    [b-2jaawtqm2j] .employee-summary-table::-webkit-scrollbar-track {
        background: transparent;
    }

    [b-2jaawtqm2j] .employee-summary-table::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 10px;
    }

[b-2jaawtqm2j] .employee-summary-columns {
    position: sticky;
    top: 0;
    z-index: 2;
    min-height: 31px;
    background: #ffffff;
    /*color: #172033;*/
    font-weight: 700;
}

[b-2jaawtqm2j] .employee-summary-row {
    /*min-height: 38px;*/
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 0 3px;
    border-bottom: 1px solid #edf1f6;
    color: #334155;
    font-size: 14px;
}

[b-2jaawtqm2j] .employee-summary-columns {
    min-height: 31px;
    color: #172033;
    font-weight: 700;
}

[b-2jaawtqm2j] .employee-summary-name {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    font-weight: 600;
}

    [b-2jaawtqm2j] .employee-summary-name > span:last-child {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

[b-2jaawtqm2j] .employee-number {
    font-size: 13px;
    color: #64748b;
}

[b-2jaawtqm2j] .employee-summary-amount {
    white-space: nowrap;
    font-size: 13px;
    font-weight: 600;
}

[b-2jaawtqm2j] .employee-summary-empty {
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 11px;
}

[b-2jaawtqm2j] .izin-summary .employee-summary-header {
    background: linear-gradient(90deg, #f7fffa, #ffffff);
}

[b-2jaawtqm2j] .izin-summary .employee-summary-title {
    color: #16a34a;
}

[b-2jaawtqm2j] .izin-summary .employee-summary-total {
    background: #e4f8eb;
    color: #159447;
}

[b-2jaawtqm2j] .sakit-summary .employee-summary-header {
    background: linear-gradient(90deg, #fbf9ff, #ffffff);
}

[b-2jaawtqm2j] .sakit-summary .employee-summary-title {
    color: #8b5cf6;
}

[b-2jaawtqm2j] .sakit-summary .employee-summary-total {
    background: #efe8ff;
    color: #8152dc;
}

[b-2jaawtqm2j] .cuti-summary .employee-summary-header {
    background: linear-gradient(90deg, #fffdf7, #ffffff);
}

[b-2jaawtqm2j] .cuti-summary .employee-summary-title {
    color: #f59e0b;
}

[b-2jaawtqm2j] .cuti-summary .employee-summary-total {
    background: #fff2d9;
    color: #e99100;
}

[b-2jaawtqm2j] .terlambat-summary .employee-summary-header {
    background: linear-gradient(90deg, #fff9f9, #ffffff);
}

[b-2jaawtqm2j] .terlambat-summary .employee-summary-title {
    color: #ef4444;
}

[b-2jaawtqm2j] .terlambat-summary .employee-summary-total {
    background: #ffe7e7;
    color: #e83c3c;
}


.pagination-footer[b-2jaawtqm2j] {
    min-height: 62px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 12px 18px;
    border-top: 1px solid #edf1f6;
    background: #ffffff;
}

.pagination-info[b-2jaawtqm2j] {
    color: #64748b;
    font-size: 11px;
}

    .pagination-info strong[b-2jaawtqm2j] {
        color: #334155;
        font-weight: 700;
    }

.pagination-control[b-2jaawtqm2j] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.page-size-select[b-2jaawtqm2j] {
    height: 33px;
    margin-right: 6px;
    padding: 0 28px 0 10px;
    border: 1px solid #dbe3ef;
    border-radius: 6px;
    background: #ffffff;
    color: #475569;
    font-size: 11px;
    outline: none;
    cursor: pointer;
}

    .page-size-select:focus[b-2jaawtqm2j] {
        border-color: #4f7cff;
        box-shadow: 0 0 0 3px rgba(79, 124, 255, 0.1);
    }

.pagination-button[b-2jaawtqm2j] {
    min-width: 33px;
    height: 33px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 9px;
    border: 1px solid #dbe3ef;
    border-radius: 6px;
    background: #ffffff;
    color: #475569;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.15s ease;
}

    .pagination-button:hover:not(:disabled):not(.active)[b-2jaawtqm2j] {
        border-color: #4f7cff;
        background: #f5f8ff;
        color: #3568e8;
    }

    .pagination-button.active[b-2jaawtqm2j] {
        border-color: #4f7cff;
        background: #4f7cff;
        color: #ffffff;
    }

    .pagination-button:disabled[b-2jaawtqm2j] {
        cursor: not-allowed;
        opacity: 0.45;
    }


@media (max-width: 1250px) {
    .summary-grid[b-2jaawtqm2j] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .category-grid[b-2jaawtqm2j] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .hr-analysis-page[b-2jaawtqm2j] {
        padding: 18px;
    }

    .page-heading[b-2jaawtqm2j] {
        flex-direction: column;
    }

    .period-filter[b-2jaawtqm2j] {
        max-width: none;
    }

    .summary-grid[b-2jaawtqm2j] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .table-filter-bar[b-2jaawtqm2j] {
        align-items: stretch;
        flex-direction: column;
    }

    .search-box[b-2jaawtqm2j] {
        width: 100%;
    }
}

@media (max-width: 700px) {
    .table-scroll-wrapper[b-2jaawtqm2j] {
        max-height: 420px;
    }

    .pagination-footer[b-2jaawtqm2j] {
        align-items: stretch;
        flex-direction: column;
    }

    .pagination-info[b-2jaawtqm2j] {
        text-align: center;
    }

    .pagination-control[b-2jaawtqm2j] {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
    }

    .page-size-select[b-2jaawtqm2j] {
        flex: 1 1 100%;
        width: 100%;
        margin-right: 0;
        margin-bottom: 4px;
    }
}

@media (max-width: 600px) {
    .hr-analysis-page[b-2jaawtqm2j] {
        padding: 13px;
    }

    .heading-text h1[b-2jaawtqm2j] {
        font-size: 21px;
    }

    .filter-fields[b-2jaawtqm2j] {
        flex-wrap: wrap;
    }

    .date-field[b-2jaawtqm2j] {
        flex: 1 1 calc(50% - 15px);
    }

    .apply-button[b-2jaawtqm2j] {
        width: 100%;
    }

    .summary-grid[b-2jaawtqm2j],
    .category-grid[b-2jaawtqm2j] {
        grid-template-columns: 1fr;
    }

    .summary-card[b-2jaawtqm2j] {
        min-height: 95px;
    }

    .detail-header[b-2jaawtqm2j] {
        align-items: flex-start;
        flex-direction: column;
    }
}


/* _content/AccountingWeb/Components/Pages/Owner/DashRab.razor.rz.scp.css */
.rab-dashboard-page[b-1njdg9lj29] {
    --rab-primary: #1769d2;
    --rab-primary-soft: #eaf3ff;
    --rab-success: #2ca64b;
    --rab-success-soft: #eaf8ed;
    --rab-warning: #f5830b;
    --rab-warning-soft: #fff3e4;
    --rab-danger: #dc3545;
    --rab-danger-soft: #fff0f1;
    --rab-purple: #8052c9;
    --rab-text: #111827;
    --rab-muted: #64748b;
    --rab-border: #e5eaf1;
    --rab-background: #f6f8fb;
    --rab-white: #ffffff;
    width: 100%;
    min-height: 100vh;
    padding: 22px;
    box-sizing: border-box;
    overflow-x: hidden;
    background: var(--rab-background);
    color: var(--rab-text);
    font-family: Inter, Arial, sans-serif;
}

/* HEADER */

.rab-page-header[b-1njdg9lj29] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}

.rab-header-title[b-1njdg9lj29] {
    min-width: 0;
}

    .rab-header-title h1[b-1njdg9lj29] {
        margin: 0 0 5px;
        color: #101827;
        font-size: 25px;
        line-height: 1.2;
        font-weight: 750;
        letter-spacing: -0.4px;
    }

    .rab-header-title p[b-1njdg9lj29] {
        margin: 0;
        color: var(--rab-muted);
        font-size: 13px;
    }

.rab-header-actions[b-1njdg9lj29] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.rab-filter-display[b-1njdg9lj29] {
    min-height: 42px;
    padding: 0 13px;
    border: 1px solid var(--rab-border);
    border-radius: 8px;
    background: var(--rab-white);
    display: flex;
    align-items: center;
    gap: 9px;
    color: #42526a;
    font-size: 13px;
    box-shadow: 0 2px 5px rgba(15, 23, 42, 0.02);
}

    .rab-filter-display i[b-1njdg9lj29] {
        color: var(--rab-primary);
        font-size: 14px;
    }

.rab-refresh-button[b-1njdg9lj29] {
    min-height: 42px;
    padding: 0 15px;
    border: 0;
    border-radius: 8px;
    background: var(--rab-primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 650;
    cursor: pointer;
    transition: 0.2s ease;
}

    .rab-refresh-button:hover:not(:disabled)[b-1njdg9lj29] {
        transform: translateY(-1px);
        box-shadow: 0 8px 16px rgba(23, 105, 210, 0.2);
    }

    .rab-refresh-button:disabled[b-1njdg9lj29] {
        opacity: 0.65;
        cursor: not-allowed;
    }

/* ERROR */

.rab-alert-danger[b-1njdg9lj29] {
    margin-bottom: 18px;
    padding: 14px 16px;
    border: 1px solid #ffd5da;
    border-radius: 10px;
    background: var(--rab-danger-soft);
    color: #a91d2a;
    display: flex;
    align-items: center;
    gap: 12px;
}

    .rab-alert-danger > i[b-1njdg9lj29] {
        font-size: 20px;
    }

    .rab-alert-danger > div[b-1njdg9lj29] {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 3px;
    }

    .rab-alert-danger span[b-1njdg9lj29] {
        font-size: 12px;
    }

    .rab-alert-danger button[b-1njdg9lj29] {
        padding: 7px 12px;
        border: 1px solid #ef9ca4;
        border-radius: 7px;
        background: #fff;
        color: #b42331;
        font-size: 12px;
        cursor: pointer;
    }

/* LOADING */

.rab-loading-state[b-1njdg9lj29] {
    min-height: 380px;
    border: 1px solid var(--rab-border);
    border-radius: 12px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 7px;
    color: var(--rab-muted);
}

    .rab-loading-state strong[b-1njdg9lj29] {
        margin-top: 7px;
        color: #243248;
    }

    .rab-loading-state span[b-1njdg9lj29] {
        font-size: 12px;
    }

.rab-loading-spinner[b-1njdg9lj29] {
    width: 40px;
    height: 40px;
    border: 4px solid #e3ebf7;
    border-top-color: var(--rab-primary);
    border-radius: 50%;
    animation: rab-spin-b-1njdg9lj29 0.8s linear infinite;
}

@keyframes rab-spin-b-1njdg9lj29 {
    to {
        transform: rotate(360deg);
    }
}

/* SUMMARY */

.rab-summary-grid[b-1njdg9lj29] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 14px;
}

.rab-summary-card[b-1njdg9lj29] {
    min-width: 0;
    min-height: 135px;
    padding: 20px;
    border: 1px solid var(--rab-border);
    border-radius: 10px;
    background: var(--rab-white);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    box-shadow: 0 5px 14px rgba(15, 23, 42, 0.035);
}

.rab-summary-info[b-1njdg9lj29] {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.rab-summary-label[b-1njdg9lj29] {
    margin-bottom: 9px;
    color: #53647b;
    font-size: 11px;
    font-weight: 650;
    text-transform: uppercase;
}

.rab-summary-info > strong[b-1njdg9lj29] {
    margin-bottom: 22px;
    color: #111827;
    font-size: clamp(17px, 1.45vw, 23px);
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.rab-summary-info small[b-1njdg9lj29] {
    color: var(--rab-muted);
    font-size: 11px;
}

.rab-summary-icon[b-1njdg9lj29] {
    width: 45px;
    height: 45px;
    flex: 0 0 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 17px;
}

.rab-budget-icon[b-1njdg9lj29] {
    background: linear-gradient(145deg, #2183ec, #1262c4);
    box-shadow: 0 7px 15px rgba(23, 105, 210, 0.25);
}

.rab-actual-icon[b-1njdg9lj29] {
    background: linear-gradient(145deg, #43bc63, #259943);
    box-shadow: 0 7px 15px rgba(44, 166, 75, 0.24);
}

.rab-remaining-icon[b-1njdg9lj29] {
    background: linear-gradient(145deg, #ff9d32, #ef7500);
    box-shadow: 0 7px 15px rgba(245, 131, 11, 0.25);
}

.rab-usage-summary > strong[b-1njdg9lj29] {
    margin-bottom: 12px;
}

.rab-summary-progress[b-1njdg9lj29] {
    width: 100%;
    height: 7px;
    margin-bottom: 10px;
    border-radius: 999px;
    overflow: hidden;
    background: #e7ebf1;
}

    .rab-summary-progress span[b-1njdg9lj29] {
        display: block;
        height: 100%;
        max-width: 100%;
        border-radius: inherit;
        background: linear-gradient(90deg, #663dcc, #905ccf);
    }

.rab-mini-ring[b-1njdg9lj29] {
    --rab-percentage: 0;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    padding: 8px;
    box-sizing: border-box;
    border-radius: 50%;
    background: conic-gradient( var(--rab-purple) calc(var(--rab-percentage) * 1%), #e5e8ee 0 );
}

    .rab-mini-ring div[b-1njdg9lj29] {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background: #fff;
    }

.rab-text-success[b-1njdg9lj29] {
    color: var(--rab-success) !important;
}

.rab-text-warning[b-1njdg9lj29] {
    color: var(--rab-warning) !important;
}

.rab-text-danger[b-1njdg9lj29],
.rab-value-danger[b-1njdg9lj29] {
    color: var(--rab-danger) !important;
}

/* PANEL */

.rab-panel[b-1njdg9lj29] {
    min-width: 0;
    border: 1px solid var(--rab-border);
    border-radius: 10px;
    background: var(--rab-white);
    box-shadow: 0 5px 14px rgba(15, 23, 42, 0.03);
}

.rab-chart-grid[b-1njdg9lj29] {
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(340px, 0.88fr);
    gap: 14px;
    margin-bottom: 14px;
}

.rab-trend-panel[b-1njdg9lj29],
.rab-usage-panel[b-1njdg9lj29] {
    min-height: 345px;
    padding: 18px;
}

.rab-panel-header[b-1njdg9lj29] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
}

    .rab-panel-header h2[b-1njdg9lj29],
    .rab-table-header h2[b-1njdg9lj29] {
        margin: 0 0 4px;
        color: #162033;
        font-size: 13px;
        font-weight: 750;
        text-transform: uppercase;
    }

    .rab-panel-header p[b-1njdg9lj29],
    .rab-table-header p[b-1njdg9lj29] {
        margin: 0;
        color: var(--rab-muted);
        font-size: 11px;
    }

.rab-chart-legend[b-1njdg9lj29] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    color: var(--rab-muted);
    font-size: 11px;
}

    .rab-chart-legend span[b-1njdg9lj29] {
        display: flex;
        align-items: center;
        gap: 6px;
    }

.rab-legend-dot[b-1njdg9lj29] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.rab-dot-monthly[b-1njdg9lj29] {
    background: var(--rab-success);
}

.rab-dot-cumulative[b-1njdg9lj29] {
    background: var(--rab-primary);
}

/* LINE CHART */

.rab-chart-wrapper[b-1njdg9lj29] {
    width: 100%;
    height: 270px;
    margin-top: 18px;
    overflow: hidden;
}

.rab-line-chart[b-1njdg9lj29] {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.rab-grid-line[b-1njdg9lj29] {
    stroke: #e7ebf0;
    stroke-width: 1;
}

.rab-chart-line[b-1njdg9lj29] {
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.rab-monthly-line[b-1njdg9lj29] {
    stroke: var(--rab-success);
}

.rab-cumulative-line[b-1njdg9lj29] {
    stroke: var(--rab-primary);
}

.rab-chart-point[b-1njdg9lj29] {
    stroke: #fff;
    stroke-width: 2;
}

.rab-monthly-point[b-1njdg9lj29] {
    fill: var(--rab-success);
}

.rab-cumulative-point[b-1njdg9lj29] {
    fill: var(--rab-primary);
}

/*.rab-month-label {
    fill: #65758a;
    font-size: 12px;
}*/

.rab-empty-chart[b-1njdg9lj29] {
    min-height: 270px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 7px;
    color: var(--rab-muted);
}

    .rab-empty-chart i[b-1njdg9lj29] {
        margin-bottom: 5px;
        color: #bfd0e6;
        font-size: 38px;
    }

    .rab-empty-chart strong[b-1njdg9lj29] {
        color: #37465b;
    }

    .rab-empty-chart span[b-1njdg9lj29] {
        font-size: 12px;
    }

/* DONUT */

.rab-usage-body[b-1njdg9lj29] {
    min-height: 270px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(25px, 4vw, 55px);
}

.rab-donut-chart[b-1njdg9lj29] {
    --rab-percentage: 0;
    width: 190px;
    height: 190px;
    flex: 0 0 190px;
    padding: 34px;
    box-sizing: border-box;
    border-radius: 50%;
    background: conic-gradient( var(--rab-success) calc(var(--rab-percentage) * 1%), #e5e8ee 0 );
}

.rab-donut-center[b-1njdg9lj29] {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

    .rab-donut-center strong[b-1njdg9lj29] {
        margin-bottom: 4px;
        font-size: 22px;
    }

    .rab-donut-center span[b-1njdg9lj29] {
        color: var(--rab-muted);
        font-size: 11px;
    }

.rab-donut-detail[b-1njdg9lj29] {
    min-width: 175px;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.rab-donut-item[b-1njdg9lj29] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.rab-donut-dot[b-1njdg9lj29] {
    width: 12px;
    height: 12px;
    margin-top: 3px;
    flex: 0 0 12px;
    border-radius: 50%;
}

.rab-actual-dot[b-1njdg9lj29] {
    background: var(--rab-success);
}

.rab-remaining-dot[b-1njdg9lj29] {
    background: #e1e5ec;
}

.rab-donut-item > div[b-1njdg9lj29] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.rab-donut-item label[b-1njdg9lj29] {
    color: #2d3a4d;
    font-size: 12px;
}

.rab-donut-item strong[b-1njdg9lj29] {
    color: var(--rab-muted);
    font-size: 12px;
    font-weight: 500;
}

/* TABLE */

.rab-table-panel[b-1njdg9lj29] {
    padding: 18px;
}

.rab-table-header[b-1njdg9lj29] {
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.rab-search-box[b-1njdg9lj29] {
    width: 285px;
    height: 38px;
    border: 1px solid var(--rab-border);
    border-radius: 7px;
    background: #fff;
    display: flex;
    align-items: center;
    overflow: hidden;
}

    .rab-search-box i[b-1njdg9lj29] {
        padding-left: 12px;
        color: #8290a4;
        font-size: 12px;
    }

    .rab-search-box input[b-1njdg9lj29] {
        width: 100%;
        min-width: 0;
        height: 100%;
        padding: 0 12px;
        border: 0;
        outline: 0;
        background: transparent;
        color: #263448;
        font-size: 12px;
    }

.rab-table-wrapper[b-1njdg9lj29] {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--rab-border);
    border-radius: 8px;
}

.rab-table[b-1njdg9lj29] {
    width: 100%;
    min-width: 960px;
    border-collapse: collapse;
}

    .rab-table th[b-1njdg9lj29] {
        padding: 11px 12px;
        border-bottom: 1px solid var(--rab-border);
        background: #f8fafc;
        color: #536276;
        font-size: 10px;
        font-weight: 700;
        text-align: left;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .rab-table td[b-1njdg9lj29] {
        padding: 12px;
        border-bottom: 1px solid #edf0f4;
        color: #354257;
        font-size: 12px;
        vertical-align: middle;
    }

    .rab-table tbody tr:last-child td[b-1njdg9lj29] {
        border-bottom: 0;
    }

    .rab-table tbody tr[b-1njdg9lj29] {
        transition: 0.15s ease;
    }

        .rab-table tbody tr:hover[b-1njdg9lj29] {
            background: #f9fbfe;
        }

.rab-text-right[b-1njdg9lj29] {
    text-align: right !important;
}

.rab-account-number[b-1njdg9lj29] {
    color: #42526a;
    font-weight: 600;
}

.rab-account-name[b-1njdg9lj29] {
    color: #28364a;
    font-weight: 600;
}

.rab-table-progress-row[b-1njdg9lj29] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.rab-table-progress[b-1njdg9lj29] {
    width: 110px;
    height: 7px;
    flex: 0 0 110px;
    border-radius: 999px;
    overflow: hidden;
    background: #e7ebf1;
}

    .rab-table-progress span[b-1njdg9lj29] {
        display: block;
        height: 100%;
        max-width: 100%;
        border-radius: inherit;
    }

.rab-progress-safe[b-1njdg9lj29] {
    background: var(--rab-primary);
}

.rab-progress-warning[b-1njdg9lj29] {
    background: var(--rab-warning);
}

.rab-progress-danger[b-1njdg9lj29] {
    background: var(--rab-danger);
}

.rab-table-progress-row strong[b-1njdg9lj29] {
    min-width: 58px;
    color: #46556a;
    font-size: 11px;
    font-weight: 600;
}

.rab-status[b-1njdg9lj29] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 68px;
    padding: 5px 9px;
    border-radius: 6px;
    font-size: 9px;
    font-weight: 750;
    text-transform: uppercase;
}

.rab-status-safe[b-1njdg9lj29] {
    background: var(--rab-success-soft);
    color: #25813d;
}

.rab-status-warning[b-1njdg9lj29] {
    background: var(--rab-warning-soft);
    color: #bd6508;
}

.rab-status-danger[b-1njdg9lj29] {
    background: var(--rab-danger-soft);
    color: #bf2837;
}

/* PAGINATION */

.rab-pagination[b-1njdg9lj29] {
    padding: 15px 8px 2px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

    .rab-pagination > span[b-1njdg9lj29] {
        color: var(--rab-muted);
        font-size: 11px;
    }

.rab-pagination-actions[b-1njdg9lj29] {
    display: flex;
    align-items: center;
    gap: 6px;
}

    .rab-pagination-actions button[b-1njdg9lj29] {
        min-width: 33px;
        height: 33px;
        padding: 0 9px;
        border: 1px solid var(--rab-border);
        border-radius: 6px;
        background: #fff;
        color: #526178;
        font-size: 11px;
        cursor: pointer;
    }

        .rab-pagination-actions button.active[b-1njdg9lj29] {
            border-color: var(--rab-primary);
            background: var(--rab-primary);
            color: #fff;
        }

        .rab-pagination-actions button:disabled[b-1njdg9lj29] {
            opacity: 0.45;
            cursor: not-allowed;
        }

    .rab-pagination-actions select[b-1njdg9lj29] {
        height: 33px;
        margin-left: 7px;
        padding: 0 30px 0 10px;
        border: 1px solid var(--rab-border);
        border-radius: 6px;
        background: #fff;
        color: #435168;
        font-size: 11px;
    }

/* EMPTY TABLE */

.rab-empty-table[b-1njdg9lj29] {
    min-height: 240px;
    border: 1px dashed #d8e0ea;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 7px;
    color: var(--rab-muted);
}

    .rab-empty-table i[b-1njdg9lj29] {
        margin-bottom: 5px;
        color: #bdcadb;
        font-size: 35px;
    }

    .rab-empty-table strong[b-1njdg9lj29] {
        color: #35445a;
    }

    .rab-empty-table span[b-1njdg9lj29] {
        font-size: 12px;
    }

.rab-svg-month-label[b-1njdg9lj29] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #65758a;
    font-family: Inter, Arial, sans-serif;
    font-size: 12px;
    line-height: 1;
    text-align: center;
}

/* TABLET */

@media (max-width: 1200px) {
    .rab-summary-grid[b-1njdg9lj29] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .rab-chart-grid[b-1njdg9lj29] {
        grid-template-columns: 1fr;
    }

    .rab-trend-panel[b-1njdg9lj29],
    .rab-usage-panel[b-1njdg9lj29] {
        min-height: auto;
    }
}

@media (max-width: 900px) {
    .rab-page-header[b-1njdg9lj29] {
        align-items: stretch;
        flex-direction: column;
    }

    .rab-header-actions[b-1njdg9lj29] {
        justify-content: flex-start;
        flex-wrap: wrap;
    }
}

/* MOBILE */

@media (max-width: 767px) {
    .rab-dashboard-page[b-1njdg9lj29] {
        padding: 12px;
    }

    .rab-header-title h1[b-1njdg9lj29] {
        font-size: 20px;
    }

    .rab-header-title p[b-1njdg9lj29] {
        font-size: 12px;
    }

    .rab-header-actions[b-1njdg9lj29] {
        align-items: stretch;
        flex-direction: column;
    }

    .rab-filter-display[b-1njdg9lj29],
    .rab-refresh-button[b-1njdg9lj29] {
        width: 100%;
        box-sizing: border-box;
    }

    .rab-summary-grid[b-1njdg9lj29] {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .rab-summary-card[b-1njdg9lj29] {
        min-height: 105px;
        padding: 15px;
    }

    .rab-summary-info > strong[b-1njdg9lj29] {
        margin-bottom: 12px;
        font-size: 18px;
    }

    .rab-summary-icon[b-1njdg9lj29] {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
    }

    .rab-chart-grid[b-1njdg9lj29] {
        gap: 9px;
    }

    .rab-trend-panel[b-1njdg9lj29],
    .rab-usage-panel[b-1njdg9lj29],
    .rab-table-panel[b-1njdg9lj29] {
        padding: 14px;
    }

    .rab-panel-header[b-1njdg9lj29] {
        flex-direction: column;
    }

    .rab-chart-wrapper[b-1njdg9lj29] {
        height: 230px;
        margin-right: -5px;
        margin-left: -5px;
    }

    .rab-usage-body[b-1njdg9lj29] {
        min-height: auto;
        padding: 22px 0 5px;
        align-items: center;
        flex-direction: column;
        gap: 24px;
    }

    .rab-donut-chart[b-1njdg9lj29] {
        width: 160px;
        height: 160px;
        flex-basis: 160px;
        padding: 29px;
    }

    .rab-donut-detail[b-1njdg9lj29] {
        width: 100%;
        min-width: 0;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .rab-donut-item[b-1njdg9lj29] {
        padding: 11px;
        border: 1px solid var(--rab-border);
        border-radius: 8px;
    }

    .rab-table-header[b-1njdg9lj29] {
        align-items: stretch;
        flex-direction: column;
    }

    .rab-search-box[b-1njdg9lj29] {
        width: 100%;
    }

    /*
        Di mobile, tabel berubah menjadi daftar card.
    */

    .rab-table-wrapper[b-1njdg9lj29] {
        border: 0;
        overflow: visible;
    }

    .rab-table[b-1njdg9lj29] {
        min-width: 0;
        display: block;
    }

        .rab-table thead[b-1njdg9lj29] {
            display: none;
        }

        .rab-table tbody[b-1njdg9lj29],
        .rab-table tr[b-1njdg9lj29],
        .rab-table td[b-1njdg9lj29] {
            display: block;
            width: 100%;
            box-sizing: border-box;
        }

        .rab-table tbody[b-1njdg9lj29] {
            display: grid;
            gap: 10px;
        }

            .rab-table tbody tr[b-1njdg9lj29] {
                padding: 13px;
                border: 1px solid var(--rab-border);
                border-radius: 9px;
                background: #fff;
                box-shadow: 0 3px 8px rgba(15, 23, 42, 0.025);
            }

        .rab-table td[b-1njdg9lj29] {
            min-height: 34px;
            padding: 7px 0;
            border-bottom: 1px dashed #e9edf2;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 15px;
            text-align: right !important;
        }

            .rab-table td:last-child[b-1njdg9lj29] {
                border-bottom: 0;
            }

            .rab-table td[b-1njdg9lj29]::before {
                content: attr(data-label);
                flex: 0 0 105px;
                color: #7a8799;
                font-size: 10px;
                font-weight: 650;
                text-align: left;
                text-transform: uppercase;
            }

    .rab-table-progress-row[b-1njdg9lj29] {
        width: calc(100% - 105px);
        justify-content: flex-end;
    }

    .rab-table-progress[b-1njdg9lj29] {
        width: 75px;
        flex-basis: 75px;
    }

    .rab-pagination[b-1njdg9lj29] {
        align-items: stretch;
        flex-direction: column;
    }

    .rab-pagination-actions[b-1njdg9lj29] {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
    }

        .rab-pagination-actions select[b-1njdg9lj29] {
            width: 100%;
            margin: 5px 0 0;
        }

    .rab-alert-danger[b-1njdg9lj29] {
        align-items: flex-start;
        flex-wrap: wrap;
    }

        .rab-alert-danger button[b-1njdg9lj29] {
            width: 100%;
        }
}

@media (max-width: 420px) {
    .rab-donut-detail[b-1njdg9lj29] {
        grid-template-columns: 1fr;
    }

    .rab-table-progress[b-1njdg9lj29] {
        display: none;
    }

    .rab-table-progress-row strong[b-1njdg9lj29] {
        min-width: 0;
    }
}
/* _content/AccountingWeb/Components/Pages/Owner/TracingKomplain.razor.rz.scp.css */
.tracing-page[b-urq6jhcmmo] {
    --primary: #2563eb;
    --primary-soft: #eff6ff;
    --text-main: #0f172a;
    --text-secondary: #64748b;
    --border: #e2e8f0;
    --background: #f8fafc;
    --card: #ffffff;
    --danger: #ef4444;
    --danger-soft: #fff1f2;
    --warning: #f59e0b;
    --warning-soft: #fff7ed;
    --success: #16a34a;
    --success-soft: #f0fdf4;
    --info: #2563eb;
    --info-soft: #eff6ff;
    width: 100%;
    min-height: 100vh;
    padding: 24px;
    background: var(--background);
    color: var(--text-main);
    box-sizing: border-box;
    font-family: Inter, Arial, sans-serif;
}

    .tracing-page *[b-urq6jhcmmo],
    .tracing-page *[b-urq6jhcmmo]::before,
    .tracing-page *[b-urq6jhcmmo]::after {
        box-sizing: border-box;
    }

/* HEADER */

.page-header[b-urq6jhcmmo] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 20px;
}

    .page-header h1[b-urq6jhcmmo] {
        margin: 0;
        font-size: 26px;
        line-height: 1.2;
        font-weight: 750;
        color: var(--text-main);
    }

    .page-header p[b-urq6jhcmmo] {
        margin: 6px 0 0;
        font-size: 14px;
        color: var(--text-secondary);
    }

.btn-refresh[b-urq6jhcmmo] {
    min-height: 42px;
    padding: 0 17px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
    color: #334155;
    font-size: 14px;
    font-weight: 650;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: 0.2s ease;
}

    .btn-refresh:hover:not(:disabled)[b-urq6jhcmmo] {
        border-color: #bfdbfe;
        background: var(--primary-soft);
        color: var(--primary);
    }

    .btn-refresh:disabled[b-urq6jhcmmo] {
        cursor: not-allowed;
        opacity: 0.65;
    }

/* FILTER */

.filter-card[b-urq6jhcmmo] {
    display: grid;
    grid-template-columns: minmax(145px, 0.8fr) minmax(145px, 0.8fr) minmax(175px, 1fr) minmax(175px, 1fr) minmax(240px, 1.5fr) auto;
    gap: 12px;
    padding: 15px;
    margin-bottom: 18px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 3px 14px rgba(15, 23, 42, 0.04);
}

.filter-item[b-urq6jhcmmo] {
    min-width: 0;
}

    .filter-item label[b-urq6jhcmmo] {
        display: block;
        margin-bottom: 6px;
        font-size: 12px;
        font-weight: 700;
        color: #475569;
    }

    .filter-item .form-control[b-urq6jhcmmo],
    .filter-item select[b-urq6jhcmmo] {
        width: 100%;
        height: 42px;
        padding: 0 12px;
        border: 1px solid var(--border);
        border-radius: 9px;
        outline: none;
        background: #fff;
        color: var(--text-main);
        font-size: 13px;
        transition: 0.2s ease;
    }

        .filter-item .form-control:focus[b-urq6jhcmmo],
        .filter-item select:focus[b-urq6jhcmmo] {
            border-color: #93c5fd;
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.09);
        }

.search-box[b-urq6jhcmmo] {
    position: relative;
}

    .search-box i[b-urq6jhcmmo] {
        position: absolute;
        top: 50%;
        left: 13px;
        transform: translateY(-50%);
        color: #94a3b8;
        font-size: 13px;
    }

    .search-box input[b-urq6jhcmmo] {
        width: 100%;
        height: 42px;
        padding: 0 12px 0 38px;
        border: 1px solid var(--border);
        border-radius: 9px;
        outline: none;
        font-size: 13px;
        color: var(--text-main);
    }

        .search-box input:focus[b-urq6jhcmmo] {
            border-color: #93c5fd;
            box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.09);
        }

.filter-action[b-urq6jhcmmo] {
    align-self: end;
    display: flex;
    gap: 8px;
}

.btn-filter[b-urq6jhcmmo],
.btn-reset[b-urq6jhcmmo] {
    height: 42px;
    padding: 0 15px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    white-space: nowrap;
}

.btn-filter[b-urq6jhcmmo] {
    border: 1px solid var(--primary);
    background: var(--primary);
    color: #fff;
}

    .btn-filter:hover:not(:disabled)[b-urq6jhcmmo] {
        background: #1d4ed8;
    }

    .btn-filter:disabled[b-urq6jhcmmo] {
        cursor: not-allowed;
        opacity: 0.65;
    }

.btn-reset[b-urq6jhcmmo] {
    border: 1px solid var(--border);
    background: #fff;
    color: #475569;
}

    .btn-reset:hover[b-urq6jhcmmo] {
        background: #f8fafc;
        border-color: #cbd5e1;
    }

/* ALERT */

.alert-message[b-urq6jhcmmo] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px 14px;
    margin-bottom: 18px;
    border: 1px solid #fecaca;
    border-radius: 10px;
    background: #fef2f2;
    color: #b91c1c;
    font-size: 13px;
}

/* SUMMARY */

.summary-grid[b-urq6jhcmmo] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 15px;
    margin-bottom: 18px;
}

.summary-card[b-urq6jhcmmo] {
    position: relative;
    min-width: 0;
    min-height: 126px;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--card);
    box-shadow: 0 3px 14px rgba(15, 23, 42, 0.04);
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    transition: 0.2s ease;
    overflow: hidden;
}

    .summary-card[b-urq6jhcmmo]::after {
        content: "";
        position: absolute;
        right: 14px;
        bottom: 0;
        left: 14px;
        height: 3px;
        border-radius: 10px 10px 0 0;
        background: #e2e8f0;
    }

    .summary-card:hover[b-urq6jhcmmo] {
        transform: translateY(-2px);
        border-color: #cbd5e1;
        box-shadow: 0 8px 20px rgba(15, 23, 42, 0.07);
    }

    .summary-card:nth-child(1)[b-urq6jhcmmo]::after {
        background: #60a5fa;
    }

    .summary-card:nth-child(2)[b-urq6jhcmmo]::after {
        background: #f59e0b;
    }

    .summary-card:nth-child(3)[b-urq6jhcmmo]::after {
        background: #ef4444;
    }

    .summary-card:nth-child(4)[b-urq6jhcmmo]::after {
        background: #64748b;
    }

    .summary-card:nth-child(5)[b-urq6jhcmmo]::after {
        background: #22c55e;
    }

.summary-icon[b-urq6jhcmmo] {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
}

.icon-total[b-urq6jhcmmo] {
    color: #2563eb;
    background: #dbeafe;
}

.icon-process[b-urq6jhcmmo] {
    color: #f59e0b;
    background: #fef3c7;
}

.icon-stuck[b-urq6jhcmmo] {
    color: #ef4444;
    background: #fee2e2;
}

.icon-waiting[b-urq6jhcmmo] {
    color: #64748b;
    background: #f1f5f9;
}

.icon-completed[b-urq6jhcmmo] {
    color: #16a34a;
    background: #dcfce7;
}

.summary-content[b-urq6jhcmmo] {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

    .summary-content small[b-urq6jhcmmo] {
        margin-bottom: 5px;
        color: #334155;
        font-size: 13px;
        font-weight: 700;
    }

    .summary-content strong[b-urq6jhcmmo] {
        color: var(--text-main);
        font-size: 27px;
        line-height: 1.1;
        font-weight: 800;
    }

    .summary-content span[b-urq6jhcmmo] {
        margin-top: 10px;
        color: var(--text-secondary);
        font-size: 12px;
    }

/* CONTENT */

.content-grid[b-urq6jhcmmo] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

    .content-grid.detail-open[b-urq6jhcmmo] {
        grid-template-columns: minmax(0, 1fr) 345px;
    }

.table-card[b-urq6jhcmmo],
.detail-card[b-urq6jhcmmo] {
    min-width: 0;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 3px 14px rgba(15, 23, 42, 0.04);
}

.table-card[b-urq6jhcmmo] {
    overflow: hidden;
}

.table-header[b-urq6jhcmmo] {
    min-height: 65px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

    .table-header > div:first-child[b-urq6jhcmmo] {
        display: flex;
        align-items: center;
        gap: 9px;
    }

    .table-header h2[b-urq6jhcmmo],
    .detail-header h2[b-urq6jhcmmo] {
        margin: 0;
        font-size: 17px;
        font-weight: 750;
        color: var(--text-main);
    }

.count-badge[b-urq6jhcmmo] {
    min-width: 25px;
    height: 25px;
    padding: 0 7px;
    border: 1px solid #fecaca;
    border-radius: 50px;
    color: var(--danger);
    background: #fff;
    font-size: 12px;
    font-weight: 750;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sort-box[b-urq6jhcmmo] {
    display: flex;
    align-items: center;
    gap: 8px;
}

    .sort-box label[b-urq6jhcmmo] {
        font-size: 12px;
        color: var(--text-secondary);
    }

    .sort-box select[b-urq6jhcmmo] {
        height: 36px;
        padding: 0 30px 0 10px;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: #fff;
        color: #334155;
        font-size: 12px;
        font-weight: 650;
        outline: none;
    }

/* TABLE */

.table-scroll[b-urq6jhcmmo] {
    width: 100%;
    max-height: 535px;
    overflow: auto;
}

.complaint-table[b-urq6jhcmmo] {
    width: 100%;
    min-width: 1040px;
    border-collapse: separate;
    border-spacing: 0;
}

    .complaint-table th[b-urq6jhcmmo] {
        position: sticky;
        top: 0;
        z-index: 2;
        padding: 12px 13px;
        border-bottom: 1px solid var(--border);
        background: #f8fafc;
        color: #64748b;
        font-size: 11px;
        font-weight: 750;
        text-align: left;
        white-space: nowrap;
    }

    .complaint-table td[b-urq6jhcmmo] {
        padding: 13px;
        border-bottom: 1px solid #edf2f7;
        color: #334155;
        font-size: 12px;
        vertical-align: middle;
    }

    .complaint-table tbody tr[b-urq6jhcmmo] {
        cursor: pointer;
        transition: background 0.16s ease;
    }

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

        .complaint-table tbody tr:last-child td[b-urq6jhcmmo] {
            border-bottom: 0;
        }

        .complaint-table tbody tr.row-danger[b-urq6jhcmmo] {
            background: #fff7f7;
        }

            .complaint-table tbody tr.row-danger:hover[b-urq6jhcmmo] {
                background: #fff1f2;
            }

.complaint-number[b-urq6jhcmmo] {
    color: #1e293b;
    font-size: 12px;
    white-space: nowrap;
}

.complaint-description[b-urq6jhcmmo] {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.analysis-status[b-urq6jhcmmo] {
    min-width: 145px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

    .analysis-status small[b-urq6jhcmmo] {
        max-width: 170px;
        color: var(--text-secondary);
        font-size: 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.status-badge[b-urq6jhcmmo] {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 4px 9px;
    border-radius: 6px;
    font-size: 10px;
    line-height: 1.2;
    font-weight: 750;
    white-space: nowrap;
}

.status-danger[b-urq6jhcmmo] {
    color: #dc2626;
    background: #fee2e2;
}

.status-warning[b-urq6jhcmmo] {
    color: #d97706;
    background: #ffedd5;
}

.status-process[b-urq6jhcmmo] {
    color: #1d4ed8;
    background: #dbeafe;
}

.status-completed[b-urq6jhcmmo] {
    color: #15803d;
    background: #dcfce7;
}

.status-default[b-urq6jhcmmo] {
    color: #475569;
    background: #f1f5f9;
}

.age-danger[b-urq6jhcmmo] {
    color: #ef4444;
}

.age-warning[b-urq6jhcmmo] {
    color: #d97706;
}

.age-normal[b-urq6jhcmmo] {
    color: #2563eb;
}

.date-value[b-urq6jhcmmo] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    white-space: nowrap;
}

    .date-value small[b-urq6jhcmmo] {
        color: var(--text-secondary);
        font-size: 10px;
    }

.btn-detail[b-urq6jhcmmo] {
    width: 29px;
    height: 29px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .btn-detail:hover[b-urq6jhcmmo] {
        background: #eaf2ff;
        color: var(--primary);
    }

/* LOADING AND EMPTY */

.loading-state[b-urq6jhcmmo],
.empty-state[b-urq6jhcmmo] {
    min-height: 320px;
    padding: 30px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    text-align: center;
}

    .loading-state i[b-urq6jhcmmo] {
        color: var(--primary);
        font-size: 26px;
    }

    .empty-state i[b-urq6jhcmmo] {
        color: #cbd5e1;
        font-size: 42px;
    }

    .empty-state strong[b-urq6jhcmmo] {
        color: #334155;
        font-size: 15px;
    }

    .empty-state span[b-urq6jhcmmo] {
        font-size: 12px;
    }

/* PAGINATION */

.pagination-footer[b-urq6jhcmmo] {
    min-height: 68px;
    padding: 13px 18px;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.page-size[b-urq6jhcmmo] {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--text-secondary);
    font-size: 12px;
}

    .page-size select[b-urq6jhcmmo] {
        height: 34px;
        padding: 0 26px 0 9px;
        border: 1px solid var(--border);
        border-radius: 7px;
        background: #fff;
        color: #334155;
        outline: none;
    }

.pagination[b-urq6jhcmmo] {
    display: flex;
    align-items: center;
    gap: 5px;
}

    .pagination button[b-urq6jhcmmo] {
        min-width: 34px;
        height: 34px;
        padding: 0 8px;
        border: 1px solid var(--border);
        border-radius: 7px;
        background: #fff;
        color: #475569;
        font-size: 12px;
        font-weight: 650;
        cursor: pointer;
    }

        .pagination button:hover:not(:disabled):not(.active)[b-urq6jhcmmo] {
            border-color: #bfdbfe;
            color: var(--primary);
            background: var(--primary-soft);
        }

        .pagination button.active[b-urq6jhcmmo] {
            border-color: var(--primary);
            background: var(--primary);
            color: #fff;
        }

        .pagination button:disabled[b-urq6jhcmmo] {
            cursor: not-allowed;
            opacity: 0.45;
        }

/* DETAIL */

.detail-card[b-urq6jhcmmo] {
    position: sticky;
    top: 15px;
    overflow: hidden;
}

.detail-header[b-urq6jhcmmo] {
    min-height: 62px;
    padding: 15px 17px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.btn-close-detail[b-urq6jhcmmo] {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #64748b;
    cursor: pointer;
}

    .btn-close-detail:hover[b-urq6jhcmmo] {
        color: #dc2626;
        background: #fef2f2;
    }

.detail-title[b-urq6jhcmmo] {
    padding: 17px;
    border-bottom: 1px solid var(--border);
}

    .detail-title > div[b-urq6jhcmmo] {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 9px;
    }

        .detail-title > div > strong[b-urq6jhcmmo] {
            color: #1e293b;
            font-size: 14px;
        }

    .detail-title h3[b-urq6jhcmmo] {
        margin: 14px 0 5px;
        color: #0f172a;
        font-size: 17px;
        font-weight: 750;
    }

    .detail-title p[b-urq6jhcmmo] {
        margin: 0;
        color: var(--text-secondary);
        font-size: 12px;
    }

.detail-summary[b-urq6jhcmmo] {
    margin: 15px 17px;
    padding: 12px 6px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fbfdff;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

    .detail-summary > div[b-urq6jhcmmo] {
        min-width: 0;
        padding: 0 8px;
        border-right: 1px solid var(--border);
        text-align: center;
    }

        .detail-summary > div:last-child[b-urq6jhcmmo] {
            border-right: 0;
        }

    .detail-summary small[b-urq6jhcmmo] {
        display: block;
        margin-bottom: 4px;
        color: var(--text-secondary);
        font-size: 9px;
    }

    .detail-summary strong[b-urq6jhcmmo] {
        display: block;
        color: #334155;
        font-size: 11px;
        overflow-wrap: anywhere;
    }

    .detail-summary .target-overdue[b-urq6jhcmmo] {
        color: var(--danger);
    }

.detail-section[b-urq6jhcmmo] {
    padding: 4px 17px 17px;
}

    .detail-section h4[b-urq6jhcmmo] {
        margin: 0 0 14px;
        color: #1e293b;
        font-size: 13px;
        font-weight: 750;
    }

/* TIMELINE */

.timeline[b-urq6jhcmmo] {
    position: relative;
}

.timeline-item[b-urq6jhcmmo] {
    position: relative;
    min-height: 58px;
    padding: 0 0 15px 37px;
}

    .timeline-item[b-urq6jhcmmo]::before {
        content: "";
        position: absolute;
        top: 22px;
        bottom: -2px;
        left: 11px;
        width: 2px;
        background: #e2e8f0;
    }

    .timeline-item:last-child[b-urq6jhcmmo]::before {
        display: none;
    }

.timeline-marker[b-urq6jhcmmo] {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 24px;
    height: 24px;
    border: 2px solid #e2e8f0;
    border-radius: 50%;
    background: #fff;
    color: #94a3b8;
    font-size: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.timeline-content[b-urq6jhcmmo] {
    min-width: 0;
}

.timeline-title[b-urq6jhcmmo] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

    .timeline-title strong[b-urq6jhcmmo] {
        color: #1e293b;
        font-size: 12px;
    }

    .timeline-title span[b-urq6jhcmmo] {
        flex: 0 0 auto;
        color: var(--text-secondary);
        font-size: 9px;
    }

.timeline-content small[b-urq6jhcmmo] {
    display: block;
    margin-top: 3px;
    color: var(--text-secondary);
    font-size: 10px;
}

.timeline-content p[b-urq6jhcmmo] {
    margin: 4px 0 0;
    color: #64748b;
    font-size: 10px;
    line-height: 1.45;
}

.timeline-done .timeline-marker[b-urq6jhcmmo] {
    border-color: #86efac;
    background: #dcfce7;
    color: #16a34a;
}

.timeline-done[b-urq6jhcmmo]::before {
    background: #86efac;
}

.timeline-active .timeline-marker[b-urq6jhcmmo] {
    border-color: #93c5fd;
    background: #dbeafe;
    color: #2563eb;
}

.timeline-waiting .timeline-marker[b-urq6jhcmmo] {
    border-color: #fcd34d;
    background: #fef3c7;
    color: #d97706;
}

.timeline-problem .timeline-marker[b-urq6jhcmmo] {
    border-color: #fca5a5;
    background: #fee2e2;
    color: #dc2626;
}

.timeline-problem .timeline-title strong[b-urq6jhcmmo] {
    color: #dc2626;
}

.empty-history[b-urq6jhcmmo] {
    padding: 16px;
    border: 1px dashed var(--border);
    border-radius: 9px;
    color: var(--text-secondary);
    font-size: 12px;
    text-align: center;
}

/* DESCRIPTION */

.reason-box[b-urq6jhcmmo] {
    min-height: 72px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: #fbfdff;
    color: #475569;
    font-size: 11px;
    line-height: 1.55;
}

/* PHOTOS */

.photo-grid[b-urq6jhcmmo] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.photo-item[b-urq6jhcmmo] {
    position: relative;
    min-width: 0;
}

    .photo-item > span[b-urq6jhcmmo] {
        position: absolute;
        top: 6px;
        left: 6px;
        z-index: 1;
        padding: 3px 6px;
        border-radius: 4px;
        background: rgba(15, 23, 42, 0.75);
        color: #fff;
        font-size: 9px;
    }

    .photo-item img[b-urq6jhcmmo],
    .photo-empty[b-urq6jhcmmo] {
        width: 100%;
        height: 105px;
        border-radius: 8px;
    }

    .photo-item img[b-urq6jhcmmo] {
        display: block;
        object-fit: cover;
        border: 1px solid var(--border);
    }

.photo-empty[b-urq6jhcmmo] {
    border: 1px dashed #cbd5e1;
    background: #f8fafc;
    color: #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

/* SCROLLBAR */

.table-scroll[b-urq6jhcmmo]::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.table-scroll[b-urq6jhcmmo]::-webkit-scrollbar-track {
    background: #f1f5f9;
}

.table-scroll[b-urq6jhcmmo]::-webkit-scrollbar-thumb {
    border-radius: 20px;
    background: #cbd5e1;
}

    .table-scroll[b-urq6jhcmmo]::-webkit-scrollbar-thumb:hover {
        background: #94a3b8;
    }

/* RESPONSIVE */

@media (max-width: 1400px) {
    .filter-card[b-urq6jhcmmo] {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .filter-search[b-urq6jhcmmo] {
        grid-column: span 2;
    }

    .filter-action[b-urq6jhcmmo] {
        justify-content: flex-end;
    }

    .content-grid.detail-open[b-urq6jhcmmo] {
        grid-template-columns: minmax(0, 1fr) 320px;
    }
}

@media (max-width: 1150px) {
    .summary-grid[b-urq6jhcmmo] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .content-grid.detail-open[b-urq6jhcmmo] {
        grid-template-columns: minmax(0, 1fr);
    }

    .detail-card[b-urq6jhcmmo] {
        position: static;
    }
}

@media (max-width: 850px) {
    .tracing-page[b-urq6jhcmmo] {
        padding: 16px;
    }

    .filter-card[b-urq6jhcmmo] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .filter-search[b-urq6jhcmmo] {
        grid-column: span 2;
    }

    .filter-action[b-urq6jhcmmo] {
        grid-column: span 2;
    }

        .filter-action button[b-urq6jhcmmo] {
            flex: 1;
        }

    .summary-grid[b-urq6jhcmmo] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .table-header[b-urq6jhcmmo] {
        align-items: flex-start;
        flex-direction: column;
    }

    .sort-box[b-urq6jhcmmo] {
        width: 100%;
        justify-content: space-between;
    }

        .sort-box select[b-urq6jhcmmo] {
            flex: 1;
        }
}

@media (max-width: 575px) {
    .tracing-page[b-urq6jhcmmo] {
        padding: 12px;
    }

    .page-header[b-urq6jhcmmo] {
        align-items: flex-start;
        flex-direction: column;
    }

        .page-header h1[b-urq6jhcmmo] {
            font-size: 22px;
        }

    .btn-refresh[b-urq6jhcmmo] {
        width: 100%;
    }

    .filter-card[b-urq6jhcmmo] {
        grid-template-columns: 1fr;
    }

    .filter-search[b-urq6jhcmmo],
    .filter-action[b-urq6jhcmmo] {
        grid-column: auto;
    }

    .filter-action[b-urq6jhcmmo] {
        flex-direction: column;
    }

    .summary-grid[b-urq6jhcmmo] {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .summary-card[b-urq6jhcmmo] {
        min-height: 110px;
    }

    .pagination-footer[b-urq6jhcmmo] {
        align-items: flex-start;
        flex-direction: column;
    }

    .pagination[b-urq6jhcmmo] {
        width: 100%;
        overflow-x: auto;
        padding-bottom: 3px;
    }

    .detail-summary[b-urq6jhcmmo] {
        grid-template-columns: 1fr;
        padding: 0;
    }

        .detail-summary > div[b-urq6jhcmmo] {
            padding: 10px;
            border-right: 0;
            border-bottom: 1px solid var(--border);
        }

            .detail-summary > div:last-child[b-urq6jhcmmo] {
                border-bottom: 0;
            }

    .photo-grid[b-urq6jhcmmo] {
        grid-template-columns: 1fr;
    }
}
/* _content/AccountingWeb/Components/Pages/Pegawai/OrgNode.razor.rz.scp.css */
.org-tree-node[b-brza2f8dyg] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: max-content;
}

/* =========================================================
   EMPLOYEE CARD
   ========================================================= */

.employee-node[b-brza2f8dyg] {
    position: relative;
    z-index: 2;
    width: 220px;
    min-height: 82px;
    padding: 13px 12px;
    border: 1px solid hsl(var(--node-hue), 65%, 78%);
    border-radius: 13px;
    background: linear-gradient( 145deg, #ffffff, hsl(var(--node-hue), 75%, 97%) );
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: center;
    gap: 11px;
    box-sizing: border-box;
    color: #0f172a;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 5px 18px rgba(15, 23, 42, 0.06);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

    .employee-node:hover[b-brza2f8dyg] {
        z-index: 5;
        transform: translateY(-2px);
        box-shadow: 0 12px 26px rgba(15, 23, 42, 0.12);
    }

    .employee-node:active[b-brza2f8dyg] {
        transform: translateY(0);
    }

    .employee-node:focus-visible[b-brza2f8dyg] {
        outline: 3px solid rgba(37, 99, 235, 0.22);
        outline-offset: 3px;
    }

.employee-photo[b-brza2f8dyg] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    background: #e2e8f0;
    flex-shrink: 0;
}

    .employee-photo img[b-brza2f8dyg] {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
    }

.photo-fallback[b-brza2f8dyg] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: hsl(var(--node-hue), 75%, 93%);
    color: hsl(var(--node-hue), 65%, 35%);
    font-size: 14px;
    font-weight: 800;
}

.employee-node-info[b-brza2f8dyg] {
    min-width: 0;
    padding-top: 9px;
}

.employee-name[b-brza2f8dyg] {
    margin-bottom: 5px;
    padding-right: 3px;
    overflow: hidden;
    color: #0f172a;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.employee-position[b-brza2f8dyg] {
    overflow: hidden;
    color: #64748b;
    font-size: 10px;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.employee-division[b-brza2f8dyg] {
    color: #475569;
}

.level-badge[b-brza2f8dyg] {
    position: absolute;
    top: 7px;
    right: 8px;
    max-width: 105px;
    padding: 3px 7px;
    border-radius: 999px;
    overflow: hidden;
    background: hsl(var(--node-hue), 80%, 92%);
    color: hsl(var(--node-hue), 65%, 36%);
    font-size: 8px;
    font-weight: 800;
    line-height: 1.2;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}
/* =========================================================
   DESKTOP CONNECTOR
   ========================================================= */

.org-tree-children[b-brza2f8dyg] {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 36px;
    padding-top: 30px;
}

/*
 * Garis turun dari parent menuju garis horizontal.
 */
.org-tree-node.has-children > .org-tree-children[b-brza2f8dyg]::after {
    position: absolute;
    z-index: 0;
    top: -30px;
    left: 50%;
    width: 2px;
    height: 30px;
    background: #b8c4d3;
    content: "";
    transform: translateX(-50%);
}

/*
 * Garis horizontal dari child pertama ke child terakhir.
 */
.org-tree-node.has-children > .org-tree-children[b-brza2f8dyg]::before {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 110px;
    right: 110px;
    height: 2px;
    background: #b8c4d3;
    content: "";
}

.org-child-item[b-brza2f8dyg] {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

    /*
 * Garis vertikal dari garis horizontal menuju card child.
 */
    .org-child-item[b-brza2f8dyg]::before {
        position: absolute;
        z-index: 0;
        top: -30px;
        left: 50%;
        width: 2px;
        height: 30px;
        background: #b8c4d3;
        content: "";
        transform: translateX(-50%);
    }

/*
 * Titik pada cabang child.
 */
.child-junction[b-brza2f8dyg] {
    position: absolute;
    z-index: 4;
    top: -35px;
    left: 50%;
    width: 11px;
    height: 11px;
    border: 2px solid #ffffff;
    border-radius: 50%;
    background: hsl(var(--child-hue), 65%, 62%);
    box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.25);
    box-sizing: border-box;
    transform: translateX(-50%);
}

/*
 * Satu child tidak membutuhkan garis horizontal.
 */
.org-tree-children:has(> .org-child-item:only-child)[b-brza2f8dyg]::before {
    display: none;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) and (min-width: 769px) {
    .employee-node[b-brza2f8dyg] {
        width: 205px;
    }

    .org-tree-children[b-brza2f8dyg] {
        gap: 26px;
    }

    .org-tree-node.has-children > .org-tree-children[b-brza2f8dyg]::before {
        left: 102.5px;
        right: 102.5px;
    }
}

/* =========================================================
   MOBILE PARENT → CHILD CONNECTOR
   ========================================================= */

@media (max-width: 768px) {
    .org-tree-node[b-brza2f8dyg] {
        --mobile-card-height: 88px;
        --mobile-card-center: 44px;
        --mobile-indent: 36px;
        --mobile-axis: 18px;
        --mobile-gap: 16px;
        position: relative;
        width: 100%;
        min-width: 0;
        align-items: stretch;
    }

    .employee-node[b-brza2f8dyg] {
        width: 100%;
        min-height: var(--mobile-card-height);
        padding: 13px 44px 13px 13px;
        border-radius: 13px;
        grid-template-columns: 50px minmax(0, 1fr);
        gap: 12px;
        box-shadow: 0 4px 14px rgba(15, 23, 42, 0.055);
    }

        .employee-node:hover[b-brza2f8dyg] {
            transform: none;
            box-shadow: 0 6px 18px rgba(15, 23, 42, 0.09);
        }

    .employee-photo[b-brza2f8dyg] {
        width: 50px;
        height: 50px;
    }

    .employee-node-info[b-brza2f8dyg] {
        min-width: 0;
        padding-top: 7px;
    }

    .employee-name[b-brza2f8dyg] {
        margin-bottom: 5px;
        padding-right: 48px;
        overflow: hidden;
        font-size: 13px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .employee-position[b-brza2f8dyg] {
        max-width: 100%;
        overflow: hidden;
        font-size: 10px;
        line-height: 1.4;
        text-overflow: ellipsis;
        white-space: normal;
    }

    .level-badge[b-brza2f8dyg] {
        top: 10px;
        right: 10px;
        max-width: 92px;
        padding: 4px 8px;
        font-size: 8px;
    }

    /*
     * Daftar child berada di bawah parent dan masuk ke kanan.
     */
    .org-tree-children[b-brza2f8dyg] {
        position: relative;
        width: 100%;
        padding: var(--mobile-gap) 0 0 var(--mobile-indent);
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: var(--mobile-gap);
        box-sizing: border-box;
    }

    /*
     * Matikan garis connector desktop.
     */
    .org-tree-node.has-children > .org-tree-children[b-brza2f8dyg]::before,
    .org-tree-node.has-children > .org-tree-children[b-brza2f8dyg]::after {
        display: none;
    }

    .org-child-item[b-brza2f8dyg] {
        position: relative;
        width: 100%;
        display: block;
    }

        /*
     * Garis vertikal hubungan parent dengan child.
     *
     * Child selain terakhir meneruskan garis sampai
     * ke sibling berikutnya.
     */
        .org-child-item[b-brza2f8dyg]::before {
            position: absolute;
            z-index: 0;
            top: calc(var(--mobile-gap) * -1);
            left: calc(var(--mobile-axis) * -1);
            width: 2px;
            height: calc(100% + var(--mobile-gap));
            background: #b8c4d3;
            content: "";
            transform: none;
        }

        /*
     * Child terakhir berhenti tepat di tengah card.
     */
        .org-child-item:last-child[b-brza2f8dyg]::before {
            height: calc( var(--mobile-card-center) + var(--mobile-gap) );
        }

        /*
     * Garis horizontal dari sumbu menuju card.
     */
        .org-child-item[b-brza2f8dyg]::after {
            position: absolute;
            z-index: 0;
            top: calc(var(--mobile-card-center) - 1px);
            left: calc(var(--mobile-axis) * -1);
            width: var(--mobile-axis);
            height: 2px;
            background: #b8c4d3;
            content: "";
        }

    /*
     * Titik child berada tepat pada sudut connector.
     */
    .child-junction[b-brza2f8dyg] {
        position: absolute;
        z-index: 5;
        top: calc(var(--mobile-card-center) - 6px);
        left: calc((var(--mobile-axis) * -1) - 6px);
        width: 12px;
        height: 12px;
        border: 2px solid #ffffff;
        border-radius: 50%;
        background: hsl(var(--child-hue), 65%, 62%);
        box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.25);
        box-sizing: border-box;
        transform: none;
    }

    /*
     * Hubungan child dengan grandchild dimulai dari
     * tengah card child, bukan dari kotak abu-abu.
     */
    .org-child-item > .org-tree-node.has-children[b-brza2f8dyg]::after {
        position: absolute;
        z-index: 0;
        top: var(--mobile-card-center);
        left: var(--mobile-axis);
        width: 2px;
        height: calc( var(--mobile-card-center) + var(--mobile-gap) );
        background: #b8c4d3;
        content: "";
    }
}

/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 420px) {
    .org-tree-node[b-brza2f8dyg] {
        --mobile-card-height: 84px;
        --mobile-card-center: 42px;
        --mobile-indent: 32px;
        --mobile-axis: 16px;
        --mobile-gap: 14px;
    }

    .employee-node[b-brza2f8dyg] {
        min-height: var(--mobile-card-height);
        padding: 12px 38px 12px 11px;
        grid-template-columns: 46px minmax(0, 1fr);
        gap: 10px;
    }

    .employee-photo[b-brza2f8dyg] {
        width: 46px;
        height: 46px;
    }

    .employee-name[b-brza2f8dyg] {
        padding-right: 40px;
        font-size: 12px;
    }

    .employee-position[b-brza2f8dyg] {
        font-size: 9.5px;
    }

    .level-badge[b-brza2f8dyg] {
        right: 8px;
        max-width: 82px;
    }
}

/* =========================================================
   DESKTOP ONLY CONNECTOR FIX
   MOBILE TIDAK TERPENGARUH
   ========================================================= */

@media (min-width: 769px) {
    /*
     * Variabel connector desktop.
     */
    .org-tree-children[b-brza2f8dyg] {
        --desktop-connector-height: 30px;
        --desktop-child-gap: 36px;
        --desktop-half-gap: 18px;
        position: relative;
        /*
         * Memberikan ruang nyata antara parent
         * dan garis horizontal.
         */
        margin-top: var(--desktop-connector-height);
        padding-top: var(--desktop-connector-height);
        gap: var(--desktop-child-gap);
    }

    /*
     * Garis vertikal dari parent menuju
     * garis horizontal children.
     *
     * Ini memperbaiki bagian yang sebelumnya
     * tidak memiliki garis penghubung.
     */
    .org-tree-node.has-children > .org-tree-children[b-brza2f8dyg]::after {
        position: absolute;
        z-index: 0;
        top: calc(var(--desktop-connector-height) * -1);
        left: 50%;
        width: 2px;
        height: var(--desktop-connector-height);
        display: block;
        background: #b8c4d3;
        content: "";
        transform: translateX(-50%);
    }

    /*
     * Matikan garis horizontal lama yang menggunakan
     * left: 110px dan right: 110px.
     *
     * Garis lama mengikuti lebar subtree sehingga
     * melewati Manager terakhir.
     */
    .org-tree-node.has-children > .org-tree-children[b-brza2f8dyg]::before {
        display: none;
    }

    /*
     * Setiap wrapper child menjadi dasar
     * pembuatan garis horizontal.
     */
    .org-child-item[b-brza2f8dyg] {
        position: relative;
        display: flex;
        align-items: flex-start;
        justify-content: center;
    }

        /*
     * Garis dari tengah child menuju arah kiri.
     */
        .org-child-item[b-brza2f8dyg]::before {
            position: absolute;
            z-index: 0;
            top: calc(var(--desktop-connector-height) * -1);
            right: 50%;
            left: auto;
            width: calc(50% + var(--desktop-half-gap));
            height: 2px;
            display: block;
            background: #b8c4d3;
            content: "";
            transform: none;
        }

        /*
     * Garis dari tengah child menuju arah kanan.
     */
        .org-child-item[b-brza2f8dyg]::after {
            position: absolute;
            z-index: 0;
            top: calc(var(--desktop-connector-height) * -1);
            left: 50%;
            right: auto;
            width: calc(50% + var(--desktop-half-gap));
            height: 2px;
            display: block;
            background: #b8c4d3;
            content: "";
            transform: none;
        }

        /*
     * Child pertama tidak boleh memiliki
     * garis yang keluar ke sebelah kiri.
     */
        .org-child-item:first-child[b-brza2f8dyg]::before {
            display: none;
        }

        /*
     * Child terakhir tidak boleh memiliki
     * garis yang keluar ke sebelah kanan.
     *
     * Ini menghilangkan garis berlebih
     * yang Anda lingkari.
     */
        .org-child-item:last-child[b-brza2f8dyg]::after {
            display: none;
        }

        /*
     * Bila hanya ada satu child,
     * tidak membutuhkan garis horizontal.
     */
        .org-child-item:only-child[b-brza2f8dyg]::before,
        .org-child-item:only-child[b-brza2f8dyg]::after {
            display: none;
        }

    /*
     * Titik connector berada tepat pada
     * garis horizontal.
     */
    .child-junction[b-brza2f8dyg] {
        position: absolute;
        z-index: 4;
        top: calc( (var(--desktop-connector-height) * -1) - 5px );
        left: 50%;
        width: 11px;
        height: 11px;
        display: block;
        border: 2px solid #ffffff;
        border-radius: 50%;
        background: hsl(var(--child-hue), 65%, 62%);
        box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.25);
        box-sizing: border-box;
        transform: translateX(-50%);
    }

        /*
     * Garis vertikal dari titik menuju card child.
     */
        .child-junction[b-brza2f8dyg]::after {
            position: absolute;
            z-index: -1;
            top: 9px;
            left: 50%;
            width: 2px;
            height: 26px;
            display: block;
            background: #b8c4d3;
            content: "";
            transform: translateX(-50%);
        }
}

/* =========================================================
   TABLET DESKTOP MODE
   Tetap tidak menyentuh mobile <= 768px
   ========================================================= */

@media (min-width: 769px) and (max-width: 900px) {
    .org-tree-children[b-brza2f8dyg] {
        --desktop-child-gap: 26px;
        --desktop-half-gap: 13px;
    }
}
/* _content/AccountingWeb/Components/Pages/Pegawai/PerjanjianKerjaTab.razor.rz.scp.css */
.pk-page[b-uf6l1l7d1i] {
    width: 100%;
    color: #172033;
    font-family: Inter, Arial, sans-serif;
}

.pk-header[b-uf6l1l7d1i] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 18px;
}

.pk-eyebrow[b-uf6l1l7d1i] {
    display: block;
    margin-bottom: 5px;
    color: #64748b;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
}

.pk-header h3[b-uf6l1l7d1i] {
    margin: 0;
    color: #0f172a;
    font-size: 24px;
    font-weight: 800;
}

.pk-header p[b-uf6l1l7d1i] {
    margin: 7px 0 0;
    color: #64748b;
    font-size: 14px;
}

.pk-btn-add[b-uf6l1l7d1i],
.pk-btn-add-secondary[b-uf6l1l7d1i] {
    min-height: 42px;
    border: 0;
    border-radius: 10px;
    background: #2563eb;
    color: #fff;
    padding: 0 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    transition: 0.18s ease;
}

    .pk-btn-add:hover[b-uf6l1l7d1i],
    .pk-btn-add-secondary:hover[b-uf6l1l7d1i] {
        background: #1d4ed8;
        transform: translateY(-1px);
    }

    .pk-btn-add:disabled[b-uf6l1l7d1i] {
        cursor: not-allowed;
        opacity: 0.65;
    }

.pk-employee-bar[b-uf6l1l7d1i] {
    min-height: 70px;
    margin-bottom: 18px;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #fff;
    padding: 13px 16px;
    display: flex;
    align-items: center;
    gap: 13px;
}

.pk-avatar[b-uf6l1l7d1i] {
    width: 43px;
    height: 43px;
    flex: 0 0 43px;
    border-radius: 12px;
    background: #eff6ff;
    color: #2563eb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 800;
}

.pk-employee-info[b-uf6l1l7d1i] {
    min-width: 0;
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 3px;
}

    .pk-employee-info strong[b-uf6l1l7d1i] {
        color: #0f172a;
        font-size: 15px;
    }

    .pk-employee-info span[b-uf6l1l7d1i] {
        color: #64748b;
        font-size: 12px;
    }

.pk-contract-total[b-uf6l1l7d1i] {
    padding-left: 18px;
    border-left: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

    .pk-contract-total strong[b-uf6l1l7d1i] {
        color: #0f172a;
        font-size: 20px;
        line-height: 1;
    }

    .pk-contract-total span[b-uf6l1l7d1i] {
        margin-top: 5px;
        color: #64748b;
        font-size: 11px;
    }

.pk-alert[b-uf6l1l7d1i] {
    margin-bottom: 16px;
    border: 1px solid;
    border-radius: 11px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    font-size: 13px;
    font-weight: 600;
}

    .pk-alert > div[b-uf6l1l7d1i] {
        display: flex;
        align-items: center;
        gap: 9px;
    }

    .pk-alert.success[b-uf6l1l7d1i] {
        border-color: #bbf7d0;
        background: #f0fdf4;
        color: #15803d;
    }

    .pk-alert.danger[b-uf6l1l7d1i] {
        border-color: #fecaca;
        background: #fef2f2;
        color: #b91c1c;
    }

    .pk-alert button[b-uf6l1l7d1i] {
        border: 0;
        background: transparent;
        color: inherit;
        cursor: pointer;
    }

.pk-list[b-uf6l1l7d1i] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.pk-card[b-uf6l1l7d1i] {
    position: relative;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    border-radius: 15px;
    background: #fff;
    display: flex;
    transition: 0.18s ease;
}

    .pk-card:hover[b-uf6l1l7d1i] {
        border-color: #cbd5e1;
        box-shadow: 0 9px 26px rgba(15, 23, 42, 0.07);
        transform: translateY(-1px);
    }

.pk-card-accent[b-uf6l1l7d1i] {
    width: 5px;
    flex: 0 0 5px;
}

    .pk-card-accent.active[b-uf6l1l7d1i] {
        background: #22c55e;
    }

    .pk-card-accent.warning[b-uf6l1l7d1i] {
        background: #f59e0b;
    }

    .pk-card-accent.expired[b-uf6l1l7d1i] {
        background: #ef4444;
    }

    .pk-card-accent.upcoming[b-uf6l1l7d1i] {
        background: #3b82f6;
    }

.pk-card-main[b-uf6l1l7d1i] {
    min-width: 0;
    flex: 1;
    padding: 18px;
}

.pk-card-top[b-uf6l1l7d1i] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.pk-type-area[b-uf6l1l7d1i] {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.pk-type-icon[b-uf6l1l7d1i] {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 11px;
    background: #f1f5f9;
    color: #475569;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pk-type-row[b-uf6l1l7d1i] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
}

    .pk-type-row h4[b-uf6l1l7d1i] {
        margin: 0;
        color: #0f172a;
        font-size: 17px;
        font-weight: 800;
    }

.pk-number[b-uf6l1l7d1i] {
    display: block;
    margin-top: 5px;
    color: #64748b;
    font-size: 13px;
}

.pk-status[b-uf6l1l7d1i] {
    min-height: 25px;
    border-radius: 999px;
    padding: 4px 9px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 800;
}

.pk-status-dot[b-uf6l1l7d1i] {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.pk-status.active[b-uf6l1l7d1i] {
    background: #dcfce7;
    color: #15803d;
}

    .pk-status.active .pk-status-dot[b-uf6l1l7d1i] {
        background: #22c55e;
    }

.pk-status.warning[b-uf6l1l7d1i] {
    background: #fef3c7;
    color: #b45309;
}

    .pk-status.warning .pk-status-dot[b-uf6l1l7d1i] {
        background: #f59e0b;
    }

.pk-status.expired[b-uf6l1l7d1i] {
    background: #fee2e2;
    color: #b91c1c;
}

    .pk-status.expired .pk-status-dot[b-uf6l1l7d1i] {
        background: #ef4444;
    }

.pk-status.upcoming[b-uf6l1l7d1i] {
    background: #dbeafe;
    color: #1d4ed8;
}

    .pk-status.upcoming .pk-status-dot[b-uf6l1l7d1i] {
        background: #3b82f6;
    }

.pk-actions[b-uf6l1l7d1i] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 7px;
}

.pk-action[b-uf6l1l7d1i] {
    min-height: 33px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    color: #475569;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

    .pk-action:hover[b-uf6l1l7d1i] {
        background: #f8fafc;
        color: #0f172a;
    }

    .pk-action.preview:hover[b-uf6l1l7d1i],
    .pk-action.download:hover[b-uf6l1l7d1i] {
        border-color: #bfdbfe;
        background: #eff6ff;
        color: #2563eb;
    }

    .pk-action.edit:hover[b-uf6l1l7d1i] {
        border-color: #fde68a;
        background: #fffbeb;
        color: #b45309;
    }

    .pk-action.delete:hover[b-uf6l1l7d1i] {
        border-color: #fecaca;
        background: #fef2f2;
        color: #dc2626;
    }

.pk-date-grid[b-uf6l1l7d1i] {
    margin-top: 17px;
    border-radius: 11px;
    background: #f8fafc;
    padding: 13px 15px;
    display: grid;
    grid-template-columns: 1fr auto 1fr auto;
    align-items: center;
    gap: 16px;
}

.pk-date-item[b-uf6l1l7d1i] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pk-label[b-uf6l1l7d1i] {
    color: #64748b;
    font-size: 11px;
    font-weight: 700;
}

.pk-date-item strong[b-uf6l1l7d1i] {
    color: #0f172a;
    font-size: 13px;
}

.pk-date-divider[b-uf6l1l7d1i] {
    color: #94a3b8;
    font-size: 11px;
}

.pk-duration[b-uf6l1l7d1i] {
    border-left: 1px solid #dbe3ed;
    padding-left: 16px;
    color: #475569;
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.pk-note[b-uf6l1l7d1i] {
    margin-top: 13px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 11px 13px;
    color: #64748b;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

    .pk-note span[b-uf6l1l7d1i] {
        display: block;
        margin-bottom: 3px;
        color: #475569;
        font-size: 11px;
        font-weight: 800;
    }

    .pk-note p[b-uf6l1l7d1i] {
        margin: 0;
        color: #475569;
        font-size: 13px;
        line-height: 1.55;
        white-space: pre-wrap;
    }

.pk-card-footer[b-uf6l1l7d1i] {
    margin-top: 13px;
    border-top: 1px solid #eef2f7;
    padding-top: 12px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px 18px;
    color: #94a3b8;
    font-size: 11px;
}

    .pk-card-footer span[b-uf6l1l7d1i] {
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

.pk-file-name[b-uf6l1l7d1i] {
    max-width: 280px;
    overflow: hidden;
    color: #64748b;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pk-no-file[b-uf6l1l7d1i] {
    color: #94a3b8;
}

.pk-loading[b-uf6l1l7d1i],
.pk-empty[b-uf6l1l7d1i],
.pk-empty-selection[b-uf6l1l7d1i] {
    min-height: 250px;
    border: 1px dashed #cbd5e1;
    border-radius: 15px;
    background: #fff;
    padding: 35px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #64748b;
    text-align: center;
}

.pk-loading[b-uf6l1l7d1i] {
    min-height: 180px;
    gap: 12px;
}

.pk-empty-icon[b-uf6l1l7d1i] {
    width: 58px;
    height: 58px;
    margin-bottom: 14px;
    border-radius: 16px;
    background: #f1f5f9;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.pk-empty h4[b-uf6l1l7d1i],
.pk-empty-selection h4[b-uf6l1l7d1i] {
    margin: 0;
    color: #0f172a;
    font-size: 17px;
}

.pk-empty p[b-uf6l1l7d1i],
.pk-empty-selection p[b-uf6l1l7d1i] {
    max-width: 380px;
    margin: 7px 0 17px;
    font-size: 13px;
    line-height: 1.5;
}

.pk-spinner[b-uf6l1l7d1i],
.pk-btn-spinner[b-uf6l1l7d1i] {
    border: 3px solid #dbeafe;
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: pk-spin-b-uf6l1l7d1i 0.75s linear infinite;
}

.pk-spinner[b-uf6l1l7d1i] {
    width: 30px;
    height: 30px;
}

.pk-btn-spinner[b-uf6l1l7d1i] {
    width: 16px;
    height: 16px;
    border-width: 2px;
    border-color: rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
}

@keyframes pk-spin-b-uf6l1l7d1i {
    to {
        transform: rotate(360deg);
    }
}

/* MODAL */

.pk-modal-backdrop[b-uf6l1l7d1i] {
    position: fixed;
    inset: 0;
    z-index: 99999;
    overflow-y: auto;
    background: rgba(15, 23, 42, 0.56);
    padding: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pk-modal[b-uf6l1l7d1i] {
    width: min(720px, 100%);
    max-height: calc(100vh - 50px);
    overflow-y: auto;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 25px 70px rgba(15, 23, 42, 0.3);
}

.pk-modal-header[b-uf6l1l7d1i] {
    position: sticky;
    top: 0;
    z-index: 2;
    border-bottom: 1px solid #e2e8f0;
    background: #fff;
    padding: 18px 21px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

    .pk-modal-header span[b-uf6l1l7d1i] {
        color: #64748b;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 0.12em;
    }

    .pk-modal-header h3[b-uf6l1l7d1i] {
        margin: 4px 0 0;
        color: #0f172a;
        font-size: 20px;
        font-weight: 800;
    }

.pk-modal-close[b-uf6l1l7d1i] {
    width: 35px;
    height: 35px;
    flex: 0 0 35px;
    border: 0;
    border-radius: 9px;
    background: #f1f5f9;
    color: #64748b;
    cursor: pointer;
}

    .pk-modal-close:hover[b-uf6l1l7d1i] {
        background: #e2e8f0;
        color: #0f172a;
    }

.pk-modal-body[b-uf6l1l7d1i] {
    padding: 21px;
}

.pk-form-grid[b-uf6l1l7d1i] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 17px;
}

.pk-form-group[b-uf6l1l7d1i] {
    min-width: 0;
}

    .pk-form-group.full[b-uf6l1l7d1i] {
        grid-column: 1 / -1;
    }

    .pk-form-group label[b-uf6l1l7d1i] {
        display: block;
        margin-bottom: 7px;
        color: #334155;
        font-size: 12px;
        font-weight: 800;
    }

        .pk-form-group label span[b-uf6l1l7d1i] {
            color: #dc2626;
        }

.pk-form-control[b-uf6l1l7d1i] {
    width: 100%;
    min-height: 42px;
    border: 1px solid #cbd5e1;
    border-radius: 9px;
    background: #fff;
    color: #0f172a;
    padding: 9px 11px;
    box-sizing: border-box;
    font-size: 13px;
    outline: none;
}

    .pk-form-control:focus[b-uf6l1l7d1i] {
        border-color: #60a5fa;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
    }

    .pk-form-control:disabled[b-uf6l1l7d1i] {
        background: #f1f5f9;
        color: #64748b;
    }

.pk-textarea[b-uf6l1l7d1i] {
    min-height: 95px;
    resize: vertical;
}

.pk-form-group small[b-uf6l1l7d1i] {
    display: block;
    margin-top: 6px;
    color: #64748b;
    font-size: 11px;
}

.pk-form-error[b-uf6l1l7d1i] {
    margin-bottom: 16px;
    border: 1px solid #fecaca;
    border-radius: 9px;
    background: #fef2f2;
    color: #b91c1c;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
}

.pk-upload-box[b-uf6l1l7d1i] {
    position: relative;
    min-height: 115px;
    overflow: hidden;
    border: 1.5px dashed #cbd5e1;
    border-radius: 11px;
    background: #f8fafc;
}

    .pk-upload-box:hover[b-uf6l1l7d1i],
    .pk-upload-box.has-file[b-uf6l1l7d1i] {
        border-color: #93c5fd;
        background: #eff6ff;
    }

.pk-file-input[b-uf6l1l7d1i] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
}

.pk-upload-label[b-uf6l1l7d1i] {
    min-height: 115px;
    margin: 0 !important;
    padding: 17px 55px 17px 17px;
    display: flex !important;
    align-items: center;
    gap: 13px;
    cursor: pointer;
}

.pk-upload-icon[b-uf6l1l7d1i] {
    width: 43px;
    height: 43px;
    flex: 0 0 43px;
    border-radius: 11px;
    background: #dbeafe;
    color: #2563eb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.pk-upload-label strong[b-uf6l1l7d1i],
.pk-upload-label span[b-uf6l1l7d1i] {
    display: block;
}

.pk-upload-label strong[b-uf6l1l7d1i] {
    color: #0f172a;
    font-size: 13px;
}

.pk-upload-label span[b-uf6l1l7d1i] {
    margin-top: 4px;
    color: #64748b;
    font-size: 11px;
    font-weight: 500;
}

.pk-remove-file[b-uf6l1l7d1i] {
    position: absolute;
    top: 50%;
    right: 15px;
    width: 31px;
    height: 31px;
    border: 0;
    border-radius: 8px;
    background: #fee2e2;
    color: #dc2626;
    transform: translateY(-50%);
    cursor: pointer;
}

.pk-current-file[b-uf6l1l7d1i] {
    margin-top: 8px;
    color: #64748b;
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
}

    .pk-current-file strong[b-uf6l1l7d1i] {
        color: #334155;
    }

.pk-modal-footer[b-uf6l1l7d1i] {
    position: sticky;
    bottom: 0;
    z-index: 2;
    border-top: 1px solid #e2e8f0;
    background: #fff;
    padding: 15px 21px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.pk-btn-cancel[b-uf6l1l7d1i],
.pk-btn-save[b-uf6l1l7d1i] {
    min-height: 41px;
    border-radius: 9px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}

.pk-btn-cancel[b-uf6l1l7d1i] {
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #475569;
}

.pk-btn-save[b-uf6l1l7d1i] {
    border: 0;
    background: #2563eb;
    color: #fff;
}

    .pk-btn-save:hover[b-uf6l1l7d1i] {
        background: #1d4ed8;
    }

    .pk-btn-cancel:disabled[b-uf6l1l7d1i],
    .pk-btn-save:disabled[b-uf6l1l7d1i] {
        cursor: not-allowed;
        opacity: 0.65;
    }

@media (max-width: 900px) {
    .pk-card-top[b-uf6l1l7d1i] {
        flex-direction: column;
    }

    .pk-actions[b-uf6l1l7d1i] {
        width: 100%;
        justify-content: flex-start;
    }

    .pk-date-grid[b-uf6l1l7d1i] {
        grid-template-columns: 1fr auto 1fr;
    }

    .pk-duration[b-uf6l1l7d1i] {
        grid-column: 1 / -1;
        border-top: 1px solid #dbe3ed;
        border-left: 0;
        padding-top: 11px;
        padding-left: 0;
    }
}

@media (max-width: 640px) {
    .pk-header[b-uf6l1l7d1i] {
        flex-direction: column;
    }

    .pk-btn-add[b-uf6l1l7d1i] {
        width: 100%;
    }

    .pk-employee-bar[b-uf6l1l7d1i] {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .pk-contract-total[b-uf6l1l7d1i] {
        width: 100%;
        border-top: 1px solid #e2e8f0;
        border-left: 0;
        padding-top: 10px;
        padding-left: 0;
        align-items: flex-start;
    }

    .pk-card-main[b-uf6l1l7d1i] {
        padding: 14px;
    }

    .pk-type-area[b-uf6l1l7d1i] {
        width: 100%;
    }

    .pk-actions[b-uf6l1l7d1i] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pk-action[b-uf6l1l7d1i] {
        width: 100%;
    }

    .pk-date-grid[b-uf6l1l7d1i] {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .pk-date-divider[b-uf6l1l7d1i] {
        display: none;
    }

    .pk-duration[b-uf6l1l7d1i] {
        grid-column: auto;
    }

    .pk-card-footer[b-uf6l1l7d1i] {
        align-items: flex-start;
        flex-direction: column;
    }

    .pk-file-name[b-uf6l1l7d1i] {
        max-width: 100%;
    }

    .pk-modal-backdrop[b-uf6l1l7d1i] {
        padding: 0;
        align-items: flex-end;
    }

    .pk-modal[b-uf6l1l7d1i] {
        width: 100%;
        max-height: 94vh;
        border-radius: 17px 17px 0 0;
    }

    .pk-form-grid[b-uf6l1l7d1i] {
        grid-template-columns: 1fr;
    }

    .pk-form-group.full[b-uf6l1l7d1i] {
        grid-column: auto;
    }

    .pk-modal-header[b-uf6l1l7d1i],
    .pk-modal-body[b-uf6l1l7d1i],
    .pk-modal-footer[b-uf6l1l7d1i] {
        padding-left: 16px;
        padding-right: 16px;
    }

    .pk-modal-footer[b-uf6l1l7d1i] {
        display: grid;
        grid-template-columns: 1fr 1.4fr;
    }

    .pk-btn-cancel[b-uf6l1l7d1i],
    .pk-btn-save[b-uf6l1l7d1i] {
        width: 100%;
        padding: 0 10px;
    }
}
/* _content/AccountingWeb/Components/Pages/Pegawai/StrukturOrganisasi.razor.rz.scp.css */
.organization-page[b-ohvl8k8hqx] {
    width: 100%;
    min-height: 100vh;
    padding: 22px;
    overflow-x: hidden;
    background: #f8fafc;
    box-sizing: border-box;
    color: #0f172a;
    font-family: Inter, Arial, sans-serif;
}

.organization-header[b-ohvl8k8hqx] {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.page-title-row[b-ohvl8k8hqx] {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 13px;
}

.page-title-icon[b-ohvl8k8hqx] {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: #e8f0ff;
    color: #2563eb;
    font-size: 18px;
}

.page-title-row h1[b-ohvl8k8hqx] {
    margin: 0 0 4px;
    color: #0f172a;
    font-size: 24px;
    font-weight: 800;
    line-height: 1.25;
}

.page-title-row p[b-ohvl8k8hqx] {
    margin: 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.5;
}

.btn-refresh[b-ohvl8k8hqx] {
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid #dbe3ef;
    border-radius: 9px;
    background: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-shrink: 0;
    color: #334155;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
}

    .btn-refresh:hover:not(:disabled)[b-ohvl8k8hqx] {
        border-color: #93c5fd;
        color: #2563eb;
    }

    .btn-refresh:disabled[b-ohvl8k8hqx] {
        cursor: not-allowed;
        opacity: 0.65;
    }

.alert-error[b-ohvl8k8hqx] {
    margin-bottom: 18px;
    padding: 13px 15px;
    border: 1px solid #fecaca;
    border-radius: 10px;
    background: #fef2f2;
    display: flex;
    align-items: center;
    gap: 9px;
    color: #b91c1c;
    font-size: 13px;
}

/* Ringkasan */

.summary-grid[b-ohvl8k8hqx] {
    width: 100%;
    margin-bottom: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
    gap: 12px;
    box-sizing: border-box;
}

.summary-card[b-ohvl8k8hqx] {
    min-width: 0;
    min-height: 92px;
    padding: 15px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #ffffff;
    display: flex;
    align-items: center;
    gap: 13px;
    box-sizing: border-box;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
}

.summary-icon[b-ohvl8k8hqx] {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: hsl(var(--level-hue), 80%, 94%);
    color: hsl(var(--level-hue), 65%, 40%);
    font-size: 17px;
}

.summary-total .summary-icon[b-ohvl8k8hqx] {
    background: #e0e7ff;
    color: #4338ca;
}

.summary-info[b-ohvl8k8hqx] {
    min-width: 0;
}

.summary-card strong[b-ohvl8k8hqx] {
    display: block;
    margin-bottom: 4px;
    color: #0f172a;
    font-size: 23px;
    font-weight: 800;
    line-height: 1;
}

.summary-card span[b-ohvl8k8hqx] {
    display: block;
    overflow: hidden;
    color: #64748b;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Card utama */

.organization-card[b-ohvl8k8hqx] {
    min-width: 0;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 6px 22px rgba(15, 23, 42, 0.05);
}

.organization-card-header[b-ohvl8k8hqx] {
    min-height: 68px;
    padding: 14px 18px;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

    .organization-card-header h2[b-ohvl8k8hqx] {
        margin: 0 0 3px;
        color: #0f172a;
        font-size: 15px;
        font-weight: 800;
    }

    .organization-card-header span[b-ohvl8k8hqx] {
        color: #64748b;
        font-size: 12px;
    }

.chart-actions[b-ohvl8k8hqx] {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
}

.chart-action-button[b-ohvl8k8hqx] {
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid #dbe3ef;
    border-radius: 8px;
    background: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #475569;
    font-size: 12px;
    cursor: pointer;
}

    .chart-action-button:hover[b-ohvl8k8hqx] {
        border-color: #93c5fd;
        color: #2563eb;
    }

.fit-button[b-ohvl8k8hqx] {
    width: auto;
    padding: 0 12px;
    gap: 7px;
}

/* Struktur */

.organization-content[b-ohvl8k8hqx] {
    position: relative;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

    .organization-content.detail-open[b-ohvl8k8hqx] {
        grid-template-columns: minmax(0, 1fr) 320px;
    }

.chart-panel[b-ohvl8k8hqx] {
    min-width: 0;
    min-height: 600px;
    background: radial-gradient( circle at center, #ffffff 0%, #fbfdff 55%, #f8fafc 100% );
}

.chart-scroll[b-ohvl8k8hqx] {
    width: 100%;
    min-height: 600px;
    padding: 34px;
    overflow: auto;
    box-sizing: border-box;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
    scroll-behavior: smooth;
}

    .chart-scroll[b-ohvl8k8hqx]::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    .chart-scroll[b-ohvl8k8hqx]::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background: #cbd5e1;
    }

.chart-zoom-container[b-ohvl8k8hqx] {
    width: max-content;
    min-width: 100%;
    padding-bottom: 40px;
    transform-origin: top center;
    transition: transform 0.2s ease;
}

.organization-roots[b-ohvl8k8hqx] {
    width: max-content;
    min-width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 60px;
}

.chart-state[b-ohvl8k8hqx] {
    min-height: 600px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #64748b;
    text-align: center;
}

    .chart-state h3[b-ohvl8k8hqx] {
        margin: 15px 0 5px;
        color: #334155;
        font-size: 16px;
    }

    .chart-state p[b-ohvl8k8hqx] {
        max-width: 380px;
        margin: 0;
        font-size: 13px;
        line-height: 1.6;
    }

.loading-spinner[b-ohvl8k8hqx] {
    width: 36px;
    height: 36px;
    border: 3px solid #dbeafe;
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: org-spin-b-ohvl8k8hqx 0.8s linear infinite;
}

.empty-state-icon[b-ohvl8k8hqx] {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #eff6ff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2563eb;
    font-size: 24px;
}

@keyframes org-spin-b-ohvl8k8hqx {
    to {
        transform: rotate(360deg);
    }
}

/* Panel detail */

.employee-detail-panel[b-ohvl8k8hqx] {
    position: relative;
    z-index: 5;
    min-width: 0;
    border-left: 1px solid #e2e8f0;
    background: #ffffff;
}

.detail-header[b-ohvl8k8hqx] {
    min-height: 58px;
    padding: 0 18px;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .detail-header h3[b-ohvl8k8hqx] {
        margin: 0;
        font-size: 14px;
        font-weight: 800;
    }

.detail-close[b-ohvl8k8hqx] {
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #64748b;
    cursor: pointer;
}

    .detail-close:hover[b-ohvl8k8hqx] {
        background: #f1f5f9;
        color: #0f172a;
    }

.detail-body[b-ohvl8k8hqx] {
    max-height: 680px;
    overflow-y: auto;
}

.detail-profile[b-ohvl8k8hqx] {
    padding: 22px 18px;
    border-bottom: 1px solid #edf2f7;
    display: flex;
    align-items: center;
    gap: 13px;
}

.detail-photo[b-ohvl8k8hqx] {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    overflow: hidden;
    background: #e2e8f0;
    flex-shrink: 0;
}

    .detail-photo img[b-ohvl8k8hqx] {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
    }

    .detail-photo span[b-ohvl8k8hqx] {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(145deg, #dbeafe, #eff6ff);
        color: #1d4ed8;
        font-size: 19px;
        font-weight: 800;
    }

.detail-profile-info[b-ohvl8k8hqx] {
    min-width: 0;
}

    .detail-profile-info h4[b-ohvl8k8hqx] {
        margin: 0 0 7px;
        overflow: hidden;
        color: #0f172a;
        font-size: 17px;
        font-weight: 800;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .detail-profile-info p[b-ohvl8k8hqx] {
        margin: 8px 0 0;
        color: #64748b;
        font-size: 12px;
    }

.detail-level[b-ohvl8k8hqx] {
    display: inline-flex;
    max-width: 150px;
    padding: 4px 8px;
    border-radius: 999px;
    overflow: hidden;
    font-size: 10px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.detail-section[b-ohvl8k8hqx] {
    padding: 18px;
    border-bottom: 1px solid #edf2f7;
}

    .detail-section h5[b-ohvl8k8hqx] {
        margin: 0 0 15px;
        display: flex;
        align-items: center;
        gap: 8px;
        color: #334155;
        font-size: 12px;
        font-weight: 800;
    }

        .detail-section h5 i[b-ohvl8k8hqx] {
            color: #2563eb;
        }

.detail-list[b-ohvl8k8hqx] {
    margin: 0;
}

    .detail-list > div[b-ohvl8k8hqx] {
        margin-bottom: 14px;
        display: grid;
        grid-template-columns: 112px minmax(0, 1fr);
        gap: 10px;
    }

        .detail-list > div:last-child[b-ohvl8k8hqx] {
            margin-bottom: 0;
        }

    .detail-list dt[b-ohvl8k8hqx] {
        color: #64748b;
        font-size: 11px;
        font-weight: 500;
    }

    .detail-list dd[b-ohvl8k8hqx] {
        margin: 0;
        overflow-wrap: anywhere;
        color: #334155;
        font-size: 11px;
        font-weight: 650;
    }

.status-badge[b-ohvl8k8hqx] {
    display: inline-flex;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
}

.status-active[b-ohvl8k8hqx] {
    background: #dcfce7;
    color: #15803d;
}

.status-inactive[b-ohvl8k8hqx] {
    background: #fee2e2;
    color: #b91c1c;
}

.mobile-detail-backdrop[b-ohvl8k8hqx] {
    display: none;
}

/* Laptop */

@media (max-width: 1250px) {
    .organization-content.detail-open[b-ohvl8k8hqx] {
        grid-template-columns: minmax(0, 1fr) 290px;
    }
}

/* Tablet */

@media (max-width: 900px) {
    .organization-page[b-ohvl8k8hqx] {
        padding: 16px;
    }

    .organization-content.detail-open[b-ohvl8k8hqx] {
        grid-template-columns: minmax(0, 1fr);
    }

    .employee-detail-panel[b-ohvl8k8hqx] {
        position: fixed;
        z-index: 10002;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(360px, calc(100vw - 34px));
        border-left: 1px solid #e2e8f0;
        box-shadow: -15px 0 35px rgba(15, 23, 42, 0.2);
        animation: detail-slide-in-b-ohvl8k8hqx 0.2s ease;
    }

    .detail-body[b-ohvl8k8hqx] {
        max-height: calc(100vh - 58px);
    }

    .mobile-detail-backdrop[b-ohvl8k8hqx] {
        position: fixed;
        z-index: 10001;
        inset: 0;
        border: 0;
        display: block;
        background: rgba(15, 23, 42, 0.38);
    }

    @keyframes detail-slide-in-b-ohvl8k8hqx {
        from {
            transform: translateX(100%);
        }

        to {
            transform: translateX(0);
        }
    }
}

/* Mobile */
/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {
    .organization-page[b-ohvl8k8hqx] {
        width: 100%;
        min-height: 100%;
        padding: 12px;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    /* Header */

    .organization-header[b-ohvl8k8hqx] {
        margin-bottom: 14px;
        align-items: flex-start;
        gap: 10px;
    }

    .page-title-row[b-ohvl8k8hqx] {
        min-width: 0;
        align-items: flex-start;
        gap: 10px;
    }

    .page-title-icon[b-ohvl8k8hqx] {
        width: 38px;
        height: 38px;
        border-radius: 10px;
        font-size: 16px;
    }

    .page-title-row h1[b-ohvl8k8hqx] {
        margin-bottom: 3px;
        font-size: 18px;
    }

    .page-title-row p[b-ohvl8k8hqx] {
        max-width: 270px;
        font-size: 10px;
        line-height: 1.45;
    }

    .btn-refresh[b-ohvl8k8hqx] {
        width: 38px;
        min-width: 38px;
        height: 38px;
        min-height: 38px;
        padding: 0;
        border-radius: 9px;
    }

        .btn-refresh span[b-ohvl8k8hqx] {
            display: none;
        }

    /* =====================================================
       SUMMARY HORIZONTAL SCROLL
       ===================================================== */

    .summary-grid[b-ohvl8k8hqx] {
        width: calc(100% + 12px);
        margin-right: -12px;
        margin-bottom: 14px;
        padding-right: 12px;
        display: flex;
        gap: 9px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x proximity;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

        .summary-grid[b-ohvl8k8hqx]::-webkit-scrollbar {
            display: none;
        }

    .summary-card[b-ohvl8k8hqx] {
        width: 108px;
        min-width: 108px;
        min-height: 108px;
        padding: 11px 8px;
        border-radius: 12px;
        flex-direction: column;
        justify-content: center;
        gap: 8px;
        text-align: center;
        scroll-snap-align: start;
    }

    .summary-icon[b-ohvl8k8hqx] {
        width: 38px;
        height: 38px;
        font-size: 14px;
    }

    .summary-info[b-ohvl8k8hqx] {
        width: 100%;
        min-width: 0;
    }

    .summary-card strong[b-ohvl8k8hqx] {
        margin-bottom: 4px;
        font-size: 19px;
    }

    .summary-card span[b-ohvl8k8hqx] {
        width: 100%;
        font-size: 9px;
        line-height: 1.3;
        text-align: center;
        white-space: normal;
    }

    /* =====================================================
       MAIN CARD
       ===================================================== */

    .organization-card[b-ohvl8k8hqx] {
        width: 100%;
        border-radius: 12px;
        overflow: hidden;
    }

    .organization-card-header[b-ohvl8k8hqx] {
        min-height: auto;
        padding: 12px;
        align-items: center;
        gap: 8px;
    }

        .organization-card-header > div:first-child[b-ohvl8k8hqx] {
            min-width: 0;
        }

        .organization-card-header h2[b-ohvl8k8hqx] {
            margin-bottom: 2px;
            font-size: 13px;
        }

        .organization-card-header span[b-ohvl8k8hqx] {
            display: block;
            max-width: 190px;
            font-size: 9px;
            line-height: 1.4;
        }

    .chart-actions[b-ohvl8k8hqx] {
        gap: 5px;
    }

    .chart-action-button[b-ohvl8k8hqx] {
        width: 31px;
        height: 31px;
        border-radius: 7px;
    }

        /*
     * Mobile tidak memerlukan zoom manual karena struktur sudah vertikal.
     */
        .chart-action-button:not(.fit-button)[b-ohvl8k8hqx] {
            display: none;
        }

    .fit-button[b-ohvl8k8hqx] {
        width: 31px;
        padding: 0;
    }

        .fit-button span[b-ohvl8k8hqx] {
            display: none;
        }

    /* =====================================================
       MOBILE VERTICAL TREE
       ===================================================== */

    .chart-panel[b-ohvl8k8hqx] {
        min-height: 0;
        height: calc(100vh - 260px);
        max-height: 680px;
        overflow: hidden;
    }

    .chart-scroll[b-ohvl8k8hqx] {
        width: 100%;
        height: calc(100vh - 260px);
        min-height: 420px;
        max-height: 680px;
        padding: 16px 12px 30px;
        overflow-x: hidden;
        overflow-y: auto;
        box-sizing: border-box;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: #cbd5e1 transparent;
    }

        .chart-scroll[b-ohvl8k8hqx]::-webkit-scrollbar {
            width: 6px;
        }

        .chart-scroll[b-ohvl8k8hqx]::-webkit-scrollbar-thumb {
            border-radius: 999px;
            background: #cbd5e1;
        }

    /*
     * Scale harus 1 pada mobile.
     */
    .chart-zoom-container[b-ohvl8k8hqx] {
        width: 100%;
        min-width: 0;
        padding: 0;
        transform: none !important;
        transform-origin: top left;
    }

    .organization-roots[b-ohvl8k8hqx] {
        width: 100%;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 18px;
    }

    .chart-state[b-ohvl8k8hqx] {
        min-height: 470px;
        padding: 24px 16px;
    }

    /* =====================================================
       DETAIL BOTTOM SHEET
       ===================================================== */

    .organization-content.detail-open[b-ohvl8k8hqx] {
        grid-template-columns: minmax(0, 1fr);
    }

    .employee-detail-panel[b-ohvl8k8hqx] {
        position: fixed;
        z-index: 10002;
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-height: 84vh;
        border-top: 1px solid #e2e8f0;
        border-left: 0;
        border-radius: 18px 18px 0 0;
        background: #ffffff;
        box-shadow: 0 -14px 36px rgba(15, 23, 42, 0.2);
        animation: detail-sheet-in-b-ohvl8k8hqx 0.22s ease;
    }

        .employee-detail-panel[b-ohvl8k8hqx]::before {
            width: 42px;
            height: 4px;
            margin: 8px auto 0;
            border-radius: 999px;
            display: block;
            background: #cbd5e1;
            content: "";
        }

    .detail-header[b-ohvl8k8hqx] {
        min-height: 48px;
        padding: 0 16px;
    }

    .detail-body[b-ohvl8k8hqx] {
        max-height: calc(84vh - 60px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .detail-profile[b-ohvl8k8hqx] {
        padding: 16px;
    }

    .detail-photo[b-ohvl8k8hqx] {
        width: 58px;
        height: 58px;
    }

    .detail-profile-info h4[b-ohvl8k8hqx] {
        font-size: 15px;
    }

    .detail-section[b-ohvl8k8hqx] {
        padding: 16px;
    }

    .detail-list > div[b-ohvl8k8hqx] {
        grid-template-columns: 105px minmax(0, 1fr);
    }

    .mobile-detail-backdrop[b-ohvl8k8hqx] {
        position: fixed;
        z-index: 10001;
        inset: 0;
        border: 0;
        display: block;
        background: rgba(15, 23, 42, 0.42);
        backdrop-filter: blur(1px);
    }

    @keyframes detail-sheet-in-b-ohvl8k8hqx {
        from {
            transform: translateY(100%);
        }

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

/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 420px) {
    .organization-page[b-ohvl8k8hqx] {
        padding: 10px;
    }

    .page-title-row h1[b-ohvl8k8hqx] {
        font-size: 17px;
    }

    .page-title-row p[b-ohvl8k8hqx] {
        max-width: 225px;
        font-size: 9px;
    }

    .summary-grid[b-ohvl8k8hqx] {
        width: calc(100% + 10px);
        margin-right: -10px;
        padding-right: 10px;
    }

    .summary-card[b-ohvl8k8hqx] {
        width: 100px;
        min-width: 100px;
        min-height: 102px;
        padding: 10px 7px;
    }

    .summary-icon[b-ohvl8k8hqx] {
        width: 36px;
        height: 36px;
    }

    .summary-card strong[b-ohvl8k8hqx] {
        font-size: 18px;
    }

    .organization-card-header span[b-ohvl8k8hqx] {
        max-width: 155px;
    }

    .chart-scroll[b-ohvl8k8hqx] {
        padding: 14px 9px 26px;
    }

    .detail-list > div[b-ohvl8k8hqx] {
        grid-template-columns: 96px minmax(0, 1fr);
        gap: 8px;
    }
}

/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 360px) {
    .page-title-row p[b-ohvl8k8hqx] {
        display: none;
    }

    .summary-card[b-ohvl8k8hqx] {
        width: 94px;
        min-width: 94px;
    }

    .organization-card-header span[b-ohvl8k8hqx] {
        display: none;
    }
}
/* _content/AccountingWeb/Components/Pages/Pegawai/SuratKepegawaianTab.razor.rz.scp.css */
.surat-page[b-ooeidc86x4] {
    width: 100%;
    color: #0f172a;
    font-family: Inter, Arial, sans-serif;
}

.surat-header[b-ooeidc86x4] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 18px;
}

.surat-eyebrow[b-ooeidc86x4] {
    display: block;
    margin-bottom: 5px;
    color: #64748b;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
}

.surat-header h3[b-ooeidc86x4] {
    margin: 0;
    font-size: 24px;
    font-weight: 800;
}

.surat-header p[b-ooeidc86x4] {
    margin: 7px 0 0;
    color: #64748b;
    font-size: 14px;
}

.surat-btn-primary[b-ooeidc86x4] {
    min-height: 42px;
    border: 0;
    border-radius: 10px;
    background: #2563eb;
    color: #fff;
    padding: 0 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
}

    .surat-btn-primary:hover[b-ooeidc86x4] {
        background: #1d4ed8;
    }

.surat-employee[b-ooeidc86x4] {
    min-height: 69px;
    margin-bottom: 16px;
    border: 1px solid #e2e8f0;
    border-radius: 13px;
    background: #fff;
    padding: 13px 16px;
    display: flex;
    align-items: center;
    gap: 13px;
}

.surat-avatar[b-ooeidc86x4] {
    width: 43px;
    height: 43px;
    flex: 0 0 43px;
    border-radius: 12px;
    background: #eff6ff;
    color: #2563eb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
}

.surat-employee-name[b-ooeidc86x4] {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

    .surat-employee-name strong[b-ooeidc86x4] {
        font-size: 14px;
    }

    .surat-employee-name span[b-ooeidc86x4] {
        color: #64748b;
        font-size: 12px;
    }

.surat-total[b-ooeidc86x4] {
    border-left: 1px solid #e2e8f0;
    padding-left: 18px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

    .surat-total strong[b-ooeidc86x4] {
        font-size: 20px;
        line-height: 1;
    }

    .surat-total span[b-ooeidc86x4] {
        margin-top: 4px;
        color: #64748b;
        font-size: 11px;
    }

.surat-alert[b-ooeidc86x4] {
    margin-bottom: 15px;
    border: 1px solid;
    border-radius: 10px;
    padding: 11px 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    font-size: 13px;
    font-weight: 700;
}

    .surat-alert > div[b-ooeidc86x4] {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .surat-alert.success[b-ooeidc86x4] {
        border-color: #bbf7d0;
        background: #f0fdf4;
        color: #15803d;
    }

    .surat-alert.danger[b-ooeidc86x4] {
        border-color: #fecaca;
        background: #fef2f2;
        color: #b91c1c;
    }

    .surat-alert button[b-ooeidc86x4] {
        border: 0;
        background: transparent;
        color: inherit;
        cursor: pointer;
    }

.surat-filter[b-ooeidc86x4] {
    margin-bottom: 17px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 230px;
    gap: 11px;
}

.surat-search[b-ooeidc86x4] {
    position: relative;
}

    .surat-search i[b-ooeidc86x4] {
        position: absolute;
        top: 50%;
        left: 13px;
        color: #94a3b8;
        transform: translateY(-50%);
    }

    .surat-search input[b-ooeidc86x4],
    .surat-filter select[b-ooeidc86x4] {
        width: 100%;
        height: 42px;
        border: 1px solid #cbd5e1;
        border-radius: 9px;
        background: #fff;
        box-sizing: border-box;
        outline: none;
        font-size: 13px;
    }

    .surat-search input[b-ooeidc86x4] {
        padding: 0 12px 0 39px;
    }

.surat-filter select[b-ooeidc86x4] {
    padding: 0 11px;
}

    .surat-search input:focus[b-ooeidc86x4],
    .surat-filter select:focus[b-ooeidc86x4] {
        border-color: #60a5fa;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, .12);
    }

.surat-timeline[b-ooeidc86x4] {
    position: relative;
    padding-left: 42px;
}

    .surat-timeline[b-ooeidc86x4]::before {
        content: "";
        position: absolute;
        top: 9px;
        bottom: 9px;
        left: 17px;
        width: 2px;
        background: #e2e8f0;
    }

.surat-item[b-ooeidc86x4] {
    position: relative;
    margin-bottom: 15px;
}

.surat-timeline-marker[b-ooeidc86x4] {
    position: absolute;
    top: 19px;
    left: -42px;
    z-index: 1;
    width: 35px;
    height: 35px;
    border: 4px solid #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 1px #e2e8f0;
    font-size: 12px;
}

    .surat-timeline-marker.warning[b-ooeidc86x4] {
        background: #fef3c7;
        color: #b45309;
    }

    .surat-timeline-marker.success[b-ooeidc86x4] {
        background: #dcfce7;
        color: #15803d;
    }

    .surat-timeline-marker.danger[b-ooeidc86x4] {
        background: #fee2e2;
        color: #dc2626;
    }

    .surat-timeline-marker.info[b-ooeidc86x4] {
        background: #dbeafe;
        color: #2563eb;
    }

    .surat-timeline-marker.default[b-ooeidc86x4] {
        background: #f1f5f9;
        color: #475569;
    }

.surat-card[b-ooeidc86x4] {
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #fff;
    padding: 17px;
    transition: .18s ease;
}

    .surat-card:hover[b-ooeidc86x4] {
        border-color: #cbd5e1;
        box-shadow: 0 8px 24px rgba(15, 23, 42, .07);
        transform: translateY(-1px);
    }

.surat-card-header[b-ooeidc86x4] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.surat-title-row[b-ooeidc86x4] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
}

    .surat-title-row h4[b-ooeidc86x4] {
        margin: 0;
        font-size: 16px;
        font-weight: 800;
    }

.surat-number[b-ooeidc86x4] {
    display: block;
    margin-top: 5px;
    color: #64748b;
    font-size: 12px;
}

.surat-status[b-ooeidc86x4] {
    border-radius: 999px;
    padding: 4px 9px;
    font-size: 10px;
    font-weight: 800;
}

    .surat-status.active[b-ooeidc86x4] {
        background: #dcfce7;
        color: #15803d;
    }

    .surat-status.upcoming[b-ooeidc86x4] {
        background: #dbeafe;
        color: #1d4ed8;
    }

    .surat-status.finished[b-ooeidc86x4] {
        background: #f1f5f9;
        color: #64748b;
    }

.surat-actions[b-ooeidc86x4] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 7px;
}

    .surat-actions button[b-ooeidc86x4],
    .surat-actions a[b-ooeidc86x4] {
        min-height: 32px;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        background: #fff;
        color: #475569;
        padding: 0 9px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        text-decoration: none;
        font-size: 11px;
        font-weight: 700;
        cursor: pointer;
    }

        .surat-actions button:hover[b-ooeidc86x4],
        .surat-actions a:hover[b-ooeidc86x4] {
            background: #f8fafc;
            color: #2563eb;
        }

    .surat-actions .delete:hover[b-ooeidc86x4] {
        border-color: #fecaca;
        background: #fef2f2;
        color: #dc2626;
    }

.surat-subject[b-ooeidc86x4] {
    margin-top: 13px;
    color: #334155;
    font-size: 14px;
    font-weight: 700;
}

.surat-info-grid[b-ooeidc86x4] {
    margin-top: 14px;
    border-radius: 10px;
    background: #f8fafc;
    padding: 12px 14px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

    .surat-info-grid div[b-ooeidc86x4] {
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .surat-info-grid span[b-ooeidc86x4] {
        color: #64748b;
        font-size: 10px;
        font-weight: 700;
    }

    .surat-info-grid strong[b-ooeidc86x4] {
        color: #0f172a;
        font-size: 12px;
    }

.surat-description[b-ooeidc86x4] {
    margin-top: 12px;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    padding: 10px 12px;
    color: #64748b;
    display: flex;
    align-items: flex-start;
    gap: 9px;
}

    .surat-description p[b-ooeidc86x4] {
        margin: 0;
        color: #475569;
        font-size: 12px;
        line-height: 1.55;
        white-space: pre-wrap;
    }

.surat-card-footer[b-ooeidc86x4] {
    margin-top: 12px;
    border-top: 1px solid #eef2f7;
    padding-top: 11px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px 17px;
    color: #94a3b8;
    font-size: 10px;
}

    .surat-card-footer span[b-ooeidc86x4] {
        display: inline-flex;
        align-items: center;
        gap: 5px;
    }

.surat-file-name[b-ooeidc86x4] {
    max-width: 280px;
    overflow: hidden;
    color: #64748b;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.surat-loading[b-ooeidc86x4],
.surat-empty[b-ooeidc86x4] {
    min-height: 230px;
    border: 1px dashed #cbd5e1;
    border-radius: 14px;
    background: #fff;
    padding: 30px 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #64748b;
    text-align: center;
}

.surat-empty-icon[b-ooeidc86x4] {
    width: 57px;
    height: 57px;
    margin-bottom: 13px;
    border-radius: 15px;
    background: #f1f5f9;
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
}

.surat-empty h4[b-ooeidc86x4] {
    margin: 0;
    color: #0f172a;
    font-size: 16px;
}

.surat-empty p[b-ooeidc86x4] {
    margin: 7px 0 16px;
    font-size: 12px;
}

.surat-spinner[b-ooeidc86x4],
.surat-btn-spinner[b-ooeidc86x4] {
    border-radius: 50%;
    animation: surat-spin-b-ooeidc86x4 .75s linear infinite;
}

.surat-spinner[b-ooeidc86x4] {
    width: 29px;
    height: 29px;
    margin-bottom: 10px;
    border: 3px solid #dbeafe;
    border-top-color: #2563eb;
}

.surat-btn-spinner[b-ooeidc86x4] {
    width: 15px;
    height: 15px;
    border: 2px solid rgba(255, 255, 255, .4);
    border-top-color: #fff;
}

@keyframes surat-spin-b-ooeidc86x4 {
    to {
        transform: rotate(360deg);
    }
}

.surat-pagination[b-ooeidc86x4] {
    margin-top: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

    .surat-pagination button[b-ooeidc86x4] {
        min-width: 35px;
        height: 35px;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        background: #fff;
        color: #475569;
        font-size: 12px;
        font-weight: 700;
        cursor: pointer;
    }

        .surat-pagination button.active[b-ooeidc86x4] {
            border-color: #2563eb;
            background: #2563eb;
            color: #fff;
        }

        .surat-pagination button:disabled[b-ooeidc86x4] {
            cursor: not-allowed;
            opacity: .45;
        }

/* MODAL */

.surat-modal-backdrop[b-ooeidc86x4] {
    position: fixed;
    inset: 0;
    z-index: 99999;
    overflow-y: auto;
    background: rgba(15, 23, 42, .56);
    padding: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.surat-modal[b-ooeidc86x4] {
    width: min(730px, 100%);
    max-height: calc(100vh - 50px);
    overflow-y: auto;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 25px 70px rgba(15, 23, 42, .3);
}

.surat-modal-header[b-ooeidc86x4] {
    position: sticky;
    top: 0;
    z-index: 2;
    border-bottom: 1px solid #e2e8f0;
    background: #fff;
    padding: 18px 21px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

    .surat-modal-header span[b-ooeidc86x4] {
        color: #64748b;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: .12em;
    }

    .surat-modal-header h3[b-ooeidc86x4] {
        margin: 4px 0 0;
        font-size: 20px;
        font-weight: 800;
    }

    .surat-modal-header button[b-ooeidc86x4] {
        width: 35px;
        height: 35px;
        border: 0;
        border-radius: 9px;
        background: #f1f5f9;
        color: #64748b;
        cursor: pointer;
    }

.surat-modal-body[b-ooeidc86x4] {
    padding: 21px;
}

.surat-form-grid[b-ooeidc86x4] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.surat-form-group.full[b-ooeidc86x4] {
    grid-column: 1 / -1;
}

.surat-form-group label[b-ooeidc86x4] {
    display: block;
    margin-bottom: 7px;
    color: #334155;
    font-size: 12px;
    font-weight: 800;
}

    .surat-form-group label span[b-ooeidc86x4] {
        color: #dc2626;
    }

.surat-control[b-ooeidc86x4] {
    width: 100%;
    min-height: 42px;
    border: 1px solid #cbd5e1;
    border-radius: 9px;
    background: #fff;
    color: #0f172a;
    padding: 9px 11px;
    box-sizing: border-box;
    outline: none;
    font-size: 13px;
}

    .surat-control:focus[b-ooeidc86x4] {
        border-color: #60a5fa;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, .12);
    }

.surat-textarea[b-ooeidc86x4] {
    min-height: 95px;
    resize: vertical;
}

.surat-form-error[b-ooeidc86x4] {
    margin-bottom: 15px;
    border: 1px solid #fecaca;
    border-radius: 9px;
    background: #fef2f2;
    color: #b91c1c;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
}

.surat-upload[b-ooeidc86x4] {
    position: relative;
    min-height: 110px;
    overflow: hidden;
    border: 1.5px dashed #cbd5e1;
    border-radius: 11px;
    background: #f8fafc;
}

    .surat-upload:hover[b-ooeidc86x4],
    .surat-upload.has-file[b-ooeidc86x4] {
        border-color: #93c5fd;
        background: #eff6ff;
    }

.surat-file-input[b-ooeidc86x4] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.surat-upload > label[b-ooeidc86x4] {
    min-height: 110px;
    margin: 0;
    padding: 16px 55px 16px 16px;
    display: flex;
    align-items: center;
    gap: 13px;
    cursor: pointer;
}

.surat-upload-icon[b-ooeidc86x4] {
    width: 43px;
    height: 43px;
    flex: 0 0 43px;
    border-radius: 11px;
    background: #dbeafe;
    color: #2563eb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.surat-upload strong[b-ooeidc86x4],
.surat-upload span[b-ooeidc86x4] {
    display: block;
}

.surat-upload strong[b-ooeidc86x4] {
    color: #0f172a;
    font-size: 13px;
}

.surat-upload span[b-ooeidc86x4] {
    margin-top: 4px;
    color: #64748b;
    font-size: 11px;
    font-weight: 500;
}

.surat-upload > button[b-ooeidc86x4] {
    position: absolute;
    top: 50%;
    right: 14px;
    width: 31px;
    height: 31px;
    border: 0;
    border-radius: 8px;
    background: #fee2e2;
    color: #dc2626;
    transform: translateY(-50%);
    cursor: pointer;
}

.surat-current-file[b-ooeidc86x4] {
    margin-top: 8px;
    color: #64748b;
    font-size: 11px;
}

    .surat-current-file strong[b-ooeidc86x4] {
        color: #334155;
    }

.surat-modal-footer[b-ooeidc86x4] {
    position: sticky;
    bottom: 0;
    z-index: 2;
    border-top: 1px solid #e2e8f0;
    background: #fff;
    padding: 15px 21px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.surat-btn-cancel[b-ooeidc86x4],
.surat-btn-save[b-ooeidc86x4] {
    min-height: 41px;
    border-radius: 9px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
}

.surat-btn-cancel[b-ooeidc86x4] {
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #475569;
}

.surat-btn-save[b-ooeidc86x4] {
    border: 0;
    background: #2563eb;
    color: #fff;
}

    .surat-btn-save:hover[b-ooeidc86x4] {
        background: #1d4ed8;
    }

    .surat-btn-cancel:disabled[b-ooeidc86x4],
    .surat-btn-save:disabled[b-ooeidc86x4] {
        cursor: not-allowed;
        opacity: .6;
    }

@media (max-width: 800px) {
    .surat-card-header[b-ooeidc86x4] {
        flex-direction: column;
    }

    .surat-actions[b-ooeidc86x4] {
        width: 100%;
        justify-content: flex-start;
    }

    .surat-info-grid[b-ooeidc86x4] {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 640px) {
    .surat-header[b-ooeidc86x4] {
        flex-direction: column;
    }

    .surat-btn-primary[b-ooeidc86x4] {
        width: 100%;
    }

    .surat-employee[b-ooeidc86x4] {
        flex-wrap: wrap;
    }

    .surat-total[b-ooeidc86x4] {
        width: 100%;
        border-top: 1px solid #e2e8f0;
        border-left: 0;
        padding-top: 10px;
        padding-left: 0;
        align-items: flex-start;
    }

    .surat-filter[b-ooeidc86x4] {
        grid-template-columns: 1fr;
    }

    .surat-timeline[b-ooeidc86x4] {
        padding-left: 0;
    }

        .surat-timeline[b-ooeidc86x4]::before,
        .surat-timeline-marker[b-ooeidc86x4] {
            display: none;
        }

    .surat-actions[b-ooeidc86x4] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

        .surat-actions button[b-ooeidc86x4],
        .surat-actions a[b-ooeidc86x4] {
            width: 100%;
        }

    .surat-info-grid[b-ooeidc86x4] {
        grid-template-columns: 1fr;
    }

    .surat-card-footer[b-ooeidc86x4] {
        align-items: flex-start;
        flex-direction: column;
    }

    .surat-file-name[b-ooeidc86x4] {
        max-width: 100%;
    }

    .surat-modal-backdrop[b-ooeidc86x4] {
        padding: 0;
        align-items: flex-end;
    }

    .surat-modal[b-ooeidc86x4] {
        width: 100%;
        max-height: 94vh;
        border-radius: 17px 17px 0 0;
    }

    .surat-form-grid[b-ooeidc86x4] {
        grid-template-columns: 1fr;
    }

    .surat-form-group.full[b-ooeidc86x4] {
        grid-column: auto;
    }

    .surat-modal-header[b-ooeidc86x4],
    .surat-modal-body[b-ooeidc86x4],
    .surat-modal-footer[b-ooeidc86x4] {
        padding-left: 16px;
        padding-right: 16px;
    }

    .surat-modal-footer[b-ooeidc86x4] {
        display: grid;
        grid-template-columns: 1fr 1.4fr;
    }

    .surat-btn-cancel[b-ooeidc86x4],
    .surat-btn-save[b-ooeidc86x4] {
        width: 100%;
    }
}