/* Small, deliberate additions that sit on top of Tailwind utilities.
   Everything else in the UI is composed from Tailwind classes directly
   in the markup so there's one styling system, not two. */

* { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 999px; }

/* Sidebar active indicator */
.nav-item {
    position: relative;
    cursor: pointer;
}
.nav-item.active {
    color: #00994d;
    background: #eef2ff;
}
.nav-item.active::before {
    content: "";
    position: absolute;
    left: 0; top: 8px; bottom: 8px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: #006400;
}

/* Modal system (custom, no framework JS dependency) */
.modal-backdrop-custom {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(2px);
    display: flex; align-items: center; justify-content: center;
    padding: 1rem;
    z-index: 50;
    opacity: 0;
    pointer-events: none;
    transition: opacity 150ms ease;
}
.modal-backdrop-custom.open {
    opacity: 1;
    pointer-events: auto;
}
.modal-panel {
    transform: translateY(8px) scale(0.98);
    transition: transform 150ms ease;
}
.modal-backdrop-custom.open .modal-panel {
    transform: translateY(0) scale(1);
}

/* Status badges - color is the data */
.badge {
    display: inline-flex; align-items: center;
    font-size: 0.72rem; font-weight: 600;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    text-transform: capitalize;
}
.badge-confirmed  { background: #dcfce7; color: #15803d; }
.badge-provisional{ background: #fef9c3; color: #a16207; }
.badge-registered { background: #dbeafe; color: #1d4ed8; }
.badge-pending     { background: #f1f5f9; color: #475569; }

/* Table row hover + clickable affordance */
.data-row { cursor: pointer; }
.data-row:hover { background: #f8fafc; }

table.data-table thead th {
    position: sticky; top: 0;
    background: #f8fafc;
    z-index: 1;
}

/* Photo thumbnail */
.avatar-frame {
    width: 96px; height: 96px;
    object-fit: cover;
    border-radius: 0.75rem;
    border: 1px solid #e2e8f0;
}