/* ── Color tokens ────────────────────────────────────────────── */
:root {
    --color-primary:      #009ef7;
    --color-primary-dark: #0095e8;
    --color-bg-dark:      #1e1e3f;
    --color-bg-body:      #f5f8fa;
    --color-text-dark:    #181c32;
    --color-text-muted:   #a1a5b7;
    --color-success:      #50cd89;
    --color-danger:       #f1416c;
    --color-warning:      #ffc700;
    --color-info:         #7239ea;
}

/* ── Shared layout component overrides ──────────────────────── */
.drawer-overlay { z-index: 109; }

/* ── Page-level progress bar ────────────────────────────────── */
#page-progress {
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    width: 0;
    background: var(--color-primary);
    z-index: 10000;
    opacity: 0;
    pointer-events: none;
    transition: none;
}
#page-progress.is-loading {
    opacity: 1;
    width: 85%;
    transition: width 8s cubic-bezier(0.05, 0.5, 0.1, 1);
}
#page-progress.is-done {
    width: 100%;
    opacity: 0;
    transition: width 0.15s ease, opacity 0.35s ease 0.15s;
}

/* ── Breadcrumb strip ───────────────────────────────────────── */
.app-breadcrumb {
    padding-top: .625rem;
    padding-bottom: .625rem;
}
.app-breadcrumb .breadcrumb {
    font-size: .875rem;
    font-weight: 500;
}
.app-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    color: var(--color-text-muted);
}
.app-breadcrumb .breadcrumb-item a {
    color: var(--color-primary);
    text-decoration: none;
}
.app-breadcrumb .breadcrumb-item a:hover {
    text-decoration: underline;
}
.app-breadcrumb .breadcrumb-item.active {
    color: var(--color-text-dark);
    font-weight: 600;
}

/* ── Badge: smoother rendering (overrides Metronic custom.css) ── */
.badge {
    font-weight: 700;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}