/**
 * base.css — Global resets, scrollbar, focus-visible, text utilities,
 * avatar badge, date label, view containers, dividers, and logo.
 */

/* ── Hide all scrollbars globally ── */
* {
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

*::-webkit-scrollbar {
    display: none; /* Chrome, Safari, and Opera */
}

/* ── Global background ── */
body {
    background-color: var(--color-cream);
}

/* ── Text color utilities ── */
.text-gray-400 {
    color: var(--color-gray-400);
}
.text-gray-500 {
    color: var(--color-gray-500);
}
.text-gray-600 {
    color: var(--color-gray-600);
}
.text-gray-700 {
    color: var(--color-gray-700);
}
.text-navy {
    color: var(--color-navy);
}

/* ── Avatar badge ── */
.avatar-badge {
    background-color: var(--color-primary-100);
    color: var(--color-navy);
}

/* ── Date label ── */
.date-label {
    color: var(--color-gray-700);
    min-width: 0;
}

/* ── View containers ── */
.view-map { padding: 0; }
.view-list { flex-direction: column; overflow-y: auto; }

/* ── My Opportunities styles ── */
.myopps-divider { background-color: var(--color-primary-200); }

.empty-state-message {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 10rem;
    font-size: 0.875rem;
    color: var(--color-gray-400);
    font-style: italic;
}

/* ── Logo wordmark ── */
.logo-wordmark {
    font-weight: 700;
    color: var(--color-navy);
    letter-spacing: -0.025em;
}

/* ── Scrollbar styling ── */
::-webkit-scrollbar {
    width: 5px; height: 5px;
}
::-webkit-scrollbar-track { 
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: var(--color-primary-200);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary-300);
}

/* ── Focus visible ── */
:focus-visible {
    outline-width: 2px;
    outline-style: solid;
    outline-color: var(--color-navy);
    outline-offset: 2px;
}

/* ── Dashed divider (My Opportunities filter section) ── */
.dashed-divider {
    border-top-width: 1px;
    border-top-style: dashed;
    border-top-color: var(--color-primary-200);
    margin: 1rem 0;
}

/* ── Draggable divider ── */
.draggable-divider {
    cursor: col-resize;
    transition: background-color 0.15s;
}

.draggable-divider:hover {
    background-color: var(--color-primary-400);
}