/* GB Marketing Email System — Main Stylesheet */

/* ===== Layout ===== */
body { font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; background: #f0f2f5; }

#wrapper { min-height: 100vh; }

/* ===== Sidebar ===== */
.sidebar {
    width: 250px; min-height: 100vh; position: fixed; left: 0; top: 0;
    z-index: 1000; overflow-y: auto; transition: transform 0.3s ease;
}
.sidebar-nav { padding: 10px 0; }
.sidebar-nav .nav-link {
    color: rgba(255,255,255,0.7); padding: 10px 20px; display: flex; align-items: center;
    gap: 10px; text-decoration: none; font-size: 0.9rem; transition: all 0.15s;
    border-left: 3px solid transparent;
}
.sidebar-nav .nav-link:hover { color: #fff; background: rgba(255,255,255,0.1); }
.sidebar-nav .nav-link.active { color: #fff; background: rgba(255,255,255,0.15); border-left-color: #dc3545; }
.nav-divider { height: 1px; background: rgba(255,255,255,0.1); margin: 8px 16px; }
.nav-section-title { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 1px; display: block; padding: 5px 0; }

/* ===== Main Content ===== */
.main-content { margin-left: 250px; width: calc(100% - 250px); overflow-x: hidden; }
.content-area { min-height: calc(100vh - 120px); }

/* ===== Cards ===== */
.stat-card { background: #fff; border-radius: 10px; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); margin-bottom: 0; }
.form-card { background: #fff; border-radius: 10px; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }

/* ===== Tables ===== */
.table { font-size: 0.9rem; }
.table thead th { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.5px; color: #666; }

/* ===== Buttons ===== */
.btn { border-radius: 6px; }
.btn-primary { background: #dc3545; border-color: #dc3545; }
.btn-primary:hover { background: #c82333; border-color: #bd2130; }
.btn-outline-primary { color: #dc3545; border-color: #dc3545; }
.btn-outline-primary:hover { background: #dc3545; color: #fff; }

/* ===== Alerts ===== */
.alert { border-radius: 8px; border: none; font-size: 0.9rem; }

/* ===== Forms ===== */
.form-control:focus, .form-select:focus { box-shadow: 0 0 0 2px rgba(220,53,69,0.15); border-color: #dc3545; }

/* ===== Table Responsive ===== */
.table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-container .table { min-width: 800px; }

/* ===== Mobile Responsive ===== */
@media (max-width: 767px) {
    .sidebar {
        transform: translateX(-100%);
        width: 260px;
    }
    .sidebar.show { transform: translateX(0); }
    .main-content { margin-left: 0; width: 100%; }
    .content-area { padding: 12px !important; }
    .topbar h4 { font-size: 1rem; }
    .stat-card { padding: 15px; }
    .form-card { padding: 15px; }

    /* Stack table actions vertically */
    .table td .d-flex { flex-direction: column; }

    /* Sidebar overlay */
    .sidebar-overlay {
        display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
        background: rgba(0,0,0,0.5); z-index: 999;
    }
    .sidebar.show ~ .sidebar-overlay { display: block; }

    /* Status cards */
    .card-body { padding: 0.5rem; }
    .fs-4 { font-size: 1.2rem !important; }

    /* Table scroll hint */
    .table-container { margin: 0 -12px; padding: 0 12px; }

    /* Pagination */
    .pagination { flex-wrap: wrap; }
    .pagination .page-link { font-size: 0.8rem; padding: 0.25rem 0.5rem; }
}

@media (min-width: 768px) and (max-width: 991px) {
    .sidebar { width: 220px; }
    .main-content { margin-left: 220px; width: calc(100% - 220px); }
    .content-area { padding: 16px !important; }
}

/* ===== Login Page ===== */
.login-card {
    max-width: 400px; margin: 80px auto; background: #fff;
    border-radius: 12px; padding: 40px; box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

/* ===== Dashboard Stats ===== */
.stat-number { font-size: 1.8rem; font-weight: 700; color: #dc3545; }
.stat-label { font-size: 0.8rem; color: #888; text-transform: uppercase; letter-spacing: 0.5px; }

/* ===== Campaign Progress ===== */
.progress { border-radius: 4px; }

/* ===== Footer ===== */
.main-footer { padding: 20px; text-align: center; color: #999; font-size: 0.8rem; border-top: 1px solid #e0e0e0; }