:root {
    --app-bg: #f4f6fa;
}

body {
    background: var(--app-bg);
}

.guest-body {
    min-height: 100vh;
    background: linear-gradient(160deg, #eef3ff 0%, #f8f9fb 60%);
}

.navbar .nav-link {
    font-size: .95rem;
}

.navbar .nav-link.active {
    color: var(--bs-primary) !important;
    font-weight: 600;
}

.card {
    border-color: rgba(0, 0, 0, .06);
}

/* KPI cards */
.kpi .kpi-label,
.kpi-label {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--bs-secondary-color);
    margin-bottom: .25rem;
}

.kpi .kpi-value {
    font-size: 1.65rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: .25rem;
    white-space: nowrap;
}

.kpi-primary {
    background: linear-gradient(135deg, #0d6efd, #4b8dff);
    color: #fff;
}

.kpi-primary .kpi-label,
.kpi-primary .small {
    color: rgba(255, 255, 255, .85);
}

a.kpi:hover {
    border-color: var(--bs-primary);
}

/* Small colored dot used for categories / segments */
.dot {
    display: inline-block;
    width: .7rem;
    height: .7rem;
    border-radius: 50%;
    margin-right: .45rem;
    vertical-align: baseline;
}

.segment-badge {
    background: color-mix(in srgb, var(--seg) 15%, transparent);
    color: color-mix(in srgb, var(--seg) 80%, #000);
    border: 1px solid color-mix(in srgb, var(--seg) 35%, transparent);
    font-weight: 500;
}

.items-table .group-row th {
    background: var(--bs-tertiary-bg);
    font-weight: 600;
    border-top: 2px solid var(--bs-border-color);
}

.month-label {
    min-width: 10rem;
    opacity: 1 !important;
}

.chart-box {
    position: relative;
    height: 280px;
}

.chart-box-sm {
    height: 260px;
}

.chart-box-lg {
    height: 380px;
}

.upcoming-list {
    max-height: 360px;
    overflow-y: auto;
}

.history-table {
    max-height: 560px;
    overflow-y: auto;
}

.calendar-bar {
    height: 8px;
    background: var(--bs-tertiary-bg);
    border-radius: 4px;
    overflow: hidden;
}

.calendar-bar > span {
    display: block;
    height: 100%;
    background: var(--bs-primary);
    opacity: .6;
}

/* Honeypot field for bots */
.hp-field {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

[data-interval-field],
[data-loan-fields] {
    display: none;
}

[data-interval-field].show,
[data-loan-fields].show {
    display: block;
}