/* Main dashboard home only (.migm-dashboard on dashboard.html) — visual refresh, no logic */

/* Same family as Homer #wrapper / .content so header + sidebar + main column read as one shell */
#wrapper:has(.migm-dashboard) {
    background: #e6eaef;
    background: linear-gradient(180deg, #e9edf2 0%, #e5e9ef 35%, #e1e6ec 100%);
}

.migm-dashboard {
    --dash-brand-red: #c61d2f;
    --dash-brand-red-mid: #9e1628;
    --dash-brand-blue: #52b4e0;
    --dash-brand-blue-mid: #2e93c4;
    --dash-brand-blue-deep: #1e6f96;
    --dash-text: #2c3e50;
    --dash-text-muted: #5a6570;
    --dash-tile-radius: 22px;
    --dash-tile-shadow: 0 10px 28px rgba(30, 40, 55, 0.1);
    --dash-tile-shadow-hover: 0 16px 40px rgba(46, 147, 196, 0.18);

    position: relative;
    isolation: isolate;
    margin: 0;
    padding: 20px 15px 40px;
    min-height: calc(100vh - 90px);
    background: transparent !important;
}

/* Soft brand wash — sits on the same gray as the rest of the app (no hard color block) */
.migm-dashboard::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-color: transparent;
    background-image:
        radial-gradient(ellipse 95% 72% at 10% 12%, rgba(198, 29, 47, 0.11) 0%, transparent 58%),
        radial-gradient(ellipse 90% 68% at 92% 78%, rgba(82, 180, 224, 0.1) 0%, transparent 54%),
        radial-gradient(ellipse 110% 85% at 48% 100%, rgba(30, 111, 150, 0.06) 0%, transparent 48%),
        linear-gradient(
            125deg,
            rgba(158, 22, 40, 0.07) 0%,
            rgba(198, 29, 47, 0.05) 22%,
            rgba(46, 147, 196, 0.07) 55%,
            rgba(82, 180, 224, 0.06) 78%,
            rgba(30, 111, 150, 0.06) 100%
        );
    background-size: 100% 100%, 100% 100%, 100% 100%, 280% 280%;
    animation: migm-dash-bg-flow 22s ease-in-out infinite;
}

.migm-dashboard > * {
    position: relative;
    z-index: 1;
}

@keyframes migm-dash-bg-flow {
    0% {
        background-position: 0% 40%, 0% 0%, 0% 0%, 0% 50%;
    }
    50% {
        background-position: 0% 40%, 0% 0%, 0% 0%, 100% 50%;
    }
    100% {
        background-position: 0% 40%, 0% 0%, 0% 0%, 0% 50%;
    }
}

/* Rounded tile panels */
.migm-dashboard .hpanel {
    border: none !important;
    border-radius: var(--dash-tile-radius) !important;
    overflow: hidden;
    box-shadow: var(--dash-tile-shadow);
    background: #e8ecf2;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
}

.migm-dashboard .hpanel:hover {
    transform: translateY(-4px);
    box-shadow: var(--dash-tile-shadow-hover);
}

.migm-dashboard .hpanel .panel-body {
    border-radius: var(--dash-tile-radius) !important;
    background: transparent !important;
    padding-top: 22px;
    padding-bottom: 22px;
}

/* Welcome / neutral tiles — softened (not bright white) */
.migm-dashboard .hpanel:not(.hbgblue):not(.hbgred):not(.hbgyellow) {
    background: rgba(232, 236, 242, 0.92);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.migm-dashboard .hpanel:not(.hbgblue):not(.hbgred):not(.hbgyellow) .panel-body {
    background: transparent !important;
}

/* Welcome strip */
.migm-dashboard .hpanel h3.text-uppercase,
.migm-dashboard .hpanel h3.m-xs {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--dash-text);
}

.migm-dashboard .hpanel h3 .loadingSpinner img {
    vertical-align: middle;
    margin-left: 8px;
    opacity: 0.85;
}

/* Tile titles — match button weight / tracking */
.migm-dashboard .hpanel:not(.hbgblue):not(.hbgred):not(.hbgyellow) h2 {
    margin-top: 0;
    margin-bottom: 14px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--dash-text);
    line-height: 1.3;
}

.migm-dashboard .hpanel:not(.hbgblue):not(.hbgred):not(.hbgyellow) h2.m-b-xs {
    margin-bottom: 12px;
}

/* Icons on neutral tiles — brand color, balanced with titles */
.migm-dashboard .hpanel:not(.hbgblue):not(.hbgred):not(.hbgyellow) .panel-body [class*="pe-7s"] {
    color: var(--dash-brand-blue-mid);
    opacity: 0.92;
    filter: drop-shadow(0 3px 6px rgba(46, 147, 196, 0.25));
}

.migm-dashboard .hpanel:not(.hbgblue):not(.hbgred):not(.hbgyellow) .panel-body .m {
    margin-bottom: 16px !important;
}

/* Shortcut tiles — brand-aligned gradients */
.migm-dashboard .hpanel.hbgblue {
    background: linear-gradient(145deg, var(--dash-brand-blue-mid) 0%, var(--dash-brand-blue) 55%, #7ec8eb 100%) !important;
    box-shadow: 0 10px 28px rgba(46, 147, 196, 0.35);
}

.migm-dashboard .hpanel.hbgblue:hover {
    box-shadow: 0 18px 44px rgba(46, 147, 196, 0.45);
}

.migm-dashboard .hpanel.hbgred {
    background: linear-gradient(145deg, var(--dash-brand-red-mid) 0%, var(--dash-brand-red) 50%, #e04558 100%) !important;
    box-shadow: 0 10px 28px rgba(198, 29, 47, 0.35);
}

.migm-dashboard .hpanel.hbgred:hover {
    box-shadow: 0 18px 44px rgba(198, 29, 47, 0.42);
}

.migm-dashboard .hpanel.hbgyellow {
    background: linear-gradient(145deg, #b8860b 0%, #d4a017 45%, #e8c547 100%) !important;
    color: #fff;
    box-shadow: 0 10px 28px rgba(180, 130, 20, 0.3);
}

.migm-dashboard .hpanel.hbgyellow:hover {
    box-shadow: 0 18px 44px rgba(212, 160, 23, 0.38);
}

.migm-dashboard .hpanel.hbgblue a,
.migm-dashboard .hpanel.hbgred a,
.migm-dashboard .hpanel.hbgyellow a {
    color: #fff !important;
    text-decoration: none !important;
}

.migm-dashboard .hpanel.hbgblue h3,
.migm-dashboard .hpanel.hbgred h3,
.migm-dashboard .hpanel.hbgyellow h3 {
    margin: 0;
    padding: 8px 6px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: #fff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    line-height: 1.35;
}

/* Links wrapping buttons */
.migm-dashboard .hpanel .panel-body > .text-center > a {
    display: inline-block;
    margin-top: 4px;
    text-decoration: none !important;
}

/* Buttons — one scale, cohesive with tile type */
.migm-dashboard .hpanel .btn {
    border-radius: 999px;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 10px 22px !important;
    min-height: 40px;
    line-height: 1.3;
    border: none;
    box-shadow: 0 4px 14px rgba(30, 60, 90, 0.15);
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        filter 0.2s ease;
}

.migm-dashboard .hpanel:not(.hbgblue):not(.hbgred):not(.hbgyellow) .btn {
    box-shadow: 0 5px 16px rgba(46, 147, 196, 0.22);
}

.migm-dashboard .hpanel .btn:hover,
.migm-dashboard .hpanel .btn:focus {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(30, 60, 90, 0.2);
    filter: brightness(1.03);
}

.migm-dashboard .hpanel .btn-info {
    background: linear-gradient(135deg, var(--dash-brand-blue-deep) 0%, var(--dash-brand-blue-mid) 45%, var(--dash-brand-blue) 100%);
    color: #fff;
}

.migm-dashboard .hpanel .btn-success {
    background: linear-gradient(135deg, #156b4a 0%, #1e8c62 50%, #26a06e 100%);
    color: #fff;
}

.migm-dashboard .hpanel .btn-warning {
    background: linear-gradient(135deg, #a86c00 0%, #d48a00 50%, #e8a010 100%);
    color: #fff;
}

.migm-dashboard .hpanel .btn-danger {
    background: linear-gradient(135deg, var(--dash-brand-red-mid) 0%, var(--dash-brand-red) 55%, #e04054 100%);
    color: #fff;
}

.migm-dashboard .hpanel .small {
    color: var(--dash-text-muted);
}

@media (prefers-reduced-motion: reduce) {
    .migm-dashboard::before {
        animation: none;
        background-size: auto, auto, auto, auto;
    }

    .migm-dashboard .hpanel,
    .migm-dashboard .hpanel .btn {
        transition: none;
    }

    .migm-dashboard .hpanel:hover,
    .migm-dashboard .hpanel .btn:hover,
    .migm-dashboard .hpanel .btn:focus {
        transform: none;
    }
}