* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Montserrat', 'Segoe UI', Inter, Roboto, Tahoma, Geneva, Verdana, sans-serif;
}

body {
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    min-height: 100vh;
    padding: 0px;
}

a {
    color: #00b0e8;
    position: relative;
    text-decoration: none;
}

    a:before {
        text-decoration: none;
        content: '';
        position: absolute;
        width: 100%;
        height: 2px;
        border-radius: 2px;
       /* background-color: #25d366 !important; *#e83e8c */
        bottom: -4px;
        left: 0;
        transform-origin: right;
        transform: scaleX(0);
        transition: transform .3s ease-in-out;
    }

    a:hover:before {
        transform-origin: left;
        transform: scaleX(1);
    }

.container {
    max-width: 1200px;
    margin: 0 auto;
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.top-bar {
    background: linear-gradient(to right, #4b6cb7, #182848);
    color: white;
    padding: 15px 30px;
    transition: all 0.3s ease;
    position: relative;
}

    .top-bar h1 {
        font-size: 24px;
        margin-bottom: 10px;
    }

    .top-bar p {
        font-size: 14px;
        opacity: 0.9;
    }

.controls {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

button {
    background-color: rgba(255, 255, 255, 0.2);
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}

    button:hover {
        background-color: rgba(255, 255, 255, 0.3);
    }

.details {
    position: sticky;
    top: 0;
    background-color: white;
    padding: 20px 30px;
    border-bottom: 1px solid #eaeaea;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    z-index: 10;
}

    .details h2 {
        color: #2c3e50;
        margin-bottom: 10px;
    }

    .details p {
        color: #7f8c8d;
        line-height: 1.6;
    }

.content {
    padding: 30px;
}

    .content h3 {
        color: #2c3e50;
        margin-bottom: 15px;
    }

    .content p {
        margin-bottom: 20px;
        line-height: 1.6;
        color: #555;
    }

.status-dot {
    width: 10px;
    height: 10px;
    display: inline-block;
    border-radius: 50%;
    background: #d11; /* inactive = red */
}

    .status-dot.active {
        background: #16c60c; /* active = green */
        animation: blink 1s infinite ease-in-out;
        box-shadow: 0 0 6px rgba(22,198,12,.8);
    }

@keyframes blink {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: .25;
        transform: scale(.85);
    }
}

/* Main Shell */
.rz-layout {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
}

    /* The Middle Section (Where Sidebar and Body live) */
    /* Radzen usually wraps Sidebar and Body in a container. 
   We must ensure this container is a row. */
    .rz-layout > .rz-sidebar,
    .rz-layout > .rz-body {
        /* If they are direct children of a vertical flex-container, 
       they will stack unless we wrap them or fix the order. */
    }

/* Standard Radzen fix: ensures the body is positioned correctly next to sidebar */
.rz-body {
    position: relative; /* Essential for Radzen's internal calculations */
    flex: 1;
    display: flex;
    flex-direction: column;
    margin: 5px;
    overflow: hidden; /* Prevents the body from pushing the layout apart */
}
/* Force the Body to grow and fill remaining space */
/*
.rz-body {
    flex: 1 1 auto; // Grow to fill, shrink if needed 
    display: flex;
    flex-direction: column;
    overflow: auto; // Allow scrolling inside the body only 
}
*/
/* Ensure the container inside the body also stretches */
.rz-body-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.rz-panel-titlebar {
    flex-direction: row-reverse;
    justify-content: left;
}

.rz-heading {
    font-size: 3rem;
    line-height: 1.1875em;
    font-weight: 700;
    letter-spacing: -0.04em;
    color: var(--rz-text-title-color);
    margin-block-start: 0;
    margin-block-end: 1rem
}

.radzen-card-hover {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    transform: translateY(-4px);
    box-shadow: var(--rz-shadow-10);
}

    .radzen-card-hover:hover {
        transform: translateY(-8px); /* Lift up slightly */
        box-shadow: 0 10px 20px rgba(0,0,0,0.15); /* Add a soft shadow */
    }
/* =========================
   Card – Bootstrap-like
   ========================= */
.bg-transparent {
    background-color: transparent !important;
}

.border-success {
    border-color: var(--rz-series-2) !important; /* Bootstrap success green */
}

.card {
    background: transparent !important;
    color: var(--rz-text-color);
    border: 1px solid var(--rz-secondary); /* --rz-series-5 */
    border-radius: 0.5rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    font-family: 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif
}

    /* Hover animation */
    .card:hover {
        transform: translateY(-5px);
        box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
        background: var(--rz-series-1);
    }

/* Header */
.card-header {
    padding: 0.25rem;
    border-bottom: 1px solid var(--rz-secondary-dark);
    font-weight: 600;
    color: var(--rz-primary);
    text-transform: uppercase;
}

/* Body / Content */
.card-body {
    padding: 0.25rem;
    flex: 1;
}

/* Footer */
.card-footer {
    padding: 0.25rem;
    border-top: 1px solid var(--rz-secondary-light);
    font-size: .875rem;
    color: var(--rz-secondary-darker);
}

@keyframes slideInFromTop {
    0% {
        transform: translateY(-50px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.animate-card {
    animation: slideInFromTop 0.6s ease-out forwards;
    transition: opacity 0.3s ease-in-out;
}

/* Staggered delays for a more "liquid" feel */
.delay-1 {
    animation-delay: 0.1s;
    opacity: 0;
}

.delay-2 {
    animation-delay: 0.2s;
    opacity: 0;
}

.delay-3 {
    animation-delay: 0.3s;
    opacity: 0;
}

.delay-4 {
    animation-delay: 0.4s;
    opacity: 0;
}

.delay-5 {
    animation-delay: 0.5s;
    opacity: 0;
}

@keyframes bounceInTwice {
    0% {
        opacity: 0;
        transform: translateY(-500px) scale(0.3);
    }

    60% {
        opacity: 1;
        transform: translateY(25px) scale(1.1);
    }

    75% {
        transform: translateY(-15px) scale(0.95);
    }

    90% {
        transform: translateY(5px) scale(1.02);
    }

    100% {
        opacity: 1; /* Ensure it stays visible */
        transform: translateY(0) scale(1);
    }
}

.animate-bounce {
    /* 'forwards' tells the browser to stay at the 100% keyframe forever */
    animation: bounceInTwice 1.1s cubic-bezier(0.215, 0.610, 0.355, 1.000) forwards;
    backface-visibility: hidden;
}


.skeleton {
    background: #e0e0e0;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite linear;
    border-radius: 4px;
    display: inline-block;
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

.skeleton-text {
    height: 1.5rem;
    width: 80%;
    margin-bottom: 0.5rem;
}

.skeleton-number {
    height: 3rem;
    width: 40%;
}
/* Base unselected card */
.user-card {
    width: 280px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: transparent !important;
    border-radius: 12px;
    color: var(--rz-text-color);
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    transition: all 0.25s ease-in-out;
    cursor: pointer;
}

    /* Hover only when not selected */
    .user-card:hover:not(.selected) {
        box-shadow: 0 8px 20px rgba(0,0,0,0.12);
        transform: translateY(-2px);
    }

    /* Selected card */
    .user-card.selected {
        background: var(--rz-series-1); /* Highlight background */
        border: 2px solid var(--rz-series-3);
        box-shadow: 0 6px 20px rgba(0,120,212,0.3);
        transform: translateY(-4px);
    }

.user-card-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.user-card-footer {
    display: flex;
    justify-content: flex-start;
}

.status {
    display: flex;
    gap: 15px;
    margin-top: 20px;
    font-size: 14px;
}

.status-item {
    background-color: #eef2f7;
    padding: 8px 12px;
    border-radius: 4px;
}

@media (max-width: 768px) {
    .controls {
        flex-direction: column;
    }

    /*button {
        width: 100%;
    }*/
}

.font-monospace {
    transition: filter 0.2s ease-in-out;
}
/* You could also use a blur filter instead of dots */
.secret-hidden {
    filter: blur(5px);
}

.no-select {
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and Consumer Edge */
    user-select: none; /* Standard syntax */
    cursor: default;
}

.grid-thumb {
    width: 50px;
    height: 50px;
    object-fit: cover; /* This crops the image to a square without stretching */
    border-radius: 4px;
    border: 1px solid #ddd;
    cursor: pointer;
    transition: transform .2s;
}

    .grid-thumb:hover {
        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        transform: scale(2.1);
    }

.pims-grid-link {
    color: var(--rz-primary);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color 0.2s;
}

    .pims-grid-link:hover {
        color: var(--rz-secondary);
        text-decoration: underline;
    }


/* This targets the text within the Radzen DataGrid header cells */
.rz-column-title {
    text-transform: uppercase;
    font-weight: 600; /* Optional: adds a bit more punch to headers */
    letter-spacing: 0.05em; /* Optional: improves readability of all-caps text */
}

.pims-grid-header-caps .rz-column-title {
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 1px;
}

/* --- Loading Overlay Styles --- */

.rz-fileupload-content:hover {
    background-color: rgba(0, 123, 255, 0.05);
    border-color: var(--rz-primary) !important;
    transition: all 0.3s ease;
}

.status-failed {
    background-color: #fff1f0;
    color: #cf1322;
    font-weight: bold;
}

.status-sent {
    color: #389e0d;
}

/* 1. Full-Screen Overlay Background */

.loading-overlay {
    position: fixed; /* Keep it in place when scrolling */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.75); /* White background with transparency */
    z-index: 1050; /* Ensure it's above all other content (Bootstrap modals are z-index 1040) */
    display: flex; /* Enable Flexbox for centering */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    flex-direction: column; /* Stack spinner and text */
}

/* 2. Spinner Container (Optional, used here to group spinner and text) */
.spinner-container {
    display: flex;
    flex-direction: column;
    position: fixed;
    z-index: 999;
    top: 50%;
    left: 50%;
    text-align: center;
}

/* 3. Loading Text Styling */
.loading-text {
    margin-top: 15px;
    font-size: 1.2rem;
    font-weight: 600;
    color: #333;
}

/* 4. Spinner Customization (If using a CSS spinner like Bootstrap's .spinner-border) */
.spinner-border {
    width: 3rem;
    height: 3rem;
    border-width: 0.3em;
}

/* Optionally handle the no-animation state if you use it */
.no-animation {
    animation: none;
}

.user-card-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 10px;
}


.user-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 2px solid #e0e0e0;
}

.user-name {
    font-size: 1.1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

.user-info {
    font-size: 0.9rem;
    color: #444;
    margin-bottom: 15px;
    line-height: 1.5;
}

.icon {
    margin-right: 6px;
    width: 14px;
    color: #666;
}