/* Tema backend bergaya Ynex (MudBlazor). Semua aturan dibatasi .ynex-app agar halaman publik tidak terpengaruh. */

.ynex-app {
    /* Variabel lama yang masih dipakai halaman-halaman backend, dipetakan ke palet Ynex */
    --primary-color: #845adf;
    --secondary-color: #23b7e5;
    --accent-color: #26bf94;
    --success-color: #26bf94;
    --warning-color: #f5b849;
    --danger-color: #e6533c;
    --error-color: #e6533c;
    --info-color: #49b6f5;
    --light-color: #f5f6fa;
    --bg-light: #f5f6fa;
    --dark-color: #33405a;
    --text-primary: #33405a;
    --text-secondary: #6b7a90;
    --muted-color: #8c9097;
    --border-color: #ebeaf1;
    --border-radius: 0.5rem;
    --border-radius-lg: 0.625rem;
    --shadow-sm: 0 0.125rem 0.25rem rgba(20, 30, 60, 0.05);
    --shadow: 0 0.25rem 0.75rem rgba(20, 30, 60, 0.06);
    --shadow-md: 0 0.25rem 0.75rem rgba(20, 30, 60, 0.06);
    --shadow-lg: 0 0.5rem 1.5rem rgba(20, 30, 60, 0.10);

    --bs-primary: #845adf;
    --bs-primary-rgb: 132, 90, 223;
    --bs-link-color: #845adf;
    --bs-link-color-rgb: 132, 90, 223;
    --bs-link-hover-color: #6f48c7;
    --bs-body-color: #33405a;
    --bs-border-color: #ebeaf1;

    font-family: 'Outfit', 'Inter', 'Segoe UI', sans-serif;
    color: var(--text-primary);
}

/* ---------- Kerangka ---------- */
.ynex-app .mud-layout { background: #f5f6fa; min-height: 100vh; }
.ynex-app .ynex-main { background: #f5f6fa; }
.ynex-app .ynex-content { padding: 1.5rem; }

.ynex-app .ynex-appbar {
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 1px 4px rgba(20, 30, 60, 0.04);
}

.ynex-app .ynex-event { display: flex; align-items: center; gap: .5rem; margin-left: .5rem; min-width: 0; }
.ynex-app .ynex-event-name {
    font-weight: 600; font-size: 1.05rem; color: var(--text-primary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.ynex-app .ynex-user { display: flex; align-items: center; gap: .6rem; cursor: pointer; padding: .25rem .5rem; border-radius: .5rem; }
.ynex-app .ynex-user:hover { background: rgba(132, 90, 223, 0.08); }
.ynex-app .ynex-user-text { display: flex; flex-direction: column; line-height: 1.15; }
.ynex-app .ynex-user-name { font-weight: 600; font-size: .875rem; color: var(--text-primary); }
.ynex-app .ynex-user-role { font-size: .75rem; color: var(--muted-color); }

/* ---------- Sidebar ---------- */
.ynex-app .ynex-drawer { border-right: 1px solid var(--border-color); }

.ynex-app .ynex-brand {
    height: 3.75rem; display: flex; align-items: center; padding: 0 1.25rem;
    border-bottom: 1px solid var(--border-color);
}
.ynex-app .ynex-brand-link { display: flex; align-items: center; gap: .65rem; text-decoration: none; }
.ynex-app .ynex-logo { height: 34px; width: auto; }
.ynex-app .ynex-brand-text { display: flex; flex-direction: column; line-height: 1.1; white-space: nowrap; }
.ynex-app .ynex-brand-title { font-weight: 700; font-size: 1rem; color: var(--primary-color); }
.ynex-app .ynex-brand-sub { font-size: .75rem; color: var(--muted-color); letter-spacing: .08em; }
.ynex-app .ynex-logo { height: 30px; max-width: 110px; object-fit: contain; }
.ynex-app .ynex-brand { padding: 0 1rem; }
.ynex-app .ynex-nav .mud-nav-link-text,
.ynex-app .ynex-nav .mud-nav-group > .mud-nav-link .mud-nav-link-text {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .875rem;
}

.ynex-app .ynex-nav-search { padding: .85rem 1rem .25rem; }
.ynex-app .ynex-search-field .mud-input-outlined-border { border-color: var(--border-color); }

.ynex-app .ynex-nav { padding: .25rem .5rem 1rem; }
.ynex-app .ynex-nav-category {
    font-size: .6875rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
    color: var(--muted-color); padding: 1rem .9rem .35rem;
}
.ynex-app .ynex-nav .mud-nav-link,
.ynex-app .ynex-nav .mud-nav-group > .mud-nav-link { border-radius: .4rem; font-size: .9rem; color: #536485; }
.ynex-app .ynex-nav .mud-nav-link:hover { background: rgba(132, 90, 223, 0.07); color: var(--primary-color); }
.ynex-app .ynex-nav .mud-nav-link.active:not(.mud-nav-link-disabled) {
    background: rgba(132, 90, 223, 0.12); color: var(--primary-color); font-weight: 600;
}
.ynex-app .ynex-nav .mud-nav-link.active .mud-nav-link-icon { color: var(--primary-color); }
.ynex-app .ynex-nav .mud-nav-group .mud-collapse-container .mud-nav-link { padding-left: 2.6rem; font-size: .85rem; }
.ynex-app .ynex-nav-hint { color: var(--muted-color); margin-left: .25rem; }
.ynex-app .ynex-nav-empty { padding: 1.5rem 1rem; text-align: center; color: var(--muted-color); font-size: .9rem; }

/* ---------- Konten: gaya Ynex untuk Bootstrap yang dipakai halaman ---------- */
.ynex-app h1, .ynex-app h2, .ynex-app h3, .ynex-app h4, .ynex-app h5, .ynex-app h6 { color: var(--text-primary); }
.ynex-app h1 { font-size: 1.75rem; }
.ynex-app h2 { font-size: 1.5rem; }
.ynex-app h3 { font-size: 1.3rem; }
.ynex-app h4 { font-size: 1.15rem; }

.ynex-app .card {
    border: 1px solid var(--border-color);
    border-radius: .625rem;
    box-shadow: 0 .125rem .25rem rgba(20, 30, 60, 0.05);
    transform: none;
}
.ynex-app .card::before { display: none; }
.ynex-app .card:hover { transform: none; box-shadow: 0 .125rem .25rem rgba(20, 30, 60, 0.05); }
.ynex-app .card-header {
    background: #fff; border-bottom: 1px solid var(--border-color);
    padding: .9rem 1.25rem; font-weight: 600; color: var(--text-primary);
}
.ynex-app .card-body { padding: 1.25rem; }

.ynex-app .btn { border-radius: .4rem; font-weight: 500; box-shadow: none; transform: none; }
.ynex-app .btn::before { display: none; }
.ynex-app .btn:hover { transform: none; }
.ynex-app .btn-primary {
    background: #845adf; border-color: #845adf; color: #fff;
}
.ynex-app .btn-primary:hover, .ynex-app .btn-primary:focus, .ynex-app .btn-primary:active {
    background: #6f48c7; border-color: #6f48c7; color: #fff;
}
.ynex-app .btn-outline-primary { color: #845adf; border-color: #845adf; background: transparent; }
.ynex-app .btn-outline-primary:hover { background: #845adf; border-color: #845adf; color: #fff; }
.ynex-app .btn-secondary { background: #23b7e5; border-color: #23b7e5; color: #fff; }
.ynex-app .btn-success { background: #26bf94; border-color: #26bf94; color: #fff; }
.ynex-app .btn-warning { background: #f5b849; border-color: #f5b849; color: #fff; }
.ynex-app .btn-danger  { background: #e6533c; border-color: #e6533c; color: #fff; }
.ynex-app .btn-info    { background: #49b6f5; border-color: #49b6f5; color: #fff; }

.ynex-app .text-primary { color: #845adf !important; }
.ynex-app .bg-primary { background-color: #845adf !important; }
.ynex-app .border-primary { border-color: #845adf !important; }
.ynex-app .badge.bg-primary { background-color: #845adf !important; }

.ynex-app .form-control, .ynex-app .form-select {
    border-color: #dfe3ec; border-radius: .4rem; background-color: #fff;
}
.ynex-app .form-control:focus, .ynex-app .form-select:focus {
    border-color: #845adf; box-shadow: 0 0 0 .2rem rgba(132, 90, 223, 0.15);
}
.ynex-app .form-check-input:checked { background-color: #845adf; border-color: #845adf; }

.ynex-app .table > :not(caption) > * > * { border-bottom-color: var(--border-color); }
.ynex-app .table thead th {
    background: #f9f9fc; color: #536485; font-weight: 600; font-size: .8125rem;
    border-bottom: 1px solid var(--border-color);
}
.ynex-app .table-hover > tbody > tr:hover > * { background-color: rgba(132, 90, 223, 0.04); }

.ynex-app .nav-tabs .nav-link.active, .ynex-app .nav-pills .nav-link.active {
    color: #845adf; border-color: #845adf;
}
.ynex-app .nav-pills .nav-link.active { background: rgba(132, 90, 223, 0.12); border-color: transparent; }

.ynex-app .page-item.active .page-link { background-color: #845adf; border-color: #845adf; color: #fff; }
.ynex-app .page-link { color: #845adf; }

.ynex-app .alert { border-radius: .5rem; }
.ynex-app .modal-content { border-radius: .75rem; border: 0; box-shadow: 0 1rem 3rem rgba(20, 30, 60, 0.2); }

/* ---------- Error UI Blazor ---------- */
.ynex-app ~ #blazor-error-ui {
    background: #e6533c; bottom: 0; display: none; left: 0; padding: .9rem 1.5rem;
    position: fixed; width: 100%; z-index: 1900; color: #fff;
    align-items: center; justify-content: space-between;
}

/* ---------- Mobile ---------- */
@media (max-width: 991.98px) {
    .ynex-app .ynex-content { padding: 1rem; }
    .ynex-app .ynex-user-text { display: none; }
}