/* ================================================================
   nv-list.css
   Shared style sheet for List / Index pages in the system.
   ----------------------------------------------------------------
   • All selectors are scoped with the  nv-list-*  prefix.
   • No global overrides (body, table, input, select, button …).
   • Safe to load alongside nv-components.css without conflict.
   ================================================================ */

/* ------------------------------------------------------------------
   Page card accent — gives content area a clear branded top edge,
   serving as a visual "title anchor" for the whole block.
   ------------------------------------------------------------------ */
.nv-list-card {
    /* no top accent border */
}

/* ------------------------------------------------------------------
   Header / filter row
   ------------------------------------------------------------------ */

/* Flex group that holds UiSelect filters + add-button */
.nv-list-filter-group {
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

/* Wrapper around each UiSelect control – transparent to flex layout */
.nv-list-filter-control {
    display: flex;
    align-items: stretch;
}

/* Give the inner UiSelect slightly more height so it doesn't look thin */
.nv-list-filter-control .ui-select {
    min-height: 46px;
    font-size: 14px;
}

.nv-list-filter-control .ui-select__display {
    font-size: 14px;
    padding-block: 8px;
}

/* Scoped search-bar sizing */
.nv-list-search-input .search-input-wrap {
    min-height: 42px;
}

.nv-list-search-input .search-input {
    font-size: 14px;
}

.nv-list-search-input .btn-search {
    font-size: 14px;
    min-height: 42px;
    padding-inline: 14px;
}

/* ------------------------------------------------------------------
   Table wrapper / table
   ------------------------------------------------------------------ */

/* --- thead --- */
.nv-list-table thead th {
    background-color: #90BCCF;
    color: var(--main-color-th, #0F2429);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 10px 8px;
    white-space: nowrap;
    border-bottom: 2px solid #78ABBD;
}

/* --- tbody rows & cells --- */
.nv-list-table tbody tr {
    transition: background-color 0.15s ease;
}

.nv-list-table tbody tr:hover {
    background-color: var(--brand-primary-50, #FDF7E7);
}

.nv-list-table tbody td {
    padding: 10px 8px;
    vertical-align: middle;
}

/* ------------------------------------------------------------------
   Avatar cell
   ------------------------------------------------------------------ */
.nv-list-cell-avatar {
    padding: 6px 4px !important;
    text-align: center;
    vertical-align: middle;
}

.nv-list-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--gray-200, #E5E7EB);
    display: block;
    margin: 0 auto;
}

/* ------------------------------------------------------------------
   Name + code cell
   ------------------------------------------------------------------ */
.nv-list-cell-name {
    vertical-align: middle;
}

/* Employee code — secondary (muted, smaller) text */
.nv-list-code {
    display: inline-block;
    font-size: 12px;
    font-weight: 500;
    color: var(--muted, #9CA3AF);
    cursor: pointer;
    margin-bottom: 3px;
    line-height: 1.4;
    transition: color 0.15s ease;
}

.nv-list-code:hover {
    color: var(--brand-primary, #EDAD0F);
    text-decoration: underline;
}

/* Employee full name — primary (bold, dark) text */
.nv-list-name {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-main, #111827);
    line-height: 1.4;
}

.nv-list-name i {
    font-size: 13px;
    color: var(--muted, #9CA3AF);
    flex-shrink: 0;
}

/* ------------------------------------------------------------------
   Contact cell (email / phone)
   ------------------------------------------------------------------ */
.nv-list-cell-contact {
    vertical-align: middle;
}

.nv-list-contact-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: var(--color-text-muted, #374151);
    line-height: 1.5;
}

.nv-list-contact-item + .nv-list-contact-item {
    margin-top: 4px;
}

.nv-list-contact-icon {
    font-size: 13px;
    color: var(--muted, #9CA3AF);
    flex-shrink: 0;
    width: 16px;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ------------------------------------------------------------------
   Action cell (edit / delete buttons)
   ------------------------------------------------------------------ */
.nv-list-cell-actions {
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}

.nv-list-action-edit i {
    color: var(--brand-primary, #EDAD0F) !important;
    background: transparent !important;
    border-color: transparent !important;
}

.nv-list-action-delete i {
    color: var(--red-500, #F05252) !important;
    background: transparent !important;
    border-color: transparent !important;
}

.nv-list-action-delete:hover i {
    background-color: var(--red-100, #FEE2E2) !important;
    box-shadow: 0 2px 6px rgba(240, 82, 82, 0.18) !important;
    border-color: var(--red-500, #F05252) !important;
}

/* ------------------------------------------------------------------
   Responsive tweaks
   ------------------------------------------------------------------ */
@media (max-width: 768px) {
    .nv-list-toolbar {
        flex-wrap: wrap;
        gap: 8px;
    }

    .nv-list-search-input {
        width: 100% !important;
        max-width: 100%;
        min-width: 0;
    }

    .nv-list-filter-group {
        gap: 8px;
    }

    .nv-list-filter-control {
        width: 100%;
    }
}