:root { --sidebar-width: 240px; }
body { background-color: #f4f7f6; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; overflow-x: hidden; }
.sidebar { background-color: #1a252f; min-height: 100vh; color: white; width: var(--sidebar-width); position: fixed; transition: all 0.3s; z-index: 1000; }
.sidebar.collapsed { margin-left: calc(-1 * var(--sidebar-width)); }
.sidebar .nav-link { color: #95a5a6; padding: 12px 20px; border-radius: 0; }
.sidebar .nav-link:hover, .sidebar .nav-link.active { background-color: #2c3e50; color: white; }
.sidebar .nav-link i { margin-right: 10px; }
.main-content { margin-left: var(--sidebar-width); padding: 20px; transition: all 0.3s; }
.main-content.expanded { margin-left: 0; }
.top-nav { background: white; padding: 10px 20px; border-bottom: 1px solid #dee2e6; margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center; }
.table-card { background: white; border-radius: 10px; padding: 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
.status-badge { padding: 5px 12px; border-radius: 20px; font-size: 0.85rem; }
.status-view { background-color: #2ecc71; color: white; }
.btn-primary-custom { background-color: #3498db; border: none; }
#sidebarToggle { cursor: pointer; }
.clickable-row { cursor: pointer; transition: background 0.2s; }
.clickable-row:hover { background-color: #f8f9fa; }

.card-stat { border: none; border-radius: 10px; color: white; padding: 20px; position: relative; overflow: hidden; }
        .card-stat .icon { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); font-size: 2.5rem; opacity: 0.8; }
        .bg-blue { background-color: #3498db; }
        .bg-green { background-color: #2ecc71; }
        .bg-orange { background-color: #f39c12; }
        .table-card { background: white; border-radius: 10px; padding: 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); margin-bottom: 20px; }
        .status-badge { padding: 5px 12px; border-radius: 20px; font-size: 0.85rem; }
        .status-view { background-color: #2ecc71; color: white; }
        .status-verify { background-color: #e67e22; color: white; }


/* Fix for charts */
canvas {
    display: block;
    width: 100% !important;
/*    height: 150px !important;
*/    max-width: 100%;
}

.table-card {
    position: relative;
    height: auto;
    min-height: 250px;
}

    /* Container for charts */
    .table-card canvas {
       
        width: 100% !important;
    }



.group-card { border: none; border-radius: 10px; transition: transform 0.2s; cursor: pointer; }
.group-card:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.contact-selection-list { max-height: 200px; overflow-y: auto; border: 1px solid #dee2e6; border-radius: 8px; padding: 10px; }
.icon-picker { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.icon-option { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border: 1px solid #dee2e6; border-radius: 5px; cursor: pointer; transition: all 0.2s; }
.icon-option:hover, .icon-option.selected { background-color: #3498db; color: white; border-color: #3498db; }

/* grouplogs */
log-card { background: white; border-radius: 10px; padding: 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }
.log-item { border-left: 3px solid #3498db; padding: 15px; margin-bottom: 15px; background: #f8f9fa; border-radius: 0 8px 8px 0; }
.log-item.success { border-left-color: #2ecc71; }
.log-item.warning { border-left-color: #f1c40f; }

/* campaigns */
.status-badge { padding: 5px 12px; border-radius: 20px; font-size: 0.85rem; cursor: pointer; }
.status-view { background-color: #2ecc71; color: white; }
.status-blue { background-color: #3498db; color: white; }
.status-orange { background-color: #f39c12; color: white; }


/* Individual */
 .content-card { background: white; border-radius: 10px; padding: 25px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); margin-bottom: 20px; }
.status-badge { padding: 5px 12px; border-radius: 20px; font-size: 0.85rem; }
.status-success { background-color: #2ecc71; color: white; }
.status-pending { background-color: #f1c40f; color: white; }


/* billing */
 .pricing-card { border: 2px solid transparent; border-radius: 10px; text-align: center; padding: 20px; transition: all 0.3s; cursor: pointer; }
.pricing-card:hover { transform: translateY(-5px); }
.pricing-card.selected { border-color: #2c3e50; box-shadow: 0 5px 15px rgba(0,0,0,0.1); }
.bg-basic { background-color: #2ecc71; color: white; }
.bg-pro { background-color: #3498db; color: white; }
.bg-premium { background-color: #9b59b6; color: white; }
.btn-outline-light-custom { border: 1px solid white; color: white; }
.btn-outline-light-custom:hover { background: white; color: #333; }


 



/* spinner */
.spinner {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 0.15em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spinner-border .75s linear infinite;
    vertical-align: middle;
    margin-right: 0.5rem;
}

@keyframes spinner-border {
    to {
        transform: rotate(360deg);
    }
}

.btn:disabled {
    cursor: not-allowed;
    opacity: 0.65;
}

.disabled-link {
    pointer-events: none;
    color: #6c757d;
    text-decoration: none;
    cursor: default;
}