:root {
    --navy: #1f3864;
    --blue: #2e5496;
    --accent: #2e75b6;
    --light: #eef3fa;
}

body {
    background: #f5f7fa;
    color: #1a1a1a;
}

.app-navbar {
    background: var(--navy);
}
.app-navbar .navbar-brand,
.app-navbar .nav-link {
    color: #fff;
}
.app-navbar .nav-link:hover { color: #cfe0f5; }

.card {
    border: 1px solid #e3e8ef;
    border-radius: .6rem;
}
.page-title {
    color: var(--navy);
    font-weight: 600;
}

/* dashboard stat cards */
.stat-card { border-left: 4px solid var(--accent); }
.stat-card .stat-value { font-size: 1.8rem; font-weight: 700; color: var(--navy); }
.stat-card .stat-label { color: #6b7280; font-size: .85rem; text-transform: uppercase; letter-spacing: .03em; }

.table thead th {
    background: var(--light);
    color: var(--navy);
    border-bottom: 2px solid #d6e0ee;
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .02em;
}
.table td { vertical-align: middle; }

.nav-tabs .nav-link.active {
    color: var(--navy);
    font-weight: 600;
    border-bottom: 3px solid var(--accent);
}

.btn-primary { background: var(--blue); border-color: var(--blue); }
.btn-primary:hover { background: var(--navy); border-color: var(--navy); }

.login-wrap {
    max-width: 380px;
    margin: 6vh auto;
}
.login-card { border-top: 4px solid var(--accent); }

/* ---- dashboard status pills ---- */
.status-pill {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .35rem .7rem; border-radius: 2rem;
    background: #fff; border: 1px solid #d6e0ee; color: var(--navy);
    text-decoration: none; font-size: .85rem;
}
.status-pill:hover { background: var(--light); }
.status-pill-count { font-weight: 700; background: var(--light); border-radius: 1rem; padding: 0 .5rem; }
.status-pill-alert { border-color: #e0a800; background: #fff8e1; }
.status-pill-alert .status-pill-count { background: #ffe082; }

/* ---- status flow bar ---- */
.flowbar { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; }
.flow-stage {
    display: inline-flex; flex-direction: column; align-items: center;
    min-width: 96px; padding: .4rem .6rem; border-radius: .4rem;
    background: #fff; border: 1px solid #d6e0ee; color: var(--navy);
    text-decoration: none; line-height: 1.1;
}
.flow-stage:hover { background: var(--light); }
.flow-name { font-size: .78rem; }
.flow-count { font-size: 1.1rem; font-weight: 700; }
.flow-active { background: var(--blue); border-color: var(--blue); color: #fff; }
.flow-active .flow-name { color: #fff; }
.flow-done { opacity: .55; }
.flow-alert { border-color: #e0a800; background: #fff8e1; }
.flow-sep { color: #9bb0cc; font-size: 1.2rem; }
.flow-clear { margin-left: .5rem; font-size: .8rem; align-self: center;
    text-decoration: none; color: var(--accent); }

.sort-h { color: var(--navy); text-decoration: none; }
.sort-h:hover { text-decoration: underline; }

/* ---- status badges ---- */
.badge.status-Pending        { background:#6c757d; }
.badge.status-Verified       { background:#0d6efd; }
.badge.status-InProcess      { background:#0dcaf0; color:#08323a; }
.badge.status-Submitted      { background:#6610f2; }
.badge.status-ActionRequired { background:#fd7e14; }
.badge.status-Approved       { background:#198754; }
.badge.status-Closed         { background:#343a40; }

/* ---- license timeline ---- */
.timeline { padding-left: .25rem; }
.timeline-item { display: flex; gap: .75rem; padding: .25rem 0; border-left: 2px solid #e3e8ef; padding-left: .75rem; }
.timeline-when { color: #8a94a6; font-size: .75rem; min-width: 130px; }
.timeline-body { font-size: .88rem; }

/* ---- dashboard attention cards ---- */
.attention { border-left: 4px solid #adb5bd; color: var(--navy); }
.attention:hover { background: var(--light); }
.attention-on { border-left-color: #fd7e14; background: #fff8e1; }
.attention-num { font-size: 1.6rem; font-weight: 700; }

/* selected renewal bucket */
.ring { outline: 2px solid var(--accent); outline-offset: 1px; }