/* ============================================================
   PropChat Brand Kit — Single source of truth
   ============================================================ */
:root {
    /* Brand tokens */
    --pc-bg: #1E1E1E;
    --pc-black: #000000;
    --pc-surface: #343133;
    --pc-orange: #FF751F;
    --pc-muted: #A2A2A2;
    --pc-white: #FFFFFF;

    /* Semantic states */
    --color-success: #4ADE80;
    --color-warning: #FACC15;
    --color-danger: #F87171;
    --color-info: #60A5FA;

    /* Leaderboard */
    --color-gold: #FACC15;
    --color-silver: #9CA3AF;
    --color-bronze: #CD7F32;

    /* Typography */
    --font-primary: 'Inter', system-ui, sans-serif;
    --font-display: 'Michroma', 'Inter', sans-serif;

    /* Layout */
    --sidebar-width: 260px;
}

/* ============================================================
   Base
   ============================================================ */
body {
    font-family: var(--font-primary);
    color: var(--pc-white);
    background-color: var(--pc-bg);
}

/* ============================================================
   Sidebar
   ============================================================ */
.sidebar {
    background-color: var(--pc-black);
    width: var(--sidebar-width);
    min-height: 100vh;
}

.sidebar a {
    color: var(--pc-muted);
    transition: all 0.15s;
}

.sidebar a:hover {
    color: var(--pc-white);
    background-color: var(--pc-surface);
}

.sidebar a.active {
    color: var(--pc-white);
    background-color: var(--pc-surface);
    border-left: 3px solid var(--pc-orange);
    padding-left: 9px;
}

/* ============================================================
   Buttons
   ============================================================ */
.btn-primary {
    background-color: var(--pc-orange);
    color: var(--pc-white);
    font-weight: 600;
    transition: filter 0.15s;
}

.btn-primary:hover {
    filter: brightness(1.1);
}

.btn-secondary {
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--pc-white);
    transition: background-color 0.15s;
}

.btn-secondary:hover {
    background-color: var(--pc-surface);
}

/* ============================================================
   Cards & Surfaces
   ============================================================ */
.card {
    background-color: var(--pc-surface);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* ============================================================
   Stat cards — coloured left-border accents
   ============================================================ */
.stat-card {
    border-left: 4px solid var(--pc-orange);
    border-radius: 12px;
}

.stat-card.stat-success { border-left-color: var(--color-success); }
.stat-card.stat-warning { border-left-color: var(--color-warning); }
.stat-card.stat-info { border-left-color: var(--color-info); }
.stat-card.stat-danger { border-left-color: var(--color-danger); }

/* ============================================================
   Lead tag badges
   ============================================================ */
.badge-hot { background-color: rgba(248, 113, 113, 0.2); color: #F87171; }
.badge-warm { background-color: rgba(250, 204, 21, 0.2); color: #FACC15; }
.badge-cold { background-color: rgba(96, 165, 250, 0.2); color: #60A5FA; }
.badge-follow { background-color: rgba(74, 222, 128, 0.2); color: #4ADE80; }

/* ============================================================
   WhatsApp-style chat bubbles (dark theme)
   ============================================================ */
.msg-inbound {
    background-color: var(--pc-surface);
    border-left: 3px solid var(--pc-orange);
    border-radius: 0 12px 12px 12px;
    max-width: 75%;
}

.msg-outbound {
    background-color: rgba(255, 117, 31, 0.1);
    border-radius: 12px 0 12px 12px;
    max-width: 75%;
    margin-left: auto;
}

.msg-note {
    background-color: rgba(250, 204, 21, 0.1);
    border-radius: 12px;
    max-width: 75%;
    margin-left: auto;
    font-style: italic;
}

/* ============================================================
   Unread dot
   ============================================================ */
.unread-dot {
    width: 8px;
    height: 8px;
    background-color: var(--pc-orange);
    border-radius: 50%;
}

/* ============================================================
   Leaderboard
   ============================================================ */
.rank-1 { background-color: rgba(250, 204, 21, 0.08); }
.rank-badge {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
}
.rank-badge.gold { background-color: var(--color-gold); color: var(--pc-black); }
.rank-badge.silver { background-color: var(--color-silver); color: var(--pc-white); }
.rank-badge.bronze { background-color: var(--color-bronze); color: var(--pc-white); }

/* ============================================================
   Forms — dark inputs
   ============================================================ */
input, select, textarea {
    background-color: var(--pc-bg);
    border-color: rgba(255, 255, 255, 0.15);
    color: var(--pc-white);
}

input::placeholder, textarea::placeholder {
    color: var(--pc-muted);
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--pc-orange);
    box-shadow: 0 0 0 2px rgba(255, 117, 31, 0.3);
}

/* File input overrides */
input[type="file"] {
    background-color: transparent;
}

input[type="file"]::file-selector-button {
    background-color: var(--pc-orange);
    color: var(--pc-white);
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    margin-right: 12px;
}

input[type="file"]::file-selector-button:hover {
    filter: brightness(1.1);
}

/* ============================================================
   Scrollbar (Webkit)
   ============================================================ */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--pc-bg); }
::-webkit-scrollbar-thumb { background: var(--pc-surface); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--pc-muted); }

/* ============================================================
   Responsive inbox
   ============================================================ */
@media (max-width: 768px) {
    .inbox-sidebar {
        width: 100% !important;
    }
    .inbox-chat {
        display: none;
    }
    .inbox-chat.active {
        display: block;
        width: 100%;
    }
}

/* ============================================================
   Logo animation
   ============================================================ */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.logo-fade-in {
    animation: fadeIn 0.6s ease forwards;
}

/* ============================================================
   Orange glow for hero CTAs
   ============================================================ */
.glow-orange {
    box-shadow: 0 0 24px rgba(255, 117, 31, 0.25);
}