/* Admin Dashboard Styles */

/* Status badges */
.badge {
    font-size: 0.8rem;
    padding: 0.35em 0.65em;
}

/* Table styles */
.table-responsive {
    margin-bottom: 1rem;
}

/* Action buttons */
.btn-group .btn {
    margin-right: 0.25rem;
}

/* Card styles */
.card {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    margin-bottom: 1.5rem;
}

.card-header {
    background-color: rgba(0, 0, 0, 0.03);
    border-bottom: 1px solid rgba(0, 0, 0, 0.125);
}

/* Tab styles */
.nav-tabs .nav-link {
    border: none;
    color: #495057;
    padding: 0.5rem 1rem;
}

    .nav-tabs .nav-link.active {
        color: #007bff;
        background-color: transparent;
        border-bottom: 2px solid #007bff;
    }

    .nav-tabs .nav-link:hover:not(.active) {
        border-bottom: 2px solid #dee2e6;
    }

/* Pagination styles */
.pagination {
    margin-bottom: 0;
}

/* Timeline styles */
.timeline {
    position: relative;
    padding-left: 1.5rem;
    list-style: none;
    margin-bottom: 0;
}

.timeline-item {
    position: relative;
    padding-bottom: 1.5rem;
}

    .timeline-item:last-child {
        padding-bottom: 0;
    }

.timeline-marker {
    position: absolute;
    left: -1.5rem;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
}

.timeline-item:not(:last-child)::before {
    content: "";
    position: absolute;
    left: -1rem;
    top: 1rem;
    height: 100%;
    width: 2px;
    background-color: #e9ecef;
}

/* Document list */
.list-group-item i {
    margin-right: 0.5rem;
}

/* Capacity Utilization circular chart track */
.capacity-circular .mud-progress-circular-circle-placeholder {
    stroke: #e0e0e0 !important;
    stroke-opacity: 1 !important;
}

/* Capacity chart — allow tooltip to render above SVG bounds */
.capacity-chart,
.capacity-chart svg {
    overflow: visible !important;
}

/* Push the chart tooltip above the cursor instead of below */
.capacity-chart .mud-chart-tooltip {
    transform: translateY(calc(-100% - 12px));
    position: relative;
}

/* Scroll-triggered animations */
.scroll-animate {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.55s ease, transform 0.55s ease;
}

.scroll-animate.in-view {
    opacity: 1;
    transform: translateY(0);
}

.scroll-animate:nth-child(2) { transition-delay: 0.1s; }
.scroll-animate:nth-child(3) { transition-delay: 0.2s; }
.scroll-animate:nth-child(4) { transition-delay: 0.3s; }

/* ─── Chart entrance animations ─────────────────────────────────────────── */

/* Bar chart: bars grow up from the baseline */
@keyframes chartBarsGrow {
    from { clip-path: inset(100% 0 0 0); }
    to   { clip-path: inset(0 0 0 0); }
}

/* Line chart: line draws from left to right */
@keyframes chartLineReveal {
    from { clip-path: inset(0 100% 0 0); }
    to   { clip-path: inset(0 0 0 0); }
}

.chart-animate-bars {
    animation: chartBarsGrow 0.85s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 0.25s;
}

.chart-animate-line {
    animation: chartLineReveal 1.1s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 0.25s;
}

/* Pie/Donut animation is handled entirely by JS (SVG sweep reveal) */
.chart-animate-pie {
    position: relative;
}

/* ─── MudBlazor button hover lift ───────────────────────────────────────── */

.mud-button-root {
    transition: transform 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}

.mud-button-root:hover:not([disabled]):not(.mud-button-disable-elevation) {
    transform: translateY(-2px);
    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.18) !important;
}

.mud-button-root:active:not([disabled]) {
    transform: translateY(0) !important;
    transition-duration: 0.06s !important;
}

/* Icon buttons get a gentle scale instead of a lift */
.mud-icon-button {
    transition: transform 0.15s ease-in-out, opacity 0.15s ease-in-out !important;
}

.mud-icon-button:hover:not([disabled]) {
    transform: scale(1.12);
    opacity: 0.85;
}

/* ─── Mobile layout fix ──────────────────────────────────────────────────── */
/* MudMainContent uses px-12 (48px/side) which leaves too little room on mobile */
@media screen and (max-width: 600px) {
    .mud-main-content {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}