/* Fluent 2 look for the admin backend. Telerik's Fluent theme (loaded in App.razor) already styles
   the components; this adds the app shell around them — tokens, header, navigation, surfaces and
   typography. Everything is scoped under .admin-shell so the public site is untouched. */
.admin-shell {
    --fl-brand: #0f6cbd;
    --fl-brand-hover: #115ea3;
    --fl-brand-subtle: #ebf3fc;
    --fl-bg: #f5f5f5;
    --fl-surface: #ffffff;
    --fl-stroke: #e0e0e0;
    --fl-stroke-subtle: #ededed;
    --fl-text: #242424;
    --fl-text-2: #616161;
    --fl-radius: 8px;
    --fl-shadow-2: 0 0 2px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .14);
    --fl-shadow-8: 0 0 2px rgba(0, 0, 0, .12), 0 4px 8px rgba(0, 0, 0, .14);

    height: 100vh;
    background: var(--fl-bg);
    color: var(--fl-text);
    font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", sans-serif;
    font-size: 14px;
    line-height: 20px;
}

.admin-shell .k-drawer-container,
.admin-shell .k-drawer-wrapper {
    height: 100%;
}

/* ---------- Navigation drawer ---------- */
.admin-shell .k-drawer {
    background: var(--fl-surface);
    border-right: 1px solid var(--fl-stroke);
}

.admin-shell .k-drawer-items {
    padding: 8px 8px;
}

.admin-shell .k-drawer-item {
    position: relative;
    margin: 2px 0;
    padding: 0 10px;
    min-height: 40px;
    border: 0;
    border-radius: 4px;
    color: var(--fl-text);
    background: transparent;
    font-weight: 400;
}

.admin-shell .k-drawer-item:hover {
    background: #f5f5f5;
}

.admin-shell .k-drawer-item.k-selected,
.admin-shell .k-drawer-item.k-selected:hover {
    background: #ebebeb;
    color: var(--fl-text);
    font-weight: 600;
}

/* Fluent's selection indicator: a short brand-colored pill on the leading edge. */
.admin-shell .k-drawer-item.k-selected::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 3px;
    border-radius: 2px;
    background: var(--fl-brand);
}

.admin-shell .k-drawer-item .k-svg-icon,
.admin-shell .k-drawer-item .k-icon {
    color: var(--fl-text-2);
}

.admin-shell .k-drawer-item.k-selected .k-svg-icon,
.admin-shell .k-drawer-item.k-selected .k-icon {
    color: var(--fl-brand);
}

/* ---------- Header (command bar) ---------- */
.admin-topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 12px;
    height: 48px;
    padding: 0 16px 0 8px;
    background: var(--fl-surface);
    border-bottom: 1px solid var(--fl-stroke);
}

.admin-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 600;
    color: var(--fl-text);
}

.admin-brand img {
    width: 24px;
    height: 24px;
    border-radius: 4px;
}

.admin-spacer {
    flex: 1;
}

.admin-user {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--fl-text);
}

/* Fluent "Avatar": initials in a brand-tinted circle. */
.admin-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--fl-brand-subtle);
    color: var(--fl-brand);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.admin-logout-link {
    padding: 5px 12px;
    border: 1px solid var(--fl-stroke);
    border-radius: 4px;
    background: var(--fl-surface);
    color: var(--fl-text);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.admin-logout-link:hover {
    background: #f5f5f5;
}

/* ---------- Content area ---------- */
.admin-content {
    padding: 24px;
}

.admin-content h1 {
    margin: 0 0 4px;
    font-size: 28px;
    line-height: 36px;
    font-weight: 600;
    color: var(--fl-text);
}

.admin-content h2 {
    font-size: 20px;
    line-height: 28px;
    font-weight: 600;
}

.admin-content h3 {
    font-size: 16px;
    font-weight: 600;
}

.admin-content a:not(.k-button):not(.k-link) {
    color: var(--fl-brand);
    text-decoration: none;
}

.admin-content a:not(.k-button):not(.k-link):hover {
    color: var(--fl-brand-hover);
    text-decoration: underline;
}

/* Surfaces: the main data components sit on white "cards" with a hairline border and soft shadow. */
.admin-content .k-grid,
.admin-content .k-treelist,
.admin-content .k-card,
.admin-content .k-tabstrip,
.admin-content .k-listview {
    background: var(--fl-surface);
    border: 1px solid var(--fl-stroke-subtle);
    border-radius: var(--fl-radius);
    box-shadow: var(--fl-shadow-2);
    overflow: hidden;
}

.admin-content .k-tabstrip {
    box-shadow: none;
    border: 0;
    background: transparent;
    overflow: visible;
}

.admin-content .k-grid-header,
.admin-content .k-grid-header .k-table-th {
    background: #fafafa;
    font-weight: 600;
}

.admin-content .k-card {
    border-radius: var(--fl-radius);
}

.admin-content .k-card-title {
    font-size: 28px;
    line-height: 36px;
    font-weight: 600;
}

.admin-content .k-card-subtitle {
    color: var(--fl-text-2);
}

.admin-content .stat-row .k-card {
    box-shadow: var(--fl-shadow-2);
}

.admin-content .k-window,
.admin-content .k-dialog {
    border-radius: var(--fl-radius);
    box-shadow: var(--fl-shadow-8);
}

/* Inputs get Fluent's slightly rounded, bottom-accented look from the Telerik theme; just keep
   the rounded corner consistent for plain inputs used on a few pages. */
.admin-content input:not([type=checkbox]):not([type=radio]):not(.k-input-inner),
.admin-content textarea:not(.k-input-inner) {
    border-radius: 4px;
}

@media (max-width: 720px) {
    .admin-content {
        padding: 16px;
    }

    .admin-user .admin-name {
        display: none;
    }
}

/* ---------- Nav links (rendered by NavLink inside the drawer item template) ---------- */
.admin-shell .admin-nav-link,
.admin-shell .admin-nav-link:hover {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 40px;
    color: var(--fl-text);
    text-decoration: none;
}

.admin-shell .admin-nav-link.active {
    font-weight: 600;
}

/* The selected item is the one whose NavLink matches the current URL (NavLink adds "active"). */
.admin-shell .k-drawer-item:has(.admin-nav-link.active) {
    background: #ebebeb;
}

.admin-shell .k-drawer-item:has(.admin-nav-link.active)::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 3px;
    border-radius: 2px;
    background: var(--fl-brand);
}

.admin-shell .k-drawer-item:has(.admin-nav-link.active) .k-svg-icon,
.admin-shell .k-drawer-item:has(.admin-nav-link.active) .k-icon {
    color: var(--fl-brand);
}

/* Tab strips here are used purely as filters (the content area is empty) — don't draw an empty panel. */
.admin-content .k-tabstrip-content,
.admin-content .k-tabstrip > .k-content {
    padding: 0;
    border: 0;
    background: transparent;
}

.admin-content .k-tabstrip-items-wrapper {
    border-bottom: 1px solid var(--fl-stroke);
}