/* ============================================================
   OASIS Admin overrides — role-based dashboard + notifications
   Uses Velzon CSS variables so light & dark mode both work.
   ============================================================ */

/* ── KPI cards ─────────────────────────────────────────────── */
.ocs-kpi {
    border: 1px solid var(--vz-border-color);
    transition: transform .18s ease, box-shadow .18s ease;
}
.ocs-kpi:hover {
    transform: translateY(-3px);
    box-shadow: 0 .5rem 1.2rem rgba(30, 32, 37, .10);
}
.ocs-kpi-num {
    font-weight: 700;
    letter-spacing: -.5px;
    font-variant-numeric: tabular-nums;
}
.fs-11 { font-size: 11px !important; }
.fs-13 { font-size: 13px !important; }
.fs-17 { font-size: 17px !important; }

/* ── Secondary stats strip ─────────────────────────────────── */
.ocs-strip { border: 1px dashed var(--vz-border-color); }
.ocs-strip-item + .ocs-strip-item { position: relative; }
@media (min-width: 1200px) {
    .ocs-strip-item:not(:last-child)::after {
        content: '';
        position: absolute;
        right: 0; top: 20%;
        height: 60%; width: 1px;
        background: var(--vz-border-color);
    }
}

/* ── Scrollable panels (scannable lists) ───────────────────── */
.ocs-scroll {
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(133, 141, 180, .35) transparent;
}
.ocs-scroll::-webkit-scrollbar { width: 6px; }
.ocs-scroll::-webkit-scrollbar-thumb {
    background: rgba(133, 141, 180, .35);
    border-radius: 3px;
}
.ocs-scroll::-webkit-scrollbar-track { background: transparent; }

/* ── Urgent follow-ups ─────────────────────────────────────── */
.ocs-urgent-card { border-top: 3px solid var(--vz-danger); }
.ocs-urgent-item { transition: background .15s ease; }
.ocs-urgent-item:hover { background: var(--vz-light); }
.ocs-overdue { border-left: 3px solid var(--vz-danger); }
.ocs-urgent-item:not(.ocs-overdue) { border-left: 3px solid transparent; }

/* ── Lists / tables ────────────────────────────────────────── */
.ocs-row-link:hover { background: var(--vz-light); }
.ocs-row-link a:hover { color: var(--vz-primary) !important; }
.ocs-table thead th {
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: .4px;
}
.ocs-table thead.sticky-top { z-index: 1; }
.ocs-progress { height: 6px; border-radius: 3px; }
.ocs-timeline li + li { border-top: 1px solid var(--vz-border-color); }
.ocs-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Admin self/team toggle ────────────────────────────────── */
.ocs-view-toggle .btn { min-width: 104px; }

/* ── Notification bell ─────────────────────────────────────── */
@keyframes ocsBellRing {
    0%, 100% { transform: rotate(0); }
    15%      { transform: rotate(14deg); }
    30%      { transform: rotate(-12deg); }
    45%      { transform: rotate(8deg); }
    60%      { transform: rotate(-6deg); }
    75%      { transform: rotate(3deg); }
}
.ocs-bell-active i.bx-bell {
    animation: ocsBellRing 1.6s ease-in-out;
    animation-iteration-count: 2;
    transform-origin: top center;
    color: var(--vz-danger);
}
#ocsNotifBadge { top: 12px; left: 26px; }

.ocs-notif-menu {
    width: 340px;
    max-width: 92vw;
    border: 1px solid var(--vz-border-color);
    box-shadow: 0 .6rem 1.6rem rgba(30, 32, 37, .16);
    overflow: hidden;
}
.ocs-notif-head {
    background: var(--vz-light);
    border-bottom: 1px solid var(--vz-border-color);
}
.ocs-notif-body {
    max-height: 330px;
    overflow-y: auto;
    scrollbar-width: thin;
}
.ocs-notif-body::-webkit-scrollbar { width: 6px; }
.ocs-notif-body::-webkit-scrollbar-thumb {
    background: rgba(133, 141, 180, .35);
    border-radius: 3px;
}
.ocs-notif-item { white-space: normal; border-bottom: 1px solid var(--vz-border-color); }
.ocs-notif-item:last-child { border-bottom: 0; }
.ocs-notif-item:hover { background: var(--vz-light); }
.ocs-notif-foot {
    border-top: 1px solid var(--vz-border-color);
    background: var(--vz-light);
}

/* ── Toast pop-ups (new lead / due reminders) ──────────────── */
#ocsToastWrap {
    position: fixed;
    top: 84px;
    right: 18px;
    z-index: 1090;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}
.ocs-toast {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 320px;
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--vz-secondary-bg, #fff);
    color: var(--vz-body-color);
    border: 1px solid var(--vz-border-color);
    border-left: 4px solid var(--vz-danger);
    text-decoration: none;
    opacity: 0;
    transform: translateX(24px);
    transition: opacity .35s ease, transform .35s ease;
    pointer-events: auto;
}
.ocs-toast.show { opacity: 1; transform: translateX(0); }
.ocs-toast i { font-size: 20px; color: var(--vz-danger); flex-shrink: 0; }
.ocs-toast small { color: var(--vz-secondary-color); }
.ocs-toast:hover { color: var(--vz-body-color); }

/* clickable body + dismiss (×) button */
.ocs-toast-link {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}
.ocs-toast-close {
    flex-shrink: 0;
    align-self: flex-start;
    background: transparent;
    border: 0;
    padding: 2px;
    line-height: 1;
    border-radius: 4px;
    cursor: pointer;
    color: var(--vz-secondary-color);
}
.ocs-toast-close i { font-size: 16px; color: inherit; }
.ocs-toast-close:hover { color: var(--vz-body-color); background: var(--vz-tertiary-bg, #f3f3f9); }