/* ============================================================
   ENGAGEPAY — Global Stylesheet
   Colors are set via CSS variables from config.php
============================================================ */

* { box-sizing: border-box; }

body {
    font-family: 'Inter', sans-serif;
    background-color: #f5f6fa;
    color: #2d2d2d;
}

/* ---- BRAND COLORS ---- */
.text-primary   { color: var(--color-primary) !important; }
.bg-primary     { background-color: var(--color-primary) !important; }
.btn-primary    { background-color: var(--color-primary); border-color: var(--color-primary); }
.btn-primary:hover { background-color: var(--color-secondary); border-color: var(--color-secondary); }
.btn-outline-primary { color: var(--color-primary); border-color: var(--color-primary); }
.btn-outline-primary:hover { background-color: var(--color-primary); color: #fff; }

/* ---- NAVBAR ---- */
.navbar-brand { font-weight: 800; font-size: 1.4rem; color: var(--color-primary) !important; }
.navbar { background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.nav-link { font-weight: 500; color: #444 !important; }
.nav-link:hover, .nav-link.active { color: var(--color-primary) !important; }

/* ---- HERO ---- */
.hero-section {
    background: linear-gradient(135deg, var(--color-dark) 0%, #16213e 50%, #0f3460 100%);
    color: #fff;
    padding: 100px 0 80px;
    position: relative;
    overflow: hidden;
}
.hero-section::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(circle at 70% 50%, rgba(108,99,255,.3) 0%, transparent 60%);
}

/* ---- CARDS ---- */
.card { border: none; border-radius: 16px; box-shadow: 0 4px 20px rgba(0,0,0,.06); transition: transform .2s, box-shadow .2s; }
.card:hover { transform: translateY(-3px); box-shadow: 0 8px 30px rgba(0,0,0,.1); }

/* ---- STATS CARD ---- */
.stat-card { border-radius: 16px; padding: 24px; color: #fff; }
.stat-card.purple { background: linear-gradient(135deg, #6C63FF, #a855f7); }
.stat-card.orange { background: linear-gradient(135deg, #f97316, #ef4444); }
.stat-card.green  { background: linear-gradient(135deg, #10b981, #059669); }
.stat-card.blue   { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }

/* ---- BADGES ---- */
.badge-platform { font-size: .75rem; padding: 5px 10px; border-radius: 20px; font-weight: 600; }

/* ---- PLATFORM COLORS ---- */
.platform-twitter   { background: rgba(29,161,242,.1);  color: #1DA1F2; }
.platform-instagram { background: rgba(225,48,108,.1);  color: #E1306C; }
.platform-youtube   { background: rgba(255,0,0,.1);     color: #FF0000; }
.platform-tiktok    { background: rgba(0,0,0,.08);      color: #000;    }
.platform-facebook  { background: rgba(24,119,242,.1);  color: #1877F2; }
.platform-telegram  { background: rgba(0,136,204,.1);   color: #0088CC; }

/* ---- DASHBOARD SIDEBAR ---- */
.sidebar {
    background: var(--color-dark);
    min-height: 100vh;
    width: 260px;
    position: fixed;
    top: 0; left: 0;
    padding-top: 20px;
    z-index: 1000;
    transition: all .3s;
}
.sidebar .brand { color: #fff; font-weight: 800; font-size: 1.3rem; padding: 15px 24px 25px; display: block; }
.sidebar .nav-link { color: rgba(255,255,255,.7); padding: 12px 24px; border-radius: 0; font-size: .9rem; display: flex; align-items: center; gap: 12px; }
.sidebar .nav-link:hover, .sidebar .nav-link.active { color: #fff; background: rgba(255,255,255,.1); border-left: 3px solid var(--color-primary); }
.sidebar .nav-link i { width: 18px; }

.main-content { margin-left: 260px; padding: 30px; }

/* ---- FORMS ---- */
.form-control, .form-select {
    border-radius: 10px; border: 1.5px solid #e0e0e0;
    padding: 12px 16px; font-size: .95rem;
}
.form-control:focus, .form-select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(108,99,255,.15);
}
.btn { border-radius: 10px; font-weight: 600; padding: 10px 22px; }
.btn-lg { padding: 14px 30px; font-size: 1rem; }

/* ---- PRICING ---- */
.pricing-card { border-radius: 20px; padding: 35px 30px; position: relative; overflow: hidden; }
.pricing-card.featured { background: linear-gradient(135deg, var(--color-primary), #a855f7); color: #fff; transform: scale(1.05); }
.pricing-card.featured .text-muted { color: rgba(255,255,255,.7) !important; }
.price-amount { font-size: 2.5rem; font-weight: 800; }

/* ---- AUTH PAGES ---- */
.auth-wrapper { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--color-dark) 0%, #16213e 100%); }
.auth-card { background: #fff; border-radius: 20px; padding: 45px 40px; width: 100%; max-width: 440px; box-shadow: 0 20px 60px rgba(0,0,0,.3); }

/* ---- TASK CARD ---- */
.task-card { border-radius: 14px; border: 1.5px solid #f0f0f0; padding: 20px; transition: all .2s; }
.task-card:hover { border-color: var(--color-primary); box-shadow: 0 4px 20px rgba(108,99,255,.1); }

/* ---- ALERTS ---- */
.alert { border-radius: 12px; border: none; }

/* ---- TABLE ---- */
.table { border-radius: 12px; overflow: hidden; }
.table thead th { background: #f8f9fa; font-weight: 600; font-size: .85rem; text-transform: uppercase; letter-spacing: .5px; border: none; }

/* ---- RESPONSIVE ---- */
@media (max-width: 768px) {
    .sidebar { transform: translateX(-100%); }
    .sidebar.open { transform: translateX(0); }
    .main-content { margin-left: 0; padding: 20px 15px; }
    .pricing-card.featured { transform: scale(1); }
    .auth-card { padding: 30px 24px; margin: 20px; }
}