/* ===== Theme ===== */
:root{
    --brand:#dc3545;        /* primary red */
    --ink:#0f172a;          /* headings */
    --muted:#6b7280;        /* secondary text */
    --line:#eef2f6;         /* borders */
}

/* ===== Cards (grid) ===== */
.prop-card{
    transition:transform .18s ease, box-shadow .18s ease;
    box-shadow:0 6px 18px rgba(16,18,22,.06);
    border-radius:1rem!important;
}
.prop-card:hover{
    transform:translateY(-4px);
    box-shadow:0 16px 36px rgba(220,53,69,.18);
}
.prop-media{ position:relative; overflow:hidden; }
.prop-media img{ transition:transform .35s ease; }
.prop-card:hover .prop-media img{ transform:scale(1.05); }
.prop-media .placeholder{
    background:#f8f9fb; display:flex; align-items:center; justify-content:center;
}

/* Chips on image */
.prop-media .chip{
    position:absolute; z-index:2; padding:.38rem .6rem;
    border-radius:999px; font-size:.72rem; font-weight:700; letter-spacing:.2px;
    background:#fff; backdrop-filter:saturate(140%) blur(6px);
    border:1px solid rgba(16,18,22,.06);
    display:inline-flex; align-items:center; gap:.25rem;
}
.chip--type{ left:.5rem; bottom:.5rem; color:var(--brand); border-color:rgba(220,53,69,.2); }
.chip--tx{ left:.5rem; top:.5rem; color:#334155; }
.chip--status{
    right:.5rem; top:.5rem; color:#16a34a; /* default success */
}
.chip--status.is-off{ color:#b91c1c; }

/* Specs pills */
.specs{ gap:.45rem; color:#64748b; }
.specs .pill{
    display:inline-flex; align-items:center; gap:.35rem;
    background:#f8fafc; border:1px solid var(--line);
    padding:.28rem .55rem; border-radius:999px; line-height:1;
    font-weight:600;
}

.price{ white-space:nowrap; }

/* ===== List view ===== */
.list-card{ border-radius:1rem!important; box-shadow:0 6px 18px rgba(16,18,22,.06); transition:box-shadow .18s ease; }
.list-card:hover{ box-shadow:0 16px 36px rgba(220,53,69,.18); }
.list-media{ position:relative; overflow:hidden; border-right:1px solid var(--line); }
.list-media img{ transition:transform .35s ease; }
.list-card:hover .list-media img{ transform:scale(1.05); }
.chip-flat{
    display:inline-flex; align-items:center; gap:.35rem;
    background:#fff; color:var(--brand); border:1px solid rgba(220,53,69,.22);
    padding:.25rem .6rem; border-radius:999px; font-size:.72rem; font-weight:700;
}

/* ===== Empty state ===== */
.empty-state{
    text-align:center; padding:2rem; border-radius:1rem;
    background:linear-gradient(135deg,#fff 0%, #fff5f5 100%);
    border:1px dashed rgba(220,53,69,.35);
}
.empty-state .btn-refresh{
    background:var(--brand); color:#fff; border:none; border-radius:999px;
    padding:.6rem 1.1rem; font-weight:800;
}

@media (prefers-reduced-motion: reduce){
    .prop-card,.prop-media img,.list-card,.list-media img{ transition:none!important; }
}

/* ===== Agent Header ===== */

.agent-card{
    background: #fff;
    border: 1px solid rgba(220,53,69,.12);
    box-shadow: 0 10px 24px rgba(16,24,40,.06);
}

/* Avatar container */
.agent-avatar{
    --size: 88px;                 /* adjust as needed */
    width: var(--size);
    aspect-ratio: 1 / 1;
    position: relative;
    border-radius: 16px;          /* match your rounded-4 */
    overflow: hidden;
    background:#f8f9fa;
    box-shadow: 0 6px 16px rgba(0,0,0,.06);
    transition: transform .2s ease, box-shadow .2s ease;
}
.agent-avatar:hover{
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(220,53,69,.18);
}

/* Image */
.agent-avatar .avatar-img{
    width: 100%;
    height: 100%;
    object-fit: cover;            /* ensures proper cover */
    display: block;
}

/* Ring (on top of the image) */
.agent-avatar .ring{
    position: absolute;
    inset: 0;                     /* cover the avatar */
    border-radius: inherit;
    z-index: 1;
    pointer-events: none;
    /* subtle inner white + outer brand red ring */
    box-shadow:
            inset 0 0 0 2px #fff,
            0 0 0 4px rgba(220,53,69,.35);
}

/* Optional: online dot (toggle by adding .is-online) */
.agent-avatar.is-online::after{
    content:"";
    position:absolute;
    width:12px; height:12px; border-radius:50%;
    right:6px; bottom:6px;
    background:#28a745;
    box-shadow: 0 0 0 2px #fff;
}

/* Size variants (optional) */
.agent-avatar.sm{ --size: 64px; }
.agent-avatar.lg{ --size: 112px; }


/* Chip (green) */
/* Base chip */
.chipProfil {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .75rem;
    font-weight: 600;
    padding: .3rem .65rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .9);
    color: #198754; /* Bootstrap green */
    border: 1px solid rgba(25, 135, 84, .25);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
    white-space: nowrap;
}