/* =====================================================
   Password Cards — modern grid UI
   Scoped under .passwords-grid wrapper
   ===================================================== */

.passwords-grid {
    width: 100% !important;
    border: none !important;
    background: transparent;
    border-collapse: separate !important;
    border-spacing: 0 .75rem !important;
    table-layout: fixed;
}

.passwords-grid tr,
.passwords-grid td { width: 100%; }

.passwords-grid thead { display: none; }

.passwords-grid tbody tr {
    background: transparent !important;
}

.passwords-grid td {
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

/* ---- Card shell ---- */
.pw-card {
    position: relative;
    display: flex;
    gap: 1.1rem;
    padding: 1.1rem 1.25rem;
    background: #FFF;
    border: 1px solid #E7EAEE;
    border-radius: 14px;
    transition: all .18s ease;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

.pw-card:hover {
    border-color: #C6E6ED;
    box-shadow: 0 6px 20px -4px rgba(16, 24, 40, .10), 0 2px 4px -2px rgba(16, 24, 40, .06);
    transform: translateY(-1px);
}

.pw-card.locked {
    background: #FBFBFC;
    border-color: #E7EAEE;
}
.pw-card.locked:hover {
    transform: none;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

/* ---- Avatar (color-coded letter) ---- */
.pw-avatar {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFF;
    font-family: var(--font-headings);
    font-weight: 700;
    font-size: 1.25rem;
    flex-shrink: 0;
    user-select: none;
    letter-spacing: -.02em;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .1);
}

.pw-avatar a { color: #FFF; text-decoration: none; }

.pw-avatar.color-0 { background: linear-gradient(135deg, #00A1BE, #0086A0); }
.pw-avatar.color-1 { background: linear-gradient(135deg, #00CC78, #00A563); }
.pw-avatar.color-2 { background: linear-gradient(135deg, #FF4A11, #E0400E); }
.pw-avatar.color-3 { background: linear-gradient(135deg, #9B65AF, #7B4BA7); }
.pw-avatar.color-4 { background: linear-gradient(135deg, #E8B93D, #CC9A22); }
.pw-avatar.color-5 { background: linear-gradient(135deg, #D8237C, #B01A64); }
.pw-avatar.color-6 { background: linear-gradient(135deg, #2B7DE9, #1B5FBF); }
.pw-avatar.color-7 { background: linear-gradient(135deg, #FF8C42, #E07028); }
.pw-avatar.color-8 { background: linear-gradient(135deg, #6AB547, #529236); }
.pw-avatar.color-9 { background: linear-gradient(135deg, #3498DB, #217DBB); }

.pw-card.locked .pw-avatar {
    background: #E5E8EC !important;
    color: #8A939C;
    box-shadow: none;
}

/* ---- Body ---- */
.pw-body {
    flex: 1;
    min-width: 0;
}

.pw-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .5rem;
}

.pw-title-wrap { min-width: 0; flex: 1; }

.pw-title {
    font-family: var(--font-headings);
    font-size: 1.05rem;
    font-weight: 600;
    color: #27282A;
    line-height: 1.3;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.pw-title a {
    color: #27282A !important;
    text-decoration: none;
    border-bottom: 1px dotted transparent;
    transition: color .15s, border-color .15s;
}
.pw-title a:hover {
    color: #00A1BE !important;
    border-bottom-color: #00A1BE;
}

.pw-title-lock {
    color: #D8237C;
    font-size: .95rem;
}

.pw-domain {
    font-size: .8rem;
    color: #8A939C;
    margin-top: .15rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- Actions (always visible, solid circles) ---- */
.pw-actions {
    display: flex;
    gap: .4rem;
    flex-shrink: 0;
}

/* ---- Credential fields ---- */
.pw-fields {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .65rem 1.25rem;
    margin-top: .3rem;
}

.pw-field {
    min-width: 0;
}

.pw-field-label {
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #A8B0B8;
    font-weight: 600;
    margin-bottom: .1rem;
    display: flex;
    align-items: center;
    gap: .35rem;
}

.pw-field-label i {
    font-size: .8rem;
    color: #B8C1C9;
}

.pw-field-value {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .9rem;
    color: #27282A;
    font-weight: 500;
    min-height: 22px;
}

.pw-field-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1;
}

.pw-empty { color: #C5CCD4; font-weight: 400; font-style: italic; }

.pw-dots {
    font-family: 'Menlo', 'Consolas', monospace;
    letter-spacing: 3px;
    font-weight: 700;
    color: #5A6270;
    font-size: 1.1rem;
    line-height: 1;
}

.pw-inline-icon {
    border: none;
    background: transparent;
    color: #8A939C;
    padding: 3px 5px;
    border-radius: 6px;
    cursor: pointer;
    transition: all .15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    flex-shrink: 0;
}
.pw-inline-icon:hover { color: #00A1BE; background: #E7F7FA; }
.pw-inline-icon.copied { color: #00CC78 !important; background: #E8F9EF !important; }

/* ---- Team chips ---- */
.pw-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-top: .85rem;
    padding-top: .65rem;
    border-top: 1px dashed #EFF1F4;
}

.pw-chip {
    font-size: .7rem;
    padding: .22rem .6rem;
    border-radius: 999px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    letter-spacing: .01em;
}
.pw-chip i { font-size: .65rem; opacity: .8; }

.pw-chip.chip-chapter  { background: #E0F5F9; color: #0086A0; }
.pw-chip.chip-division { background: #E8F9EF; color: #00A563; }
.pw-chip.chip-dept     { background: #F3EDF9; color: #7B4BA7; }
.pw-chip.chip-district { background: #FEF0EA; color: #E0400E; }
.pw-chip.chip-precinct { background: #EAEBF3; color: #444E77; }

/* ---- Locked state overlay for hidden credentials ---- */
.pw-locked-msg {
    padding: .85rem 1rem;
    background: #FDE8F0;
    color: #B01A64;
    border-radius: 8px;
    font-size: .85rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-top: .3rem;
}

/* ---- Responsive ---- */
@media (max-width: 767.98px) {
    .pw-card { flex-direction: column; padding: 1rem; gap: .75rem; }
    .pw-avatar { width: 42px; height: 42px; font-size: 1.1rem; border-radius: 10px; }
    .pw-fields { grid-template-columns: 1fr; gap: .6rem; }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .pw-fields { grid-template-columns: 1fr 1fr; }
}