body {
    /*    font-size: .875rem;*/
}

*, ::after, ::before {
    box-sizing: border-box !important /*since Radzen V5*/
}


#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;
}

.rz-dialog {
    display: flex !important;
    flex-direction: column !important;
}

.rz-dialog-content {
    flex: 1 !important;
    min-height: 0 !important;
}

.rz-treenode-content {
    margin: 0 !important;
}

.viewname {
    font-size: 0.9em;
}

/*X-Small devices (portrait phones, less than 576px)
No media query for `xs` since this is the default in Bootstrap*/

/*Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {
    .viewname {
        font-size: 1.1em;
    }
}

/*Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
}

/*Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
}

/*X-Large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
}

/*XX-Large devices (larger desktops, 1400px and up)*/
@media (min-width: 1400px) {
}

li.borderless {
    border-top: 0 none;
    border-bottom: 0 none;
}

.card-accent {
    border-top: 3px solid var(--item-accent, #6c757d) !important;
}

/* Tinted title strip of a view item card. Negative margins stretch it over the
   card-body padding (px-2 pt-2, px-md-3 at >=768px) so the tint spans the full
   card width right below the accent border. */
.viewitem-header {
    background: color-mix(in srgb, var(--item-accent, #6c757d) 12%, transparent);
    margin: -0.5rem -0.5rem 0.25rem -0.5rem;
    padding: 0.3rem 0.5rem;
}

@media (min-width: 768px) {
    .viewitem-header {
        margin-left: -1rem;
        margin-right: -1rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* Hover affordances on dashboard view items: card lifts slightly, and a drag
   handle / edit button fade in at the top corners. */
.viewitem-wrap .card {
    transition: transform .15s ease, box-shadow .15s ease;
}

.viewitem-wrap:hover .card {
    transform: translateY(-2px);
}

.viewitem-edit-btn,
.viewitem-drag-handle {
    position: absolute;
    z-index: 3;
    opacity: 0;
    transition: opacity .15s ease;
    line-height: 1.2;
    font-size: 0.8rem;
    border: 1px solid #dee2e6;
    border-radius: 50rem;
    background: #fff;
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .1);
}

.viewitem-edit-btn {
    top: -8px;
    right: -2px;
    padding: 0.05rem 0.35rem;
}

.viewitem-drag-handle {
    top: -8px;
    left: 2px;
    padding: 0.05rem 0.2rem;
    cursor: grab;
    color: #6c757d;
}

.viewitem-wrap:hover .viewitem-edit-btn,
.viewitem-wrap:hover .viewitem-drag-handle {
    opacity: 1;
}

/* Account Widget & Navigation Styling */
.dropdown-item {
    transition: background-color 0.2s ease;
    padding: 0.5rem 1rem;
}

.dropdown-item:hover {
    background-color: #f8f9fa;
}

.dropdown-item i {
    width: 20px;
    text-align: center;
    margin-right: 8px;
}

/* Logout button in dropdown */
.dropdown-item form {
    margin: 0;
}

.dropdown-item form button {
    text-align: left;
}

.dropdown-item form button i {
    width: 20px;
    text-align: center;
    margin-right: 8px;
}

/* Navbar responsive */
@media (max-width: 991px) {
    .navbar-nav {
        padding: 1rem 0;
    }
    
    .navbar-nav .nav-link {
        padding: 0.5rem 1rem;
    }
    
    .navbar-collapse {
        margin-top: 1rem;
    }
}

/* Account widget mobile adjustments */
@media (max-width: 575px) {
    .d-flex.gap-2 {
        gap: 0.5rem !important;
    }
    
    .btn {
        padding: 0.375rem 0.75rem;
    }
}