/* ============================================================
   DICIP LAYOUT
   App shell structure: sidebar, appbar, dialogs.
   Page content layout belongs in the page's own .razor.css.
   ============================================================ */

/* ---------- Sidebar (DicipSideMenu) ---------- */

.dicip-main-drawer,
.dicip-mobile-drawer {
    background-color: var(--dicip-sidebar-bg);
    border-top-left-radius: var(--dicip-radius-xl);
    border-top-right-radius: var(--dicip-radius-xl);
    border-bottom-left-radius: var(--dicip-radius-xl);
    border-bottom-right-radius: var(--dicip-radius-xl);
}

    .dicip-main-drawer .mud-typography,
    .dicip-mobile-drawer .mud-typography {
        color: var(--dicip-sidebar-text);
    }

.mud-drawer--mini {
    background-color: var(--dicip-sidebar-bg);
    min-width: var(--dicip-drawer-width-mini);
}

    .dicip-main-drawer .mud-nav-link,
    .dicip-mobile-drawer .mud-nav-link,
    .mud-drawer--mini .mud-nav-link {
        color: var(--dicip-sidebar-text-muted);
    }

        .dicip-main-drawer .mud-nav-link .mud-icon-root,
        .dicip-mobile-drawer .mud-nav-link .mud-icon-root,
        .mud-drawer--mini .mud-nav-link .mud-icon-root,
        .mud-drawer--mini .mud-nav-link svg {
            color: var(--dicip-sidebar-icon);
            fill: var(--dicip-sidebar-icon);
        }

        .dicip-main-drawer .mud-nav-link:hover,
        .dicip-mobile-drawer .mud-nav-link:hover {
            background-color: var(--dicip-sidebar-hover-bg);
            border-radius: var(--dicip-radius-md);
        }

            .dicip-main-drawer .mud-nav-link:hover .mud-icon-root,
            .dicip-mobile-drawer .mud-nav-link:hover .mud-icon-root {
                color: rgba(255, 255, 255, 0.9);
            }

        .dicip-main-drawer .mud-nav-link.active,
        .dicip-mobile-drawer .mud-nav-link.active,
        .mud-drawer--mini .mud-nav-link.active {
            background-color: var(--dicip-sidebar-active-bg);
            border-radius: var(--dicip-radius-md);
        }

            .dicip-main-drawer .mud-nav-link.active .mud-icon-root,
            .dicip-mobile-drawer .mud-nav-link.active .mud-icon-root,
            .mud-drawer--mini .mud-nav-link.active .mud-icon-root,
            .mud-drawer--mini .mud-nav-link.active svg {
                color: var(--dicip-primary);
                fill: var(--dicip-primary);
            }

            .dicip-main-drawer .mud-nav-link.active .mud-nav-link-text,
            .dicip-mobile-drawer .mud-nav-link.active .mud-nav-link-text {
                color: var(--dicip-sidebar-icon-active);
                font-weight: 600;
            }

.dicip-main-drawer .mud-nav-link-text {
    font-size: 14px;
    font-weight: 400;
}

.dicip-main-drawer-toogle-button {
    color: var(--dicip-sidebar-icon);
}

.dicip-main-drawer-minified-toggle-button-container {
    position: absolute;
    background: var(--dicip-sidebar-bg);
    left: calc(var(--dicip-drawer-width-mini) + 16px - 37px);
    top: 29px;
    z-index: 10000;
    border-radius: var(--dicip-radius-pill);
}

/* ---------- Sidebar logo ---------- */

.dicip-mini-logo {
    height: 26px;
    width: auto;
}

.dicip-main-drawer .logo-box-dicip,
.mud-drawer--mini .logo-box-dicip {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0;
}

/* ---------- Sidebar footer ---------- */

.dicip-sidebar-footer {
    display: flex;
    flex-direction: column;
    gap: var(--dicip-space-2);
    padding-top: var(--dicip-space-2);
}

.dicip-sidebar-footer-logo {
    height: 52px;
    width: auto;
    margin-bottom: var(--dicip-space-1);
}

.dicip-sidebar-footer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--dicip-space-2);
}

.dicip-sidebar-footer-copyright {
    font-size: 11px;
    line-height: 1.4;
    color: var(--dicip-sidebar-text-muted);
    flex: 1;
    min-width: 0;
}

.dicip-sidebar-footer-flag {
    width: 18px;
    height: auto;
    flex-shrink: 0;
}

.dicip-sidebar-footer-privacy {
    font-size: 11px;
    color: var(--dicip-sidebar-text-muted);
    text-decoration: none;
}

    .dicip-sidebar-footer-privacy:hover {
        text-decoration: underline;
    }

/* ---------- App bar ─────────────────────────────────────────
   KEY FIXES:
   1. Solid background — prevents content bleeding through on scroll
   2. border-bottom instead of box-shadow (elevation=0) for subtle separation
   3. Reduced vertical padding — appbar was too tall
   4. position:sticky equivalent via MudBlazor's Fixed prop; z-index ensures
      it sits above scrolling content
   ──────────────────────────────────────────────────────────── */
/* ── Appbar height alignment ─────────────────────────────────
   MudBlazor fixes the appbar and offsets content by 
   --mud-appbar-height. We override that variable to match 
   our reduced appbar size, so content isn't clipped.
   ──────────────────────────────────────────────────────────── */

:root {
    --mud-appbar-height: 56px; /* reduced from MudBlazor default 64px */
}



/* Remove the extra top padding we set — height is now controlled above */
.dicip-app-bar {
    padding-top: 0;
    padding-bottom: 0;
}

.dicip-app-bar {

    margin-left: var(--dicip-space-4);
    width: calc(100% - 32px);
    background-color: var(--dicip-bg-page) !important; /* solid — no bleed-through */
    border-bottom: 1px solid var(--dicip-border-soft);
    z-index: 1100;
}
.mud-appbar.dicip-app-bar {
    height: 56px;
    min-height: 56px;
    background-color: var(--dicip-bg-page) !important;
    box-shadow: none;
    border-bottom: 1px solid var(--dicip-border-soft);
    z-index: 1100;
    backdrop-filter: none;

}

.ak-master-topbar {
    width: 100%;
}

/* Search bar — constrain width so it doesn't dominate the appbar */
.Srch-contTP {
    max-width: 360px;
    width: 100%;
}

@media (max-width: 600px) {
    .Srch-contTP {
        max-width: 200px;
    }
}



/* ---------- Appbar responsive margins ---------- */

@media (min-width: 960px) {
    .mud-drawer-open-mini-md-left.mud-drawer-left-clipped-never .mud-appbar.dicip-app-bar {
        margin-left: calc(var(--dicip-drawer-width) + 16px + 48px);
        width: calc(100% - var(--dicip-drawer-width) - 16px - 48px - 16px);
    }
}

.mud-drawer-close-mini-md-left.mud-drawer-left-clipped-never .mud-appbar.dicip-app-bar {
    margin-left: calc(var(--dicip-drawer-width-mini) + 16px + 48px);
    width: calc(100% - var(--dicip-drawer-width-mini) - 16px - 48px - 16px);
}

/* ---------- Main content area ---------- */

.mud-main-content,
.ak-main-Content {
    background-color: var(--dicip-bg-page);
    min-height: 100vh;
}

/* ---------- Dialogs ---------- */

.mud-dialog {
    background-color: var(--dicip-bg-card);
    color: var(--dicip-text-primary);
}

    .mud-dialog:not(.mud-message-box) {
        height: 100%;
        max-height: 100%;
        position: absolute;
        top: 0;
        right: 0;
        width: 50%;
        min-width: 300px;
    }

@media (max-width: 599px) {
    .mud-dialog:not(.mud-message-box) {
        width: 100%;
        min-width: 100%;
    }
}

.dicip-form-dialog {
    height: calc(100% - var(--dicip-edit-form-footer-height, 70px));
    overflow: hidden;
}

    .dicip-form-dialog .mud-dialog-content {
        height: calc(100% - var(--dicip-edit-form-footer-height, 70px));
        border-top: 1px solid var(--dicip-border);
        border-bottom: 1px solid var(--dicip-border);
        border-radius: 0;
    }

    .dicip-form-dialog .mud-dialog-actions {
        height: var(--dicip-edit-form-footer-height, 70px);
        padding: 0 var(--dicip-space-2);
    }

.dicip-form-dialog-content {
    overflow-y: auto;
}

/* ---------- Beta badge ---------- */

.beta-badge {
    position: fixed;
    bottom: 16px;
    left: 16px;
    width: fit-content;
    z-index: 2000;
    background-color: #FF9800;
    color: #000;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: var(--dicip-radius-sm);
    box-shadow: var(--dicip-shadow-sm);
}

/* ---------- Icon button (appbar) ---------- */

.dicip-icon-button {
    border-radius: var(--dicip-radius-pill);
    padding: var(--dicip-space-2);
}