/* ==========================================================================
   Role Tiles (role-tile) — Phase 8 UI Overhaul
   ========================================================================== */

.role-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: var(--role-tile-height);
    padding: 0.375rem 0.5rem;
    border-radius: 0.375rem;
    border: 1px solid var(--role-tile-open-border);
    background: var(--role-tile-open-bg);
    text-align: center;
    transition: border-color 0.15s;
}

/* Shrink icon buttons inside role tiles so $ + location stack without overlap */
.role-tile .header-btn.header-btn-icon {
    height: 20px !important;
    width: 20px !important;
    min-width: 20px !important;
    padding: 0 !important;
    border-radius: 4px;
}

.role-tile .header-btn.header-btn-icon i {
    font-size: 0.7rem;
}

/* $ bill icon — top right (clickable) */
.role-tile .role-tile__pay-icon {
    position: absolute !important;
    top: 0.1875rem;
    right: 0.1875rem;
    left: auto !important;
    z-index: 2;
}

/* Location/virtual icon — bottom right */
.role-tile .role-tile__location {
    position: absolute !important;
    bottom: 0.1875rem !important;
    right: 0.1875rem !important;
    top: auto !important;
    left: auto !important;
    z-index: 1;
}

.role-tile__location .bi-geo-alt-fill {
    color: var(--color-danger, #dc3545);
}

.role-tile__location:hover .bi-geo-alt-fill {
    color: #fff;
}

.role-tile--filled {
    background: var(--role-tile-filled-bg);
    border-color: var(--role-tile-filled-border);
}

.role-tile--mine {
    background: var(--role-tile-mine-bg);
    border-color: var(--role-tile-mine-border);
    position: relative;
    text-decoration: none;
}

.role-tile--mine[role="link"],
a.role-tile--mine {
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
}

.role-tile--mine[role="link"]:hover,
a.role-tile--mine:hover {
    background: color-mix(in srgb, var(--brand-primary) 18%, white);
    border-color: var(--brand-primary);
}

.role-tile--more {
    font-size: 0.75rem;
    color: #6b7280;
    border-style: dashed;
}

.role-tile__name {
    font-size: 0.6875rem;
    font-weight: 600;
    color: #374151;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.role-tile__status {
    font-size: 0.6875rem;
    margin-top: 0.125rem;
}

.role-tile__status--open {
    color: #9ca3af;
}

.role-tile__status--filled {
    color: var(--brand-highlight);
}


.role-tile--with-photo {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    gap: 0.375rem;
    padding: 0.125rem 0.375rem 0.125rem 0.125rem;
}

.role-tile--with-photo .role-tile__avatar {
    flex-shrink: 0;
}

.role-tile__info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding-right: 1.5rem;
}

.role-tile__worker-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Assignment month/year nav with arrows */
.assignment-nav {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.assignment-nav__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--filter-ctrl-h, 36px);
    min-width: var(--filter-ctrl-h, 36px);
    height: var(--filter-ctrl-h, 36px);
    border-radius: 8px;
    border: 1px solid #d1d5db;
    background: #fff;
    color: #374151;
    text-decoration: none;
    box-sizing: border-box;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.assignment-nav__arrow:hover {
    background: var(--brand-primary);
    color: #fff;
    border-color: var(--brand-primary);
}

.assignment-nav__arrow i {
    font-size: 0.85rem;
    line-height: 1;
}