/* ==============================================================
   4️⃣  WIDGETS
   ============================================================== */
.widget {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    padding: var(--gap-md);
    box-shadow: 0 2px 4px rgba(0,0,0,.07);
    transition: var(--transition-medium);
}
.widget:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,.12);
}
.widget .widget-title {
    font-size: 1.125rem;
    font-weight: var(--fw-medium);
    margin-bottom: var(--gap-sm);
    color: var(--color-primary);
}
.widget .widget-content {
    font-size: .9375rem;
    color: var(--color-gray-600);
}

/* Status badge inside widget (active/inactive/deleted) */
.widget .badge {
    display: inline-block;
    padding: .15rem .45rem;
    font-size: .75rem;
    font-weight: var(--fw-medium);
    border-radius: var(--radius-full);
    color: var(--color-white);
}
.widget .badge.active   { background: var(--color-success); }
.widget .badge.inactive { background: var(--color-warning); }
.widget .badge.deleted  { background: var(--color-danger); }

/* Grid of widgets */
.widgets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--gap-lg);
}