/* /Layout/MainLayout.razor.rz.scp.css */
/* ==========================================================================
   CSS ISOLATION FOR MainLayout.razor
   Default standard MudBlazor tab look (48px height) + compact font size (0.75rem)
   With comfortable top spacing & flush active slider alignment
   ========================================================================== */

.umara-main-wrapper[b-in63vrstoy] {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 0% !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.umara-body-fallback[b-in63vrstoy] {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 0% !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 16px 20px 36px 20px !important;
    box-sizing: border-box !important;
}

/* Multi-tabs wrapper — flex column with top breathing space */
.umara-top-tab-bar-wrapper[b-in63vrstoy] {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 0% !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Top dynamic tabs container (Only Level 1) */
.umara-top-tab-bar-wrapper[b-in63vrstoy]  > .top-nav-dynamic-tabs,
.umara-top-tab-bar-wrapper[b-in63vrstoy]  > .mud-tabs {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 0% !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
}

/* Toolbar (Tab No. 1) — 48px height, relative for slider positioning */
.umara-top-tab-bar-wrapper[b-in63vrstoy]  > .top-nav-dynamic-tabs > .mud-tabs-toolbar,
.umara-top-tab-bar-wrapper[b-in63vrstoy]  > .mud-tabs > .mud-tabs-toolbar {
    background-color: #FFFFFF !important;
    border-bottom: 1px solid #E5E7EB !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02) !important;
    min-height: 48px !important;
    height: 48px !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    position: relative !important;
}

.umara-top-tab-bar-wrapper[b-in63vrstoy]  > .top-nav-dynamic-tabs > .mud-tabs-toolbar .mud-tabs-toolbar-content,
.umara-top-tab-bar-wrapper[b-in63vrstoy]  > .mud-tabs > .mud-tabs-toolbar .mud-tabs-toolbar-content {
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    position: relative !important;
}

/* Tab button (Tab No. 1) — Default 48px height centered */
.umara-top-tab-bar-wrapper[b-in63vrstoy]  > .top-nav-dynamic-tabs > .mud-tabs-toolbar .mud-tab,
.umara-top-tab-bar-wrapper[b-in63vrstoy]  > .mud-tabs > .mud-tabs-toolbar .mud-tab {
    min-height: 48px !important;
    height: 48px !important;
    padding: 6px 16px !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #4B5563 !important;
    opacity: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Inner MudBlazor wrappers */
.umara-top-tab-bar-wrapper[b-in63vrstoy]  > .top-nav-dynamic-tabs > .mud-tabs-toolbar .mud-tab > *,
.umara-top-tab-bar-wrapper[b-in63vrstoy]  > .mud-tabs > .mud-tabs-toolbar .mud-tab > * {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Active tab text */
.umara-top-tab-bar-wrapper[b-in63vrstoy]  > .top-nav-dynamic-tabs > .mud-tabs-toolbar .mud-tab.mud-tab-active,
.umara-top-tab-bar-wrapper[b-in63vrstoy]  > .mud-tabs > .mud-tabs-toolbar .mud-tab.mud-tab-active {
    color: #10B981 !important;
}

/* Active Slider (Underline) — Flush with bottom border line */
.umara-top-tab-bar-wrapper[b-in63vrstoy]  > .top-nav-dynamic-tabs > .mud-tab-slider,
.umara-top-tab-bar-wrapper[b-in63vrstoy]  > .top-nav-dynamic-tabs > .mud-tabs-toolbar .mud-tab-slider,
.umara-top-tab-bar-wrapper[b-in63vrstoy]  > .mud-tabs > .mud-tab-slider,
.umara-top-tab-bar-wrapper[b-in63vrstoy]  > .mud-tabs > .mud-tabs-toolbar .mud-tab-slider {
    background-color: #10B981 !important;
    height: 2px !important;
    display: block !important;
    position: absolute !important;
    bottom: 0px !important;
    margin-bottom: 0px !important;
    z-index: 10 !important;
}

/* Tab header flex wrapper (label + close button) */
.umara-top-tab-bar-wrapper[b-in63vrstoy]  .umara-tab-header {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

.umara-top-tab-bar-wrapper[b-in63vrstoy]  .umara-tab-label {
    font-size: 0.75rem !important; /* 12px compact standard */
    font-weight: 500 !important;
    color: inherit !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02857em !important;
    white-space: nowrap !important;
    line-height: normal !important;
    display: inline-flex !important;
    align-items: center !important;
}

.umara-top-tab-bar-wrapper[b-in63vrstoy]  .mud-tab.mud-tab-active .umara-tab-label {
    font-weight: 600 !important;
    color: #10B981 !important;
}

/* Close icon button */
.umara-top-tab-bar-wrapper[b-in63vrstoy]  .umara-tab-close {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 16px !important;
    height: 16px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    color: #9CA3AF !important;
    border-radius: 3px !important;
    cursor: pointer !important;
    line-height: 1 !important;
}

.umara-top-tab-bar-wrapper[b-in63vrstoy]  .umara-tab-close svg {
    width: 12px !important;
    height: 12px !important;
    display: block !important;
}

.umara-top-tab-bar-wrapper[b-in63vrstoy]  .mud-tab.mud-tab-active .umara-tab-close {
    color: #10B981 !important;
}

.umara-top-tab-bar-wrapper[b-in63vrstoy]  .umara-tab-close:hover {
    background-color: #FEE2E2 !important;
    color: #EF4444 !important;
}

/* Hide add button */
.umara-top-tab-bar-wrapper[b-in63vrstoy]  .mud-dynamic-tabs-add-button,
.umara-top-tab-bar-wrapper[b-in63vrstoy]  .mud-dynamic-tabs-add-btn {
    display: none !important;
}

/* ==========================================================================
   SCROLLABLE TAB PANELS (Only Level-1 Dynamic Tabs scroll)
   With 20px safe gutter on left & right to prevent scrollbar overlap
   ========================================================================== */
.umara-top-tab-bar-wrapper[b-in63vrstoy]  > .top-nav-dynamic-tabs > .mud-tabs-panels,
.umara-top-tab-bar-wrapper[b-in63vrstoy]  > .mud-tabs > .mud-tabs-panels {
    flex: 1 1 0% !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 16px 20px 36px 20px !important;
    box-sizing: border-box !important;
}

.umara-top-tab-bar-wrapper[b-in63vrstoy]  > .top-nav-dynamic-tabs > .mud-tabs-panels > .mud-tab-panel,
.umara-top-tab-bar-wrapper[b-in63vrstoy]  > .mud-tabs > .mud-tabs-panels > .mud-tab-panel {
    height: auto !important;
    min-height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* Standardize all MudPaper, MudCard, and tables inside pages */
.umara-top-tab-bar-wrapper[b-in63vrstoy]  .mud-tabs-panels .mud-paper {
    box-sizing: border-box !important;
    max-width: 100% !important;
}

.umara-top-tab-bar-wrapper[b-in63vrstoy]  > .top-nav-dynamic-tabs > .mud-tabs-panels > .mud-tab-panel > .mud-paper,
.umara-top-tab-bar-wrapper[b-in63vrstoy]  > .mud-tabs > .mud-tabs-panels > .mud-tab-panel > .mud-paper {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* ==========================================================================
   STANDARD INNER PAGE TABS (White Bar + Bottle Green Active Pill)
   Matching User Reference Screenshot (Clean White Toolbar + Pill Tabs)
   ========================================================================== */
.umara-top-tab-bar-wrapper[b-in63vrstoy]  .mud-tabs-panels .mud-tabs,
.mud-dialog .mud-tabs[b-in63vrstoy] {
    display: flex !important;
    flex-direction: column !important;
    flex: none !important;
    min-height: auto !important;
    height: auto !important;
    overflow: visible !important;
    background: transparent !important;
}

.umara-top-tab-bar-wrapper[b-in63vrstoy]  .mud-tabs-panels .mud-tabs-toolbar,
.umara-top-tab-bar-wrapper[b-in63vrstoy]  .mud-tabs-panels .mud-tabs-toolbar-dark,
.mud-dialog .mud-tabs-toolbar[b-in63vrstoy],
.mud-dialog .mud-tabs-toolbar-dark[b-in63vrstoy] {
    background: #FFFFFF !important;
    background-color: #FFFFFF !important; /* Background PUTIH */
    border-radius: 8px 8px 0 0 !important;
    border-bottom: 1px solid #E5E7EB !important;
    min-height: 48px !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 8px !important;
    box-shadow: none !important;
}

.umara-top-tab-bar-wrapper[b-in63vrstoy]  .mud-tabs-panels .mud-tabs-toolbar-content,
.mud-dialog .mud-tabs-toolbar-content[b-in63vrstoy] {
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
}

.umara-top-tab-bar-wrapper[b-in63vrstoy]  .mud-tabs-panels .mud-tab,
.mud-dialog .mud-tab[b-in63vrstoy] {
    background: transparent !important;
    background-color: transparent !important;
    color: #4B5563 !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important; /* 14px */
    letter-spacing: 0.025em !important;
    text-transform: uppercase !important;
    min-height: 38px !important;
    height: 38px !important;
    padding: 0 20px !important;
    border-radius: 6px !important;
    margin: 4px !important;
    border: none !important;
    box-shadow: none !important;
    opacity: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease-in-out !important;
}

.umara-top-tab-bar-wrapper[b-in63vrstoy]  .mud-tabs-panels .mud-tab *,
.mud-dialog .mud-tab *[b-in63vrstoy] {
    color: inherit !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.025em !important;
    text-transform: uppercase !important;
}

.umara-top-tab-bar-wrapper[b-in63vrstoy]  .mud-tabs-panels .mud-tab:hover,
.mud-dialog .mud-tab:hover[b-in63vrstoy] {
    background-color: #F3F4F6 !important;
    color: #2F7D67 !important;
}

.umara-top-tab-bar-wrapper[b-in63vrstoy]  .mud-tabs-panels .mud-tab.mud-tab-active,
.mud-dialog .mud-tab.mud-tab-active[b-in63vrstoy] {
    background-color: #2F7D67 !important; /* Bottle green / Umara primary green */
    color: #ffffff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
}

.umara-top-tab-bar-wrapper[b-in63vrstoy]  .mud-tabs-panels .mud-tab.mud-tab-active *,
.mud-dialog .mud-tab.mud-tab-active *[b-in63vrstoy] {
    color: #ffffff !important;
}

/* Hide underline slider for inner page tabs */
.umara-top-tab-bar-wrapper[b-in63vrstoy]  .mud-tabs-panels .mud-tab-slider,
.mud-dialog .mud-tab-slider[b-in63vrstoy] {
    display: none !important;
}

.umara-top-tab-bar-wrapper[b-in63vrstoy]  .mud-tabs-panels .mud-tabs-panels {
    display: block !important;
    flex: none !important;
    min-height: auto !important;
    height: auto !important;
    overflow: visible !important;
    overflow-y: visible !important;
    overflow-x: visible !important;
    padding: 0 !important;
}

.umara-top-tab-bar-wrapper[b-in63vrstoy]  .mud-tabs-panels .mud-tab-panel {
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
    padding: 0 !important;
}
/* /Layout/UpdateAvailableDetector.razor.rz.scp.css */
.floating-update-button[b-od4fhnmzmk] {
    position: fixed;
    right: 2rem;
    bottom: 2rem;
    padding: 1rem 1.5rem;
    animation: fadein-b-od4fhnmzmk 2s ease-out;
}

@keyframes fadein-b-od4fhnmzmk {
    from {
        right: -100%;
    }

    to {
        right: 2rem;
    }
}
/* /Pages/HR/JobApplication/ShareLinkPage.razor.rz.scp.css */
/* Tidak digunakan lagi, menggunakan native MudBlazor Tabs properties di file razor */