/* ============================================================
   Binance P2P Manager – app.css
   Color Scheme: Deep Crimson, Warm Orange-Brown, Charcoal
   ============================================================ */

:root {
    --p2p-crimson:      #C0392B;
    --p2p-crimson-dark: #922B21;
    --p2p-orange:       #CA6F1E;
    --p2p-orange-light: #F0A500;
    --p2p-charcoal:     #2C3E50;
    --p2p-charcoal-mid: #34495E;
    --p2p-sidebar-w:    260px;
    --p2p-topbar-h:     58px;
}

/* ── Reset / Base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background: #F4F6F9;
    color: #2C3E50;
    margin: 0;
    overflow-x: hidden;
}

/* ── Sidebar ──────────────────────────────────────────────── */
.sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: var(--p2p-sidebar-w);
    background: var(--p2p-charcoal);
    color: #ECF0F1;
    display: flex;
    flex-direction: column;
    z-index: 1040;
    transition: transform .25s ease;
    overflow-y: auto;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    padding: 1.2rem 1.5rem;
    background: var(--p2p-crimson-dark);
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: .5px;
    flex-shrink: 0;
}

.sidebar-user {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: 1rem 1.5rem;
    background: var(--p2p-charcoal-mid);
    border-bottom: 1px solid rgba(255,255,255,.08);
    flex-shrink: 0;
}
.user-avatar { font-size: 1.8rem; color: #BDC3C7; }
.user-name { font-size: .875rem; font-weight: 600; }
.user-role { font-size: .65rem; text-transform: uppercase; letter-spacing: .5px; }

.sidebar-nav { flex: 1; padding: .5rem 0 1rem; }
.sidebar-nav .nav-item { }
.nav-section {
    padding: .9rem 1.5rem .3rem;
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #95A5A6;
    font-weight: 600;
}
.sidebar-nav .nav-link {
    color: #BDC3C7;
    padding: .55rem 1.5rem;
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: .875rem;
    border-left: 3px solid transparent;
    transition: background .15s, color .15s, border-color .15s;
    text-decoration: none;
}
.sidebar-nav .nav-link i { font-size: 1rem; flex-shrink: 0; }
.sidebar-nav .nav-link:hover {
    background: rgba(255,255,255,.06);
    color: #FFF;
}
.sidebar-nav .nav-link.active {
    background: rgba(192,57,43,.25);
    color: #FFF;
    border-left-color: var(--p2p-crimson);
}

/* Collapsed sidebar */
.sidebar-collapsed .sidebar { transform: translateX(calc(-1 * var(--p2p-sidebar-w))); }
.sidebar-collapsed .main-content { margin-left: 0; }

/* ── Main Content ─────────────────────────────────────────── */
.main-content {
    margin-left: var(--p2p-sidebar-w);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    transition: margin-left .25s;
}

/* ── Topbar ───────────────────────────────────────────────── */
.topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    height: var(--p2p-topbar-h);
    background: #FFF;
    border-bottom: 1px solid #E0E6ED;
    display: flex;
    align-items: center;
    padding: 0 1.5rem;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.topbar .breadcrumb { font-size: .8rem; }

/* ── Page Content ─────────────────────────────────────────── */
.page-content { padding: 1.75rem; flex: 1; }

/* ── Stat Cards ───────────────────────────────────────────── */
.stat-card {
    background: #FFF;
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
    border: 1px solid #E8EDF2;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
    transition: box-shadow .2s;
}
.stat-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); }
.stat-card .stat-icon {
    width: 48px; height: 48px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}
.stat-card .stat-label  { font-size: .78rem; color: #7F8C9A; font-weight: 500; text-transform: uppercase; letter-spacing: .4px; }
.stat-card .stat-value  { font-size: 1.7rem; font-weight: 700; line-height: 1.2; color: var(--p2p-charcoal); }
.stat-card .stat-delta  { font-size: .78rem; margin-top: .2rem; }

/* Icon backgrounds */
.icon-crimson  { background: rgba(192,57,43,.12);  color: var(--p2p-crimson); }
.icon-orange   { background: rgba(202,111,30,.12); color: var(--p2p-orange); }
.icon-blue     { background: rgba(52,152,219,.12); color: #3498DB; }
.icon-green    { background: rgba(39,174,96,.12);  color: #27AE60; }
.icon-purple   { background: rgba(142,68,173,.12); color: #8E44AD; }
.icon-teal     { background: rgba(26,188,156,.12); color: #1ABC9C; }
.icon-dark     { background: rgba(44,62,80,.12);   color: var(--p2p-charcoal); }
.icon-red      { background: rgba(231,76,60,.12);  color: #E74C3C; }

/* ── Table Card ───────────────────────────────────────────── */
.table-card {
    background: #FFF;
    border-radius: 10px;
    border: 1px solid #E8EDF2;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
    overflow: hidden;
}
.table-card .table-card-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #F0F4F8;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #FAFBFC;
}
.table-card .table-card-title { font-weight: 600; font-size: .95rem; color: var(--p2p-charcoal); }
.table-card .table { margin-bottom: 0; }
.table-card .table th { font-size: .75rem; text-transform: uppercase; letter-spacing: .4px; color: #7F8C9A; background: #FAFBFC; font-weight: 600; }
.table-card .table td { font-size: .875rem; vertical-align: middle; }

/* ── Status Badges ────────────────────────────────────────── */
.status-badge {
    padding: .25rem .65rem;
    border-radius: 20px;
    font-size: .75rem;
    font-weight: 600;
    display: inline-block;
}
.status-pending    { background: #FEF9E7; color: #D4AC0D; }
.status-paid       { background: #EAF4FB; color: #1A7CB2; }
.status-completed  { background: #EAFAF1; color: #1A9850; }
.status-cancelled  { background: #FDEDEC; color: #C0392B; }
.status-appealing  { background: #FDF2E9; color: #CA6F1E; }
.status-failed     { background: #FDEDEC; color: #C0392B; }
.status-success    { background: #EAFAF1; color: #1A9850; }
.status-processing { background: #EBF5FB; color: #2471A3; }

/* ── Order Status colors ──────────────────────────────────── */
.order-status-1 { @extend .status-pending; }
.order-status-2 { background: #EAF4FB; color: #1A7CB2; }
.order-status-3 { background: #FDF2E9; color: #CA6F1E; }
.order-status-4 { background: #EAFAF1; color: #1A9850; }
.order-status-6 { background: #FDEDEC; color: #C0392B; }
.order-status-7 { background: #F2F3F4; color: #6C7A89; }

/* ── Charts Container ─────────────────────────────────────── */
.chart-card {
    background: #FFF;
    border-radius: 10px;
    padding: 1.5rem;
    border: 1px solid #E8EDF2;
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.chart-card canvas { max-height: 280px; }

/* ── Forms ────────────────────────────────────────────────── */
.form-control:focus, .form-select:focus {
    border-color: var(--p2p-crimson);
    box-shadow: 0 0 0 .2rem rgba(192,57,43,.15);
}
.btn-primary {
    background: var(--p2p-crimson);
    border-color: var(--p2p-crimson);
}
.btn-primary:hover, .btn-primary:focus {
    background: var(--p2p-crimson-dark);
    border-color: var(--p2p-crimson-dark);
}
.btn-warning { background: var(--p2p-orange-light); border-color: var(--p2p-orange-light); color: #FFF; }

/* ── Login Page ───────────────────────────────────────────── */
.login-page {
    min-height: 100vh;
    background: linear-gradient(135deg, var(--p2p-charcoal) 0%, var(--p2p-crimson-dark) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}
.login-card {
    width: 100%;
    max-width: 420px;
    background: #FFF;
    border-radius: 16px;
    padding: 2.5rem;
    box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
.login-logo { text-align: center; margin-bottom: 1.5rem; color: var(--p2p-crimson); font-size: 2.5rem; }
.login-title { text-align: center; font-weight: 700; font-size: 1.4rem; color: var(--p2p-charcoal); margin-bottom: .3rem; }
.login-subtitle { text-align: center; color: #95A5A6; font-size: .875rem; margin-bottom: 1.75rem; }

/* ── Chat ─────────────────────────────────────────────────── */
.chat-window { height: 450px; overflow-y: auto; background: #F8FAFB; border-radius: 8px; padding: 1rem; }
.chat-msg { display: flex; gap: .75rem; margin-bottom: .85rem; }
.chat-msg.own { flex-direction: row-reverse; }
.chat-bubble { max-width: 70%; padding: .55rem .9rem; border-radius: 12px; font-size: .875rem; line-height: 1.5; }
.chat-bubble-in  { background: #E8EDF2; color: var(--p2p-charcoal); border-top-left-radius: 2px; }
.chat-bubble-out { background: var(--p2p-crimson); color: #FFF; border-top-right-radius: 2px; }
.chat-time { font-size: .68rem; color: #95A5A6; margin-top: .2rem; }

/* ── Pagination ───────────────────────────────────────────── */
.pagination .page-link { color: var(--p2p-charcoal); font-size: .825rem; }
.pagination .page-item.active .page-link { background: var(--p2p-crimson); border-color: var(--p2p-crimson); }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 991.98px) {
    .sidebar { transform: translateX(calc(-1 * var(--p2p-sidebar-w))); }
    .main-content { margin-left: 0; }
    .sidebar.show { transform: translateX(0); }
    .page-content { padding: 1rem; }
}